frontend: hive-warn — replace severity+pulse with info/warning/error levels
mara, PR review: "i dont like that they still have different styling.
if anything, there should be distinction between info,warning,error
(semantics). all warnings should be styled identically."
Replaces the severity ('amber'|'red') + standalone pulse boolean with
a single level ('info'|'warning'|'error') attribute -- a fixed
three-tier ladder instead of an open combination. Colours reuse
theme.css's own already-documented semantics rather than inventing new
ones: --cyan is already "info accents", --amber already "warnings",
--red already "errors, fail state". Pulse is now baked into `error`
specifically rather than a separate opt-in knob, since the one call
site that wanted attention-grabbing (an active incident) is also the
one that's semantically error -- tying the two together removes a
combination that shouldn't exist independently of the tier.
Reclassified the three call sites explicitly (no implicit default
relied on): credentials.html's GitHub PAT advisory and core.js's K3PT
ST4T3 caveat are both `level="warning"` (same as before, and now
identical to each other by construction, not by coincidence);
swarm.js's port-collision banner is `level="error"` (an active
incident needing operator action now, not a standing caveat).
npm run build clean both packages, grepped for leftover
severity/pulse references (only prose mentions describing what this
replaces).
This commit is contained in:
parent
dfd92a7da9
commit
2ff4cddf9d
5 changed files with 39 additions and 31 deletions
|
|
@ -50,7 +50,7 @@ function renderTombstones(s) {
|
||||||
// Wording is deliberately about what the list *is* rather than what it
|
// Wording is deliberately about what the list *is* rather than what it
|
||||||
// isn't: nothing records a destroy, so "container absent" is the only thing
|
// isn't: nothing records a destroy, so "container absent" is the only thing
|
||||||
// the backend can actually tell.
|
// the backend can actually tell.
|
||||||
const warn = el('hive-warn', {});
|
const warn = el('hive-warn', { level: 'warning' });
|
||||||
warn.append(
|
warn.append(
|
||||||
el('strong', {}, 'shows every agent whose container is absent'),
|
el('strong', {}, 'shows every agent whose container is absent'),
|
||||||
' — not only destroyed ones. An agent part-way through being spawned ' +
|
' — not only destroyed ones. An agent part-way through being spawned ' +
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
Security-warning banner + a link to generate a PAT. -->
|
Security-warning banner + a link to generate a PAT. -->
|
||||||
<section class="cred-pane" id="cred-pane-github" data-tab-pane="github"
|
<section class="cred-pane" id="cred-pane-github" data-tab-pane="github"
|
||||||
role="tabpanel" aria-labelledby="cred-tab-github" hidden>
|
role="tabpanel" aria-labelledby="cred-tab-github" hidden>
|
||||||
<hive-warn>
|
<hive-warn level="warning">
|
||||||
⚠ use a <strong>dedicated bot account</strong>, not a human's —
|
⚠ use a <strong>dedicated bot account</strong>, not a human's —
|
||||||
and a <strong>minimally-scoped</strong> personal access token (only
|
and a <strong>minimally-scoped</strong> personal access token (only
|
||||||
the repos/scopes the agent actually needs, e.g. <code>repo</code> +
|
the repos/scopes the agent actually needs, e.g. <code>repo</code> +
|
||||||
|
|
|
||||||
|
|
@ -582,7 +582,7 @@ export function renderContainers(s) {
|
||||||
// rebuild. The banner sits above the agent list so it's the
|
// rebuild. The banner sits above the agent list so it's the
|
||||||
// first thing the operator sees when something's wedged.
|
// first thing the operator sees when something's wedged.
|
||||||
if (portConflicts.length) {
|
if (portConflicts.length) {
|
||||||
const banner = el('hive-warn', { severity: 'red', pulse: '' },
|
const banner = el('hive-warn', { level: 'error' },
|
||||||
el('strong', {}, '⚠ port collision'), ' — ');
|
el('strong', {}, '⚠ port collision'), ' — ');
|
||||||
const groups = portConflicts.map((c) =>
|
const groups = portConflicts.map((c) =>
|
||||||
`:${c.port} (${c.agents.join(' + ')})`).join('; ');
|
`:${c.port} (${c.agents.join(' + ')})`).join('; ');
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,20 @@
|
||||||
/* hive-warn.css — shadow-DOM stylesheet for the <hive-warn> autonomous
|
/* hive-warn.css — shadow-DOM stylesheet for the <hive-warn> autonomous
|
||||||
custom element (hive-warn.js). `severity` is an attribute on the HOST
|
custom element (hive-warn.js). `level` is an attribute on the HOST
|
||||||
(how callers set it, `hive-warn.js`'s own header explains why) —
|
(how callers set it, `hive-warn.js`'s own header explains why) —
|
||||||
`:host([severity="…"])` sets `color`/`border-color`/`background`,
|
`:host([level="…"])` sets `color`/`border-color`/`background`/
|
||||||
which the shadow content then inherits/reads via `currentColor`, same
|
whether it pulses, same pattern as hive-btn.css's `[variant]`.
|
||||||
pattern as hive-btn.css's `[variant]`. Default (no `severity` set) is
|
|
||||||
amber — the more common case among the three call sites this replaces.
|
|
||||||
|
|
||||||
Tint is a single canonical 8% for both severities — `.cred-warning`
|
Three levels, not an open-ended severity+modifier combination (mara,
|
||||||
(the amber call site) was independently written at 10%, `.tombstone-warn`
|
on review: "there should be distinction between info, warning, error
|
||||||
at 8%; picking one number is the whole point of this component
|
— all warnings should be styled identically"). Colours reuse
|
||||||
existing (mara, on review: "so they are all themed consistently"). */
|
theme.css's own documented semantics rather than inventing new
|
||||||
|
ones: --cyan is already "info accents", --amber already "warnings",
|
||||||
|
--red already "errors, fail state" (see theme.css's :root comments).
|
||||||
|
Pulse is baked into `error` specifically, not a separate opt-in
|
||||||
|
knob — the one call site that wants attention-grabbing (an active
|
||||||
|
incident) is also the one call site that's semantically `error`, so
|
||||||
|
tying the two together removes a combination that shouldn't exist
|
||||||
|
independently of the tier. */
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -20,20 +25,19 @@
|
||||||
color: var(--amber);
|
color: var(--amber);
|
||||||
background: color-mix(in srgb, var(--amber) 8%, transparent);
|
background: color-mix(in srgb, var(--amber) 8%, transparent);
|
||||||
}
|
}
|
||||||
:host([severity="red"]) {
|
:host([level="info"]) {
|
||||||
|
border-color: var(--cyan);
|
||||||
|
color: var(--cyan);
|
||||||
|
background: color-mix(in srgb, var(--cyan) 8%, transparent);
|
||||||
|
}
|
||||||
|
:host([level="error"]) {
|
||||||
border-color: var(--red);
|
border-color: var(--red);
|
||||||
color: var(--red);
|
color: var(--red);
|
||||||
background: color-mix(in srgb, var(--red) 8%, transparent);
|
background: color-mix(in srgb, var(--red) 8%, transparent);
|
||||||
}
|
/* Only `error` pulses — an active incident, not a standing caveat.
|
||||||
|
A banner that's always present and always pulsing just trains you
|
||||||
/* `pulse`: opt-in, for "something is wrong right now" rather than a
|
to stop seeing it, so `info`/`warning` deliberately stay still.
|
||||||
standing caveat — deliberately not the default. A banner that's
|
`currentColor` so the glow matches without a second colour switch. */
|
||||||
always present and always pulsing just trains you to stop seeing it
|
|
||||||
(the reasoning on the original `.tombstone-warn`, which stays
|
|
||||||
non-pulsing; `.port-conflict → severity="red" pulse` is the one
|
|
||||||
call site that wants it). `currentColor` throughout so the glow
|
|
||||||
matches whichever severity is active without a second color switch. */
|
|
||||||
:host([pulse]) {
|
|
||||||
text-shadow: 0 0 6px color-mix(in srgb, currentColor 40%, transparent);
|
text-shadow: 0 0 6px color-mix(in srgb, currentColor 40%, transparent);
|
||||||
animation: hive-warn-pulse 2.4s ease-in-out infinite;
|
animation: hive-warn-pulse 2.4s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,15 @@
|
||||||
// not three genuinely different needs.
|
// not three genuinely different needs.
|
||||||
//
|
//
|
||||||
// Purely presentational — no internal state, no lifecycle beyond
|
// Purely presentational — no internal state, no lifecycle beyond
|
||||||
// attaching its shadow root once. `severity` ('amber' | 'red', default
|
// attaching its shadow root once. `level` ('info' | 'warning' | 'error',
|
||||||
// amber) and `pulse` (boolean) are read directly by hive-warn.css's
|
// default 'warning') is read directly by hive-warn.css's
|
||||||
// `:host([...])` selectors; unlike `<hive-btn>`'s `variant`/`disabled`
|
// `:host([level="…"])` selectors — a fixed three-tier semantic ladder,
|
||||||
// there's no inner native element that needs the attribute mirrored
|
// not an open severity+modifier combination (mara, on review: "there
|
||||||
// onto it, so no `attributeChangedCallback` is needed at all.
|
// should be distinction between info, warning, error — all warnings
|
||||||
|
// should be styled identically"). Unlike `<hive-btn>`'s
|
||||||
|
// `variant`/`disabled` there's no inner native element that needs the
|
||||||
|
// attribute mirrored onto it, so no `attributeChangedCallback` is
|
||||||
|
// needed at all — the CSS reads the host attribute directly.
|
||||||
//
|
//
|
||||||
// Content is arbitrary light-DOM children through the shadow tree's
|
// Content is arbitrary light-DOM children through the shadow tree's
|
||||||
// single default `<slot>` — same reuse of the existing `<strong>`/
|
// single default `<slot>` — same reuse of the existing `<strong>`/
|
||||||
|
|
@ -19,9 +23,9 @@
|
||||||
// rewrite of their message content needed.
|
// rewrite of their message content needed.
|
||||||
//
|
//
|
||||||
// Usage:
|
// Usage:
|
||||||
// `<hive-warn>...</hive-warn>` (amber, static HTML)
|
// `<hive-warn level="warning">...</hive-warn>` (static HTML)
|
||||||
// `el('hive-warn', {}, ...)` (amber, JS-built)
|
// `el('hive-warn', { level: 'warning' }, ...)` (JS-built)
|
||||||
// `el('hive-warn', { severity: 'red', pulse: '' }, ...)` (urgent)
|
// `el('hive-warn', { level: 'error' }, ...)` (active incident, pulses)
|
||||||
|
|
||||||
import { attachShadowCss } from '../shadow-css.js';
|
import { attachShadowCss } from '../shadow-css.js';
|
||||||
import hiveWarnCss from './hive-warn.css';
|
import hiveWarnCss from './hive-warn.css';
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue