@wizeworks/silicaui-mcp 0.30.0 → 0.31.0

package/dist/data/classes.json

@@ -1166,6 +1166,9 @@
     "blockquote-cite",
     "caption",
     "display",
+    "display-1",
+    "display-2",
+    "display-3",
     "h1",
     "h2",
     "h3",
@@ -1278,5 +1281,22 @@
     "text-success-content",
     "text-warning",
     "text-warning-content"
+  ],
+  "type-scale": [
+    "text-xs",
+    "text-sm",
+    "text-md",
+    "text-base",
+    "text-lg",
+    "text-xl",
+    "text-2xl",
+    "text-3xl",
+    "text-4xl",
+    "text-5xl",
+    "text-6xl",
+    "text-7xl",
+    "text-8xl",
+    "text-9xl",
+    "text-10xl"
   ]
 }

package/dist/data/components.json

@@ -3801,7 +3801,7 @@
     "props": [
       {
         "name": "FileInputProps",
-        "extends": "extends VoidElementProps<\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">\n  >",
+        "extends": "extends VoidElementProps<\r\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\">\r\n  >",
         "members": [
           {
             "name": "size",
@@ -6271,7 +6271,7 @@
         ]
       }
     ],
-    "usageExample": "import {\r\n    Dialog,\r\n    DialogTrigger,\r\n    DialogClose,\r\n    DialogContent,\r\n    DialogTitle,\r\n    DialogDescription,\r\n    DialogHeader,\r\n    DialogFooter,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function DialogDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · destructive-action confirmation\">\r\n                <Dialog>\r\n                    <DialogTrigger>\r\n                        <Button color=\"error\" variant=\"outline\">\r\n                            Delete project…\r\n                        </Button>\r\n                    </DialogTrigger>\r\n                    <DialogContent>\r\n                        <DialogTitle>Delete project?</DialogTitle>\r\n                        <DialogDescription>\r\n                            This will permanently delete the project and all its data. This\r\n                            can't be undone.\r\n                        </DialogDescription>\r\n                        <div className=\"mt-4 flex justify-end gap-2\">\r\n                            <DialogClose>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Cancel\r\n                                </Button>\r\n                            </DialogClose>\r\n                            <DialogClose>\r\n                                <Button color=\"error\">Delete</Button>\r\n                            </DialogClose>\r\n                        </div>\r\n                    </DialogContent>\r\n                </Dialog>\r\n            </Section>\r\n\r\n            <Section title=\"Header + Footer · placeable docking bars, sticky footer\">\r\n                <Row>\r\n                    <Dialog>\r\n                        <DialogTrigger>\r\n                            <Button variant=\"outline\">Header/Footer</Button>\r\n                        </DialogTrigger>\r\n                        <DialogContent>\r\n                            <DialogHeader>\r\n                                <DialogTitle>Invite teammates</DialogTitle>\r\n                                <DialogClose>\r\n                                    <Button variant=\"ghost\" shape=\"circle\" size=\"sm\">\r\n                                        ✕\r\n                                    </Button>\r\n                                </DialogClose>\r\n                            </DialogHeader>\r\n                            <DialogDescription>\r\n                                Send an invite by email — they'll get access once they accept.\r\n                            </DialogDescription>\r\n                            <DialogFooter>\r\n                                <DialogClose>\r\n                                    <Button variant=\"ghost\" color=\"neutral\">\r\n                                        Cancel\r\n                                    </Button>\r\n                                </DialogClose>\r\n                                <DialogClose>\r\n                                    <Button>Send invite</Button>\r\n                                </DialogClose>\r\n                            </DialogFooter>\r\n                        </DialogContent>\r\n                    </Dialog>\r\n\r\n                    <Dialog>\r\n                        <DialogTrigger>\r\n                            <Button variant=\"outline\">Sticky footer (scrolling content)</Button>\r\n                        </DialogTrigger>\r\n                        <DialogContent className=\"max-h-[70dvh]\">\r\n                            <DialogHeader sticky>\r\n                                <DialogTitle>Terms of service</DialogTitle>\r\n                            </DialogHeader>\r\n                            <DialogDescription>\r\n                                {Array.from({ length: 12 }, (_, i) => (\r\n                                    <p key={i} className=\"mb-3\">\r\n                                        Section {i + 1} — placeholder legal text to force this\r\n                                        dialog to scroll so the sticky footer below stays pinned.\r\n                                    </p>\r\n                                ))}\r\n                            </DialogDescription>\r\n                            <DialogFooter sticky>\r\n                                <DialogClose>\r\n                                    <Button variant=\"ghost\" color=\"neutral\">\r\n                                        Decline\r\n                                    </Button>\r\n                                </DialogClose>\r\n                                <DialogClose>\r\n                                    <Button>Accept</Button>\r\n                                </DialogClose>\r\n                            </DialogFooter>\r\n                        </DialogContent>\r\n                    </Dialog>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · frosted popup over the dimmed backdrop\">\r\n                <Dialog>\r\n                    <DialogTrigger>\r\n                        <Button variant=\"outline\">Glass dialog</Button>\r\n                    </DialogTrigger>\r\n                    <DialogContent className=\"glass\">\r\n                        <DialogTitle>Restart required</DialogTitle>\r\n                        <DialogDescription>\r\n                            <code>DialogContent className=&quot;glass&quot;</code> frosts the\r\n                            popup over the existing dimmed backdrop — same class, no new prop.\r\n                        </DialogDescription>\r\n                        <div className=\"mt-4 flex justify-end gap-2\">\r\n                            <DialogClose>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Later\r\n                                </Button>\r\n                            </DialogClose>\r\n                            <DialogClose>\r\n                                <Button>Restart now</Button>\r\n                            </DialogClose>\r\n                        </div>\r\n                    </DialogContent>\r\n                </Dialog>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
+    "usageExample": "import {\r\n    Dialog,\r\n    DialogTrigger,\r\n    DialogClose,\r\n    DialogContent,\r\n    DialogTitle,\r\n    DialogDescription,\r\n    DialogHeader,\r\n    DialogFooter,\r\n    Button,\r\n} from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\n\r\nexport function DialogDemo() {\r\n    return (\r\n        <>\r\n            <Section title=\"Real use · destructive-action confirmation\">\r\n                <Dialog>\r\n                    <DialogTrigger>\r\n                        <Button color=\"error\" variant=\"outline\">\r\n                            Delete project…\r\n                        </Button>\r\n                    </DialogTrigger>\r\n                    <DialogContent>\r\n                        <DialogTitle>Delete project?</DialogTitle>\r\n                        <DialogDescription>\r\n                            This will permanently delete the project and all its data. This\r\n                            can't be undone.\r\n                        </DialogDescription>\r\n                        <div className=\"mt-4 flex justify-end gap-2\">\r\n                            <DialogClose>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Cancel\r\n                                </Button>\r\n                            </DialogClose>\r\n                            <DialogClose>\r\n                                <Button color=\"error\">Delete</Button>\r\n                            </DialogClose>\r\n                        </div>\r\n                    </DialogContent>\r\n                </Dialog>\r\n            </Section>\r\n\r\n            <Section title=\"Header + Footer · placeable docking bars, sticky footer\">\r\n                <Row>\r\n                    <Dialog>\r\n                        <DialogTrigger>\r\n                            <Button variant=\"outline\">Header/Footer</Button>\r\n                        </DialogTrigger>\r\n                        <DialogContent>\r\n                            <DialogHeader>\r\n                                <DialogTitle>Invite teammates</DialogTitle>\r\n                                <DialogClose>\r\n                                    <Button variant=\"ghost\" shape=\"circle\" size=\"sm\">\r\n                                        ✕\r\n                                    </Button>\r\n                                </DialogClose>\r\n                            </DialogHeader>\r\n                            <DialogDescription>\r\n                                Send an invite by email — they'll get access once they accept.\r\n                            </DialogDescription>\r\n                            <DialogFooter>\r\n                                <DialogClose>\r\n                                    <Button variant=\"ghost\" color=\"neutral\">\r\n                                        Cancel\r\n                                    </Button>\r\n                                </DialogClose>\r\n                                <DialogClose>\r\n                                    <Button>Send invite</Button>\r\n                                </DialogClose>\r\n                            </DialogFooter>\r\n                        </DialogContent>\r\n                    </Dialog>\r\n\r\n                    <Dialog>\r\n                        <DialogTrigger>\r\n                            <Button variant=\"outline\">Sticky footer (scrolling content)</Button>\r\n                        </DialogTrigger>\r\n                        <DialogContent className=\"max-h-[70dvh]\">\r\n                            <DialogHeader sticky>\r\n                                <DialogTitle>Terms of service</DialogTitle>\r\n                            </DialogHeader>\r\n                            <div>\r\n                                {Array.from({ length: 12 }, (_, i) => (\r\n                                    <p key={i} className=\"mb-3\">\r\n                                        Section {i + 1} — placeholder legal text to force this\r\n                                        dialog to scroll so the sticky footer below stays pinned.\r\n                                    </p>\r\n                                ))}\r\n                            </div>\r\n                            <DialogFooter sticky>\r\n                                <DialogClose>\r\n                                    <Button variant=\"ghost\" color=\"neutral\">\r\n                                        Decline\r\n                                    </Button>\r\n                                </DialogClose>\r\n                                <DialogClose>\r\n                                    <Button>Accept</Button>\r\n                                </DialogClose>\r\n                            </DialogFooter>\r\n                        </DialogContent>\r\n                    </Dialog>\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Glass · frosted popup over the dimmed backdrop\">\r\n                <Dialog>\r\n                    <DialogTrigger>\r\n                        <Button variant=\"outline\">Glass dialog</Button>\r\n                    </DialogTrigger>\r\n                    <DialogContent className=\"glass\">\r\n                        <DialogTitle>Restart required</DialogTitle>\r\n                        <DialogDescription>\r\n                            <code>DialogContent className=&quot;glass&quot;</code> frosts the\r\n                            popup over the existing dimmed backdrop — same class, no new prop.\r\n                        </DialogDescription>\r\n                        <div className=\"mt-4 flex justify-end gap-2\">\r\n                            <DialogClose>\r\n                                <Button variant=\"ghost\" color=\"neutral\">\r\n                                    Later\r\n                                </Button>\r\n                            </DialogClose>\r\n                            <DialogClose>\r\n                                <Button>Restart now</Button>\r\n                            </DialogClose>\r\n                        </div>\r\n                    </DialogContent>\r\n                </Dialog>\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Drawer",
@@ -6648,7 +6648,7 @@
         ]
       }
     ],
-    "usageExample": "import { useState, useEffect } from \"react\";\nimport { RadialProgress } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function RadialProgressDemo() {\n    const [pct, setPct] = useState(0);\n\n    useEffect(() => {\n        const id = setInterval(() => setPct((p) => (p >= 100 ? 0 : p + 5)), 200);\n        return () => clearInterval(id);\n    }, []);\n\n    return (\n        <>\n            <Section title=\"Colors\">\n                <Row>\n                    {COLORS.slice(0, 6).map((color) => (\n                        <RadialProgress key={color} value={70} color={color} />\n                    ))}\n                </Row>\n            </Section>\n\n            <Section title=\"Sizes\">\n                <Row>\n                    <RadialProgress value={60} color=\"primary\" diameter=\"3rem\" thickness=\"0.35rem\" />\n                    <RadialProgress value={60} color=\"primary\" diameter=\"5rem\" thickness=\"0.5rem\" />\n                    <RadialProgress value={60} color=\"primary\" diameter=\"8rem\" thickness=\"0.75rem\" />\n                </Row>\n            </Section>\n\n            <Section title=\"Real use · animated upload progress\">\n                <RadialProgress value={pct} color=\"brand\" diameter=\"6rem\" />\n            </Section>\n        </>\n    );\n}"
+    "usageExample": "import { useState, useEffect } from \"react\";\r\nimport { RadialProgress } from \"@wizeworks/silicaui-react\";\r\nimport { Section, Row } from \"../lib/Section\";\r\nimport { COLORS } from \"../lib/data\";\r\n\r\nexport function RadialProgressDemo() {\r\n    const [pct, setPct] = useState(0);\r\n\r\n    useEffect(() => {\r\n        const id = setInterval(() => setPct((p) => (p >= 100 ? 0 : p + 5)), 200);\r\n        return () => clearInterval(id);\r\n    }, []);\r\n\r\n    return (\r\n        <>\r\n            <Section title=\"Colors\">\r\n                <Row>\r\n                    {COLORS.slice(0, 6).map((color) => (\r\n                        <RadialProgress key={color} value={70} color={color} />\r\n                    ))}\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Sizes\">\r\n                <Row>\r\n                    <RadialProgress value={60} color=\"primary\" diameter=\"3rem\" thickness=\"0.35rem\" />\r\n                    <RadialProgress value={60} color=\"primary\" diameter=\"5rem\" thickness=\"0.5rem\" />\r\n                    <RadialProgress value={60} color=\"primary\" diameter=\"8rem\" thickness=\"0.75rem\" />\r\n                </Row>\r\n            </Section>\r\n\r\n            <Section title=\"Real use · animated upload progress\">\r\n                <RadialProgress value={pct} color=\"brand\" diameter=\"6rem\" />\r\n            </Section>\r\n        </>\r\n    );\r\n}"
   },
   {
     "name": "Skeleton",
@@ -7619,8 +7619,8 @@
           {
             "name": "visualLevel",
             "optional": true,
-            "type": "HeadingLevel | \"display\"",
-            "doc": "Visual heading scale (`1`–`6` or `\"display\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
+            "type": "HeadingLevel | \"display\" | `display-${DisplayStep}`",
+            "doc": "Visual heading scale (`1`–`6`, `\"display\"`, or `\"display-1\"`–`\"display-3\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
           }
         ]
       },
@@ -7632,7 +7632,13 @@
             "name": "level",
             "optional": true,
             "type": "HeadingLevel",
-            "doc": "Semantic level for the outline (the look is always `.display`). Default 1."
+            "doc": "Semantic level for the outline (default 1) — independent of the visual size."
+          },
+          {
+            "name": "visualLevel",
+            "optional": true,
+            "type": "DisplayStep",
+            "doc": "Which step of the display ramp (`1`–`3`, largest → smallest). Omit for the base `.display` (equal to `.display-3`). Named `visualLevel` to parallel `Heading`, never `size` (which is the `xs`–`xl` token scale everywhere else)."
           }
         ]
       },
@@ -7678,7 +7684,7 @@
     "package": "@wizeworks/silicaui-react",
     "category": "Typography",
     "sourceFile": "silicaui-react/src/typography.tsx",
-    "description": "Oversized hero/display heading (`.display`) on a semantic heading element.",
+    "description": "Oversized hero/display heading on a semantic heading element.",
     "props": [
       {
         "name": "HeadingProps",
@@ -7693,8 +7699,8 @@
           {
             "name": "visualLevel",
             "optional": true,
-            "type": "HeadingLevel | \"display\"",
-            "doc": "Visual heading scale (`1`–`6` or `\"display\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
+            "type": "HeadingLevel | \"display\" | `display-${DisplayStep}`",
+            "doc": "Visual heading scale (`1`–`6`, `\"display\"`, or `\"display-1\"`–`\"display-3\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
           }
         ]
       },
@@ -7706,7 +7712,13 @@
             "name": "level",
             "optional": true,
             "type": "HeadingLevel",
-            "doc": "Semantic level for the outline (the look is always `.display`). Default 1."
+            "doc": "Semantic level for the outline (default 1) — independent of the visual size."
+          },
+          {
+            "name": "visualLevel",
+            "optional": true,
+            "type": "DisplayStep",
+            "doc": "Which step of the display ramp (`1`–`3`, largest → smallest). Omit for the base `.display` (equal to `.display-3`). Named `visualLevel` to parallel `Heading`, never `size` (which is the `xs`–`xl` token scale everywhere else)."
           }
         ]
       },
@@ -7767,8 +7779,8 @@
           {
             "name": "visualLevel",
             "optional": true,
-            "type": "HeadingLevel | \"display\"",
-            "doc": "Visual heading scale (`1`–`6` or `\"display\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
+            "type": "HeadingLevel | \"display\" | `display-${DisplayStep}`",
+            "doc": "Visual heading scale (`1`–`6`, `\"display\"`, or `\"display-1\"`–`\"display-3\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
           }
         ]
       },
@@ -7780,7 +7792,13 @@
             "name": "level",
             "optional": true,
             "type": "HeadingLevel",
-            "doc": "Semantic level for the outline (the look is always `.display`). Default 1."
+            "doc": "Semantic level for the outline (default 1) — independent of the visual size."
+          },
+          {
+            "name": "visualLevel",
+            "optional": true,
+            "type": "DisplayStep",
+            "doc": "Which step of the display ramp (`1`–`3`, largest → smallest). Omit for the base `.display` (equal to `.display-3`). Named `visualLevel` to parallel `Heading`, never `size` (which is the `xs`–`xl` token scale everywhere else)."
           }
         ]
       },
@@ -7863,8 +7881,8 @@
           {
             "name": "visualLevel",
             "optional": true,
-            "type": "HeadingLevel | \"display\"",
-            "doc": "Visual heading scale (`1`–`6` or `\"display\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
+            "type": "HeadingLevel | \"display\" | `display-${DisplayStep}`",
+            "doc": "Visual heading scale (`1`–`6`, `\"display\"`, or `\"display-1\"`–`\"display-3\"`), independent of the semantic `level`; omit to use the tag default. Named `visualLevel`, not `size`, on purpose: everywhere else in Silica `size` is the `xs`–`xl` token scale, and a prop that takes `3` in one component and `\"lg\"` in the next is a prop in name only."
           }
         ]
       },
@@ -7876,7 +7894,13 @@
             "name": "level",
             "optional": true,
             "type": "HeadingLevel",
-            "doc": "Semantic level for the outline (the look is always `.display`). Default 1."
+            "doc": "Semantic level for the outline (default 1) — independent of the visual size."
+          },
+          {
+            "name": "visualLevel",
+            "optional": true,
+            "type": "DisplayStep",
+            "doc": "Which step of the display ramp (`1`–`3`, largest → smallest). Omit for the base `.display` (equal to `.display-3`). Named `visualLevel` to parallel `Heading`, never `size` (which is the `xs`–`xl` token scale everywhere else)."
           }
         ]
       },

package/dist/data/tokens.json

@@ -156,6 +156,99 @@
   ],
   "typography": {
     "baseFontSize": "100% (≈16px) — an explicit anchor, not the UA default by accident; the whole rem-based type scale (text-md = 1rem) scales with it.",
+    "scale": {
+      "xs": {
+        "class": "text-xs",
+        "fontSize": "0.75rem",
+        "px": 12,
+        "lineHeight": "1rem"
+      },
+      "sm": {
+        "class": "text-sm",
+        "fontSize": "0.875rem",
+        "px": 14,
+        "lineHeight": "1.25rem"
+      },
+      "md": {
+        "class": "text-md",
+        "fontSize": "1rem",
+        "px": 16,
+        "lineHeight": "1.5rem"
+      },
+      "base": {
+        "class": "text-base",
+        "fontSize": "1rem",
+        "px": 16,
+        "lineHeight": "1.5rem"
+      },
+      "lg": {
+        "class": "text-lg",
+        "fontSize": "1.125rem",
+        "px": 18,
+        "lineHeight": "1.75rem"
+      },
+      "xl": {
+        "class": "text-xl",
+        "fontSize": "1.25rem",
+        "px": 20,
+        "lineHeight": "1.75rem"
+      },
+      "2xl": {
+        "class": "text-2xl",
+        "fontSize": "1.5rem",
+        "px": 24,
+        "lineHeight": "2rem"
+      },
+      "3xl": {
+        "class": "text-3xl",
+        "fontSize": "1.875rem",
+        "px": 30,
+        "lineHeight": "2.25rem"
+      },
+      "4xl": {
+        "class": "text-4xl",
+        "fontSize": "2.25rem",
+        "px": 36,
+        "lineHeight": "2.5rem"
+      },
+      "5xl": {
+        "class": "text-5xl",
+        "fontSize": "3rem",
+        "px": 48,
+        "lineHeight": "1"
+      },
+      "6xl": {
+        "class": "text-6xl",
+        "fontSize": "3.75rem",
+        "px": 60,
+        "lineHeight": "1"
+      },
+      "7xl": {
+        "class": "text-7xl",
+        "fontSize": "4.5rem",
+        "px": 72,
+        "lineHeight": "1"
+      },
+      "8xl": {
+        "class": "text-8xl",
+        "fontSize": "6rem",
+        "px": 96,
+        "lineHeight": "1"
+      },
+      "9xl": {
+        "class": "text-9xl",
+        "fontSize": "8rem",
+        "px": 128,
+        "lineHeight": "1"
+      },
+      "10xl": {
+        "class": "text-10xl",
+        "fontSize": "10rem",
+        "px": 160,
+        "lineHeight": "1"
+      }
+    },
+    "scaleNote": "The `text-*` size ladder — `text-md` == `text-base` == 1rem == 16px. `text-8xl`/`9xl` match Tailwind's defaults; `text-10xl` (160px) extends past them. Prefer a step over a `text-[13px]` magic number.",
     "fontFamilyTokens": [
       "--font-sans",
       "--font-serif",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wizeworks/silicaui-mcp",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "A local MCP server that lets AI coding assistants query the Silica UI design system — real class names, component props, blocks, and behaviors — instead of guessing.",
   "type": "module",
   "license": "MIT",