@dryui/mcp 0.2.1 → 0.3.0

package/dist/architecture.js

@@ -4334,21 +4334,10 @@ var compositionRecipes = [
   </body>
 </html>
 
-<!-- 2. src/app.css — global reset with DryUI tokens -->
+<!-- 2. src/app.css — import themes (resets are built in) -->
 @import '@dryui/ui/themes/default.css';
 @import '@dryui/ui/themes/dark.css';
 
-*, *::before, *::after { box-sizing: border-box; margin: 0; }
-
-html {
-  font-family: var(--dry-font-sans);
-  color: var(--dry-color-text-strong);
-  background: var(--dry-color-bg-base);
-  -webkit-font-smoothing: antialiased;
-}
-
-body { margin: 0; min-height: 100dvh; }
-
 <!-- 3. src/routes/+layout.svelte — root layout -->
 <script>
   import '../app.css';

package/dist/architecture.json

@@ -1,6 +1,6 @@
 {
   "schema": "DolphinGraph",
-  "packageVersion": "0.1.8",
+  "packageVersion": "0.1.12",
   "summary": {
     "componentNodes": 292,
     "partNodes": 662,

package/dist/composition-data.js

@@ -4334,21 +4334,10 @@ var compositionRecipes = [
   </body>
 </html>
 
-<!-- 2. src/app.css — global reset with DryUI tokens -->
+<!-- 2. src/app.css — import themes (resets are built in) -->
 @import '@dryui/ui/themes/default.css';
 @import '@dryui/ui/themes/dark.css';
 
-*, *::before, *::after { box-sizing: border-box; margin: 0; }
-
-html {
-  font-family: var(--dry-font-sans);
-  color: var(--dry-color-text-strong);
-  background: var(--dry-color-bg-base);
-  -webkit-font-smoothing: antialiased;
-}
-
-body { margin: 0; min-height: 100dvh; }
-
 <!-- 3. src/routes/+layout.svelte — root layout -->
 <script>
   import '../app.css';

package/dist/contract.v1.json

@@ -3,7 +3,7 @@
   "version": 1,
   "package": {
     "name": "@dryui/ui",
-    "version": "0.1.8"
+    "version": "0.1.12"
   },
   "counts": {
     "components": 144,
@@ -11855,14 +11855,18 @@
         ]
       },
       "cssVars": {
+        "--dry-alpha-rgb": "Rgb",
         "--dry-color-picker-area-height": "Picker Area Height",
         "--dry-color-picker-area-width": "Picker Area Width",
         "--dry-color-picker-grid-dark": "Picker Grid Dark",
         "--dry-color-picker-grid-light": "Picker Grid Light",
         "--dry-color-picker-grid-size": "Picker Grid Size",
         "--dry-color-picker-indicator-border": "Picker Indicator Border",
+        "--dry-color-picker-indicator-color": "Picker Indicator Color",
+        "--dry-color-picker-indicator-left": "Picker Indicator Left",
         "--dry-color-picker-indicator-shadow": "Picker Indicator Shadow",
         "--dry-color-picker-indicator-size": "Picker Indicator Size",
+        "--dry-color-picker-indicator-top": "Picker Indicator Top",
         "--dry-color-picker-slider-thumb-bg": "Picker Slider Thumb Bg",
         "--dry-color-picker-slider-thumb-border": "Picker Slider Thumb Border",
         "--dry-color-picker-slider-thumb-shadow": "Picker Slider Thumb Shadow",
@@ -11873,7 +11877,9 @@
         "--dry-color-picker-swatch-size": "Picker Swatch Size",
         "--dry-color-picker-width": "Picker Width",
         "--dry-slider-thumb-size": "Thumb size",
-        "--dry-slider-track-height": "Track height"
+        "--dry-slider-track-height": "Track height",
+        "--dry-swatch-color": "Text color",
+        "--dry-swatch-opacity": "Opacity"
       },
       "dataAttributes": [
         {
@@ -12337,7 +12343,13 @@
         ],
         "note": "Forwards <div> attributes via rest props."
       },
-      "cssVars": {},
+      "cssVars": {
+        "--dry-spotlight-color": "Text color",
+        "--dry-spotlight-intensity": "Intensity",
+        "--dry-spotlight-radius": "Border radius",
+        "--dry-spotlight-x": "X",
+        "--dry-spotlight-y": "Y"
+      },
       "dataAttributes": [
         {
           "name": "data-active",
@@ -12424,8 +12436,10 @@
         "--dry-aurora-color-2": "Color 2",
         "--dry-aurora-color-3": "Color 3",
         "--dry-aurora-duration": "Duration",
+        "--dry-aurora-intensity": "Intensity",
         "--dry-aurora-shift": "Shift",
-        "--dry-aurora-surface": "Surface"
+        "--dry-aurora-surface": "Surface",
+        "--dry-aurora-waviness": "Waviness"
       },
       "dataAttributes": [
         {
@@ -13076,6 +13090,9 @@
       "dataAttributes": [
         {
           "name": "data-virtual-list"
+        },
+        {
+          "name": "data-virtual-list-inner"
         }
       ],
       "example": "<VirtualList>Content</VirtualList>"
@@ -15335,6 +15352,7 @@
         "--dry-image-comparison-handle-shadow": "Comparison Handle Shadow",
         "--dry-image-comparison-handle-width": "Comparison Handle Width",
         "--dry-image-comparison-handle-z-index": "Comparison Handle Z Index",
+        "--dry-image-comparison-position": "Comparison Position",
         "--dry-image-comparison-radius": "Comparison Radius"
       },
       "dataAttributes": [
@@ -17616,7 +17634,13 @@
         ],
         "note": "Forwards <div> attributes via rest props."
       },
-      "cssVars": {},
+      "cssVars": {
+        "--dry-beam-angle": "Angle",
+        "--dry-beam-color": "Text color",
+        "--dry-beam-intensity": "Intensity",
+        "--dry-beam-speed": "Speed",
+        "--dry-beam-width": "Width"
+      },
       "dataAttributes": [
         {
           "name": "data-beam"
@@ -17735,7 +17759,14 @@
         ],
         "note": "Forwards <div> attributes via rest props."
       },
-      "cssVars": {},
+      "cssVars": {
+        "--dry-rays-blend": "Blend",
+        "--dry-rays-color": "Text color",
+        "--dry-rays-cx": "Cx",
+        "--dry-rays-cy": "Cy",
+        "--dry-rays-intensity": "Intensity",
+        "--dry-rays-speed": "Speed"
+      },
       "dataAttributes": [
         {
           "name": "data-animated"
@@ -22321,7 +22352,7 @@
         "components": [
           "Container"
         ],
-        "snippet": "<!-- 1. app.html — add theme-auto class -->\n<!doctype html>\n<html lang=\"en\" class=\"theme-auto\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    %sveltekit.head%\n  </head>\n  <body>\n    <div style=\"display: contents\">%sveltekit.body%</div>\n  </body>\n</html>\n\n<!-- 2. src/app.css — global reset with DryUI tokens -->\n@import '@dryui/ui/themes/default.css';\n@import '@dryui/ui/themes/dark.css';\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; }\n\nhtml {\n  font-family: var(--dry-font-sans);\n  color: var(--dry-color-text-strong);\n  background: var(--dry-color-bg-base);\n  -webkit-font-smoothing: antialiased;\n}\n\nbody { margin: 0; min-height: 100dvh; }\n\n<!-- 3. src/routes/+layout.svelte — root layout -->\n<script>\n  import '../app.css';\n  import { Container } from '@dryui/ui';\n\n  let { children } = $props();\n</script>\n\n<header>\n  <Container>\n    <div class=\"app-header\">My App</div>\n  </Container>\n</header>\n<main>\n  <Container>\n    <div class=\"page-content\">\n      {@render children()}\n    </div>\n  </Container>\n</main>\n\n<style>\n  .app-header { padding: var(--dry-space-4) 0; font-weight: bold; }\n  .page-content { display: grid; gap: var(--dry-space-6); }\n</style>"
+        "snippet": "<!-- 1. app.html — add theme-auto class -->\n<!doctype html>\n<html lang=\"en\" class=\"theme-auto\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    %sveltekit.head%\n  </head>\n  <body>\n    <div style=\"display: contents\">%sveltekit.body%</div>\n  </body>\n</html>\n\n<!-- 2. src/app.css — import themes (resets are built in) -->\n@import '@dryui/ui/themes/default.css';\n@import '@dryui/ui/themes/dark.css';\n\n<!-- 3. src/routes/+layout.svelte — root layout -->\n<script>\n  import '../app.css';\n  import { Container } from '@dryui/ui';\n\n  let { children } = $props();\n</script>\n\n<header>\n  <Container>\n    <div class=\"app-header\">My App</div>\n  </Container>\n</header>\n<main>\n  <Container>\n    <div class=\"page-content\">\n      {@render children()}\n    </div>\n  </Container>\n</main>\n\n<style>\n  .app-header { padding: var(--dry-space-4) 0; font-weight: bold; }\n  .page-content { display: grid; gap: var(--dry-space-6); }\n</style>"
       },
       "page-shell-simple": {
         "name": "page-shell-simple",

package/dist/index.js

@@ -8026,6 +8026,18 @@ function detectPackageManager(root) {
     return "yarn";
   return "unknown";
 }
+function detectPackageManagerFromEnv() {
+  const ua = process.env.npm_config_user_agent ?? "";
+  if (ua.startsWith("bun/"))
+    return "bun";
+  if (ua.startsWith("pnpm/"))
+    return "pnpm";
+  if (ua.startsWith("yarn/"))
+    return "yarn";
+  if (ua.startsWith("npm/"))
+    return "npm";
+  return "npm";
+}
 function readPackageJson(packageJsonPath) {
   if (!packageJsonPath)
     return null;
@@ -8178,17 +8190,216 @@ function detectProject(spec, inputPath) {
     warnings
   };
 }
-function planInstall(spec, inputPath) {
-  const detection = detectProject(spec, inputPath);
+var SCAFFOLD_PACKAGE_JSON = `{
+  "name": "my-dryui-app",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+`;
+var SCAFFOLD_SVELTE_CONFIG = `import adapter from '@sveltejs/adapter-auto';
+
+export default {
+  kit: {
+    adapter: adapter(),
+  },
+};
+`;
+var SCAFFOLD_VITE_CONFIG = `import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+});
+`;
+var SCAFFOLD_TSCONFIG = `{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "target": "ES2020"
+  }
+}
+`;
+var SCAFFOLD_APP_HTML = `<!doctype html>
+<html lang="en" class="theme-auto">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/favicon.svg" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
+`;
+var SCAFFOLD_APP_CSS = `/* Global reset with DryUI tokens */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+}
+
+html {
+	font-family: var(--dry-font-sans);
+	color: var(--dry-color-text-strong);
+	background: var(--dry-color-bg-base);
+	-webkit-font-smoothing: antialiased;
+}
+
+body {
+	margin: 0;
+	min-height: 100dvh;
+}
+`;
+function buildScaffoldRootLayout(spec) {
+  return `<script>
+  import '../app.css';
+  import '${spec.themeImports.default}';
+  import '${spec.themeImports.dark}';
+
+  let { children } = $props();
+</script>
+
+{@render children()}
+`;
+}
+var SCAFFOLD_STARTER_PAGE = `<script lang="ts">
+	import { Container, Heading, Text } from '@dryui/ui';
+</script>
+
+<svelte:head>
+	<title>My App</title>
+</svelte:head>
+
+<div class="starter">
+	<Container size="md">
+		<Heading level={1}>Hello, World</Heading>
+		<Text size="lg" color="muted">Your DryUI project is ready. Start building.</Text>
+	</Container>
+</div>
+
+<style>
+	.starter {
+		padding-block: var(--dry-space-16);
+		display: grid;
+		gap: var(--dry-space-4);
+	}
+</style>
+`;
+var SCAFFOLD_FAVICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <rect width="64" height="64" rx="18" fill="#16171f"/>
+  <rect x="10" y="10" width="44" height="44" rx="14" fill="#eef2ff"/>
+  <path d="M20 20h10v24H20z" fill="#1f2937"/>
+  <path d="M34 20h10c4.418 0 8 3.582 8 8v0c0 4.418-3.582 8-8 8h-4v8h-6V20z" fill="#4f46e5"/>
+  <circle cx="44" cy="28" r="4" fill="#f59e0b"/>
+</svg>
+`;
+function getScaffoldFiles(spec) {
+  return [
+    {
+      relativePath: "package.json",
+      content: SCAFFOLD_PACKAGE_JSON,
+      description: "Project manifest with SvelteKit scripts"
+    },
+    {
+      relativePath: "svelte.config.js",
+      content: SCAFFOLD_SVELTE_CONFIG,
+      description: "SvelteKit configuration with adapter-auto"
+    },
+    {
+      relativePath: "vite.config.ts",
+      content: SCAFFOLD_VITE_CONFIG,
+      description: "Vite configuration with SvelteKit plugin"
+    },
+    {
+      relativePath: "tsconfig.json",
+      content: SCAFFOLD_TSCONFIG,
+      description: "TypeScript configuration"
+    },
+    {
+      relativePath: "src/app.html",
+      content: SCAFFOLD_APP_HTML,
+      description: "HTML shell with theme-auto class"
+    },
+    {
+      relativePath: "src/app.css",
+      content: SCAFFOLD_APP_CSS,
+      description: "Foundation CSS reset with DryUI tokens"
+    },
+    {
+      relativePath: "src/routes/+layout.svelte",
+      content: buildScaffoldRootLayout(spec),
+      description: "Root layout with theme imports"
+    },
+    {
+      relativePath: "src/routes/+page.svelte",
+      content: SCAFFOLD_STARTER_PAGE,
+      description: "Starter page with DryUI components"
+    },
+    {
+      relativePath: "static/favicon.svg",
+      content: SCAFFOLD_FAVICON,
+      description: "DryUI project favicon"
+    }
+  ];
+}
+function scaffoldCommand(packageManager) {
+  const deps = "svelte @sveltejs/kit @sveltejs/vite-plugin-svelte @sveltejs/adapter-auto vite";
+  switch (packageManager) {
+    case "bun":
+      return `bun add -d ${deps}`;
+    case "pnpm":
+      return `pnpm add -D ${deps}`;
+    case "yarn":
+      return `yarn add -D ${deps}`;
+    default:
+      return `npm install -D ${deps}`;
+  }
+}
+function buildScaffoldSteps(spec, root, packageManager, hasPackageJson) {
   const steps = [];
-  if (detection.status === "unsupported") {
+  const files = getScaffoldFiles(spec);
+  for (const file of files) {
+    if (file.relativePath === "package.json" && hasPackageJson)
+      continue;
     steps.push({
-      kind: "blocked",
-      status: "blocked",
-      title: "Project detection incomplete",
-      description: detection.warnings.join(" ") || "DryUI install planning requires a Svelte or SvelteKit project with a package.json."
+      kind: "create-file",
+      status: "pending",
+      title: `Create ${file.relativePath}`,
+      description: file.description,
+      path: resolve(root, file.relativePath),
+      snippet: file.content
     });
-    return { detection, steps };
+  }
+  steps.push({
+    kind: "run-command",
+    status: "pending",
+    title: "Install SvelteKit dependencies",
+    description: "Install Svelte, SvelteKit, Vite, and adapter-auto as dev dependencies.",
+    command: scaffoldCommand(packageManager)
+  });
+  steps.push({
+    kind: "install-package",
+    status: "pending",
+    title: "Install @dryui/ui",
+    description: "Add the styled DryUI package to the project.",
+    command: installCommand(packageManager)
+  });
+  return steps;
+}
+function planInstall(spec, inputPath, options) {
+  const detection = detectProject(spec, inputPath);
+  const steps = [];
+  if (detection.status === "unsupported") {
+    const root = detection.root ?? detection.inputPath;
+    const pm = options?.packageManager ?? (detection.packageManager !== "unknown" ? detection.packageManager : detectPackageManagerFromEnv());
+    const scaffoldSteps = buildScaffoldSteps(spec, root, pm, Boolean(detection.packageJsonPath));
+    return { detection, steps: scaffoldSteps };
   }
   if (!detection.dependencies.ui) {
     steps.push({
@@ -9281,25 +9492,31 @@ function toonProjectDetection(detection) {
   return lines.join(`
 `);
 }
-function toonStep(step, index) {
+function toonStep(step, index, showSnippets = false) {
   const parts = [`${index + 1}. [${step.status}] ${step.title}: ${step.description}`];
   if (step.command)
     parts.push(`   cmd: ${step.command}`);
   if (step.path)
     parts.push(`   file: ${step.path}`);
+  if (showSnippets && step.snippet && step.kind === "create-file") {
+    parts.push(`   ---
+${step.snippet}   ---`);
+  }
   return parts.join(`
 `);
 }
 function toonInstallPlan(plan) {
   const lines = [];
+  const isScaffold = plan.detection.status === "unsupported" && plan.steps.some((s) => s.kind === "create-file");
   lines.push(toonProjectDetection(plan.detection));
   lines.push("");
   if (plan.steps.length === 0) {
     lines.push("steps[0]: none needed");
   } else {
-    lines.push(header("steps", plan.steps.length, ["status", "title", "description"]));
+    const label = isScaffold ? "scaffold-steps" : "steps";
+    lines.push(header(label, plan.steps.length, ["status", "title", "description"]));
     for (const [i, step] of plan.steps.entries()) {
-      lines.push(toonStep(step, i));
+      lines.push(toonStep(step, i, isScaffold));
     }
   }
   const help = buildContextualHelp({ command: "install" });

package/dist/project-planner.d.ts

@@ -1,7 +1,7 @@
 export type DryuiFramework = 'sveltekit' | 'svelte' | 'unknown';
 export type DryuiPackageManager = 'bun' | 'pnpm' | 'npm' | 'yarn' | 'unknown';
 export type DryuiProjectStatus = 'ready' | 'partial' | 'unsupported';
-export type DryuiPlanStepKind = 'install-package' | 'edit-file' | 'create-file' | 'note' | 'blocked';
+export type DryuiPlanStepKind = 'install-package' | 'run-command' | 'edit-file' | 'create-file' | 'note' | 'blocked';
 export type DryuiPlanStepStatus = 'done' | 'pending' | 'info' | 'blocked';
 export interface ProjectPlannerComponentDef {
     readonly import: string;
@@ -68,6 +68,10 @@ export interface PlanAddOptions {
     readonly subpath?: boolean;
     readonly withTheme?: boolean;
 }
+export declare function detectPackageManagerFromEnv(): DryuiPackageManager;
 export declare function detectProject(spec: Pick<ProjectPlannerSpec, 'themeImports'>, inputPath?: string): ProjectDetection;
-export declare function planInstall(spec: ProjectPlannerSpec, inputPath?: string): InstallPlan;
+export interface PlanInstallOptions {
+    readonly packageManager?: DryuiPackageManager;
+}
+export declare function planInstall(spec: ProjectPlannerSpec, inputPath?: string, options?: PlanInstallOptions): InstallPlan;
 export declare function planAdd(spec: ProjectPlannerSpec, query: string, options?: PlanAddOptions): AddPlan;

package/dist/project-planner.js

@@ -104,6 +104,18 @@ function detectPackageManager(root) {
     return "yarn";
   return "unknown";
 }
+function detectPackageManagerFromEnv() {
+  const ua = process.env.npm_config_user_agent ?? "";
+  if (ua.startsWith("bun/"))
+    return "bun";
+  if (ua.startsWith("pnpm/"))
+    return "pnpm";
+  if (ua.startsWith("yarn/"))
+    return "yarn";
+  if (ua.startsWith("npm/"))
+    return "npm";
+  return "npm";
+}
 function readPackageJson(packageJsonPath) {
   if (!packageJsonPath)
     return null;
@@ -256,17 +268,216 @@ function detectProject(spec, inputPath) {
     warnings
   };
 }
-function planInstall(spec, inputPath) {
-  const detection = detectProject(spec, inputPath);
+var SCAFFOLD_PACKAGE_JSON = `{
+  "name": "my-dryui-app",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+`;
+var SCAFFOLD_SVELTE_CONFIG = `import adapter from '@sveltejs/adapter-auto';
+
+export default {
+  kit: {
+    adapter: adapter(),
+  },
+};
+`;
+var SCAFFOLD_VITE_CONFIG = `import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+});
+`;
+var SCAFFOLD_TSCONFIG = `{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "target": "ES2020"
+  }
+}
+`;
+var SCAFFOLD_APP_HTML = `<!doctype html>
+<html lang="en" class="theme-auto">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/favicon.svg" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
+`;
+var SCAFFOLD_APP_CSS = `/* Global reset with DryUI tokens */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+}
+
+html {
+	font-family: var(--dry-font-sans);
+	color: var(--dry-color-text-strong);
+	background: var(--dry-color-bg-base);
+	-webkit-font-smoothing: antialiased;
+}
+
+body {
+	margin: 0;
+	min-height: 100dvh;
+}
+`;
+function buildScaffoldRootLayout(spec) {
+  return `<script>
+  import '../app.css';
+  import '${spec.themeImports.default}';
+  import '${spec.themeImports.dark}';
+
+  let { children } = $props();
+</script>
+
+{@render children()}
+`;
+}
+var SCAFFOLD_STARTER_PAGE = `<script lang="ts">
+	import { Container, Heading, Text } from '@dryui/ui';
+</script>
+
+<svelte:head>
+	<title>My App</title>
+</svelte:head>
+
+<div class="starter">
+	<Container size="md">
+		<Heading level={1}>Hello, World</Heading>
+		<Text size="lg" color="muted">Your DryUI project is ready. Start building.</Text>
+	</Container>
+</div>
+
+<style>
+	.starter {
+		padding-block: var(--dry-space-16);
+		display: grid;
+		gap: var(--dry-space-4);
+	}
+</style>
+`;
+var SCAFFOLD_FAVICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <rect width="64" height="64" rx="18" fill="#16171f"/>
+  <rect x="10" y="10" width="44" height="44" rx="14" fill="#eef2ff"/>
+  <path d="M20 20h10v24H20z" fill="#1f2937"/>
+  <path d="M34 20h10c4.418 0 8 3.582 8 8v0c0 4.418-3.582 8-8 8h-4v8h-6V20z" fill="#4f46e5"/>
+  <circle cx="44" cy="28" r="4" fill="#f59e0b"/>
+</svg>
+`;
+function getScaffoldFiles(spec) {
+  return [
+    {
+      relativePath: "package.json",
+      content: SCAFFOLD_PACKAGE_JSON,
+      description: "Project manifest with SvelteKit scripts"
+    },
+    {
+      relativePath: "svelte.config.js",
+      content: SCAFFOLD_SVELTE_CONFIG,
+      description: "SvelteKit configuration with adapter-auto"
+    },
+    {
+      relativePath: "vite.config.ts",
+      content: SCAFFOLD_VITE_CONFIG,
+      description: "Vite configuration with SvelteKit plugin"
+    },
+    {
+      relativePath: "tsconfig.json",
+      content: SCAFFOLD_TSCONFIG,
+      description: "TypeScript configuration"
+    },
+    {
+      relativePath: "src/app.html",
+      content: SCAFFOLD_APP_HTML,
+      description: "HTML shell with theme-auto class"
+    },
+    {
+      relativePath: "src/app.css",
+      content: SCAFFOLD_APP_CSS,
+      description: "Foundation CSS reset with DryUI tokens"
+    },
+    {
+      relativePath: "src/routes/+layout.svelte",
+      content: buildScaffoldRootLayout(spec),
+      description: "Root layout with theme imports"
+    },
+    {
+      relativePath: "src/routes/+page.svelte",
+      content: SCAFFOLD_STARTER_PAGE,
+      description: "Starter page with DryUI components"
+    },
+    {
+      relativePath: "static/favicon.svg",
+      content: SCAFFOLD_FAVICON,
+      description: "DryUI project favicon"
+    }
+  ];
+}
+function scaffoldCommand(packageManager) {
+  const deps = "svelte @sveltejs/kit @sveltejs/vite-plugin-svelte @sveltejs/adapter-auto vite";
+  switch (packageManager) {
+    case "bun":
+      return `bun add -d ${deps}`;
+    case "pnpm":
+      return `pnpm add -D ${deps}`;
+    case "yarn":
+      return `yarn add -D ${deps}`;
+    default:
+      return `npm install -D ${deps}`;
+  }
+}
+function buildScaffoldSteps(spec, root, packageManager, hasPackageJson) {
   const steps = [];
-  if (detection.status === "unsupported") {
+  const files = getScaffoldFiles(spec);
+  for (const file of files) {
+    if (file.relativePath === "package.json" && hasPackageJson)
+      continue;
     steps.push({
-      kind: "blocked",
-      status: "blocked",
-      title: "Project detection incomplete",
-      description: detection.warnings.join(" ") || "DryUI install planning requires a Svelte or SvelteKit project with a package.json."
+      kind: "create-file",
+      status: "pending",
+      title: `Create ${file.relativePath}`,
+      description: file.description,
+      path: resolve(root, file.relativePath),
+      snippet: file.content
     });
-    return { detection, steps };
+  }
+  steps.push({
+    kind: "run-command",
+    status: "pending",
+    title: "Install SvelteKit dependencies",
+    description: "Install Svelte, SvelteKit, Vite, and adapter-auto as dev dependencies.",
+    command: scaffoldCommand(packageManager)
+  });
+  steps.push({
+    kind: "install-package",
+    status: "pending",
+    title: "Install @dryui/ui",
+    description: "Add the styled DryUI package to the project.",
+    command: installCommand(packageManager)
+  });
+  return steps;
+}
+function planInstall(spec, inputPath, options) {
+  const detection = detectProject(spec, inputPath);
+  const steps = [];
+  if (detection.status === "unsupported") {
+    const root = detection.root ?? detection.inputPath;
+    const pm = options?.packageManager ?? (detection.packageManager !== "unknown" ? detection.packageManager : detectPackageManagerFromEnv());
+    const scaffoldSteps = buildScaffoldSteps(spec, root, pm, Boolean(detection.packageJsonPath));
+    return { detection, steps: scaffoldSteps };
   }
   if (!detection.dependencies.ui) {
     steps.push({
@@ -382,5 +593,6 @@ ${component.def.example}`
 export {
   planInstall,
   planAdd,
-  detectProject
+  detectProject,
+  detectPackageManagerFromEnv
 };

package/dist/spec.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.8",
+  "version": "0.1.12",
   "package": "@dryui/ui",
   "themeImports": {
     "default": "@dryui/ui/themes/default.css",
@@ -11711,14 +11711,18 @@
         ]
       },
       "cssVars": {
+        "--dry-alpha-rgb": "Rgb",
         "--dry-color-picker-area-height": "Picker Area Height",
         "--dry-color-picker-area-width": "Picker Area Width",
         "--dry-color-picker-grid-dark": "Picker Grid Dark",
         "--dry-color-picker-grid-light": "Picker Grid Light",
         "--dry-color-picker-grid-size": "Picker Grid Size",
         "--dry-color-picker-indicator-border": "Picker Indicator Border",
+        "--dry-color-picker-indicator-color": "Picker Indicator Color",
+        "--dry-color-picker-indicator-left": "Picker Indicator Left",
         "--dry-color-picker-indicator-shadow": "Picker Indicator Shadow",
         "--dry-color-picker-indicator-size": "Picker Indicator Size",
+        "--dry-color-picker-indicator-top": "Picker Indicator Top",
         "--dry-color-picker-slider-thumb-bg": "Picker Slider Thumb Bg",
         "--dry-color-picker-slider-thumb-border": "Picker Slider Thumb Border",
         "--dry-color-picker-slider-thumb-shadow": "Picker Slider Thumb Shadow",
@@ -11729,7 +11733,9 @@
         "--dry-color-picker-swatch-size": "Picker Swatch Size",
         "--dry-color-picker-width": "Picker Width",
         "--dry-slider-thumb-size": "Thumb size",
-        "--dry-slider-track-height": "Track height"
+        "--dry-slider-track-height": "Track height",
+        "--dry-swatch-color": "Text color",
+        "--dry-swatch-opacity": "Opacity"
       },
       "dataAttributes": [
         {
@@ -12193,7 +12199,13 @@
         ],
         "note": "Forwards <div> attributes via rest props."
       },
-      "cssVars": {},
+      "cssVars": {
+        "--dry-spotlight-color": "Text color",
+        "--dry-spotlight-intensity": "Intensity",
+        "--dry-spotlight-radius": "Border radius",
+        "--dry-spotlight-x": "X",
+        "--dry-spotlight-y": "Y"
+      },
       "dataAttributes": [
         {
           "name": "data-active",
@@ -12280,8 +12292,10 @@
         "--dry-aurora-color-2": "Color 2",
         "--dry-aurora-color-3": "Color 3",
         "--dry-aurora-duration": "Duration",
+        "--dry-aurora-intensity": "Intensity",
         "--dry-aurora-shift": "Shift",
-        "--dry-aurora-surface": "Surface"
+        "--dry-aurora-surface": "Surface",
+        "--dry-aurora-waviness": "Waviness"
       },
       "dataAttributes": [
         {
@@ -12932,6 +12946,9 @@
       "dataAttributes": [
         {
           "name": "data-virtual-list"
+        },
+        {
+          "name": "data-virtual-list-inner"
         }
       ],
       "example": "<VirtualList>Content</VirtualList>"
@@ -15191,6 +15208,7 @@
         "--dry-image-comparison-handle-shadow": "Comparison Handle Shadow",
         "--dry-image-comparison-handle-width": "Comparison Handle Width",
         "--dry-image-comparison-handle-z-index": "Comparison Handle Z Index",
+        "--dry-image-comparison-position": "Comparison Position",
         "--dry-image-comparison-radius": "Comparison Radius"
       },
       "dataAttributes": [
@@ -17472,7 +17490,13 @@
         ],
         "note": "Forwards <div> attributes via rest props."
       },
-      "cssVars": {},
+      "cssVars": {
+        "--dry-beam-angle": "Angle",
+        "--dry-beam-color": "Text color",
+        "--dry-beam-intensity": "Intensity",
+        "--dry-beam-speed": "Speed",
+        "--dry-beam-width": "Width"
+      },
       "dataAttributes": [
         {
           "name": "data-beam"
@@ -17591,7 +17615,14 @@
         ],
         "note": "Forwards <div> attributes via rest props."
       },
-      "cssVars": {},
+      "cssVars": {
+        "--dry-rays-blend": "Blend",
+        "--dry-rays-color": "Text color",
+        "--dry-rays-cx": "Cx",
+        "--dry-rays-cy": "Cy",
+        "--dry-rays-intensity": "Intensity",
+        "--dry-rays-speed": "Speed"
+      },
       "dataAttributes": [
         {
           "name": "data-animated"
@@ -22177,7 +22208,7 @@
         "components": [
           "Container"
         ],
-        "snippet": "<!-- 1. app.html — add theme-auto class -->\n<!doctype html>\n<html lang=\"en\" class=\"theme-auto\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    %sveltekit.head%\n  </head>\n  <body>\n    <div style=\"display: contents\">%sveltekit.body%</div>\n  </body>\n</html>\n\n<!-- 2. src/app.css — global reset with DryUI tokens -->\n@import '@dryui/ui/themes/default.css';\n@import '@dryui/ui/themes/dark.css';\n\n*, *::before, *::after { box-sizing: border-box; margin: 0; }\n\nhtml {\n  font-family: var(--dry-font-sans);\n  color: var(--dry-color-text-strong);\n  background: var(--dry-color-bg-base);\n  -webkit-font-smoothing: antialiased;\n}\n\nbody { margin: 0; min-height: 100dvh; }\n\n<!-- 3. src/routes/+layout.svelte — root layout -->\n<script>\n  import '../app.css';\n  import { Container } from '@dryui/ui';\n\n  let { children } = $props();\n</script>\n\n<header>\n  <Container>\n    <div class=\"app-header\">My App</div>\n  </Container>\n</header>\n<main>\n  <Container>\n    <div class=\"page-content\">\n      {@render children()}\n    </div>\n  </Container>\n</main>\n\n<style>\n  .app-header { padding: var(--dry-space-4) 0; font-weight: bold; }\n  .page-content { display: grid; gap: var(--dry-space-6); }\n</style>"
+        "snippet": "<!-- 1. app.html — add theme-auto class -->\n<!doctype html>\n<html lang=\"en\" class=\"theme-auto\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    %sveltekit.head%\n  </head>\n  <body>\n    <div style=\"display: contents\">%sveltekit.body%</div>\n  </body>\n</html>\n\n<!-- 2. src/app.css — import themes (resets are built in) -->\n@import '@dryui/ui/themes/default.css';\n@import '@dryui/ui/themes/dark.css';\n\n<!-- 3. src/routes/+layout.svelte — root layout -->\n<script>\n  import '../app.css';\n  import { Container } from '@dryui/ui';\n\n  let { children } = $props();\n</script>\n\n<header>\n  <Container>\n    <div class=\"app-header\">My App</div>\n  </Container>\n</header>\n<main>\n  <Container>\n    <div class=\"page-content\">\n      {@render children()}\n    </div>\n  </Container>\n</main>\n\n<style>\n  .app-header { padding: var(--dry-space-4) 0; font-weight: bold; }\n  .page-content { display: grid; gap: var(--dry-space-6); }\n</style>"
       },
       "page-shell-simple": {
         "name": "page-shell-simple",

package/dist/toon.js

@@ -396,25 +396,31 @@ function toonProjectDetection(detection) {
   return lines.join(`
 `);
 }
-function toonStep(step, index) {
+function toonStep(step, index, showSnippets = false) {
   const parts = [`${index + 1}. [${step.status}] ${step.title}: ${step.description}`];
   if (step.command)
     parts.push(`   cmd: ${step.command}`);
   if (step.path)
     parts.push(`   file: ${step.path}`);
+  if (showSnippets && step.snippet && step.kind === "create-file") {
+    parts.push(`   ---
+${step.snippet}   ---`);
+  }
   return parts.join(`
 `);
 }
 function toonInstallPlan(plan) {
   const lines = [];
+  const isScaffold = plan.detection.status === "unsupported" && plan.steps.some((s) => s.kind === "create-file");
   lines.push(toonProjectDetection(plan.detection));
   lines.push("");
   if (plan.steps.length === 0) {
     lines.push("steps[0]: none needed");
   } else {
-    lines.push(header("steps", plan.steps.length, ["status", "title", "description"]));
+    const label = isScaffold ? "scaffold-steps" : "steps";
+    lines.push(header(label, plan.steps.length, ["status", "title", "description"]));
     for (const [i, step] of plan.steps.entries()) {
-      lines.push(toonStep(step, i));
+      lines.push(toonStep(step, i, isScaffold));
     }
   }
   const help = buildContextualHelp({ command: "install" });

package/dist/workspace-audit.js

@@ -1553,6 +1553,18 @@ function detectPackageManager(root) {
     return "yarn";
   return "unknown";
 }
+function detectPackageManagerFromEnv() {
+  const ua = process.env.npm_config_user_agent ?? "";
+  if (ua.startsWith("bun/"))
+    return "bun";
+  if (ua.startsWith("pnpm/"))
+    return "pnpm";
+  if (ua.startsWith("yarn/"))
+    return "yarn";
+  if (ua.startsWith("npm/"))
+    return "npm";
+  return "npm";
+}
 function readPackageJson(packageJsonPath) {
   if (!packageJsonPath)
     return null;
@@ -1705,17 +1717,216 @@ function detectProject(spec, inputPath) {
     warnings
   };
 }
-function planInstall(spec, inputPath) {
-  const detection = detectProject(spec, inputPath);
+var SCAFFOLD_PACKAGE_JSON = `{
+  "name": "my-dryui-app",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+`;
+var SCAFFOLD_SVELTE_CONFIG = `import adapter from '@sveltejs/adapter-auto';
+
+export default {
+  kit: {
+    adapter: adapter(),
+  },
+};
+`;
+var SCAFFOLD_VITE_CONFIG = `import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+});
+`;
+var SCAFFOLD_TSCONFIG = `{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "target": "ES2020"
+  }
+}
+`;
+var SCAFFOLD_APP_HTML = `<!doctype html>
+<html lang="en" class="theme-auto">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/favicon.svg" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
+`;
+var SCAFFOLD_APP_CSS = `/* Global reset with DryUI tokens */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+}
+
+html {
+	font-family: var(--dry-font-sans);
+	color: var(--dry-color-text-strong);
+	background: var(--dry-color-bg-base);
+	-webkit-font-smoothing: antialiased;
+}
+
+body {
+	margin: 0;
+	min-height: 100dvh;
+}
+`;
+function buildScaffoldRootLayout(spec) {
+  return `<script>
+  import '../app.css';
+  import '${spec.themeImports.default}';
+  import '${spec.themeImports.dark}';
+
+  let { children } = $props();
+</script>
+
+{@render children()}
+`;
+}
+var SCAFFOLD_STARTER_PAGE = `<script lang="ts">
+	import { Container, Heading, Text } from '@dryui/ui';
+</script>
+
+<svelte:head>
+	<title>My App</title>
+</svelte:head>
+
+<div class="starter">
+	<Container size="md">
+		<Heading level={1}>Hello, World</Heading>
+		<Text size="lg" color="muted">Your DryUI project is ready. Start building.</Text>
+	</Container>
+</div>
+
+<style>
+	.starter {
+		padding-block: var(--dry-space-16);
+		display: grid;
+		gap: var(--dry-space-4);
+	}
+</style>
+`;
+var SCAFFOLD_FAVICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
+  <rect width="64" height="64" rx="18" fill="#16171f"/>
+  <rect x="10" y="10" width="44" height="44" rx="14" fill="#eef2ff"/>
+  <path d="M20 20h10v24H20z" fill="#1f2937"/>
+  <path d="M34 20h10c4.418 0 8 3.582 8 8v0c0 4.418-3.582 8-8 8h-4v8h-6V20z" fill="#4f46e5"/>
+  <circle cx="44" cy="28" r="4" fill="#f59e0b"/>
+</svg>
+`;
+function getScaffoldFiles(spec) {
+  return [
+    {
+      relativePath: "package.json",
+      content: SCAFFOLD_PACKAGE_JSON,
+      description: "Project manifest with SvelteKit scripts"
+    },
+    {
+      relativePath: "svelte.config.js",
+      content: SCAFFOLD_SVELTE_CONFIG,
+      description: "SvelteKit configuration with adapter-auto"
+    },
+    {
+      relativePath: "vite.config.ts",
+      content: SCAFFOLD_VITE_CONFIG,
+      description: "Vite configuration with SvelteKit plugin"
+    },
+    {
+      relativePath: "tsconfig.json",
+      content: SCAFFOLD_TSCONFIG,
+      description: "TypeScript configuration"
+    },
+    {
+      relativePath: "src/app.html",
+      content: SCAFFOLD_APP_HTML,
+      description: "HTML shell with theme-auto class"
+    },
+    {
+      relativePath: "src/app.css",
+      content: SCAFFOLD_APP_CSS,
+      description: "Foundation CSS reset with DryUI tokens"
+    },
+    {
+      relativePath: "src/routes/+layout.svelte",
+      content: buildScaffoldRootLayout(spec),
+      description: "Root layout with theme imports"
+    },
+    {
+      relativePath: "src/routes/+page.svelte",
+      content: SCAFFOLD_STARTER_PAGE,
+      description: "Starter page with DryUI components"
+    },
+    {
+      relativePath: "static/favicon.svg",
+      content: SCAFFOLD_FAVICON,
+      description: "DryUI project favicon"
+    }
+  ];
+}
+function scaffoldCommand(packageManager) {
+  const deps = "svelte @sveltejs/kit @sveltejs/vite-plugin-svelte @sveltejs/adapter-auto vite";
+  switch (packageManager) {
+    case "bun":
+      return `bun add -d ${deps}`;
+    case "pnpm":
+      return `pnpm add -D ${deps}`;
+    case "yarn":
+      return `yarn add -D ${deps}`;
+    default:
+      return `npm install -D ${deps}`;
+  }
+}
+function buildScaffoldSteps(spec, root, packageManager, hasPackageJson) {
   const steps = [];
-  if (detection.status === "unsupported") {
+  const files = getScaffoldFiles(spec);
+  for (const file of files) {
+    if (file.relativePath === "package.json" && hasPackageJson)
+      continue;
     steps.push({
-      kind: "blocked",
-      status: "blocked",
-      title: "Project detection incomplete",
-      description: detection.warnings.join(" ") || "DryUI install planning requires a Svelte or SvelteKit project with a package.json."
+      kind: "create-file",
+      status: "pending",
+      title: `Create ${file.relativePath}`,
+      description: file.description,
+      path: resolve(root, file.relativePath),
+      snippet: file.content
     });
-    return { detection, steps };
+  }
+  steps.push({
+    kind: "run-command",
+    status: "pending",
+    title: "Install SvelteKit dependencies",
+    description: "Install Svelte, SvelteKit, Vite, and adapter-auto as dev dependencies.",
+    command: scaffoldCommand(packageManager)
+  });
+  steps.push({
+    kind: "install-package",
+    status: "pending",
+    title: "Install @dryui/ui",
+    description: "Add the styled DryUI package to the project.",
+    command: installCommand(packageManager)
+  });
+  return steps;
+}
+function planInstall(spec, inputPath, options) {
+  const detection = detectProject(spec, inputPath);
+  const steps = [];
+  if (detection.status === "unsupported") {
+    const root = detection.root ?? detection.inputPath;
+    const pm = options?.packageManager ?? (detection.packageManager !== "unknown" ? detection.packageManager : detectPackageManagerFromEnv());
+    const scaffoldSteps = buildScaffoldSteps(spec, root, pm, Boolean(detection.packageJsonPath));
+    return { detection, steps: scaffoldSteps };
   }
   if (!detection.dependencies.ui) {
     steps.push({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/mcp",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {