@dryui/mcp 0.1.1 → 0.1.3

package/dist/architecture.js

@@ -4440,7 +4440,7 @@ body { margin: 0; min-height: 100dvh; }
   },
   {
     name: "simple-content-page",
-    description: "Clean content page with constrained width and vertical rhythm. Use Container for max-width and Stack for vertical spacing. Suitable for blog posts, documentation, settings pages.",
+    description: "Clean content page with constrained width and vertical rhythm. Use Container for max-width and CSS grid for vertical spacing. Suitable for blog posts, documentation, settings pages.",
     tags: ["page", "content", "simple", "blog", "docs", "article", "clean", "minimal"],
     components: ["Container"],
     snippet: `<!-- Simple content page — Container constrains width, grid provides rhythm -->

package/dist/architecture.json

@@ -1,7 +1,7 @@
 {
   "schema": "DolphinGraph",
-  "generatedAt": "2026-04-07T05:46:31.326Z",
-  "packageVersion": "0.1.3",
+  "generatedAt": "2026-04-07T21:44:08.785Z",
+  "packageVersion": "0.1.5",
   "summary": {
     "componentNodes": 292,
     "partNodes": 662,
@@ -15,7 +15,7 @@
     "subpathOnlyComponents": 1,
     "compoundComponents": 135,
     "wrapEdges": 130,
-    "composeEdges": 12,
+    "composeEdges": 10,
     "docsEdges": 0,
     "relatedEdges": 303,
     "mismatches": 23,
@@ -15159,7 +15159,7 @@
       "package": "ui",
       "layer": "ui-composite",
       "category": "display",
-      "description": "Layered architecture diagram for DolphinGraph nodes, relationships, and audit signals",
+      "description": "Layered architecture diagram that visualizes component nodes, relationships, and dependency layers",
       "visibility": "root+subpath",
       "sourcePath": "packages/ui/src/system-map/index.ts",
       "publicImport": "@dryui/ui",
@@ -15174,7 +15174,7 @@
       "parts": [],
       "sourceFileCount": 3,
       "primitivePartUsageCount": 0,
-      "componentImportCount": 3
+      "componentImportCount": 1
     },
     {
       "id": "ui:Table",
@@ -16580,18 +16580,6 @@
       "from": "ui:MarkdownRenderer",
       "to": "ui:Separator"
     },
-    {
-      "id": "composes:ui:SystemMap:ui:Badge:",
-      "type": "composes",
-      "from": "ui:SystemMap",
-      "to": "ui:Badge"
-    },
-    {
-      "id": "composes:ui:SystemMap:ui:Svg:",
-      "type": "composes",
-      "from": "ui:SystemMap",
-      "to": "ui:Svg"
-    },
     {
       "id": "composes:ui:SystemMap:ui:Text:",
       "type": "composes",

package/dist/composition-data.js

@@ -4440,7 +4440,7 @@ body { margin: 0; min-height: 100dvh; }
   },
   {
     name: "simple-content-page",
-    description: "Clean content page with constrained width and vertical rhythm. Use Container for max-width and Stack for vertical spacing. Suitable for blog posts, documentation, settings pages.",
+    description: "Clean content page with constrained width and vertical rhythm. Use Container for max-width and CSS grid for vertical spacing. Suitable for blog posts, documentation, settings pages.",
     tags: ["page", "content", "simple", "blog", "docs", "article", "clean", "minimal"],
     components: ["Container"],
     snippet: `<!-- Simple content page — Container constrains width, grid provides rhythm -->

package/dist/contract.v1.json

@@ -3,7 +3,7 @@
   "version": 1,
   "package": {
     "name": "@dryui/ui",
-    "version": "0.1.3"
+    "version": "0.1.5"
   },
   "counts": {
     "components": 144,
@@ -1027,6 +1027,13 @@
         ]
       },
       "cssVars": {
+        "--dry-btn-accent": "Accent",
+        "--dry-btn-accent-active": "Accent Active",
+        "--dry-btn-accent-fg": "Accent Fg",
+        "--dry-btn-accent-hover": "Accent Hover",
+        "--dry-btn-accent-stroke": "Accent Stroke",
+        "--dry-btn-border": "Border color",
+        "--dry-btn-on-accent": "On Accent",
         "--dry-dialog-bg": "Background color",
         "--dry-dialog-border": "Border color",
         "--dry-dialog-max-width": "Maximum width",
@@ -2066,6 +2073,9 @@
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-orientation",
           "description": "Reflects the current horizontal or vertical orientation.",
@@ -2192,6 +2202,9 @@
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-state",
           "description": "Reflects whether the collapsible content is expanded or collapsed.",
@@ -2585,8 +2598,7 @@
         ]
       },
       "cssVars": {
-        "--dry-field-gap": "Gap spacing",
-        "--dry-field-label-order": "Label Order"
+        "--dry-field-gap": "Gap spacing"
       },
       "dataAttributes": [
         {
@@ -3347,6 +3359,9 @@
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-invalid",
           "description": "Present when the current field value is invalid."
@@ -4432,9 +4447,6 @@
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
         },
-        {
-          "name": "data-option-swatch-group-content"
-        },
         {
           "name": "data-option-swatch-group-item"
         },
@@ -7980,11 +7992,11 @@
         "tree": [
           "Timeline.Root",
           "  Timeline.Item",
-          "  Timeline.Icon",
-          "  Timeline.Content",
-          "  Timeline.Title",
-          "  Timeline.Description",
-          "  Timeline.Time"
+          "    Timeline.Icon",
+          "    Timeline.Content",
+          "      Timeline.Title",
+          "      Timeline.Description",
+          "      Timeline.Time"
         ]
       },
       "cssVars": {
@@ -8021,7 +8033,7 @@
           "name": "data-part"
         }
       ],
-      "example": "<Timeline.Root>\n  <Timeline.Item>...</Timeline.Item>\n  <Timeline.Icon>...</Timeline.Icon>\n  <Timeline.Content>...</Timeline.Content>\n  <Timeline.Title>...</Timeline.Title>\n  <Timeline.Description>...</Timeline.Description>\n  <Timeline.Time>...</Timeline.Time>\n</Timeline.Root>"
+      "example": "<Timeline.Root>\n  <Timeline.Item>\n    <Timeline.Icon />\n    <Timeline.Content>\n      <Timeline.Title>Event title</Timeline.Title>\n      <Timeline.Description>Event description</Timeline.Description>\n      <Timeline.Time>2 hours ago</Timeline.Time>\n    </Timeline.Content>\n  </Timeline.Item>\n</Timeline.Root>"
     },
     "Typography": {
       "import": "@dryui/ui",
@@ -9691,6 +9703,7 @@
         ]
       },
       "cssVars": {
+        "--dry-calendar-grid-gap": "Grid Gap",
         "--dry-dp-bg": "Background color",
         "--dry-dp-border": "Border color",
         "--dry-dp-font-size": "Font size",
@@ -9698,9 +9711,33 @@
         "--dry-dp-padding-y": "Vertical padding"
       },
       "dataAttributes": [
+        {
+          "name": "data-calendar-cell"
+        },
+        {
+          "name": "data-calendar-columnheader"
+        },
         {
           "name": "data-calendar-day"
         },
+        {
+          "name": "data-calendar-day-button"
+        },
+        {
+          "name": "data-calendar-header"
+        },
+        {
+          "name": "data-calendar-heading"
+        },
+        {
+          "name": "data-calendar-nav"
+        },
+        {
+          "name": "data-calendar-panel"
+        },
+        {
+          "name": "data-calendar-row"
+        },
         {
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
@@ -9714,6 +9751,9 @@
         {
           "name": "data-dp-trigger"
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-invalid",
           "description": "Present when the current field value is invalid."
@@ -10166,9 +10206,33 @@
       },
       "cssVars": {},
       "dataAttributes": [
+        {
+          "name": "data-calendar-cell"
+        },
+        {
+          "name": "data-calendar-columnheader"
+        },
         {
           "name": "data-calendar-day"
         },
+        {
+          "name": "data-calendar-day-button"
+        },
+        {
+          "name": "data-calendar-header"
+        },
+        {
+          "name": "data-calendar-heading"
+        },
+        {
+          "name": "data-calendar-nav"
+        },
+        {
+          "name": "data-calendar-panel"
+        },
+        {
+          "name": "data-calendar-row"
+        },
         {
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
@@ -10188,6 +10252,9 @@
         {
           "name": "data-in-range"
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-outside-month"
         },
@@ -10700,8 +10767,14 @@
         "--dry-range-calendar-day-hover-bg": "Calendar Day Hover Bg",
         "--dry-range-calendar-day-radius": "Calendar Day Radius",
         "--dry-range-calendar-day-size": "Calendar Day Size",
+        "--dry-range-calendar-heading-color": "Calendar Heading Color",
+        "--dry-range-calendar-nav-bg": "Calendar Nav Bg",
+        "--dry-range-calendar-nav-border": "Calendar Nav Border",
+        "--dry-range-calendar-nav-color": "Calendar Nav Color",
         "--dry-range-calendar-outside-color": "Calendar Outside Color",
         "--dry-range-calendar-padding": "Calendar Padding",
+        "--dry-range-calendar-panel-bg": "Calendar Panel Bg",
+        "--dry-range-calendar-panel-border": "Calendar Panel Border",
         "--dry-range-calendar-radius": "Calendar Radius",
         "--dry-range-calendar-range-bg": "Calendar Range Bg",
         "--dry-range-calendar-selected-bg": "Calendar Selected Bg",
@@ -10711,12 +10784,33 @@
         "--dry-range-calendar-today-color": "Calendar Today Color"
       },
       "dataAttributes": [
+        {
+          "name": "data-calendar-cell"
+        },
+        {
+          "name": "data-calendar-columnheader"
+        },
         {
           "name": "data-calendar-day"
         },
+        {
+          "name": "data-calendar-day-button"
+        },
         {
           "name": "data-calendar-header"
         },
+        {
+          "name": "data-calendar-heading"
+        },
+        {
+          "name": "data-calendar-nav"
+        },
+        {
+          "name": "data-calendar-panel"
+        },
+        {
+          "name": "data-calendar-row"
+        },
         {
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
@@ -11085,6 +11179,7 @@
       },
       "cssVars": {
         "--dry-tags-input-font-size": "Input Font Size",
+        "--dry-tags-input-gap": "Input Gap",
         "--dry-tags-input-tag-font-size": "Input Tag Font Size",
         "--dry-tags-input-tag-padding-x": "Input Tag Padding X"
       },
@@ -12540,6 +12635,7 @@
         "--dry-fab-color": "Text color",
         "--dry-fab-gap": "Gap spacing",
         "--dry-fab-offset": "Offset",
+        "--dry-fab-position": "Position",
         "--dry-fab-shadow": "Box shadow",
         "--dry-fab-z-index": "Z Index"
       },
@@ -16923,7 +17019,7 @@
     },
     "SystemMap": {
       "import": "@dryui/ui",
-      "description": "Layered architecture diagram for DolphinGraph nodes, relationships, and audit signals",
+      "description": "Layered architecture diagram that visualizes component nodes, relationships, and dependency layers",
       "category": "display",
       "tags": [
         "diagram",
@@ -16994,92 +17090,40 @@
         ],
         "note": "Forwards <div> attributes via rest props."
       },
-      "cssVars": {
-        "--dry-system-map-bg": "Map Bg",
-        "--dry-system-map-border": "Map Border",
-        "--dry-system-map-shadow": "Map Shadow",
-        "--dry-system-map-surface": "Map Surface",
-        "--dry-system-map-text": "Map Text",
-        "--dry-system-map-text-muted": "Map Text Muted"
-      },
+      "cssVars": {},
       "dataAttributes": [
         {
-          "name": "data-canvas-shell"
-        },
-        {
-          "name": "data-dashed"
-        },
-        {
-          "name": "data-edge-label"
+          "name": "data-connector"
         },
         {
-          "name": "data-empty-hint"
+          "name": "data-connector-label"
         },
         {
-          "name": "data-empty-label"
+          "name": "data-connector-line"
         },
         {
-          "name": "data-eyebrow"
+          "name": "data-edge-row"
         },
         {
-          "name": "data-group-label"
-        },
-        {
-          "name": "data-header"
-        },
-        {
-          "name": "data-header-badges"
-        },
-        {
-          "name": "data-header-text"
-        },
-        {
-          "name": "data-lane-meta"
-        },
-        {
-          "name": "data-lane-title"
-        },
-        {
-          "name": "data-legend"
-        },
-        {
-          "name": "data-legend-item"
-        },
-        {
-          "name": "data-legend-items"
-        },
-        {
-          "name": "data-legend-section"
-        },
-        {
-          "name": "data-line-swatch"
-        },
-        {
-          "name": "data-map-title"
-        },
-        {
-          "name": "data-node-description"
+          "name": "data-empty"
         },
         {
-          "name": "data-node-label"
+          "name": "data-focused"
         },
         {
-          "name": "data-node-meta"
+          "name": "data-node"
         },
         {
-          "name": "data-summary"
+          "name": "data-node-helper"
         },
         {
-          "name": "data-svg"
+          "name": "data-node-name"
         },
         {
-          "name": "data-swatch"
+          "name": "data-orphans"
         },
         {
           "name": "data-system-map"
-        },
-        {
-          "name": "data-thumbnail-object"
         }
       ],
       "example": "<SystemMap>Content</SystemMap>"
@@ -17535,8 +17579,7 @@
         },
         "blendMode": {
           "type": "BlendMode",
-          "required": false,
-          "default": "'screen'"
+          "required": false
         },
         "children": {
           "type": "Snippet",
@@ -22298,7 +22341,7 @@
       },
       "simple-content-page": {
         "name": "simple-content-page",
-        "description": "Clean content page with constrained width and vertical rhythm. Use Container for max-width and Stack for vertical spacing. Suitable for blog posts, documentation, settings pages.",
+        "description": "Clean content page with constrained width and vertical rhythm. Use Container for max-width and CSS grid for vertical spacing. Suitable for blog posts, documentation, settings pages.",
         "tags": [
           "page",
           "content",

package/dist/index.js

@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 var __create = Object.create;
 var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
@@ -8079,12 +8080,23 @@ function installCommand(packageManager) {
       return "npm install @dryui/ui";
   }
 }
+function buildThemeImportLines(spec) {
+  return `  import '${spec.themeImports.default}';
+  import '${spec.themeImports.dark}';`;
+}
 function buildThemeImportSnippet(spec) {
+  return ["<script>", buildThemeImportLines(spec), "</script>"].join(`
+`);
+}
+function buildRootLayoutSnippet(spec) {
   return [
-    '<script lang="ts">',
-    `  import '${spec.themeImports.default}';`,
-    `  import '${spec.themeImports.dark}';`,
-    "</script>"
+    "<script>",
+    buildThemeImportLines(spec),
+    "",
+    "  let { children } = $props();",
+    "</script>",
+    "",
+    "{@render children()}"
   ].join(`
 `);
 }
@@ -8192,7 +8204,7 @@ function planInstall(spec, inputPath) {
         kind: "edit-file",
         status: "pending",
         title: "Add theme imports to app.css",
-        description: "Ensure the app-level stylesheet imports both default and dark DryUI themes.",
+        description: "Prepend the two @import lines from the snippet to the TOP of the existing src/app.css file, before any other CSS rules. Do not create a second file.",
         path: detection.files.appCss,
         snippet: buildThemeImportCssSnippet(spec)
       });
@@ -8202,16 +8214,16 @@ function planInstall(spec, inputPath) {
         kind: "create-file",
         status: "pending",
         title: "Create root layout with theme imports",
-        description: "Create src/routes/+layout.svelte and add the required DryUI theme imports.",
+        description: "Create the file at the path below with the snippet as its full content. The file must include {@render children()} or pages will not render.",
         ...path ? { path } : {},
-        snippet: buildThemeImportSnippet(spec)
+        snippet: buildRootLayoutSnippet(spec)
       });
     } else {
       steps.push({
         kind: "edit-file",
         status: "pending",
         title: "Add theme imports to the root layout",
-        description: "Ensure the root layout imports both default and dark DryUI themes.",
+        description: "Add the two import lines from the snippet into the EXISTING <script> block in this file. Do not create a second <script> block. If no <script> block exists, add one at the top of the file.",
         path: detection.files.rootLayout,
         snippet: buildThemeImportSnippet(spec)
       });
@@ -8229,9 +8241,9 @@ function planInstall(spec, inputPath) {
       kind: "edit-file",
       status: "pending",
       title: "Set html theme mode to auto",
-      description: 'Add class="theme-auto" to the html element in src/app.html.',
+      description: 'In src/app.html, find the opening <html> tag (e.g. <html lang="en">) and add class="theme-auto" to it, preserving any existing attributes. Result should be like <html lang="en" class="theme-auto">. Do NOT add a second <html> element.',
       path: detection.files.appHtml,
-      snippet: '<html class="theme-auto">'
+      snippet: '<html lang="en" class="theme-auto">'
     });
   }
   if (steps.length === 0) {

package/dist/project-planner.js

@@ -158,12 +158,23 @@ function installCommand(packageManager) {
       return "npm install @dryui/ui";
   }
 }
+function buildThemeImportLines(spec) {
+  return `  import '${spec.themeImports.default}';
+  import '${spec.themeImports.dark}';`;
+}
 function buildThemeImportSnippet(spec) {
+  return ["<script>", buildThemeImportLines(spec), "</script>"].join(`
+`);
+}
+function buildRootLayoutSnippet(spec) {
   return [
-    '<script lang="ts">',
-    `  import '${spec.themeImports.default}';`,
-    `  import '${spec.themeImports.dark}';`,
-    "</script>"
+    "<script>",
+    buildThemeImportLines(spec),
+    "",
+    "  let { children } = $props();",
+    "</script>",
+    "",
+    "{@render children()}"
   ].join(`
 `);
 }
@@ -271,7 +282,7 @@ function planInstall(spec, inputPath) {
         kind: "edit-file",
         status: "pending",
         title: "Add theme imports to app.css",
-        description: "Ensure the app-level stylesheet imports both default and dark DryUI themes.",
+        description: "Prepend the two @import lines from the snippet to the TOP of the existing src/app.css file, before any other CSS rules. Do not create a second file.",
         path: detection.files.appCss,
         snippet: buildThemeImportCssSnippet(spec)
       });
@@ -281,16 +292,16 @@ function planInstall(spec, inputPath) {
         kind: "create-file",
         status: "pending",
         title: "Create root layout with theme imports",
-        description: "Create src/routes/+layout.svelte and add the required DryUI theme imports.",
+        description: "Create the file at the path below with the snippet as its full content. The file must include {@render children()} or pages will not render.",
         ...path ? { path } : {},
-        snippet: buildThemeImportSnippet(spec)
+        snippet: buildRootLayoutSnippet(spec)
       });
     } else {
       steps.push({
         kind: "edit-file",
         status: "pending",
         title: "Add theme imports to the root layout",
-        description: "Ensure the root layout imports both default and dark DryUI themes.",
+        description: "Add the two import lines from the snippet into the EXISTING <script> block in this file. Do not create a second <script> block. If no <script> block exists, add one at the top of the file.",
         path: detection.files.rootLayout,
         snippet: buildThemeImportSnippet(spec)
       });
@@ -308,9 +319,9 @@ function planInstall(spec, inputPath) {
       kind: "edit-file",
       status: "pending",
       title: "Set html theme mode to auto",
-      description: 'Add class="theme-auto" to the html element in src/app.html.',
+      description: 'In src/app.html, find the opening <html> tag (e.g. <html lang="en">) and add class="theme-auto" to it, preserving any existing attributes. Result should be like <html lang="en" class="theme-auto">. Do NOT add a second <html> element.',
       path: detection.files.appHtml,
-      snippet: '<html class="theme-auto">'
+      snippet: '<html lang="en" class="theme-auto">'
     });
   }
   if (steps.length === 0) {

package/dist/spec.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.3",
+  "version": "0.1.5",
   "package": "@dryui/ui",
   "themeImports": {
     "default": "@dryui/ui/themes/default.css",
@@ -883,6 +883,13 @@
         ]
       },
       "cssVars": {
+        "--dry-btn-accent": "Accent",
+        "--dry-btn-accent-active": "Accent Active",
+        "--dry-btn-accent-fg": "Accent Fg",
+        "--dry-btn-accent-hover": "Accent Hover",
+        "--dry-btn-accent-stroke": "Accent Stroke",
+        "--dry-btn-border": "Border color",
+        "--dry-btn-on-accent": "On Accent",
         "--dry-dialog-bg": "Background color",
         "--dry-dialog-border": "Border color",
         "--dry-dialog-max-width": "Maximum width",
@@ -1922,6 +1929,9 @@
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-orientation",
           "description": "Reflects the current horizontal or vertical orientation.",
@@ -2048,6 +2058,9 @@
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-state",
           "description": "Reflects whether the collapsible content is expanded or collapsed.",
@@ -2441,8 +2454,7 @@
         ]
       },
       "cssVars": {
-        "--dry-field-gap": "Gap spacing",
-        "--dry-field-label-order": "Label Order"
+        "--dry-field-gap": "Gap spacing"
       },
       "dataAttributes": [
         {
@@ -3203,6 +3215,9 @@
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-invalid",
           "description": "Present when the current field value is invalid."
@@ -4288,9 +4303,6 @@
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
         },
-        {
-          "name": "data-option-swatch-group-content"
-        },
         {
           "name": "data-option-swatch-group-item"
         },
@@ -7836,11 +7848,11 @@
         "tree": [
           "Timeline.Root",
           "  Timeline.Item",
-          "  Timeline.Icon",
-          "  Timeline.Content",
-          "  Timeline.Title",
-          "  Timeline.Description",
-          "  Timeline.Time"
+          "    Timeline.Icon",
+          "    Timeline.Content",
+          "      Timeline.Title",
+          "      Timeline.Description",
+          "      Timeline.Time"
         ]
       },
       "cssVars": {
@@ -7877,7 +7889,7 @@
           "name": "data-part"
         }
       ],
-      "example": "<Timeline.Root>\n  <Timeline.Item>...</Timeline.Item>\n  <Timeline.Icon>...</Timeline.Icon>\n  <Timeline.Content>...</Timeline.Content>\n  <Timeline.Title>...</Timeline.Title>\n  <Timeline.Description>...</Timeline.Description>\n  <Timeline.Time>...</Timeline.Time>\n</Timeline.Root>"
+      "example": "<Timeline.Root>\n  <Timeline.Item>\n    <Timeline.Icon />\n    <Timeline.Content>\n      <Timeline.Title>Event title</Timeline.Title>\n      <Timeline.Description>Event description</Timeline.Description>\n      <Timeline.Time>2 hours ago</Timeline.Time>\n    </Timeline.Content>\n  </Timeline.Item>\n</Timeline.Root>"
     },
     "Typography": {
       "import": "@dryui/ui",
@@ -9547,6 +9559,7 @@
         ]
       },
       "cssVars": {
+        "--dry-calendar-grid-gap": "Grid Gap",
         "--dry-dp-bg": "Background color",
         "--dry-dp-border": "Border color",
         "--dry-dp-font-size": "Font size",
@@ -9554,9 +9567,33 @@
         "--dry-dp-padding-y": "Vertical padding"
       },
       "dataAttributes": [
+        {
+          "name": "data-calendar-cell"
+        },
+        {
+          "name": "data-calendar-columnheader"
+        },
         {
           "name": "data-calendar-day"
         },
+        {
+          "name": "data-calendar-day-button"
+        },
+        {
+          "name": "data-calendar-header"
+        },
+        {
+          "name": "data-calendar-heading"
+        },
+        {
+          "name": "data-calendar-nav"
+        },
+        {
+          "name": "data-calendar-panel"
+        },
+        {
+          "name": "data-calendar-row"
+        },
         {
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
@@ -9570,6 +9607,9 @@
         {
           "name": "data-dp-trigger"
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-invalid",
           "description": "Present when the current field value is invalid."
@@ -10022,9 +10062,33 @@
       },
       "cssVars": {},
       "dataAttributes": [
+        {
+          "name": "data-calendar-cell"
+        },
+        {
+          "name": "data-calendar-columnheader"
+        },
         {
           "name": "data-calendar-day"
         },
+        {
+          "name": "data-calendar-day-button"
+        },
+        {
+          "name": "data-calendar-header"
+        },
+        {
+          "name": "data-calendar-heading"
+        },
+        {
+          "name": "data-calendar-nav"
+        },
+        {
+          "name": "data-calendar-panel"
+        },
+        {
+          "name": "data-calendar-row"
+        },
         {
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
@@ -10044,6 +10108,9 @@
         {
           "name": "data-in-range"
         },
+        {
+          "name": "data-indicator"
+        },
         {
           "name": "data-outside-month"
         },
@@ -10556,8 +10623,14 @@
         "--dry-range-calendar-day-hover-bg": "Calendar Day Hover Bg",
         "--dry-range-calendar-day-radius": "Calendar Day Radius",
         "--dry-range-calendar-day-size": "Calendar Day Size",
+        "--dry-range-calendar-heading-color": "Calendar Heading Color",
+        "--dry-range-calendar-nav-bg": "Calendar Nav Bg",
+        "--dry-range-calendar-nav-border": "Calendar Nav Border",
+        "--dry-range-calendar-nav-color": "Calendar Nav Color",
         "--dry-range-calendar-outside-color": "Calendar Outside Color",
         "--dry-range-calendar-padding": "Calendar Padding",
+        "--dry-range-calendar-panel-bg": "Calendar Panel Bg",
+        "--dry-range-calendar-panel-border": "Calendar Panel Border",
         "--dry-range-calendar-radius": "Calendar Radius",
         "--dry-range-calendar-range-bg": "Calendar Range Bg",
         "--dry-range-calendar-selected-bg": "Calendar Selected Bg",
@@ -10567,12 +10640,33 @@
         "--dry-range-calendar-today-color": "Calendar Today Color"
       },
       "dataAttributes": [
+        {
+          "name": "data-calendar-cell"
+        },
+        {
+          "name": "data-calendar-columnheader"
+        },
         {
           "name": "data-calendar-day"
         },
+        {
+          "name": "data-calendar-day-button"
+        },
         {
           "name": "data-calendar-header"
         },
+        {
+          "name": "data-calendar-heading"
+        },
+        {
+          "name": "data-calendar-nav"
+        },
+        {
+          "name": "data-calendar-panel"
+        },
+        {
+          "name": "data-calendar-row"
+        },
         {
           "name": "data-disabled",
           "description": "Present when the component or part is disabled."
@@ -10941,6 +11035,7 @@
       },
       "cssVars": {
         "--dry-tags-input-font-size": "Input Font Size",
+        "--dry-tags-input-gap": "Input Gap",
         "--dry-tags-input-tag-font-size": "Input Tag Font Size",
         "--dry-tags-input-tag-padding-x": "Input Tag Padding X"
       },
@@ -12396,6 +12491,7 @@
         "--dry-fab-color": "Text color",
         "--dry-fab-gap": "Gap spacing",
         "--dry-fab-offset": "Offset",
+        "--dry-fab-position": "Position",
         "--dry-fab-shadow": "Box shadow",
         "--dry-fab-z-index": "Z Index"
       },
@@ -16779,7 +16875,7 @@
     },
     "SystemMap": {
       "import": "@dryui/ui",
-      "description": "Layered architecture diagram for DolphinGraph nodes, relationships, and audit signals",
+      "description": "Layered architecture diagram that visualizes component nodes, relationships, and dependency layers",
       "category": "display",
       "tags": [
         "diagram",
@@ -16850,92 +16946,40 @@
         ],
         "note": "Forwards <div> attributes via rest props."
       },
-      "cssVars": {
-        "--dry-system-map-bg": "Map Bg",
-        "--dry-system-map-border": "Map Border",
-        "--dry-system-map-shadow": "Map Shadow",
-        "--dry-system-map-surface": "Map Surface",
-        "--dry-system-map-text": "Map Text",
-        "--dry-system-map-text-muted": "Map Text Muted"
-      },
+      "cssVars": {},
       "dataAttributes": [
         {
-          "name": "data-canvas-shell"
-        },
-        {
-          "name": "data-dashed"
-        },
-        {
-          "name": "data-edge-label"
+          "name": "data-connector"
         },
         {
-          "name": "data-empty-hint"
+          "name": "data-connector-label"
         },
         {
-          "name": "data-empty-label"
+          "name": "data-connector-line"
         },
         {
-          "name": "data-eyebrow"
+          "name": "data-edge-row"
         },
         {
-          "name": "data-group-label"
-        },
-        {
-          "name": "data-header"
-        },
-        {
-          "name": "data-header-badges"
-        },
-        {
-          "name": "data-header-text"
-        },
-        {
-          "name": "data-lane-meta"
-        },
-        {
-          "name": "data-lane-title"
-        },
-        {
-          "name": "data-legend"
-        },
-        {
-          "name": "data-legend-item"
-        },
-        {
-          "name": "data-legend-items"
-        },
-        {
-          "name": "data-legend-section"
-        },
-        {
-          "name": "data-line-swatch"
-        },
-        {
-          "name": "data-map-title"
-        },
-        {
-          "name": "data-node-description"
+          "name": "data-empty"
         },
         {
-          "name": "data-node-label"
+          "name": "data-focused"
         },
         {
-          "name": "data-node-meta"
+          "name": "data-node"
         },
         {
-          "name": "data-summary"
+          "name": "data-node-helper"
         },
         {
-          "name": "data-svg"
+          "name": "data-node-name"
         },
         {
-          "name": "data-swatch"
+          "name": "data-orphans"
         },
         {
           "name": "data-system-map"
-        },
-        {
-          "name": "data-thumbnail-object"
         }
       ],
       "example": "<SystemMap>Content</SystemMap>"
@@ -17391,8 +17435,7 @@
         },
         "blendMode": {
           "type": "BlendMode",
-          "required": false,
-          "default": "'screen'"
+          "required": false
         },
         "children": {
           "type": "Snippet",
@@ -22154,7 +22197,7 @@
       },
       "simple-content-page": {
         "name": "simple-content-page",
-        "description": "Clean content page with constrained width and vertical rhythm. Use Container for max-width and Stack for vertical spacing. Suitable for blog posts, documentation, settings pages.",
+        "description": "Clean content page with constrained width and vertical rhythm. Use Container for max-width and CSS grid for vertical spacing. Suitable for blog posts, documentation, settings pages.",
         "tags": [
           "page",
           "content",

package/dist/workspace-audit.js

@@ -1607,12 +1607,23 @@ function installCommand(packageManager) {
       return "npm install @dryui/ui";
   }
 }
+function buildThemeImportLines(spec) {
+  return `  import '${spec.themeImports.default}';
+  import '${spec.themeImports.dark}';`;
+}
 function buildThemeImportSnippet(spec) {
+  return ["<script>", buildThemeImportLines(spec), "</script>"].join(`
+`);
+}
+function buildRootLayoutSnippet(spec) {
   return [
-    '<script lang="ts">',
-    `  import '${spec.themeImports.default}';`,
-    `  import '${spec.themeImports.dark}';`,
-    "</script>"
+    "<script>",
+    buildThemeImportLines(spec),
+    "",
+    "  let { children } = $props();",
+    "</script>",
+    "",
+    "{@render children()}"
   ].join(`
 `);
 }
@@ -1720,7 +1731,7 @@ function planInstall(spec, inputPath) {
         kind: "edit-file",
         status: "pending",
         title: "Add theme imports to app.css",
-        description: "Ensure the app-level stylesheet imports both default and dark DryUI themes.",
+        description: "Prepend the two @import lines from the snippet to the TOP of the existing src/app.css file, before any other CSS rules. Do not create a second file.",
         path: detection.files.appCss,
         snippet: buildThemeImportCssSnippet(spec)
       });
@@ -1730,16 +1741,16 @@ function planInstall(spec, inputPath) {
         kind: "create-file",
         status: "pending",
         title: "Create root layout with theme imports",
-        description: "Create src/routes/+layout.svelte and add the required DryUI theme imports.",
+        description: "Create the file at the path below with the snippet as its full content. The file must include {@render children()} or pages will not render.",
         ...path ? { path } : {},
-        snippet: buildThemeImportSnippet(spec)
+        snippet: buildRootLayoutSnippet(spec)
       });
     } else {
       steps.push({
         kind: "edit-file",
         status: "pending",
         title: "Add theme imports to the root layout",
-        description: "Ensure the root layout imports both default and dark DryUI themes.",
+        description: "Add the two import lines from the snippet into the EXISTING <script> block in this file. Do not create a second <script> block. If no <script> block exists, add one at the top of the file.",
         path: detection.files.rootLayout,
         snippet: buildThemeImportSnippet(spec)
       });
@@ -1757,9 +1768,9 @@ function planInstall(spec, inputPath) {
       kind: "edit-file",
       status: "pending",
       title: "Set html theme mode to auto",
-      description: 'Add class="theme-auto" to the html element in src/app.html.',
+      description: 'In src/app.html, find the opening <html> tag (e.g. <html lang="en">) and add class="theme-auto" to it, preserving any existing attributes. Result should be like <html lang="en" class="theme-auto">. Do NOT add a second <html> element.',
       path: detection.files.appHtml,
-      snippet: '<html class="theme-auto">'
+      snippet: '<html lang="en" class="theme-auto">'
     });
   }
   if (steps.length === 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/mcp",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -71,9 +71,6 @@
   "files": [
     "dist"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "generate-spec": "bun src/generate-spec.ts",
     "generate-architecture": "bun src/generate-architecture.ts",
@@ -81,7 +78,7 @@
     "generate-llms": "bun src/generate-llms-txt.ts",
     "check:contract": "bun src/check-contract.ts",
     "check": "bun run check:contract",
-    "build": "bun run generate-spec && bun run generate-architecture && bun run generate-contract && bun run generate-llms && mkdir -p dist && cp src/spec.json dist/spec.json && cp src/architecture.json dist/architecture.json && cp src/contract.v1.json dist/contract.v1.json && cp src/contract.v1.schema.json dist/contract.v1.schema.json && bun build src/index.ts src/architecture.ts src/reviewer.ts src/theme-checker.ts src/utils.ts src/project-planner.ts src/workspace-audit.ts src/spec-types.ts src/spec-formatters.ts src/composition-data.ts --outdir dist --root src --target node && bunx tsc -p tsconfig.build.json"
+    "build": "bun run generate-spec && bun run generate-architecture && bun run generate-contract && bun run generate-llms && mkdir -p dist && cp src/spec.json dist/spec.json && cp src/architecture.json dist/architecture.json && cp src/contract.v1.json dist/contract.v1.json && cp src/contract.v1.schema.json dist/contract.v1.schema.json && bun build src/index.ts src/architecture.ts src/reviewer.ts src/theme-checker.ts src/utils.ts src/project-planner.ts src/workspace-audit.ts src/spec-types.ts src/spec-formatters.ts src/composition-data.ts --outdir dist --root src --target node && printf '#!/usr/bin/env node\n' | cat - dist/index.js > dist/index.tmp && mv dist/index.tmp dist/index.js && bunx tsc -p tsconfig.build.json"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",