makersclaw 0.1.0 → 0.3.0

package/registry/blocks/flow-canvas/chrome.jsx

@@ -0,0 +1,649 @@
+"use client";
+
+// The canvas's chrome, all kit parts: the tool rail and its flyouts, the
+// zoom bar, undo/redo with the save state, the floating toolbar over a
+// selection, the connector's toolbar, the menu that follows a connector
+// dropped on empty canvas, the empty state, the list view, the shortcuts
+// sheet and the presentation bar. Each is a plain component driven by
+// props; flow-canvas.jsx places them.
+import { useEffect, useRef } from "react";
+import {
+  Button,
+  Icon,
+  IconButton,
+  Kbd,
+  KbdGroup,
+  Kicker,
+  Menu,
+  MenuPanel,
+  Popover,
+  Separator,
+  Sheet,
+  Toggle,
+  Tooltip,
+  cx,
+} from "../../ui";
+import { ARROWS, COLOR_NAMES, LINES, SHAPES, SHAPE_NAMES, TEXT_SIZES, frameOf, describeNode, nodeRect } from "./board";
+import { useCanvas } from "./context";
+import { SOLID, TINT, tone } from "./theme";
+
+/** The ⌘ key on a Mac, Ctrl elsewhere — for labels. */
+export function modKey() {
+  if (typeof navigator === "undefined") return "Ctrl";
+  return /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || "") ? "⌘" : "Ctrl";
+}
+const sc = (keys) => keys.replace("Mod", modKey());
+
+const PANEL = "fc-chrome pointer-events-auto rounded-xl border border-border bg-popover text-popover-foreground shadow-lg";
+
+// ── the rail ─────────────────────────────────────────────────────────────
+
+/**
+ * The tool rail: a vertical pill on the left, a bar along the bottom on a
+ * narrow canvas. `items` are tools ({ id, label, icon, shortcut, kind:
+ * "mode" | "action" }) and "|" separators.
+ */
+export function ToolRail({ items, tool, onPick, narrow }) {
+  return (
+    <div role="toolbar" aria-label="Tools" aria-orientation={narrow ? "horizontal" : "vertical"} className={cx(PANEL, "flex gap-0.5 p-1", narrow ? "max-w-full flex-row overflow-x-auto" : "flex-col")}>
+      {items.map((t, i) =>
+        t === "|" ? (
+          <Separator key={`sep-${i}`} orientation={narrow ? "vertical" : "horizontal"} className={narrow ? "mx-0.5 my-1.5" : "mx-1.5 my-0.5 w-auto!"} />
+        ) : (
+          <Tooltip key={t.id} label={t.shortcut ? `${t.label} · ${t.shortcut}` : t.label} side={narrow ? "top" : "right"} delay={300}>
+            {t.kind === "action" ? (
+              <IconButton icon={t.icon} label={t.label} size={narrow ? "md" : "sm"} onClick={() => onPick(t)} aria-keyshortcuts={t.shortcut} />
+            ) : (
+              <Toggle
+                icon={t.icon}
+                label={t.label}
+                variant="quiet"
+                size={narrow ? "md" : "sm"}
+                pressed={tool === t.id}
+                onPressedChange={() => onPick(t)}
+                aria-keyshortcuts={t.shortcut}
+              />
+            )}
+          </Tooltip>
+        ),
+      )}
+    </div>
+  );
+}
+
+/** A small sticky-coloured square: the sticky palette's swatch. */
+export function StickySwatch({ color, className }) {
+  return (
+    <span aria-hidden="true" className={cx("relative inline-block size-5 shrink-0 overflow-hidden rounded-sm bg-card ring-1 ring-border", className)}>
+      <span className={cx("absolute inset-0", tone(TINT, color, "warning"))} />
+    </span>
+  );
+}
+
+/** A full-strength colour dot. */
+export function ColorDot({ color, className }) {
+  return <span aria-hidden="true" className={cx("inline-block size-4 shrink-0 rounded-full ring-1 ring-border", tone(SOLID, color), className)} />;
+}
+
+const colorName = (c, i) => COLOR_NAMES[c] ?? `Colour ${i + 1}`;
+
+/** A row of colour choices (pressed = current). */
+export function Palette({ colors, value, onPick, swatch = "sticky", label = "Colour" }) {
+  return (
+    <div role="group" aria-label={label} className="flex flex-wrap gap-0.5">
+      {colors.map((c, i) => (
+        <Tooltip key={c} label={colorName(c, i)} delay={300}>
+          <Button
+            variant="quiet"
+            size="sm"
+            iconOnly
+            aria-label={colorName(c, i)}
+            aria-pressed={value === c}
+            onClick={() => onPick(c)}
+            className="aria-pressed:bg-accent aria-pressed:ring-2 aria-pressed:ring-primary"
+          >
+            {swatch === "sticky" ? <StickySwatch color={c} /> : <ColorDot color={c} />}
+          </Button>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}
+
+/** A little drawing of a shape kind, for menus and flyouts. */
+export function ShapeGlyph({ kind }) {
+  const base = "inline-block shrink-0 border-2 border-current";
+  if (kind === "ellipse") return <span aria-hidden="true" className={cx(base, "h-3.5 w-5 rounded-full")} />;
+  if (kind === "diamond") return <span aria-hidden="true" className={cx(base, "mx-0.5 size-3.5 rotate-45 rounded-xs")} />;
+  if (kind === "pill") return <span aria-hidden="true" className={cx(base, "h-3 w-5 rounded-full")} />;
+  return <span aria-hidden="true" className={cx(base, "h-3.5 w-5 rounded-xs")} />;
+}
+
+/** What the sticky and shape tools offer while they are on: the colour, or
+ *  the shape kind, of what the next click places. */
+export function ToolFlyout({ tool, stickyColor, onStickyColor, shapeKind, onShapeKind, palette }) {
+  if (tool === "sticky") {
+    return (
+      <div className={cx(PANEL, "p-1")}>
+        <Palette colors={palette} value={stickyColor} onPick={onStickyColor} label="Sticky colour" />
+      </div>
+    );
+  }
+  if (tool === "shape") {
+    return (
+      <div role="group" aria-label="Shape" className={cx(PANEL, "flex gap-0.5 p-1")}>
+        {SHAPES.map((k) => (
+          <Tooltip key={k} label={SHAPE_NAMES[k]} delay={300}>
+            <Button variant="quiet" size="sm" iconOnly aria-label={SHAPE_NAMES[k]} aria-pressed={shapeKind === k} onClick={() => onShapeKind(k)} className="aria-pressed:bg-accent">
+              <ShapeGlyph kind={k} />
+            </Button>
+          </Tooltip>
+        ))}
+      </div>
+    );
+  }
+  return null;
+}
+
+// ── zoom, undo, save ─────────────────────────────────────────────────────
+
+/** `zoom`: the zoom level to show, a node ("100%"). */
+export function ZoomBar({ zoom, narrow, onZoomIn, onZoomOut, onZoomTo, onFit, onFitSelection, hasSelection, minimap, onMinimap, list, onList, snap, onSnap, onShortcuts, presentation }) {
+  return (
+    <div role="toolbar" aria-label="View" className={cx(PANEL, "flex items-center gap-0.5 p-1")}>
+      <Tooltip label="Zoom out" delay={300}>
+        <IconButton icon="minus" label="Zoom out" size="sm" onClick={onZoomOut} />
+      </Tooltip>
+      <Menu
+        label="Zoom options"
+        side="top"
+        align="center"
+        trigger={<span className="min-w-10 text-center text-xs font-medium tabular-nums">{zoom}</span>}
+        items={[
+          { label: "Zoom in", shortcut: sc("Mod+"), onSelect: onZoomIn },
+          { label: "Zoom out", shortcut: sc("Mod−"), onSelect: onZoomOut },
+          { type: "separator" },
+          { label: "Zoom to 50%", onSelect: () => onZoomTo(0.5) },
+          { label: "Zoom to 100%", shortcut: sc("Mod0"), onSelect: () => onZoomTo(1) },
+          { label: "Zoom to 200%", onSelect: () => onZoomTo(2) },
+          { type: "separator" },
+          { label: "Fit to screen", icon: "maximize", shortcut: "⇧1", onSelect: onFit },
+          { label: "Zoom to selection", shortcut: "⇧2", onSelect: onFitSelection, disabled: !hasSelection },
+        ]}
+      />
+      <Tooltip label="Zoom in" delay={300}>
+        <IconButton icon="plus" label="Zoom in" size="sm" onClick={onZoomIn} />
+      </Tooltip>
+      <Separator orientation="vertical" className="mx-0.5 my-1.5" />
+      <Tooltip label="Fit to screen · ⇧1" delay={300}>
+        <IconButton icon="maximize" label="Fit to screen" size="sm" onClick={onFit} />
+      </Tooltip>
+      {!narrow && !presentation ? (
+        <Tooltip label="Minimap" delay={300}>
+          <Toggle icon="map" label="Minimap" variant="quiet" size="sm" pressed={minimap} onPressedChange={onMinimap} />
+        </Tooltip>
+      ) : null}
+      <Tooltip label="List view" delay={300}>
+        <Toggle icon="list" label="List view" variant="quiet" size="sm" pressed={list} onPressedChange={onList} />
+      </Tooltip>
+      {!presentation ? (
+        <Menu
+          label="More view options"
+          side="top"
+          items={[
+            { type: "checkbox", label: "Snap to grid", checked: snap, onCheckedChange: onSnap },
+            { type: "separator" },
+            { label: "Keyboard shortcuts", icon: "keyboard", shortcut: "?", onSelect: onShortcuts },
+          ]}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function HistoryBar({ canUndo, canRedo, onUndo, onRedo, save, onRetry }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div role="toolbar" aria-label="History" className={cx(PANEL, "flex items-center gap-0.5 p-1")}>
+        <Tooltip label={`Undo · ${sc("ModZ")}`} delay={300}>
+          <IconButton icon="undo" label="Undo" size="sm" onClick={onUndo} disabled={!canUndo} />
+        </Tooltip>
+        <Tooltip label={`Redo · ⇧${sc("ModZ")}`} delay={300}>
+          <IconButton icon="redo" label="Redo" size="sm" onClick={onRedo} disabled={!canRedo} />
+        </Tooltip>
+      </div>
+      <SaveState save={save} onRetry={onRetry} />
+    </div>
+  );
+}
+
+/** "Saving…", "Saved", or why it did not save with a Retry. */
+export function SaveState({ save, onRetry }) {
+  if (!save || save.state === "idle") return null;
+  if (save.state === "error") {
+    return (
+      <span role="alert" className={cx(PANEL, "flex items-center gap-1.5 py-1 pr-1 pl-2.5 text-xs text-destructive")}>
+        <Icon name="warning" size={14} />
+        <span className="max-w-48 truncate">{save.error || "Not saved"}</span>
+        <Button variant="quiet" size="sm" onClick={onRetry}>
+          Retry
+        </Button>
+      </span>
+    );
+  }
+  return (
+    <span aria-live="polite" className="fc-chrome flex items-center gap-1 rounded-full bg-background/80 px-2 py-1 text-xs text-muted-foreground">
+      {save.state === "saving" ? <Icon name="loader" size={12} className="animate-spin motion-reduce:animate-none" /> : <Icon name="check" size={12} />}
+      {save.state === "saving" ? "Saving…" : "Saved"}
+    </span>
+  );
+}
+
+// ── the floating toolbar over a selection ────────────────────────────────
+
+const COLORABLE = new Set(["sticky", "shape", "frame", "card"]);
+const TEXT_SIZE_LABEL = { sm: "Small", md: "Medium", lg: "Large", xl: "Extra large" };
+
+/**
+ * Above whatever is selected: colour, shape kind, text size, align, front /
+ * back, duplicate, lock, delete — only what applies to the selection —
+ * then the block's own `extra`.
+ */
+export function SelectionToolbar({ nodes, api, palette, extra }) {
+  if (!nodes.length || !api) return null;
+  const ids = nodes.map((n) => n.id);
+  const locked = nodes.every((n) => n.data?.locked);
+  const anyLocked = nodes.some((n) => n.data?.locked);
+  const colorable = nodes.filter((n) => COLORABLE.has(n.type) || n.data?.color !== undefined);
+  const stickies = colorable.length > 0 && colorable.every((n) => n.type === "sticky");
+  const colors = stickies ? palette : [...new Set([...palette, "chart-1", "success", "info", "destructive", "muted"])];
+  const color = colorable[0]?.data?.color ?? (colorable[0]?.type === "sticky" ? "warning" : "muted");
+  const shapes = nodes.filter((n) => n.type === "shape");
+  const sized = nodes.filter((n) => n.type === "shape" || n.type === "text");
+  const setData = (list, patch) => api.updateNodesData(list.map((n) => n.id), patch);
+  const many = nodes.length > 1;
+  const own = typeof extra === "function" ? extra({ nodes, edges: [] }, api) : extra;
+
+  return (
+    <div role="toolbar" aria-label="Selection" className={cx(PANEL, "nodrag nopan nowheel flex items-center gap-0.5 p-1")}>
+      {colorable.length && !locked ? (
+        <Popover
+          label="Colour"
+          side="top"
+          width="auto"
+          className="p-1.5"
+          trigger={(p) => (
+            <Button {...p} variant="quiet" size="sm" iconOnly aria-label="Colour">
+              {stickies ? <StickySwatch color={color} /> : <ColorDot color={color} />}
+            </Button>
+          )}
+        >
+          <Palette colors={colors} value={color} swatch={stickies ? "sticky" : "dot"} onPick={(c) => setData(colorable, { color: c })} />
+          {colorable.some((n) => n.type === "frame") ? (
+            <Button variant="quiet" size="sm" className="mt-1 w-full" onClick={() => setData(colorable, { color: undefined })}>
+              No colour
+            </Button>
+          ) : null}
+        </Popover>
+      ) : null}
+      {shapes.length && !locked ? (
+        <Menu
+          label="Shape"
+          side="top"
+          align="center"
+          trigger={<ShapeGlyph kind={shapes[0].data?.shape ?? "rect"} />}
+          items={[{ type: "radio", label: "Shape", value: shapes[0].data?.shape ?? "rect", onValueChange: (v) => setData(shapes, { shape: v }), options: SHAPES.map((k) => ({ value: k, label: SHAPE_NAMES[k] })) }]}
+        />
+      ) : null}
+      {sized.length && !locked ? (
+        <Menu
+          label="Text size"
+          side="top"
+          align="center"
+          trigger={<Icon name="type" size={16} />}
+          items={[
+            {
+              type: "radio",
+              label: "Text size",
+              value: sized[0].data?.textSize ?? "md",
+              onValueChange: (v) => setData(sized, { textSize: v }),
+              options: TEXT_SIZES.map((k) => ({ value: k, label: TEXT_SIZE_LABEL[k] })),
+            },
+          ]}
+        />
+      ) : null}
+      {many && !locked ? (
+        <Menu
+          label="Align"
+          side="top"
+          align="center"
+          trigger={<Icon name="align-center" size={16} />}
+          items={[
+            { label: "Align left", onSelect: () => api.align(ids, "left") },
+            { label: "Align centre", onSelect: () => api.align(ids, "center") },
+            { label: "Align right", onSelect: () => api.align(ids, "right") },
+            { type: "separator" },
+            { label: "Align top", onSelect: () => api.align(ids, "top") },
+            { label: "Align middle", onSelect: () => api.align(ids, "middle") },
+            { label: "Align bottom", onSelect: () => api.align(ids, "bottom") },
+            nodes.length > 2 && { type: "separator" },
+            nodes.length > 2 && { label: "Distribute horizontally", onSelect: () => api.distribute(ids, "horizontal") },
+            nodes.length > 2 && { label: "Distribute vertically", onSelect: () => api.distribute(ids, "vertical") },
+            { type: "separator" },
+            { label: "Tidy up (left to right)", onSelect: () => api.autoLayout({ ids, direction: "LR" }) },
+            { label: "Tidy up (top to bottom)", onSelect: () => api.autoLayout({ ids, direction: "TB" }) },
+          ]}
+        />
+      ) : null}
+      <Separator orientation="vertical" className="mx-0.5 my-1.5" />
+      <Tooltip label={`Bring to front · ${sc("Mod]")}`} delay={300}>
+        <IconButton icon="bring-front" label="Bring to front" size="sm" onClick={() => api.arrange(ids, "front")} />
+      </Tooltip>
+      <Tooltip label={`Send to back · ${sc("Mod[")}`} delay={300}>
+        <IconButton icon="send-back" label="Send to back" size="sm" onClick={() => api.arrange(ids, "back")} />
+      </Tooltip>
+      <Tooltip label={`Duplicate · ${sc("ModD")}`} delay={300}>
+        <IconButton icon="copy" label="Duplicate" size="sm" onClick={() => api.duplicate(ids)} />
+      </Tooltip>
+      <Tooltip label={`${anyLocked ? "Unlock" : "Lock"} · ⇧${sc("ModL")}`} delay={300}>
+        <IconButton icon={anyLocked ? "lock-open" : "lock"} label={anyLocked ? "Unlock" : "Lock"} size="sm" onClick={() => api.lock(ids, !anyLocked)} />
+      </Tooltip>
+      {!locked ? (
+        <Tooltip label="Delete · ⌫" delay={300}>
+          <IconButton icon="trash" label="Delete" size="sm" onClick={() => api.removeNodes(ids.filter((id) => !nodes.find((n) => n.id === id)?.data?.locked))} />
+        </Tooltip>
+      ) : null}
+      {own ? (
+        <>
+          <Separator orientation="vertical" className="mx-0.5 my-1.5" />
+          {own}
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+const LINE_LABEL = { curved: "Curved", straight: "Straight", elbow: "Elbow" };
+const ARROW_LABEL = { end: "Arrow at the end", both: "Arrows at both ends", none: "No arrows" };
+
+/** Above a selected connector: its line, its arrows, its label, delete. */
+export function EdgeToolbar({ id, data, label }) {
+  const { api } = useCanvas();
+  if (!api) return null;
+  const set = (patch) => api.updateEdge(id, { data: { ...(data ?? {}), ...patch } });
+  return (
+    <div role="toolbar" aria-label="Connector" className={cx(PANEL, "flex items-center gap-0.5 p-1")}>
+      <Menu
+        label="Line style"
+        side="top"
+        align="center"
+        trigger={<span className="px-1 text-xs font-medium">{LINE_LABEL[data?.line ?? "curved"]}</span>}
+        items={[
+          { type: "radio", label: "Line", value: data?.line ?? "curved", onValueChange: (v) => set({ line: v }), options: LINES.map((k) => ({ value: k, label: LINE_LABEL[k] })) },
+          { type: "separator" },
+          { type: "checkbox", label: "Dashed", checked: Boolean(data?.dashed), onCheckedChange: (v) => set({ dashed: v || undefined }) },
+        ]}
+      />
+      <Menu
+        label="Arrows"
+        side="top"
+        align="center"
+        trigger={<Icon name={(data?.arrow ?? "end") === "none" ? "minus" : "arrow-right"} size={16} />}
+        items={[{ type: "radio", label: "Arrows", value: data?.arrow ?? "end", onValueChange: (v) => set({ arrow: v }), options: ARROWS.map((k) => ({ value: k, label: ARROW_LABEL[k] })) }]}
+      />
+      <Tooltip label={label ? "Edit label" : "Add label"} delay={300}>
+        <IconButton icon="pencil" label={label ? "Edit label" : "Add label"} size="sm" onClick={() => api.editEdge(id)} />
+      </Tooltip>
+      <Tooltip label="Delete · ⌫" delay={300}>
+        <IconButton icon="trash" label="Delete connector" size="sm" onClick={() => api.removeEdges([id])} />
+      </Tooltip>
+    </div>
+  );
+}
+
+/**
+ * A point in the canvas box where a floating toolbar hangs: centred on `x`,
+ * its foot on `top` (above the thing), or its head on `bottom` when there
+ * is no room above. Positioned with left/top only — no transform — so the
+ * kit's menus and tooltips inside it open beside their buttons.
+ */
+export function FloatAt({ x, top, bottom, children }) {
+  const below = top < 64;
+  return (
+    <div
+      className={cx("pointer-events-none absolute z-20 flex h-0 w-0 justify-center [&>*]:shrink-0", below ? "items-start" : "items-end")}
+      style={{ left: Math.round(x), top: Math.round(below ? bottom : top) }}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ── the menu after a connector dropped on empty canvas ───────────────────
+
+export function ConnectMenu({ at, items, onClose }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current?.querySelector('[role^="menuitem"]:not([disabled])')?.focus({ preventScroll: true });
+  }, []);
+  return (
+    <div className="fc-chrome absolute z-20" style={{ left: at.x, top: at.y }}>
+      <MenuPanel
+        panelRef={ref}
+        items={items}
+        label="Add a connected item"
+        onClose={onClose}
+        onExit={onClose}
+        className="min-w-48 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
+      />
+    </div>
+  );
+}
+
+// ── empty state ──────────────────────────────────────────────────────────
+
+export function EmptyState({ templates, onTemplate, narrow }) {
+  return (
+    <div className="pointer-events-none absolute inset-0 grid place-items-center p-6">
+      <div className="fc-chrome grid max-w-sm justify-items-center gap-2 text-center">
+        <span aria-hidden="true" className="relative mb-1 grid size-14 -rotate-6 place-items-center overflow-hidden rounded-md bg-card shadow-md">
+          <span className="absolute inset-0 bg-warning/35" />
+          <Icon name="plus" size={22} className="relative text-foreground" />
+        </span>
+        <p className="text-base font-medium">Double-click anywhere to add a sticky</p>
+        <p className="text-sm text-muted-foreground">
+          {narrow ? "Or pick a tool below." : "Or pick a tool on the left:"} <Kbd>N</Kbd> sticky, <Kbd>S</Kbd> shape, <Kbd>T</Kbd> text, <Kbd>L</Kbd> connector.
+        </p>
+        {templates?.length ? (
+          <div className="pointer-events-auto mt-3 grid justify-items-center gap-2">
+            <Kicker>Or start from</Kicker>
+            <div className="flex flex-wrap justify-center gap-2">
+              {templates.map((t) => (
+                <Button key={t.id} variant="secondary" size="sm" icon={t.icon} onClick={() => onTemplate(t)} title={t.description}>
+                  {t.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// ── list view ────────────────────────────────────────────────────────────
+
+const TYPE_ICON = { sticky: "sticky-note", shape: "square", text: "type", frame: "frame", card: "file", image: "image" };
+
+/** The board as a list: every frame with what it holds, every connector.
+ *  A row goes back to the canvas with that item selected. */
+export function ListView({ board, label, onPick, onClose, describe, iconOf }) {
+  const nodes = board.nodes;
+  const parent = frameOf(board);
+  const kids = new Map();
+  for (const n of nodes) {
+    const p = parent.get(n.id) ?? null;
+    if (!kids.has(p)) kids.set(p, []);
+    kids.get(p).push(n);
+  }
+  const order = (a, b) => {
+    const ra = nodeRect(a);
+    const rb = nodeRect(b);
+    return (a.type === "frame") - (b.type === "frame") || (Math.abs(ra.y - rb.y) > 24 ? ra.y - rb.y : ra.x - rb.x);
+  };
+  for (const l of kids.values()) l.sort(order);
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  const row = (n) => (
+    <li key={n.id}>
+      <Button variant="nav" size="sm" icon={iconOf?.(n) ?? TYPE_ICON[n.type] ?? "circle"} onClick={() => onPick(n.id)}>
+        <span className="truncate">{describeNode(n, describe)}</span>
+      </Button>
+    </li>
+  );
+  const section = (parentId, depth) =>
+    (kids.get(parentId) ?? []).map((n) =>
+      n.type === "frame" ? (
+        <li key={n.id} className={cx("grid gap-1", depth ? "ml-4" : "")}>
+          <Button variant="nav" size="sm" icon="frame" onClick={() => onPick(n.id)}>
+            <span className="truncate font-medium">{n.data?.title || "Untitled frame"}</span>
+          </Button>
+          <ul className="ml-4 grid gap-0.5 border-l border-border pl-2">{section(n.id, depth + 1)}</ul>
+        </li>
+      ) : (
+        row(n)
+      ),
+    );
+  return (
+    <div className="fc-chrome absolute inset-0 z-10 overflow-auto bg-background">
+      <div className="mx-auto grid max-w-2xl gap-4 p-4 pb-24 sm:p-6">
+        <div className="flex items-center justify-between gap-3">
+          <h2 className="text-base font-semibold">{label} as a list</h2>
+          <Button size="sm" icon="grid" onClick={onClose}>
+            Back to canvas
+          </Button>
+        </div>
+        {nodes.length ? <ul className="grid gap-0.5">{section(null, 0)}</ul> : <p className="text-sm text-muted-foreground">Nothing on the board yet.</p>}
+        {board.edges.length ? (
+          <div className="grid gap-1">
+            <Kicker>Connectors</Kicker>
+            <ul className="grid gap-1 text-sm">
+              {board.edges.map((e) => (
+                <li key={e.id} className="flex items-center gap-2 text-muted-foreground">
+                  <span className="truncate text-foreground">{describeNode(byId.get(e.source), describe)}</span>
+                  <Icon name={e.data?.arrow === "none" ? "minus" : "arrow-right"} size={14} className="shrink-0" />
+                  <span className="truncate text-foreground">{describeNode(byId.get(e.target), describe)}</span>
+                  {e.label ? <span className="shrink-0">({e.label})</span> : null}
+                </li>
+              ))}
+            </ul>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+// ── shortcuts ────────────────────────────────────────────────────────────
+
+function Row({ label, keys }) {
+  return (
+    <div className="flex items-center justify-between gap-4 py-1.5 text-sm">
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd>{typeof keys === "string" ? <span className="text-xs text-muted-foreground">{keys}</span> : <KbdGroup keys={keys} />}</dd>
+    </div>
+  );
+}
+
+export function ShortcutsSheet({ open, onClose, tools }) {
+  const m = modKey();
+  const groups = [
+    ["Tools", tools.filter((t) => t !== "|" && t.shortcut).map((t) => [t.label, [t.shortcut]])],
+    [
+      "Edit",
+      [
+        ["Undo", [m, "Z"]],
+        ["Redo", ["⇧", m, "Z"]],
+        ["Duplicate", [m, "D"]],
+        ["Copy · paste", [m, "C"]],
+        ["Select all", [m, "A"]],
+        ["Delete", ["⌫"]],
+        ["Lock or unlock", ["⇧", m, "L"]],
+        ["Bring to front", [m, "]"]],
+        ["Send to back", [m, "["]],
+      ],
+    ],
+    [
+      "Cards",
+      [
+        ["New sticky", "Double-click the canvas"],
+        ["Edit words", ["↵"]],
+        ["Stop editing", ["Esc"]],
+        ["Nudge", ["←", "→"]],
+        ["Nudge 10px", ["⇧", "→"]],
+        ["Next card", ["⇥"]],
+        ["Actions menu", ["⇧", "F10"]],
+      ],
+    ],
+    [
+      "View",
+      [
+        ["Pan", "Scroll, or Space + drag"],
+        ["Zoom", "Pinch, or Ctrl + scroll"],
+        ["Zoom in · out", [m, "+"]],
+        ["Zoom to 100%", [m, "0"]],
+        ["Fit to screen", ["⇧", "1"]],
+        ["Zoom to selection", ["⇧", "2"]],
+        ["This sheet", ["?"]],
+      ],
+    ],
+  ];
+  return (
+    <Sheet open={open} onClose={onClose} title="Keyboard shortcuts" description="The board answers to these while it has focus.">
+      <div className="grid gap-5">
+        {groups.map(([title, rows]) =>
+          rows.length ? (
+            <section key={title}>
+              <Kicker className="mb-1">{title}</Kicker>
+              <dl className="divide-y divide-border">
+                {rows.map(([label, keys]) => (
+                  <Row key={label} label={label} keys={keys} />
+                ))}
+              </dl>
+            </section>
+          ) : null,
+        )}
+      </div>
+    </Sheet>
+  );
+}
+
+// ── presentation ─────────────────────────────────────────────────────────
+
+export function PresentBar({ index, count, title, onPrev, onNext, onExit }) {
+  return (
+    <div role="toolbar" aria-label="Presentation" className={cx(PANEL, "flex items-center gap-1 p-1")}>
+      <IconButton icon="chevron-left" label="Previous frame" size="sm" onClick={onPrev} disabled={index <= 0} />
+      <span aria-live="polite" className="min-w-24 px-1 text-center text-sm">
+        {count ? (
+          <>
+            <span className="tabular-nums text-muted-foreground">
+              {index + 1} / {count}
+            </span>{" "}
+            <span className="font-medium">{title}</span>
+          </>
+        ) : (
+          <span className="text-muted-foreground">No frames</span>
+        )}
+      </span>
+      <IconButton icon="chevron-right" label="Next frame" size="sm" onClick={onNext} disabled={index >= count - 1} />
+      {onExit ? (
+        <>
+          <Separator orientation="vertical" className="mx-0.5 my-1.5" />
+          <Button variant="quiet" size="sm" icon="x" onClick={onExit}>
+            Exit
+          </Button>
+        </>
+      ) : null}
+    </div>
+  );
+}