anentrypoint-design 0.0.486 → 0.0.488

package/src/css/app-shell/responsive2-workspace.css

@@ -200,10 +200,26 @@
 /* Column resize handles: a thin keyboard-accessible separator pinned to the
    right edge of each chrome track; drag (or ArrowLeft/Right) writes a clamped
    inline --ws-*-w. */
-.ws-resizer { grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: var(--z-raised); cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; }
-.ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: transparent; transition: background var(--dur-snap) var(--ease); }
-.ws-resizer:hover::after, .ws-resizer:focus-visible::after { background: var(--accent); }
+.ws-resizer { position: relative; grid-row: 1 / -1; align-self: stretch; justify-self: end; width: 8px; margin-right: -4px; z-index: var(--z-raised); cursor: col-resize; background: transparent; border: none; padding: 0; touch-action: none; display: flex; align-items: center; justify-content: center; }
+.ws-resizer::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: var(--rule); opacity: 0.4; transition: background var(--dur-snap) var(--ease), opacity var(--dur-snap) var(--ease); }
+.ws-resizer:hover::after, .ws-resizer:focus-visible::after { background: var(--accent); opacity: 1; }
+/* Grip: a small pill of dots centered on the handle, visible at rest (low
+   contrast) so the resizer reads as a draggable affordance rather than an
+   invisible hit zone, then brightens to accent on hover/drag like the line. */
+.ws-resizer::before {
+  content: ""; position: absolute; width: 4px; height: 20px; border-radius: var(--r-hair);
+  background-image: radial-gradient(circle, var(--fg-3) 1px, transparent 1px);
+  background-size: 4px 5px; background-repeat: repeat-y; background-position: center;
+  opacity: 0.5; transition: opacity var(--dur-snap) var(--ease), background-image var(--dur-snap) var(--ease);
+  pointer-events: none;
+}
+.ws-resizer:hover::before, .ws-resizer:focus-visible::before {
+  opacity: 1; background-image: radial-gradient(circle, var(--accent) 1px, transparent 1px);
+}
 .ws-resizer:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: -2px; }
+/* Active drag state: wider + fully opaque accent grip so the handle a
+   fast-moving pointer has left :hover on still visibly reads as "gripped". */
+.ws-resizer.ws-resizer-active::after { background: var(--accent); width: 3px; }
 .ws-resizer.ws-resizer-rail { grid-column: 1; }
 .ws-resizer.ws-resizer-sessions { grid-column: 2; }
 .ws-resizer.ws-resizer-pane { grid-column: 3; justify-self: end; }
@@ -258,7 +274,10 @@
 .ws-rail-toggle:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 .ws-rail-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: var(--space-3) var(--space-2); gap: var(--space-2); }
 .ws-rail-head { display: flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); }
-.ws-rail-brand { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-body); color: var(--fg); white-space: nowrap; overflow: hidden; }
+/* Wordmark treatment matches .brand (topbar.css) — same display family/weight/
+   tracking — so the rail brand reads as the SAME logotype as every other kit's
+   topbar wordmark instead of a lighter, differently-set imitation. */
+.ws-rail-brand { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-body); letter-spacing: var(--tr-tight); color: var(--fg); white-space: nowrap; overflow: hidden; }
 .ws-rail-action {
   display: flex; align-items: center; gap: var(--space-2);
   padding: var(--space-2) var(--space-3); margin: var(--space-1) 0;
@@ -490,6 +509,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   .ws-shell, .ws-rail, .ws-pane, .ws-sessions, .ws-scrim { transition: none; }
-  .ws-resizer::after { transition: none; }
+  .ws-resizer::after, .ws-resizer::before { transition: none; }
 }
 

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

@@ -254,6 +254,7 @@ input[type="checkbox"], input[type="radio"] {
 }
 .ds-context-menu-item.danger {
   color: var(--warn);
+  box-shadow: inset 2px 0 0 var(--warn);
 }
 .ds-context-menu-item.danger:hover {
   background: color-mix(in oklab, var(--warn) 12%, var(--bg));
@@ -356,6 +357,7 @@ textarea::placeholder {
 .prose p { margin: 0 0 var(--space-4) 0; }
 .prose p:last-child { margin-bottom: 0; }
 .prose a { color: var(--accent-ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
+.prose a:visited { color: color-mix(in oklab, var(--accent-ink) 70%, var(--purple-2, var(--fg-3))); }
 .prose a:hover { text-decoration-color: currentColor; }
 
 /* Rubber-stamp motif — a bordered, uppercase, letter-spaced badge with a
@@ -471,38 +473,13 @@ hr.rule-dotted { border-top: 2px dotted var(--rule-strong); }
 }
 
 /* Switch primitive (form-primitives.js Toggle) -- track + sliding knob.
-   Previously unstyled anywhere in this repo (a bare button with no visible
-   affordance), so every real consumer resorted to a local literal-bracket-
-   text reimplementation ('[x] on'/'[ ] off') instead. Sized off --space
-   tokens: a 40x22 track (2x11 knob diameter + 2px inset each side) is the
-   standard iOS/Material switch proportion, not an arbitrary literal. */
-.ds-toggle {
-  appearance: none; -webkit-appearance: none;
-  display: inline-flex; align-items: center; flex-shrink: 0;
-  width: 40px; height: 22px; padding: 2px;
-  border: 1px solid var(--rule-strong); border-radius: var(--r-pill, 999px);
-  background: var(--bg-3); box-shadow: none; cursor: pointer;
-  transition: background-color var(--dur-snap) var(--ease), border-color var(--dur-snap) var(--ease);
-}
-.ds-toggle-knob {
-  width: 16px; height: 16px; border-radius: 50%;
-  background: var(--fg-3);
-  transition: transform var(--dur-snap) var(--ease), background-color var(--dur-snap) var(--ease);
-}
-.ds-toggle[aria-checked="true"] {
-  background: var(--accent-ink); border-color: var(--accent-ink);
-}
-.ds-toggle[aria-checked="true"] .ds-toggle-knob {
-  background: var(--panel-0, var(--bg));
-  transform: translateX(18px);
-}
-.ds-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
-.ds-toggle:focus-visible {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
-}
-.ds-toggle-row { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
-.ds-toggle-row .ds-toggle-label { color: inherit; }
+   Canonical definition lives in editor-primitives.css alongside the rest of
+   the .ds-check/.ds-radio/.ds-toggle form-primitive family (that file loads
+   AFTER this one in the build.mjs concat order, so a second .ds-toggle block
+   here was dead weight that silently lost the cascade while still disagreeing
+   on size/colors/knob-offset with the surviving rule — a duplicate-source-of-
+   -truth foot-gun, not an intentional override). Removed; see
+   editor-primitives.css's ".ds-toggle" block for track/knob/disabled/focus. */
 
 /* -- Field controls: themed base for TextField / Select / SearchInput --
    Root fix: previously only `transition` was set, so themed apps got
@@ -591,6 +568,15 @@ hr.rule-dotted { border-top: 2px dotted var(--rule-strong); }
    button) - transparent to any flex/grid layout the bare input previously
    sat in directly. */
 .ds-search-input-wrap { display: contents; }
+/* Leading-icon slot, matching .app-search's icon placement in Topbar so the
+   two search surfaces read as one control family instead of icon-vs-no-icon. */
+.ds-search-field { position: relative; display: inline-flex; align-items: center; min-width: 0; }
+.ds-search-field .ds-search-icon {
+  position: absolute; left: var(--space-3);
+  display: inline-flex; pointer-events: none;
+  color: var(--fg-3); opacity: 0.6;
+}
+.ds-search-field .ds-search-input { padding-left: calc(var(--space-3) + 15px + var(--space-2)); }
 
 /* Visible clear (X) button for SearchInput - mirrors .ds-alert-dismiss's
    ghost-icon treatment but sized to the kit's 44px touch-target floor
@@ -612,7 +598,7 @@ hr.rule-dotted { border-top: 2px dotted var(--rule-strong); }
   transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
 }
 .ds-search-clear:hover { background: var(--bg-2); color: var(--fg); }
-.ds-search-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.ds-search-clear:focus-visible { outline: var(--focus-w) solid var(--focus-color); outline-offset: var(--focus-offset); }
 
 .ds-field input:not(.input):focus-visible,
 .ds-field textarea:not(.input):focus-visible,
@@ -632,7 +618,7 @@ hr.rule-dotted { border-top: 2px dotted var(--rule-strong); }
 }
 .ds-field input:not(.input)[aria-invalid="true"],
 .ds-field textarea:not(.input)[aria-invalid="true"] {
-  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--flame);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--danger);
 }
 
 /* Clear button for text inputs */

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

@@ -50,7 +50,7 @@ body.canvas-host { background: transparent !important; }
   display: flex; flex-wrap: wrap;
   align-items: center; gap: var(--space-4);
   min-height: var(--app-topbar-h);
-  padding: 10px var(--pad-x);
+  padding: var(--space-2-5) var(--pad-x);
   background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 
@@ -63,7 +63,7 @@ body.canvas-host { background: transparent !important; }
   position: sticky; top: 0; z-index: var(--z-header);
   display: flex; flex-wrap: wrap; align-items: center;
   gap: var(--space-2) var(--space-4);
-  padding: 8px var(--pad-x);
+  padding: var(--space-2) var(--pad-x);
   background: color-mix(in oklab, var(--bg) 97%, transparent);
 }
 .app-chrome > .app-topbar,
@@ -81,7 +81,7 @@ body.canvas-host { background: transparent !important; }
 .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 { display: flex; gap: var(--space-1); font-size: var(--fs-sm); flex-wrap: wrap; }
 .app-topbar nav a { flex: 0 0 auto; }
 .app-topbar nav a {
   color: var(--fg-2);
@@ -134,6 +134,12 @@ body.canvas-host { background: transparent !important; }
   border-radius: var(--r-pill);
   font-size: var(--fs-sm); color: var(--fg-3);
   max-width: 360px;
+  /* Match the system-wide input border language (.ds-field / .ds-search-input:
+     tonal fill + printed baseline rule) instead of a borderless pill, so the
+     topbar search reads as the same control family as every other input. */
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-rule)) 0 var(--rule-strong);
+  transition: box-shadow var(--dur-snap) var(--ease), background var(--dur-snap) var(--ease);
 }
 .app-search .icon { opacity: 0.6; }
 .app-search input {
@@ -141,20 +147,32 @@ body.canvas-host { background: transparent !important; }
   font-family: inherit; font-size: inherit; color: var(--fg);
   width: 100%;
 }
+/* Same focus language as .ds-field/.ds-search-input: no outline ring, the
+   baseline rule thickens to the accent instead — matching every other form
+   input in the system rather than a one-off outline ring. */
 .app-search:focus-within {
-  outline: var(--focus-w) solid var(--focus-color);
-  outline-offset: var(--focus-offset);
+  background: var(--bg);
+  box-shadow: inset 0 0 0 var(--bw-hair, 1px) var(--rule),
+              inset 0 calc(-1 * var(--bw-chunk)) 0 var(--accent);
 }
 
 .app-crumb {
   min-height: var(--app-crumb-h);
-  padding: 6px var(--pad-x);
-  display: flex; align-items: center; gap: 8px;
+  padding: var(--space-1-75) var(--pad-x);
+  display: flex; align-items: center; gap: var(--space-2);
   font-size: var(--fs-sm); color: var(--fg-3);
+  min-width: 0;
 }
-.app-crumb .sep { opacity: 0.5; }
-.app-crumb .leaf { color: var(--fg); font-weight: 600; }
-.app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); }
+.app-crumb .sep { opacity: 0.5; flex: 0 0 auto; }
+/* Trail segments and the current/leaf segment truncate independently instead
+   of the whole crumb bar overflowing — a long segment (deep file path, long
+   title) must not push the sibling segments or the right slot off-screen. */
+.app-crumb > span:not(.sep):not(.crumb-right) {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  min-width: 0; flex: 0 1 auto;
+}
+.app-crumb .leaf { color: var(--fg); font-weight: 600; flex: 0 1 auto; }
+.app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); flex: 0 0 auto; }
 
 /* The shell is the grid cell (.app-body's fixed sidebar column); it must own
    its own scroll, not just size to content, because .app-body's row track is
@@ -197,7 +215,7 @@ body.canvas-host { background: transparent !important; }
 .app-side .group {
   font-size: var(--fs-xs); font-weight: 600;
   color: var(--fg-3); padding: 0 var(--space-3);
-  margin-bottom: 6px;
+  margin-bottom: var(--space-1-75);
 }
 .app-side a {
   display: grid; grid-template-columns: 18px 1fr auto;
@@ -212,7 +230,7 @@ body.canvas-host { background: transparent !important; }
   min-height: 44px;
   border-radius: var(--r-1);
   color: var(--fg-2);
-  margin-bottom: 2px;
+  margin-bottom: var(--space-hair);
 }
 @media (pointer: coarse) {
   .app-side a { min-height: 44px; padding: var(--space-2-75) var(--space-3); }
@@ -308,6 +326,14 @@ body.canvas-host { background: transparent !important; }
    width:100% restores fill-then-cap for every .narrow page, not just wide
    viewports (the shrink-to-fit bug undersized even the base 760px case). */
 .app-main.narrow { width: 100%; max-width: var(--measure-narrow); margin: 0 auto; }
+/* .narrow means "prose reading measure", not "shrink the whole shell on wide
+   screens" -- the fixed 760px floor read as narrow on any viewport above
+   ~1300px since the clamp below only widens the no-side case. Sidebar-present
+   narrow pages (docs, papers) get the same wide-viewport widening treatment,
+   just without the no-side variant's extra sidebar-width allowance. */
+.app-body:not(.no-side) .app-main.narrow {
+  max-width: clamp(var(--measure-narrow), 46vw, 1000px);
+}
 /* A shell with no sidebar has no competing column, so the prose clamp there was
    leaving the whole sidebar's worth of width empty -- 760px of content inside a
    1413px shell on a real page. Widen the clamp by the space the absent sidebar
@@ -372,8 +398,16 @@ body.canvas-host { background: transparent !important; }
   color: var(--fg-3);
   border-top: 1px solid var(--rule);
 }
-.app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.app-status .item { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
 .app-status .item:first-of-type { color: var(--accent-ink); }
+/* Subtle divider between adjacent status segments — a thin inset rule, not a
+   full-height border, so it reads as a quiet separator rather than boxing
+   each item. */
+.app-status .item:not(:first-of-type)::before {
+  content: ''; flex: 0 0 auto;
+  width: 1px; height: 10px;
+  background: var(--rule-strong);
+}
 .app-status .spread { flex: 1; }
 /* The status bar NEVER wraps: at narrow widths the trailing items (hints,
    agent target) drop in priority order instead of breaking mid-word onto a

package/src/kits/os/launcher.css

@@ -1,4 +1,11 @@
 /* ============================================================
+   DEPRECATED: superseded by theme.css's .launcher-dock rules, the only
+   stylesheet any consumer actually links. createLauncher() (the API these
+   rules were paired to) was part of the now-removed validation harness --
+   renderDock() in launcher.js is the current API, styled by theme.css. Kept
+   as a package.json export map entry for now; scheduled for removal in the
+   next major version rather than a same-session delete.
+
    Launcher dock — paired with createLauncher() (validation harness path)
    Bible: tonal step from canvas, no borders, pill controls, lowercase.
    ============================================================ */

package/src/kits/os/theme.css

@@ -721,6 +721,28 @@ html, body {
     --accent-bright: var(--green) !important;
     --paper: #F5F0E4;
 }
+/* Themed scrollbars for every scrollable node under the OS shell (panels,
+ * sidebars, panes, modals) that doesn't already opt into its own scrollbar
+ * styling — .chat-thread below keeps its bespoke version. Firefox via
+ * scrollbar-width/-color, Chrome/Safari/Edge via ::-webkit-scrollbar. */
+.ds-247420, .ds-247420 * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--fg) 22%, transparent) transparent;
+}
+.ds-247420::-webkit-scrollbar, .ds-247420 *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+.ds-247420::-webkit-scrollbar-track, .ds-247420 *::-webkit-scrollbar-track {
+    background: transparent;
+}
+.ds-247420::-webkit-scrollbar-thumb, .ds-247420 *::-webkit-scrollbar-thumb {
+    background: color-mix(in oklab, var(--fg) 18%, transparent);
+    border-radius: var(--r-pill, 999px);
+}
+.ds-247420::-webkit-scrollbar-thumb:hover, .ds-247420 *::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklab, var(--fg) 30%, transparent);
+}
 /* Window titlebar matches the 34px bar height; clamp so menubar/taskbar/titlebar
  * heights are uniform. */
 .ds-247420 .wm-bar { height: 34px; min-height: 34px; box-sizing: border-box; padding-top: var(--space-1); padding-bottom: var(--space-1); }
@@ -1129,7 +1151,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
  * every .ds-247420 consumer (see the file header), and the old `#1a1a1a` /
  * `#fff` fallbacks were baked DARK values that would have rendered white text
  * on a near-white panel in paper mode had they ever fired. */
-.ds-247420 .wm-context-menu { position: fixed; background: var(--panel-2); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); z-index: var(--z-dropdown); font-family: var(--ff-ui); color: var(--fg); min-width: 140px; box-shadow: 0 var(--space-2) var(--space-5) rgba(0, 0, 0, .35); padding: var(--space-1); }
+.ds-247420 .wm-context-menu { position: fixed; background: var(--panel-2); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); z-index: var(--z-dropdown); font-family: var(--ff-ui); color: var(--fg); min-width: 140px; box-shadow: var(--shadow-3); padding: var(--space-1); }
 .ds-247420 .wm-context-menu-item { display: block; width: 100%; padding: 7px var(--space-2-5); border: none; border-radius: var(--r-0); background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; font-size: var(--fs-tiny); }
 .ds-247420 .wm-context-menu-item:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
 
@@ -1815,6 +1837,8 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   /* chat composer controls */
   .ds-247420 .chat-composer .send { width: var(--os-tap, 44px); height: var(--os-tap, 44px); }
   .ds-247420 .cc-toggle { min-height: var(--os-tap, 44px); }
+  /* sessions grid card checkbox */
+  .ds-247420 .tb-sessions-card-check { width: var(--os-tap, 44px); height: var(--os-tap, 44px); flex: 0 0 var(--os-tap, 44px); }
 }
 
 /* --- files-app row actions must reveal on coarse pointers too (the existing

package/src/kits/os/validate.css

@@ -1,3 +1,10 @@
+/* DEPRECATED: styled the validate.html harness, which thebird's README
+   documents as removed (headless CI flaked on the 61MB plugkit.wasm
+   cold-load). validator-app.js (the component this sheet styled) no longer
+   exists in this repo's source -- only a stale vendored copy remains in
+   thebird's docs/vendor/. Kept as a package.json export map entry for now;
+   scheduled for removal in the next major version rather than a
+   same-session delete. */
 body { margin: 0; padding: 24px; font-family: var(--os-font); background: var(--os-bg-0); color: var(--os-fg); }
 h1 { margin: 0 0 8px 0; font-size: 22px; font-weight: 600; }
 h3 { margin: 18px 0 6px 0; color: var(--os-fg-2); font-size: 13px; font-weight: 600; }

package/src/kits/os/wm.css

@@ -1,4 +1,11 @@
 /* ============================================================
+   DEPRECATED: superseded by theme.css, which has a superset of these rules
+   (26 .wm-win selectors vs this file's 11) and is the only stylesheet any
+   consumer actually links. createWM() (the API these rules were paired to)
+   no longer exists -- renderWindow() in wm.js is the current API, styled by
+   theme.css. Kept as a package.json export map entry for now; scheduled for
+   removal in the next major version rather than a same-session delete.
+
    Window Manager visuals — paired with createWM() behavior
    Tokens: --os-* (defined by desktop/theme.css)
    Bible: tonal surfaces, inset rail for focus, subtle hairline border +

package/types/components.d.ts

@@ -1568,6 +1568,7 @@ export declare function RootsPicker(props?: RootsPickerProps): VNode;
 export interface DropZoneProps {
     children?: any;
     dragover?: any;
+    rejected?: any;
     onDrop?: (...args: any[]) => any;
     onDragOver?: (...args: any[]) => any;
     onDragLeave?: (...args: any[]) => any;