@cueplusplus/ui 0.9.0 → 0.10.0

package/manifest/components/avatar.json

@@ -12,28 +12,46 @@
       "type": "string",
       "required": false,
       "defaultValue": null,
-      "description": "Image URL. Omit to go straight to the fallback."
+      "description": "Image URL. Omit to go straight to the fallback.",
+      "control": {
+        "kind": "string"
+      }
     },
     {
       "name": "alt",
       "type": "string",
       "required": false,
       "defaultValue": null,
-      "description": "Alt text for the image, and the name the default initials are derived from."
+      "description": "Alt text for the image, and the name the default initials are derived from.",
+      "control": {
+        "kind": "string"
+      }
     },
     {
       "name": "fallback",
       "type": "ReactNode",
       "required": false,
       "defaultValue": null,
-      "description": "What to show while the image loads or after it fails. Defaults to initials from `alt`."
+      "description": "What to show while the image loads or after it fails. Defaults to initials from `alt`.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
     },
     {
       "name": "size",
       "type": "\"sm\" | \"md\" | \"lg\"",
       "required": false,
       "defaultValue": "md",
-      "description": ""
+      "description": "",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
     }
   ],
   "typeReferences": [

package/manifest/components/background-inbox.json

@@ -14,14 +14,21 @@
       "type": "readonly BackgroundRun[]",
       "required": true,
       "defaultValue": null,
-      "description": "Detached runs. The header counts what is ready rather than what is in flight,\nbecause ready is the thing that needs you."
+      "description": "Detached runs. The header counts what is ready rather than what is in flight,\nbecause ready is the thing that needs you.",
+      "control": {
+        "kind": "array"
+      }
     },
     {
       "name": "onCollect",
       "type": "((id: string) => void)",
       "required": false,
       "defaultValue": null,
-      "description": "Called to pull a finished run back into the thread. Running rows are not clickable."
+      "description": "Called to pull a finished run back into the thread. Running rows are not clickable.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
     }
   ],
   "typeReferences": [

package/manifest/components/bento.json

@@ -0,0 +1,306 @@
+{
+  "name": "Bento",
+  "slug": "bento",
+  "group": "layout",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A grid of unequal tiles: per-item spans, clamped to the container's columns.\n\nWhere `Grid` lays out cells it never touches, a bento's whole content is\nper-item — so the span is a prop on the tile, from a closed set, and the\ncontainer clamps it on the way past. One column below `sm`, two from `sm`,\nthe asked-for count from `lg`; the clamp is per breakpoint and not per\n`cols`, because every container is two tracks wide in between whatever it\nwas asked for.\n\n**Static markup — no hooks, no `\"use client\"`, and it must stay that way.**\nA directive is per *module*, so a `Bento` built on `useRender` would open a\nclient boundary in every server page that draws one. That is why the router\nescape hatch is `render`, an *element* that is cloned, rather than a render\nfunction; and why {@link Bento.Tile} is a discriminated union rather than a\ntile that decides at runtime what it is.\n\n`BentoTileProps` omits the native `title` from its `<div>` props, the same\nomission `PanelHeader` and `Item` make: `React.ComponentPropsWithoutRef<\"div\">`\nalready declares `title?: string`, and narrowing it to a `ReactNode` without\nthe `Omit` is TS2430.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Tile"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Bento.Root",
+      "description": "The bento container: a responsive grid that clamps the spans of its tiles.\n\nIt maps `React.Children` and clones every child whose type is the tile,\nnarrowing that tile's `span` to its own `cols`; anything else passes through\nwith its props untouched, so a `<section>` or a bare `<div>` may sit in a\nband beside the tiles.\n\n**The clamp reaches direct children only, and that is a contract rather than\nan oversight.** `React.Children` does not descend into a component element,\nso a tile rendered by a child — `<Bento.Root><MyTiles /></Bento.Root>` — is\nwhatever `span` it declared, and an over-wide one grows an implicit column\nexactly as an unclamped tile would. Reading through a component would mean\nrendering it, which a container may not do. So: **keep a tile a child\ncomponent renders at `span={1}`, or clamp it in that component.** The same\nhazard in fragment form is why an authored `node` fixture of tiles is an\narray and not a `<>…</>`.\n\nStatic markup — no `\"use client\"`.",
+      "props": [
+        {
+          "name": "cols",
+          "type": "4 | 2 | 3",
+          "required": false,
+          "defaultValue": "3",
+          "description": "How many columns at `lg`. Defaults to `3`. Two from `sm`, one below it.",
+          "control": {
+            "kind": "enum",
+            "members": [
+              4,
+              2,
+              3
+            ],
+            "min": 2,
+            "max": 4
+          }
+        },
+        {
+          "name": "rows",
+          "type": "4 | 1 | 2 | 3",
+          "required": false,
+          "defaultValue": null,
+          "description": "How many rows to declare from `sm` up.\n\nOnly worth setting where a tile spans rows: a `rowSpan` over implicit\ntracks sizes itself to the tile's own content, which is not a span.",
+          "control": {
+            "kind": "enum",
+            "members": [
+              4,
+              1,
+              2,
+              3
+            ],
+            "min": 1,
+            "max": 4
+          }
+        },
+        {
+          "name": "dense",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Pack later tiles into earlier holes instead of leaving them empty.",
+          "control": {
+            "kind": "boolean"
+          }
+        },
+        {
+          "name": "gap",
+          "type": "0 | 4 | 8 | 1 | 2 | 3 | 5 | 6 | 7",
+          "required": false,
+          "defaultValue": "4",
+          "description": "Which rung of the density space ladder to spend between tiles. Defaults to `4`.",
+          "control": {
+            "kind": "enum",
+            "members": [
+              0,
+              4,
+              8,
+              1,
+              2,
+              3,
+              5,
+              6,
+              7
+            ],
+            "min": 0,
+            "max": 8
+          }
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The tiles. Declared, so the manifest files it as a documented prop.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"div\">"
+      ]
+    },
+    {
+      "name": "Tile",
+      "usage": "Bento.Tile",
+      "description": "One cell of a bento: a link, or a surface with an `action`.\n\nThe two are a discriminated union rather than one shape with a runtime\nbranch, because half of the rule is something a compiler can hold: `href`\nand `action` are mutually exclusive in the type. The other half — that a\nlink tile's content is static — is held by a dev-time check here and by a\nDOM assertion in each grid that draws one.\n\nStatic markup — no `\"use client\"`.",
+      "props": [
+        {
+          "name": "span",
+          "type": "4 | 1 | 2 | 3",
+          "required": false,
+          "defaultValue": null,
+          "description": "How many columns to cover. Clamped by the container to its own `cols`.",
+          "control": {
+            "kind": "enum",
+            "members": [
+              4,
+              1,
+              2,
+              3
+            ],
+            "min": 1,
+            "max": 4
+          }
+        },
+        {
+          "name": "rowSpan",
+          "type": "1 | 2",
+          "required": false,
+          "defaultValue": null,
+          "description": "How many rows to cover. Needs a container that declares them.",
+          "control": {
+            "kind": "enum",
+            "members": [
+              1,
+              2
+            ],
+            "min": 1,
+            "max": 2
+          }
+        },
+        {
+          "name": "minHeight",
+          "type": "\"none\" | \"half\" | \"hero\"",
+          "required": false,
+          "defaultValue": null,
+          "description": "How much height to hold before the content arrives. Defaults to `\"none\"`.",
+          "control": {
+            "kind": "enum",
+            "members": [
+              "none",
+              "half",
+              "hero"
+            ]
+          }
+        },
+        {
+          "name": "eyebrow",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The qualifier above the name: an import specifier, a family, a device.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The tile's name. Rendered as a `<span>`, never as a heading.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        },
+        {
+          "name": "meta",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The count beside the name — by convention a `<Chip variant=\"outline\">`.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "The summary and anything below it.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Where the tile goes. Its presence is what makes the tile a link.\nNever on a panel tile: `href` is what selects the link variant.",
+          "control": {
+            "kind": "string"
+          }
+        },
+        {
+          "name": "render",
+          "type": "ReactElement<unknown, string | JSXElementConstructor<any>>",
+          "required": false,
+          "defaultValue": null,
+          "description": "A router's own link element, cloned to carry the tile's classes and slots.\n\nThe **element** form only, and never a render function: a function would\nbuy a second calling convention at the price of this component's\nserver-safety, because the hook that reads one is a hook. The element keeps\nits own `href` — `next/link` declares that prop required, so passing the\ntile's would make the tile the silent owner of a value the element has to\ndeclare anyway. Its own `className` is **merged** with the tile's rather\nthan replaced by it, which is the other half of the same bargain: `href` is\na value the element owns outright, and a class is one it adds to.\nNever on a panel tile: `render` belongs to the link variant.",
+          "control": {
+            "kind": "opaque"
+          }
+        },
+        {
+          "name": "action",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": null,
+          "description": "Never on a link tile: an `<a>` may not contain a control.\nThe tile's own link or control, rendered beside the count rather than around it.",
+          "control": {
+            "kind": "node",
+            "fixture": "children.text"
+          }
+        }
+      ],
+      "typeReferences": [
+        "BentoLinkTileProps | BentoPanelTileProps"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-radius-surface",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-space-8",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-emphasis",
+    "--cue-text-meta"
+  ],
+  "summary": "The unequal grid: tiles of different sizes on one set of tracks, from a closed set of spans.",
+  "examples": [
+    {
+      "title": "A link tile",
+      "code": "<Bento.Root cols={3} gap={5}>\n  <Bento.Tile\n    href=\"/docs/components/grid\"\n    render={<NextLink href=\"/docs/components/grid\" />}\n    eyebrow=\"@cueplusplus/ui\"\n    title=\"Grid\"\n    meta={<Chip variant=\"outline\">17</Chip>}\n  >\n    Equal columns, or as many as fit.\n  </Bento.Tile>\n</Bento.Root>",
+      "language": "tsx"
+    },
+    {
+      "title": "A panel tile, whose control is a sibling",
+      "code": "<Bento.Root cols={2} rows={2} gap={5}>\n  <Bento.Tile\n    span={2}\n    rowSpan={2}\n    minHeight=\"hero\"\n    title=\"Signal\"\n    action={<Button onClick={() => setTheme(\"signal\")}>Apply</Button>}\n  >\n    <ThemeSwatches theme=\"signal\" />\n  </Bento.Tile>\n</Bento.Root>",
+      "language": "tsx"
+    },
+    {
+      "title": "Usage",
+      "code": "<Bento.Root cols={3} rows={2} gap={5}>\n  <Bento.Tile span={2} rowSpan={2} minHeight=\"hero\" title=\"Kitchen sink\">\n    Every component, on one page.\n  </Bento.Tile>\n  <Bento.Tile title=\"Themes\" meta={<Chip variant=\"outline\">10</Chip>} />\n  <Bento.Tile title=\"Density\" meta={<Chip variant=\"outline\">5</Chip>} />\n</Bento.Root>\n<Bento.Tile\n  href=\"/docs/components/grid\"\n  render={<NextLink href=\"/docs/components/grid\" />}\n  eyebrow=\"@cueplusplus/ui\"\n  title=\"Grid\"\n>\n  Equal columns, or as many as fit.\n</Bento.Tile>\n<Bento.Tile title=\"Signal\" action={<Button onClick={apply}>Apply</Button>}>\n  <ThemeSwatches theme=\"signal\" />\n</Bento.Tile>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/bento",
+  "mdUrl": "/docs/components/bento.md",
+  "jsonUrl": "/r/components/bento.json",
+  "whenToUse": [
+    "A landing surface where some things matter more than others: one hero tile, a run of ordinary ones, and the difference visible without a heading.",
+    "A dashboard of unlike cards — a chart beside a count beside a link — where a uniform cell would make the biggest thing look the same size as the smallest."
+  ],
+  "whenNotToUse": [
+    "Equal cards. That is `Grid`, and a bento of equal tiles is a grid that costs a reader a scan: they look for the emphasis the layout is promising and there is none.",
+    "A list of rows. That is `Panel` with `Row` — a bento of one-column tiles is a list wearing nine rims."
+  ],
+  "commonMistakes": [
+    "Interpolating a span. `col-span-${n}` is invisible to Tailwind's scanner, which reads source text and not computed strings — which is exactly why `span` is a closed set of literals with a static class each.",
+    "Putting a control or a second link inside a tile that has an `href`. An `<a>` admits no interactive descendant, so the whole tile stops being one thing; use a panel tile and put the control in `action`, which is what that variant is for.",
+    "Spanning rows in a container that declares none. `rowSpan` over implicit tracks sizes itself to the tile's own content, so set `rows` on the container and the span is over tracks that exist."
+  ],
+  "specimens": [
+    {
+      "title": "Bento",
+      "group": "layout",
+      "components": [
+        "Bento"
+      ],
+      "code": "<Specimens>\n  <Specimen label=\"three columns, one wide tile\" wide>\n    <Bento.Root cols={3} rows={2} gap={4} className=\"w-full\">\n      <Bento.Tile\n        span={2}\n        rowSpan={2}\n        minHeight=\"half\"\n        eyebrow=\"universe 1\"\n        title=\"Front truss\"\n        meta={<Chip variant=\"outline\">24</Chip>}\n      >\n        Twenty-four Source Four 26° on channels 12 to 35.\n      </Bento.Tile>\n      <Bento.Tile title=\"Movers\" meta={<Chip variant=\"outline\">8</Chip>} />\n      <Bento.Tile title=\"Cyc\" meta={<Chip variant=\"outline\">6</Chip>} />\n      <Bento.Tile title=\"Haze\" meta={<Chip variant=\"outline\">2</Chip>} />\n      <Bento.Tile title=\"House\" meta={<Chip variant=\"outline\">4</Chip>} />\n      <Bento.Tile title=\"Spare\" meta={<Chip variant=\"outline\">1</Chip>} />\n    </Bento.Root>\n  </Specimen>\n  <Specimen label=\"link tiles\" wide>\n    <Bento.Root cols={3} gap={4} className=\"w-full\">\n      <Bento.Tile href=\"#bento\" eyebrow=\"@cueplusplus/ui\" title=\"Grid\">\n        Equal columns, or as many as fit.\n      </Bento.Tile>\n      <Bento.Tile href=\"#bento\" eyebrow=\"@cueplusplus/ui\" title=\"Stack\">\n        One axis, spaced off a rung of the density ladder.\n      </Bento.Tile>\n      <Bento.Tile href=\"#bento\" eyebrow=\"@cueplusplus/ui\" title=\"Container\">\n        A measure, centred.\n      </Bento.Tile>\n    </Bento.Root>\n  </Specimen>\n</Specimens>",
+      "note": "An unequal grid: every tile carries its own span from a closed set, and the container clamps it to its own columns — per breakpoint, because a bento is two tracks wide between `sm` and `lg` whatever its `cols`.",
+      "interaction": "the first specimen is panel tiles and takes no focus of its own; every tile in the second is one anchor, so Tab reaches three links and never anything inside one."
+    }
+  ]
+}

package/manifest/components/branch-picker.json

@@ -12,49 +12,71 @@
       "type": "number",
       "required": true,
       "defaultValue": null,
-      "description": "1-based position of the branch on show — what the readout prints."
+      "description": "1-based position of the branch on show — what the readout prints.",
+      "control": {
+        "kind": "number"
+      }
     },
     {
       "name": "count",
       "type": "number",
       "required": true,
       "defaultValue": null,
-      "description": "How many sibling branches exist. Below 2 the picker renders nothing."
+      "description": "How many sibling branches exist. Below 2 the picker renders nothing.",
+      "control": {
+        "kind": "number"
+      }
     },
     {
       "name": "onNavigate",
       "type": "(direction: BranchDirection) => void",
       "required": true,
       "defaultValue": null,
-      "description": "Called with the direction to move in. Never called past either end."
+      "description": "Called with the direction to move in. Never called past either end.",
+      "control": {
+        "kind": "callback",
+        "fixture": "callback.log"
+      }
     },
     {
       "name": "previousLabel",
       "type": "string",
       "required": false,
       "defaultValue": "Previous branch",
-      "description": "Accessible name of the previous button. Defaults to `\"Previous branch\"`."
+      "description": "Accessible name of the previous button. Defaults to `\"Previous branch\"`.",
+      "control": {
+        "kind": "string"
+      }
     },
     {
       "name": "nextLabel",
       "type": "string",
       "required": false,
       "defaultValue": "Next branch",
-      "description": "Accessible name of the next button. Defaults to `\"Next branch\"`."
+      "description": "Accessible name of the next button. Defaults to `\"Next branch\"`.",
+      "control": {
+        "kind": "string"
+      }
     },
     {
       "name": "disabled",
       "type": "boolean",
       "required": false,
       "defaultValue": null,
-      "description": "Block both buttons — a run is in flight and the runtime cannot switch mid-run."
+      "description": "Block both buttons — a run is in flight and the runtime cannot switch mid-run.",
+      "control": {
+        "kind": "boolean"
+      }
     },
     {
       "name": "aria-label",
       "type": "string",
       "required": false,
       "defaultValue": "Branches",
-      "description": "Accessible name for the group. Defaults to `\"Branches\"`."
+      "description": "Accessible name for the group. Defaults to `\"Branches\"`.",
+      "control": {
+        "kind": "string"
+      }
     }
   ],
   "typeReferences": [

package/manifest/components/breadcrumb.json

@@ -12,21 +12,31 @@
       "type": "readonly BreadcrumbItem[]",
       "required": true,
       "defaultValue": null,
-      "description": "The trail, root first. The last entry is the current page."
+      "description": "The trail, root first. The last entry is the current page.",
+      "control": {
+        "kind": "array"
+      }
     },
     {
       "name": "separator",
       "type": "ReactNode",
       "required": false,
       "defaultValue": "/",
-      "description": "What sits between crumbs. Defaults to `\"/\"`."
+      "description": "What sits between crumbs. Defaults to `\"/\"`.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
     },
     {
       "name": "label",
       "type": "string",
       "required": false,
       "defaultValue": "Breadcrumb",
-      "description": "The nav's accessible name. Defaults to `\"Breadcrumb\"`."
+      "description": "The nav's accessible name. Defaults to `\"Breadcrumb\"`.",
+      "control": {
+        "kind": "string"
+      }
     }
   ],
   "typeReferences": [

package/manifest/components/button-group.json

@@ -12,28 +12,45 @@
       "type": "\"horizontal\" | \"vertical\"",
       "required": false,
       "defaultValue": "horizontal",
-      "description": "Which way the children run. Defaults to `\"horizontal\"`."
+      "description": "Which way the children run. Defaults to `\"horizontal\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "horizontal",
+          "vertical"
+        ]
+      }
     },
     {
       "name": "attached",
       "type": "boolean",
       "required": false,
       "defaultValue": "true",
-      "description": "Join the children into one control (shared rims, outer corners only).\nDefaults to `true`; pass `false` for a merely-adjacent row of buttons that\nshould still be announced as one group."
+      "description": "Join the children into one control (shared rims, outer corners only).\nDefaults to `true`; pass `false` for a merely-adjacent row of buttons that\nshould still be announced as one group.",
+      "control": {
+        "kind": "boolean"
+      }
     },
     {
       "name": "aria-label",
       "type": "string",
       "required": false,
       "defaultValue": null,
-      "description": "Accessible name for the cluster. A group of buttons with no name is a group\nof buttons; with one it is \"Blend mode\"."
+      "description": "Accessible name for the cluster. A group of buttons with no name is a group\nof buttons; with one it is \"Blend mode\".",
+      "control": {
+        "kind": "string"
+      }
     },
     {
       "name": "children",
       "type": "ReactNode",
       "required": true,
       "defaultValue": null,
-      "description": "The buttons — {@link Button }, {@link IconButton } or anything button-shaped."
+      "description": "The buttons — {@link Button }, {@link IconButton } or anything button-shaped.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
     }
   ],
   "typeReferences": [

package/manifest/components/button.json

@@ -12,28 +12,65 @@
       "type": "RenderProp<Record<string, unknown>>",
       "required": false,
       "defaultValue": null,
-      "description": "Replace the rendered element (Base UI render prop). Accepts an element —\n`render={<a href=\"/x\" />}` — or a function returning one. When set, the\ndefault `type=\"button\"` is dropped so non-button elements stay valid."
+      "description": "Replace the rendered element (Base UI render prop). Accepts an element —\n`render={<a href=\"/x\" />}` — or a function returning one. When set, the\ndefault `type=\"button\"` is dropped so non-button elements stay valid.",
+      "control": {
+        "kind": "opaque"
+      }
     },
     {
       "name": "icon",
       "type": "ElementType<any, keyof IntrinsicElements>",
       "required": false,
       "defaultValue": null,
-      "description": "Optional leading icon component (e.g. a lucide icon). Rendered\n`aria-hidden` and sized to the density icon token, so it tracks the density\nlevel without the caller passing a pixel size."
+      "description": "Optional leading icon component (e.g. a lucide icon). Rendered\n`aria-hidden` and sized to the density icon token, so it tracks the density\nlevel without the caller passing a pixel size.",
+      "control": {
+        "kind": "opaque",
+        "fixture": "icon.play"
+      }
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "The label. A button with no children and no other accessible name is a\ncontrol a screen reader announces as nothing.\n\nDeclared explicitly, although `React.ComponentPropsWithoutRef<\"button\">`\nalready carries it, for the reason `Card.Header` and `Bento.Tile` declare\ntheirs: docgen documents a prop only where the library *declares* it, so\nwithout this line the manifest files no `children` for the system's most\nused control — the props table omits it, and a propSet cannot name it,\nwhich is how `/play/button` came to preview an unlabelled `<button>`.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
     },
     {
       "name": "size",
       "type": "\"sm\" | \"md\" | \"lg\"",
       "required": false,
       "defaultValue": "md",
-      "description": ""
+      "description": "",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
     },
     {
       "name": "variant",
       "type": "\"danger\" | \"ghost\" | \"secondary\" | \"primary\" | \"outline\" | \"danger-outline\"",
       "required": false,
       "defaultValue": "secondary",
-      "description": ""
+      "description": "",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "primary",
+          "secondary",
+          "ghost",
+          "outline",
+          "danger",
+          "danger-outline"
+        ]
+      }
     }
   ],
   "typeReferences": [

package/manifest/components/canvas-split-body.json

@@ -14,7 +14,10 @@
       "type": "boolean",
       "required": false,
       "defaultValue": null,
-      "description": "Trails a caret after the last line while the document is still being written."
+      "description": "Trails a caret after the last line while the document is still being written.",
+      "control": {
+        "kind": "boolean"
+      }
     }
   ],
   "typeReferences": [