mlola-ui 1.0.8 → 1.0.9

package/README.md

@@ -1,9 +1,10 @@
 # mlola-ui
 
 The Mlola UI source-copy CLI. It writes components, blocks, pages, and templates
-into your project, rewrites their imports to your aliases, and installs nothing
-else. Framework-free: the copied markup works in any language that can emit
-HTML, and React sources use only React.
+into your project, rewrites their imports to fit it, and installs the Mlola
+packages they import with your package manager. Framework-free: the copied
+markup works in any language that can emit HTML, and React sources use only
+React.
 
 The library's contract is generated from its own stylesheet, so a model reading
 it cannot invent a class or attribute that does not exist.
@@ -17,20 +18,30 @@ npx mlola-ui doctor
 ```
 
 `init` writes `mlola.config.json`, the engine stylesheet, and the instructions
-your coding agents read (see below). `add` resolves the
-dependency graph (a page pulls its blocks, a block pulls its components) and
-copies only what you asked for. `doctor` checks the project against the registry:
-missing engine imports, legacy attributes, modified generated files, and
-forbidden dependencies.
+your coding agents read (see below), and installs `@mlola-ui/engine`. It fits
+the project it finds: files go where the `@/` alias in `tsconfig.json` points,
+or into `src/` when there is one. Without an alias, as in a new Vite app, it
+sets `"imports": "relative"` and the copied files import each other by
+relative path, so nothing needs setting up first.
+
+`add` resolves the dependency graph (a page pulls its blocks, a block pulls its
+components), copies only what you asked for, and installs the packages the
+copied code imports that `package.json` does not declare yet. Pass
+`--no-install` to only print the command. `doctor` checks the project against
+the registry: packages the installed items import, the engine import, the
+theme attribute, and files changed since they were added.
+
+Tailwind can stay in the project. The engine places Mlola's layers above
+Tailwind's preflight in either import order.
 
 ## Commands
 
 | Command | What it does |
 | --- | --- |
-| `init [--no-agents]` | create `mlola.config.json`, the stylesheet entry and the agent instructions |
+| `init [--no-agents] [--no-install]` | create `mlola.config.json`, the stylesheet entry and the agent instructions, and install the engine |
 | `agents` | write or refresh the agent instructions in an existing project |
 | `mcp` | run the Mlola MCP server over stdio, for coding agents |
-| `add <items…>` | copy items and their dependencies into the project |
+| `add <items…> [--no-install]` | copy items and their dependencies into the project, and install the packages they import |
 | `list [--json]` | print every installable item |
 | `doctor` | report project and registry problems |
 | `login <token>` | save a Mlola Pro token (from /account) for this user |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
   "type": "module",
   "bin": {

package/registry/assets.json

@@ -382,13 +382,13 @@
           "path": "download.svg",
           "role": "source",
           "bytes": 3444,
-          "integrity": "sha256-5cm99iahdj31U8SY6CmP2+i/Y7gqzep2xLhZSyR3lIw="
+          "integrity": "sha256-BUz1gF+cjzSGX80cAXkBEbk2B/QfikfDVvMkXf9aetY="
         },
         {
           "path": "download.tsx",
           "role": "react",
           "bytes": 4359,
-          "integrity": "sha256-HCmxOC90IVFKx9MvBDtG9tuxSrYCOvS/yUm6Hxa6vN8="
+          "integrity": "sha256-HqMG8B7wBduafDrBZ3k0PSxWpPZPWArZsJy3YXyv+Ew="
         }
       ]
     },
@@ -656,7 +656,7 @@
       "id": "link",
       "kind": "2d",
       "title": "Connected",
-      "summary": "Two interlocking metal links carrying a tiny shared signal.",
+      "summary": "Two open chain links joined by a clear central bar with a restrained signal accent.",
       "tags": [
         "link",
         "connection",
@@ -667,14 +667,14 @@
         {
           "path": "link.svg",
           "role": "source",
-          "bytes": 2874,
-          "integrity": "sha256-dMvq0GVsY+/hNe6z8rZ5SJL7Jh/2RmtYFV6UX3+5GnY="
+          "bytes": 2504,
+          "integrity": "sha256-+gKXIfVp1G3qEUWS1veswBBwNwRcs5c04F1y3NKB7hs="
         },
         {
           "path": "link.tsx",
           "role": "react",
-          "bytes": 3737,
-          "integrity": "sha256-PmDMYKD2awnUZuEc/5AKBEk1wZefhKnwenG8MRSNpc8="
+          "bytes": 3357,
+          "integrity": "sha256-MGE+g1e9BmbGHP1XMzC/YKBCNqp3LO+b5Jb2DiN7wNU="
         }
       ]
     },
@@ -812,7 +812,7 @@
       "id": "notifications",
       "kind": "2d",
       "title": "Notifications",
-      "summary": "A small desk bell with one fresh notification card beside it.",
+      "summary": "A softly outlined notification bell with a small clapper and one fresh message card.",
       "tags": [
         "notifications",
         "alerts",
@@ -823,14 +823,14 @@
         {
           "path": "notifications.svg",
           "role": "source",
-          "bytes": 3439,
-          "integrity": "sha256-+PZJkoooLoCtu8uoDJbdXAxR0oJPcA86j0uz9Ww2YyQ="
+          "bytes": 3485,
+          "integrity": "sha256-ihNfIqnU8XYhAQnwgl9t2ZOjN0m8XIC8HJmRsec7+EM="
         },
         {
           "path": "notifications.tsx",
           "role": "react",
-          "bytes": 4364,
-          "integrity": "sha256-c6x6JvSMARTd588qqW/pJ9RgdvEqINR2G6OxvvKOnAk="
+          "bytes": 4431,
+          "integrity": "sha256-8epIRgSRCUZLmlIjw/P2MZbmkYNXeIz4l5IiX6s22pc="
         }
       ]
     },
@@ -912,6 +912,58 @@
         }
       ]
     },
+    {
+      "id": "precise-layout",
+      "kind": "2d",
+      "title": "Precise layout",
+      "summary": "A measured layout sheet and an extended tape, with aligned tick marks and a folded end hook.",
+      "tags": [
+        "measure",
+        "layout",
+        "design"
+      ],
+      "themeable": true,
+      "files": [
+        {
+          "path": "precise-layout.svg",
+          "role": "source",
+          "bytes": 4986,
+          "integrity": "sha256-19uhMUCRTWI2J0Po8hbC3cyBmOhv2dxjMqLMsjHaFAo="
+        },
+        {
+          "path": "precise-layout.tsx",
+          "role": "react",
+          "bytes": 6002,
+          "integrity": "sha256-xUeKXphcaq5uFvfkci0bXbK3jzhh1QkRSSukH/BlG3k="
+        }
+      ]
+    },
+    {
+      "id": "print-ready",
+      "kind": "2d",
+      "title": "Print ready",
+      "summary": "A compact desktop printer with a fresh sheet feeding through a clearly defined output slot.",
+      "tags": [
+        "print",
+        "documents",
+        "export"
+      ],
+      "themeable": true,
+      "files": [
+        {
+          "path": "print-ready.svg",
+          "role": "source",
+          "bytes": 4240,
+          "integrity": "sha256-Z5LuX5KA6LA/slehxyi5lJi2sMSmiVw5oGnzKqKxNAw="
+        },
+        {
+          "path": "print-ready.tsx",
+          "role": "react",
+          "bytes": 5222,
+          "integrity": "sha256-WI61gBtD0xRJYGOQLOxyo5utgw8obTyYad4Rjbvqunc="
+        }
+      ]
+    },
     {
       "id": "quick-calculation",
       "kind": "2d",
@@ -938,6 +990,32 @@
         }
       ]
     },
+    {
+      "id": "quiet-workspace",
+      "kind": "2d",
+      "title": "Quiet workspace",
+      "summary": "An articulated task lamp beside an open notebook, giving a single piece of work room to breathe.",
+      "tags": [
+        "workspace",
+        "focus",
+        "notes"
+      ],
+      "themeable": true,
+      "files": [
+        {
+          "path": "quiet-workspace.svg",
+          "role": "source",
+          "bytes": 4306,
+          "integrity": "sha256-nQ8z7c5LiW6GkN6gPJqFP6fdjf7ZtgTL0KdLJzi5FAo="
+        },
+        {
+          "path": "quiet-workspace.tsx",
+          "role": "react",
+          "bytes": 5307,
+          "integrity": "sha256-18G80gjKTkOyudwlynL4CgJz2IhMjRl9H2s7w5yeOno="
+        }
+      ]
+    },
     {
       "id": "responsive-layout",
       "kind": "2d",
@@ -1614,6 +1692,32 @@
         }
       ]
     },
+    {
+      "id": "measuring-tape",
+      "kind": "3d",
+      "title": "Measuring tape",
+      "summary": "An enamel tape measure with a circular porcelain inset, evenly spaced marks and a folded metal end hook.",
+      "tags": [
+        "measure",
+        "precision",
+        "design"
+      ],
+      "themeable": true,
+      "files": [
+        {
+          "path": "measuring-tape.glb",
+          "role": "source",
+          "bytes": 592628,
+          "integrity": "sha256-gjp8OVIjpEbmo0zeegc7p9W+gkYGeNqwETxuBfE43Js="
+        },
+        {
+          "path": "measuring-tape-poster.webp",
+          "role": "poster",
+          "bytes": 16086,
+          "integrity": "sha256-Ygzmwy/ttH5//dWsBUTsR+4XGQlD/YpodjI6y9caXuo="
+        }
+      ]
+    },
     {
       "id": "notebook",
       "kind": "3d",
@@ -1718,6 +1822,32 @@
         }
       ]
     },
+    {
+      "id": "paper-printer",
+      "kind": "3d",
+      "title": "Paper printer",
+      "summary": "A compact porcelain printer with a rear paper feed, inset output slot and a neatly printed sheet.",
+      "tags": [
+        "print",
+        "documents",
+        "workspace"
+      ],
+      "themeable": true,
+      "files": [
+        {
+          "path": "paper-printer.glb",
+          "role": "source",
+          "bytes": 457012,
+          "integrity": "sha256-9sK7cA4R5ZYekDnTBrsZlUnYY4E/SUddQ/dCJGTtO9c="
+        },
+        {
+          "path": "paper-printer-poster.webp",
+          "role": "poster",
+          "bytes": 16926,
+          "integrity": "sha256-lRC0WaPykkZxEhtgEi4f0N93LFGoJ2uE0kfWbQOPR7Y="
+        }
+      ]
+    },
     {
       "id": "rocket",
       "kind": "3d",
@@ -1796,6 +1926,32 @@
         }
       ]
     },
+    {
+      "id": "task-lamp",
+      "kind": "3d",
+      "title": "Task lamp",
+      "summary": "An articulated desk lamp with aligned metal joints, an enamel light bar and a porcelain diffuser.",
+      "tags": [
+        "workspace",
+        "focus",
+        "lighting"
+      ],
+      "themeable": true,
+      "files": [
+        {
+          "path": "task-lamp.glb",
+          "role": "source",
+          "bytes": 283168,
+          "integrity": "sha256-hAolZPXrmhkMW0DjUx/aB4iXTEBm3YFDnoTzOqsMtMc="
+        },
+        {
+          "path": "task-lamp-poster.webp",
+          "role": "poster",
+          "bytes": 16676,
+          "integrity": "sha256-KczARj6DGDO6U9YrYZ5LLTKCHK922mbXLvJtcmeMEfQ="
+        }
+      ]
+    },
     {
       "id": "usb-stick",
       "kind": "3d",

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8",
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9",
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -393,7 +393,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -485,7 +485,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -538,7 +538,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.0.8"
+        "@mlola-ui/motion": "^1.0.9"
       },
       "options": [
         {
@@ -693,8 +693,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8",
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9",
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -756,7 +756,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -811,7 +811,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -874,8 +874,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8",
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9",
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -939,7 +939,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -1163,8 +1163,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8",
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9",
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -1302,7 +1302,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -1353,7 +1353,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9"
       },
       "options": [
         {
@@ -1722,7 +1722,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -1773,8 +1773,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8",
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9",
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -1851,8 +1851,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8",
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9",
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -1984,7 +1984,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9"
       },
       "options": [
         {
@@ -2129,7 +2129,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9"
       },
       "options": [
         {
@@ -2255,7 +2255,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -2341,7 +2341,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -2615,7 +2615,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -2687,7 +2687,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -2757,7 +2757,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -2955,7 +2955,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -3032,7 +3032,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -3087,7 +3087,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -3150,7 +3150,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -3220,7 +3220,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -3339,8 +3339,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8",
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9",
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -3404,7 +3404,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9"
       },
       "options": [
         {
@@ -3491,8 +3491,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8",
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9",
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -3560,7 +3560,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [],
       "variants": [],
@@ -3677,7 +3677,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {
@@ -3772,8 +3772,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.0.8",
-        "@mlola-ui/icons": "^1.0.8"
+        "@mlola-ui/behavior": "^1.0.9",
+        "@mlola-ui/icons": "^1.0.9"
       },
       "options": [
         {

package/src/cli.js

@@ -2,7 +2,6 @@ import fs from "node:fs";
 import path from "node:path";
 import { spawnSync } from "node:child_process";
 import {
-  DEFAULT_CONFIG,
   loadConfig,
   targetRoot,
   writeDefaultConfig,
@@ -19,10 +18,10 @@ import { pullTheme } from "./theme-pull.js";
 const HELP = `Mlola UI — source-copy components with Theme
 
 Usage:
-  mlola-ui init [--force] [--no-agents]
+  mlola-ui init [--force] [--no-agents] [--no-install]
   mlola-ui agents
   mlola-ui mcp
-  mlola-ui add <name...> [--overwrite] [--install|--yes]
+  mlola-ui add <name...> [--overwrite] [--no-install]
   mlola-ui add asset <id...> [--overwrite]
   mlola-ui login <token> [--host <url>]
   mlola-ui logout
@@ -80,17 +79,34 @@ function packageManager(cwd) {
   return ["npm", ["install"]];
 }
 
-function installEngines(cwd, dependencies, output) {
-  if (!dependencies.size) return 0;
+function declaredPackages(cwd) {
+  const filename = path.join(cwd, "package.json");
+  if (!fs.existsSync(filename)) return null;
+  const manifest = JSON.parse(fs.readFileSync(filename, "utf8"));
+  return new Set(Object.keys({ ...manifest.dependencies, ...manifest.devDependencies, ...manifest.peerDependencies }));
+}
+
+// Installs the packages the copied code imports and package.json does not
+// declare yet, with the project's own package manager. Without a package.json
+// (a plain HTML site) or with --no-install it only names them.
+function ensurePackages(cwd, dependencies, { skip, output, installer }) {
+  const declared = declaredPackages(cwd);
+  const missing = [...dependencies].filter(([name]) => !declared?.has(name)).map(([name, range]) => `${name}@${range}`);
+  if (!missing.length) return 0;
   const [command, baseArgs] = packageManager(cwd);
-  const packages = [...dependencies].map(([name, range]) => `${name}@${range}`);
-  output.log(`Installing ${packages.join(", ")}...`);
-  const result = spawnSync(command, [...baseArgs, ...packages], { cwd, stdio: "inherit" });
-  if (result.error) {
-    output.error(`Unable to run ${command}: ${result.error.message}`);
+  const line = `${command} ${[...baseArgs, ...missing].join(" ")}`;
+  if (skip || !declared) {
+    output.log(`Install what this needs: ${line}`);
+    return 0;
+  }
+  output.log(`Installing ${missing.join(", ")} with ${command}...`);
+  const result = installer(command, [...baseArgs, ...missing], cwd);
+  if (result.error || result.status !== 0) {
+    output.error(`✗ ${command} could not install them${result.error ? ` (${result.error.message})` : ""}. Run it yourself: ${line}`);
     return 1;
   }
-  return result.status ?? 1;
+  output.log(`✓ Installed ${missing.join(", ")}`);
+  return 0;
 }
 
 export async function run(argv, options = {}) {
@@ -99,6 +115,14 @@ export async function run(argv, options = {}) {
   const env = options.env ?? process.env;
   const fetcher = options.fetch ?? fetch;
   const [command = "help", ...args] = argv;
+  const install = {
+    skip: argv.includes("--no-install"),
+    output,
+    installer:
+      options.installer ??
+      ((name, installArgs, directory) =>
+        spawnSync(name, installArgs, { cwd: directory, stdio: options.installStdio ?? "inherit", shell: process.platform === "win32" })),
+  };
 
   try {
     if (command === "help" || command === "--help" || command === "-h") {
@@ -109,7 +133,7 @@ export async function run(argv, options = {}) {
     if (command === "init") {
       const force = hasFlag(args, "--force");
       const configResult = writeDefaultConfig(cwd, { force });
-      const config = configResult.created ? DEFAULT_CONFIG : loadConfig(cwd);
+      const config = configResult.created ? configResult.config : loadConfig(cwd);
       const stylesResult = writeStyles(cwd, config, force);
       output.log(
         configResult.created
@@ -124,11 +148,8 @@ export async function run(argv, options = {}) {
       output.log(
         `Set data-theme="${config.theme}" on your document root and import ${stylesResult.relative}.`,
       );
-      output.log(
-        `Install the engines you use, starting with: npm install ${config.engine.engine ?? "@mlola-ui/engine"} ${config.engine.motion}`,
-      );
       if (!hasFlag(args, "--no-agents")) reportAgents(writeAgentFiles(cwd), output);
-      return 0;
+      return ensurePackages(cwd, new Map([[config.engine.engine ?? "@mlola-ui/engine", `^${CLI_VERSION}`]]), install);
     }
 
     if (command === "agents") {
@@ -273,18 +294,9 @@ export async function run(argv, options = {}) {
       if (styleResult.index) output.log(`Pro styles are gathered in ${styleResult.index}; import it once, after the engine stylesheet.`);
       if (guideResult.status === "written") output.log(`Coding agents: point your AGENTS.md at ${GUIDE_FILENAME}, which lists every Pro class and attribute.`);
 
-      const engines = collectEngineDependencies(items);
-      if (engines.size && hasFlag(args, "--install", "--yes")) {
-        return installEngines(cwd, engines, output);
-      }
-      if (engines.size) {
-        output.log(
-          `Engine dependencies: ${[...engines]
-            .map(([name, range]) => `${name}@${range}`)
-            .join(" ")}`,
-        );
-      }
-      return 0;
+      // The stylesheet from init imports the engine, so it is always needed.
+      const engines = new Map([[config.engine.engine ?? "@mlola-ui/engine", `^${CLI_VERSION}`], ...collectEngineDependencies(items)]);
+      return ensurePackages(cwd, engines, install);
     }
 
     if (command === "theme") {

package/src/config.js

@@ -51,6 +51,9 @@ export function validateConfig(config) {
       errors.push(`aliases.${key} must be a non-empty string`);
     }
   }
+  if (config.imports !== undefined && !["alias", "relative"].includes(config.imports)) {
+    errors.push(`imports must be "alias" or "relative" (received ${JSON.stringify(config.imports)})`);
+  }
   if (!config.engine || typeof config.engine !== "object") {
     errors.push("engine mappings are required");
   }
@@ -105,11 +108,57 @@ export function interpolateTarget(template, config, mode = "filesystem") {
   return `${base.replace(/\/$/, "")}/${remainder}`;
 }
 
+/** Reads a tsconfig or jsconfig, which allow comments and trailing commas. */
+function readJsonc(filename) {
+  const text = fs
+    .readFileSync(filename, "utf8")
+    .replace(/("(?:\\.|[^"\\])*")|\/\/[^\n]*|\/\*[\s\S]*?\*\//g, (match, string) => string ?? "")
+    .replace(/,(\s*[}\]])/g, "$1");
+  return JSON.parse(text);
+}
+
+/** The folder "@/" points at in the project's TypeScript or JavaScript config, or null. */
+function aliasRoot(cwd) {
+  for (const name of ["tsconfig.json", "tsconfig.app.json", "jsconfig.json"]) {
+    const filename = path.join(cwd, name);
+    if (!fs.existsSync(filename)) continue;
+    let options;
+    try {
+      options = readJsonc(filename).compilerOptions;
+    } catch {
+      continue;
+    }
+    const target = options?.paths?.["@/*"]?.[0];
+    if (typeof target !== "string" || !target.endsWith("/*")) continue;
+    const root = path.posix.normalize(path.posix.join(options.baseUrl ?? ".", target.slice(0, -2)));
+    if (root.startsWith("..")) continue;
+    return root === "." ? "" : root;
+  }
+  return null;
+}
+
+/**
+ * A configuration that fits the project as it is: files go where "@/" points,
+ * or into src/ when there is one, and without an "@/" alias (a new Vite app)
+ * the copied files import each other by relative path, so nothing needs
+ * setting up first.
+ */
+export function detectConfig(cwd) {
+  const root = aliasRoot(cwd);
+  const base = root ?? (fs.existsSync(path.join(cwd, "src")) ? "src" : "");
+  const targets = Object.fromEntries(
+    Object.entries(DEFAULT_CONFIG.targets).map(([key, value]) => [key, key === "assets" || !base ? value : `${base}/${value}`]),
+  );
+  const { $schema, version, theme, aliases, engine } = DEFAULT_CONFIG;
+  return { $schema, version, theme, ...(root === null ? { imports: "relative" } : {}), aliases, targets, engine };
+}
+
 export function writeDefaultConfig(cwd, { force = false } = {}) {
   const filename = configPath(cwd);
   if (fs.existsSync(filename) && !force) {
     return { filename, created: false };
   }
-  fs.writeFileSync(filename, `${JSON.stringify(DEFAULT_CONFIG, null, 2)}\n`);
-  return { filename, created: true };
+  const config = detectConfig(cwd);
+  fs.writeFileSync(filename, `${JSON.stringify(config, null, 2)}\n`);
+  return { filename, created: true, config };
 }

package/src/doctor.js

@@ -4,14 +4,6 @@ import { interpolateTarget, loadConfig, targetRoot } from "./config.js";
 import { createTransformContext, expectedFile } from "./installer.js";
 import { loadRegistry, readJson, sha256, sourcePath } from "./registry.js";
 
-const FORBIDDEN_DEPENDENCIES = [
-  "clsx",
-  "tailwind-merge",
-  "tailwindcss",
-  "@tailwindcss/postcss",
-  "lucide-react",
-];
-
 function finding(level, message) {
   return { level, message };
 }
@@ -28,6 +20,9 @@ function projectDependencies(cwd) {
 }
 
 function projectContains(cwd, pattern) {
+  // A Vite app sets the theme in index.html at the project root.
+  const page = path.join(cwd, "index.html");
+  if (fs.existsSync(page) && pattern.test(fs.readFileSync(page, "utf8"))) return true;
   const roots = ["app", "src", "pages"]
     .map((directory) => path.join(cwd, directory))
     .filter((directory) => fs.existsSync(directory));
@@ -80,24 +75,25 @@ export function runDoctor(cwd) {
   }
 
   const dependencies = projectDependencies(cwd);
-  const forbidden = FORBIDDEN_DEPENDENCIES.filter((name) => dependencies[name]);
-  if (forbidden.length) {
-    findings.push(finding("warn", `forbidden styling dependencies declared: ${forbidden.join(", ")}`));
-  } else {
-    findings.push(finding("pass", "no forbidden styling dependencies are declared"));
-  }
+  const context = createTransformContext(registry, config);
+  const installed = registry.items.filter((item) => {
+    const primary = item.files.find((file) => file.path.endsWith(`/${item.name}/${item.name}.tsx`));
+    return primary && fs.existsSync(path.join(cwd, interpolateTarget(primary.target, config)));
+  });
 
-  const requiredEngines = new Set();
-  for (const item of registry.items) {
+  // What the stylesheet and the installed items import, not the whole registry.
+  const requiredEngines = new Set([config.engine.engine ?? "@mlola-ui/engine"]);
+  for (const item of installed) {
     for (const name of Object.keys(item.engineDependencies)) requiredEngines.add(name);
   }
   const missingEngines = [...requiredEngines].filter((name) => !dependencies[name]);
   if (missingEngines.length) {
-    findings.push(
-      finding("warn", `engine packages used by the registry are not declared: ${missingEngines.join(", ")}`),
-    );
-  } else if (requiredEngines.size) {
-    findings.push(finding("pass", "registry engine packages are declared"));
+    findings.push(finding("warn", `packages the installed items import are not declared: ${missingEngines.join(", ")}`));
+  } else {
+    findings.push(finding("pass", "the packages the installed items import are declared"));
+  }
+  if (dependencies.tailwindcss) {
+    findings.push(finding("pass", "Tailwind is declared; Mlola's layers sit above its reset, so the two work together"));
   }
   if (!dependencies.react) findings.push(finding("warn", "React is not declared in package.json"));
   if (!dependencies["react-dom"]) findings.push(finding("warn", "ReactDOM is not declared in package.json"));
@@ -124,17 +120,8 @@ export function runDoctor(cwd) {
     );
   }
 
-  const context = createTransformContext(registry, config);
-  let installedItems = 0;
   let modifiedFiles = 0;
-  for (const item of registry.items) {
-    const primary = item.files.find((file) =>
-      file.path.endsWith(`/${item.name}/${item.name}.tsx`),
-    );
-    if (!primary) continue;
-    const primaryDestination = path.join(cwd, interpolateTarget(primary.target, config));
-    if (!fs.existsSync(primaryDestination)) continue;
-    installedItems += 1;
+  for (const item of installed) {
     for (const file of item.files) {
       const destination = path.join(cwd, interpolateTarget(file.target, config));
       if (!fs.existsSync(destination) || fs.readFileSync(destination, "utf8") !== expectedFile(file, context)) {
@@ -150,7 +137,7 @@ export function runDoctor(cwd) {
       ),
     );
   } else {
-    findings.push(finding("pass", `${installedItems} installed item(s) match the registry snapshot`));
+    findings.push(finding("pass", `${installed.length} installed item(s) match the registry snapshot`));
   }
   return findings;
 }

package/src/installer.js

@@ -26,6 +26,11 @@ function withoutSourceExtension(value) {
   return clean.endsWith("/index") ? clean.slice(0, -"/index".length) : clean;
 }
 
+function relativeImport(from, to) {
+  const relative = path.posix.relative(path.posix.dirname(from), to);
+  return relative.startsWith(".") ? relative : `./${relative}`;
+}
+
 export function createTransformContext(registry, config) {
   const filesBySource = new Map();
   for (const item of registry.items) {
@@ -43,10 +48,11 @@ export function transformSource(content, sourceFile, context) {
       );
       if (importedSource) {
         const importedFile = context.filesBySource.get(importedSource);
-        replacements.set(
-          specifier,
-          withoutSourceExtension(interpolateTarget(importedFile.target, context.config, "import")),
-        );
+        const target =
+          context.config.imports === "relative"
+            ? relativeImport(interpolateTarget(sourceFile.target, context.config), interpolateTarget(importedFile.target, context.config))
+            : interpolateTarget(importedFile.target, context.config, "import");
+        replacements.set(specifier, withoutSourceExtension(target));
       }
       continue;
     }

package/src/mcp.js

@@ -29,7 +29,9 @@ function tools({ cwd, run }) {
   const capture = async (argv) => {
     const lines = [];
     const output = { log: (...parts) => lines.push(parts.join(" ")), error: (...parts) => lines.push(parts.join(" ")) };
-    const code = await run(argv, { cwd, output });
+    // stdout is this server's protocol channel: a package manager started by
+    // init or add writes to stderr and reads nothing.
+    const code = await run(argv, { cwd, output, installStdio: ["ignore", 2, 2] });
     return { code, output: lines.join("\n") };
   };
   return [
@@ -101,7 +103,7 @@ function tools({ cwd, run }) {
     {
       name: "add_components",
       title: "Install Mlola components",
-      description: "Copies components into the project with the Mlola CLI (npx mlola-ui add), with their dependencies and styles. Pro items need a login first.",
+      description: "Copies components into the project with the Mlola CLI (npx mlola-ui add), with their dependencies and styles, and installs the npm packages they import. Pro items need a login first.",
       inputSchema: {
         type: "object",
         properties: { names: { type: "array", items: { type: "string" }, minItems: 1 }, overwrite: { type: "boolean", default: false } },
@@ -117,7 +119,7 @@ function tools({ cwd, run }) {
     {
       name: "init_project",
       title: "Set a project up for Mlola",
-      description: "Runs npx mlola-ui init: writes mlola.config.json, the stylesheet entry and the agent instructions (AGENTS.md, the design guide, MCP config).",
+      description: "Runs npx mlola-ui init: writes mlola.config.json, the stylesheet entry and the agent instructions (AGENTS.md, the design guide, MCP config), and installs @mlola-ui/engine.",
       inputSchema: { type: "object", properties: {}, additionalProperties: false },
       annotations: { readOnlyHint: false, destructiveHint: false, idempotentHint: true },
       handler: async () => {