anentrypoint-design 0.0.477 → 0.0.480

package/src/css/app-shell/states-interactions.css

@@ -34,12 +34,26 @@ tr.clickable:focus-visible {
 .btn:disabled, .btn-primary:disabled, .btn-ghost:disabled,
 .btn.is-disabled, .btn-primary.is-disabled, .btn-ghost.is-disabled,
 button:disabled, [disabled] {
-  opacity: 0.45;
+  opacity: 0.5;
   filter: grayscale(60%);
   cursor: not-allowed;
   pointer-events: none;
 }
 
+/* Systemic hover fallback — button-like elements with no design-system class
+   (a bare <button>, [role="button"], or a generic .row/.chip usage) get a
+   `transition` declared above (line ~106) but nothing to transition to, so
+   they look inert until clicked. This is a low-specificity (0,0,1)/(0,1,1)
+   catch-all: any element that also carries `.btn`/`.btn-primary`/`.btn-ghost`/
+   `.ds-icon-btn`/etc. keeps its own component `:hover` (those selectors are
+   equal-or-higher specificity and, for the shared ones, declared later in
+   the cascade), so this never overrides a deliberate per-component hover —
+   it only fills the gap for elements that don't have one. */
+button:not(:disabled):hover,
+[role="button"]:not([aria-disabled="true"]):hover {
+  background-color: var(--panel-hover, var(--bg-3));
+}
+
 /* Loading state — spinning indicator */
 @keyframes spinner-rotate {
   from { transform: rotate(0deg); }
@@ -47,10 +61,12 @@ button:disabled, [disabled] {
 }
 /* Reusable spin utility: rotates the element (e.g. a refresh Icon used as a
    busy indicator) via the shared spinner-rotate keyframe. Respects reduced
-   motion. Use instead of a decorative rotation glyph. */
+   motion. Use instead of a decorative rotation glyph.
+   Ring spinner — use for larger blocking/full-region loading states. */
 .ds-spin { animation: spinner-rotate 0.8s linear infinite; transform-origin: center; }
 @media (prefers-reduced-motion: reduce) { .ds-spin { animation: none; } }
 
+/* Ring spinner — use for larger blocking/full-region loading states. */
 .loading { position: relative; }
 .loading::after {
   content: '';
@@ -477,7 +493,7 @@ hr.rule-dotted { border-top: 2px dotted var(--rule-strong); }
   background: var(--accent-ink); border-color: var(--accent-ink);
 }
 .ds-toggle[aria-checked="true"] .ds-toggle-knob {
-  background: var(--panel-0, #fff);
+  background: var(--panel-0, var(--bg));
   transform: translateX(18px);
 }
 .ds-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -611,7 +627,7 @@ hr.rule-dotted { border-top: 2px dotted var(--rule-strong); }
 .ds-field input:not(.input):disabled,
 .ds-field textarea:not(.input):disabled,
 .ds-field .ds-select:disabled {
-  opacity: .55;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 .ds-field input:not(.input)[aria-invalid="true"],
@@ -825,3 +841,45 @@ input[type="password"]:not(:placeholder-shown) + .input-clear {
     max-width: none;
   }
 }
+
+/* Stacking host for the imperative toast()/<Toast> component
+   (src/components/editor-primitives/toast.js). One fixed-position column;
+   individual toasts are appended/removed as siblings inside it rather than
+   each toast fixed-positioning itself, so more than one toast in flight
+   stacks instead of overlapping at the same bottom-right point. */
+.ds-ep-toast-host {
+  position: fixed; z-index: var(--z-toast);
+  bottom: 24px; right: 24px;
+  display: flex; flex-direction: column-reverse; gap: var(--space-2);
+  pointer-events: none;
+}
+.ds-ep-toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: var(--space-3);
+  background: var(--bg-2); color: var(--fg);
+  border: 1px solid var(--rule);
+  border-radius: var(--r-2);
+  padding: var(--space-3) var(--space-4);
+  max-width: 320px;
+  box-shadow: var(--shadow-overlay);
+  font-size: var(--fs-sm);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .ds-ep-toast { animation: toast-slide-in 0.3s ease-out; }
+  .ds-ep-toast.leaving { animation: toast-slide-in 0.2s ease-in reverse; }
+}
+.ds-ep-toast.kind-error   { border-color: var(--danger, var(--warn)); }
+.ds-ep-toast.kind-success { border-color: var(--green-2); }
+.ds-ep-toast.kind-warning { border-color: var(--amber); }
+.ds-ep-toast-msg { flex: 1; }
+.ds-ep-toast-action {
+  flex-shrink: 0;
+  background: transparent; border: 0; color: var(--accent-ink);
+  font: inherit; font-weight: 600; cursor: pointer; padding: 0;
+}
+.ds-ep-toast-action:hover { text-decoration: underline; }
+
+@media (max-width: 480px) {
+  .ds-ep-toast-host { bottom: 16px; right: 16px; left: 16px; }
+  .ds-ep-toast { max-width: none; }
+}

package/src/css/app-shell/topbar.css

@@ -80,6 +80,7 @@ body.canvas-host { background: transparent !important; }
 .app-topbar > .brand { flex: 0 0 auto; }
 .app-topbar > .app-search { flex: 1 1 auto; }
 .app-topbar > nav { margin-left: auto; }
+.app-topbar > .app-topbar-theme { flex: 0 0 auto; }
 .app-topbar nav { display: flex; gap: 4px; font-size: var(--fs-sm); flex-wrap: wrap; }
 .app-topbar nav a { flex: 0 0 auto; }
 .app-topbar nav a {

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

@@ -17,6 +17,7 @@
     gap: var(--space-2);
     padding: var(--space-1) var(--space-2);
     background: var(--os-bg-2);
+    border-bottom: 1px solid color-mix(in oklab, var(--os-accent) 35%, transparent);
     font-family: var(--os-mono);
     font-size: 11px;
     color: var(--os-fg-2);
@@ -32,7 +33,7 @@
 }
 .terminal-app-status {
     font-family: var(--os-mono);
-    color: var(--os-fg-3);
+    color: var(--os-accent);
     flex: 0 0 auto;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -43,7 +44,7 @@
     min-width: 0;
     min-height: 0;
     overflow: hidden;
-    background: var(--os-bg-0);
+    background: var(--os-bg-1);
     position: relative;
 }
 .terminal-app-slot > * { width: 100%; height: 100%; }

package/src/kits/os/icons.js

@@ -29,6 +29,22 @@ const OS_PATHS = {
     // other icon in this kit instead of raw ASCII glyph text (-/+/x).
     minimize: '<path d="M5 12h14"/>',
     maximize: '<rect x="5" y="5" width="14" height="14" rx="1"/>',
+    // Remaining os-app glyphs, added so every app-menu entry in the shared
+    // registry (thebird's apps.js) resolves a real icon instead of falling
+    // through buildAppEntries()'s `icons[app.id] || ''` empty-span case.
+    // Concepts that already exist in ICON_PATHS are reused directly; the rest
+    // get their own path data following this module's own house style.
+    workspaces: ICON_PATHS.grid,
+    gm: ICON_PATHS.activity,
+    todo: ICON_PATHS['check-check'],
+    config: ICON_PATHS.settings,
+    notes: ICON_PATHS['file-text'],
+    counter: ICON_PATHS.plus,
+    snake: '<path d="M4 6c0 4 3 2 3 6s-3 2-3 6M17 6a3 3 0 0 1 0 6h-6a3 3 0 0 0 0 6h6"/>',
+    'snake-ecs': '<path d="M4 6c0 4 3 2 3 6s-3 2-3 6M17 6a3 3 0 0 1 0 6h-6a3 3 0 0 0 0 6h6"/><circle cx="19" cy="6" r="1.5" fill="currentColor"/>',
+    boids: '<path d="M12 4l4 8-4-2-4 2z"/><path d="M5 15l3 5-3-1-2 1z"/><path d="M19 15l-3 5 3-1 2 1z"/>',
+    'level-editor': '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M3 9h18"/>',
+    'game-player': '<rect x="2" y="7" width="20" height="10" rx="4"/><path d="M8 10v4M6 12h4"/><circle cx="16" cy="10.5" r="1"/><circle cx="18.5" cy="13" r="1"/>',
 };
 
 // iconMarkup() only resolves names already registered in the shared

package/src/kits/os/shell-geometry.js

@@ -37,8 +37,8 @@ export function computeSpawnRect(sz, openCount) {
     const scaled = small ? sz : scaleSpawnSize(sz, vw, vh);
     const w = Math.min(scaled.w, vw);
     const h = Math.min(scaled.h, vh);
-    const x = Math.max(0, Math.min(100 + (openCount * 28) % 240, vw - w));
-    const y = Math.max(0, Math.min(80 + (openCount * 22) % 180, vh - h));
+    const x = Math.max(0, Math.min(100 + (openCount * 36) % 288, vw - w));
+    const y = Math.max(0, Math.min(80 + (openCount * 28) % 224, vh - h));
     return { w, h, x, y, maximized: small };
 }
 

package/src/kits/os/shell.js

@@ -6,8 +6,9 @@
 
 import {
     ensureCss, buildMenubar, buildAppsMenu, buildSideRail, buildDrawer,
-    buildTaskbar, buildAppEntries,
+    buildTaskbar, buildAppEntries, ic,
 } from './shell-chrome.js';
+import { icons } from './icons.js';
 import { computeSpawnRect, reflowWindows } from './shell-geometry.js';
 
 export function createDesktopShell({ root = document.body, wm, registry, brand = 'desktop', themeUrl, onNewInstance, autoBoot = false } = {}) {
@@ -171,8 +172,15 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
             const t = document.createElement('button');
             t.className = 'os-task' + (w.focused ? ' focused' : '');
             t.type = 'button';
-            t.textContent = w.title;
             t.dataset.winId = w.id;
+            // Same icon-resolution order as buildAppEntries (menu/rail/drawer):
+            // the registered app's own icon, falling back to the id-keyed
+            // default set — so a taskbar entry always matches its apps-menu
+            // counterpart instead of reading as unrelated text-only chrome.
+            const app = w.appId && (typeof registry.get === 'function' ? registry.get(w.appId) : registry[w.appId]);
+            const iconSvg = (app && app.icon) || icons[w.appId] || '';
+            if (iconSvg) t.append(ic(iconSvg));
+            t.append(Object.assign(document.createElement('span'), { className: 'os-task-label', textContent: w.title }));
             // aria-current announces which window is the active one; a
             // sighted user reads this from the .focused visual state alone.
             if (w.focused) t.setAttribute('aria-current', 'true');
@@ -194,7 +202,20 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
     function makeLoadingNode() {
         const n = document.createElement('div');
         n.className = 'app-pane os-app-loading';
-        n.textContent = 'loading…';
+        n.setAttribute('role', 'status');
+        n.setAttribute('aria-live', 'polite');
+        n.setAttribute('aria-label', 'loading');
+        const spinner = document.createElement('div');
+        spinner.className = 'ds-spinner';
+        spinner.setAttribute('aria-hidden', 'true');
+        spinner.appendChild(document.createElement('span'));
+        spinner.appendChild(document.createElement('span'));
+        spinner.appendChild(document.createElement('span'));
+        const label = document.createElement('span');
+        label.className = 'os-app-loading-label';
+        label.textContent = 'loading…';
+        n.appendChild(spinner);
+        n.appendChild(label);
         return n;
     }