@workerdeck/ui 0.12.0 → 0.15.0

package/src/components/ui/Splitter.tsx

@@ -20,6 +20,12 @@ export interface SplitterProps {
   max: number
   /** Keyboard step. */
   step?: number
+  /**
+   * Size to snap back to on a double-click — the convention every pane divider
+   * that can be dragged is expected to honour. Omit and a double-click does
+   * nothing, which is the honest behaviour when there is no default to mean.
+   */
+  defaultValue?: number
   /** Set when dragging the splitter *away* from the origin should shrink the
    * controlled pane — i.e. the pane is on the right or the bottom. */
   inverted?: boolean
@@ -52,6 +58,7 @@ export function Splitter({
   min,
   max,
   step = 16,
+  defaultValue,
   inverted,
   'aria-label': label,
   className,
@@ -84,6 +91,12 @@ export function Splitter({
     }
   }
 
+  // The second click of a double-click has already started a drag, so the reset
+  // has to land after `endDrag` — which it does: dblclick fires after pointerup.
+  const onDoubleClick = () => {
+    if (defaultValue !== undefined) onValueChange(clamp(defaultValue))
+  }
+
   const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
     // The arrows that move *along* this splitter's axis of travel; the other
     // pair is left to the page, which is what a separator should do with them.
@@ -112,6 +125,7 @@ export function Splitter({
       onPointerMove={onPointerMove}
       onPointerUp={endDrag}
       onPointerCancel={endDrag}
+      onDoubleClick={onDoubleClick}
       onKeyDown={onKeyDown}
       className={cn(
         // A 1px line that reads as a border, with a larger invisible grab area

package/src/components/ui/Tooltip.tsx

@@ -8,7 +8,7 @@ export const TooltipContent: FunctionComponent<
   TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'side' | 'sideOffset'>
 > = ({ className, side = 'top', sideOffset = 6, ...props }) => (
   <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className='isolate z-60'>
+    <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className='isolate z-90'>
       <TooltipPrimitive.Popup
         data-slot='tooltip-content'
         className={cn(

package/src/index.ts

@@ -42,6 +42,7 @@ export { CopyButton, type CopyButtonProps } from './components/ui/CopyButton.tsx
 export { Spinner } from './components/ui/Spinner.tsx'
 export { CodeBlock, type CodeBlockProps } from './components/ui/CodeBlock.tsx'
 export { Splitter, type SplitterProps } from './components/ui/Splitter.tsx'
+export { Empty, EmptyKey } from './components/ui/Empty.tsx'
 export { ProgressRing, type ProgressRingProps } from './components/ui/ProgressRing.tsx'
 // Prompt input (vendored just-marketing/prompt-area, themed to these tokens)
 export {
@@ -88,6 +89,7 @@ export {
   useTranscriptDensity,
   useTranscriptVariant,
   type TranscriptDensity,
+  type TranscriptFont,
   type TranscriptVariant,
 } from './components/agent/transcript-variant.tsx'
 export { Response, type ResponseProps } from './components/agent/Response.tsx'
@@ -136,7 +138,15 @@ export {
   type SessionListItemProps,
   type SessionListProps,
 } from './components/agent/SessionList.tsx'
-export { SessionBrowser, type SessionBrowserProps } from './components/agent/SessionBrowser.tsx'
+export {
+  SessionBrowser,
+  rowShapeClass,
+  type SessionBrowserProps,
+} from './components/agent/SessionBrowser.tsx'
+export { SessionStatusIcon } from './components/agent/SessionBrowser.tsx'
+// Lifted out of the VS Code sidebar once the dashboard grew a collapsed rail
+// that needs the same glyph — two copies of a trademark set is one too many.
+export { EngineIcon } from './components/agent/EngineIcon.tsx'
 export {
   SessionEmptyState,
   type SessionEmptyStateProps,

package/src/styles/theme.css

@@ -24,6 +24,15 @@
   --bg-code: #f5f5f5;
   --bg-elevated: #ffffffcc;
 
+  /* A list row's hover and selected fills. **Alpha, not a flat colour**, because
+     a row sits on whatever its host paints — `bg-sidebar` in the dashboard,
+     `--vscode-sideBar-background` in the extension — and a flat value tuned for
+     one of those is invisible on the others. `--bg-surface-hover` was exactly
+     that mistake: on the dark sidebar (#131313) it lands on #141414, one step
+     of 255 away, so the hover state did not exist. */
+  --row-hover: rgb(0 0 0 / 0.05);
+  --row-active: rgb(0 0 0 / 0.08);
+
   /* ---------- Borders ---------- */
   --border: #ebebeb;
   --border-light: #e0e0e0;
@@ -36,12 +45,19 @@
   --fg-4: #a1a1a1;
   --fg-disabled: #c9c9c9;
 
-  /* ---------- Accent = the inverse of the canvas ---------- */
-  --accent: #171717;
-  --accent-hover: #000000;
-  --accent-dim: #737373;
-  --accent-bg: #f2f2f2;
-  --accent-ring: #17171733;
+  /* ---------- Accent ----------
+   * VS Code blue (`#0078d4`) — the product's primary. It is the *same* hue in
+   * both themes rather than the inverse of the canvas: a primary that flips
+   * from near-black to near-white is a contrast device, not a brand colour, and
+   * WorkerDeck now shares an editor's visual language.
+   *
+   * Not to be confused with the brand's live green (`docs/assets/BRAND.md`),
+   * which stays what it is — a *signal*, not a primary. */
+  --accent: #0078d4;
+  --accent-hover: #106ebe;
+  --accent-dim: #6ca9d8;
+  --accent-bg: #eff6fc;
+  --accent-ring: #0078d433;
 
   /* ---------- Semantic ---------- */
   --success: #0f7b4f;
@@ -72,7 +88,9 @@
   --accent-tint: var(--accent-bg);
   --accent-fg: #ffffff;
   --warn: var(--warning);
-  --ring: var(--fg-1);
+  /* Focus ring is the accent, as in an editor — the comment below already said
+   * "accent-derived"; before the blue it was indistinguishable from fg-1. */
+  --ring: var(--accent);
 }
 
 [data-theme='dark'] {
@@ -83,6 +101,9 @@
   --bg-code: #141414;
   --bg-elevated: #0a0a0acc;
 
+  --row-hover: rgb(255 255 255 / 0.06);
+  --row-active: rgb(255 255 255 / 0.10);
+
   /* ---------- Borders ---------- */
   --border: #1f1f1f;
   --border-light: #292929;
@@ -95,12 +116,16 @@
   --fg-4: #6e6e6e;
   --fg-disabled: #454545;
 
-  /* ---------- Accent = the inverse of the canvas ---------- */
-  --accent: #ededed;
-  --accent-hover: #ffffff;
-  --accent-dim: #8f8f8f;
-  --accent-bg: #1f1f1f;
-  --accent-ring: #ffffff3d;
+  /* ---------- Accent ----------
+   * The same blue as light. `--accent` stays `#0078d4` because it is a *fill*
+   * carrying white text (4.6:1) — the brighter `#3794ff` would drop that to
+   * 2.9:1. The bright one is the hover and the ring, where nothing sits on top
+   * of it and the extra lift is what a dark canvas needs. */
+  --accent: #0078d4;
+  --accent-hover: #3794ff;
+  --accent-dim: #4a7ba0;
+  --accent-bg: #12283c;
+  --accent-ring: #3794ff4d;
 
   /* ---------- Semantic ---------- */
   --success: #3ecf8e;
@@ -131,9 +156,12 @@
   --text: var(--fg-1);
   --text-muted: var(--fg-3);
   --accent-tint: var(--accent-bg);
-  --accent-fg: #0a0a0a;
+  /* White on the blue fill in both themes — the accent no longer inverts. */
+  --accent-fg: #ffffff;
   --warn: var(--warning);
-  --ring: var(--fg-1);
+  /* Focus ring is the accent, as in an editor — the comment below already said
+   * "accent-derived"; before the blue it was indistinguishable from fg-1. */
+  --ring: var(--accent);
 }
 
 /* Theme-independent tokens — type tracking, easing, fonts.
@@ -168,6 +196,38 @@
   --radius: var(--radius-md);
 }
 
+/*
+ * The agent panel's typeface, from `SessionPanel`'s `transcriptFont` prop.
+ *
+ * `mono` repoints the **sans** token at the mono stack for that subtree, so the
+ * transcript and its composer render monospace and read as part of the terminal
+ * rather than as a web app beside one. The mono token itself is left alone: code
+ * was already mono, and pointing both at the same stack is what makes the two
+ * indistinguishable — which is the point.
+ *
+ * A subtree rule rather than `:root`, and deliberately: this is the *agent
+ * panel's* preference, not the app's. A host's sidebar, dialogs and lists keep
+ * their UI font, and nothing outside the panel can pick this up by accident.
+ * (VS Code's webview does the same thing one level up, at `html[data-font]`,
+ * because there the panel *is* the document.)
+ */
+[data-agent-font='mono'] {
+  --cw-font-sans: var(--cw-font-mono);
+  /* Tailwind's `font-sans` utility reads `--font-sans`, whose `:root` value is
+     `var(--cw-font-sans)` — and a `var()` inside a custom property is resolved
+     against the element that DECLARED it, not the one that inherits it. So
+     repointing `--cw-font-sans` here leaves `--font-sans` still holding the sans
+     stack it computed at `:root`. Both have to move. */
+  --font-sans: var(--cw-font-mono);
+  /* And the actual property, because the ambient typeface is not a token lookup
+     at all: `body { font-family: var(--cw-font-sans) }` computed once at `body`,
+     and every descendant inherits that *resolved* stack. Nothing under here
+     re-reads the token, so the subtree has to be told directly.
+     (VS Code's webview gets away with tokens alone only because its override
+     sits on `html` — the same element `:root` declares them on.) */
+  font-family: var(--cw-font-mono);
+}
+
 /* Drive dark: off the same <html data-theme> the tokens swap on. */
 @custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
 
@@ -188,6 +248,8 @@
   --color-ring: var(--ring);
 
   --color-surface-hover: var(--bg-surface-hover);
+  --color-row-hover: var(--row-hover);
+  --color-row-active: var(--row-active);
   /* Named code-bg (not code) so it can't shadow the --text-code font-size token:
      with a --color-code defined, `text-code` would resolve to the color namespace
      and paint text in the code *background* color — invisible in both themes. */