@wizeworks/silicaui-mcp 0.43.1 → 0.45.0

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",
@@ -1158,6 +1163,7 @@
     "tree-node",
     "tree-node-icon",
     "tree-node-label",
+    "tree-rename",
     "tree-toggle",
     "tree-toggle-spacer"
   ],

package/dist/data/components.json

@@ -3996,7 +3996,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState } from \"react\";\nimport {\n    Button,\n    Field,\n    FieldControl,\n    FieldError,\n    FieldLabel,\n    Form,\n    PasswordInput,\n    ToggleGroup,\n    ToggleGroupItem,\n} from \"@wizeworks/silicaui-react\";\nimport type { FormFocusOnError } from \"@wizeworks/silicaui-react\";\nimport { Section, Stack } from \"../lib/Section\";\n\ntype Errors = Record<string, string>;\n\n/**\n * `Form` runs each Field's validation on submit and moves focus to the first\n * invalid control. `focusOnError` decides how far that goes — the sign-in shape\n * below is where it matters, because the rejection arrives from a server long\n * after the user has moved on to the next field.\n */\nexport function FormDemo() {\n    const [focusOnError, setFocusOnError] = useState<FormFocusOnError>(true);\n    const [errors, setErrors] = useState<Errors>({});\n    const [pending, setPending] = useState(false);\n\n    function onSubmit(event: React.FormEvent<HTMLFormElement>) {\n        event.preventDefault();\n        setErrors({});\n        setPending(true);\n        // Stands in for a sign-in round trip. Type into the password field while\n        // it runs: the caret has to stay put when the rejection lands.\n        window.setTimeout(() => {\n            setPending(false);\n            setErrors({ email: \"That address isn't registered.\" });\n        }, 1500);\n    }\n\n    return (\n        <>\n            <Section title=\"focusOnError\">\n                <Stack className=\"max-w-sm\">\n                    <ToggleGroup\n                        size=\"sm\"\n                        value={[String(focusOnError)]}\n                        onValueChange={(v) => {\n                            const next = v[0];\n                            if (next == null) return; // clicking the active item can't clear it\n                            setFocusOnError(\n                                next === \"false\" ? false : next === \"scroll\" ? \"scroll\" : true,\n                            );\n                        }}\n                    >\n                        <ToggleGroupItem value=\"true\">true</ToggleGroupItem>\n                        <ToggleGroupItem value=\"scroll\">scroll</ToggleGroupItem>\n                        <ToggleGroupItem value=\"false\">false</ToggleGroupItem>\n                    </ToggleGroup>\n                    <p className=\"text-sm\">\n                        Submit with an invalid email to see the client-side path. For the\n                        async path, submit a <em>valid</em> address and keep typing your\n                        password during the 1.5s round trip — the rejection must not take\n                        the caret.\n                    </p>\n                </Stack>\n            </Section>\n\n            <Section title=\"Sign in\">\n                <Form\n                    errors={errors}\n                    focusOnError={focusOnError}\n                    onSubmit={onSubmit}\n                    className=\"grid max-w-sm gap-4\"\n                >\n                    <Field name=\"email\">\n                        <FieldLabel required>Email</FieldLabel>\n                        <FieldControl\n                            type=\"email\"\n                            required\n                            placeholder=\"you@example.com\"\n                            data-testid=\"demo-email\"\n                        />\n                        <FieldError />\n                    </Field>\n                    <Field\n                        name=\"password\"\n                        validate={(v) =>\n                            String(v ?? \"\").length >= 8 ? null : \"Use at least 8 characters.\"\n                        }\n                    >\n                        <FieldLabel required>Password</FieldLabel>\n                        <FieldControl\n                            required\n                            render={<PasswordInput data-testid=\"demo-password\" />}\n                        />\n                        <FieldError />\n                    </Field>\n                    <Button type=\"submit\" color=\"primary\" loading={pending}>\n                        {pending ? \"Signing in…\" : \"Sign in\"}\n                    </Button>\n                </Form>\n            </Section>\n        </>\n    );\n}"
+    "usageExample": "import { useState } from \"react\";\r\nimport {\r\n    Button,\r\n    Field,\r\n    FieldControl,\r\n    FieldError,\r\n    FieldLabel,\r\n    Form,\r\n    PasswordInput,\r\n    ToggleGroup,\r\n    ToggleGroupItem,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport type { FormFocusOnError } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Stack } from \"../lib/Section\";\r\n\r\ntype Errors = Record<string, string>;\r\n\r\n/**\r\n * `Form` runs each Field's validation on submit and moves focus to the first\r\n * invalid control. `focusOnError` decides how far that goes — the sign-in shape\r\n * below is where it matters, because the rejection arrives from a server long\r\n * after the user has moved on to the next field.\r\n */\r\nexport function FormDemo() {\r\n    const [focusOnError, setFocusOnError] = useState<FormFocusOnError>(true);\r\n    const [errors, setErrors] = useState<Errors>({});\r\n    const [pending, setPending] = useState(false);\r\n\r\n    function onSubmit(event: React.FormEvent<HTMLFormElement>) {\r\n        event.preventDefault();\r\n        setErrors({});\r\n        setPending(true);\r\n        // Stands in for a sign-in round trip. Type into the password field while\r\n        // it runs: the caret has to stay put when the rejection lands.\r\n        window.setTimeout(() => {\r\n            setPending(false);\r\n            setErrors({ email: \"That address isn't registered.\" });\r\n        }, 1500);\r\n    }\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"focusOnError\">\r\n                <Stack className=\"max-w-sm\">\r\n                    <ToggleGroup\r\n                        size=\"sm\"\r\n                        value={[String(focusOnError)]}\r\n                        onValueChange={(v) => {\r\n                            const next = v[0];\r\n                            if (next == null) return; // clicking the active item can't clear it\r\n                            setFocusOnError(\r\n                                next === \"false\" ? false : next === \"scroll\" ? \"scroll\" : true,\r\n                            );\r\n                        }}\r\n                    >\r\n                        <ToggleGroupItem value=\"true\">true</ToggleGroupItem>\r\n                        <ToggleGroupItem value=\"scroll\">scroll</ToggleGroupItem>\r\n                        <ToggleGroupItem value=\"false\">false</ToggleGroupItem>\r\n                    </ToggleGroup>\r\n                    <p className=\"text-sm\">\r\n                        Submit with an invalid email to see the client-side path. For the\r\n                        async path, submit a <em>valid</em> address and keep typing your\r\n                        password during the 1.5s round trip — the rejection must not take\r\n                        the caret.\r\n                    </p>\r\n                </Stack>\r\n            </Section>\r\n\r\n            <Section title=\"Sign in\">\r\n                <Form\r\n                    errors={errors}\r\n                    focusOnError={focusOnError}\r\n                    onSubmit={onSubmit}\r\n                    className=\"grid max-w-sm gap-4\"\r\n                >\r\n                    <Field name=\"email\">\r\n                        <FieldLabel required>Email</FieldLabel>\r\n                        <FieldControl\r\n                            type=\"email\"\r\n                            required\r\n                            placeholder=\"you@example.com\"\r\n                            data-testid=\"demo-email\"\r\n                        />\r\n                        <FieldError />\r\n                    </Field>\r\n                    <Field\r\n                        name=\"password\"\r\n                        validate={(v) =>\r\n                            String(v ?? \"\").length >= 8 ? null : \"Use at least 8 characters.\"\r\n                        }\r\n                    >\r\n                        <FieldLabel required>Password</FieldLabel>\r\n                        <FieldControl\r\n                            required\r\n                            render={<PasswordInput data-testid=\"demo-password\" />}\r\n                        />\r\n                        <FieldError />\r\n                    </Field>\r\n                    <Button type=\"submit\" color=\"primary\" loading={pending}>\r\n                        {pending ? \"Signing in…\" : \"Sign in\"}\r\n                    </Button>\r\n                </Form>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Input",
@@ -6972,7 +6972,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 +6984,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 +6999,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",
@@ -7507,6 +7513,12 @@
             "optional": true,
             "type": "(id: string, targetId: string, edge: TreeDropEdge) => void",
             "doc": "Enables row drag-to-reorder/-reparent (rows become `draggable`) and fires once a drag is released over a valid row: `edge` is \"before\"/\"after\" a sibling or \"inside\" (append as a child). TreeView only guards against dropping a node onto itself or its own descendant (which the geometry already knows); it does NOT know which nodes are valid containers, so the consumer's own move logic is the source of truth for the rest — an \"inside\" drop onto something that can't hold children should just no-op."
+          },
+          {
+            "name": "onRename",
+            "optional": true,
+            "type": "(id: string, value: string) => void",
+            "doc": "Enables inline rename on rows marked `renamable` (double-click the row, or F2 on a focused one) and fires ONCE on commit — Enter or blur, never per keystroke, so a consumer with an undo stack gets one entry per rename rather than one per character. Escape cancels without firing. An empty value is passed through: for most trees that means \"clear the name and go back to the derived one\", which only the consumer can decide."
           }
         ]
       }
@@ -10941,7 +10953,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.",
@@ -11249,7 +11261,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"
@@ -11506,7 +11518,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",
@@ -12702,7 +12714,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.",
@@ -12726,7 +12738,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",
@@ -12887,7 +12899,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",
@@ -13024,7 +13036,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.",
@@ -13043,13 +13055,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"
     ]
   },
   {
@@ -13569,6 +13586,7 @@
       "tree-node",
       "tree-node-icon",
       "tree-node-label",
+      "tree-rename",
       "tree-toggle",
       "tree-toggle-spacer"
     ],
@@ -13590,7 +13608,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",
@@ -13805,7 +13823,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/email.json

@@ -9,6 +9,12 @@
       "type": "string",
       "doc": ""
     },
+    {
+      "name": "name",
+      "optional": true,
+      "type": "string",
+      "doc": "The author's own name for this layer, shown in the Navigator instead of the derived one (\"Section\", \"Columns\"). Lets someone tell two identical rows apart — \"Order summary\" vs \"Legal footer\" — without opening either. Called `name`, not `label`, because `label` is already a ButtonNode's own TEXT — a content field that ships in the email. These are opposites, and one word cannot mean both. (The site schema, which has no such collision, spells the same idea `Node.label`.) Authoring metadata, exactly like `ord` below: `toEmailHtml` never reads it, so it cannot reach sent markup."
+    },
     {
       "name": "ord",
       "optional": true,

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"
   },
   {