@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/scroll-anchor.json

@@ -0,0 +1,72 @@
+{
+  "name": "ScrollAnchor",
+  "slug": "scroll-anchor",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "Streaming never steals your scroll position; a pill offers the way back down.",
+  "props": [
+    {
+      "name": "messages",
+      "type": "ScrollAnchorMessage[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Conversation messages appended over time inside the scroll viewport."
+    },
+    {
+      "name": "paused",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Freezes the scene where it is; replay happens by remounting."
+    },
+    {
+      "name": "onSettled",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called once every message has landed and the viewport is pinned."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"messages\" | \"paused\" | \"onSettled\"\n> & {\n  /** Conversation messages appended over time inside the scroll viewport. */\n  messages: ScrollAnchorMessage[];\n  /** Freezes the scene where it is; replay happens by remounting. */\n  paused?: boolean;\n  /** Called once every message has landed and the viewport is pinned. */\n  onSettled?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-fg-muted",
+    "--cue-radius-overlay",
+    "--cue-surface-1",
+    "--cue-text-ui"
+  ],
+  "summary": "Streaming never steals your scroll position; a pill offers the way back down.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { ScrollAnchor } from \"@cueplusplus/ui/elements\";\n\n<ScrollAnchor\n  messages={[\n    { role: \"user\", text: \"Keep scrolling pinned?\" },\n    { role: \"assistant\", text: \"Only when you are already at the bottom.\" },\n  ]}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/scroll-anchor",
+  "mdUrl": "/docs/components/scroll-anchor.md",
+  "jsonUrl": "/r/components/scroll-anchor.json",
+  "specimens": [
+    {
+      "title": "ScrollAnchor",
+      "group": "elements-thread",
+      "components": [
+        "ScrollAnchor"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"arriving\">\n    <ScrollAnchor messages={ARRIVING} />\n  </Specimen>\n  <Specimen label=\"paused at the top\">\n    <ScrollAnchor messages={ARRIVING} paused />\n  </Specimen>\n</Specimens>",
+      "note": "The rule every transcript needs and few get: streaming may only move the viewport if you were already at the bottom of it. Scroll up to read something and the answer keeps arriving behind you; a pill counts what landed and takes you back down. It is the family's one element that runs a clock of its own — the turns append on a timer so the behaviour can be seen standing still.",
+      "interaction": "the pill is a button. Both scrolls are CSS `scroll-smooth`, not `scrollTo({ behavior })`, because only the declarative one can be withdrawn: `motion-reduce:scroll-auto` makes them instant, and the timer stops outright, painting the finished transcript in one go."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/scroll-area.json

@@ -0,0 +1,91 @@
+{
+  "name": "ScrollArea",
+  "slug": "scroll-area",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A scrolling region with the system's own scrollbar instead of the platform's.\n\nWraps Base UI's `ScrollArea`, which keeps native scrolling (and therefore\nnative momentum, keyboard and trackpad behaviour) and only re-skins the bar.\nThe frame must be given a bounded height by the caller — `h-full` inside a\nflex parent, or an explicit height — or there is nothing to scroll.",
+  "props": [
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the frame. Give it a height, or nothing will scroll."
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The scrolling content."
+    },
+    {
+      "name": "orientation",
+      "type": "\"both\" | \"horizontal\" | \"vertical\"",
+      "required": false,
+      "defaultValue": "vertical",
+      "description": "Which axes may scroll. Defaults to `\"vertical\"`."
+    },
+    {
+      "name": "viewportClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the scrolling viewport (padding belongs here)."
+    },
+    {
+      "name": "keepScrollbarsMounted",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Keep the scrollbar tracks mounted even when the content fits. Use for a\npanel whose content grows and shrinks, where a track appearing and\ndisappearing would reflow everything beside it."
+    },
+    {
+      "name": "viewportRef",
+      "type": "Ref<HTMLDivElement>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Ref to the scrolling element itself — for virtualizers and scroll restore."
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseScrollArea.Root.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border-strong",
+    "--cue-space-3",
+    "--cue-space-4"
+  ],
+  "summary": "A scrolling region with the system's own scrollbar instead of the platform's.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<ScrollArea className=\"h-64\" viewportClassName=\"p-(--cue-space-4)\">\n  {cues.map((c) => <Row key={c.id}>{c.name}</Row>)}\n</ScrollArea>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/scroll-area",
+  "mdUrl": "/docs/components/scroll-area.md",
+  "jsonUrl": "/r/components/scroll-area.json",
+  "specimens": [
+    {
+      "title": "ScrollArea",
+      "group": "chrome",
+      "components": [
+        "ScrollArea"
+      ],
+      "code": "<ScrollArea className=\"h-[9rem] w-full max-w-[24rem] rounded-(--radius-surface) border border-border\">\n  <div className=\"flex flex-col gap-(--cue-space-2) p-(--cue-space-4)\">\n    {Array.from({ length: 16 }, (_, index) => (\n      <span\n        key={index}\n        className=\"font-mono text-(length:--cue-text-ui) text-fg-muted tabular-nums\"\n      >\n        channel {String(index + 1).padStart(3, \"0\")} · {index * 6} %\n      </span>\n    ))}\n  </div>\n</ScrollArea>",
+      "note": "A themed scroller in either axis, so an overflowing panel does not fall back to the platform bar.",
+      "interaction": "the thumb fades in on hover over the area and stays while dragging."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/scrollable-tabs-list.json

@@ -0,0 +1,83 @@
+{
+  "name": "ScrollableTabsList",
+  "slug": "scrollable-tabs-list",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A {@link TabsList} that scrolls when its tabs do not fit, and says so.\n\nUse instead of `Tabs.List` wherever the tab count can outgrow the container:\na plain flex row silently clips its labels (\"SETTINGS\" rendering as \"INGS\"),\nwhich reads as a layout bug rather than as \"scroll me\".\n\nThe affordance is two things, and it needs both. The mask fades the content\nat whichever edge still hides tabs; the chevron buttons are the visible half,\nbecause what sits at an overflowing edge is usually the gap *between* two\ntabs and fading empty space produces nothing anyone can see. The chevrons\ndouble as the control for anyone without a horizontal-scroll device.",
+  "props": [
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the strip."
+    },
+    {
+      "name": "containerClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Classes for the outer frame (background, rim). It spans the full width even\nwhile the strip inside it is scrolled."
+    },
+    {
+      "name": "activeValue",
+      "type": "any",
+      "required": false,
+      "defaultValue": null,
+      "description": "The active tab's value. When it changes, that tab is scrolled into view — a\ntab selected in code (a deep link, a keyboard shortcut) can be off-screen."
+    }
+  ],
+  "typeReferences": [
+    "TabsListProps"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-chrome-toolbar",
+    "--cue-control-md",
+    "--cue-edge-fade",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-ui"
+  ],
+  "summary": "A {@link TabsList} that scrolls when its tabs do not fit, and says so.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Tabs.Root defaultValue={view}>\n  <ScrollableTabsList activeValue={view}>\n    {views.map((v) => <Tabs.Tab key={v} value={v}>{v}</Tabs.Tab>)}\n  </ScrollableTabsList>\n</Tabs.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/scrollable-tabs-list",
+  "mdUrl": "/docs/components/scrollable-tabs-list.md",
+  "jsonUrl": "/r/components/scrollable-tabs-list.json",
+  "specimens": [
+    {
+      "title": "ScrollableTabsList",
+      "group": "chrome",
+      "components": [
+        "ScrollableTabsList"
+      ],
+      "code": "<Tabs.Root\n  value={scrollTab}\n  onValueChange={setScrollTab}\n  className=\"w-full max-w-[24rem]\"\n>\n  <ScrollableTabsList activeValue={scrollTab ?? undefined}>\n    {SCROLL_TABS.map((label) => (\n      <Tabs.Tab key={label} value={label}>\n        {label}\n      </Tabs.Tab>\n    ))}\n  </ScrollableTabsList>\n</Tabs.Root>",
+      "note": "The same list when it does not fit: a mask fade at each overflowing edge, plus chevron buttons.",
+      "interaction": "the chevrons appear only on the side that actually overflows."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/scrub-input.json

@@ -0,0 +1,200 @@
+{
+  "name": "ScrubInput",
+  "slug": "scrub-input",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A number you scrub: drag up to raise it, down to lower it, click to type it.\n\nThe console's answer to `<input type=\"number\">`. Native spinners are two 4px\narrows that only appear on hover — unusable at this density and invisible on\ntouch — while a slider costs 200px of width to say one number. Dragging on the\nnumber itself costs nothing and is the interaction every audio and lighting\ntool has converged on: pointer capture so the cursor may leave the box, Shift\nfor fine adjustment, `cursor-ns-resize` to advertise the axis.\n\nClick-to-type is not a fallback, it is the other half of the control: a\ngesture is for *approximately*, typing is for *exactly*, and a value you can\nonly reach by dragging is a value you cannot enter from a cue sheet.\n\n`role=\"spinbutton\"` is what makes any of this reachable without a pointer —\narrow keys step, Page keys jump ten, Home/End go to the bounds — and it is why\nthe resting element is not an `<input>`: a spinbutton announces its value,\nwhere a text box would announce its editable string on every drag frame.\n\nThe `onChange`/`onCommit` split is the same undo-coalescing contract as\n{@link Slider }: one drag is one undo entry, not two hundred.",
+  "props": [
+    {
+      "name": "value",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "The value. Always controlled — a scrub is a stream of edits, not a state to lose."
+    },
+    {
+      "name": "onChange",
+      "type": "(value: number) => void",
+      "required": true,
+      "defaultValue": null,
+      "description": "Called with every new value: each drag frame, each arrow-key step, and the\ncommitted result of a typed edit. Not a DOM change event."
+    },
+    {
+      "name": "onLiveDrag",
+      "type": "((value: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called only for values produced by a drag, for hosts that throttle live writes."
+    },
+    {
+      "name": "onDragStart",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called once when a drag actually begins — after the click threshold, not on press."
+    },
+    {
+      "name": "onDragEnd",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called once when a drag ends."
+    },
+    {
+      "name": "onCommit",
+      "type": "((value: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called once per finished gesture: pointer-up after a drag, each key step, a\ncommitted typed value. Hang undo entries, network writes and persistence\nhere — `onChange` fires dozens of times per drag."
+    },
+    {
+      "name": "min",
+      "type": "number",
+      "required": false,
+      "defaultValue": "Number.NEGATIVE_INFINITY",
+      "description": "Lower bound. Defaults to `-Infinity`."
+    },
+    {
+      "name": "max",
+      "type": "number",
+      "required": false,
+      "defaultValue": "Number.POSITIVE_INFINITY",
+      "description": "Upper bound. Defaults to `Infinity`."
+    },
+    {
+      "name": "step",
+      "type": "number",
+      "required": false,
+      "defaultValue": "1",
+      "description": "Grid the value snaps to. Defaults to `1`."
+    },
+    {
+      "name": "precision",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Decimal places shown. Defaults to whatever `step` implies."
+    },
+    {
+      "name": "unit",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Suffix drawn after the number — `%`, `s`, `dB`."
+    },
+    {
+      "name": "units",
+      "type": "readonly string[]",
+      "required": false,
+      "defaultValue": null,
+      "description": "The units this value can be expressed in. With more than one the suffix\nbecomes a button that cycles through them and reports via `onUnitChange`."
+    },
+    {
+      "name": "onUnitChange",
+      "type": "((unit: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the next unit when the suffix is clicked."
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Rung of the control ladder. Defaults to `\"md\"`."
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Refuse dragging, typing and keyboard steps."
+    },
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Accessible name for the control."
+    },
+    {
+      "name": "aria-labelledby",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Id of the element naming the control."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the control."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n    React.ComponentPropsWithoutRef<\"div\">,\n    \"onChange\" | \"defaultValue\" | \"onDragStart\" | \"onDragEnd\"\n  >"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-control-lg",
+    "--cue-control-md",
+    "--cue-control-sm",
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-radius-control",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A number you drag to change and click to type.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<ScrubInput aria-label=\"Intensity\" value={level} onChange={setLevel} onCommit={pushUndo} />\n<ScrubInput aria-label=\"Fade\" value={fade} onChange={setFade} step={0.1} unit=\"s\" min={0} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/scrub-input",
+  "mdUrl": "/docs/components/scrub-input.md",
+  "jsonUrl": "/r/components/scrub-input.json",
+  "whenToUse": [
+    "A bounded number adjusted by feel: level, angle, tempo, opacity.",
+    "Anywhere a native number input's spinners are too small to hit, which at console density is everywhere."
+  ],
+  "whenNotToUse": [
+    "A value with no useful gesture, like an id or a port. Use `Input`.",
+    "A range whose extent has to be visible. Use `Slider`."
+  ],
+  "commonMistakes": [
+    "Treating every live change as a commit. `onChange` fires through the drag; `onCommit` fires once on release, and that is the undo boundary.",
+    "Omitting `min` and `max`, which leaves the spinbutton without bounds for assistive tech."
+  ],
+  "specimens": [
+    {
+      "title": "ScrubInput",
+      "group": "forms",
+      "components": [
+        "ScrubInput"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"value\">\n    <ScrubInput\n      aria-label=\"Gain\"\n      value={gain}\n      onChange={setGain}\n      min={0}\n      max={100}\n      unit=\"%\"\n    />\n  </Specimen>\n  <Specimen label=\"units\">\n    <ScrubInput\n      aria-label=\"Fade\"\n      value={gain}\n      onChange={setGain}\n      min={0}\n      max={100}\n      units={[\"%\", \"dB\"]}\n    />\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <ScrubInput aria-label=\"Gain, disabled\" value={gain} onChange={setGain} disabled />\n  </Specimen>\n</Specimens>",
+      "note": "Drag the value the way a DAW does: pointer capture, `ns-resize`, shift for fine. Click to type instead. Reports live values while dragging and exactly one `onCommit` on release.",
+      "interaction": "arrow keys step, Home and End jump to the bounds; it is a `spinbutton`, so the value is spoken."
+    }
+  ]
+}

package/manifest/components/seam-cell.json

@@ -0,0 +1,75 @@
+{
+  "name": "SeamCell",
+  "slug": "seam-cell",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "One filled cell of a {@link SeamGrid} — or of the Phase 1 `SeamList`.\n\nThe fill is the load-bearing part: an unfilled cell lets the container's\nborder colour through everywhere, not just at the gap, and the seam\ndisappears into a solid block.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "ground",
+      "type": "\"bg\" | \"sunken\" | \"surface-1\" | \"surface-2\" | \"surface-3\"",
+      "required": false,
+      "defaultValue": "surface-1",
+      "description": "Which rung of the elevation ladder to fill with. Defaults to `\"surface-1\"`."
+    },
+    {
+      "name": "interactive",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Add the hover feedback of a clickable cell. Put the control inside it."
+    },
+    {
+      "name": "flush",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Drop the built-in padding — for a cell that holds a chart or a canvas."
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-bg",
+    "--cue-border",
+    "--cue-radius-surface",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-surface-3"
+  ],
+  "summary": "One filled cell of a {@link SeamGrid} — or of the Phase 1 `SeamList`.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<SeamCell ground=\"sunken\" flush><Sparkline values={series} /></SeamCell>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/seam-cell",
+  "mdUrl": "/docs/components/seam-cell.md",
+  "jsonUrl": "/r/components/seam-cell.json",
+  "specimens": [
+    {
+      "title": "SeamGrid / SeamCell",
+      "group": "instruments",
+      "components": [
+        "SeamGrid",
+        "SeamCell"
+      ],
+      "code": "<SeamGrid columns={4} bordered className=\"w-full max-w-[36rem]\">\n  {[\"bg\", \"sunken\", \"surface-1\", \"surface-2\"].map((ground) => (\n    <SeamCell\n      key={ground}\n      ground={ground as \"bg\" | \"sunken\" | \"surface-1\" | \"surface-2\"}\n      className=\"p-(--cue-space-4) text-center font-mono text-(length:--cue-text-label) text-fg-subtle\"\n    >\n      {ground}\n    </SeamCell>\n  ))}\n  <SeamCell interactive className=\"p-(--cue-space-4) text-center font-mono text-(length:--cue-text-label)\">\n    interactive\n  </SeamCell>\n  <SeamCell flush className=\"p-(--cue-space-4) text-center font-mono text-(length:--cue-text-label)\">\n    flush\n  </SeamCell>\n</SeamGrid>",
+      "note": "The 1px-gap hairline idiom as a two-dimensional component: the grid's own background shows through the gaps.",
+      "interaction": "`interactive` cells take a hover ground and a focus ring."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/seam-grid.json

@@ -0,0 +1,75 @@
+{
+  "name": "SeamGrid",
+  "slug": "seam-grid",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The seam idiom as a component: cells separated by hairlines, no borders.\n\nA grid whose `gap` is 1px over the border colour. Every cell paints its own\nground, so the only place the container shows through is the gap — which\nreads as a hairline between neighbours, aligns perfectly at every corner, and\nnever doubles up. This is snuffle's signature primitive; it was inlined at\neighteen call sites before it was a component.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "columns",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Fixed column count. Ignored when {@link SeamGridProps.min} is set."
+    },
+    {
+      "name": "min",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "Minimum cell width in px at the 16px root. Switches the track to\n`auto-fit`, so the grid reflows without a media query."
+    },
+    {
+      "name": "bordered",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "false",
+      "description": "Draw a hairline rim around the whole grid as well as between the cells."
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-bg",
+    "--cue-border",
+    "--cue-radius-surface",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-surface-3"
+  ],
+  "summary": "The seam idiom as a component: cells separated by hairlines, no borders.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<SeamGrid columns={3}>\n  <SeamCell>001</SeamCell>\n  <SeamCell>002</SeamCell>\n  <SeamCell>003</SeamCell>\n</SeamGrid>\n// Reflowing, no media query:\n<SeamGrid min={180} bordered>{cells}</SeamGrid>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/seam-grid",
+  "mdUrl": "/docs/components/seam-grid.md",
+  "jsonUrl": "/r/components/seam-grid.json",
+  "specimens": [
+    {
+      "title": "SeamGrid / SeamCell",
+      "group": "instruments",
+      "components": [
+        "SeamGrid",
+        "SeamCell"
+      ],
+      "code": "<SeamGrid columns={4} bordered className=\"w-full max-w-[36rem]\">\n  {[\"bg\", \"sunken\", \"surface-1\", \"surface-2\"].map((ground) => (\n    <SeamCell\n      key={ground}\n      ground={ground as \"bg\" | \"sunken\" | \"surface-1\" | \"surface-2\"}\n      className=\"p-(--cue-space-4) text-center font-mono text-(length:--cue-text-label) text-fg-subtle\"\n    >\n      {ground}\n    </SeamCell>\n  ))}\n  <SeamCell interactive className=\"p-(--cue-space-4) text-center font-mono text-(length:--cue-text-label)\">\n    interactive\n  </SeamCell>\n  <SeamCell flush className=\"p-(--cue-space-4) text-center font-mono text-(length:--cue-text-label)\">\n    flush\n  </SeamCell>\n</SeamGrid>",
+      "note": "The 1px-gap hairline idiom as a two-dimensional component: the grid's own background shows through the gaps.",
+      "interaction": "`interactive` cells take a hover ground and a focus ring."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/seam-list.json

@@ -0,0 +1,56 @@
+{
+  "name": "SeamList",
+  "slug": "seam-list",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A list whose separators are gaps, not borders.\n\nThe container is filled with the border colour and its children are spaced\n`1px` apart; each child paints its own opaque fill, so what shows through the\ngap is a perfect hairline that can never double up with a row's own border or\ndisagree with it at a rounded corner.\n\nPair with `<Row seam>`. Use it where rows are cards in their own right (a\ncue list, a fixture list); use a plain `Panel` + `Row` where they are lines\nof one table.\n\nStatic markup — no `\"use client\"`.",
+  "props": [],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-bg",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-font-mono",
+    "--cue-pad-row-x",
+    "--cue-pad-row-y",
+    "--cue-radius-surface",
+    "--cue-space-3",
+    "--cue-surface-2",
+    "--cue-text-ui"
+  ],
+  "summary": "A list whose separators are gaps, not borders.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<SeamList>\n  <Row seam>Cue 1</Row>\n  <Row seam>Cue 2</Row>\n</SeamList>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/seam-list",
+  "mdUrl": "/docs/components/seam-list.md",
+  "jsonUrl": "/r/components/seam-list.json",
+  "specimens": [
+    {
+      "title": "Row / SeamList",
+      "group": "chrome",
+      "components": [
+        "Row",
+        "SeamList"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-2\">\n  <Panel>\n    <Row>Default row</Row>\n    <Row interactive>Interactive row</Row>\n    <Row interactive disabled>\n      Disabled row\n    </Row>\n  </Panel>\n  <SeamList>\n    <Row seam>Seam row</Row>\n    <Row seam interactive>\n      Seam row, interactive\n    </Row>\n    <Row seam>Seam row</Row>\n  </SeamList>\n</div>",
+      "note": "Hairline rows, and the 1px-gap variant where the gaps themselves are the rule.",
+      "interaction": "pass `interactive` for a hover ground and a focus ring; `disabled` dims and stops pointer events."
+    }
+  ],
+  "todo": true
+}