@workerdeck/ui 0.22.0 → 1.0.0

package/src/styles/terminal.css

@@ -48,7 +48,9 @@
   /* Ligatures turn `=>` and `!=` into glyphs that no longer occupy the cells
      they were measured as. A grid renderer cannot have that. */
   font-variant-ligatures: none;
-  font-feature-settings: 'liga' 0, 'calt' 0;
+  font-feature-settings:
+    'liga' 0,
+    'calt' 0;
   /* `ch` is the advance of `0`, so tabular figures keep digit columns — the
      diff's line numbers — genuinely aligned. */
   font-variant-numeric: tabular-nums;
@@ -150,15 +152,30 @@
 
 /* Indent levels. A nested row steps one cell per level — the same 2 columns a
    marker occupies, so a child's marker sits under its parent's first letter. */
-.term-row[data-indent='1'] { padding-left: var(--term-cell); }
-.term-row[data-indent='2'] { padding-left: calc(2 * var(--term-cell)); }
-.term-row[data-indent='3'] { padding-left: calc(3 * var(--term-cell)); }
+.term-row[data-indent='1'] {
+  padding-left: var(--term-cell);
+}
+.term-row[data-indent='2'] {
+  padding-left: calc(2 * var(--term-cell));
+}
+.term-row[data-indent='3'] {
+  padding-left: calc(3 * var(--term-cell));
+}
 
 .term-gutter {
   /* `pre` so a space-only gutter keeps its cell — an unmarked row must still
      start its text on the same column as a marked one. */
   white-space: pre;
   user-select: none;
+  /* The gutter is decorative (`aria-hidden`) and it is the leading edge of every
+     row, which is where a reader naturally starts dragging to select a line. A
+     drag that *begins* on an unselectable node starts no selection at all, so
+     without this the most natural way to select transcript text did nothing.
+     Letting the press fall through to the row keeps `user-select: none` doing
+     its real job — keeping the glyph out of the copied text — without owning
+     the pointer. The row below is still pressable from here, since the press
+     handler lives on the ancestor. */
+  pointer-events: none;
   color: var(--term-dim);
 }
 
@@ -215,20 +232,42 @@
  * takes `tone` and passes it straight through, so adding a colour is one line
  * here and nothing in the components.
  */
-[data-terminal] [data-tone='fg'] { color: var(--term-fg); }
-[data-terminal] [data-tone='bright'] { color: var(--term-bright); }
-[data-terminal] [data-tone='dim'] { color: var(--term-dim); }
-[data-terminal] [data-tone='faint'] { color: var(--term-faint); }
-[data-terminal] [data-tone='mark'] { color: var(--term-mark); }
-[data-terminal] [data-tone='blue'] { color: var(--term-blue); }
-[data-terminal] [data-tone='green'] { color: var(--term-green); }
-[data-terminal] [data-tone='red'] { color: var(--term-red); }
-[data-terminal] [data-tone='yellow'] { color: var(--term-yellow); }
-[data-terminal] [data-tone='magenta'] { color: var(--term-magenta); }
+[data-terminal] [data-tone='fg'] {
+  color: var(--term-fg);
+}
+[data-terminal] [data-tone='bright'] {
+  color: var(--term-bright);
+}
+[data-terminal] [data-tone='dim'] {
+  color: var(--term-dim);
+}
+[data-terminal] [data-tone='faint'] {
+  color: var(--term-faint);
+}
+[data-terminal] [data-tone='mark'] {
+  color: var(--term-mark);
+}
+[data-terminal] [data-tone='blue'] {
+  color: var(--term-blue);
+}
+[data-terminal] [data-tone='green'] {
+  color: var(--term-green);
+}
+[data-terminal] [data-tone='red'] {
+  color: var(--term-red);
+}
+[data-terminal] [data-tone='yellow'] {
+  color: var(--term-yellow);
+}
+[data-terminal] [data-tone='magenta'] {
+  color: var(--term-magenta);
+}
 
 /* Weight is the only other axis. A terminal has one type size, so emphasis has
    to be carried by weight and colour — never by a larger glyph. */
-[data-terminal] [data-weight='bold'] { font-weight: 600; }
+[data-terminal] [data-weight='bold'] {
+  font-weight: 600;
+}
 
 /* The scroller. Its horizontal padding IS `--term-bleed` — that is the whole
    contract a full-bleed band relies on — and its vertical padding is a line, so
@@ -415,12 +454,7 @@
 /* Dashed, for a boundary *within* a prompt. A repeating gradient rather than a
    dashed border, for the same no-layout reason. */
 [data-terminal] .term-rule-dashed {
-  background: repeating-linear-gradient(
-      to right,
-      var(--term-faint) 0 4px,
-      transparent 4px 8px
-    )
-    left center / 100% 1px no-repeat;
+  background: repeating-linear-gradient(to right, var(--term-faint) 0 4px, transparent 4px 8px) left center / 100% 1px no-repeat;
 }
 
 /* The focused option. A fill, never an outline: an outline is 2px of layout the
@@ -938,9 +972,18 @@
    percentages: the whole point of the 16px rail is that a lane is a reliable
    8px target, and a percentage would reintroduce the drift the fixed width was
    chosen to remove. */
-.term-scrubber .term-scrub-mark[data-lane='l'] { left: 0; width: 6px; }
-.term-scrubber .term-scrub-mark[data-lane='r'] { left: 6px; width: 6px; }
-.term-scrubber .term-scrub-mark[data-lane='f'] { left: 0; width: 12px; }
+.term-scrubber .term-scrub-mark[data-lane='l'] {
+  left: 0;
+  width: 6px;
+}
+.term-scrubber .term-scrub-mark[data-lane='r'] {
+  left: 6px;
+  width: 6px;
+}
+.term-scrubber .term-scrub-mark[data-lane='f'] {
+  left: 0;
+  width: 12px;
+}
 
 /* Lane marks are two-tone: the first 2px — the mark's own anchor — at full
    strength, the rest of the row's extent a 25% tail, so a long answer reads
@@ -950,11 +993,7 @@
    findable. The alarms (error, approval) stay solid: they are alarms, not
    extents. */
 .term-scrubber .term-scrub-mark[data-kind='user'] {
-  background: linear-gradient(
-    to bottom,
-    var(--term-blue) 0 2px,
-    color-mix(in srgb, var(--term-blue) 25%, transparent) 2px
-  );
+  background: linear-gradient(to bottom, var(--term-blue) 0 2px, color-mix(in srgb, var(--term-blue) 25%, transparent) 2px);
 }
 /* A sub-agent's stretch of the transcript, in the input lane: green, because
    every other colour on this rail is already spoken for and none of them means
@@ -963,27 +1002,17 @@
    as an extent (2px head, 25% tail) like the two marks it shares its geometry
    with: collapsed it is a tick, expanded it is the band the sub-agent covers. */
 .term-scrubber .term-scrub-mark[data-kind='subagent'] {
-  background: linear-gradient(
-    to bottom,
-    var(--term-green) 0 2px,
-    color-mix(in srgb, var(--term-green) 25%, transparent) 2px
-  );
+  background: linear-gradient(to bottom, var(--term-green) 0 2px, color-mix(in srgb, var(--term-green) 25%, transparent) 2px);
 }
 .term-scrubber .term-scrub-mark[data-kind='turn'] {
-  background: linear-gradient(
-    to bottom,
-    var(--term-fg) 0 2px,
-    color-mix(in srgb, var(--term-fg) 25%, transparent) 2px
-  );
+  background: linear-gradient(to bottom, var(--term-fg) 0 2px, color-mix(in srgb, var(--term-fg) 25%, transparent) 2px);
 }
 .term-scrubber .term-scrub-mark[data-kind='turnFailed'] {
-  background: linear-gradient(
-    to bottom,
-    var(--term-red) 0 2px,
-    color-mix(in srgb, var(--term-red) 25%, transparent) 2px
-  );
+  background: linear-gradient(to bottom, var(--term-red) 0 2px, color-mix(in srgb, var(--term-red) 25%, transparent) 2px);
+}
+.term-scrubber .term-scrub-mark[data-kind='error'] {
+  background: var(--term-red);
 }
-.term-scrubber .term-scrub-mark[data-kind='error'] { background: var(--term-red); }
 /* A failed tool call is an alarm, so it is solid like the rest of them — in the
    response lane, since it is something the run produced — but at 55%, which is the one thing keeping the rail readable. A session
    error is rare and a turn failure rarer; a tool that failed and was recovered
@@ -995,18 +1024,21 @@
 .term-scrubber .term-scrub-mark[data-kind='toolFailed'] {
   background: color-mix(in srgb, var(--term-red) 55%, transparent);
 }
-.term-scrubber .term-scrub-mark[data-kind='bookmark'] { background: var(--term-magenta); }
+.term-scrubber .term-scrub-mark[data-kind='bookmark'] {
+  background: var(--term-magenta);
+}
 .term-scrubber .term-scrub-mark[data-kind='approval'] {
   background: var(--term-yellow);
   animation: term-scrub-pulse 1.2s infinite;
 }
 /* The catch-up boundary: a dashed hairline centered in its 3px hit box. */
 .term-scrubber .term-scrub-mark[data-kind='recap'] {
-  background: repeating-linear-gradient(to right, var(--term-faint) 0 3px, transparent 3px 6px)
-    left center / 100% 1px no-repeat;
+  background: repeating-linear-gradient(to right, var(--term-faint) 0 3px, transparent 3px 6px) left center / 100% 1px no-repeat;
 }
 @keyframes term-scrub-pulse {
-  50% { opacity: 0.3; }
+  50% {
+    opacity: 0.3;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .term-scrubber .term-scrub-mark[data-kind='approval'] {

package/src/styles/theme.css

@@ -180,7 +180,7 @@
      `list.hoverBackground` / `list.activeSelectionBackground`, which is what the
      design was drawn against. */
   --row-hover: #2a2d2e;
-  --row-active: rgb(255 255 255 / 0.10);
+  --row-active: rgb(255 255 255 / 0.1);
   --row-selected: #04395e;
   --row-selected-weak: #37373d;
 
@@ -234,9 +234,7 @@
 
   /* ---------- Inset frame ---------- */
   --shine: #303030;
-  --frame-shadow:
-    0 4px 24px rgba(0, 0, 0, 0.55),
-    0 2px 6px rgba(0, 0, 0, 0.45);
+  --frame-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
 
   /* See the light block — lifted for the dark ground. */
   --wd-scrub-bookmark: #c586c0;
@@ -485,6 +483,99 @@
   }
 }
 
+/* ── Panel font size & Streamdown overrides ──────────────────────────────
+ *
+ * OUTSIDE `@layer base` so these beat Tailwind utility classes in the cascade
+ * (utilities live in a layer; unlayered rules always win over layered ones).
+ *
+ * `--wd-font-size` is set on the session panel root by the `fontSize` prop.
+ * When present it drives all text in the cards variant — body text, headings,
+ * code, tables — through one value. When absent the fallback `var(--text-body-sm)`
+ * resolves to the same `0.8125rem` the utility class used to set.
+ *
+ * Streamdown ships `rem`-based heading sizes (text-3xl … text-sm) that resolve
+ * against the document root and ignore the panel's local font-size. The `em`-based
+ * overrides below scale with `--wd-font-size`. The specificity confines this to
+ * cards-mode assistant output; the terminal theme renders headings as weight-only
+ * (no size change) through its own components and is unaffected.
+ *
+ * The heading scale mirrors Streamdown's hierarchy but at a tighter range — its
+ * 30 → 14 px span (h1 → h6) sits inside a 13px body, so the ratio is condensed:
+ * h1 at 1.5em, descending to h6 at 1em.
+ */
+[data-slot='message-content'] {
+  font-size: var(--wd-font-size, var(--text-body-sm));
+  line-height: 1.6;
+}
+[data-slot='message-content'] h1 {
+  font-size: 1.5em;
+  line-height: 1.35;
+  margin-top: 1.5em;
+}
+[data-slot='message-content'] h2 {
+  font-size: 1.3em;
+  line-height: 1.35;
+  margin-top: 1.5em;
+}
+[data-slot='message-content'] h3 {
+  font-size: 1.15em;
+  line-height: 1.4;
+  margin-top: 1.25em;
+}
+[data-slot='message-content'] h4 {
+  font-size: 1.05em;
+  line-height: 1.4;
+  margin-top: 1.25em;
+}
+[data-slot='message-content'] h5 {
+  font-size: 1em;
+  line-height: 1.4;
+  margin-top: 1em;
+}
+[data-slot='message-content'] h6 {
+  font-size: 1em;
+  line-height: 1.4;
+  margin-top: 1em;
+}
+[data-slot='message-content'] pre {
+  font-size: 0.9em;
+}
+[data-slot='message-content'] code {
+  font-size: 0.9em;
+}
+[data-slot='message-content'] pre code {
+  font-size: inherit;
+}
+/* Table, cells, and headers: Streamdown puts `text-sm` (rem) on td/th directly,
+   so overriding the table alone is not enough — the cell class wins. */
+[data-slot='message-content'] table {
+  font-size: 0.95em;
+}
+[data-slot='message-content'] td {
+  font-size: inherit;
+}
+[data-slot='message-content'] th {
+  font-size: inherit;
+}
+/* Code block body wrapper: Streamdown puts `text-sm` on the wrapper div around
+   the <pre>; override so it inherits the 0.9em from the pre rule above. */
+[data-slot='message-content'] [data-streamdown='code-block-body'] {
+  font-size: 0.9em;
+}
+/* Inline code: Streamdown puts `text-sm` directly on the <code>. */
+[data-slot='message-content'] :not(pre) > code {
+  font-size: 0.9em;
+}
+/* The composer's prompt area and its chips inherit the panel's font size so the
+   prompt and the output read at the same scale. The two-selector specificity
+   beats the utility class on the element. */
+[data-slot='session-panel'] .prompt-area-container {
+  font-size: var(--wd-font-size, var(--text-body-sm));
+}
+[data-slot='session-panel'] .prompt-area-chip {
+  font-size: var(--wd-font-size, 0.8125rem);
+}
+
 /* The inset frame's gradient "shine" edge (app shells). Do NOT add bg-* on top. */
 .frame-shine {
   border: 1px solid transparent;
@@ -672,7 +763,7 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-size: var(--text-body-sm);
+  font-size: var(--wd-font-size, var(--text-body-sm));
   color: var(--fg-2);
   background: color-mix(in srgb, var(--bg) 88%, transparent);
   backdrop-filter: blur(12px);
@@ -713,28 +804,50 @@
 .wd-scrubber[data-interactive] .wd-scrub-mark:hover {
   outline: 1px solid color-mix(in srgb, var(--fg-1) 40%, transparent);
 }
-.wd-scrubber .wd-scrub-mark[data-lane='l'] { left: 0; width: 6px; }
-.wd-scrubber .wd-scrub-mark[data-lane='r'] { left: 6px; width: 6px; }
-.wd-scrubber .wd-scrub-mark[data-lane='f'] { left: 0; width: 12px; }
-.wd-scrubber .wd-scrub-mark[data-kind='user'] { background: var(--accent); }
-.wd-scrubber .wd-scrub-mark[data-kind='subagent'] { background: var(--success); }
-.wd-scrubber .wd-scrub-mark[data-kind='turn'] { background: var(--fg-3); }
-.wd-scrubber .wd-scrub-mark[data-kind='turnFailed'] { background: var(--danger); }
-.wd-scrubber .wd-scrub-mark[data-kind='error'] { background: var(--danger); }
+.wd-scrubber .wd-scrub-mark[data-lane='l'] {
+  left: 0;
+  width: 6px;
+}
+.wd-scrubber .wd-scrub-mark[data-lane='r'] {
+  left: 6px;
+  width: 6px;
+}
+.wd-scrubber .wd-scrub-mark[data-lane='f'] {
+  left: 0;
+  width: 12px;
+}
+.wd-scrubber .wd-scrub-mark[data-kind='user'] {
+  background: var(--accent);
+}
+.wd-scrubber .wd-scrub-mark[data-kind='subagent'] {
+  background: var(--success);
+}
+.wd-scrubber .wd-scrub-mark[data-kind='turn'] {
+  background: var(--fg-3);
+}
+.wd-scrubber .wd-scrub-mark[data-kind='turnFailed'] {
+  background: var(--danger);
+}
+.wd-scrubber .wd-scrub-mark[data-kind='error'] {
+  background: var(--danger);
+}
 .wd-scrubber .wd-scrub-mark[data-kind='toolFailed'] {
   background: color-mix(in srgb, var(--danger) 55%, transparent);
 }
-.wd-scrubber .wd-scrub-mark[data-kind='bookmark'] { background: var(--wd-scrub-bookmark); }
+.wd-scrubber .wd-scrub-mark[data-kind='bookmark'] {
+  background: var(--wd-scrub-bookmark);
+}
 .wd-scrubber .wd-scrub-mark[data-kind='approval'] {
   background: var(--warning);
   animation: wd-scrub-pulse 1.2s infinite;
 }
 .wd-scrubber .wd-scrub-mark[data-kind='recap'] {
-  background: repeating-linear-gradient(to right, var(--fg-4) 0 3px, transparent 3px 6px)
-    left center / 100% 1px no-repeat;
+  background: repeating-linear-gradient(to right, var(--fg-4) 0 3px, transparent 3px 6px) left center / 100% 1px no-repeat;
 }
 @keyframes wd-scrub-pulse {
-  50% { opacity: 0.3; }
+  50% {
+    opacity: 0.3;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .wd-scrubber .wd-scrub-mark[data-kind='approval'] {
@@ -762,8 +875,12 @@
   pointer-events: none;
   z-index: 11;
 }
-.wd-scrubber .wd-scrub-peek [data-tone='muted'] { color: var(--fg-3); }
-.wd-scrubber .wd-scrub-peek [data-tone='danger'] { color: var(--danger); }
+.wd-scrubber .wd-scrub-peek [data-tone='muted'] {
+  color: var(--fg-3);
+}
+.wd-scrubber .wd-scrub-peek [data-tone='danger'] {
+  color: var(--danger);
+}
 .wd-scrubber .wd-scrub-ex {
   display: -webkit-box;
   -webkit-line-clamp: 4;

package/src/workspace.ts

@@ -1,27 +1,4 @@
-/**
- * The workspace layer — the VS Code-shaped layout around `SessionPanel`, and
- * the Monaco editor at the middle of it.
- *
- * This is a **separate entry point** (`@workerdeck/ui/workspace`) for one
- * reason: Monaco. It is only reachable from here, so an embedder who imports
- * the root entry never pulls it into their module graph.
- *
- * That matters more than tree-shaking alone would suggest. Rollup does drop
- * `CodeEditor` from a `SessionPanel`-only bundle — but Vite resolves Monaco's
- * `new Worker(new URL(…, import.meta.url))` calls during *transform*, before
- * tree-shaking runs, and emits ~9MB of language-service workers as assets that
- * are never retracted. Keeping the import unreachable from the root entry is
- * what actually prevents that; `sideEffects: false` does not.
- *
- * Consequently `monaco-editor` is an **optional peer dependency**: importing
- * this entry means installing it, and importing only the root entry means not
- * having to. See the README for the Vite configuration Monaco needs.
- */
-
-export {
-  SessionWorkspace,
-  type SessionWorkspaceProps,
-} from './components/agent/SessionWorkspace.tsx'
+export { SessionWorkspace, type SessionWorkspaceProps } from './components/agent/SessionWorkspace.tsx'
 export { FileTree, type FileTreeProps } from './components/agent/FileTree.tsx'
 export { EditorTabs, type EditorTabsProps } from './components/agent/EditorTabs.tsx'
 export { FileViewer, type FileViewerProps } from './components/agent/FileViewer.tsx'