@dryui/cli 0.1.1 → 0.2.0

package/dist/index.js

@@ -3243,8 +3243,8 @@ var require_utils = __commonJS((exports, module) => {
     }
     return output.join("");
   }
-  function normalizeComponentEncoding(component, esc2) {
-    const func = esc2 !== true ? escape : unescape;
+  function normalizeComponentEncoding(component, esc3) {
+    const func = esc3 !== true ? escape : unescape;
     if (component.scheme !== undefined) {
       component.scheme = func(component.scheme);
     }
@@ -6518,7 +6518,7 @@ var require_dist = __commonJS((exports, module) => {
 // package.json
 var package_default = {
   name: "@dryui/cli",
-  version: "0.1.1",
+  version: "0.2.0",
   author: "Rob Balfre",
   license: "MIT",
   repository: {
@@ -6545,7 +6545,7 @@ var package_default = {
   },
   dependencies: {
     "@dryui/feedback-server": "^0.1.0",
-    "@dryui/mcp": "^0.1.0"
+    "@dryui/mcp": "^0.2.0"
   },
   devDependencies: {
     "@types/node": "^25.5.0",
@@ -6554,7 +6554,7 @@ var package_default = {
 };
 // ../mcp/src/spec.json
 var spec_default = {
-  version: "0.1.1",
+  version: "0.1.7",
   package: "@dryui/ui",
   themeImports: {
     default: "@dryui/ui/themes/default.css",
@@ -6728,6 +6728,12 @@ var spec_default = {
           name: "data-disabled",
           description: "Present when the component or part is disabled."
         },
+        {
+          name: "data-group-orientation"
+        },
+        {
+          name: "data-in-group"
+        },
         {
           name: "data-size"
         },
@@ -7453,6 +7459,13 @@ var spec_default = {
         ]
       },
       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",
@@ -8536,6 +8549,9 @@ var spec_default = {
           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.",
@@ -8671,6 +8687,9 @@ var spec_default = {
           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.",
@@ -9074,8 +9093,7 @@ var spec_default = {
         ]
       },
       cssVars: {
-        "--dry-field-gap": "Gap spacing",
-        "--dry-field-label-order": "Label Order"
+        "--dry-field-gap": "Gap spacing"
       },
       dataAttributes: [
         {
@@ -9848,6 +9866,9 @@ var spec_default = {
           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."
@@ -10971,9 +10992,6 @@ var spec_default = {
           name: "data-disabled",
           description: "Present when the component or part is disabled."
         },
-        {
-          name: "data-option-swatch-group-content"
-        },
         {
           name: "data-option-swatch-group-item"
         },
@@ -11448,6 +11466,9 @@ var spec_default = {
         },
         {
           name: "data-tabs-trigger"
+        },
+        {
+          name: "data-tabs-trigger-content"
         }
       ],
       example: `<Tabs.Root bind:value={activeTab}>
@@ -14626,11 +14647,11 @@ var spec_default = {
         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: {
@@ -14668,12 +14689,14 @@ var spec_default = {
         }
       ],
       example: `<Timeline.Root>
-  <Timeline.Item>...</Timeline.Item>
-  <Timeline.Icon>...</Timeline.Icon>
-  <Timeline.Content>...</Timeline.Content>
-  <Timeline.Title>...</Timeline.Title>
-  <Timeline.Description>...</Timeline.Description>
-  <Timeline.Time>...</Timeline.Time>
+  <Timeline.Item>
+    <Timeline.Icon />
+    <Timeline.Content>
+      <Timeline.Title>Event title</Timeline.Title>
+      <Timeline.Description>Event description</Timeline.Description>
+      <Timeline.Time>2 hours ago</Timeline.Time>
+    </Timeline.Content>
+  </Timeline.Item>
 </Timeline.Root>`
     },
     Typography: {
@@ -16372,6 +16395,7 @@ var spec_default = {
         ]
       },
       cssVars: {
+        "--dry-calendar-grid-gap": "Grid Gap",
         "--dry-dp-bg": "Background color",
         "--dry-dp-border": "Border color",
         "--dry-dp-font-size": "Font size",
@@ -16379,9 +16403,33 @@ var spec_default = {
         "--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."
@@ -16395,6 +16443,9 @@ var spec_default = {
         {
           name: "data-dp-trigger"
         },
+        {
+          name: "data-indicator"
+        },
         {
           name: "data-invalid",
           description: "Present when the current field value is invalid."
@@ -16858,9 +16909,33 @@ var spec_default = {
       },
       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."
@@ -16874,15 +16949,15 @@ var spec_default = {
         {
           name: "data-drp-preset"
         },
-        {
-          name: "data-drp-root"
-        },
         {
           name: "data-drp-trigger"
         },
         {
           name: "data-in-range"
         },
+        {
+          name: "data-indicator"
+        },
         {
           name: "data-outside-month"
         },
@@ -17416,8 +17491,14 @@ var spec_default = {
         "--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",
@@ -17427,12 +17508,33 @@ var spec_default = {
         "--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."
@@ -17455,10 +17557,6 @@ var spec_default = {
         {
           name: "data-range-start"
         },
-        {
-          name: "data-selected",
-          description: "Present when the current item is selected."
-        },
         {
           name: "data-today"
         }
@@ -17590,6 +17688,26 @@ var spec_default = {
           type: "number",
           required: false,
           description: "Step interval used when incrementing numeric values."
+        },
+        size: {
+          type: "'sm' | 'md' | 'lg'",
+          required: false,
+          acceptedValues: [
+            "sm",
+            "md",
+            "lg"
+          ],
+          description: "Size preset affecting density, spacing, or typography.",
+          default: "'md'"
+        },
+        name: {
+          type: "string",
+          required: false,
+          description: "Field name used during native form submission."
+        },
+        class: {
+          type: "string",
+          required: false
         }
       },
       forwardedProps: {
@@ -17603,25 +17721,23 @@ var spec_default = {
         ],
         note: "Forwards <input> attributes via rest props."
       },
-      cssVars: {
-        "--dry-time-input-bg": "Input Bg",
-        "--dry-time-input-border": "Input Border",
-        "--dry-time-input-color": "Input Color",
-        "--dry-time-input-font-size": "Input Font Size",
-        "--dry-time-input-padding-x": "Input Padding X",
-        "--dry-time-input-padding-y": "Input Padding Y",
-        "--dry-time-input-radius": "Input Radius"
-      },
+      cssVars: {},
       dataAttributes: [
         {
           name: "data-disabled",
           description: "Present when the component or part is disabled."
         },
         {
-          name: "data-time-input"
+          name: "data-placeholder"
+        },
+        {
+          name: "data-time-display"
         },
         {
           name: "data-time-input-wrapper"
+        },
+        {
+          name: "data-time-separator"
         }
       ],
       example: "<TimeInput>Content</TimeInput>"
@@ -17807,6 +17923,7 @@ var spec_default = {
       },
       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"
       },
@@ -18078,9 +18195,6 @@ var spec_default = {
         {
           name: "data-dragging"
         },
-        {
-          name: "data-file-upload"
-        },
         {
           name: "data-fu-dropzone"
         },
@@ -19313,6 +19427,7 @@ var spec_default = {
         "--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"
       },
@@ -19705,7 +19820,8 @@ var spec_default = {
         },
         overscan: {
           type: "number",
-          required: false
+          required: false,
+          default: "5"
         },
         children: {
           type: "Snippet<[{ item: T; index: number; style: string }]>",
@@ -20766,7 +20882,8 @@ var spec_default = {
             placeholder: {
               type: "string",
               required: false,
-              description: "Hint text shown when no value is selected or entered."
+              description: "Hint text shown when no value is selected or entered.",
+              default: "''"
             },
             readonly: {
               type: "boolean",
@@ -20852,8 +20969,20 @@ var spec_default = {
         {
           name: "data-part"
         },
+        {
+          name: "data-placeholder"
+        },
         {
           name: "data-readonly"
+        },
+        {
+          name: "data-rte-content"
+        },
+        {
+          name: "data-rte-root"
+        },
+        {
+          name: "data-rte-toolbar"
         }
       ],
       example: `<RichTextEditor.Root>
@@ -23746,18 +23875,6 @@ var spec_default = {
         "--dry-map-radius": "Border radius"
       },
       dataAttributes: [
-        {
-          name: "data-map-mapboxgl"
-        },
-        {
-          name: "data-map-maplibregl"
-        },
-        {
-          name: "data-map-marker"
-        },
-        {
-          name: "data-map-popup"
-        },
         {
           name: "data-map-root"
         },
@@ -23774,7 +23891,7 @@ var spec_default = {
     },
     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",
@@ -23845,92 +23962,40 @@ var spec_default = {
         ],
         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>"
@@ -24386,8 +24451,7 @@ var spec_default = {
         },
         blendMode: {
           type: "BlendMode",
-          required: false,
-          default: "'screen'"
+          required: false
         },
         children: {
           type: "Snippet",
@@ -29995,7 +30059,7 @@ body { margin: 0; min-height: 100dvh; }
       },
       "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",
@@ -31679,13 +31743,715 @@ body { margin: 0; min-height: 100dvh; }
   ]
 };
 
-// ../mcp/src/spec-formatters.ts
+// ../mcp/src/project-planner.ts
+import { existsSync, readFileSync, statSync } from "node:fs";
+import { dirname, resolve } from "node:path";
 var DIR_OVERRIDES = {
   QRCode: "qr-code"
 };
 function componentDir(name) {
   return DIR_OVERRIDES[name] ?? name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
+function resolveStart(inputPath) {
+  const candidate = resolve(inputPath ?? process.cwd());
+  return existsSync(candidate) && statSync(candidate).isFile() ? dirname(candidate) : candidate;
+}
+function findUp(start, fileName) {
+  let current = start;
+  while (true) {
+    const candidate = resolve(current, fileName);
+    if (existsSync(candidate))
+      return candidate;
+    const parent = dirname(current);
+    if (parent === current)
+      return null;
+    current = parent;
+  }
+}
+function findUpAny(start, fileNames) {
+  let current = start;
+  while (true) {
+    for (const fileName of fileNames) {
+      const candidate = resolve(current, fileName);
+      if (existsSync(candidate))
+        return candidate;
+    }
+    const parent = dirname(current);
+    if (parent === current)
+      return null;
+    current = parent;
+  }
+}
+function detectPackageManager(root) {
+  if (!root)
+    return "unknown";
+  const lockfilePath = findUpAny(root, [
+    "bun.lock",
+    "bun.lockb",
+    "pnpm-lock.yaml",
+    "package-lock.json",
+    "yarn.lock"
+  ]);
+  if (!lockfilePath)
+    return "unknown";
+  if (lockfilePath.endsWith("bun.lock") || lockfilePath.endsWith("bun.lockb"))
+    return "bun";
+  if (lockfilePath.endsWith("pnpm-lock.yaml"))
+    return "pnpm";
+  if (lockfilePath.endsWith("package-lock.json"))
+    return "npm";
+  if (lockfilePath.endsWith("yarn.lock"))
+    return "yarn";
+  return "unknown";
+}
+function readPackageJson(packageJsonPath) {
+  if (!packageJsonPath)
+    return null;
+  return JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+}
+function getDependencyNames(pkg) {
+  return new Set([
+    ...Object.keys(pkg?.dependencies ?? {}),
+    ...Object.keys(pkg?.devDependencies ?? {})
+  ]);
+}
+function detectFramework(dependencyNames) {
+  if (dependencyNames.has("@sveltejs/kit"))
+    return "sveltekit";
+  if (dependencyNames.has("svelte"))
+    return "svelte";
+  return "unknown";
+}
+function hasImport(filePath, importPath) {
+  if (!filePath)
+    return false;
+  return readFileSync(filePath, "utf-8").includes(importPath);
+}
+function hasThemeAuto(appHtmlPath) {
+  if (!appHtmlPath)
+    return false;
+  return readFileSync(appHtmlPath, "utf-8").includes("theme-auto");
+}
+function hasAnyImport(filePaths, importPath) {
+  return filePaths.some((filePath) => hasImport(filePath, importPath));
+}
+function importsAppCss(rootLayoutPath) {
+  if (!rootLayoutPath)
+    return false;
+  const content = readFileSync(rootLayoutPath, "utf-8");
+  return content.includes("app.css");
+}
+function buildStatus(framework, hasPackageJson, stepsNeeded) {
+  if (!hasPackageJson || framework === "unknown")
+    return "unsupported";
+  return stepsNeeded === 0 ? "ready" : "partial";
+}
+function installCommand(packageManager) {
+  switch (packageManager) {
+    case "bun":
+      return "bun add @dryui/ui";
+    case "pnpm":
+      return "pnpm add @dryui/ui";
+    case "yarn":
+      return "yarn add @dryui/ui";
+    default:
+      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>",
+    buildThemeImportLines(spec),
+    "",
+    "  let { children } = $props();",
+    "</script>",
+    "",
+    "{@render children()}"
+  ].join(`
+`);
+}
+function buildThemeImportCssSnippet(spec) {
+  return [`@import '${spec.themeImports.default}';`, `@import '${spec.themeImports.dark}';`].join(`
+`);
+}
+function getSuggestedTarget(root, explicitTarget) {
+  if (explicitTarget)
+    return resolve(root ?? process.cwd(), explicitTarget);
+  if (!root)
+    return null;
+  const rootPage = resolve(root, "src/routes/+page.svelte");
+  return existsSync(rootPage) ? rootPage : null;
+}
+function getImportStatement(name, component, subpath = false) {
+  if (subpath && component.import === "@dryui/ui") {
+    return `import { ${name} } from '${component.import}/${componentDir(name)}';`;
+  }
+  return `import { ${name} } from '${component.import}';`;
+}
+function findComponent(spec, query) {
+  const exact = spec.components[query];
+  if (exact)
+    return { name: query, def: exact };
+  const lower = query.toLowerCase();
+  for (const [name, def] of Object.entries(spec.components)) {
+    if (name.toLowerCase() === lower)
+      return { name, def };
+  }
+  return null;
+}
+function detectProject(spec, inputPath) {
+  const start = resolveStart(inputPath);
+  const packageJsonPath = findUp(start, "package.json");
+  const root = packageJsonPath ? dirname(packageJsonPath) : null;
+  const dependencyNames = getDependencyNames(readPackageJson(packageJsonPath));
+  const framework = detectFramework(dependencyNames);
+  const appHtmlPath = root ? resolve(root, "src/app.html") : null;
+  const appCssPath = root ? resolve(root, "src/app.css") : null;
+  const rootLayoutPath = root ? resolve(root, "src/routes/+layout.svelte") : null;
+  const rootPagePath = root ? resolve(root, "src/routes/+page.svelte") : null;
+  const appHtml = appHtmlPath && existsSync(appHtmlPath) ? appHtmlPath : null;
+  const appCss = appCssPath && existsSync(appCssPath) ? appCssPath : null;
+  const rootLayout = rootLayoutPath && existsSync(rootLayoutPath) ? rootLayoutPath : null;
+  const rootPage = rootPagePath && existsSync(rootPagePath) ? rootPagePath : null;
+  const themeImportFiles = rootLayout && importsAppCss(rootLayout) ? [rootLayout, appCss] : [rootLayout];
+  const defaultImported = hasAnyImport(themeImportFiles, spec.themeImports.default);
+  const darkImported = hasAnyImport(themeImportFiles, spec.themeImports.dark);
+  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.");
+  if (framework === "unknown")
+    warnings.push("DryUI planning currently targets Svelte and SvelteKit projects.");
+  return {
+    inputPath: start,
+    root,
+    packageJsonPath,
+    framework,
+    packageManager: detectPackageManager(root),
+    status: buildStatus(framework, Boolean(packageJsonPath), stepsNeeded),
+    dependencies: {
+      ui: dependencyNames.has("@dryui/ui"),
+      primitives: dependencyNames.has("@dryui/primitives")
+    },
+    files: {
+      appHtml,
+      appCss,
+      rootLayout,
+      rootPage
+    },
+    theme: {
+      defaultImported,
+      darkImported,
+      themeAuto
+    },
+    warnings
+  };
+}
+function planInstall(spec, inputPath) {
+  const detection = detectProject(spec, inputPath);
+  const steps = [];
+  if (detection.status === "unsupported") {
+    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."
+    });
+    return { detection, steps };
+  }
+  if (!detection.dependencies.ui) {
+    steps.push({
+      kind: "install-package",
+      status: "pending",
+      title: "Install @dryui/ui",
+      description: "Add the styled DryUI package to the current project.",
+      command: installCommand(detection.packageManager)
+    });
+  }
+  if (!detection.theme.defaultImported || !detection.theme.darkImported) {
+    if (detection.files.appCss && detection.files.rootLayout && importsAppCss(detection.files.rootLayout)) {
+      steps.push({
+        kind: "edit-file",
+        status: "pending",
+        title: "Add theme imports to app.css",
+        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)
+      });
+    } else if (!detection.files.rootLayout) {
+      const path = detection.root ? resolve(detection.root, "src/routes/+layout.svelte") : null;
+      steps.push({
+        kind: "create-file",
+        status: "pending",
+        title: "Create root layout with 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: buildRootLayoutSnippet(spec)
+      });
+    } else {
+      steps.push({
+        kind: "edit-file",
+        status: "pending",
+        title: "Add theme imports to the root layout",
+        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)
+      });
+    }
+  }
+  if (!detection.files.appHtml) {
+    steps.push({
+      kind: "blocked",
+      status: "blocked",
+      title: "app.html not found",
+      description: "DryUI expects src/app.html so the document can default to theme-auto mode."
+    });
+  } else if (!detection.theme.themeAuto) {
+    steps.push({
+      kind: "edit-file",
+      status: "pending",
+      title: "Set html theme mode to auto",
+      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: 'class="theme-auto"'
+    });
+  }
+  if (steps.length === 0) {
+    steps.push({
+      kind: "note",
+      status: "done",
+      title: "DryUI install plan is complete",
+      description: "The project already has @dryui/ui, theme imports, and theme-auto configured."
+    });
+  }
+  return { detection, steps };
+}
+function planAdd(spec, query, options = {}) {
+  const installPlan = planInstall(spec, options.cwd);
+  const component = findComponent(spec, query);
+  if (component) {
+    const target = getSuggestedTarget(installPlan.detection.root, options.target);
+    const steps = [];
+    const warnings = [...installPlan.detection.warnings];
+    if (installPlan.steps.some((step) => step.status === "pending" || step.status === "blocked")) {
+      steps.push({
+        kind: "note",
+        status: "info",
+        title: "Complete install plan first",
+        description: "Apply the install plan before inserting DryUI components into project files."
+      });
+    }
+    steps.push(target ? {
+      kind: "edit-file",
+      status: "pending",
+      title: "Insert component into the target file",
+      description: "Add the import and snippet below to the chosen Svelte file.",
+      path: target,
+      snippet: `${getImportStatement(component.name, component.def, options.subpath)}
+
+${component.def.example}`
+    } : {
+      kind: "note",
+      status: "info",
+      title: "Choose a target Svelte file",
+      description: "No root page was found. Pick a target file and reuse the import and snippet in this plan."
+    });
+    return {
+      detection: installPlan.detection,
+      installPlan,
+      targetType: "component",
+      name: component.name,
+      importStatement: getImportStatement(component.name, component.def, options.subpath),
+      snippet: component.def.example,
+      target,
+      steps,
+      warnings
+    };
+  }
+  throw new Error(`Unknown component: "${query}"`);
+}
+
+// ../mcp/dist/toon.js
+function esc(value) {
+  if (value.includes(",") || value.includes(`
+`)) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+}
+function header(resource, count, fields) {
+  return `${resource}[${count}]{${fields.join(",")}}:`;
+}
+function row(...values) {
+  return "  " + values.map((v) => esc(String(v))).join(",");
+}
+function truncate(text, maxLen, hint) {
+  if (text.length <= maxLen)
+    return text;
+  return `(truncated, ${text.length} chars -- ${hint})`;
+}
+function buildContextualHelp(ctx) {
+  const hints = [];
+  switch (ctx.command) {
+    case "info":
+      if (ctx.componentName) {
+        hints.push(`compose "${ctx.componentName.toLowerCase()}" -- see composition patterns`);
+        hints.push(`add ${ctx.componentName} -- get starter snippet`);
+      }
+      break;
+    case "list":
+      hints.push("info <Component> -- see full API reference");
+      break;
+    case "compose":
+      if (ctx.componentName) {
+        hints.push(`info ${ctx.componentName} -- full API reference`);
+        hints.push(`add ${ctx.componentName} -- starter snippet`);
+      }
+      break;
+    case "review":
+      if (ctx.hasErrors) {
+        hints.push("info <Component> -- check API for errored component");
+        hints.push("diagnose <file.css> -- check theme if theme warnings present");
+      } else if (ctx.isEmpty) {
+        hints.push("lint . -- check entire workspace");
+      }
+      break;
+    case "diagnose":
+      if (ctx.hasErrors) {
+        hints.push('compose "app shell" -- get correct theme setup');
+      } else if (ctx.isEmpty) {
+        hints.push("review <file.svelte> -- validate component usage");
+      }
+      break;
+    case "doctor":
+    case "lint":
+      if (ctx.hasFindings) {
+        hints.push("lint --max-severity error -- focus on errors only");
+        hints.push("review <file.svelte> -- check specific file");
+      } else if (ctx.isEmpty) {
+        hints.push("detect -- verify project setup");
+      }
+      break;
+    case "detect":
+      if (ctx.status === "partial" || ctx.status === "unsupported") {
+        hints.push("install -- see step-by-step setup plan");
+      } else if (ctx.status === "ready") {
+        hints.push("list -- see available components");
+        hints.push('compose "app shell" -- get root layout template');
+      }
+      break;
+    case "install":
+      hints.push("detect -- verify project after completing steps");
+      break;
+  }
+  return hints;
+}
+function formatHelp(hints) {
+  if (hints.length === 0)
+    return "";
+  const lines = [`next[${hints.length}]:`];
+  for (const hint of hints) {
+    lines.push("  " + hint);
+  }
+  return lines.join(`
+`);
+}
+function toonComponent(name, def, opts) {
+  const full = opts?.full ?? false;
+  const lines = [];
+  lines.push(`${name} -- ${def.description}`, `category: ${def.category} | tags: ${def.tags.join(",")}`, `import: import { ${name} } from '${def.import}'`, `compound: ${def.compound}`);
+  if (def.compound && def.structure?.tree.length) {
+    lines.push("", header("structure", def.structure.tree.length, ["node"]));
+    for (const node of def.structure.tree) {
+      lines.push("  " + node);
+    }
+    if (def.structure.note)
+      lines.push(`  note: ${def.structure.note}`);
+  }
+  if (def.compound && def.parts) {
+    const partEntries = Object.entries(def.parts);
+    lines.push("", header("parts", partEntries.length, ["part"]));
+    for (const [partName, partDef] of partEntries) {
+      lines.push(`  ${name}.${partName}`);
+      const props = Object.entries(partDef.props ?? {});
+      if (props.length > 0) {
+        for (const [propName, propDef] of props) {
+          const flags = [propDef.type];
+          if (propDef.required)
+            flags.push("required");
+          if (propDef.default !== undefined)
+            flags.push(`default:${propDef.default}`);
+          if (propDef.acceptedValues?.length)
+            flags.push(`values:${propDef.acceptedValues.join("|")}`);
+          lines.push(`    ${propName}: ${flags.join(" | ")}`);
+        }
+      }
+    }
+  } else if (def.props) {
+    const propEntries = Object.entries(def.props);
+    if (propEntries.length > 0) {
+      lines.push("", header("props", propEntries.length, ["name", "type", "required", "default"]));
+      for (const [propName, propDef] of propEntries) {
+        lines.push(row(propName, propDef.type, propDef.required ? "yes" : "no", propDef.default ?? "-"));
+      }
+    }
+  }
+  const cssEntries = Object.entries(def.cssVars);
+  if (cssEntries.length > 0) {
+    lines.push("", header("css-vars", cssEntries.length, ["name", "description"]));
+    for (const [varName, desc] of cssEntries) {
+      lines.push(row(varName, desc));
+    }
+  }
+  if (def.dataAttributes.length > 0) {
+    lines.push("", header("data-attrs", def.dataAttributes.length, ["name", "values"]));
+    for (const attr of def.dataAttributes) {
+      lines.push(row(attr.name, attr.values?.join("|") ?? "-"));
+    }
+  }
+  if (def.example) {
+    const example = full ? def.example : truncate(def.example, 400, `use add ${name} for full snippet`);
+    lines.push("", "example:", example);
+  }
+  const help = buildContextualHelp({ command: "info", componentName: name });
+  if (help.length > 0) {
+    lines.push("", formatHelp(help));
+  }
+  return lines.join(`
+`);
+}
+function toonComponentList(components, category) {
+  const entries = Object.entries(components);
+  const filtered = category ? entries.filter(([, def]) => def.category.toLowerCase() === category.toLowerCase()) : entries;
+  if (filtered.length === 0) {
+    const cats = [...new Set(entries.map(([, d]) => d.category))].sort();
+    return `components[0]: no matches
+available categories: ${cats.join(", ")}`;
+  }
+  const groups = {};
+  for (const entry of filtered) {
+    const cat = entry[1].category;
+    (groups[cat] ??= []).push(entry);
+  }
+  const lines = [header("components", filtered.length, ["name", "category", "compound", "description"])];
+  const sortedCats = Object.keys(groups).sort();
+  for (const cat of sortedCats) {
+    const items = groups[cat] ?? [];
+    for (const [name, def] of items) {
+      lines.push(row(name, cat, def.compound, def.description));
+    }
+  }
+  const help = buildContextualHelp({ command: "list" });
+  if (help.length > 0) {
+    lines.push("", formatHelp(help));
+  }
+  return lines.join(`
+`);
+}
+function toonComposition(results, opts) {
+  const full = opts?.full ?? false;
+  const lines = [];
+  const totalMatches = results.componentMatches.length + results.recipeMatches.length;
+  if (totalMatches === 0) {
+    return "matches[0]: none";
+  }
+  for (const comp of results.componentMatches) {
+    lines.push(`-- ${comp.component}: ${comp.useWhen}`);
+    for (const alt of comp.alternatives) {
+      const snippet = full ? alt.snippet : truncate(alt.snippet, 500, `use info ${alt.component} for full snippet`);
+      lines.push(`  ${alt.rank}. ${alt.component} (${alt.useWhen})`);
+      lines.push(snippet.split(`
+`).map((l) => "     " + l).join(`
+`));
+    }
+    for (const ap of comp.antiPatterns) {
+      lines.push(`  anti-pattern: ${ap.pattern}`);
+      lines.push(`    reason: ${ap.reason} | fix: ${ap.fix}`);
+    }
+    if (comp.combinesWith.length) {
+      lines.push(`  combines-with: ${comp.combinesWith.join(",")}`);
+    }
+    lines.push("");
+  }
+  for (const recipe of results.recipeMatches) {
+    const snippet = full ? recipe.snippet : truncate(recipe.snippet, 500, `use compose "${recipe.name}" --full for complete code`);
+    lines.push(`-- recipe: ${recipe.name}`);
+    lines.push(`  ${recipe.description}`);
+    lines.push(`  components: ${recipe.components.join(",")}`);
+    lines.push("  code:");
+    lines.push(snippet.split(`
+`).map((l) => "    " + l).join(`
+`));
+    lines.push("");
+  }
+  const firstComponent = results.componentMatches[0]?.alternatives[0]?.component ?? results.recipeMatches[0]?.components[0] ?? undefined;
+  const ctx = { command: "compose" };
+  if (firstComponent)
+    ctx.componentName = firstComponent;
+  const help = buildContextualHelp(ctx);
+  if (help.length > 0) {
+    lines.push(formatHelp(help));
+  }
+  return lines.join(`
+`).trimEnd();
+}
+function toonReviewResult(result) {
+  const lines = [];
+  const hasBlockers = result.issues.some((i) => i.severity === "error");
+  const autoFixable = result.issues.filter((i) => i.fix !== null).length;
+  if (result.issues.length === 0) {
+    lines.push("issues[0]: clean");
+    lines.push(`hasBlockers: false | autoFixable: 0`);
+  } else {
+    lines.push(header("issues", result.issues.length, ["severity", "line", "code", "message"]));
+    for (const issue of result.issues) {
+      lines.push(row(issue.severity, issue.line, issue.code, issue.message));
+      if (issue.fix) {
+        lines.push(`    fix: ${issue.fix}`);
+      }
+    }
+    lines.push(`hasBlockers: ${hasBlockers} | autoFixable: ${autoFixable}`);
+  }
+  lines.push(result.summary);
+  const help = buildContextualHelp({
+    command: "review",
+    hasErrors: hasBlockers,
+    isEmpty: result.issues.length === 0
+  });
+  if (help.length > 0) {
+    lines.push("", formatHelp(help));
+  }
+  return lines.join(`
+`);
+}
+function toonDiagnoseResult(result) {
+  const lines = [];
+  const { variables } = result;
+  const missingCount = result.issues.filter((i) => i.code === "missing-token").length;
+  const totalRequired = variables.required + missingCount;
+  const coverage = totalRequired > 0 ? Math.round(variables.required / totalRequired * 100) : 100;
+  lines.push(`tokens: ${variables.found} found, ${variables.required} required, ${variables.extra} extra | coverage: ${coverage}%`);
+  if (result.issues.length === 0) {
+    lines.push("issues[0]: clean");
+  } else {
+    lines.push(header("issues", result.issues.length, ["severity", "code", "variable", "message"]));
+    for (const issue of result.issues) {
+      lines.push(row(issue.severity, issue.code, issue.variable, issue.message));
+      if (issue.fix) {
+        lines.push(`    fix: ${issue.fix}`);
+      }
+    }
+  }
+  lines.push(result.summary);
+  const hasErrors = result.issues.some((i) => i.severity === "error");
+  const help = buildContextualHelp({
+    command: "diagnose",
+    hasErrors,
+    isEmpty: result.issues.length === 0
+  });
+  if (help.length > 0) {
+    lines.push("", formatHelp(help));
+  }
+  return lines.join(`
+`);
+}
+var MAX_FINDINGS_DEFAULT = 50;
+function toonWorkspaceReport(report, opts) {
+  const full = opts?.full ?? false;
+  const title = opts?.title ?? "workspace";
+  const command = opts?.command ?? (title.includes("lint") ? "lint" : "doctor");
+  const lines = [];
+  lines.push(`${title} | root: ${report.root}`);
+  lines.push(`scanned: ${report.scannedFiles} files | errors: ${report.summary.error} | warnings: ${report.summary.warning} | info: ${report.summary.info}`);
+  if (report.summary.byRule && Object.keys(report.summary.byRule).length > 0) {
+    const sorted = Object.entries(report.summary.byRule).sort(([, a], [, b]) => b - a);
+    const topRule = sorted[0];
+    if (topRule) {
+      lines.push(`top-rule: ${topRule[0]} (${topRule[1]} occurrences)`);
+    }
+  }
+  if (report.findings.length === 0) {
+    lines.push("findings[0]: clean");
+  } else {
+    const findings = full ? report.findings : report.findings.slice(0, MAX_FINDINGS_DEFAULT);
+    const truncated = !full && report.findings.length > MAX_FINDINGS_DEFAULT;
+    lines.push(header("findings", findings.length, ["severity", "rule", "file", "line", "message"]));
+    for (const f of findings) {
+      lines.push(row(f.severity, f.ruleId, f.file, f.line ?? "-", f.message));
+      if (f.suggestedFixes.length > 0) {
+        for (const fix of f.suggestedFixes) {
+          lines.push(`    fix: ${fix.description}${fix.replacement ? ` -> ${fix.replacement}` : ""}`);
+        }
+      }
+    }
+    if (truncated) {
+      lines.push(`  (showing ${MAX_FINDINGS_DEFAULT} of ${report.findings.length} -- use --full to see all)`);
+    }
+  }
+  if (report.warnings.length > 0) {
+    lines.push("", header("warnings", report.warnings.length, ["message"]));
+    for (const w of report.warnings) {
+      lines.push("  " + w);
+    }
+  }
+  const help = buildContextualHelp({
+    command,
+    hasFindings: report.findings.length > 0,
+    isEmpty: report.findings.length === 0
+  });
+  if (help.length > 0) {
+    lines.push("", formatHelp(help));
+  }
+  return lines.join(`
+`);
+}
+function toonProjectDetection(detection) {
+  const lines = [];
+  lines.push(`project: ${detection.status} | framework: ${detection.framework} | pkg-manager: ${detection.packageManager}`);
+  lines.push(`root: ${detection.root ?? "(not found)"}`);
+  lines.push(`deps: ui=${detection.dependencies.ui}, primitives=${detection.dependencies.primitives}`);
+  lines.push(`theme: default=${detection.theme.defaultImported}, dark=${detection.theme.darkImported}, auto=${detection.theme.themeAuto}`);
+  if (detection.warnings.length > 0) {
+    lines.push(header("warnings", detection.warnings.length, ["message"]));
+    for (const w of detection.warnings) {
+      lines.push("  " + w);
+    }
+  }
+  const help = buildContextualHelp({ command: "detect", status: detection.status });
+  if (help.length > 0) {
+    lines.push("", formatHelp(help));
+  }
+  return lines.join(`
+`);
+}
+function toonError(code, message, suggestions) {
+  const lines = [`error[1]{code,message}: ${esc(code)},${esc(message)}`];
+  if (suggestions?.length) {
+    lines.push(header("suggestions", suggestions.length, ["value"]));
+    for (const s of suggestions) {
+      lines.push("  " + s);
+    }
+  }
+  return lines.join(`
+`);
+}
+
+// ../mcp/src/spec-formatters.ts
+var DIR_OVERRIDES2 = {
+  QRCode: "qr-code"
+};
+function componentDir2(name) {
+  return DIR_OVERRIDES2[name] ?? name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
 function pad(str, width) {
   return str.length >= width ? str : str + " ".repeat(width - str.length);
 }
@@ -31698,9 +32464,9 @@ function indent(text, spaces) {
 function getSubpathImport(name, def) {
   if (def.import !== "@dryui/ui")
     return null;
-  return `import { ${name} } from '${def.import}/${componentDir(name)}'`;
+  return `import { ${name} } from '${def.import}/${componentDir2(name)}'`;
 }
-function findComponent(query, components) {
+function findComponent2(query, components) {
   const exact = components[query];
   if (exact)
     return { name: query, def: exact };
@@ -31875,9 +32641,23 @@ function formatSimple(name, def) {
 }
 
 // src/run.ts
-function runCommand(result) {
+import { existsSync as existsSync2 } from "node:fs";
+function fileNotFound(filePath, toon) {
+  if (existsSync2(filePath))
+    return null;
+  return {
+    output: "",
+    error: toon ? toonError("not-found", `File not found: ${filePath}`) : `File not found: ${filePath}`,
+    exitCode: 1
+  };
+}
+function runCommand(result, mode = "text") {
   if (result.error) {
-    console.error(result.error);
+    if (mode === "text") {
+      console.error(result.error);
+    } else {
+      console.log(result.error);
+    }
   } else {
     console.log(result.output);
   }
@@ -31885,13 +32665,20 @@ function runCommand(result) {
 }
 
 // src/commands/info.ts
-function findComponent2(spec, query) {
-  return findComponent(query, spec.components);
+function findComponent3(spec, query) {
+  return findComponent2(query, spec.components);
 }
-function getInfo(query, spec) {
-  const result = findComponent2(spec, query);
+function getInfo(query, spec, options) {
+  const result = findComponent3(spec, query);
   if (!result) {
     const available = Object.keys(spec.components).sort();
+    if (options?.toon) {
+      return {
+        output: "",
+        error: toonError("not-found", `Unknown component: "${query}"`, available),
+        exitCode: 1
+      };
+    }
     const error = [
       `Unknown component: "${query}"`,
       "",
@@ -31902,27 +32689,37 @@ function getInfo(query, spec) {
     return { output: "", error, exitCode: 1 };
   }
   const { name, def } = result;
+  if (options?.toon) {
+    return { output: toonComponent(name, def, { full: options?.full }), error: null, exitCode: 0 };
+  }
   const output = def.compound ? formatCompound(name, def) : formatSimple(name, def);
   return { output, error: null, exitCode: 0 };
 }
 function runInfo(args, spec) {
   if (args.length === 0 || args[0] === "--help") {
-    console.log("Usage: dryui info <component>");
+    console.log("Usage: dryui info <component> [--toon] [--full]");
     console.log("");
     console.log("Show API reference for a DryUI component or composed output.");
     console.log("");
+    console.log("Options:");
+    console.log("  --toon    Output in TOON format (token-optimized for agents)");
+    console.log("  --full    Include full example code (disables truncation)");
+    console.log("");
     console.log("Examples:");
     console.log("  dryui info Button");
     console.log("  dryui info card      # case-insensitive");
-    console.log('  dryui info "hero sections"');
+    console.log("  dryui info Button --toon");
     process.exit(args[0] === "--help" ? 0 : 1);
   }
-  const query = args[0];
+  const toon = args.includes("--toon");
+  const full = args.includes("--full");
+  const query = args.find((a) => !a.startsWith("--"));
   if (!query) {
     console.error("Error: missing component name");
     process.exit(1);
   }
-  runCommand(getInfo(query, spec));
+  const mode = toon ? "toon" : "text";
+  runCommand(getInfo(query, spec, { toon, full }), mode);
 }
 
 // src/format.ts
@@ -31982,7 +32779,7 @@ function formatWorkspaceReport(report, options) {
 // src/commands/project-planner.ts
 function importStatement(name, def, subpath = false) {
   if (subpath && def.import === "@dryui/ui") {
-    return `import { ${name} } from '${def.import}/${componentDir(name)}';`;
+    return `import { ${name} } from '${def.import}/${componentDir2(name)}';`;
   }
   return `import { ${name} } from '${def.import}';`;
 }
@@ -32104,7 +32901,7 @@ function formatAddPlan(plan) {
 `);
 }
 function buildAddSnippet(query, spec, options = {}) {
-  const component = findComponent2(spec, query);
+  const component = findComponent3(spec, query);
   if (!component) {
     return {
       output: "",
@@ -32120,331 +32917,6 @@ function buildAddSnippet(query, spec, options = {}) {
   };
 }
 
-// ../mcp/src/project-planner.ts
-import { existsSync, readFileSync, statSync } from "node:fs";
-import { dirname, resolve } from "node:path";
-var DIR_OVERRIDES2 = {
-  QRCode: "qr-code"
-};
-function componentDir2(name) {
-  return DIR_OVERRIDES2[name] ?? name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-function resolveStart(inputPath) {
-  const candidate = resolve(inputPath ?? process.cwd());
-  return existsSync(candidate) && statSync(candidate).isFile() ? dirname(candidate) : candidate;
-}
-function findUp(start, fileName) {
-  let current = start;
-  while (true) {
-    const candidate = resolve(current, fileName);
-    if (existsSync(candidate))
-      return candidate;
-    const parent = dirname(current);
-    if (parent === current)
-      return null;
-    current = parent;
-  }
-}
-function findUpAny(start, fileNames) {
-  let current = start;
-  while (true) {
-    for (const fileName of fileNames) {
-      const candidate = resolve(current, fileName);
-      if (existsSync(candidate))
-        return candidate;
-    }
-    const parent = dirname(current);
-    if (parent === current)
-      return null;
-    current = parent;
-  }
-}
-function detectPackageManager(root) {
-  if (!root)
-    return "unknown";
-  const lockfilePath = findUpAny(root, [
-    "bun.lock",
-    "bun.lockb",
-    "pnpm-lock.yaml",
-    "package-lock.json",
-    "yarn.lock"
-  ]);
-  if (!lockfilePath)
-    return "unknown";
-  if (lockfilePath.endsWith("bun.lock") || lockfilePath.endsWith("bun.lockb"))
-    return "bun";
-  if (lockfilePath.endsWith("pnpm-lock.yaml"))
-    return "pnpm";
-  if (lockfilePath.endsWith("package-lock.json"))
-    return "npm";
-  if (lockfilePath.endsWith("yarn.lock"))
-    return "yarn";
-  return "unknown";
-}
-function readPackageJson(packageJsonPath) {
-  if (!packageJsonPath)
-    return null;
-  return JSON.parse(readFileSync(packageJsonPath, "utf-8"));
-}
-function getDependencyNames(pkg) {
-  return new Set([
-    ...Object.keys(pkg?.dependencies ?? {}),
-    ...Object.keys(pkg?.devDependencies ?? {})
-  ]);
-}
-function detectFramework(dependencyNames) {
-  if (dependencyNames.has("@sveltejs/kit"))
-    return "sveltekit";
-  if (dependencyNames.has("svelte"))
-    return "svelte";
-  return "unknown";
-}
-function hasImport(filePath, importPath) {
-  if (!filePath)
-    return false;
-  return readFileSync(filePath, "utf-8").includes(importPath);
-}
-function hasThemeAuto(appHtmlPath) {
-  if (!appHtmlPath)
-    return false;
-  return readFileSync(appHtmlPath, "utf-8").includes("theme-auto");
-}
-function hasAnyImport(filePaths, importPath) {
-  return filePaths.some((filePath) => hasImport(filePath, importPath));
-}
-function importsAppCss(rootLayoutPath) {
-  if (!rootLayoutPath)
-    return false;
-  const content = readFileSync(rootLayoutPath, "utf-8");
-  return content.includes("app.css");
-}
-function buildStatus(framework, hasPackageJson, stepsNeeded) {
-  if (!hasPackageJson || framework === "unknown")
-    return "unsupported";
-  return stepsNeeded === 0 ? "ready" : "partial";
-}
-function installCommand(packageManager) {
-  switch (packageManager) {
-    case "bun":
-      return "bun add @dryui/ui";
-    case "pnpm":
-      return "pnpm add @dryui/ui";
-    case "yarn":
-      return "yarn add @dryui/ui";
-    default:
-      return "npm install @dryui/ui";
-  }
-}
-function buildThemeImportSnippet(spec) {
-  return [
-    '<script lang="ts">',
-    `  import '${spec.themeImports.default}';`,
-    `  import '${spec.themeImports.dark}';`,
-    "</script>"
-  ].join(`
-`);
-}
-function buildThemeImportCssSnippet(spec) {
-  return [`@import '${spec.themeImports.default}';`, `@import '${spec.themeImports.dark}';`].join(`
-`);
-}
-function getSuggestedTarget(root, explicitTarget) {
-  if (explicitTarget)
-    return resolve(root ?? process.cwd(), explicitTarget);
-  if (!root)
-    return null;
-  const rootPage = resolve(root, "src/routes/+page.svelte");
-  return existsSync(rootPage) ? rootPage : null;
-}
-function getImportStatement(name, component, subpath = false) {
-  if (subpath && component.import === "@dryui/ui") {
-    return `import { ${name} } from '${component.import}/${componentDir2(name)}';`;
-  }
-  return `import { ${name} } from '${component.import}';`;
-}
-function findComponent3(spec, query) {
-  const exact = spec.components[query];
-  if (exact)
-    return { name: query, def: exact };
-  const lower = query.toLowerCase();
-  for (const [name, def] of Object.entries(spec.components)) {
-    if (name.toLowerCase() === lower)
-      return { name, def };
-  }
-  return null;
-}
-function detectProject(spec, inputPath) {
-  const start = resolveStart(inputPath);
-  const packageJsonPath = findUp(start, "package.json");
-  const root = packageJsonPath ? dirname(packageJsonPath) : null;
-  const dependencyNames = getDependencyNames(readPackageJson(packageJsonPath));
-  const framework = detectFramework(dependencyNames);
-  const appHtmlPath = root ? resolve(root, "src/app.html") : null;
-  const appCssPath = root ? resolve(root, "src/app.css") : null;
-  const rootLayoutPath = root ? resolve(root, "src/routes/+layout.svelte") : null;
-  const rootPagePath = root ? resolve(root, "src/routes/+page.svelte") : null;
-  const appHtml = appHtmlPath && existsSync(appHtmlPath) ? appHtmlPath : null;
-  const appCss = appCssPath && existsSync(appCssPath) ? appCssPath : null;
-  const rootLayout = rootLayoutPath && existsSync(rootLayoutPath) ? rootLayoutPath : null;
-  const rootPage = rootPagePath && existsSync(rootPagePath) ? rootPagePath : null;
-  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 warnings = [];
-  if (!packageJsonPath)
-    warnings.push("No package.json found above the provided path.");
-  if (framework === "unknown")
-    warnings.push("DryUI planning currently targets Svelte and SvelteKit projects.");
-  return {
-    inputPath: start,
-    root,
-    packageJsonPath,
-    framework,
-    packageManager: detectPackageManager(root),
-    status: buildStatus(framework, Boolean(packageJsonPath), stepsNeeded),
-    dependencies: {
-      ui: dependencyNames.has("@dryui/ui"),
-      primitives: dependencyNames.has("@dryui/primitives")
-    },
-    files: {
-      appHtml,
-      appCss,
-      rootLayout,
-      rootPage
-    },
-    theme: {
-      defaultImported,
-      darkImported,
-      themeAuto: hasThemeAuto(appHtml)
-    },
-    warnings
-  };
-}
-function planInstall(spec, inputPath) {
-  const detection = detectProject(spec, inputPath);
-  const steps = [];
-  if (detection.status === "unsupported") {
-    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."
-    });
-    return { detection, steps };
-  }
-  if (!detection.dependencies.ui) {
-    steps.push({
-      kind: "install-package",
-      status: "pending",
-      title: "Install @dryui/ui",
-      description: "Add the styled DryUI package to the current project.",
-      command: installCommand(detection.packageManager)
-    });
-  }
-  if (!detection.theme.defaultImported || !detection.theme.darkImported) {
-    if (detection.files.appCss && detection.files.rootLayout && importsAppCss(detection.files.rootLayout)) {
-      steps.push({
-        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.",
-        path: detection.files.appCss,
-        snippet: buildThemeImportCssSnippet(spec)
-      });
-    } else if (!detection.files.rootLayout) {
-      const path = detection.root ? resolve(detection.root, "src/routes/+layout.svelte") : null;
-      steps.push({
-        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.",
-        ...path ? { path } : {},
-        snippet: buildThemeImportSnippet(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.",
-        path: detection.files.rootLayout,
-        snippet: buildThemeImportSnippet(spec)
-      });
-    }
-  }
-  if (!detection.files.appHtml) {
-    steps.push({
-      kind: "blocked",
-      status: "blocked",
-      title: "app.html not found",
-      description: "DryUI expects src/app.html so the document can default to theme-auto mode."
-    });
-  } else if (!detection.theme.themeAuto) {
-    steps.push({
-      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.',
-      path: detection.files.appHtml,
-      snippet: '<html class="theme-auto">'
-    });
-  }
-  if (steps.length === 0) {
-    steps.push({
-      kind: "note",
-      status: "done",
-      title: "DryUI install plan is complete",
-      description: "The project already has @dryui/ui, theme imports, and theme-auto configured."
-    });
-  }
-  return { detection, steps };
-}
-function planAdd(spec, query, options = {}) {
-  const installPlan = planInstall(spec, options.cwd);
-  const component = findComponent3(spec, query);
-  if (component) {
-    const target = getSuggestedTarget(installPlan.detection.root, options.target);
-    const steps = [];
-    const warnings = [...installPlan.detection.warnings];
-    if (installPlan.steps.some((step) => step.status === "pending" || step.status === "blocked")) {
-      steps.push({
-        kind: "note",
-        status: "info",
-        title: "Complete install plan first",
-        description: "Apply the install plan before inserting DryUI components into project files."
-      });
-    }
-    steps.push(target ? {
-      kind: "edit-file",
-      status: "pending",
-      title: "Insert component into the target file",
-      description: "Add the import and snippet below to the chosen Svelte file.",
-      path: target,
-      snippet: `${getImportStatement(component.name, component.def, options.subpath)}
-
-${component.def.example}`
-    } : {
-      kind: "note",
-      status: "info",
-      title: "Choose a target Svelte file",
-      description: "No root page was found. Pick a target file and reuse the import and snippet in this plan."
-    });
-    return {
-      detection: installPlan.detection,
-      installPlan,
-      targetType: "component",
-      name: component.name,
-      importStatement: getImportStatement(component.name, component.def, options.subpath),
-      snippet: component.def.example,
-      target,
-      steps,
-      warnings
-    };
-  }
-  throw new Error(`Unknown component: "${query}"`);
-}
-
 // src/commands/add.ts
 function parseProjectInput(positionals, spec) {
   const first = positionals[0];
@@ -32456,8 +32928,8 @@ function parseProjectInput(positionals, spec) {
     return { query: first };
   }
   if (positionals.length === 2) {
-    const firstIsQuery = Boolean(findComponent2(spec, first));
-    const secondIsQuery = Boolean(findComponent2(spec, second));
+    const firstIsQuery = Boolean(findComponent3(spec, first));
+    const secondIsQuery = Boolean(findComponent3(spec, second));
     if (firstIsQuery && !secondIsQuery) {
       return { query: first, cwd: second };
     }
@@ -32584,6 +33056,7 @@ function runAdd(args, spec) {
 // src/commands/detect.ts
 function parseDetectArgs(args) {
   let json = false;
+  let toon = false;
   let path;
   for (let index = 0;index < args.length; index++) {
     const arg = args[index];
@@ -32593,6 +33066,10 @@ function parseDetectArgs(args) {
       json = true;
       continue;
     }
+    if (arg === "--toon") {
+      toon = true;
+      continue;
+    }
     if (arg.startsWith("--")) {
       continue;
     }
@@ -32600,24 +33077,29 @@ function parseDetectArgs(args) {
       path = arg;
     }
   }
-  return { json, path };
+  return { json, toon, path };
 }
 function getDetect(inputPath, spec, options = {}) {
   const detection = detectProject(spec, inputPath);
+  if (options.toon) {
+    return { output: toonProjectDetection(detection), error: null, exitCode: 0 };
+  }
   return options.json ? { output: JSON.stringify(detection, null, 2), error: null, exitCode: 0 } : { output: formatProjectDetection(detection), error: null, exitCode: 0 };
 }
 function runDetect(args, spec) {
   if (args[0] === "--help") {
-    console.log("Usage: dryui detect [--json] [path]");
+    console.log("Usage: dryui detect [--json] [--toon] [path]");
     console.log("");
     console.log("Detect the current DryUI project setup.");
     console.log("");
     console.log("Options:");
     console.log("  --json    Output raw JSON instead of formatted text");
+    console.log("  --toon    Output in TOON format (token-optimized for agents)");
     process.exit(0);
   }
-  const { json, path } = parseDetectArgs(args);
-  runCommand(getDetect(path, spec, { json }));
+  const { json, toon, path } = parseDetectArgs(args);
+  const mode = toon ? "toon" : json ? "json" : "text";
+  runCommand(getDetect(path, spec, { json, toon }), mode);
 }
 
 // src/commands/install.ts
@@ -32724,7 +33206,14 @@ function groupByCategory(spec) {
   }
   return groups;
 }
-function getList(category, spec, options = {}) {
+function getList(category, spec, options) {
+  if (options?.toon) {
+    return {
+      output: toonComponentList(spec.components, category ?? undefined),
+      error: null,
+      exitCode: 0
+    };
+  }
   const sections = [];
   const validCategories = getCategories(spec);
   if (category && !validCategories.includes(category)) {
@@ -32758,18 +33247,20 @@ function getList(category, spec, options = {}) {
 }
 function runList(args, spec) {
   if (args[0] === "--help") {
-    console.log("Usage: dryui list [--category <category>]");
+    console.log("Usage: dryui list [--category <category>] [--toon]");
     console.log("");
     console.log("List DryUI components.");
     console.log("");
     console.log("Options:");
     console.log("  --category <cat>  Filter by category");
+    console.log("  --toon            Output in TOON format (token-optimized for agents)");
     console.log("");
     console.log("Categories:");
     const cats = getCategories(spec);
     console.log(`  ${cats.join(", ")}`);
     process.exit(0);
   }
+  const toon = args.includes("--toon");
   let filterCategory = null;
   const catIdx = args.indexOf("--category");
   if (catIdx !== -1) {
@@ -32780,11 +33271,12 @@ function runList(args, spec) {
     }
     filterCategory = catValue.toLowerCase();
   }
-  runCommand(getList(filterCategory, spec));
+  const mode = toon ? "toon" : "text";
+  runCommand(getList(filterCategory, spec, { toon }), mode);
 }
 
 // src/commands/review.ts
-import { readFileSync as readFileSync2, existsSync as existsSync2 } from "node:fs";
+import { readFileSync as readFileSync2 } from "node:fs";
 
 // ../mcp/src/utils.ts
 function buildLineOffsets(text) {
@@ -33485,12 +33977,19 @@ function reviewComponent(code, spec, filename) {
 
 // src/commands/review.ts
 function getReview(filePath, spec, options) {
-  if (!existsSync2(filePath)) {
-    return { output: "", error: `File not found: ${filePath}`, exitCode: 1 };
-  }
+  const missing = fileNotFound(filePath, options?.toon);
+  if (missing)
+    return missing;
   const code = readFileSync2(filePath, "utf-8");
   const filename = filePath.split("/").pop();
   const result = reviewComponent(code, spec, filename);
+  if (options?.toon) {
+    return {
+      output: toonReviewResult(result),
+      error: null,
+      exitCode: result.issues.some((i) => i.severity === "error") ? 1 : 0
+    };
+  }
   if (options?.json) {
     return {
       output: JSON.stringify(result, null, 2),
@@ -33517,7 +34016,7 @@ function getReview(filePath, spec, options) {
 }
 function runReview(args, spec) {
   if (args.length === 0 || args[0] === "--help") {
-    console.log("Usage: dryui review [--json] <file.svelte>");
+    console.log("Usage: dryui review [--json] [--toon] <file.svelte>");
     console.log("");
     console.log("Validate a Svelte component against the DryUI spec.");
     console.log("Checks for incorrect component usage, missing props,");
@@ -33525,20 +34024,23 @@ function runReview(args, spec) {
     console.log("");
     console.log("Options:");
     console.log("  --json    Output raw JSON instead of formatted text");
+    console.log("  --toon    Output in TOON format (token-optimized for agents)");
     process.exit(args[0] === "--help" ? 0 : 1);
   }
   const jsonMode = args.includes("--json");
-  const fileArgs = args.filter((a) => a !== "--json");
+  const toon = args.includes("--toon");
+  const fileArgs = args.filter((a) => !a.startsWith("--"));
   const filePath = fileArgs[0];
   if (!filePath) {
     console.error("Error: missing file path");
     process.exit(1);
   }
-  runCommand(getReview(filePath, spec, { json: jsonMode }));
+  const mode = toon ? "toon" : jsonMode ? "json" : "text";
+  runCommand(getReview(filePath, spec, { json: jsonMode, toon }), mode);
 }
 
 // src/commands/diagnose.ts
-import { readFileSync as readFileSync3, existsSync as existsSync3 } from "node:fs";
+import { readFileSync as readFileSync3 } from "node:fs";
 
 // ../mcp/src/theme-checker.ts
 function capture(match, index) {
@@ -34294,11 +34796,18 @@ function diagnoseTheme(css, spec) {
 
 // src/commands/diagnose.ts
 function getDiagnose(filePath, spec, options) {
-  if (!existsSync3(filePath)) {
-    return { output: "", error: `File not found: ${filePath}`, exitCode: 1 };
-  }
+  const missing = fileNotFound(filePath, options?.toon);
+  if (missing)
+    return missing;
   const css = readFileSync3(filePath, "utf-8");
   const result = diagnoseTheme(css, spec);
+  if (options?.toon) {
+    return {
+      output: toonDiagnoseResult(result),
+      error: null,
+      exitCode: result.issues.some((i) => i.severity === "error") ? 1 : 0
+    };
+  }
   if (options?.json) {
     return {
       output: JSON.stringify(result, null, 2),
@@ -34331,26 +34840,29 @@ function getDiagnose(filePath, spec, options) {
 }
 function runDiagnose(args, spec) {
   if (args.length === 0 || args[0] === "--help") {
-    console.log("Usage: dryui diagnose [--json] <file.css>");
+    console.log("Usage: dryui diagnose [--json] [--toon] <file.css>");
     console.log("");
     console.log("Validate theme CSS for missing tokens, value errors,");
     console.log("contrast issues, and component token problems.");
     console.log("");
     console.log("Options:");
     console.log("  --json    Output raw JSON instead of formatted text");
+    console.log("  --toon    Output in TOON format (token-optimized for agents)");
     process.exit(args[0] === "--help" ? 0 : 1);
   }
   const jsonMode = args.includes("--json");
-  const fileArgs = args.filter((a) => a !== "--json");
+  const toon = args.includes("--toon");
+  const fileArgs = args.filter((a) => !a.startsWith("--"));
   const filePath = fileArgs[0];
   if (!filePath) {
     console.error("Error: missing file path");
     process.exit(1);
   }
-  runCommand(getDiagnose(filePath, spec, { json: jsonMode }));
+  const mode = toon ? "toon" : jsonMode ? "json" : "text";
+  runCommand(getDiagnose(filePath, spec, { json: jsonMode, toon }), mode);
 }
 
-// src/commands/compose.ts
+// ../mcp/dist/composition-search.js
 var STOP_WORDS = new Set([
   "a",
   "an",
@@ -34416,81 +34928,58 @@ function scoreText(tokens, text) {
   const lower = text.toLowerCase();
   return tokens.reduce((score, t) => score + (lower.includes(t) ? 1 : 0), 0);
 }
-function getCompose(query, spec) {
-  if (!spec.composition) {
-    return {
-      output: "",
-      error: "No composition data available. Rebuild the MCP package.",
-      exitCode: 1
-    };
-  }
+function searchComposition(composition, query) {
   const q = query.toLowerCase();
   const tokens = tokenize(query);
   const exactComponentMatches = [];
   const exactRecipeMatches = [];
-  for (const comp of Object.values(spec.composition.components)) {
+  for (const comp of Object.values(composition.components)) {
     if (comp.component.toLowerCase().includes(q) || comp.useWhen.toLowerCase().includes(q) || comp.alternatives.some((a) => a.component.toLowerCase().includes(q) || a.useWhen.toLowerCase().includes(q)) || comp.antiPatterns.some((ap) => ap.pattern.toLowerCase().includes(q))) {
       exactComponentMatches.push(comp);
     }
   }
-  for (const recipe of Object.values(spec.composition.recipes)) {
+  for (const recipe of Object.values(composition.recipes)) {
     if (recipe.name.toLowerCase().includes(q) || recipe.description.toLowerCase().includes(q) || recipe.tags.some((t) => t.toLowerCase().includes(q)) || recipe.components.some((c) => c.toLowerCase().includes(q))) {
       exactRecipeMatches.push(recipe);
     }
   }
-  let componentMatches;
-  let recipeMatches;
   if (exactComponentMatches.length || exactRecipeMatches.length) {
-    componentMatches = exactComponentMatches;
-    recipeMatches = exactRecipeMatches;
-  } else if (tokens.length) {
-    const scoredComponents = [];
-    for (const comp of Object.values(spec.composition.components)) {
-      const corpus = [
-        comp.component,
-        comp.useWhen,
-        ...comp.alternatives.flatMap((a) => [a.component, a.useWhen]),
-        ...comp.antiPatterns.map((ap) => ap.pattern),
-        ...comp.combinesWith
-      ].join(" ");
-      const score = scoreText(tokens, corpus);
-      if (score > 0)
-        scoredComponents.push({ comp, score });
-    }
-    const scoredRecipes = [];
-    for (const recipe of Object.values(spec.composition.recipes)) {
-      const corpus = [recipe.name, recipe.description, ...recipe.tags, ...recipe.components].join(" ");
-      const score = scoreText(tokens, corpus);
-      if (score > 0)
-        scoredRecipes.push({ recipe, score });
-    }
-    scoredComponents.sort((a, b) => b.score - a.score);
-    scoredRecipes.sort((a, b) => b.score - a.score);
-    const minScore = Math.max(1, Math.floor(tokens.length * 0.3));
-    componentMatches = scoredComponents.filter((s) => s.score >= minScore).slice(0, 10).map((s) => s.comp);
-    recipeMatches = scoredRecipes.filter((s) => s.score >= minScore).slice(0, 5).map((s) => s.recipe);
-  } else {
-    componentMatches = [];
-    recipeMatches = [];
-  }
-  if (!componentMatches.length && !recipeMatches.length) {
-    return {
-      output: "",
-      error: `No composition guidance found for "${query}".
-
-Try:
-- A component name (e.g. "DatePicker", "Avatar")
-- A UI concept (e.g. "date input", "image placeholder")
-- A pattern name (e.g. "search-form", "dashboard-page")`,
-      exitCode: 1
-    };
-  }
+    return { componentMatches: exactComponentMatches, recipeMatches: exactRecipeMatches };
+  }
+  if (!tokens.length) {
+    return { componentMatches: [], recipeMatches: [] };
+  }
+  const scoredComponents = [];
+  for (const comp of Object.values(composition.components)) {
+    const corpus = [
+      comp.component,
+      comp.useWhen,
+      ...comp.alternatives.flatMap((a) => [a.component, a.useWhen]),
+      ...comp.antiPatterns.map((ap) => ap.pattern),
+      ...comp.combinesWith
+    ].join(" ");
+    const score = scoreText(tokens, corpus);
+    if (score > 0)
+      scoredComponents.push({ comp, score });
+  }
+  const scoredRecipes = [];
+  for (const recipe of Object.values(composition.recipes)) {
+    const corpus = [recipe.name, recipe.description, ...recipe.tags, ...recipe.components].join(" ");
+    const score = scoreText(tokens, corpus);
+    if (score > 0)
+      scoredRecipes.push({ recipe, score });
+  }
+  scoredComponents.sort((a, b) => b.score - a.score);
+  scoredRecipes.sort((a, b) => b.score - a.score);
+  const minScore = Math.max(1, Math.floor(tokens.length * 0.3));
+  return {
+    componentMatches: scoredComponents.filter((s) => s.score >= minScore).slice(0, 10).map((s) => s.comp),
+    recipeMatches: scoredRecipes.filter((s) => s.score >= minScore).slice(0, 5).map((s) => s.recipe)
+  };
+}
+function formatCompositionResult(results) {
   const lines = [];
-  lines.push("⚠ SETUP: Root +layout.svelte must import '@dryui/ui/themes/default.css'");
-  lines.push('  and dark.css. app.html needs <html class="theme-auto">.');
-  lines.push('  Not set up? Run: dryui compose "app shell"');
-  lines.push("");
-  for (const comp of componentMatches) {
+  for (const comp of results.componentMatches) {
     lines.push(`── ${comp.component} ──────────────────────────────`);
     lines.push(`[DEV GUIDANCE — do not render as page content]`);
     lines.push(`Use: ${comp.component} — ${comp.useWhen}`);
@@ -34513,7 +35002,7 @@ Try:
     }
     lines.push("");
   }
-  for (const recipe of recipeMatches) {
+  for (const recipe of results.recipeMatches) {
     lines.push(`── Recipe: ${recipe.name} ──────────────────────────────`);
     lines.push(`[DEV GUIDANCE — do not render as page content]`);
     lines.push(recipe.description);
@@ -34523,29 +35012,88 @@ Try:
     lines.push(recipe.snippet);
     lines.push("");
   }
-  return { output: lines.join(`
-`).trimEnd(), error: null, exitCode: 0 };
+  return lines.join(`
+`);
+}
+
+// src/commands/compose.ts
+var SETUP_PREAMBLE = [
+  "⚠ SETUP: Root +layout.svelte must import '@dryui/ui/themes/default.css'",
+  '  and dark.css. app.html needs <html class="theme-auto">.',
+  '  Not set up? Run: dryui compose "app shell"',
+  ""
+].join(`
+`);
+function getCompose(query, spec, options) {
+  if (!spec.composition) {
+    return {
+      output: "",
+      error: "No composition data available. Rebuild the MCP package.",
+      exitCode: 1
+    };
+  }
+  const results = searchComposition(spec.composition, query);
+  if (!results.componentMatches.length && !results.recipeMatches.length) {
+    if (options?.toon) {
+      return {
+        output: "",
+        error: toonError("no-results", `No composition guidance for "${query}"`, [
+          "Try a component name (DatePicker, Avatar)",
+          "Try a UI concept (date input, image placeholder)",
+          "Try a pattern name (search-form, dashboard-page)"
+        ]),
+        exitCode: 1
+      };
+    }
+    return {
+      output: "",
+      error: `No composition guidance found for "${query}".
+
+Try:
+- A component name (e.g. "DatePicker", "Avatar")
+- A UI concept (e.g. "date input", "image placeholder")
+- A pattern name (e.g. "search-form", "dashboard-page")`,
+      exitCode: 1
+    };
+  }
+  if (options?.toon) {
+    return {
+      output: toonComposition(results, { full: options?.full }),
+      error: null,
+      exitCode: 0
+    };
+  }
+  const output = SETUP_PREAMBLE + `
+` + formatCompositionResult(results);
+  return { output: output.trimEnd(), error: null, exitCode: 0 };
 }
 function runCompose(args, spec) {
   if (args.length === 0 || args[0] === "--help") {
-    console.log("Usage: dryui compose <query>");
+    console.log("Usage: dryui compose <query> [--toon] [--full]");
     console.log("");
     console.log("Look up composition guidance for building UIs with DryUI.");
     console.log("Returns ranked component alternatives, anti-patterns, and recipes.");
     console.log("");
+    console.log("Options:");
+    console.log("  --toon    Output in TOON format (token-optimized for agents)");
+    console.log("  --full    Include full code snippets (disables truncation)");
+    console.log("");
     console.log("Examples:");
     console.log('  dryui compose "search form"');
     console.log('  dryui compose "hotel card"');
-    console.log('  dryui compose "travel booking"');
+    console.log('  dryui compose "travel booking" --toon');
     process.exit(args[0] === "--help" ? 0 : 1);
   }
-  const query = args.join(" ").trim();
-  runCommand(getCompose(query, spec));
+  const toon = args.includes("--toon");
+  const full = args.includes("--full");
+  const query = args.filter((a) => !a.startsWith("--")).join(" ").trim();
+  const mode = toon ? "toon" : "text";
+  runCommand(getCompose(query, spec, { toon, full }), mode);
 }
 
 // ../mcp/src/workspace-audit.ts
 import { execFileSync } from "node:child_process";
-import { existsSync as existsSync4, readFileSync as readFileSync4, readdirSync, realpathSync, statSync as statSync2 } from "node:fs";
+import { existsSync as existsSync3, readFileSync as readFileSync4, readdirSync, realpathSync, statSync as statSync2 } from "node:fs";
 import { dirname as dirname2, relative, resolve as resolve2 } from "node:path";
 var DEFAULT_INCLUDE = [
   "packages/ui",
@@ -34578,7 +35126,7 @@ function normalizePath(path) {
 }
 function resolveRoot(inputPath) {
   const candidate = resolve2(inputPath ?? process.cwd());
-  if (existsSync4(candidate) && statSync2(candidate).isFile()) {
+  if (existsSync3(candidate) && statSync2(candidate).isFile()) {
     return dirname2(candidate);
   }
   return candidate;
@@ -34649,7 +35197,7 @@ function collectChangedFiles(root) {
   }
 }
 function defaultInclude(root) {
-  const included = DEFAULT_INCLUDE.filter((entry) => existsSync4(resolve2(root, entry)));
+  const included = DEFAULT_INCLUDE.filter((entry) => existsSync3(resolve2(root, entry)));
   return included.length > 0 ? included : ["."];
 }
 function isDefaultExcluded(path) {
@@ -34823,6 +35371,8 @@ function parseWorkspaceArgs(args) {
   const exclude = [];
   let path;
   let json = false;
+  let toon = false;
+  let full = false;
   let changed = false;
   let maxSeverity = "info";
   for (let index = 0;index < args.length; index++) {
@@ -34833,6 +35383,14 @@ function parseWorkspaceArgs(args) {
       json = true;
       continue;
     }
+    if (arg === "--toon") {
+      toon = true;
+      continue;
+    }
+    if (arg === "--full") {
+      full = true;
+      continue;
+    }
     if (arg === "--changed") {
       changed = true;
       continue;
@@ -34861,7 +35419,7 @@ function parseWorkspaceArgs(args) {
     if (!path)
       path = arg;
   }
-  return { path, options: { json, include, exclude, maxSeverity, changed } };
+  return { path, options: { json, toon, full, include, exclude, maxSeverity, changed } };
 }
 
 // src/commands/doctor.ts
@@ -34874,6 +35432,13 @@ function getDoctor(inputPath, spec, options = {}) {
       ...options.maxSeverity ? { maxSeverity: options.maxSeverity } : {},
       ...options.changed === undefined ? {} : { changed: options.changed }
     });
+    if (options.toon) {
+      return {
+        output: toonWorkspaceReport(report, { title: "doctor", command: "doctor", full: options.full }),
+        error: null,
+        exitCode: 0
+      };
+    }
     return {
       output: formatWorkspaceReport(report, {
         title: "DryUI workspace doctor",
@@ -34893,13 +35458,18 @@ function getDoctor(inputPath, spec, options = {}) {
 }
 function runDoctor(args, spec) {
   if (args[0] === "--help") {
-    console.log("Usage: dryui doctor [path] [--include <glob>] [--exclude <glob>] [--max-severity <level>] [--changed]");
+    console.log("Usage: dryui doctor [path] [--toon] [--full] [--include <glob>] [--exclude <glob>] [--max-severity <level>] [--changed]");
     console.log("");
     console.log("Inspect workspace health with human-readable findings.");
+    console.log("");
+    console.log("Options:");
+    console.log("  --toon    Output in TOON format (token-optimized for agents)");
+    console.log("  --full    Show all findings (disables truncation at 50)");
     process.exit(0);
   }
   const { path, options } = parseWorkspaceArgs(args);
-  runCommand(getDoctor(path, spec, options));
+  const mode = options.toon ? "toon" : "text";
+  runCommand(getDoctor(path, spec, options), mode);
 }
 
 // src/commands/lint.ts
@@ -34912,6 +35482,13 @@ function getLint(inputPath, spec, options = {}) {
       ...options.changed === undefined ? {} : { changed: options.changed },
       ...options.maxSeverity ? { maxSeverity: options.maxSeverity } : {}
     });
+    if (options.toon) {
+      return {
+        output: toonWorkspaceReport(report, { title: "lint", command: "lint", full: options.full }),
+        error: null,
+        exitCode: report.findings.length > 0 ? 1 : 0
+      };
+    }
     if (options.json) {
       return {
         output: JSON.stringify(report, null, 2),
@@ -34934,23 +35511,28 @@ function getLint(inputPath, spec, options = {}) {
 }
 function runLint(args, spec) {
   if (args[0] === "--help") {
-    console.log("Usage: dryui lint [path] [--json] [--include <glob>] [--exclude <glob>] [--max-severity <level>] [--changed]");
+    console.log("Usage: dryui lint [path] [--json] [--toon] [--full] [--include <glob>] [--exclude <glob>] [--max-severity <level>] [--changed]");
     console.log("");
     console.log("Print deterministic workspace findings.");
+    console.log("");
+    console.log("Options:");
+    console.log("  --toon    Output in TOON format (token-optimized for agents)");
+    console.log("  --full    Show all findings (disables truncation at 50)");
     process.exit(0);
   }
   const { path, options } = parseWorkspaceArgs(args);
-  runCommand(getLint(path, spec, options));
+  const mode = options.toon ? "toon" : options.json ? "json" : "text";
+  runCommand(getLint(path, spec, options), mode);
 }
 
 // src/commands/feedback.ts
-import { existsSync as existsSync6 } from "node:fs";
+import { existsSync as existsSync5 } from "node:fs";
 import { spawnSync } from "node:child_process";
 import { dirname as dirname4, resolve as resolve3 } from "node:path";
 import { fileURLToPath } from "node:url";
 
 // ../feedback-server/src/config.ts
-import { existsSync as existsSync5, mkdirSync, readFileSync as readFileSync5, writeFileSync } from "node:fs";
+import { existsSync as existsSync4, mkdirSync, readFileSync as readFileSync5, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { dirname as dirname3, join } from "node:path";
 var DEFAULT_FEEDBACK_PORT = 4748;
@@ -35160,7 +35742,7 @@ __export(exports_util, {
   finalizeIssue: () => finalizeIssue,
   extend: () => extend,
   escapeRegex: () => escapeRegex,
-  esc: () => esc,
+  esc: () => esc2,
   defineLazy: () => defineLazy,
   createTransparentProxy: () => createTransparentProxy,
   cloneDef: () => cloneDef,
@@ -35311,7 +35893,7 @@ function randomString(length = 10) {
   }
   return str;
 }
-function esc(str) {
+function esc2(str) {
   return JSON.stringify(str);
 }
 function slugify(input) {
@@ -36796,10 +37378,10 @@ function isValidJWT(token, algorithm = null) {
     const tokensParts = token.split(".");
     if (tokensParts.length !== 3)
       return false;
-    const [header] = tokensParts;
-    if (!header)
+    const [header2] = tokensParts;
+    if (!header2)
       return false;
-    const parsedHeader = JSON.parse(atob(header));
+    const parsedHeader = JSON.parse(atob(header2));
     if ("typ" in parsedHeader && parsedHeader?.typ !== "JWT")
       return false;
     if (!parsedHeader.alg)
@@ -37080,7 +37662,7 @@ var $ZodObjectJIT = /* @__PURE__ */ $constructor("$ZodObjectJIT", (inst, def) =>
     const doc = new Doc(["shape", "payload", "ctx"]);
     const normalized = _normalized.value;
     const parseStr = (key) => {
-      const k = esc(key);
+      const k = esc2(key);
       return `shape[${k}]._zod.run({ value: input[${k}], issues: [] }, ctx)`;
     };
     doc.write(`const input = payload.value;`);
@@ -37092,7 +37674,7 @@ var $ZodObjectJIT = /* @__PURE__ */ $constructor("$ZodObjectJIT", (inst, def) =>
     doc.write(`const newResult = {};`);
     for (const key of normalized.keys) {
       const id = ids[key];
-      const k = esc(key);
+      const k = esc2(key);
       const schema = shape[key];
       const isOptionalOut = schema?._zod?.optout === "optional";
       doc.write(`const ${id} = ${parseStr(key)};`);
@@ -40676,7 +41258,7 @@ function usage() {
 `);
 }
 function resolveServerEntry() {
-  if (existsSync6(SERVER_DIST_PATH))
+  if (existsSync5(SERVER_DIST_PATH))
     return SERVER_DIST_PATH;
   return SERVER_SRC_PATH;
 }
@@ -40774,32 +41356,52 @@ var USAGE = `Usage: dryui <command> [options]
 
 Commands:
   init                          Print setup snippets for a new DryUI app
-  detect [--json] [path]        Detect DryUI project setup
-  install [--json] [path]       Print a project install plan
+  detect [--json] [--toon] [path]
+                                Detect DryUI project setup
+  install [--json] [--toon] [path]
+                                Print a project install plan
   add <component>               Print a copyable starter snippet for a component
-  info <component>              Show component API reference
-  list [--category <cat>]       List all components
-  compose <query>               Look up composition guidance
-  review [--json] <file.svelte> Validate a Svelte file against DryUI spec
-  diagnose [--json] <file.css>  Validate theme CSS
-  doctor [path] [--include <glob>] [--exclude <glob>] [--changed]
+  info <component> [--toon]     Show component API reference
+  list [--category <cat>] [--toon]
+                                List all components
+  compose <query> [--toon]      Look up composition guidance
+  review [--json] [--toon] <file.svelte>
+                                Validate a Svelte file against DryUI spec
+  diagnose [--json] [--toon] <file.css>
+                                Validate theme CSS
+  doctor [path] [--toon] [--include <glob>] [--exclude <glob>] [--changed]
                                 Inspect workspace health
-  lint [path] [--json] [--include <glob>] [--exclude <glob>] [--max-severity <level>] [--changed]
+  lint [path] [--json] [--toon] [--include <glob>] [--exclude <glob>] [--changed]
                                 Print deterministic workspace findings
   feedback <subcommand>         Start or inspect the feedback server
 
 Options:
   --help                  Show help for a command
-  --version               Show version`;
+  --version               Show version
+  --toon                  Token-optimized output for AI agents (per-command)
+  --full                  Disable truncation (use with --toon)`;
 function main() {
   const args = process.argv.slice(2);
   const command = args[0];
-  if (!command || command === "--help" || command === "-h") {
+  if (command === "--version" || command === "-v") {
+    console.log(VERSION);
+    process.exit(0);
+  }
+  if (command === "--help" || command === "-h") {
     console.log(USAGE);
     process.exit(0);
   }
-  if (command === "--version" || command === "-v") {
-    console.log(VERSION);
+  if (!command) {
+    try {
+      const detection = detectProject(spec_default, undefined);
+      if (detection.status === "ready" || detection.status === "partial") {
+        console.log(`dryui v${VERSION}
+`);
+        console.log(toonProjectDetection(detection));
+        process.exit(0);
+      }
+    } catch {}
+    console.log(USAGE);
     process.exit(0);
   }
   const commandArgs = args.slice(1);