anentrypoint-design 0.0.487 → 0.0.489

package/README.md

@@ -132,7 +132,8 @@ onMounted(() => {
 - **chat** — `Chat`, `ChatMessage`, `ChatComposer`, `AICat`, `AICatPortrait`
 - **multi-agent chat shell** — `WorkspaceShell`, `WorkspaceRail`, `ConversationList`, `AgentChat`, `SessionDashboard` — the flagship desktop-class chat-agent product surface (persistent rail + resizable columns + full turn/tool-call thread + live multi-session dashboard). See `COMPONENT_API.md` for the full prop contract; a runnable mock-data demo lives at `ui_kits/workspace/`; the canonical real-world wiring ships at [`agentgui`](https://github.com/AnEntrypoint/agentgui).
 - **file browser** — `FileRow`, `FileGrid`, `FileToolbar`, `FileIcon`, `DropZone`, `UploadProgress`, `EmptyState`, `BreadcrumbPath`, plus modal pieces `FileViewer`, `FilePreviewMedia`, `FilePreviewCode`, `FilePreviewText`, `ConfirmDialog`, `PromptDialog`
-- **ui_kits** — 20 fully-working buildless examples loading the SDK from this repo: `homepage`, `project_page`, `docs`, `blog`, `chat`, `aicat`, `file_browser`, `dashboard`, `settings`, `search`, `terminal`, `gm_inspector`, `workspace`, `community`, `community-app`, `gallery`, `signin`, `error_404`, `slide_deck`, `system_primer`. (`_template` is the scaffold source, not a kit: it holds `index.html.tmpl` — a build input full of `{{VAR}}` placeholders — and deliberately serves no page.) Each kit's stylesheet `<link>` set is declared in `ui_kits/kits.config.mjs` and emitted by the scaffold generator (`npm run generate:ui-kits`) — never hand-edit a kit's generated `index.html`; `npm run lint:ui-kits` checks them against generated output.
+- **desktop-shell (os kit)** — `createDesktopShell`, `renderWindow`, `renderDock`, plus paint surfaces `renderAboutApp`, `renderBrowserPane`, `renderFilesApp`, `renderMonitorApp`, `renderTerminal`, `createFreddieDashboard` (`src/kits/os/`, package export `ds/kits/os/index.js`). Pure visual/DOM-rendering layer — window-manager state (z-order, focus stack, drag/resize math) and app lifecycle are owned by the consumer. A runnable demo (self-contained window manager + 2 apps) lives at `ui_kits/os/`; the canonical real-world wiring — the full multi-instance web OS (per-instance filesystem/worker/POSIX-shell, the complete app catalog) — ships at [`thebird`](https://github.com/AnEntrypoint/thebird), which vendors this kit via `scripts/refresh-design.mjs`.
+- **ui_kits** — 21 fully-working buildless examples loading the SDK from this repo: `homepage`, `project_page`, `docs`, `blog`, `chat`, `aicat`, `file_browser`, `dashboard`, `settings`, `search`, `terminal`, `gm_inspector`, `workspace`, `community`, `community-app`, `gallery`, `signin`, `error_404`, `slide_deck`, `system_primer`, `os`. (`_template` is the scaffold source, not a kit: it holds `index.html.tmpl` — a build input full of `{{VAR}}` placeholders — and deliberately serves no page.) Each kit's stylesheet `<link>` set is declared in `ui_kits/kits.config.mjs` and emitted by the scaffold generator (`npm run generate:ui-kits`) — never hand-edit a kit's generated `index.html`; `npm run lint:ui-kits` checks them against generated output.
 
 The file-browser surface (rails by file type, drop-zone upload, modal preview) ships its canonical real-world wiring at [`fsbrowse`](https://github.com/AnEntrypoint/fsbrowse) — Express + busboy backend, the SDK frontend.
 

package/chat.css

@@ -530,7 +530,7 @@
 .ds-session-agent { font-size: var(--fs-tiny); color: var(--fg-3); }
 /* New-activity cue is a hollow accent RING so it stays shape-distinct from the
    running live disc (a solid pulsing accent dot) for colour-blind / reduced-motion users. */
-.ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-2); display: inline-block; }
+.ds-session-unread { width: 8px; height: 8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); display: inline-block; flex: none; }
 .ds-session-state { padding: var(--space-5) var(--space-3); text-align: center; color: var(--fg-3); font-size: var(--fs-sm); }
 .ds-session-state-error { color: var(--flame); }
 

package/colors_and_type.css

@@ -202,7 +202,7 @@
   --fs-lg:       18px;
   --fs-xl:       21px;
   --fs-h4:       clamp(24px, 2cqi, 28px);
-  --fs-h3:       clamp(25px, 2.6cqi, 34px);
+  --fs-h3:       clamp(26px, 2.6cqi, 34px);
   --fs-h2:       clamp(28px, 3.6cqi, 44px);
   --fs-h1:       clamp(34px, 5cqi, 64px);
   --fs-hero:     clamp(42px, 7cqi, 96px);
@@ -546,6 +546,27 @@ select:focus-visible {
   --code-num:     var(--sun);
 }
 
+/* [data-accent="X"] overrides (below) hardcode LIGHT-tuned fills (--acid,
+   --purple, --green) with no dark-theme companion, so data-theme=dark +
+   data-accent=acid/purple/green produced a near-invisible fill against the
+   dark page bg (measured: acid 1.15:1, purple 1.04:1, green 2.98:1 on --ink
+   -- all under the 3:1 non-text UI-fill floor). Same convention as the base
+   --accent retune above: restate the fill as its dark-tuned equivalent so
+   the swatch stays visible, using tones already verified elsewhere in this
+   file (green retune 7.48:1 on --ink, purple-2 retune 6.11:1 on --ink). */
+[data-theme="ink"][data-accent="acid"],
+[data-theme="dark"][data-accent="acid"] {
+  --accent: #BFBFBF; --accent-bright: #BFBFBF; --accent-fg: var(--ink); --accent-ink: var(--paper); --panel-accent: #BFBFBF;
+}
+[data-theme="ink"][data-accent="purple"],
+[data-theme="dark"][data-accent="purple"] {
+  --accent: #C277FF; --accent-bright: #C277FF; --accent-fg: var(--ink); --accent-ink: #C277FF; --panel-accent: #C277FF;
+}
+[data-theme="ink"][data-accent="green"],
+[data-theme="dark"][data-accent="green"] {
+  --accent: #5CBF52; --accent-bright: #5CBF52; --accent-fg: var(--ink); --accent-ink: #5CBF52; --panel-accent: #5CBF52;
+}
+
 /* Restores the pre-existing (weaker) dark-theme selection tint after the
    light-theme-only bump in app-shell.css's base ::selection rule. */
 [data-theme="ink"] ::selection,

package/community.css

@@ -1493,6 +1493,9 @@
   font-size: var(--fs-sm);
 }
 .vx-toggle { accent-color: var(--accent); width: 18px; height: 18px; cursor: pointer; }
+@media (pointer: coarse) {
+  .vx-toggle { width: 24px; height: 24px; }
+}
 
 .vx-queue {
   display: flex; align-items: center; gap: var(--space-2);