@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/tooltip.json

@@ -0,0 +1,164 @@
+{
+  "name": "Tooltip",
+  "slug": "tooltip",
+  "group": "overlays",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A short label revealed on hover or keyboard focus — what an icon-only control\ndoes, what an abbreviated column header means.\n\nWraps Base UI's `Tooltip` and adds the two things a design system must not\nleave to the caller: the `role=\"tooltip\"` / `aria-describedby` pairing, and\nthe portal theme stamp. For anything longer than a label, reach for\n{@link InfoTip } (a focusable badge) or a `Popover` instead — hover-only\ncontent is unreachable on touch.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Provider",
+    "Root",
+    "Trigger",
+    "Content"
+  ],
+  "parts": [
+    {
+      "name": "Provider",
+      "usage": "Tooltip.Provider",
+      "description": "Shares one hover delay across a group of tooltips: once the first one has\nopened, its neighbours open instantly, so scanning a toolbar does not mean\nwaiting out the delay at every button.",
+      "props": [],
+      "typeReferences": [
+        "BaseTooltip.Provider.Props"
+      ]
+    },
+    {
+      "name": "Root",
+      "usage": "Tooltip.Root",
+      "description": "Groups the parts of one tooltip. Renders no element.",
+      "props": [],
+      "typeReferences": [
+        "BaseTooltip.Root.Props"
+      ]
+    },
+    {
+      "name": "Trigger",
+      "usage": "Tooltip.Trigger",
+      "description": "The element the tooltip describes. A `<button>` by default; pass\n`render={…}` to attach the tooltip to something else.\n\nOpens on hover after {@link TooltipTriggerProps.delay} and instantly on\nkeyboard focus — a tooltip nobody can reach with the keyboard is a decoration.",
+      "props": [],
+      "typeReferences": [
+        "BaseTooltip.Trigger.Props"
+      ]
+    },
+    {
+      "name": "Content",
+      "usage": "Tooltip.Content",
+      "description": "The tooltip's portal, positioner and popup.\n\nCarries `role=\"tooltip\"` and the id the trigger describes itself with.\nPortalled through {@link useCuePortalProps} so it renders in the caller's\ntheme and density.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the popup surface."
+        },
+        {
+          "name": "align",
+          "type": "\"center\" | \"end\" | \"start\"",
+          "required": false,
+          "defaultValue": null,
+          "description": "Alignment along that side. Defaults to `\"center\"`."
+        },
+        {
+          "name": "keepMounted",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": null,
+          "description": "Keep the popup mounted while closed."
+        },
+        {
+          "name": "positionerClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the positioner that places the popup."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number | OffsetFunction",
+          "required": false,
+          "defaultValue": "4",
+          "description": "Gap in px between trigger and popup. Defaults to `4`."
+        },
+        {
+          "name": "side",
+          "type": "\"left\" | \"right\" | \"bottom\" | \"top\" | \"inline-end\" | \"inline-start\"",
+          "required": false,
+          "defaultValue": "top",
+          "description": "Preferred side of the trigger. Defaults to `\"top\"`."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number | OffsetFunction",
+          "required": false,
+          "defaultValue": null,
+          "description": "Nudge along the alignment axis, in px."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseTooltip.Popup.Props, \"className\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent-soft",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-control-sm",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-radius-control",
+    "--cue-radius-overlay",
+    "--cue-scrim",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-surface-2",
+    "--cue-text-emphasis",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A short description of the control under the pointer or the focus ring.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Tooltip.Root>\n  <Tooltip.Trigger render={<IconButton aria-label=\"Blackout\" icon={Power} />} />\n  <Tooltip.Content>Fades every channel to zero</Tooltip.Content>\n</Tooltip.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/tooltip",
+  "mdUrl": "/docs/components/tooltip.md",
+  "jsonUrl": "/r/components/tooltip.json",
+  "whenToUse": [
+    "Naming an icon-only control, or adding the keyboard shortcut for it.",
+    "Around a cluster of them, `Tooltip.Provider` so the open delay is paid once for the whole toolbar."
+  ],
+  "whenNotToUse": [
+    "Information the user actually needs. A tooltip is unreachable on touch; put it in the page, or use `InfoTip`.",
+    "Anything interactive. Nothing inside a tooltip can be clicked."
+  ],
+  "commonMistakes": [
+    "Attaching one to an element that cannot take focus, which hides it from every keyboard user.",
+    "Repeating the visible label of the control it points at."
+  ],
+  "specimens": [
+    {
+      "title": "Tooltip / InfoTip",
+      "group": "overlays",
+      "components": [
+        "Tooltip",
+        "InfoTip"
+      ],
+      "code": "<Tooltip.Provider>\n  <Specimens>\n    <Specimen label=\"tooltip\">\n      <Tooltip.Root>\n        <Tooltip.Trigger render={<IconButton aria-label=\"Go\" icon={Play} />} />\n        <Tooltip.Content>Fire the selected cue</Tooltip.Content>\n      </Tooltip.Root>\n    </Specimen>\n    <Specimen label=\"side bottom\">\n      <Tooltip.Root>\n        <Tooltip.Trigger render={<IconButton aria-label=\"Copy address\" icon={Copy} />} />\n        <Tooltip.Content side=\"bottom\">Copy 10.0.0.42</Tooltip.Content>\n      </Tooltip.Root>\n    </Specimen>\n    <Specimen label=\"info tip\">\n      <span className=\"flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg-muted\">\n        Pace tick\n        <InfoTip text=\"Where the meter would be if usage were flat across the period.\" />\n      </span>\n    </Specimen>\n    <Specimen label=\"wide info tip\">\n      <InfoTip\n        width={320}\n        label=\"About provenance\"\n        text=\"Vendor numbers are measured, estimated ones are hatched, and an unbounded meter draws no percentage at all.\"\n      />\n    </Specimen>\n  </Specimens>\n</Tooltip.Provider>",
+      "note": "A tooltip names a control; an InfoTip is the 13px `i` badge that explains one.",
+      "interaction": "tooltips open on hover and on keyboard focus, and never on touch; the InfoTip badge is a real button."
+    }
+  ]
+}

package/manifest/components/trace-waterfall.json

@@ -0,0 +1,74 @@
+{
+  "name": "TraceWaterfall",
+  "slug": "trace-waterfall",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Every span in a run on one time axis, nested, so you can see where it actually went.",
+  "props": [
+    {
+      "name": "spans",
+      "type": "readonly TraceSpan[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Flat list in start order. Nesting comes from each span's depth."
+    },
+    {
+      "name": "totalMs",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Width of the axis. Bars are positioned against this, not against the widest span."
+    },
+    {
+      "name": "visibleCount",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "How many spans have been reported so far."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"spans\" | \"totalMs\" | \"visibleCount\"\n> & {\n  /** Flat list in start order. Nesting comes from each span's depth. */\n  spans: readonly TraceSpan[];\n  /** Width of the axis. Bars are positioned against this, not against the widest span. */\n  totalMs: number;\n  /** How many spans have been reported so far. */\n  visibleCount: number;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "Every span in a run on one time axis, nested, so you can see where it actually went.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { TraceWaterfall } from \"@cueplusplus/ui/elements\";\n\n<TraceWaterfall spans={spans} totalMs={1840} visibleCount={spans.length} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/trace-waterfall",
+  "mdUrl": "/docs/components/trace-waterfall.md",
+  "jsonUrl": "/r/components/trace-waterfall.json",
+  "specimens": [
+    {
+      "title": "TraceWaterfall",
+      "group": "elements",
+      "components": [
+        "TraceWaterfall"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"mid-run\" wide>\n    <TraceWaterfall spans={SPANS} totalMs={2300} visibleCount={4} />\n  </Specimen>\n  <Specimen label=\"with a retry\" wide>\n    <TraceWaterfall spans={SPANS} totalMs={2300} visibleCount={SPANS.length} />\n  </Specimen>\n</Specimens>",
+      "note": "Where the run's time actually went. Bars are positioned against `totalMs` rather than against the widest span, which is the difference between a trace and a bar chart: a 20ms retry at the end stays 20ms wide.",
+      "interaction": "none. Running spans pulse in the stream hue, failed ones are red, and both are spelled out in the row rather than only tinted."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/tree-visibility-toggle.json

@@ -0,0 +1,84 @@
+{
+  "name": "TreeVisibilityToggle",
+  "slug": "tree-visibility-toggle",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "The outliner's three-state visibility control: shown → ghosted → hidden.\n\nThree states rather than a checkbox because a rig has three answers, not two:\n*there*, *there but out of the way*, and *not drawn*. Ghost is the one that\nearns the extra state — it is how you keep a truss as spatial reference while\nworking behind it — and collapsing it into \"hidden\" is what makes people\ntoggle things off and lose their bearings.\n\nMeant for {@link TreeProps.rowControls}. The accessible name states the\n*current* state (\"Visibility: ghosted\") rather than the next action, because\nwith three states \"toggle\" names nothing useful; pressing cycles.",
+  "props": [
+    {
+      "name": "value",
+      "type": "\"hidden\" | \"visible\" | \"ghost\"",
+      "required": true,
+      "defaultValue": null,
+      "description": "The node's current visibility."
+    },
+    {
+      "name": "onValueChange",
+      "type": "(value: TreeVisibility) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called with the next state in the cycle."
+    },
+    {
+      "name": "labels",
+      "type": "Partial<Record<TreeVisibility, string>>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Override the state names used in the accessible label."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"button\">, \"value\" | \"onChange\" | \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-control-sm",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-info",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-surface-2",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "The outliner's three-state visibility control: shown → ghosted → hidden.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<TreeVisibilityToggle value={state} onValueChange={setState} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/tree-visibility-toggle",
+  "mdUrl": "/docs/components/tree-visibility-toggle.md",
+  "jsonUrl": "/r/components/tree-visibility-toggle.json",
+  "specimens": [
+    {
+      "title": "Tree",
+      "group": "chrome",
+      "components": [
+        "Tree",
+        "TreeVisibilityToggle"
+      ],
+      "code": "<Panel className=\"w-full max-w-[30rem] p-(--cue-space-2)\">\n  <Tree\n    items={TREE_ITEMS}\n    expanded={expanded}\n    onExpandedChange={setExpanded}\n    selected={selected}\n    onSelect={setSelected}\n    rowControls={(item) => (\n      <TreeVisibilityToggle\n        value={visibility[item.id] ?? \"visible\"}\n        onValueChange={(next) =>\n          setVisibility((current) => ({ ...current, [item.id]: next }))\n        }\n      />\n    )}\n  />\n</Panel>",
+      "note": "Roving tabindex, `└` indent guides, a hover-revealed control slot and the three-state visibility toggle.",
+      "interaction": "arrow keys move and expand, Enter selects; the row controls appear on hover and stay put for keyboard users."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/tree.json

@@ -0,0 +1,140 @@
+{
+  "name": "Tree",
+  "slug": "tree",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A hierarchical outline: a rig, a scene graph, a folder of shows.\n\nHand-built rather than wrapped, because the pattern's whole cost is in three\ndetails no primitive here provides together:\n\n- **Roving tabindex.** The tree is one tab stop; the arrow keys move inside\n  it. Eighty rows must never mean eighty presses of Tab.\n- **A flat DOM.** Rows carry `aria-level` / `aria-posinset` / `aria-setsize`\n  instead of nesting `role=\"group\"` wrappers, which is both valid ARIA and the\n  shape a virtualizer needs when the outline grows past a screenful.\n- **The gutter.** `└ ├ │` in the mono grid, `aria-hidden` — structure you can\n  see at a glance without indentation alone having to carry it.\n\nSelection is a tint (`accent-soft` ground, accent ink), never a solid fill —\nthe same ruling as the sidebar item and the active tab.",
+  "props": [
+    {
+      "name": "items",
+      "type": "readonly TreeItem[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The roots, in display order."
+    },
+    {
+      "name": "expanded",
+      "type": "readonly string[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "Expanded ids when controlled. Pass with `onExpandedChange`."
+    },
+    {
+      "name": "defaultExpanded",
+      "type": "readonly string[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "Initially expanded ids when uncontrolled."
+    },
+    {
+      "name": "onExpandedChange",
+      "type": "((expanded: string[]) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the whole next expanded set whenever a row is folded or unfolded."
+    },
+    {
+      "name": "selected",
+      "type": "string | null",
+      "required": false,
+      "defaultValue": null,
+      "description": "Selected id when controlled. Pass with `onSelect`."
+    },
+    {
+      "name": "defaultSelected",
+      "type": "string | null",
+      "required": false,
+      "defaultValue": "null",
+      "description": "Initially selected id when uncontrolled."
+    },
+    {
+      "name": "onSelect",
+      "type": "((id: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the id of the row the user selected."
+    },
+    {
+      "name": "renderRow",
+      "type": "((row: TreeRow) => ReactNode)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Replace the *body* of a row — the icon, label and badge.\n\nThe row element itself, its ARIA, its tab index and its indent gutter stay\nwith the component on purpose: those are the parts a call site cannot get\nwrong without breaking keyboard navigation for everyone."
+    },
+    {
+      "name": "rowControls",
+      "type": "((item: TreeItem, row: TreeRow) => ReactNode)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Controls hung off the right of each row, revealed on hover or focus.\n\nThis is where the three-state visibility idiom goes — see\n{@link TreeVisibilityToggle} — along with focus, rename and delete\naffordances. Anything essential belongs in the row body or a context menu\ninstead: hover-revealed controls are invisible on touch."
+    },
+    {
+      "name": "guides",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Draw the box-drawing indent gutter. Defaults to `true`."
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the tree. Required in practice — name what it lists."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"onSelect\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-soft",
+    "--cue-control-sm",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-md",
+    "--cue-icon-sm",
+    "--cue-info",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-surface-2",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "A hierarchical outline: a rig, a scene graph, a folder of shows.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Tree\n  aria-label=\"Rig\"\n  items={rig}\n  selected={selected}\n  onSelect={setSelected}\n  rowControls={(item) => (\n    <TreeVisibilityToggle value={visibility[item.id]} onValueChange={set(item.id)} />\n  )}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/tree",
+  "mdUrl": "/docs/components/tree.md",
+  "jsonUrl": "/r/components/tree.json",
+  "specimens": [
+    {
+      "title": "Tree",
+      "group": "chrome",
+      "components": [
+        "Tree",
+        "TreeVisibilityToggle"
+      ],
+      "code": "<Panel className=\"w-full max-w-[30rem] p-(--cue-space-2)\">\n  <Tree\n    items={TREE_ITEMS}\n    expanded={expanded}\n    onExpandedChange={setExpanded}\n    selected={selected}\n    onSelect={setSelected}\n    rowControls={(item) => (\n      <TreeVisibilityToggle\n        value={visibility[item.id] ?? \"visible\"}\n        onValueChange={(next) =>\n          setVisibility((current) => ({ ...current, [item.id]: next }))\n        }\n      />\n    )}\n  />\n</Panel>",
+      "note": "Roving tabindex, `└` indent guides, a hover-revealed control slot and the three-state visibility toggle.",
+      "interaction": "arrow keys move and expand, Enter selects; the row controls appear on hover and stay put for keyboard users."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/turn-footer.json

@@ -0,0 +1,105 @@
+{
+  "name": "TurnFooter",
+  "slug": "turn-footer",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "The row under a finished turn: copy, reply, fork, and when it happened.\n\nEvery control is opt-in — passing no handler draws no button — because the\nfour are not one set. A read-only shared transcript has a copy button and\nnothing else; a console with branching has all four. A footer that drew\ndisabled controls for the ones a product does not have would be a row of\nthings nobody can press.\n\nThe controls are drawn plainly rather than revealed on hover. Revealing them\nis a decision about the *turn*, not about this row: Cursor keys it off the\nturn's own hover state and Cline's stylesheet explains why the reveal must be\ninstant — \"a fade on hover chrome reads as lag, not polish\" — and float over\nwhat follows rather than reserving space. Both are two lines of CSS on the\nturn, and neither is something this component can decide from inside itself.",
+  "props": [
+    {
+      "name": "onCopy",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Copy the turn. The control exists only when this is given."
+    },
+    {
+      "name": "copied",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Whether the clipboard has it: the copy glyph crossfades to a check."
+    },
+    {
+      "name": "onReply",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Quote this turn into the composer. The control exists only when this is given."
+    },
+    {
+      "name": "onFork",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Branch the conversation from this turn. The control exists only when this is given."
+    },
+    {
+      "name": "onMore",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Open the overflow menu — Cursor hangs \"Copy request ID\" off it."
+    },
+    {
+      "name": "timestamp",
+      "type": "TurnTimestamp",
+      "required": false,
+      "defaultValue": null,
+      "description": "When the turn happened and how long it took. See {@link TurnTimestamp}."
+    },
+    {
+      "name": "labels",
+      "type": "Partial<TurnActionLabels>",
+      "required": false,
+      "defaultValue": null,
+      "description": "The accessible names of the four controls, merged over\n`TURN_ACTION_LABELS`. Partial on purpose: a console localising two of them\nshould not have to restate the other three."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "required": false,
+      "defaultValue": "Turn actions",
+      "description": "What the group of controls is called. Defaults to `Turn actions`."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-subtle",
+    "--cue-ok"
+  ],
+  "summary": "The row under a finished turn: copy, reply, fork, and when it happened.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { TurnFooter } from \"@cueplusplus/ui/elements\";\n\n<TurnFooter\n  onCopy={copy}\n  copied={copied}\n  onReply={quote}\n  onFork={branch}\n  timestamp={{ label: \"2m ago\", title: \"Today at 2:14 PM\", subtitle: \"Worked for 2m 15s\" }}\n/>\n// A shared transcript: one control, and the time it was written.\n<TurnFooter onCopy={copy} timestamp={{ label: \"14 March\" }} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/turn-footer",
+  "mdUrl": "/docs/components/turn-footer.md",
+  "jsonUrl": "/r/components/turn-footer.json",
+  "specimens": [
+    {
+      "title": "TurnFooter",
+      "group": "elements-thread",
+      "components": [
+        "TurnFooter"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"all four, three-level timestamp\" wide>\n    <div className=\"w-full max-w-md\">\n      <TurnFooter\n        onCopy={() => setTurnCopied((current) => !current)}\n        copied={turnCopied}\n        onReply={() => {}}\n        onFork={() => {}}\n        onMore={() => {}}\n        timestamp={{\n          label: \"2m ago\",\n          title: \"Today at 2:14 PM\",\n          subtitle: \"Worked for 2m 15s\",\n        }}\n      />\n    </div>\n  </Specimen>\n  <Specimen label=\"a shared transcript: copy only\" wide>\n    <div className=\"w-full max-w-md\">\n      <TurnFooter onCopy={() => {}} timestamp={{ label: \"14 March\" }} />\n    </div>\n  </Specimen>\n  <Specimen label=\"relabelled\" wide>\n    <div className=\"w-full max-w-md\">\n      <TurnFooter\n        onCopy={() => {}}\n        onFork={() => {}}\n        labels={{ fork: \"Branch\" }}\n        timestamp={{ label: \"2m ago\" }}\n      />\n    </div>\n  </Specimen>\n</Specimens>",
+      "note": "The row under a finished turn: copy, reply, fork, and when it happened. Every control is opt-in, because the four are not one set — a read-only shared transcript has a copy button and nothing else, and a footer that drew disabled controls would be a row of things nobody can press. The timestamp is three levels at once: 2m ago at a glance, the exact time on the title where it costs nothing, and how long the work took beside it, which is the only one of the three that is about the agent rather than the clock.",
+      "interaction": "four named icon buttons; copy crossfades to a check in place and renames itself Copied. The four names come from TURN_ACTION_LABELS and a partial override merges over it, so localising two of them does not mean restating the other three."
+    }
+  ],
+  "todo": true
+}