anentrypoint-design 0.0.191 → 0.0.192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.191",
+  "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/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

@@ -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,6 +113,9 @@
     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 {

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; }