@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/settings-panel.json

@@ -0,0 +1,118 @@
+{
+  "name": "SettingsPanel",
+  "slug": "settings-panel",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Model, system prompt, temperature, and what the assistant is allowed to do.",
+  "props": [
+    {
+      "name": "model",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Selected model."
+    },
+    {
+      "name": "models",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Models offered in the segmented control. Keep it to a few; more wants the model\npicker."
+    },
+    {
+      "name": "systemPrompt",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Current system prompt."
+    },
+    {
+      "name": "temperature",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Current temperature, 0 to 2."
+    },
+    {
+      "name": "toggles",
+      "type": "readonly SettingToggle[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Capability switches with a line each explaining what they turn on."
+    },
+    {
+      "name": "onModelChange",
+      "type": "((model: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the model changes."
+    },
+    {
+      "name": "onSystemPromptChange",
+      "type": "((prompt: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called as the prompt is edited."
+    },
+    {
+      "name": "onTemperatureChange",
+      "type": "((temperature: number) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called as the slider moves."
+    },
+    {
+      "name": "onToggle",
+      "type": "((key: string) => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called with the switched capability's key."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  | \"children\"\n  | \"model\"\n  | \"models\"\n  | \"systemPrompt\"\n  | \"temperature\"\n  | \"toggles\"\n  | \"onModelChange\"\n  | \"onSystemPromptChange\"\n  | \"onTemperatureChange\"\n  | \"onToggle\"\n> & {\n  /** Selected model. */\n  model: string;\n  /**\n   * Models offered in the segmented control. Keep it to a few; more wants the model\n   * picker.\n   */\n  models: readonly string[];\n  /** Current system prompt. */\n  systemPrompt: string;\n  /** Current temperature, 0 to 2. */\n  temperature: number;\n  /** Capability switches with a line each explaining what they turn on. */\n  toggles: readonly SettingToggle[];\n  /** Called when the model changes. */\n  onModelChange?: (model: string) => void;\n  /** Called as the prompt is edited. */\n  onSystemPromptChange?: (prompt: string) => void;\n  /** Called as the slider moves. */\n  onTemperatureChange?: (temperature: number) => void;\n  /** Called with the switched capability's key. */\n  onToggle?: (key: string) => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-bg",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-radius-surface",
+    "--cue-surface-3",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "Model, system prompt, temperature, and what the assistant is allowed to do.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { SettingsPanel } from \"@cueplusplus/ui/elements\";\n\n<SettingsPanel\n  model={model}\n  models={models}\n  systemPrompt={prompt}\n  temperature={0.7}\n  toggles={toggles}\n  onModelChange={setModel}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/settings-panel",
+  "mdUrl": "/docs/components/settings-panel.md",
+  "jsonUrl": "/r/components/settings-panel.json",
+  "specimens": [
+    {
+      "title": "SettingsPanel",
+      "group": "elements-composer",
+      "components": [
+        "SettingsPanel"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"live\" wide>\n    <SettingsPanel\n      model={settingsModel}\n      models={[\"Opus 5\", \"Sonnet 5\", \"Haiku 5\"]}\n      systemPrompt={prompt}\n      temperature={temperature}\n      toggles={toggles}\n      onModelChange={setSettingsModel}\n      onSystemPromptChange={setPrompt}\n      onTemperatureChange={setTemperature}\n      onToggle={(key) =>\n        setToggles((current) =>\n          current.map((item) => (item.key === key ? { ...item, on: !item.on } : item)),\n        )\n      }\n    />\n  </Specimen>\n  <Specimen label=\"locked down for a show\" wide>\n    <SettingsPanel\n      model=\"Haiku 5\"\n      models={[\"Opus 5\", \"Sonnet 5\", \"Haiku 5\"]}\n      systemPrompt=\"Read-only. Answer questions about the rig; change nothing.\"\n      temperature={0}\n      toggles={TOGGLES.map((item) => ({ ...item, on: false }))}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "Model, system prompt, temperature, and what the assistant is allowed to do — the four settings a chat product actually has, on one card. The capability switches each carry a line saying what turning them on does, which is the difference between a settings page and a list of nouns. The panel holds none of it: every value here is the caller's.",
+      "interaction": "the segmented model control is a row of `aria-pressed` buttons, and both the prompt textarea and the temperature slider carry their own labels, so nothing on the card depends on the mono caption above it being read."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/shape-section.json

@@ -0,0 +1,66 @@
+{
+  "name": "ShapeSection",
+  "slug": "shape-section",
+  "group": "configurator",
+  "importPath": "@cueplusplus/ui/configurator",
+  "peerDependencies": [
+    "react-aria-components"
+  ],
+  "clientOnly": true,
+  "description": "Section 3 — the geometry and type knobs, which belong to the *density* axis\nrather than to the theme.\n\nBoth multipliers are crossed with the density ladder when they are written, so\nnudging the radius keeps `ultra-compact` tighter than `large` instead of\nflattening the two. The density knob is the published `--cue-density` escape\nhatch (spec §6): the shipped control ladder is three hand-authored blocks, not\na multiplier, so this scales bespoke app geometry — `calc(200px *\nvar(--cue-density))` — and the picker above is what moves the controls.",
+  "props": [
+    {
+      "name": "edits",
+      "type": "TokenEdits",
+      "required": true,
+      "defaultValue": null,
+      "description": "The panel's edit surface."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the section."
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-density",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-font-pairing-mono",
+    "--cue-font-sans",
+    "--cue-font-scale",
+    "--cue-font-theme-mono",
+    "--cue-radius-control",
+    "--cue-radius-scale",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-text-label",
+    "--cue-text-micro"
+  ],
+  "summary": "Section 3 — the geometry and type knobs, which belong to the *density* axis rather than to the theme.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<ShapeSection edits={edits} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/shape-section",
+  "mdUrl": "/docs/components/shape-section.md",
+  "jsonUrl": "/r/components/shape-section.json",
+  "todo": true
+}

package/manifest/components/shared-conversation.json

@@ -0,0 +1,89 @@
+{
+  "name": "SharedConversation",
+  "slug": "shared-conversation",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A read-only transcript someone sent you, with a way to pick it up yourself.",
+  "props": [
+    {
+      "name": "title",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Name of the shared thread."
+    },
+    {
+      "name": "sharedBy",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Who shared it."
+    },
+    {
+      "name": "sharedAt",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Pre-formatted share time."
+    },
+    {
+      "name": "turns",
+      "type": "readonly SharedTurn[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "The transcript, read only."
+    },
+    {
+      "name": "onContinue",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called to fork the transcript into the reader's own thread."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"title\" | \"sharedBy\" | \"sharedAt\" | \"turns\" | \"onContinue\"\n> & {\n  /** Name of the shared thread. */\n  title: string;\n  /** Who shared it. */\n  sharedBy: string;\n  /** Pre-formatted share time. */\n  sharedAt: string;\n  /** The transcript, read only. */\n  turns: readonly SharedTurn[];\n  /** Called to fork the transcript into the reader's own thread. */\n  onContinue?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-radius-overlay",
+    "--cue-surface-1",
+    "--cue-text-body",
+    "--cue-text-ui"
+  ],
+  "summary": "A read-only transcript someone sent you, with a way to pick it up yourself.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { SharedConversation } from \"@cueplusplus/ui/elements\";\n\n<SharedConversation\n  title=\"Draft restore across threads\"\n  sharedBy=\"harry\"\n  sharedAt=\"2 days ago\"\n  turns={turns}\n  onContinue={fork}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/shared-conversation",
+  "mdUrl": "/docs/components/shared-conversation.md",
+  "jsonUrl": "/r/components/shared-conversation.json",
+  "specimens": [
+    {
+      "title": "SharedConversation",
+      "group": "elements-composer",
+      "components": [
+        "SharedConversation"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"with a way in\" wide>\n    <SharedConversation\n      title=\"Why the desk refused universe 3\"\n      sharedBy=\"priya\"\n      sharedAt=\"2 days ago\"\n      turns={SHARED}\n      onContinue={() => undefined}\n    />\n  </Specimen>\n  <Specimen label=\"read only\" wide>\n    <SharedConversation\n      title=\"Why the desk refused universe 3\"\n      sharedBy=\"priya\"\n      sharedAt=\"2 days ago\"\n      turns={SHARED.slice(0, 2)}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A read-only transcript somebody sent you, with the one action a reader ever wants: pick it up yourself. The header says who shared it and when, because a published thread with no attribution is a screenshot. Turns render verbatim — this is somebody else's conversation, and it is not the place to start interpreting markdown.",
+      "interaction": "continuing forks the transcript into the reader's own thread rather than joining the original, which is why the action is offered and not implied by clicking a turn."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/sheet.json

@@ -0,0 +1,186 @@
+{
+  "name": "Sheet",
+  "slug": "sheet",
+  "group": "overlays",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A modal panel that slides in from an edge: an inspector, a filter drawer, a\ndetails pane too wide for a popover.\n\nThe same Base UI `Dialog` as {@link Dialog } — same focus trap, same\ndismissal, same portal theme stamp — anchored to an edge instead of centred.\nReach for it when the content is a *side channel* to the page rather than an\ninterruption of it; a task that must be finished before anything else belongs\nin a `Dialog`. On a phone-shaped viewport prefer {@link Drawer }, which is the\nsame idea with a swipe.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Trigger",
+    "Content",
+    "Title",
+    "Description",
+    "Footer",
+    "Close"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Sheet.Root",
+      "description": "Groups the parts of a sheet and owns its open state. Renders no element.",
+      "props": [],
+      "typeReferences": [
+        "BaseDialog.Root.Props"
+      ]
+    },
+    {
+      "name": "Trigger",
+      "usage": "Sheet.Trigger",
+      "description": "The control that opens the sheet. A `<button>` by default, deliberately\nunstyled — pass `render={<Button />}` so the button's own variant classes stay\nthe last word on how it looks.",
+      "props": [],
+      "typeReferences": [
+        "BaseDialog.Trigger.Props"
+      ]
+    },
+    {
+      "name": "Content",
+      "usage": "Sheet.Content",
+      "description": "The sheet's portal, scrim and popup in one part.\n\nThe portal container comes from {@link useCuePortalProps}, so the surface\ncarries the caller's `data-theme` / `data-density` / `data-mode` even though\nit mounts at the end of `<body>`.\n\nFocus trapping, focus restoration, Escape and outside-press dismissal, and\nscroll locking all come from Base UI's `Dialog`; this layer supplies the edge\ngeometry and the slide.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the popup surface."
+        },
+        {
+          "name": "closeLabel",
+          "type": "string",
+          "required": false,
+          "defaultValue": "Close",
+          "description": "Accessible name for the corner close affordance. Defaults to `\"Close\"`."
+        },
+        {
+          "name": "keepMounted",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": null,
+          "description": "Keep the popup mounted while closed, so its content is not re-created."
+        },
+        {
+          "name": "backdropClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the scrim behind it."
+        },
+        {
+          "name": "side",
+          "type": "\"left\" | \"right\" | \"bottom\"",
+          "required": false,
+          "defaultValue": "right",
+          "description": ""
+        },
+        {
+          "name": "showCloseButton",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "true",
+          "description": "Show the corner close affordance. Defaults to `true`."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseDialog.Popup.Props, \"className\">",
+        "VariantProps<typeof sheetPopupVariants>"
+      ]
+    },
+    {
+      "name": "Title",
+      "usage": "Sheet.Title",
+      "description": "The sheet's heading. Base UI wires it to the popup's `aria-labelledby`, so a\nsheet with a title needs no `aria-label`.",
+      "props": [],
+      "typeReferences": [
+        "BaseDialog.Title.Props"
+      ]
+    },
+    {
+      "name": "Description",
+      "usage": "Sheet.Description",
+      "description": "The supporting line under the title, published as `aria-describedby`.",
+      "props": [],
+      "typeReferences": [
+        "BaseDialog.Description.Props"
+      ]
+    },
+    {
+      "name": "Footer",
+      "usage": "Sheet.Footer",
+      "description": "The action strip at the foot of the sheet. `mt-auto` so it sinks to the bottom\nedge of a tall panel instead of hugging whatever content happens to be above.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Close",
+      "usage": "Sheet.Close",
+      "description": "A control that closes the sheet. Unstyled for the same reason as the\ntrigger — wrap it: `<Sheet.Close render={<Button>Cancel</Button>} />`.",
+      "props": [],
+      "typeReferences": [
+        "BaseDialog.Close.Props"
+      ]
+    }
+  ],
+  "variants": {
+    "side": [
+      "right",
+      "left",
+      "bottom"
+    ]
+  },
+  "defaultVariants": {
+    "side": "right"
+  },
+  "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-space-4",
+    "--cue-space-6",
+    "--cue-surface-2",
+    "--cue-text-emphasis",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A modal panel that slides in from an edge: an inspector, a filter drawer, a details pane too wide for a popover.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Sheet.Root>\n  <Sheet.Trigger render={<Button>Inspect</Button>} />\n  <Sheet.Content side=\"right\">\n    <Sheet.Title>Fixture inspector</Sheet.Title>\n    <Sheet.Description>Everything patched at this address.</Sheet.Description>\n    <Sheet.Footer><Sheet.Close render={<Button>Done</Button>} /></Sheet.Footer>\n  </Sheet.Content>\n</Sheet.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/sheet",
+  "mdUrl": "/docs/components/sheet.md",
+  "jsonUrl": "/r/components/sheet.json",
+  "specimens": [
+    {
+      "title": "Sheet",
+      "group": "overlays",
+      "components": [
+        "Sheet"
+      ],
+      "code": "<Specimens>\n  {([\"right\", \"left\", \"bottom\"] as const).map((side) => (\n    <Specimen key={side} label={side}>\n      <Sheet.Root>\n        <Sheet.Trigger render={<Button>{side}</Button>} />\n        <Sheet.Content side={side}>\n          <Sheet.Title>Fixture inspector</Sheet.Title>\n          <Sheet.Description>Source Four 26°, universe 1, channel 12.</Sheet.Description>\n          <div className=\"flex flex-col gap-(--cue-space-4)\">\n            <Switch label=\"Highlight\" defaultChecked />\n            <Switch label=\"Park\" />\n          </div>\n          <Sheet.Footer>\n            <Sheet.Close render={<Button>Close</Button>} />\n          </Sheet.Footer>\n        </Sheet.Content>\n      </Sheet.Root>\n    </Specimen>\n  ))}\n</Specimens>",
+      "note": "A dialog anchored to an edge. Three sides, each with its own translate transition.",
+      "interaction": "the transition is driven by Base UI's data attributes and CSS, and switches off under prefers-reduced-motion."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/shimmer-label.json

@@ -0,0 +1,59 @@
+{
+  "name": "ShimmerLabel",
+  "slug": "shimmer-label",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A label that sweeps while something is still happening.\n\nThe sweep is `.cue-elements-shimmer`, declared with its keyframes in\n`@cueplusplus/ui/elements.css`; without that stylesheet the label simply\nsits still, which is also what it does under `prefers-reduced-motion`.",
+  "props": [
+    {
+      "name": "active",
+      "type": "boolean",
+      "required": false,
+      "defaultValue": "true",
+      "description": "Whether the sweep is running. Defaults to `true`."
+    }
+  ],
+  "typeReferences": [
+    "ComponentProps<\"span\"> & {\n  /** Whether the sweep is running. Defaults to `true`. */\n  active?: boolean;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-accent-hover",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-stream",
+    "--cue-sunken",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-label"
+  ],
+  "summary": "A label that sweeps while something is still happening.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/shimmer-label",
+  "mdUrl": "/docs/components/shimmer-label.md",
+  "jsonUrl": "/r/components/shimmer-label.json",
+  "specimens": [
+    {
+      "title": "ShimmerLabel",
+      "group": "elements",
+      "components": [
+        "ShimmerLabel"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"active\">\n    <ShimmerLabel>Patching universe 3</ShimmerLabel>\n  </Specimen>\n  <Specimen label=\"resting\">\n    <ShimmerLabel active={false}>Patched universe 3</ShimmerLabel>\n  </Specimen>\n</Specimens>",
+      "note": "A band of full-strength ink travelling through a muted label, clipped to the glyphs. It is the family's one ambient animation and it means exactly one thing: this is happening now. A reader who asked for less motion gets the muted label and no sweep at all.",
+      "interaction": "none. It is text, and it stays selectable text."
+    }
+  ],
+  "todo": true
+}