@cueloop/client 0.1.0-alpha.9 → 0.1.0-alpha.90

package/src/components/KeybindsDialog.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { Dialog } from "./primitives/Dialog";
+import type { CheatsheetSection } from "../key-bindings";
+
+export interface KeybindsDialogProps {
+  sections: CheatsheetSection[];
+  theme?: Theme;
+}
+
+/** Rows a section takes: its title, its entries, and the blank line after it. */
+function sectionRows(section: CheatsheetSection): number {
+  return 1 + section.entries.length + 1;
+}
+
+/**
+ * Split the sections over `count` columns, filling each column to the
+ * balanced share of rows before starting the next, so a long cheatsheet
+ * reads top to bottom, then left to right.
+ */
+function columnsOf(sections: CheatsheetSection[], count: number): CheatsheetSection[][] {
+  const total = sections.reduce((sum, section) => sum + sectionRows(section), 0);
+  const share = Math.ceil(total / count);
+  const columns: CheatsheetSection[][] = [[]];
+  let filled = 0;
+
+  for (const section of sections) {
+    const column = columns[columns.length - 1]!;
+
+    if (filled > 0 && filled + sectionRows(section) > share && columns.length < count) {
+      columns.push([section]);
+      filled = sectionRows(section);
+    } else {
+      column.push(section);
+      filled += sectionRows(section);
+    }
+  }
+
+  return columns;
+}
+
+const COLUMN_WIDTH = 48;
+
+export function KeybindsDialog({ sections, theme }: KeybindsDialogProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const { width: terminalWidth, height: terminalHeight } = useTerminalDimensions();
+  const totalRows = sections.reduce((sum, section) => sum + sectionRows(section), 0) + 1;
+  // a cheatsheet taller than the terminal folds into a second column
+  const columnCount =
+    totalRows + 3 > terminalHeight - 4 && terminalWidth >= COLUMN_WIDTH * 2 + 6 ? 2 : 1;
+  const columns = columnsOf(sections, columnCount);
+  const tallest = Math.max(
+    ...columns.map((column) => column.reduce((sum, section) => sum + sectionRows(section), 0)),
+  );
+  const width = Math.min(COLUMN_WIDTH * columnCount + 4, terminalWidth - 6);
+  const height = Math.min(terminalHeight - 4, tallest + 1 + 3);
+
+  return (
+    <Dialog
+      isOpen
+      title=" keybinds "
+      width={width}
+      height={height}
+      background={tokens.elevated}
+      theme={theme}
+    >
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          paddingLeft: 1,
+          paddingRight: 1,
+          paddingTop: 1,
+        }}
+      >
+        <box style={{ flexDirection: "row", flexGrow: 1 }}>
+          {columns.map((column, columnIndex) => (
+            <box key={columnIndex} style={{ flexDirection: "column", width: COLUMN_WIDTH }}>
+              {column.map((section) => (
+                <box key={section.title} style={{ flexDirection: "column" }}>
+                  <text fg={tokens.accent}>{section.title}</text>
+                  {section.entries.map((entry, index) => (
+                    <text key={index}>
+                      <span fg={tokens.text}>{entry.keys.padEnd(12)}</span>
+                      <span fg={tokens.textMuted}>{entry.label}</span>
+                    </text>
+                  ))}
+                  <text> </text>
+                </box>
+              ))}
+            </box>
+          ))}
+        </box>
+        <box style={{ flexDirection: "row" }}>
+          <box style={{ flexGrow: 1 }} />
+          <text fg={tokens.textDim}>[esc]</text>
+        </box>
+      </box>
+    </Dialog>
+  );
+}

package/src/components/MarkdownGridBlock.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { DARK } from "../theme";
+import { buildDisplay, type DisplayBlock } from "../view-plan";
+import type { Story, StoryMeta } from "./story";
+import { MarkdownGridBlock } from "./MarkdownGridBlock";
+
+export const meta: StoryMeta = { title: "Surfaces/MarkdownGridBlock" };
+
+/** The first display block of a kind, for a story that renders one grid in isolation. */
+function firstBlock(markdown: string, kind: DisplayBlock["kind"]): DisplayBlock {
+  return buildDisplay(markdown).find((block) => block.kind === kind)!;
+}
+
+const TABLE = firstBlock(
+  "| Name | Size |\n| :--- | ---: |\n| daemon | 12 |\n| client | 7 |",
+  "table",
+);
+const FRONTMATTER = firstBlock(
+  "---\ntitle: Migration Plan\nowner: platform team\nstatus: in review\n---\n\n# Plan\n",
+  "frontmatter",
+);
+
+export const Table: Story = {
+  render: () => <MarkdownGridBlock block={TABLE} theme={DARK} contentWidth={60} />,
+  expectedColors: [DARK.text, DARK.textDim],
+  size: { width: 62, height: 6 },
+};
+
+export const Frontmatter: Story = {
+  render: () => <MarkdownGridBlock block={FRONTMATTER} theme={DARK} contentWidth={60} />,
+  expectedColors: [DARK.text, DARK.textDim],
+  size: { width: 62, height: 9 },
+};

package/src/components/MarkdownGridBlock.tsx

@@ -0,0 +1,72 @@
+/**
+ * Render a table or frontmatter display block as its grid: a GFM table (bold
+ * header over a rule, aligned columns) or a leading-frontmatter key/value box.
+ * Layout is computed in markdown-grid; this only paints the positioned segments,
+ * dim for borders and bold for the header or key column. The grid annotates as
+ * one unit: every row registers the same block span for hit-testing, so a click
+ * or drag anchors a comment on it and a mark tints the whole grid.
+ */
+
+import React from "react";
+import type { MouseEvent as TerminalMouseEvent, TextRenderable } from "@opentui/core";
+import { displayText, type DisplayBlock } from "../view-plan";
+import type { Theme } from "../theme";
+import { BOLD } from "../annotation-palette";
+import {
+  layoutFrontmatterGrid,
+  layoutMarkdownTable,
+  parseFrontmatterRows,
+  parseMarkdownTable,
+  type GridLine,
+} from "../markdown-grid";
+
+function gridLines(block: DisplayBlock, contentWidth: number): GridLine[] {
+  if (block.kind === "table") return layoutMarkdownTable(parseMarkdownTable(displayText(block)));
+
+  return layoutFrontmatterGrid(parseFrontmatterRows(displayText(block)), contentWidth);
+}
+
+export function MarkdownGridBlock({
+  block,
+  theme,
+  contentWidth,
+  marked = false,
+  markBackdrop,
+  registerRow,
+  onRowMouseDown,
+}: {
+  block: DisplayBlock;
+  theme: Theme;
+  contentWidth: number;
+  /** True while a discussion or held selection marks this grid; tints it so the annotation reads. */
+  marked?: boolean;
+  markBackdrop?: string;
+  /** Registers a grid row's renderable with the annotation surface, all mapping to the one block span. */
+  registerRow?: (rowIndex: number) => (renderable: TextRenderable | null) => void;
+  onRowMouseDown?: (event: TerminalMouseEvent) => void;
+}): React.ReactNode {
+  const lines = gridLines(block, Math.max(12, contentWidth));
+
+  return (
+    <box style={{ flexDirection: "column", backgroundColor: marked ? markBackdrop : undefined }}>
+      {lines.map((line, lineIndex) => (
+        <box key={`grid-${lineIndex}`} style={{ flexDirection: "row" }}>
+          <text selectable={false}>
+            <span fg={theme.textDim}>{"  "}</span>
+          </text>
+          <text selectable={false} ref={registerRow?.(lineIndex)} onMouseDown={onRowMouseDown}>
+            {line.map((segment, segmentIndex) => (
+              <span
+                key={segmentIndex}
+                fg={segment.dim ? theme.textDim : theme.text}
+                attributes={segment.bold ? BOLD : 0}
+              >
+                {segment.text}
+              </span>
+            ))}
+          </text>
+        </box>
+      ))}
+    </box>
+  );
+}

package/src/components/MarkdownThreadEditor.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { MarkdownThreadEditor } from "./MarkdownThreadEditor";
+
+export const meta: StoryMeta = { title: "Surfaces/MarkdownThreadEditor" };
+
+const SAMPLE =
+  "# Rollout Plan\n\nShip the store move behind a `flag`. See [docs](https://x.dev).\n\n- first step\n- second step\n";
+
+export const Editing: Story = {
+  render: () => <MarkdownThreadEditor initialText={SAMPLE} theme={DARK} onExitEditor={() => {}} />,
+  expectedColors: [DARK.blue, DARK.textMuted, DARK.textDim],
+  size: { width: 62, height: 14 },
+};

package/src/components/MarkdownThreadEditor.test.tsx

@@ -0,0 +1,98 @@
+import { describe, expect, test } from "bun:test";
+import React from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { DARK } from "../theme";
+import { press, settle } from "../test-support";
+import { MarkdownThreadEditor, type MarkdownEditorHandle } from "./MarkdownThreadEditor";
+
+describe("MarkdownThreadEditor", () => {
+  test("opens on the working copy and shows the caret position and save hint", async () => {
+    const setup = await testRender(
+      <MarkdownThreadEditor
+        initialText={"# Title\n\nbody text here\n"}
+        theme={DARK}
+        onExitEditor={() => {}}
+      />,
+      { width: 50, height: 12 },
+    );
+
+    await settle(setup);
+    const frame = setup.captureCharFrame();
+
+    expect(frame).toContain("Title");
+    expect(frame).toContain("body text here");
+    expect(frame).toContain("Ln 1/4");
+    expect(frame).toContain("save & close");
+    setup.renderer.destroy();
+  });
+
+  test("the exit handle saves the current text and leaves (the header toggle's path)", async () => {
+    const handleRef = React.createRef<MarkdownEditorHandle>();
+    let exitedWith = "";
+    const setup = await testRender(
+      <MarkdownThreadEditor
+        ref={handleRef}
+        initialText={"keep this"}
+        theme={DARK}
+        onExitEditor={(text) => {
+          exitedWith = text;
+        }}
+      />,
+      { width: 40, height: 8 },
+    );
+
+    await settle(setup);
+    handleRef.current?.requestExit();
+
+    expect(exitedWith).toBe("keep this");
+    setup.renderer.destroy();
+  });
+
+  test("highlights align to the exact characters across lines (no newline drift)", async () => {
+    const setup = await testRender(
+      <MarkdownThreadEditor
+        initialText={"# Head\n\nrun `code` now\n"}
+        theme={DARK}
+        onExitEditor={() => {}}
+      />,
+      { width: 40, height: 10 },
+    );
+
+    await settle(setup);
+    const spans = setup.captureSpans().lines.flatMap((line) => line.spans);
+    const hexOf = (color: { toInts: () => number[] }): string =>
+      "#" +
+      color
+        .toInts()
+        .slice(0, 3)
+        .map((part) => part.toString(16).padStart(2, "0"))
+        .join("");
+    // the code highlight must cover exactly `code`, not a drifted slice like "ode` "
+    const codeSpan = spans.find((span) => span.text === "`code`");
+
+    expect(codeSpan).toBeDefined();
+    expect(codeSpan?.fg && hexOf(codeSpan.fg)).toBe(DARK.textDim);
+    setup.renderer.destroy();
+  });
+
+  test("escape is a no-op - it never leaves the editor (IDE convention)", async () => {
+    let exits = 0;
+    const setup = await testRender(
+      <MarkdownThreadEditor
+        initialText={"stay put"}
+        theme={DARK}
+        onExitEditor={() => {
+          exits += 1;
+        }}
+      />,
+      { width: 40, height: 8 },
+    );
+
+    await settle(setup);
+    await press(setup, "escape");
+
+    expect(exits).toBe(0);
+    expect(setup.captureCharFrame()).toContain("save & close");
+    setup.renderer.destroy();
+  });
+});

package/src/components/MarkdownThreadEditor.tsx

@@ -0,0 +1,162 @@
+/**
+ * The native inline markdown editor for a thread's body: a full-height text area
+ * over the working copy that lightly marks markdown as you type - a heading's
+ * marker dims and its title bolds, links color, inline and fenced code gray -
+ * and reports the caret line and column, replacing the external-editor hand-off so
+ * editing needs no per-user editor configuration. cmd, meta, or ctrl + enter
+ * saves the working copy and closes (loss-free, like the hand-off it replaces),
+ * as does the header edit/normal toggle; plain enter breaks the line. Escape is
+ * a no-op inside the editor, matching a modeless IDE - you leave by an explicit
+ * action, not by escaping the text. The raw markdown stays visible - a concealed
+ * rendered preview is a later layer.
+ */
+
+import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import { type Theme } from "../theme";
+import { markdownHighlightRanges } from "../markdown-highlight";
+import { markdownEditorStyle } from "../markdown-editor-syntax-style";
+
+export interface MarkdownThreadEditorProps {
+  /** The thread body's working copy; the editor opens on this markdown text. */
+  initialText: string;
+  theme: Theme;
+  /** Called with the edited markdown when the reviewer leaves (cmd/ctrl+enter or the header toggle); both save. */
+  onExitEditor: (text: string) => void;
+}
+
+/** An imperative exit for callers outside the editor (the header edit/normal toggle): save the current text and leave. */
+export interface MarkdownEditorHandle {
+  requestExit: () => void;
+}
+
+// three modifiers cover terminal variance for save-and-close; plain enter is a newline, escape stays unbound
+const MARKDOWN_EDITOR_KEY_BINDINGS: KeyBinding[] = [
+  { name: "return", super: true, action: "submit" },
+  { name: "return", meta: true, action: "submit" },
+  { name: "return", ctrl: true, action: "submit" },
+  { name: "a", super: true, action: "select-all" },
+  { name: "a", meta: true, action: "select-all" },
+  { name: "return", action: "newline" },
+  { name: "return", shift: true, action: "newline" },
+];
+
+/** The caret's 1-based line and column, plus the buffer's total line count, for the status footer. */
+interface MarkdownEditorPosition {
+  line: number;
+  column: number;
+  lineCount: number;
+}
+
+/** For each offset 0..length, the count of newlines before it, mapping a source offset to the buffer's newline-excluded offset. */
+function newlinePrefixCounts(text: string): number[] {
+  const counts = Array.from({ length: text.length + 1 }, () => 0);
+  let seen = 0;
+
+  for (let index = 0; index < text.length; index++) {
+    counts[index] = seen;
+    if (text[index] === "\n") seen += 1;
+  }
+  counts[text.length] = seen;
+
+  return counts;
+}
+
+export const MarkdownThreadEditor = forwardRef<MarkdownEditorHandle, MarkdownThreadEditorProps>(
+  function MarkdownThreadEditor({ initialText, theme, onExitEditor }, handleRef): React.ReactNode {
+    const editorRef = useRef<TextareaRenderable | null>(null);
+    const [position, setPosition] = useState<MarkdownEditorPosition>({
+      line: 1,
+      column: 1,
+      lineCount: initialText.split("\n").length,
+    });
+
+    const exitWithCurrentText = (): void =>
+      onExitEditor(editorRef.current?.plainText ?? initialText);
+
+    useImperativeHandle(handleRef, () => ({ requestExit: exitWithCurrentText }));
+
+    const paintMarkdown = (editor: TextareaRenderable): void => {
+      const { styleIdFor } = markdownEditorStyle(theme);
+      const text = editor.plainText;
+      // addHighlightByCharRange counts offsets with newlines excluded, so map source offsets down by the
+      // newlines before them - otherwise a highlight drifts one cell per preceding line
+      const newlinesBefore = newlinePrefixCounts(text);
+
+      editor.editBuffer.clearAllHighlights();
+      for (const range of markdownHighlightRanges(text)) {
+        editor.editBuffer.addHighlightByCharRange({
+          start: range.start - newlinesBefore[range.start]!,
+          end: range.end - newlinesBefore[range.end]!,
+          styleId: styleIdFor(range.group),
+        });
+      }
+    };
+
+    // paint synchronously at commit so the first frame already shows styled markdown
+    useLayoutEffect(() => {
+      const editor = editorRef.current;
+
+      if (!editor) return;
+      editor.editBuffer.setSyntaxStyle(markdownEditorStyle(theme).style);
+      paintMarkdown(editor);
+      setPosition((prior) => ({ ...prior, lineCount: editor.editBuffer.getLineCount() }));
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+      <box style={{ flexDirection: "column", flexGrow: 1, paddingLeft: 2 }}>
+        <textarea
+          ref={editorRef}
+          focused
+          initialValue={initialText}
+          keyBindings={MARKDOWN_EDITOR_KEY_BINDINGS}
+          wrapMode="word"
+          cursorStyle={{ style: "block", blinking: true }}
+          onSubmit={exitWithCurrentText}
+          onCursorChange={(event) =>
+            setPosition((prior) => ({
+              ...prior,
+              line: event.line + 1,
+              column: event.visualColumn + 1,
+            }))
+          }
+          onContentChange={() => {
+            const editor = editorRef.current;
+
+            if (!editor) return;
+            paintMarkdown(editor);
+            setPosition((prior) => ({ ...prior, lineCount: editor.editBuffer.getLineCount() }));
+          }}
+          style={{
+            flexGrow: 1,
+            backgroundColor: "transparent",
+            focusedBackgroundColor: "transparent",
+            textColor: theme.text,
+            focusedTextColor: theme.text,
+          }}
+        />
+        <MarkdownEditorStatus position={position} theme={theme} />
+      </box>
+    );
+  },
+);
+
+/** The one-row footer under the editor: caret line and column, total lines, and the save-and-close hint. */
+function MarkdownEditorStatus({
+  position,
+  theme,
+}: {
+  position: MarkdownEditorPosition;
+  theme: Theme;
+}): React.ReactNode {
+  return (
+    <box style={{ flexDirection: "row", flexShrink: 0 }}>
+      <text
+        fg={theme.textMuted}
+      >{`Ln ${position.line}/${position.lineCount}  Col ${position.column}`}</text>
+      <box style={{ flexGrow: 1 }} />
+      <text fg={theme.textDim}>{"⌃⏎ save & close"}</text>
+    </box>
+  );
+}

package/src/components/MenuBar.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { MenuBar } from "./MenuBar";
+
+export const meta: StoryMeta = { title: "Chrome/MenuBar" };
+
+const callbacks = { onSettings: () => {}, onKeybinds: () => {} };
+
+function BottomFrame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return (
+    <box
+      style={{ flexDirection: "column", width: "100%", height: "100%", justifyContent: "flex-end" }}
+    >
+      {children}
+    </box>
+  );
+}
+
+export const Open: Story = {
+  render: () => (
+    <BottomFrame>
+      <MenuBar open {...callbacks} />
+    </BottomFrame>
+  ),
+  expectedColors: [DARK.text],
+  size: { width: 60, height: 8 },
+};

package/src/components/MenuBar.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { Theme } from "../theme";
+import { useComponentTheme } from "./theme-context";
+import { FRAME_BORDER_STYLE } from "./primitives/frame";
+
+export interface MenuBarProps {
+  open: boolean;
+  onSettings: () => void;
+  onKeybinds: () => void;
+  theme?: Theme;
+}
+
+const DROPDOWN_OPTION_ROWS = 2;
+
+/** The settings gear's drop-down: Settings and Keybinds, below the top-left gear. */
+export function MenuBar({ open, onSettings, onKeybinds, theme }: MenuBarProps): React.ReactNode {
+  const tokens = useComponentTheme(theme);
+  const dropdownHeight = DROPDOWN_OPTION_ROWS + 2;
+
+  if (!open) return null;
+
+  return (
+    <box
+      style={{
+        position: "absolute",
+        left: 1,
+        top: 2,
+        width: 16,
+        height: dropdownHeight,
+        border: true,
+        borderStyle: FRAME_BORDER_STYLE,
+        borderColor: tokens.text,
+        flexDirection: "column",
+      }}
+    >
+      <box onMouseUp={onSettings}>
+        <text fg={tokens.text}> Settings</text>
+      </box>
+      <box onMouseUp={onKeybinds}>
+        <text fg={tokens.text}> Keybinds</text>
+      </box>
+    </box>
+  );
+}

package/src/components/NavModeHint.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { DARK } from "../theme";
+import type { Story, StoryMeta } from "./story";
+import { NavModeHint } from "./NavModeHint";
+
+export const meta: StoryMeta = { title: "Chrome/NavModeHint" };
+
+function Frame({ children }: { children: React.ReactNode }): React.ReactNode {
+  return <box style={{ width: "100%", backgroundColor: DARK.panel }}>{children}</box>;
+}
+
+export const ThreadNav: Story = {
+  render: () => (
+    <Frame>
+      <NavModeHint navMode surface="thread" theme={DARK} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 1 },
+};
+
+export const DiffNav: Story = {
+  render: () => (
+    <Frame>
+      <NavModeHint navMode surface="diff" theme={DARK} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 1 },
+};
+
+export const Composing: Story = {
+  render: () => (
+    <Frame>
+      <NavModeHint navMode={false} surface="thread" theme={DARK} />
+    </Frame>
+  ),
+  expectedColors: [DARK.textDim],
+  size: { width: 80, height: 1 },
+};

package/src/components/NavModeHint.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import type { Theme } from "../theme";
+
+const DIFF_NAV_HINT = "x reject · c fold · d layout · k walk · ⏎ submit · type to leave";
+const THREAD_NAV_HINT = "c comment · e edit · s share · n/p cards · ⏎ submit · type to leave";
+const BARE_NAV_HINT = "c comment · z fold · type to leave";
+const COMPOSE_HINT = "type to comment · esc for nav mode";
+
+const NAV_HINTS = { thread: THREAD_NAV_HINT, diff: DIFF_NAV_HINT, bare: BARE_NAV_HINT };
+
+export type NavHintSurface = keyof typeof NAV_HINTS;
+
+export function NavModeHint({
+  navMode,
+  surface,
+  theme,
+}: {
+  navMode: boolean;
+  surface: NavHintSurface;
+  theme: Theme;
+}): React.ReactNode {
+  const navHint = NAV_HINTS[surface];
+
+  return (
+    <box style={{ height: 1, flexDirection: "row", paddingLeft: 2 }}>
+      <text selectable={false} fg={theme.textDim}>
+        {navMode ? navHint : COMPOSE_HINT}
+      </text>
+    </box>
+  );
+}

package/src/components/OverlayScrollbar.stories.tsx

@@ -0,0 +1,33 @@
+import React, { useRef } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import { DARK } from "../theme";
+import { OverlayScrollbar } from "./OverlayScrollbar";
+import type { Story, StoryMeta } from "./story";
+
+export const meta: StoryMeta = { title: "Chrome/OverlayScrollbar" };
+
+function TallSurface(): React.ReactNode {
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+
+  return (
+    <box style={{ width: 24, height: 8, flexDirection: "row", backgroundColor: DARK.background }}>
+      <scrollbox
+        ref={scrollRef}
+        style={{ flexGrow: 1 }}
+        focused={false}
+        verticalScrollbarOptions={{ visible: false }}
+      >
+        {Array.from({ length: 24 }, (_unused, index) => (
+          <text key={index} fg={DARK.textMuted}>{`row ${index + 1}`}</text>
+        ))}
+      </scrollbox>
+      <OverlayScrollbar scrollbox={scrollRef} />
+    </box>
+  );
+}
+
+// At rest the overlay bar is hidden; the thumb only appears while the surface is scrolling.
+export const AtRest: Story = {
+  render: () => <TallSurface />,
+  size: { width: 24, height: 8 },
+};