@cueplusplus/ui 0.18.1 → 0.19.0

package/manifest/components/alert-dialog.json

@@ -171,7 +171,6 @@
     "--cue-control-sm",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -200,6 +199,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-dialog-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",

package/manifest/components/announcement-bar.json

@@ -0,0 +1,82 @@
+{
+  "name": "AnnouncementBar",
+  "slug": "announcement-bar",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "One line across the top of a page, and one link: a launch, a change, a date.\n\nFilled in the accent, centred, and as short as its line. It is not a\nnotification: it says the same thing to every reader and cannot be dismissed,\nso use `Toast` or `Alert` for anything that is about the reader.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "The one line.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    },
+    {
+      "name": "action",
+      "type": "AnnouncementBarAction",
+      "required": false,
+      "defaultValue": null,
+      "description": "One link, read as the bar's action.",
+      "control": {
+        "kind": "opaque"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.ComponentPropsWithoutRef<\"div\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent-fill",
+    "--cue-accent-fill-fg",
+    "--cue-space-2",
+    "--cue-space-3",
+    "--cue-space-5",
+    "--cue-text-ui"
+  ],
+  "summary": "One line across the top of a page, and one link: a launch, a change, a date.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<AnnouncementBar action={{ label: \"Learn more\", href: \"/changelog\" }}>Plans for teams are here.</AnnouncementBar>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/announcement-bar",
+  "mdUrl": "/docs/components/announcement-bar.md",
+  "jsonUrl": "/r/components/announcement-bar.json",
+  "whenToUse": [
+    "A product page's launch or pricing news, shown to every reader.",
+    "Above a `SiteNav`-style `AppBar` on a marketing page."
+  ],
+  "whenNotToUse": [
+    "Anything about the reader or their account. Use `Alert` or `Toast`.",
+    "Something the reader must dismiss or act on. This bar cannot be dismissed."
+  ],
+  "commonMistakes": [
+    "Putting more than one link in it. It is one line and one action."
+  ],
+  "specimens": [
+    {
+      "title": "AnnouncementBar",
+      "group": "chrome",
+      "components": [
+        "AnnouncementBar"
+      ],
+      "code": "<AnnouncementBar action={{ label: \"Read the release notes\", href: \"#\" }}>\n  The structural Looks are here.\n</AnnouncementBar>",
+      "note": "One line and one link, above the page's own chrome.",
+      "interaction": "the link is an ordinary anchor."
+    }
+  ]
+}

package/manifest/components/app-bar.json

@@ -87,8 +87,8 @@
           "name": "align",
           "type": "\"center\" | \"end\" | \"start\"",
           "required": false,
-          "defaultValue": "end",
-          "description": "Where the links sit when they are narrower than the space. Defaults to `\"end\"`.",
+          "defaultValue": null,
+          "description": "Where the links sit when they are narrower than the space. Omitted, the style\nset's `style-nav-align` decides, and without one it is `\"end\"`.",
           "control": {
             "kind": "enum",
             "members": [
@@ -290,6 +290,7 @@
     "--cue-style-chrome-rule-style",
     "--cue-style-focus-width",
     "--cue-style-hover-ink",
+    "--cue-style-nav-align",
     "--cue-style-nav-case",
     "--cue-style-nav-face",
     "--cue-style-nav-hover-ground",

package/manifest/components/app-shell.json

@@ -425,6 +425,9 @@
     "--cue-space-3",
     "--cue-space-4",
     "--cue-space-5",
+    "--cue-style-page-ground-image",
+    "--cue-style-page-ground-repeat",
+    "--cue-style-page-ground-tile",
     "--cue-surface-1",
     "--cue-text-label"
   ],

package/manifest/components/autocomplete.json

@@ -268,6 +268,7 @@
     "--cue-style-chip-size",
     "--cue-style-chip-tracking",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",

package/manifest/components/band.json

@@ -5,7 +5,7 @@
   "importPath": "@cueplusplus/ui",
   "peerDependencies": [],
   "clientOnly": false,
-  "description": "A full-bleed horizontal section: the page's rhythm, its separation, and a\ncolumn at the measure.\n\nThis is `Footer`'s recipe with the footer taken out of it — a `w-full`\nelement, a rule running edge to edge, and a centred `Container` inside so the\nline reaches the window while the words stop at the measure. `Footer` is\nbuilt on this rather than beside it; the recipe exists once.\n\nEvery dimension it spends belongs to the style axis, so the same markup\ncomposes differently under `[data-style]` without a prop changing: the\nvertical rhythm is `--cue-band-y` (one `--cue-space-7` with no set, doubled\nunder `editorial`, trebled under `marketing` and `graphite`), the column is\n`--cue-measure-prose` unless `width` names a fixed rung, and the rule and the\nground are `--cue-band-rule` and `--cue-band-ground`. Read `separation`'s own\ndocumentation before choosing one, because two of the four can come out to\nnothing and they do not vanish symmetrically: `--cue-band-ground` is\n`transparent` on `:root` and on every set but `marketing` and `kiln`, so a\n`\"ground\"` paints nothing on most pages, while `--cue-band-rule` is `0px`\nunder those two alone. Both are deliberate and nothing warns.\n\n**Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved\nat the element that declares it.** A `<Density>` island nested inside a\nstyled page moves every `--cue-space-*` and the band rhythm does **not**\nfollow it — the island inherits the rhythm already resolved above. Restate\nthe set on the island (`<Density density=\"compact\" styleSet=\"editorial\">`) to\nre-resolve it against that island's rung. Likewise a hand-stamped\n`[data-theme]` element under a marketing page paints the **outer** theme's\n`--cue-surface-1` through an already-resolved `--cue-band-ground`, and its\nrule in the outer theme's border. The library's own theme islands do not: a\nnested `ThemeProvider` that names a theme or a mode, and a `Preview` stage\nwith a theme, a mode or a pairing, restate the set in force beside it, so a\nband inside one paints that island's ground and rule.\n\nIt renders a `<section>`, which is not a landmark until it has an accessible\nname — so a band with a heading should carry `aria-labelledby` pointing at\nit, and a band without one costs the document nothing.\n\nStatic markup — no `\"use client\"`.",
+  "description": "A full-bleed horizontal section: the page's rhythm, its separation, and a\ncolumn at the measure.\n\nThis is `Footer`'s recipe with the footer taken out of it — a `w-full`\nelement, a rule running edge to edge, and a centred `Container` inside so the\nline reaches the window while the words stop at the measure. `Footer` is\nbuilt on this rather than beside it; the recipe exists once.\n\nEvery dimension it spends belongs to the style axis, so the same markup\ncomposes differently under `[data-style]` without a prop changing: the\nvertical rhythm is `--cue-band-y` (one `--cue-space-7` with no set, doubled\nunder `editorial`, trebled under `marketing` and `graphite`), the column is\n`--cue-measure-prose` unless `width` names a fixed rung, and the rule and the\nground are `--cue-band-rule` and `--cue-band-ground`. Read `separation`'s own\ndocumentation before choosing one, because two of the four can come out to\nnothing and they do not vanish symmetrically: `--cue-band-ground` is\n`transparent` on `:root` and on every set but `marketing` and `kiln`, so a\n`\"ground\"` paints nothing on most pages, while `--cue-band-rule` is `0px`\nunder those two and under `ledger` and `prism`, which separate bands by\nrhythm alone (and `prism`'s by a ground image, `style-band-ground-image`).\nBoth are deliberate and nothing warns.\n\n**Two substitution boundaries, because `--cue-band-y` is a `calc()` resolved\nat the element that declares it.** A `<Density>` island nested inside a\nstyled page moves every `--cue-space-*` and the band rhythm does **not**\nfollow it — the island inherits the rhythm already resolved above. Restate\nthe set on the island (`<Density density=\"compact\" styleSet=\"editorial\">`) to\nre-resolve it against that island's rung. Likewise a hand-stamped\n`[data-theme]` element under a marketing page paints the **outer** theme's\n`--cue-surface-1` through an already-resolved `--cue-band-ground`, and its\nrule in the outer theme's border. The library's own theme islands do not: a\nnested `ThemeProvider` that names a theme or a mode, and a `Preview` stage\nwith a theme, a mode or a pairing, restate the set in force beside it, so a\nband inside one paints that island's ground and rule.\n\nIt renders a `<section>`, which is not a landmark until it has an accessible\nname — so a band with a heading should carry `aria-labelledby` pointing at\nit, and a band without one costs the document nothing.\n\nStatic markup — no `\"use client\"`.",
   "props": [
     {
       "name": "separation",
@@ -85,6 +85,7 @@
     "--cue-paint-texture-blend",
     "--cue-paint-texture-opacity",
     "--cue-paint-texture-size",
+    "--cue-style-band-ground-image",
     "--cue-style-band-width"
   ],
   "summary": "A full-bleed horizontal section: a rule to the window's edge, a column at the measure.",

package/manifest/components/bento.json

@@ -27,9 +27,9 @@
           "control": {
             "kind": "enum",
             "members": [
-              4,
               2,
-              3
+              3,
+              4
             ],
             "min": 2,
             "max": 4
@@ -37,17 +37,17 @@
         },
         {
           "name": "rows",
-          "type": "4 | 1 | 2 | 3",
+          "type": "1 | 4 | 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
+              3,
+              4
             ],
             "min": 1,
             "max": 4
@@ -65,7 +65,7 @@
         },
         {
           "name": "gap",
-          "type": "0 | 4 | 8 | 1 | 2 | 3 | 5 | 6 | 7",
+          "type": "0 | 1 | 4 | 8 | 2 | 3 | 5 | 6 | 7",
           "required": false,
           "defaultValue": "4",
           "description": "Which rung of the density space ladder to spend between tiles. Defaults to `4`.",
@@ -73,14 +73,14 @@
             "kind": "enum",
             "members": [
               0,
-              4,
-              8,
               1,
               2,
               3,
+              4,
               5,
               6,
-              7
+              7,
+              8
             ],
             "min": 0,
             "max": 8
@@ -109,17 +109,17 @@
       "props": [
         {
           "name": "span",
-          "type": "4 | 1 | 2 | 3",
+          "type": "1 | 4 | 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
+              3,
+              4
             ],
             "min": 1,
             "max": 4

package/manifest/components/button.json

@@ -150,6 +150,7 @@
     "--cue-style-outline-edge",
     "--cue-style-outline-hover-edge",
     "--cue-style-outline-hover-ground",
+    "--cue-style-primary-fill",
     "--cue-style-quiet-ink",
     "--cue-style-secondary-edge",
     "--cue-style-secondary-ground",

package/manifest/components/channel-matrix.json

@@ -224,6 +224,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-focus-width",
     "--cue-style-group-label-ink",

package/manifest/components/chart-tooltip-content.json

@@ -125,6 +125,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",
     "--cue-style-group-label-pad",

package/manifest/components/checkbox-group.json

@@ -36,7 +36,6 @@
     "--cue-danger-fg",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
@@ -60,6 +59,7 @@
     "--cue-style-choice-gap",
     "--cue-style-control-face",
     "--cue-style-control-label-leading",
+    "--cue-style-control-radius",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",

package/manifest/components/checkbox.json

@@ -61,7 +61,6 @@
     "--cue-danger-fg",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-focus",
     "--cue-focus-ring",
     "--cue-font-mono",
@@ -85,6 +84,7 @@
     "--cue-style-choice-gap",
     "--cue-style-control-face",
     "--cue-style-control-label-leading",
+    "--cue-style-control-radius",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",
     "--cue-style-disabled-ink",

package/manifest/components/chip.json

@@ -134,6 +134,7 @@
     "--cue-style-chip-radius",
     "--cue-style-chip-size",
     "--cue-style-chip-tracking",
+    "--cue-style-control-radius",
     "--cue-style-focus-width",
     "--cue-style-label-case",
     "--cue-style-label-face",

package/manifest/components/combobox.json

@@ -271,6 +271,7 @@
     "--cue-style-chip-size",
     "--cue-style-chip-tracking",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-disabled-edge",
     "--cue-style-disabled-fill",

package/manifest/components/command-palette.json

@@ -187,6 +187,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-control-step-size",
     "--cue-style-dialog-radius",
     "--cue-style-display-variation",

package/manifest/components/context-menu.json

@@ -92,7 +92,6 @@
     "--cue-control-sm",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -119,6 +118,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",
     "--cue-style-group-label-pad",

package/manifest/components/density.json

@@ -48,13 +48,14 @@
     },
     {
       "name": "styleSet",
-      "type": "\"console\" | \"editorial\" | \"marketing\" | \"graphite\" | \"tender\" | \"zine\" | \"kiln\" | \"porcelain\"",
+      "type": "\"command\" | \"console\" | \"editorial\" | \"marketing\" | \"graphite\" | \"tender\" | \"zine\" | \"kiln\" | \"porcelain\" | \"ledger\" | \"monolith\" | \"prism\"",
       "required": false,
       "defaultValue": null,
       "description": "A style set for this subtree: `console`, `editorial`, `marketing` or\n`graphite`.\n\nOptional, and **absent means inherit** — an island that names none stamps no\n`data-style` and passes the ambient set straight through, exactly as a bare\n`<Density>` does today. Naming one is what makes this the library's island\nform of the fourth axis, and there are two reasons to reach for it:\n\n- `console` inside a page that is not console. That is the whole job of the\n  default set: it restates the `:root` defaults, so a subtree stamped with\n  it renders the ordinary look inside a page under any other set.\n- Moving the band rhythm with the rung. `--cue-band-y` is\n  `calc(var(--cue-space-7) * 2)` declared on the `[data-style]` element, and\n  a custom property's `var()` references are substituted where they are\n  declared — so a nested density island moves `--cue-space-*` but inherits\n  the rhythm already resolved above it. Restating the set here re-resolves\n  it against this island's rung, which is how a denser island gets a\n  proportionally tighter band instead of the outer one's.\n\nThe library restates the set for you where an island changes what a set's\nvalues read besides the rung — the theme's inks, the pairing's faces: a\nnested `ThemeProvider` that names a theme or a mode, and a `Preview` stage\nwith a theme, a mode or a pairing, stamp the set and the pack in force\nbeside it. This island changes only the rung, so it does not, and the\nrhythm above stays the opt-in the second bullet describes.",
       "control": {
         "kind": "enum",
         "members": [
+          "command",
           "console",
           "editorial",
           "marketing",
@@ -62,7 +63,10 @@
           "tender",
           "zine",
           "kiln",
-          "porcelain"
+          "porcelain",
+          "ledger",
+          "monolith",
+          "prism"
         ]
       }
     },

package/manifest/components/dialog.json

@@ -166,7 +166,6 @@
     "--cue-control-sm",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -195,6 +194,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-dialog-pad",
     "--cue-style-dialog-radius",
     "--cue-style-display-variation",

package/manifest/components/dmx-bar.json

@@ -64,7 +64,6 @@
     "--cue-data-ground",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -91,6 +90,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",
     "--cue-style-group-label-pad",

package/manifest/components/dmx-strip.json

@@ -74,7 +74,6 @@
     "--cue-data-ground",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -101,6 +100,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",
     "--cue-style-group-label-pad",

package/manifest/components/drawer.json

@@ -160,7 +160,6 @@
     "--cue-control-sm",
     "--cue-fg",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-leading-ui",
     "--cue-paint-rim-width",
@@ -189,6 +188,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-dialog-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",

package/manifest/components/dropdown-menu.json

@@ -248,6 +248,7 @@
     "--cue-style-body-size",
     "--cue-style-body-weight",
     "--cue-style-control-face",
+    "--cue-style-control-radius",
     "--cue-style-display-variation",
     "--cue-style-group-label-ink",
     "--cue-style-group-label-pad",

package/manifest/components/font-scope.json

@@ -0,0 +1,81 @@
+{
+  "name": "FontScope",
+  "slug": "font-scope",
+  "group": "system",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A subtree set in another type pairing — and everything it opens with it.\n\n`ThemeProvider`'s `font` is root-level only: the pairing has no island, and a\nnested provider forwards it to the root. `data-font` on a `<div>` is enough\nfor the subtree's own tokens, and nothing more: a dialog or menu opened inside\nit mounts on `<body>`, stamped from the root's pairing, and unclassed text\nkeeps the family `<body>` computed, because a computed family does not follow\na token. `FontScope` does all three: it stamps `data-font`, asks for the\nfamily again on its own element, and republishes the pairing so every portal\nopened inside it is stamped with it and asks for the family too. It is what\n`Preview` does for a stage that names a pairing, as a component of its own.\n\nIt never calls `setFont`, so the root's pairing — and the visitor's stored\none — never moves. A gallery frame that draws a page in a Look of its own is\nthe case it exists for (structural Looks, spec 2026-10-02 §6.2).\n\nThe set and pack in force around it are restated beside `data-font`, once it\nmay restate, because their names read the pairing and a custom property's\n`var()`s are substituted where it is declared.",
+  "props": [
+    {
+      "name": "font",
+      "type": "\"source\" | \"system\" | \"geist\" | \"geist-mono\" | \"inter\" | \"plex\" | \"roboto\" | \"apple\" | \"office\" | \"inter-source\" | \"dm\" | \"calsans\" | \"fraunces-mono\"",
+      "required": true,
+      "defaultValue": null,
+      "description": "The pairing this subtree is set in.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "source",
+          "system",
+          "geist",
+          "geist-mono",
+          "inter",
+          "plex",
+          "roboto",
+          "apple",
+          "office",
+          "inter-source",
+          "dm",
+          "calsans",
+          "fraunces-mono"
+        ]
+      }
+    },
+    {
+      "name": "children",
+      "type": "ReactNode",
+      "required": true,
+      "defaultValue": null,
+      "description": "What is set in it. Every overlay opened inside it is set in it too.",
+      "control": {
+        "kind": "node",
+        "fixture": "children.text"
+      }
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-font-sans"
+  ],
+  "summary": "A subtree set in another type pairing, and every dialog or menu it opens with it, without moving the root's.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<FontScope font=\"inter-source\">\n  <Dialog.Root>…</Dialog.Root>\n</FontScope>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/font-scope",
+  "mdUrl": "/docs/components/font-scope.md",
+  "jsonUrl": "/r/components/font-scope.json",
+  "whenToUse": [
+    "A frame or specimen that draws a page in a Look of its own, where the pairing has to reach its overlays too.",
+    "A picker row or a comparison that shows one pairing beside the page's."
+  ],
+  "whenNotToUse": [
+    "Changing the page's own pairing. That is `ThemeProvider`'s `font`, at the root, or its `setFont`.",
+    "A heading in another face. A class on the element is enough; a scope re-sets everything under it."
+  ],
+  "commonMistakes": [
+    "Stamping `data-font` on a `<div>` and expecting a dialog opened inside it to follow. The dialog mounts on `<body>`; only the scope carries the pairing to it.",
+    "Passing `font` to a nested `ThemeProvider`. The pairing is root-level there, and a nested provider forwards it to the root."
+  ]
+}

package/manifest/components/footer.json

@@ -69,7 +69,6 @@
     "--cue-band-y",
     "--cue-border",
     "--cue-fg-muted",
-    "--cue-fg-subtle",
     "--cue-font-mono",
     "--cue-space-3",
     "--cue-space-5",

package/manifest/components/gloss-object.json

@@ -0,0 +1,81 @@
+{
+  "name": "GlossObject",
+  "slug": "gloss-object",
+  "group": "brand",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A glossy, iridescent object for a marketing hero — the chrome-ring and gloss\nlettermark look (spec 2026-10-02 §3.4). Drawn with layered radial and linear\ngradients of the theme's accent against the foreground's mix, plus a specular\nhighlight in the accent's own ink (`--cue-accent-fg`), so it is the Look's own colour and never a copied render.\nDecorative: hidden from assistive technology.\n\nStatic markup — no `\"use client\"`.",
+  "props": [
+    {
+      "name": "shape",
+      "type": "\"mark\" | \"torus\" | \"knot\"",
+      "required": false,
+      "defaultValue": "torus",
+      "description": "The object: a ring, a knot of two rings, or a rounded mark. Defaults to `\"torus\"`.",
+      "control": {
+        "kind": "enum",
+        "members": [
+          "mark",
+          "torus",
+          "knot"
+        ]
+      }
+    },
+    {
+      "name": "seed",
+      "type": "number",
+      "required": false,
+      "defaultValue": "1",
+      "description": "Tilts the highlight. Defaults to `1`.",
+      "control": {
+        "kind": "number"
+      }
+    }
+  ],
+  "typeReferences": [
+    "React.SVGProps<SVGSVGElement>"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-fg"
+  ],
+  "summary": "A glossy, iridescent object — a ring, two rings or a rounded mark — in the theme's accent.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<GlossObject shape=\"knot\" className=\"h-48 w-48\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/gloss-object",
+  "mdUrl": "/docs/components/gloss-object.md",
+  "jsonUrl": "/r/components/gloss-object.json",
+  "whenToUse": [
+    "A marketing hero's centrepiece, or art between sections."
+  ],
+  "whenNotToUse": [
+    "Icons or small UI marks. It is a hero-scale decoration."
+  ],
+  "commonMistakes": [
+    "Expecting a 3D render. It is layered gradients, drawn in the Look's own colour."
+  ],
+  "specimens": [
+    {
+      "title": "GlossObject",
+      "group": "brand",
+      "components": [
+        "GlossObject"
+      ],
+      "code": "<Specimens>\n  {([\"torus\", \"knot\", \"mark\"] as const).map((shape) => (\n    <Specimen key={shape} label={shape}>\n      <GlossObject shape={shape} className=\"size-40\" />\n    </Specimen>\n  ))}\n</Specimens>",
+      "note": "A glossy object of layered gradients over an authored outline, lit in the accent.",
+      "interaction": "none."
+    }
+  ]
+}