anentrypoint-design 0.0.190 → 0.0.192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.190",
+  "version": "0.0.192",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/agent-chat.js

@@ -101,27 +101,43 @@ export function AgentChat(props = {}) {
   // True when streaming but the live assistant turn already shows content/parts,
   // so its inline typing dots have stopped — a long silent tool call would
   // otherwise read as frozen. We append a standalone "working" indicator below.
-  const showWorkingTail = busy && lastMsg && lastMsg.role === 'assistant'
-    && (lastMsg.content || (Array.isArray(lastMsg.parts) && lastMsg.parts.length));
+  // A message carries content (text/parts) when it has a non-empty content
+  // string OR at least one part. Used for the empty-shell skip + working tail
+  // so an interleaved turn (parts-only, no m.content) is not treated as empty.
+  const msgHasBody = (m) => !!(m.content || (Array.isArray(m.parts) && m.parts.length));
+  const showWorkingTail = busy && lastMsg && lastMsg.role === 'assistant' && msgHasBody(lastMsg);
   const rows = messages.map((m, i) => {
     const isAssistant = m.role === 'assistant';
     const isStreaming = busy && i === lastIdx && isAssistant;
     const hasParts = Array.isArray(m.parts) && m.parts.length > 0;
-    const emptyStreaming = isStreaming && !m.content && !hasParts;
+    const emptyStreaming = isStreaming && !msgHasBody(m);
     // A finished assistant message with no content and no parts is an empty
     // shell (e.g. an aborted turn) — render nothing rather than a blank bubble.
-    if (!isStreaming && isAssistant && !m.content && !hasParts) return null;
+    if (!isStreaming && isAssistant && !msgHasBody(m)) return null;
+    // Render order follows m.parts so text and tool cards INTERLEAVE in arrival
+    // order (text -> tool -> text -> tool). A message's parts may be bare
+    // strings (legacy) OR structured {kind,...} objects (md/tool/tool_result/
+    // code/...) passed straight through to ChatMessage.renderPart — this is what
+    // lets an orchestration host render the kit's collapsible ToolCallNode
+    // inline instead of flattening tools to the end of the turn.
     const parts = [];
-    if (m.content) parts.push({ kind: isAssistant ? 'md' : 'text', text: m.content });
-    // A message's parts may be bare strings (legacy text lines) OR structured
-    // part objects ({ kind:'tool'|'tool_result'|'code'|..., ... }). Pass the
-    // structured objects straight through to ChatMessage's renderPart so the
-    // host can surface real tool cards / code blocks; wrap only bare strings as
-    // text. This is what lets an orchestration host (agentgui) render the kit's
-    // collapsible ToolCallNode instead of flattening tools into plain text.
-    if (hasParts) for (const p of m.parts) {
-      parts.push((p && typeof p === 'object' && p.kind) ? p : { kind: 'text', text: String(p) });
+    if (hasParts) {
+      for (const p of m.parts) {
+        const part = (p && typeof p === 'object' && p.kind) ? p : { kind: 'text', text: String(p) };
+        // While a turn is still streaming, render its prose as cheap inline text
+        // rather than full markdown: MdNode re-parses + re-sanitizes the WHOLE
+        // accumulated source and swaps the entire bubble innerHTML on every frame
+        // (O(n^2) over the turn, with a visible reflow). Downgrade md -> text
+        // mid-stream; the settled turn below renders real markdown once.
+        if (isStreaming && part.kind === 'md') parts.push({ kind: 'text', text: part.text });
+        else parts.push(part);
+      }
     }
+    // m.content is the legacy/simple path (user messages, hosts that don't build
+    // interleaved parts). Only prepend it when the parts array doesn't already
+    // carry prose, so a parts-driven turn isn't double-rendered.
+    const partsHaveProse = parts.some(p => p.kind === 'md' || p.kind === 'text');
+    if (m.content && !partsHaveProse) parts.unshift({ kind: isAssistant ? 'md' : 'text', text: m.content });
     return ChatMessage({
       key: m.id || String(i),
       who: isAssistant ? 'them' : 'you',
@@ -172,7 +188,10 @@ export function AgentChat(props = {}) {
     h('div', { class: 'agentchat-head', role: 'banner' },
       h('h2', { class: 'agentchat-title' }, name + (selectedModel ? ' · ' + selectedModel : '')),
       h('span', { class: 'agentchat-sub', 'aria-live': 'polite' },
-        busy ? 'streaming…' : (messages.length ? messages.length + (messages.length === 1 ? ' message' : ' messages') : ''))),
+        // Derive the busy label from the same status prop the controls use, so a
+        // reconnecting-while-streaming state reads one word everywhere instead of
+        // the head saying "streaming…" while the controls say "reconnecting…".
+        busy ? (status || 'streaming…') : (messages.length ? messages.length + (messages.length === 1 ? ' message' : ' messages') : ''))),
     h('div', { class: 'agentchat-thread', ref: threadRef(messages.length), role: 'log', 'aria-label': 'conversation' },
       emptyState,
       ...rows.filter(Boolean),

package/src/components/chat.js

@@ -92,8 +92,12 @@ function MdNode(p) {
 function CodeNode(p) {
     const refSink = (el) => {
         if (!el) return;
-        if (el.dataset.codeKey === (p.lang || '') + '|' + (p.code || '').length) return;
-        el.dataset.codeKey = (p.lang || '') + '|' + (p.code || '').length;
+        // Key on the full code, not its length: two different blocks of the same
+        // length (e.g. an edit that swaps a line) would otherwise share a key and
+        // skip re-highlighting, leaving stale syntax coloring.
+        const codeKey = (p.lang || '') + '|' + (p.code || '');
+        if (el.dataset.codeKey === codeKey) return;
+        el.dataset.codeKey = codeKey;
         highlightCodeBlockCached(el);
     };
     return h('div', { class: 'chat-bubble chat-code', ref: refSink },

package/src/components/content.js

@@ -20,7 +20,7 @@ export function Panel({ title, count, right, style = '', children, kind }) {
 // Card — semantic alias of Panel; behaves identically.
 export const Card = Panel;
 
-export function Row({ code, rank, title, sub, meta, active, state = 'default', onClick, key, style, href, kind, cols, leading, trailing, target, selected, rail }) {
+export function Row({ code, rank, title, sub, meta, active, state = 'default', onClick, key, style, href, kind, cols, leading, trailing, target, selected, rail, expanded }) {
     // `rank` is an alias for `code` (the leading monospace index); callers use
     // either name. `rail` renders a thin colour bar at the row's leading edge as
     // a status indicator (tone: green | purple | flame | <any token>).
@@ -45,6 +45,10 @@ export function Row({ code, rank, title, sub, meta, active, state = 'default', o
         props.onkeydown = (e) => {
             if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(e); }
         };
+        // When the row is a disclosure toggle (host passes a boolean `expanded`),
+        // announce its open/closed state so AT users hear "expanded/collapsed".
+        // Omitted entirely for plain action buttons (expanded === undefined).
+        if (expanded === true || expanded === false) props['aria-expanded'] = expanded ? 'true' : 'false';
     }
     if (isDisabled) props['aria-disabled'] = 'true';
     if (isActive && (isLink || isButton)) props['aria-current'] = isActive ? 'page' : null;
@@ -333,7 +337,10 @@ export function EventList({ items, events, emptyText = 'no events', rankPad = 3
             active: it.active,
             onClick: it.onClick,
             kind: it.kind,
-            rail: it.rail
+            rail: it.rail,
+            // Forward a disclosure state when the host marks the row as a toggle,
+            // so a clickable event row announces aria-expanded.
+            expanded: it.expanded
         }))
     );
 }

package/src/components/shell.js

@@ -131,8 +131,28 @@ const ICON_PATHS = {
     'skip-forward': '<path d="M5 5v14l9-7z"/><path d="M19 5v14"/>',
     'chevron-left': '<path d="m15 6-6 6 6 6"/>',
     trash: '<path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13"/>',
-    'external-link': '<path d="M14 4h6v6M20 4l-9 9M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6"/>'
+    'external-link': '<path d="M14 4h6v6M20 4l-9 9M19 13v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h6"/>',
+    // theme-toggle icons (replace decorative sun/moon/contrast text glyphs)
+    sun: '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
+    moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/>',
+    contrast: '<circle cx="12" cy="12" r="9"/><path d="M12 3v18a9 9 0 0 0 0-18z" fill="currentColor"/>',
+    // file-browser icons (replace folder/file emoji + arrow glyphs in fs apps)
+    folder: '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+    upload: '<path d="M12 16V4M7 9l5-5 5 5"/><path d="M5 20h14"/>',
+    download: '<path d="M12 4v12M7 11l5 5 5-5"/><path d="M5 20h14"/>',
+    'corner-up-left': '<path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 5 5v6"/>'
 };
+// Raw-DOM consumers (no webjsx render in scope) need the SVG as a markup string
+// rather than an h() vnode. Same path table, same viewBox/stroke contract as
+// Icon(); use innerHTML = iconMarkup(name). Keeps the icon paths upstream so
+// raw-DOM call sites never reintroduce decorative glyph literals.
+export function iconMarkup(name, { size = 16 } = {}) {
+    const inner = ICON_PATHS[name];
+    if (!inner) return '';
+    return '<svg class="ds-icon ds-icon-' + name + '" width="' + size + '" height="' + size +
+        '" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="var(--ds-icon-stroke, 1.6)"' +
+        ' stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + inner + '</svg>';
+}
 export function Icon(name, { size = 16 } = {}) {
     const inner = ICON_PATHS[name];
     if (!inner) return h('span', { class: 'glyph', 'aria-hidden': 'true' }, '');

package/src/kits/os/app-panes.css

@@ -1,7 +1,7 @@
 /* App-pane chrome for kit components rendered inside .wm-win bodies.
    Bible tokens only — no hardcoded color, font, or radius. Focus = inset rail; no shadows, no gradients. */
 
-/* ── terminal-app ───────────────────────────────────────────────────── */
+/* --- terminal-app --- */
 .terminal-app {
     display: flex;
     flex-direction: column;
@@ -48,7 +48,7 @@
 }
 .terminal-app-slot > * { width: 100%; height: 100%; }
 
-/* ── browser-app ────────────────────────────────────────────────────── */
+/* --- browser-app --- */
 .browser-app {
     display: flex;
     flex-direction: column;
@@ -79,6 +79,9 @@
 }
 .browser-app-btn:hover { background: var(--os-accent-soft); }
 .browser-app-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--os-accent); }
+/* Inert back/forward when there's no history in that direction. */
+.browser-app-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
+.browser-app-btn:disabled:hover { background: var(--os-bg-3); }
 .browser-app-url {
     flex: 1 1 auto;
     min-width: 0;
@@ -110,8 +113,11 @@
     text-transform: lowercase;
     min-height: 18px;
 }
+/* Loading: a thin indeterminate bar under the toolbar. Error: red status row. */
+.browser-app-loading .browser-app-bar { box-shadow: inset 0 -2px 0 var(--os-accent); }
+.browser-app[data-error] .browser-app-status { color: var(--os-danger, #c0392b); }
 
-/* ── validator-app ──────────────────────────────────────────────────── */
+/* --- validator-app --- */
 .validator-app {
     display: flex;
     flex-direction: column;

package/src/kits/os/browser-app.js

@@ -1,7 +1,10 @@
 // Browser-pane paint surface — URL bar + iframe slot + status row. Consumer owns iframe.
 // renderBrowserPane({initialUrl, callbacks: {onNavigate, onReload, onBack, onForward}})
-//   -> {node, slot, setUrl, setStatus, dispose}.
+//   -> {node, slot, setUrl, setStatus, setNav, setLoading, setError, dispose}.
 // slot is the container the consumer should append its iframe to.
+// setNav({canBack,canForward}) disables the back/forward buttons when history
+// has no entry in that direction; setLoading(bool) toggles a loading state on
+// the bar; setError(msg|null) surfaces a load failure in the status row.
 
 export function renderBrowserPane(opts = {}) {
     const { initialUrl = 'about:blank', callbacks = {} } = opts;
@@ -21,8 +24,14 @@ export function renderBrowserPane(opts = {}) {
         return b;
     };
     const backBtn = mkBtn('<', 'back');
+    backBtn.setAttribute('aria-label', 'Back');
     const fwdBtn = mkBtn('>', 'forward');
+    fwdBtn.setAttribute('aria-label', 'Forward');
     const reloadBtn = mkBtn('reload', 'reload');
+    reloadBtn.setAttribute('aria-label', 'Reload');
+    // Start with no history in either direction until the consumer says otherwise.
+    backBtn.disabled = true;
+    fwdBtn.disabled = true;
 
     const urlInput = document.createElement('input');
     urlInput.type = 'text';
@@ -44,6 +53,8 @@ export function renderBrowserPane(opts = {}) {
 
     const status = document.createElement('div');
     status.className = 'browser-app-status';
+    status.setAttribute('role', 'status');
+    status.setAttribute('aria-live', 'polite');
     status.textContent = '';
 
     node.append(bar, slot, status);
@@ -53,6 +64,22 @@ export function renderBrowserPane(opts = {}) {
         get slot() { return slot; },
         setUrl(u) { urlInput.value = u; },
         setStatus(s) { status.textContent = s; },
+        // Reflect history availability so disabled buttons read as inert.
+        setNav({ canBack = false, canForward = false } = {}) {
+            backBtn.disabled = !canBack;
+            fwdBtn.disabled = !canForward;
+        },
+        // Loading: tint the bar + announce; the consumer flips it off on load/error.
+        setLoading(on) {
+            node.classList.toggle('browser-app-loading', !!on);
+            if (on) { node.removeAttribute('data-error'); status.textContent = 'loading...'; }
+        },
+        // Error: persistent failure surfaced in the live status row.
+        setError(msg) {
+            node.classList.remove('browser-app-loading');
+            if (msg) { node.setAttribute('data-error', '1'); status.textContent = msg; }
+            else { node.removeAttribute('data-error'); }
+        },
         dispose() {},
     };
 }

package/src/kits/os/theme.css

@@ -139,6 +139,18 @@ html, body {
 }
 .os-menu .os-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
 
+/* Collapsible "System" apps group inside the apps menu. thebird's os-shell.js
+ * builds the group structurally and toggles only the list's display; the static
+ * layout (column flow + indent + arrow alignment) lives here so no visual rule
+ * leaks back into thebird JS (zero-design-CSS contract). */
+.os-menu-group { display: flex; flex-direction: column; gap: 2px; }
+.os-menu-system-toggle { display: flex; align-items: center; gap: 6px; }
+.os-menu-system-arrow { display: inline-flex; align-items: center; transition: transform 120ms ease; }
+.os-menu-system-arrow .ds-icon { width: 14px; height: 14px; }
+.os-menu-system-list { display: none; flex-direction: column; padding-left: 14px; }
+.os-menu-system-toggle[aria-expanded="true"] + .os-menu-system-list { display: flex; }
+@media (prefers-reduced-motion: reduce) { .os-menu-system-arrow { transition: none; } }
+
 .os-clock {
     color: var(--os-fg-2);
     font-variant-numeric: tabular-nums;
@@ -223,13 +235,19 @@ html, body {
     height: 14px !important;
     color: var(--os-fg-3);
     opacity: 0.4;
-    font: 10px var(--os-mono);
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-    line-height: 1;
 }
-.wm-resize::after { content: '\25E2'; }
+/* Resize grip via CSS gradient (matches wm.css); no decorative content glyph. */
+.wm-resize::after {
+    content: '';
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 8px;
+    height: 8px;
+    background:
+        linear-gradient(135deg, transparent 0 45%, currentColor 45% 55%, transparent 55% 100%),
+        linear-gradient(135deg, transparent 0 70%, currentColor 70% 80%, transparent 80% 100%);
+}
 .wm-body { background: var(--os-bg-1) !important; }
 
 .os-side-rail {
@@ -474,6 +492,17 @@ html, body {
     --os-bar-h: 34px !important;
     --os-bar-h-mobile: 34px !important;
     --os-dock-h: 34px !important;
+    /* Brand identity, scoped so it never leaks to other portfolio consumers.
+     * The base theme's auto/paper/ink presets let --accent drift to the bright
+     * --green-2 (#3A9A34) in ink mode; thebird's brand accent is the deep green
+     * #247420 (--green) in EVERY resolved mode, and its paper is the warm
+     * #F5F0E4 variant. Re-assert both here rather than forcing the consumer to
+     * opt into [data-theme="thebird"], which the OS boots past with
+     * data-theme="auto". --accent-bright is pinned too so the ink-mode
+     * --accent: var(--accent-bright, ...) chain still resolves to brand green. */
+    --accent: var(--green) !important;
+    --accent-bright: var(--green) !important;
+    --paper: #F5F0E4;
 }
 /* Window titlebar matches the 34px bar height; clamp so menubar/taskbar/titlebar
  * heights are uniform. */
@@ -511,11 +540,14 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .wm-snap-preview {
   position: fixed;
   pointer-events: none;
+  display: none;
   z-index: 9050;
   background: color-mix(in oklab, var(--os-accent) 20%, transparent);
   border: 2px solid var(--os-accent);
   border-radius: 8px;
-  transition: all 120ms ease;
+  /* Animate only geometry, never `all` — `transition: all` animated display/
+   * opacity too, producing a one-frame ghost on show (jank-pass fix). */
+  transition: left 80ms ease, top 80ms ease, width 80ms ease, height 80ms ease;
 }
 @media (prefers-reduced-motion: reduce) {
   .ds-247420 .wm-snap-preview { transition: none; }
@@ -807,11 +839,16 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .fsb-list { flex: 1; min-height: 0; overflow: auto; padding: .3em 0; }
 .ds-247420 .fsb-row { display: flex; align-items: center; gap: .6em; padding: .35em .7em; cursor: pointer; border: 0; }
 .ds-247420 .fsb-row:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
+.ds-247420 .fsb-row:focus-visible { outline: 2px solid var(--os-accent); outline-offset: -2px; background: color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .fsb-icon { width: 1.3em; text-align: center; flex: 0 0 auto; }
 .ds-247420 .fsb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ds-247420 .fsb-size { opacity: .55; font-size: 11px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
 .ds-247420 .fsb-actions { display: flex; gap: .3em; flex: 0 0 auto; opacity: 0; }
-.ds-247420 .fsb-row:hover .fsb-actions { opacity: 1; }
+/* Reveal row actions on hover OR keyboard focus-within OR coarse-pointer (touch),
+ * so they aren't hover-only dead controls for keyboard/touch users. */
+.ds-247420 .fsb-row:hover .fsb-actions,
+.ds-247420 .fsb-row:focus-within .fsb-actions { opacity: 1; }
+@media (hover: none) { .ds-247420 .fsb-actions { opacity: 1; } }
 .ds-247420 .fsb-act { all: unset; cursor: pointer; padding: .1em .35em; border-radius: 5px; opacity: .7; font-size: 12px; }
 .ds-247420 .fsb-act:hover { opacity: 1; background: color-mix(in oklab, var(--fg) 12%, transparent); }
 .ds-247420 .fsb-empty { opacity: .5; padding: 1.5em; text-align: center; font-style: italic; }
@@ -829,13 +866,9 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .wm-context-menu-item { display: block; width: 100%; padding: 7px 10px; border: none; border-radius: 4px; background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; font-size: 13px; }
 .ds-247420 .wm-context-menu-item:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
 
-/* ---- wm snap preview (was: docs/wm.js snapPreviewEl cssText) ---- */
-.ds-247420 .wm-snap-preview { position: fixed; z-index: 9050; background: var(--os-accent, #247420); opacity: 0.22; border: 2px solid var(--os-accent, #247420); border-radius: 6px; pointer-events: none; display: none; transition: left 80ms ease, top 80ms ease, width 80ms ease, height 80ms ease; }
-
-/* ---- wm alt-tab switcher (was: docs/wm.js switcherEl cssText) ---- */
-.ds-247420 .wm-switcher { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16px 20px; background: var(--panel-2, #1a1a1a); border: 1px solid var(--os-accent, #247420); border-radius: 8px; z-index: 9600; font-family: var(--ff-ui); color: var(--fg, #fff); min-width: 240px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); }
-.ds-247420 .wm-switcher-row { padding: 8px 12px; border-radius: 4px; margin: 2px 0; cursor: pointer; }
-.ds-247420 .wm-switcher-row.is-active { background: color-mix(in oklab, var(--os-accent) 25%, transparent); }
+/* (legacy duplicate .wm-snap-preview + .wm-switcher-row/.is-active blocks
+ * removed — superseded by the canonical .wm-snap-preview + .wm-switcher /
+ * .wm-switcher-item.active rules above; the JS now emits .wm-switcher-item.) */
 
 /* ---- todo app (was: docs/apps.js todo-app cssText) ---- */
 .ds-247420 .tb-todo-bar { display: flex; gap: 6px; margin-bottom: 8px; }

package/src/kits/os/wm.css

@@ -92,15 +92,22 @@
     background: transparent;
     color: var(--os-fg-3);
     opacity: 0.4;
-    font: 10px var(--os-mono);
-    line-height: 1;
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
     touch-action: none;
 }
 .wm-resize:hover { opacity: 0.7; }
-.wm-resize::after { content: '\25E2'; }
+/* Resize grip drawn with CSS (two diagonal hairlines) instead of a decorative
+ * unicode content glyph; keeps the affordance, drops the glyph tell. */
+.wm-resize::after {
+    content: '';
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 9px;
+    height: 9px;
+    background:
+        linear-gradient(135deg, transparent 0 45%, currentColor 45% 55%, transparent 55% 100%),
+        linear-gradient(135deg, transparent 0 70%, currentColor 70% 80%, transparent 80% 100%);
+}
 
 .wm-win.wm-min .wm-body,
 .wm-win.wm-min .wm-resize { display: none; }