@cueplusplus/ui 0.3.0 → 0.5.0

package/manifest/components/conversation-search.json

@@ -0,0 +1,92 @@
+{
+  "name": "ConversationSearch",
+  "slug": "conversation-search",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Find inside a long thread, with every hit marked down the scrollbar.",
+  "props": [
+    {
+      "name": "query",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Current search text."
+    },
+    {
+      "name": "hits",
+      "type": "readonly SearchHit[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Matches in document order. Each carries its own surrounding text so no lookup is\nneeded to render the preview."
+    },
+    {
+      "name": "activeIndex",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which hit is current, in both the counter and the rail. Clamped to the current hit\nset, so narrowing the results cannot strand it out of range."
+    },
+    {
+      "name": "onQueryChange",
+      "type": "((query: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called as the search is typed."
+    },
+    {
+      "name": "onStep",
+      "type": "((delta: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with -1 or 1 to walk the matches. Wrap the index yourself."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"query\" | \"hits\" | \"activeIndex\" | \"onQueryChange\" | \"onStep\"\n> & {\n  /** Current search text. */\n  query: string;\n  /**\n   * Matches in document order. Each carries its own surrounding text so no lookup is\n   * needed to render the preview.\n   */\n  hits: readonly SearchHit[];\n  /**\n   * Which hit is current, in both the counter and the rail. Clamped to the current hit\n   * set, so narrowing the results cannot strand it out of range.\n   */\n  activeIndex: number;\n  /** Called as the search is typed. */\n  onQueryChange?: (query: string) => void;\n  /** Called with -1 or 1 to walk the matches. Wrap the index yourself. */\n  onStep?: (delta: number) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-control",
+    "--cue-radius-surface",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-ui",
+    "--cue-warn"
+  ],
+  "summary": "Find inside a long thread, with every hit marked down the scrollbar.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ConversationSearch } from \"@cueplusplus/ui/elements\";\n\n<ConversationSearch\n  query={query}\n  hits={hits}\n  activeIndex={0}\n  onQueryChange={setQuery}\n  onStep={step}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/conversation-search",
+  "mdUrl": "/docs/components/conversation-search.md",
+  "jsonUrl": "/r/components/conversation-search.json",
+  "specimens": [
+    {
+      "title": "ConversationSearch",
+      "group": "elements-composer",
+      "components": [
+        "ConversationSearch"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"four hits, second one current\" wide>\n    <ConversationSearch\n      query={hitQuery}\n      hits={HITS}\n      activeIndex={hit}\n      onQueryChange={setHitQuery}\n      onStep={(delta) => setHit((current) => (current + delta + HITS.length) % HITS.length)}\n    />\n  </Specimen>\n  <Specimen label=\"no hits\" wide>\n    <ConversationSearch query=\"haze\" hits={[]} activeIndex={0} />\n  </Specimen>\n</Specimens>",
+      "note": "Find inside one long thread, with every hit marked down the scrollbar so the shape of the answer is visible before you walk it. Each hit carries its own surrounding text, so the preview needs no lookup back into the transcript — which is what lets a search box render before the thread it is searching has loaded.",
+      "interaction": "the counter and the rail agree because `activeIndex` is clamped to the current hit set: narrowing the results cannot strand the marker out of range. Stepping is `-1` and `1`; wrapping is the caller's."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/cost-meter.json

@@ -0,0 +1,74 @@
+{
+  "name": "CostMeter",
+  "slug": "cost-meter",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "What the run spent, split by model, against the session total.",
+  "props": [
+    {
+      "name": "runCost",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Pre-formatted cost of this run."
+    },
+    {
+      "name": "sessionCost",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Pre-formatted cumulative cost."
+    },
+    {
+      "name": "lines",
+      "type": "readonly CostLine[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Per-model breakdown, ordered largest first so the bar reads left to right."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"runCost\" | \"sessionCost\" | \"lines\"\n> & {\n  /** Pre-formatted cost of this run. */\n  runCost: string;\n  /** Pre-formatted cumulative cost. */\n  sessionCost: string;\n  /** Per-model breakdown, ordered largest first so the bar reads left to right. */\n  lines: readonly CostLine[];\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-stream",
+    "--cue-surface-2",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-title"
+  ],
+  "summary": "What the run spent, split by model, against the session total.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { CostMeter } from \"@cueplusplus/ui/elements\";\n\n<CostMeter runCost=\"$2.76\" sessionCost=\"$18.40\" lines={lines} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/cost-meter",
+  "mdUrl": "/docs/components/cost-meter.md",
+  "jsonUrl": "/r/components/cost-meter.json",
+  "specimens": [
+    {
+      "title": "CostMeter",
+      "group": "elements-agents",
+      "components": [
+        "CostMeter"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"three models\" wide>\n    <CostMeter runCost=\"$5.02\" sessionCost=\"$41.87\" lines={COSTS} />\n  </Specimen>\n  <Specimen label=\"one model, whole run\" wide>\n    <CostMeter\n      runCost=\"$0.46\"\n      sessionCost=\"$41.87\"\n      lines={[{ ...COSTS[2]!, share: 1 }]}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "What the run spent, against what the session has spent — two numbers, then the arithmetic under them. Every figure arrives pre-formatted: the element does no currency maths and no rounding, so a bench and a billing page cannot disagree about what `$3.12` means.",
+      "interaction": "none. `share` drives the bar and the lines are given largest-first, so the bar reads left to right in the same order as the rows."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/cue-portal-frame.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": true,
-  "description": "Inline version of the portal contract, for portals whose container cannot be\nchosen (a third-party overlay, or content already portaled by something else).\n\nWraps `children` in a `display: contents` element carrying the same\n`data-theme` / `data-density` / `data-font` / `data-mode` stamp and\n`--cue-font-scale` as {@link useCuePortalProps}. Prefer the hook — a stamped container costs one\nelement per overlay instead of one per render tree — and reach for this only\nwhen the container prop is not available.",
+  "description": "Inline version of the portal contract, for portals whose container cannot be\nchosen (a third-party overlay, or content already portaled by something else).\n\nWraps `children` in a `display: contents` element carrying the same\n`data-theme` / `data-density` / `data-font` / `data-mode` / `data-cue-skin` /\n`data-cue-fidelity` stamp and `--cue-font-scale` as {@link useCuePortalProps}. Prefer the hook — a stamped container costs one\nelement per overlay instead of one per render tree — and reach for this only\nwhen the container prop is not available.",
   "props": [
     {
       "name": "children",

package/manifest/components/day-separator.json

@@ -0,0 +1,58 @@
+{
+  "name": "DaySeparator",
+  "slug": "day-separator",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Chronology in a long thread: days marked, times on hover.",
+  "props": [
+    {
+      "name": "messages",
+      "type": "readonly DatedMessage[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Turns in order. A separator is inserted wherever day changes from the previous\nmessage, so grouping needs no pre-processing."
+    }
+  ],
+  "typeReferences": [
+    "Omit<ComponentProps<\"div\">, \"children\" | \"messages\"> & {\n  /**\n   * Turns in order. A separator is inserted wherever day changes from the previous\n   * message, so grouping needs no pre-processing.\n   */\n  messages: readonly DatedMessage[];\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-body"
+  ],
+  "summary": "Chronology in a long thread: days marked, times on hover.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { DaySeparator } from \"@cueplusplus/ui/elements\";\n\n<DaySeparator messages={messages} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/day-separator",
+  "mdUrl": "/docs/components/day-separator.md",
+  "jsonUrl": "/r/components/day-separator.json",
+  "specimens": [
+    {
+      "title": "DaySeparator",
+      "group": "elements-thread",
+      "components": [
+        "DaySeparator"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"two days, four turns\" wide>\n    <DaySeparator messages={DAYS} />\n  </Specimen>\n</Specimens>",
+      "note": "Chronology in a thread long enough to have some: a rule wherever the day changes, and per-message times that only appear when you go looking. The caller pre-formats both — the element compares the day strings and does no date arithmetic at all.",
+      "interaction": "hover a turn and its timestamp fades up beside it. The rules are decorative; nothing here is a control."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/delegation-card.json

@@ -37,7 +37,7 @@
     },
     {
       "name": "status",
-      "type": "\"idle\" | \"done\" | \"working\" | \"failed\"",
+      "type": "\"done\" | \"working\" | \"failed\" | \"idle\"",
       "required": false,
       "defaultValue": null,
       "description": "Where the work has got to. Omit to draw no status line at all."

package/manifest/components/density.json

@@ -9,7 +9,7 @@
   "props": [
     {
       "name": "density",
-      "type": "\"ultra-compact\" | \"compact\" | \"normal\" | \"large\" | \"ultra-large\"",
+      "type": "\"normal\" | \"large\" | \"compact\" | \"ultra-compact\" | \"ultra-large\"",
       "required": true,
       "defaultValue": null,
       "description": "Level to apply to this subtree: `ultra-compact`, `compact`, `normal`,\n`large` or `ultra-large`."

package/manifest/components/diagram.json

@@ -0,0 +1,100 @@
+{
+  "name": "Diagram",
+  "slug": "diagram",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered\ngraphic.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "What the diagram shows."
+    },
+    {
+      "name": "zoom",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Scale factor applied to the content. 1 is fit; the header prints it as a percentage."
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The rendered graphic. The element owns the frame and never parses or injects\nmarkup itself, so whatever renders your chart stays your choice."
+    },
+    {
+      "name": "onZoomIn",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called from the zoom-in control. Clamp the range yourself."
+    },
+    {
+      "name": "onZoomOut",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called from the zoom-out control."
+    },
+    {
+      "name": "onReset",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to return to the default view."
+    },
+    {
+      "name": "onExpand",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to open the diagram full screen."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"title\"\n  | \"zoom\"\n  | \"children\"\n  | \"onZoomIn\"\n  | \"onZoomOut\"\n  | \"onReset\"\n  | \"onExpand\"\n> & {\n  /** What the diagram shows. */\n  title: string;\n  /** Scale factor applied to the content. 1 is fit; the header prints it as a percentage. */\n  zoom: number;\n  /**\n   * The rendered graphic. The element owns the frame and never parses or injects\n   * markup itself, so whatever renders your chart stays your choice.\n   */\n  children: React.ReactNode;\n  /** Called from the zoom-in control. Clamp the range yourself. */\n  onZoomIn?: () => void;\n  /** Called from the zoom-out control. */\n  onZoomOut?: () => void;\n  /** Called to return to the default view. */\n  onReset?: () => void;\n  /** Called to open the diagram full screen. */\n  onExpand?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-text-body"
+  ],
+  "summary": "A drawn answer with zoom, reset, and a full-bleed view; you hand it the rendered graphic.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { Diagram } from \"@cueplusplus/ui/elements\";\n\n<Diagram title=\"message flow\" zoom={zoom} onZoomIn={zoomIn} onReset={reset}>\n  <MermaidSvg chart={chart} />\n</Diagram>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/diagram",
+  "mdUrl": "/docs/components/diagram.md",
+  "jsonUrl": "/r/components/diagram.json",
+  "specimens": [
+    {
+      "title": "Diagram",
+      "group": "elements-knowledge",
+      "components": [
+        "Diagram"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"the front truss, zoomable\" wide>\n    <Diagram\n      title=\"Front truss — 6 fixtures on 3.2 m centres\"\n      zoom={zoom}\n      onZoomIn={() => setZoom((current) => Math.min(1.6, current + 0.2))}\n      onZoomOut={() => setZoom((current) => Math.max(0.6, current - 0.2))}\n      onReset={() => setZoom(1)}\n    >\n      <svg\n        viewBox=\"0 0 200 60\"\n        width=\"200\"\n        height=\"60\"\n        role=\"img\"\n        aria-label=\"Six fixtures hung along one truss\"\n      >\n        <line x1=\"6\" y1=\"20\" x2=\"194\" y2=\"20\" className=\"stroke-fg-subtle\" strokeWidth=\"2\" />\n        {[16, 51, 86, 121, 156, 186].map((x) => (\n          <rect key={x} x={x - 6} y=\"26\" width=\"12\" height=\"16\" rx=\"2\" className=\"fill-stream\" />\n        ))}\n      </svg>\n    </Diagram>\n  </Specimen>\n  <Specimen label=\"zoomed out, nothing to expand to\" wide>\n    <Diagram title=\"Front truss\" zoom={0.7}>\n      <svg viewBox=\"0 0 200 40\" width=\"200\" height=\"40\" role=\"img\" aria-label=\"One truss\">\n        <line x1=\"6\" y1=\"20\" x2=\"194\" y2=\"20\" className=\"stroke-fg-subtle\" strokeWidth=\"2\" />\n      </svg>\n    </Diagram>\n  </Specimen>\n</Specimens>",
+      "note": "A drawn answer with a viewport around it: zoom, reset, full-bleed. The graphic is yours — the element supplies the frame, the percentage readout and the transform, and never parses or renders anything itself.",
+      "interaction": "four named icon buttons; expand disables itself when no handler is given, which is the honest state for a bench with nowhere to expand to. The scale transition stops under reduced motion."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/document-reference.json

@@ -0,0 +1,90 @@
+{
+  "name": "DocumentReference",
+  "slug": "document-reference",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A document the answer leans on, with the quoted passage and the page to jump to.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Document name."
+    },
+    {
+      "name": "pages",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Total page count."
+    },
+    {
+      "name": "anchors",
+      "type": "readonly DocumentAnchor[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The passages the answer drew on, each pinned to a page."
+    },
+    {
+      "name": "activePage",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which anchor is highlighted. A page with no anchor highlights nothing."
+    },
+    {
+      "name": "onJump",
+      "type": "((page: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the page to open."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"pages\" | \"anchors\" | \"activePage\" | \"onJump\"\n> & {\n  /** Document name. */\n  title: string;\n  /** Total page count. */\n  pages: number;\n  /** The passages the answer drew on, each pinned to a page. */\n  anchors: readonly DocumentAnchor[];\n  /** Which anchor is highlighted. A page with no anchor highlights nothing. */\n  activePage: number;\n  /** Called with the page to open. */\n  onJump?: (page: number) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border-strong",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "A document the answer leans on, with the quoted passage and the page to jump to.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { DocumentReference } from \"@cueplusplus/ui/elements\";\n\n<DocumentReference\n  title=\"migration-0.14.pdf\"\n  pages={14}\n  anchors={anchors}\n  activePage={4}\n  onJump={setPage}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/document-reference",
+  "mdUrl": "/docs/components/document-reference.md",
+  "jsonUrl": "/r/components/document-reference.json",
+  "specimens": [
+    {
+      "title": "DocumentReference",
+      "group": "elements-knowledge",
+      "components": [
+        "DocumentReference"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"page 31 active\" wide>\n    <DocumentReference\n      title=\"ESPRITE user manual, rev. 8\"\n      pages={94}\n      anchors={ANCHORS}\n      activePage={page}\n      onJump={setPage}\n    />\n  </Specimen>\n  <Specimen label=\"one anchor\" wide>\n    <DocumentReference\n      title=\"Truss loading guidance\"\n      pages={18}\n      anchors={ANCHORS.slice(0, 1)}\n      activePage={12}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "One document the answer leans on, with the passages it quoted and the page each is on. Several anchors can cite one page — two of these are both page 31 — so the current one is marked by `aria-current` rather than by matching the number, which is what stops the wrong row lighting up.",
+      "interaction": "every quote is a button that reports its page to `onJump`; the active row takes the recessed field ground, the others only on hover."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/draft-restore.json

@@ -0,0 +1,82 @@
+{
+  "name": "DraftRestore",
+  "slug": "draft-restore",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Come back to a thread and the sentence you never sent is still waiting.",
+  "props": [
+    {
+      "name": "draft",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The unsent text, truncated to one line."
+    },
+    {
+      "name": "savedAt",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "When it was last touched, pre-formatted."
+    },
+    {
+      "name": "onRestore",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to put the draft back in the composer."
+    },
+    {
+      "name": "onDiscard",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to throw the draft away."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"draft\" | \"savedAt\" | \"onRestore\" | \"onDiscard\"\n> & {\n  /** The unsent text, truncated to one line. */\n  draft: string;\n  /** When it was last touched, pre-formatted. */\n  savedAt: string;\n  /** Called to put the draft back in the composer. */\n  onRestore?: () => void;\n  /** Called to throw the draft away. */\n  onDiscard?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-surface-2",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "Come back to a thread and the sentence you never sent is still waiting.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { DraftRestore } from \"@cueplusplus/ui/elements\";\n\n<DraftRestore\n  draft=\"Add a regression test for draft restore\"\n  savedAt=\"2 minutes ago\"\n  onRestore={restore}\n  onDiscard={discard}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/draft-restore",
+  "mdUrl": "/docs/components/draft-restore.md",
+  "jsonUrl": "/r/components/draft-restore.json",
+  "specimens": [
+    {
+      "title": "DraftRestore",
+      "group": "elements-composer",
+      "components": [
+        "DraftRestore"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"waiting\" wide>\n    <DraftRestore\n      draft=\"Patch the back truss too, but leave universe 4 alone\"\n      savedAt=\"14 minutes ago\"\n      onRestore={() => undefined}\n      onDiscard={() => undefined}\n    />\n  </Specimen>\n  <Specimen label=\"long draft\" wide>\n    <DraftRestore\n      draft=\"Check whether the ESPRITEs on the back truss are still in mode 4 and, if they are, tell me before changing anything\"\n      savedAt=\"yesterday\"\n      onRestore={() => undefined}\n      onDiscard={() => undefined}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Come back to a thread and the sentence you never sent is still sitting there. One line of what it was, when it was saved, and the two answers anybody ever has for it. `savedAt` is pre-formatted like every other time in this family — the element does no date maths, so a server-rendered draft and a client-rendered one cannot disagree.",
+      "interaction": "restore is a worded button and discard is a labelled icon (`Discard the draft`): the destructive one is the one that has to be aimed at."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/drawer.json

@@ -25,7 +25,7 @@
       "props": [
         {
           "name": "swipeDirection",
-          "type": "\"up\" | \"down\" | \"left\" | \"right\"",
+          "type": "\"left\" | \"right\" | \"up\" | \"down\"",
           "required": false,
           "defaultValue": "down",
           "description": "Which way the drawer is dragged to dismiss it, which also decides the edge\nit lives on. Defaults to `\"down\"` — the bottom sheet."

package/manifest/components/dropdown-menu.json

@@ -87,7 +87,7 @@
         },
         {
           "name": "side",
-          "type": "\"left\" | \"right\" | \"top\" | \"bottom\" | \"inline-end\" | \"inline-start\"",
+          "type": "\"left\" | \"right\" | \"bottom\" | \"top\" | \"inline-end\" | \"inline-start\"",
           "required": false,
           "defaultValue": null,
           "description": "Preferred side of the trigger. Defaults to `\"bottom\"`."