@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/cli-tool-icon.json

@@ -0,0 +1,52 @@
+{
+  "name": "CliToolIcon",
+  "slug": "cli-tool-icon",
+  "group": "icons",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A CLI tool in the registry: a thing that runs in a terminal.\n\nA window with a prompt in it, rather than a bare chevron. A chevron on its\nown is a disclosure everywhere else in this library, and a navigation row\nthat appeared to expand and then navigated instead is a worse failure than a\nslightly busier glyph at 10px.",
+  "props": [],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-icon-",
+    "--cue-icon-md",
+    "--cue-icon-sm"
+  ],
+  "summary": "A CLI tool in the registry: a thing that runs in a terminal.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/cli-tool-icon",
+  "mdUrl": "/docs/components/cli-tool-icon.md",
+  "jsonUrl": "/r/components/cli-tool-icon.json",
+  "specimens": [
+    {
+      "title": "The container icon set",
+      "group": "icons",
+      "components": [
+        "CatalogueIcon",
+        "StackIcon",
+        "StacksMatrixIcon",
+        "AudienceIcon",
+        "ChannelReleasedIcon",
+        "ChannelBetaIcon",
+        "FolderIcon",
+        "McpServerIcon",
+        "CliToolIcon",
+        "SkillIcon"
+      ],
+      "code": "<Specimens>\n  {CONTAINERS.map(([label, name, Icon]) => (\n    <Specimen key={name} label={label}>\n      <Icon className=\"size-icon-md text-fg\" />\n    </Specimen>\n  ))}\n</Specimens>\n<Specimens>\n  <Specimen label=\"icon-sm\">\n    <SkillIcon className=\"size-icon-sm text-fg\" />\n  </Specimen>\n  <Specimen label=\"icon-md\">\n    <SkillIcon className=\"size-icon-md text-fg\" />\n  </Specimen>\n  <Specimen label=\"inherited\">\n    <SkillIcon className=\"size-icon-md\" />\n  </Specimen>\n  <Specimen label=\"muted\">\n    <SkillIcon className=\"size-icon-md text-fg-muted\" />\n  </Specimen>\n  <Specimen label=\"accent\">\n    <SkillIcon className=\"size-icon-md text-accent\" />\n  </Specimen>\n  <Specimen label=\"danger\">\n    <SkillIcon className=\"size-icon-md text-danger\" />\n  </Specimen>\n</Specimens>\n<Specimens>\n  <Specimen label=\"in a row\" wide>\n    <span className=\"inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg-muted\">\n      <ChannelReleasedIcon className=\"size-icon-md shrink-0\" />\n      Our skills · released\n    </span>\n  </Specimen>\n  <Specimen label=\"current row\" wide>\n    <span className=\"inline-flex items-center gap-(--cue-space-2) font-mono text-(length:--cue-text-ui) text-fg\">\n      <ChannelBetaIcon className=\"size-icon-md shrink-0\" />\n      Our skills · beta\n    </span>\n  </Specimen>\n</Specimens>",
+      "note": "One grid and one weight across all ten, at size-icon-md — the size a navigation row draws them at. Each is a plain <svg> that takes every SVG prop.",
+      "interaction": "none. They are decorative by default: aria-hidden, announced by nothing, because the row they mark already carries its name."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/code-diff.json

@@ -0,0 +1,87 @@
+{
+  "name": "CodeDiff",
+  "slug": "code-diff",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A unified diff with tinted additions and removals, sized for chat.",
+  "props": [
+    {
+      "name": "filename",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "File path shown in the diff header."
+    },
+    {
+      "name": "additions",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Addition count rendered in green next to the filename."
+    },
+    {
+      "name": "deletions",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Deletion count rendered in red next to the filename."
+    },
+    {
+      "name": "lines",
+      "type": "readonly DiffLine[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Unified diff lines with context, added, or removed kind."
+    },
+    {
+      "name": "cycle",
+      "type": "number",
+      "required": true,
+      "defaultValue": null,
+      "description": "Identity key that remounts the body so entrance animation can replay."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"filename\" | \"additions\" | \"deletions\" | \"lines\" | \"cycle\"\n> & {\n  /** File path shown in the diff header. */\n  filename: string;\n  /** Addition count rendered in green next to the filename. */\n  additions: number;\n  /** Deletion count rendered in red next to the filename. */\n  deletions: number;\n  /** Unified diff lines with context, added, or removed kind. */\n  lines: readonly DiffLine[];\n  /** Identity key that remounts the body so entrance animation can replay. */\n  cycle: number;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-danger",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-ok",
+    "--cue-radius-overlay",
+    "--cue-text-ui"
+  ],
+  "summary": "A unified diff with tinted additions and removals, sized for chat.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { CodeDiff } from \"@cueplusplus/ui/elements\";\n\n<CodeDiff\n  filename=\"thread.tsx\"\n  additions={2}\n  deletions={1}\n  lines={[\n    { kind: \"removed\", text: \"const x = 1\" },\n    { kind: \"added\", text: \"const x = 2\" },\n  ]}\n  cycle={0}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/code-diff",
+  "mdUrl": "/docs/components/code-diff.md",
+  "jsonUrl": "/r/components/code-diff.json",
+  "specimens": [
+    {
+      "title": "CodeDiff",
+      "group": "elements",
+      "components": [
+        "CodeDiff"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"+3 −1\" wide>\n    <CodeDiff\n      filename=\"show/main-stage.cue\"\n      additions={3}\n      deletions={1}\n      lines={CUE_DIFF}\n      cycle={0}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A unified diff sized for a chat column: added and removed rows carry both a gutter mark and a tint, so the diff survives being read in greyscale. Rows animate in on `cycle`, which is an identity rather than a trigger.",
+      "interaction": "none. Scrolls sideways rather than wrapping, because a wrapped diff line is a lie about the file."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/code-runner.json

@@ -0,0 +1,97 @@
+{
+  "name": "CodeRunner",
+  "slug": "code-runner",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [
+    "lucide-react"
+  ],
+  "clientOnly": true,
+  "description": "A snippet with a run button, and the output it produced attached below it.",
+  "props": [
+    {
+      "name": "language",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Language label above the snippet."
+    },
+    {
+      "name": "code",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "The snippet. Rendered as plain mono; wrap it yourself for highlighting."
+    },
+    {
+      "name": "state",
+      "type": "\"idle\" | \"ok\" | \"running\" | \"error\"",
+      "required": true,
+      "defaultValue": null,
+      "description": "idle hides the output pane entirely; error tints the output red."
+    },
+    {
+      "name": "output",
+      "type": "readonly string[]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Output lines, revealed in sequence."
+    },
+    {
+      "name": "durationMs",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "description": "How long the run took, printed once it settles."
+    },
+    {
+      "name": "onRun",
+      "type": "(() => void)",
+      "required": false,
+      "defaultValue": null,
+      "description": "Called when the run control is pressed."
+    }
+  ],
+  "typeReferences": [
+    "Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"language\" | \"code\" | \"state\" | \"output\" | \"durationMs\" | \"onRun\"\n> & {\n  /** Language label above the snippet. */\n  language: string;\n  /** The snippet. Rendered as plain mono; wrap it yourself for highlighting. */\n  code: string;\n  /** idle hides the output pane entirely; error tints the output red. */\n  state: RunState;\n  /** Output lines, revealed in sequence. */\n  output: readonly string[];\n  /** How long the run took, printed once it settles. */\n  durationMs?: number;\n  /** Called when the run control is pressed. */\n  onRun?: () => void;\n}"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-border",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-radius-overlay",
+    "--cue-surface-3",
+    "--cue-text-ui"
+  ],
+  "summary": "A snippet with a run button, and the output it produced attached below it.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "import { CodeRunner } from \"@cueplusplus/ui/elements\";\n\n<CodeRunner\n  language=\"typescript\"\n  code={code}\n  state=\"ok\"\n  output={[\"1\"]}\n  durationMs={38}\n  onRun={run}\n/>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/code-runner",
+  "mdUrl": "/docs/components/code-runner.md",
+  "jsonUrl": "/r/components/code-runner.json",
+  "specimens": [
+    {
+      "title": "CodeRunner",
+      "group": "elements-agents",
+      "components": [
+        "CodeRunner"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"idle\" wide>\n    <CodeRunner\n      language=\"bash\"\n      code={\"cue patch --universe 3 --fixture esprite --count 6\"}\n      state={run}\n      output={OUTPUT}\n      onRun={() => setRun(\"ok\")}\n    />\n  </Specimen>\n  <Specimen label=\"running\" wide>\n    <CodeRunner\n      language=\"bash\"\n      code={\"cue patch --universe 3 --fixture esprite --count 6\"}\n      state=\"running\"\n      output={OUTPUT.slice(0, 2)}\n    />\n  </Specimen>\n  <Specimen label=\"finished\" wide>\n    <CodeRunner\n      language=\"bash\"\n      code={\"cue patch --universe 3 --fixture esprite --count 6\"}\n      state=\"ok\"\n      output={OUTPUT}\n      durationMs={412}\n    />\n  </Specimen>\n  <Specimen label=\"failed\" wide>\n    <CodeRunner\n      language=\"bash\"\n      code={\"cue patch --universe 4 --fixture esprite --count 6\"}\n      state=\"error\"\n      output={[\"universe 4 is not enabled on this show file\", \"exit 1\"]}\n      durationMs={88}\n    />\n  </Specimen>\n</Specimens>",
+      "note": "A snippet with a run button and the output it produced attached underneath, rather than in a console somewhere else. `idle` hides the output pane entirely — an empty black box is not a result — `error` tints what came back in the danger hue, and the duration prints once it settles.",
+      "interaction": "the run control is a labelled icon button (`Run this snippet`); while running it spins and the output arrives a line at a time."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/collapsible.json

@@ -0,0 +1,120 @@
+{
+  "name": "Collapsible",
+  "slug": "collapsible",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "One section that opens and closes — an accordion of exactly one.\n\nWraps Base UI's `Collapsible` and wears the same summary-row skin as\n`Accordion`, so a lone section and a stack of them are visibly the same\ncomponent.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Trigger",
+    "Panel"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Collapsible.Root",
+      "description": "Groups a trigger with its panel and owns the open state.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the frame."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseCollapsible.Root.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Trigger",
+      "usage": "Collapsible.Trigger",
+      "description": "The summary row that opens the panel — the same recipe as `Accordion.Trigger`.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the summary row."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseCollapsible.Trigger.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Panel",
+      "usage": "Collapsible.Panel",
+      "description": "The body. Height animates from `--collapsible-panel-height`; see `Accordion.Panel`.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the animating box. Padding belongs on `bodyClassName`."
+        },
+        {
+          "name": "bodyClassName",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the padded body inside it."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseCollapsible.Panel.Props, \"className\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-control-md",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-pad-row-x",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-text-label",
+    "--cue-text-micro",
+    "--cue-text-ui"
+  ],
+  "summary": "One section that opens and closes — an accordion of exactly one.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Collapsible.Root defaultOpen>\n  <Collapsible.Trigger>failover</Collapsible.Trigger>\n  <Collapsible.Panel>…</Collapsible.Panel>\n</Collapsible.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/collapsible",
+  "mdUrl": "/docs/components/collapsible.md",
+  "jsonUrl": "/r/components/collapsible.json",
+  "specimens": [
+    {
+      "title": "Collapsible",
+      "group": "layout",
+      "components": [
+        "Collapsible"
+      ],
+      "code": "<Collapsible.Root className=\"w-full max-w-[36rem]\">\n  <Collapsible.Trigger>Show output routing</Collapsible.Trigger>\n  <Collapsible.Panel>\n    Art-Net to 10.0.0.42, universes 1 to 4, 44 Hz.\n  </Collapsible.Panel>\n</Collapsible.Root>",
+      "note": "One panel, one trigger, no grouping rules.",
+      "interaction": "same height animation as the accordion panel."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/color-area.json

@@ -0,0 +1,59 @@
+{
+  "name": "ColorArea",
+  "slug": "color-area",
+  "group": "color",
+  "importPath": "@cueplusplus/ui/color",
+  "peerDependencies": [
+    "react-aria-components"
+  ],
+  "clientOnly": true,
+  "description": "The two-axis colour field — saturation against brightness, by default.\n\nWraps React Aria's `ColorArea`, so the pointer maths, the two hidden range\ninputs that make it keyboard- and screen-reader-operable, and the gradient\nbackground are the library's. This layer adds the rim, the radius and the\nshared thumb.\n\nString values may be written in any notation this suite reads, `oklch()`\nincluded — React Aria only parses sRGB, so they are converted on the way in.\n\n`react-aria-components` is an **optional peer**: import this from\n`@cueplusplus/ui/color`.",
+  "props": [
+    {
+      "name": "thumbClassName",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the thumb."
+    }
+  ],
+  "typeReferences": [
+    "Omit<AriaColorAreaProps, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-bg",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-radius-control"
+  ],
+  "summary": "The two-axis colour field — saturation against brightness, by default.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<ColorArea aria-label=\"Saturation and brightness\" value={color} onChange={setColor} />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/color-area",
+  "mdUrl": "/docs/components/color-area.md",
+  "jsonUrl": "/r/components/color-area.json",
+  "specimens": [
+    {
+      "title": "ColorArea",
+      "group": "color",
+      "components": [
+        "ColorArea"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"default\">\n    <ColorArea defaultValue=\"#ff6a2e\" aria-label=\"Accent saturation and brightness\" />\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <ColorArea defaultValue=\"#3ecf8e\" isDisabled aria-label=\"Locked colour\" />\n  </Specimen>\n</Specimens>",
+      "note": "The two-axis plane. Saturation across, brightness down, with a thumb that reports both.",
+      "interaction": "arrow keys move one axis at a time; the thumb keeps a ring in the background colour so it stays visible on any hue."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/color-field.json

@@ -0,0 +1,79 @@
+{
+  "name": "ColorField",
+  "slug": "color-field",
+  "group": "color",
+  "importPath": "@cueplusplus/ui/color",
+  "peerDependencies": [
+    "react-aria-components"
+  ],
+  "clientOnly": true,
+  "description": "A typed colour value — the whole colour as hex, or one channel as a number.\n\nWraps React Aria's `ColorField`, so parsing, arrow-key stepping and the\ncommit-on-blur behaviour are the library's; the input rides the same recessed\nchassis as every other text control.\n\nReact Aria only parses sRGB notations, so it edits **hex**. For a field that\nalso accepts `oklch()` — the notation this system's tokens are authored in —\nuse `ColorPicker`, which owns the conversion.\n\n`react-aria-components` is an **optional peer**: import this from\n`@cueplusplus/ui/color`.",
+  "props": [
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": null,
+      "description": "Rung of the control ladder. Defaults to `\"md\"`."
+    },
+    {
+      "name": "inputClassName",
+      "type": "ClassNameOrFunction<InputRenderProps>",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the input itself."
+    }
+  ],
+  "typeReferences": [
+    "Omit<AriaColorFieldProps, \"children\">"
+  ],
+  "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-1",
+    "--cue-space-3",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-sunken",
+    "--cue-text-body",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A typed colour value — the whole colour as hex, or one channel as a number.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<ColorField aria-label=\"Accent\" value={color} onChange={setColor} />\n<ColorField aria-label=\"Red\" channel=\"red\" colorSpace=\"rgb\" size=\"sm\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "todo-docs",
+  "url": "/docs/components/color-field",
+  "mdUrl": "/docs/components/color-field.md",
+  "jsonUrl": "/r/components/color-field.json",
+  "specimens": [
+    {
+      "title": "ColorField",
+      "group": "color",
+      "components": [
+        "ColorField"
+      ],
+      "code": "<div className=\"grid w-full gap-(--cue-space-5) lg:grid-cols-3\">\n  <Field name=\"accent\">\n    <FieldLabel>Accent</FieldLabel>\n    <ColorField aria-label=\"Accent hex\" defaultValue=\"#ff6a2e\" />\n    <FieldDescription>Hex, with or without the hash.</FieldDescription>\n  </Field>\n  <ColorField aria-label=\"Accent, small\" size=\"sm\" defaultValue=\"#3ecf8e\" />\n  <ColorField aria-label=\"Accent, disabled\" isDisabled defaultValue=\"#5b8def\" />\n</div>",
+      "note": "The text half of the suite, on the form chassis. Invalid input is rejected rather than silently coerced.",
+      "interaction": "same rim and ring as Input; arrow keys step the channel under the caret."
+    }
+  ],
+  "todo": true
+}