@wizeworks/silicaui-mcp 0.44.0 → 0.46.0

package/README.md

@@ -99,14 +99,16 @@ Pass `package` to get just one.
 | `list_components({ package? })` | Component names + categories across all three paths, optionally filtered to one package. |
 | `get_component({ name, package? })` | A component's real shape on each path: CSS root class + classes + color variants, React props (from source) + a real usage example, or the `-html` macro and its behaviors. |
 | `list_classes({ component? })` | Exact, literal CSS class names — extracted from the actual class generators. |
-| `get_tokens()` | Semantic color list, light/dark values, typography tokens. |
+| `get_tokens()` | Semantic color list, the default theme's light/dark values, scalar + typography tokens, how to register extra color roles, and the `data-theme` mechanism those values are activated by. |
+| `list_themes()` | Every shipped theme preset (what it's for, its faces and shape) plus the `data-theme` mechanism itself — how a theme is applied, how dark mode works, and how a section opts into its own palette by nesting the attribute. |
+| `get_theme({ name, mode? })` | One theme's fully resolved token map — dark deltas merged, `-content` inks derived — with the exact attribute to write. |
 | `list_blocks({ category?, tag? })` | Composed page blocks (hero, FAQ, feature grid, …), summary only. |
 | `get_block({ key })` | One block's full node tree. |
 | `list_behaviors()` / `get_behavior({ type })` | The `data-sui-*` interactive-behavior contract. |
 | `get_node_schema({ section? })` | Path 3's document schema (`@wizeworks/silicaui-html`): the four node kinds, the typed system-metadata band, the data-binding vocabulary, the host resolution contract, and the tag/attribute allowlist `toHtml` enforces. |
 | `list_email_nodes()` | The email builder's closed node schema (`@wizeworks/silicaui-builder/email`): every kind, what it may hold, what may hold it, the insertable presets, and the document envelope. |
 | `get_email_node({ kind })` | One email node kind's real typed fields (with source docs) and its data-binding contract — which `attr` a bind may target. |
-| `search_docs({ query })` | Free-text search across components, blocks, behaviors, classes, tokens, node-tree bindings and allowed tags, and email node kinds. |
+| `search_docs({ query })` | Free-text search across components, blocks, behaviors, classes, tokens, themes, node-tree bindings and allowed tags, and email node kinds. |
 
 ## A note on versioning
 

package/dist/data/classes.json

@@ -958,7 +958,12 @@
     "stack",
     "stack-bottom",
     "stack-end",
-    "stack-start"
+    "stack-lg",
+    "stack-md",
+    "stack-sm",
+    "stack-start",
+    "stack-xl",
+    "stack-xs"
   ],
   "stat": [
     "stat",

package/dist/data/components.json

@@ -6358,6 +6358,12 @@
             "optional": false,
             "type": "React.ReactNode",
             "doc": ""
+          },
+          {
+            "name": "popupProps",
+            "optional": true,
+            "type": "Omit<AlertDialogContentProps, \"children\"> & {\n    [key: `data-${string}`]: unknown;\n  }",
+            "doc": "Props for the portalled `AlertDialogContent` — chiefly `data-theme`. The popup portals to `document.body`, which is OUTSIDE any `[data-theme]` island the provider sits in, so a confirm raised from inside a themed region (an editor shell, a pane, a dark section) would otherwise resolve its tokens against the page instead of that region: <ImperativeAlertDialogProvider popupProps={{ \"data-theme\": \"studio\" }}> `data-*` keys are spelled out in the type because this is an object literal, not a JSX attribute list — TypeScript waives excess-property checks for hyphenated names only in JSX position."
           }
         ]
       }
@@ -6972,7 +6978,7 @@
     "package": "@wizeworks/silicaui-react",
     "category": "Layout",
     "sourceFile": "silicaui-react/src/stack.tsx",
-    "description": "Silica Stack — layers its children into a peeking deck (first child on top). With `interactive`, clicking (or Enter/Space) cycles the front card to the back so you can flip through the deck; the re-stack animates. <Stack interactive> <Card className=\"bg-primary text-primary-content\"><CardBody>1</CardBody></Card> <Card className=\"bg-secondary text-secondary-content\"><CardBody>2</CardBody></Card> <Card className=\"bg-accent text-accent-content\"><CardBody>3</CardBody></Card> </Stack>",
+    "description": "Silica Stack — layers its children into a peeking deck (first child on top). With `interactive`, clicking (or Enter/Space) cycles the front card to the back so you can flip through the deck; the re-stack animates. Children stretch to the deck's WIDTH but keep their own height, so size the deck's width here and each card's height on the card: <Stack interactive className=\"w-48\"> <Card className=\"h-32 bg-primary text-primary-content\"><CardBody>1</CardBody></Card> <Card className=\"h-32 bg-secondary text-secondary-content\"><CardBody>2</CardBody></Card> <Card className=\"h-32 bg-accent text-accent-content\"><CardBody>3</CardBody></Card> </Stack>",
     "props": [
       {
         "name": "StackProps",
@@ -6984,6 +6990,12 @@
             "type": "StackPeek",
             "doc": "Which way the deck peeks. `top` (default), `bottom`, `start`, or `end`."
           },
+          {
+            "name": "size",
+            "optional": true,
+            "type": "SilicaSize",
+            "doc": "How far the deck fans, as a share of the card's own size — `xs` (2%) through `xl` (9%), default `md` (5%). It scales with the card, so one value reads the same on a 128px thumbnail and a 600px hero card. For a distance off this ramp, set the property directly: `className=\"[--stack-peek:4%]\"` (any length works, including `12px`)."
+          },
           {
             "name": "interactive",
             "optional": true,
@@ -6993,7 +7005,7 @@
         ]
       }
     ],
-    "usageExample": "import { Stack, Card, CardBody } from \"@wizeworks/silicaui-react\";\r\nimport { Section } from \"../lib/Section\";\r\n\r\nconst CARDS = [\r\n    { label: \"1\", color: \"primary\" },\r\n    { label: \"2\", color: \"secondary\" },\r\n    { label: \"3\", color: \"accent\" },\r\n];\r\n\r\nexport function StackDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · interactive peeking deck (click to cycle)\">\r\n                <Stack interactive className=\"h-32 w-48\">\r\n                    {CARDS.map((c) => (\r\n                        <Card\r\n                            key={c.label}\r\n                            style={{\r\n                                backgroundColor: `var(--color-${c.color})`,\r\n                                color: `var(--color-${c.color}-content, #fff)`,\r\n                            }}\r\n                        >\r\n                            <CardBody className=\"items-center justify-center text-2xl font-bold\">\r\n                                {c.label}\r\n                            </CardBody>\r\n                        </Card>\r\n                    ))}\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Peek direction\">\r\n                <div className=\"flex gap-8\">\r\n                    {([\"top\", \"bottom\", \"start\", \"end\"] as const).map((peek) => (\r\n                        <Stack key={peek} peek={peek} className=\"h-20 w-28\">\r\n                            {CARDS.map((c) => (\r\n                                <Card\r\n                                    key={c.label}\r\n                                    style={{\r\n                                        backgroundColor: `var(--color-${c.color})`,\r\n                                        color: `var(--color-${c.color}-content, #fff)`,\r\n                                    }}\r\n                                >\r\n                                    <CardBody className=\"items-center justify-center text-sm\">\r\n                                        {peek}\r\n                                    </CardBody>\r\n                                </Card>\r\n                            ))}\r\n                        </Stack>\r\n                    ))}\r\n                </div>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
+    "usageExample": "import { Stack, Card, CardBody } from \"@wizeworks/silicaui-react\";\nimport type { SilicaSize } from \"@wizeworks/silicaui-react\";\nimport { Section, LabeledRow } from \"../lib/Section\";\n\nconst CARDS = [\n    { label: \"1\", tone: \"bg-primary text-primary-content\" },\n    { label: \"2\", tone: \"bg-secondary text-secondary-content\" },\n    { label: \"3\", tone: \"bg-accent text-accent-content\" },\n];\n\n/**\n * The deck's three cards. A `stack` stretches its children to its own WIDTH but\n * leaves their height to them, so the height class goes here on the card — not\n * on the `<Stack>`, where it would size an empty box around content-height\n * cards and make the fan look far smaller than asked for.\n */\nfunction Deck({ card, body }: { card: string; body: string }) {\n    return (\n        <>\n            {CARDS.map((c) => (\n                <Card key={c.label} className={`${c.tone} ${card}`}>\n                    <CardBody className={`items-center justify-center ${body}`}>\n                        {c.label}\n                    </CardBody>\n                </Card>\n            ))}\n        </>\n    );\n}\n\nexport function StackDemo() {\n    return (\n        <>\n            <Section title=\"Real use · interactive peeking deck (click to cycle)\">\n                <Stack interactive className=\"w-48\" data-demo=\"interactive\">\n                    <Deck card=\"h-32\" body=\"text-2xl font-bold\" />\n                </Stack>\n            </Section>\n\n            <Section title=\"Peek direction\">\n                <div className=\"flex gap-8\">\n                    {([\"top\", \"bottom\", \"start\", \"end\"] as const).map((peek) => (\n                        <Stack\n                            key={peek}\n                            peek={peek}\n                            className=\"w-28\"\n                            data-demo={`dir-${peek}`}\n                        >\n                            <Deck card=\"h-20\" body=\"text-sm\" />\n                        </Stack>\n                    ))}\n                </div>\n            </Section>\n\n            <Section title=\"Fan distance\">\n                <div className=\"flex flex-wrap items-end gap-8\">\n                    {([\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as SilicaSize[]).map((size) => (\n                        <LabeledRow key={size} label={size}>\n                            <Stack\n                                size={size}\n                                className=\"w-32\"\n                                data-demo={`size-${size}`}\n                            >\n                                <Deck card=\"h-24\" body=\"text-sm\" />\n                            </Stack>\n                        </LabeledRow>\n                    ))}\n                </div>\n            </Section>\n\n            {/*\n              The peek is a share of the card's own size, so it survives a real\n              content-height card. Fixed-distance nudges did not: the shrink from\n              `scale()` out-ran them and the deck collapsed to a single card above\n              ~320px. Keep a large specimen here so that cannot come back\n              unnoticed — e2e/stack-peek.spec.ts measures exactly these two.\n            */}\n            <Section title=\"Large cards · the peek scales with the card\">\n                <div className=\"flex flex-wrap items-end gap-10\">\n                    <LabeledRow label=\"480 × 448\">\n                        <Stack className=\"w-[480px]\" data-demo=\"large\">\n                            <Deck card=\"h-[448px]\" body=\"text-4xl\" />\n                        </Stack>\n                    </LabeledRow>\n                    <LabeledRow label=\"480 × 448 · [--stack-peek:4%]\">\n                        <Stack\n                            className=\"w-[480px] [--stack-peek:4%]\"\n                            data-demo=\"large-tuned\"\n                        >\n                            <Deck card=\"h-[448px]\" body=\"text-4xl\" />\n                        </Stack>\n                    </LabeledRow>\n                </div>\n            </Section>\n        </>\n    );\n}"
   },
   {
     "name": "Collapsible",
@@ -10947,7 +10959,7 @@
     "package": "@wizeworks/silicaui",
     "category": "css",
     "sourceFile": "silicaui/src/components/animations.js",
-    "description": "Assignable element animations — presets an end user (via a site builder) can apply to ANY element, generated from one preset table so the three trigger class families always stay in sync: .sui-animate-{preset} — ON LOAD: a `@keyframes` animation that plays automatically on paint. No JS, no attribute. .sui-reveal-{preset} — ON SCROLL: sits at its hidden state by default, transitions to visible once `[data-sui-inview]` lands on the element (set by the `reveal` behavior in @wizeworks/@wizeworks/silicaui-behaviors) — the same idiom Dialog/Popover already use for `[data-starting-style]`/`[data-ending-style]`, just driven by our own attribute. .sui-hover-{preset} — HOVER: a plain `:hover`/`:focus-visible` transition. No JS. Naming is deliberately `sui-`, not `animate-`: Tailwind core already ships `animate-spin`/`animate-pulse`/etc, and this package's own keyframes (`silica-spin`, `silica-skeleton`, …) already sidestep that collision by never exposing a bare `.animate-*` class. `sui-` also mirrors the existing `data-sui-*` marker namespace used by behaviors. Speed/delay are separate modifier classes (`.sui-duration-*`, `.sui-delay-*`) that set the `--sui-motion-duration`/`--sui-motion-delay` custom properties a preset reads, each with a `var(--duration-fast, …)` -style fallback — same non-namespace-token convention as `--duration`/ `--ease` (see theme.js): the DEFAULT lives in the fallback, so an app's own `--duration-fast` override always wins regardless of layer ordering. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
+    "description": "Assignable element animations — presets an end user (via a site builder) can apply to ANY element, generated from one preset table so the three trigger class families always stay in sync: .sui-animate-{preset} — ON LOAD: a `@keyframes` animation that plays automatically on paint. No JS, no attribute. .sui-reveal-{preset} — ON SCROLL: sits at its hidden state by default, transitions to visible once `[data-sui-inview]` lands on the element (set by the `reveal` behavior in @wizeworks/silicaui-behaviors) — the same idiom Dialog/Popover already use for `[data-starting-style]`/`[data-ending-style]`, just driven by our own attribute. .sui-hover-{preset} — HOVER: a plain `:hover`/`:focus-visible` transition. No JS. Naming is deliberately `sui-`, not `animate-`: Tailwind core already ships `animate-spin`/`animate-pulse`/etc, and this package's own keyframes (`silica-spin`, `silica-skeleton`, …) already sidestep that collision by never exposing a bare `.animate-*` class. `sui-` also mirrors the existing `data-sui-*` marker namespace used by behaviors. Speed/delay are separate modifier classes (`.sui-duration-*`, `.sui-delay-*`) that set the `--sui-motion-duration`/`--sui-motion-delay` custom properties a preset reads, each with a `var(--duration-fast, …)` -style fallback — same non-namespace-token convention as `--duration`/ `--ease` (see theme.js): the DEFAULT lives in the fallback, so an app's own `--duration-fast` override always wins regardless of layer ordering. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
     "root": null,
     "familyPrefix": "sui-",
     "rootNote": "No bare `.sui` class exists — this family is only its `sui-*` parts.",
@@ -11255,7 +11267,7 @@
     "package": "@wizeworks/silicaui",
     "category": "wrapper",
     "sourceFile": "silicaui/src/components/chart.js",
-    "description": "Chart container — the box an ECharts canvas/SVG renders into. The actual chart theming is done in JS (the `@wizeworks/@wizeworks/silicaui-charts` package reads the live color tokens and hands ECharts a matching theme); this class only owns the container so ECharts has a sized, block-level box to measure. Colorless. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
+    "description": "Chart container — the box an ECharts canvas/SVG renders into. The actual chart theming is done in JS (the `@wizeworks/silicaui-charts` package reads the live color tokens and hands ECharts a matching theme); this class only owns the container so ECharts has a sized, block-level box to measure. Colorless. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
     "root": "chart",
     "classes": [
       "chart"
@@ -11512,7 +11524,7 @@
     "package": "@wizeworks/silicaui",
     "category": "wrapper",
     "sourceFile": "silicaui/src/components/data-table.js",
-    "description": "DataTable chrome — the interactive shell around a `.table`. The base `.table` still styles the cells (this module deliberately does NOT restyle `th`/`td`); `.data-table` only adds what a data grid needs on top: a bordered scroll container, sortable-header buttons with a caret that lights up per sort direction, a selected-row tint, a sticky header, skeleton/empty bodies, and a pagination toolbar. The React `<DataTable>` (in the optional `@wizeworks/@wizeworks/silicaui-table` package) drives TanStack Table and hangs these classes on the markup. Colored: a `.data-table-<name>` class only sets `--dt-accent`, which the sort hover + selected-row tint read — so the accent is orthogonal to everything else, same as the rest of Silica. @param {string[]} colors - color names to generate `.data-table-<name>` for @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
+    "description": "DataTable chrome — the interactive shell around a `.table`. The base `.table` still styles the cells (this module deliberately does NOT restyle `th`/`td`); `.data-table` only adds what a data grid needs on top: a bordered scroll container, sortable-header buttons with a caret that lights up per sort direction, a selected-row tint, a sticky header, skeleton/empty bodies, and a pagination toolbar. The React `<DataTable>` (in the optional `@wizeworks/silicaui-table` package) drives TanStack Table and hangs these classes on the markup. Colored: a `.data-table-<name>` class only sets `--dt-accent`, which the sort hover + selected-row tint read — so the accent is orthogonal to everything else, same as the rest of Silica. @param {string[]} colors - color names to generate `.data-table-<name>` for @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
     "root": "data-table",
     "classes": [
       "data-table",
@@ -12708,7 +12720,7 @@
     "package": "@wizeworks/silicaui",
     "category": "wrapper",
     "sourceFile": "silicaui/src/components/resizable-panels.js",
-    "description": "ResizablePanels chrome — the visual surface for react-resizable-panels. react-resizable-panels owns the layout + drag math (it sets flex direction, panel sizes, and the handle's `data-resize-handle-state`); this styles the bordered group frame and the resize handle (a thin bar with a centered grip that lights up on hover/drag). Orientation comes from the group's `data-panel-group-direction`, so one rule set covers both axes. The React wrappers (in the optional `@wizeworks/@wizeworks/silicaui-panels` package) hang these classes on the library's components. Colorless: the hovered/dragged handle + grip read `--color-primary`. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
+    "description": "ResizablePanels chrome — the visual surface for react-resizable-panels. react-resizable-panels owns the layout + drag math (it sets flex direction, panel sizes, and the handle's `data-resize-handle-state`); this styles the bordered group frame and the resize handle (a thin bar with a centered grip that lights up on hover/drag). Orientation comes from the group's `data-panel-group-direction`, so one rule set covers both axes. The React wrappers (in the optional `@wizeworks/silicaui-panels` package) hang these classes on the library's components. Colorless: the hovered/dragged handle + grip read `--color-primary`. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
     "root": null,
     "familyPrefix": "resizable-",
     "rootNote": "No bare `.resizable` class exists — this family is only its `resizable-*` parts.",
@@ -12732,7 +12744,7 @@
     "package": "@wizeworks/silicaui",
     "category": "wrapper",
     "sourceFile": "silicaui/src/components/rich-text-editor.js",
-    "description": "RichTextEditor chrome — the visual shell around a TipTap editor. TipTap (ProseMirror) owns all editing behavior; this styles the frame: a bordered box, a wrapping toolbar of toggle buttons (active state reads `--color-primary`), and the editable content surface (`.ProseMirror`) with sensible prose typography + a placeholder. The React `<RichTextEditor>` (in the optional `@wizeworks/@wizeworks/silicaui-editor` package) drives TipTap and hangs these classes on the markup. Colorless: the active/pressed toolbar button reads `--color-primary`, same orthogonal-accent approach as the rest of Silica. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
+    "description": "RichTextEditor chrome — the visual shell around a TipTap editor. TipTap (ProseMirror) owns all editing behavior; this styles the frame: a bordered box, a wrapping toolbar of toggle buttons (active state reads `--color-primary`), and the editable content surface (`.ProseMirror`) with sensible prose typography + a placeholder. The React `<RichTextEditor>` (in the optional `@wizeworks/silicaui-editor` package) drives TipTap and hangs these classes on the markup. Colorless: the active/pressed toolbar button reads `--color-primary`, same orthogonal-accent approach as the rest of Silica. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
     "root": "rich-text-editor",
     "classes": [
       "ProseMirror",
@@ -12893,7 +12905,7 @@
     "package": "@wizeworks/silicaui",
     "category": "Data input",
     "sourceFile": "silicaui/src/components/selection-list.js",
-    "description": "The SelectionList component — a selectable list of rows (single- or multi-select), each with a leading Checkbox/Radio indicator. Colorless: the selected row reads `--color-primary` for its tint, matching `tree-view.js`'s convention. The indicator itself is a real `.checkbox`/ `.radio` element (@wizeworks/@wizeworks/silicaui-react reuses those components directly), so this module only styles the row/label/description chrome around it. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
+    "description": "The SelectionList component — a selectable list of rows (single- or multi-select), each with a leading Checkbox/Radio indicator. Colorless: the selected row reads `--color-primary` for its tint, matching `tree-view.js`'s convention. The indicator itself is a real `.checkbox`/ `.radio` element (@wizeworks/silicaui-react reuses those components directly), so this module only styles the row/label/description chrome around it. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
     "root": "selection-list",
     "classes": [
       "selection-list",
@@ -13030,7 +13042,7 @@
     "package": "@wizeworks/silicaui",
     "category": "wrapper",
     "sourceFile": "silicaui/src/components/sortable-list.js",
-    "description": "SortableList chrome — the visual surface for a dnd-kit reorderable list. dnd-kit owns the drag behavior (sensors, collision, keyboard, transforms); this styles the list rows and the drag handle, plus the lifted look while a row is being dragged (`[data-dragging]`). The React `<SortableList>` (in the optional `@wizeworks/@wizeworks/silicaui-dnd` package) drives dnd-kit and hangs these classes on the markup; `transform`/`transition` are applied inline by dnd-kit, so this module deliberately doesn't set them. Colorless: the dragged row's border reads `--color-primary`. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
+    "description": "SortableList chrome — the visual surface for a dnd-kit reorderable list. dnd-kit owns the drag behavior (sensors, collision, keyboard, transforms); this styles the list rows and the drag handle, plus the lifted look while a row is being dragged (`[data-dragging]`). The React `<SortableList>` (in the optional `@wizeworks/silicaui-dnd` package) drives dnd-kit and hangs these classes on the markup; `transform`/`transition` are applied inline by dnd-kit, so this module deliberately doesn't set them. Colorless: the dragged row's border reads `--color-primary`. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
     "root": null,
     "familyPrefix": "sortable-",
     "rootNote": "No bare `.sortable` class exists — this family is only its `sortable-*` parts.",
@@ -13049,13 +13061,18 @@
     "package": "@wizeworks/silicaui",
     "category": "Layout",
     "sourceFile": "silicaui/src/components/stack.js",
-    "description": "The Stack component — layers its children into a peeking deck. Colorless. All children share one grid cell (`grid-area: 1/1`); the first child sits flush on top, and the next two peek out behind it, each nudged and scaled down a touch. `-bottom` makes the deck peek downward; `-start` / `-end` fan it to the sides. Great for stacked cards, notification piles, or image decks. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
+    "description": "The Stack component — layers its children into a peeking deck. Colorless. All children share one grid cell (`grid-area: 1/1`); the first child sits flush on top, and the next two peek out behind it, each nudged and scaled down a touch. `-bottom` makes the deck peek downward; `-start` / `-end` fan it to the sides. Great for stacked cards, notification piles, or image decks. The nudge is PROPORTIONAL, not a fixed distance. Each card behind the front one is scaled down, and `place-items: center` makes that scale pull its edges inward by `size × (1 − scale) / 2` — 3.75% for the 2nd card, 7.5% for the 3rd. A fixed-rem nudge has to out-run that shrink, so it loses at large sizes: a `1.5rem` translate against a 7.5% shrink stopped peeking entirely above 320px and the deck silently collapsed into a single card. So each transform pays back its own shrink first (the `3.75%` / `7.5%` terms cancel it exactly) and only then translates by `--stack-peek`, which is therefore the REAL, visible peek at any card size. Percentages in a translate resolve against the element's own border box — `translateY` against height, `translateX` against width — so one declaration fans identically whether the card is 128px or 1280px. `--stack-peek` is per-STEP: the 2nd card peeks by one and the 3rd by two, so the deck fans evenly. Override it with `stack-xs`…`stack-xl`, or set the property directly for a bespoke deck — it accepts any length, so `--stack-peek: 12px` works as well as a percentage. SIZING: children stretch to the deck's WIDTH (`width: 100%`) but keep their own height, so a height class belongs on the CARD and a width class on the deck. `place-items: center` is deliberate — a deck of `<img>` would be squashed by a block-axis stretch. A height on the deck itself is therefore an empty box around content-height cards, and since the peek is a share of the card, it will also read as a much smaller fan than asked for. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
     "root": "stack",
     "classes": [
       "stack",
       "stack-bottom",
       "stack-end",
-      "stack-start"
+      "stack-lg",
+      "stack-md",
+      "stack-sm",
+      "stack-start",
+      "stack-xl",
+      "stack-xs"
     ]
   },
   {
@@ -13597,7 +13614,7 @@
     "package": "@wizeworks/silicaui",
     "category": "css",
     "sourceFile": "silicaui/src/components/typography.js",
-    "description": "Typography — @wizeworks/@wizeworks/silicaui's UI type ramp (distinct from `.prose`, which styles a block of long-form/markdown content). This gives the *application* a designed default: bare `<h1>`–`<h6>` and `<p>` look right with zero classes, plus explicit `.display` / `.display-1`–`.display-3` / `.h1`–`.h6` / `.lead` / `.caption` classes to apply any step to any element (a semantic `<h1>` that should read as an h3, or a hero `<h1>` sized up to `.display-1`, etc.). Anchored to the 16px root + the `text-*` scale (see index.js/theme.js). Heading sizes are in `rem` so they track the base font size; the oversized display ramp is fluid (`clamp` + container units) — see DISPLAY_STEPS. Two deliberate scoping choices: • Global element defaults are scoped to `[data-theme]` — the same opt-in surface @wizeworks/@wizeworks/silicaui paints (theme.js) — so @wizeworks/@wizeworks/silicaui NEVER restyles a host page's headings you didn't opt into (the embeddable/Sparx case). • They use `:where(...)` (zero specificity) so a Tailwind utility (`text-sm`) OR a `.h*` class always wins without `!important`. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
+    "description": "Typography — @wizeworks/silicaui's UI type ramp (distinct from `.prose`, which styles a block of long-form/markdown content). This gives the *application* a designed default: bare `<h1>`–`<h6>` and `<p>` look right with zero classes, plus explicit `.display` / `.display-1`–`.display-3` / `.h1`–`.h6` / `.lead` / `.caption` classes to apply any step to any element (a semantic `<h1>` that should read as an h3, or a hero `<h1>` sized up to `.display-1`, etc.). Anchored to the 16px root + the `text-*` scale (see index.js/theme.js). Heading sizes are in `rem` so they track the base font size; the oversized display ramp is fluid (`clamp` + container units) — see DISPLAY_STEPS. Two deliberate scoping choices: • Global element defaults are scoped to `[data-theme]` — the same opt-in surface @wizeworks/silicaui paints (theme.js) — so @wizeworks/silicaui NEVER restyles a host page's headings you didn't opt into (the embeddable/Sparx case). • They use `:where(...)` (zero specificity) so a Tailwind utility (`text-sm`) OR a `.h*` class always wins without `!important`. @param {string} [prefix] - prepended verbatim to every class (e.g. `sx-`)",
     "root": null,
     "classes": [
       "blockquote",
@@ -13812,7 +13829,7 @@
     "package": "@wizeworks/silicaui",
     "category": "css",
     "sourceFile": "silicaui/src/type-scale.js",
-    "description": "The type scale — @wizeworks/@wizeworks/silicaui's `text-*` size ladder, and the SINGLE source of truth for it. The plugin registers this as `theme.extend.fontSize` (see index.js) so Tailwind emits `text-xs` … `text-10xl`, and the MCP catalog generator imports the SAME object so the documented scale can never drift from what the plugin actually ships. Exposed as `@wizeworks/@wizeworks/silicaui/type-scale` for anyone who wants to build a size picker or safelist from the canonical scale rather than re-typing it. Anchored to a 16px root (index.js declares `100%`, honoring a user's own browser setting): `text-md` (== `text-base`) is 1rem = 16px — the worldwide default body size — so the scale reads as a self-documenting xs → sm → MD → lg… ladder rather than leaving 16px an accidental Tailwind default. `md` is the named alias @wizeworks/@wizeworks/silicaui code should reach for; always prefer a scale step over a `text-[13px]`-style magic number. xs–9xl match Tailwind's own defaults (nothing shifts) but are declared EXPLICITLY rather than left to Tailwind — otherwise the ladder @wizeworks/@wizeworks/silicaui \"owns\" quietly stopped at 7xl while 8xl/9xl leaked in from the framework default, so the top of the scale wasn't self-documenting. `10xl` (10rem) extends past Tailwind's ceiling for oversized hero/display type. Shape matches Tailwind's `fontSize` theme: `[fontSize, { lineHeight }]`.",
+    "description": "The type scale — @wizeworks/silicaui's `text-*` size ladder, and the SINGLE source of truth for it. The plugin registers this as `theme.extend.fontSize` (see index.js) so Tailwind emits `text-xs` … `text-10xl`, and the MCP catalog generator imports the SAME object so the documented scale can never drift from what the plugin actually ships. Exposed as `@wizeworks/silicaui/type-scale` for anyone who wants to build a size picker or safelist from the canonical scale rather than re-typing it. Anchored to a 16px root (index.js declares `100%`, honoring a user's own browser setting): `text-md` (== `text-base`) is 1rem = 16px — the worldwide default body size — so the scale reads as a self-documenting xs → sm → MD → lg… ladder rather than leaving 16px an accidental Tailwind default. `md` is the named alias @wizeworks/silicaui code should reach for; always prefer a scale step over a `text-[13px]`-style magic number. xs–9xl match Tailwind's own defaults (nothing shifts) but are declared EXPLICITLY rather than left to Tailwind — otherwise the ladder @wizeworks/silicaui \"owns\" quietly stopped at 7xl while 8xl/9xl leaked in from the framework default, so the top of the scale wasn't self-documenting. `10xl` (10rem) extends past Tailwind's ceiling for oversized hero/display type. Shape matches Tailwind's `fontSize` theme: `[fontSize, { lineHeight }]`.",
     "root": null,
     "familyPrefix": "text-",
     "rootNote": "No bare `.text` class exists — this family is only its `text-*` parts.",

package/dist/data/packages.json

@@ -11,7 +11,7 @@
   },
   {
     "name": "@wizeworks/silicaui-html",
-    "purpose": "Framework-neutral node-tree schema + HTML projection + composed blocks (for non-React output).",
+    "purpose": "Framework-neutral node-tree schema + HTML projection + composed blocks (for non-React output). The `/theme` subpath turns a Theme into CSS off the RENDER path: `customColorCss(theme)` emits every rule a build-time `@plugin \"@wizeworks/silicaui\" { colors: … }` registration would have — for a color NAMED AT RUNTIME by a tenant in a theme editor, which no build-time list can carry — and `themeTokenCss(theme, selector, mode)` emits the custom properties those rules read (ship both, or the rules paint nothing). Needs @wizeworks/silicaui, an optional peer; the root import stays dependency-free.",
     "install": "pnpm add @wizeworks/silicaui-html"
   },
   {