@dryui/mcp 0.1.2 → 0.1.4

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-07T21:02:38.014Z",
-  "packageVersion": "0.1.4",
+  "generatedAt": "2026-04-07T22:06:54.170Z",
+  "packageVersion": "0.1.5",
   "summary": {
     "componentNodes": 292,
     "partNodes": 662,

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.4"
+    "version": "0.1.5"
   },
   "counts": {
     "components": 144,
@@ -22341,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

@@ -8080,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(`
 `);
 }
@@ -8135,7 +8146,8 @@ function detectProject(spec, inputPath) {
   const themeImportFiles = rootLayout && importsAppCss(rootLayout) ? [rootLayout, appCss] : [rootLayout];
   const defaultImported = hasAnyImport(themeImportFiles, spec.themeImports.default);
   const darkImported = hasAnyImport(themeImportFiles, spec.themeImports.dark);
-  const stepsNeeded = Number(!dependencyNames.has("@dryui/ui")) + Number(!defaultImported) + Number(!darkImported) + Number(!(appHtml && hasThemeAuto(appHtml)));
+  const themeAuto = appHtml ? hasThemeAuto(appHtml) : false;
+  const stepsNeeded = Number(!dependencyNames.has("@dryui/ui")) + Number(!defaultImported) + Number(!darkImported) + Number(!themeAuto);
   const warnings = [];
   if (!packageJsonPath)
     warnings.push("No package.json found above the provided path.");
@@ -8161,7 +8173,7 @@ function detectProject(spec, inputPath) {
     theme: {
       defaultImported,
       darkImported,
-      themeAuto: hasThemeAuto(appHtml)
+      themeAuto
     },
     warnings
   };
@@ -8193,7 +8205,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)
       });
@@ -8203,16 +8215,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)
       });
@@ -8230,9 +8242,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: 'class="theme-auto"'
     });
   }
   if (steps.length === 0) {
@@ -30680,8 +30692,8 @@ var SERVER_INSTRUCTIONS = [
   '1. SET UP THE APP SHELL FIRST: Run `compose "app shell"` to get the root layout template.',
   '   Your +layout.svelte must import the theme CSS, and app.html needs <html class="theme-auto">.',
   "",
-  "2. PAGE LAYOUT: Use PageHeader.Root + Container + Stack for page structure.",
-  "   This gives you a header, constrained content width, and vertical rhythm.",
+  "2. PAGE LAYOUT: Use CSS grid for layout — not flexbox. Use Container for constrained content",
+  "   width. Use `@container` queries for responsive sizing (never `@media` for layout).",
   "",
   "3. CORRECT CSS TOKENS: Background is --dry-color-bg-base (not --dry-color-bg).",
   '   Text is --dry-color-text-strong (not --dry-color-text). See compose "app shell" for the full reset.',
@@ -30693,10 +30705,9 @@ var SERVER_INSTRUCTIONS = [
   "   the compose tool are instructions for YOU, not content for the page. Never render them as",
   "   visible text in the UI. Only use the code snippets from compose output.",
   "",
-  "6. USE DRYUI LAYOUT COMPONENTS, NOT CUSTOM CSS: Grid instead of `display: grid`, Flex instead",
-  "   of `display: flex`, Stack instead of vertical flex. Use Field.Root + Label for form fields,",
-  "   Button instead of raw `<button>`. Never write custom CSS for layout, spacing, or form",
-  "   structure when a DryUI component exists."
+  "6. USE DRYUI COMPONENTS FOR UI ELEMENTS: Use Field.Root + Label for form fields, Button instead",
+  "   of raw `<button>`, Separator instead of `<hr>`. Always call `info` or `compose` to check",
+  "   if a DryUI component exists before writing raw HTML."
 ].join(`
 `);
 var server = new McpServer({ name: "@dryui/mcp", version: version2 }, {

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(`
 `);
 }
@@ -213,7 +224,8 @@ function detectProject(spec, inputPath) {
   const themeImportFiles = rootLayout && importsAppCss(rootLayout) ? [rootLayout, appCss] : [rootLayout];
   const defaultImported = hasAnyImport(themeImportFiles, spec.themeImports.default);
   const darkImported = hasAnyImport(themeImportFiles, spec.themeImports.dark);
-  const stepsNeeded = Number(!dependencyNames.has("@dryui/ui")) + Number(!defaultImported) + Number(!darkImported) + Number(!(appHtml && hasThemeAuto(appHtml)));
+  const themeAuto = appHtml ? hasThemeAuto(appHtml) : false;
+  const stepsNeeded = Number(!dependencyNames.has("@dryui/ui")) + Number(!defaultImported) + Number(!darkImported) + Number(!themeAuto);
   const warnings = [];
   if (!packageJsonPath)
     warnings.push("No package.json found above the provided path.");
@@ -239,7 +251,7 @@ function detectProject(spec, inputPath) {
     theme: {
       defaultImported,
       darkImported,
-      themeAuto: hasThemeAuto(appHtml)
+      themeAuto
     },
     warnings
   };
@@ -271,7 +283,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 +293,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 +320,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: 'class="theme-auto"'
     });
   }
   if (steps.length === 0) {

package/dist/spec.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.4",
+  "version": "0.1.5",
   "package": "@dryui/ui",
   "themeImports": {
     "default": "@dryui/ui/themes/default.css",
@@ -22197,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(`
 `);
 }
@@ -1662,7 +1673,8 @@ function detectProject(spec, inputPath) {
   const themeImportFiles = rootLayout && importsAppCss(rootLayout) ? [rootLayout, appCss] : [rootLayout];
   const defaultImported = hasAnyImport(themeImportFiles, spec.themeImports.default);
   const darkImported = hasAnyImport(themeImportFiles, spec.themeImports.dark);
-  const stepsNeeded = Number(!dependencyNames.has("@dryui/ui")) + Number(!defaultImported) + Number(!darkImported) + Number(!(appHtml && hasThemeAuto(appHtml)));
+  const themeAuto = appHtml ? hasThemeAuto(appHtml) : false;
+  const stepsNeeded = Number(!dependencyNames.has("@dryui/ui")) + Number(!defaultImported) + Number(!darkImported) + Number(!themeAuto);
   const warnings = [];
   if (!packageJsonPath)
     warnings.push("No package.json found above the provided path.");
@@ -1688,7 +1700,7 @@ function detectProject(spec, inputPath) {
     theme: {
       defaultImported,
       darkImported,
-      themeAuto: hasThemeAuto(appHtml)
+      themeAuto
     },
     warnings
   };
@@ -1720,7 +1732,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 +1742,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 +1769,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: 'class="theme-auto"'
     });
   }
   if (steps.length === 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/mcp",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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",