wensity 0.1.11 → 0.1.12

package/README.md

@@ -1,63 +1,187 @@
 # Wensity CLI
 
-Install open-code components and UI primitives from the Wensity registry into your project. There is no `@wensity/ui` runtime dependency and no theme provider to wire up.
+The command line tool for [Wensity](https://ui.wensity.com). Install React
+components, UI primitives, and shareable Tailwind CSS presets into your project
+as source code you own.
+
+There is no `@wensity/ui` runtime dependency and no theme provider to wire up.
+Everything the CLI installs lands in your repository as plain files you can read,
+edit, and commit.
+
+[![npm](https://img.shields.io/npm/v/wensity)](https://www.npmjs.com/package/wensity)
+[![license](https://img.shields.io/npm/l/wensity)](./LICENSE)
+
+[Docs](https://ui.wensity.com/docs/cli) ·
+[Components](https://ui.wensity.com/components) ·
+[Preset studio](https://ui.wensity.com/create-preset) ·
+[Registry](https://github.com/wensity/registry) ·
+[wensity.com](https://wensity.com)
+
+## Quick start
 
 ```bash
-# Initialise (defaults: Tabler icons, medium radius)
+# New project, with an app scaffold
+npx wensity@latest init --template next
+
+# Existing project
 npx wensity@latest init
 
-# Or apply a shareable preset from https://ui.wensity.com/create-preset
+# Add a component
+npx wensity@latest add button
+npx wensity@latest add liquid-multimodal-input
+```
+
+Requires Node.js 20 or later. Works with npm, pnpm, yarn, and bun. The CLI
+picks your package manager from the client that invoked it, falling back to the
+lockfile in your project root, and installs component dependencies with it.
+
+## Presets
+
+A preset is a shareable code that captures a full visual style: color palette,
+border radius, fonts, and control colors. Build one visually in the
+[preset studio](https://ui.wensity.com/create-preset), copy the `wsty1` code,
+and apply it.
+
+```bash
+# New project, styled from the start
 npx wensity@latest init --preset <wsty1-code>
 npx wensity@latest init --preset <wsty1-code> --template next
 
-# Existing project — style + CSS only
+# Existing project, style and CSS only
 npx wensity@latest apply --preset <wsty1-code>
 
-# Inspect a code before applying
+# See what a code contains before applying it
 npx wensity@latest preset inspect <wsty1-code>
-
-# Install a primitive or component
-npx wensity@latest add button
-npx wensity@latest add liquid-multimodal-input
+npx wensity@latest preset inspect <wsty1-code> --json
 ```
 
-## Presets (primitives)
+Applying a preset writes two things:
+
+1. Style settings into `wensity.json` (icon library, radius, fonts, control
+   colors).
+2. A delimited `--primitive-*` CSS block in your Tailwind CSS file.
 
-Generate a preset in the [Create preset studio](https://ui.wensity.com/create-preset) (guide: [`/docs/create-preset`](https://ui.wensity.com/docs/create-preset)). Then run `init --preset` (new project) or `apply --preset` (existing). Settings land in `wensity.json` (`style.iconLibrary`, radius, fonts, control-solid colors) and a delimited `--primitive-*` CSS block in your Tailwind CSS file.
+Later `add` and `update` runs read that style automatically, so newly installed
+components match what is already there. `apply` rewrites the CSS block in place
+and never touches your component source.
 
-Later `wensity add <primitive>` / `wensity update <primitive>` reads that style automatically:
+Plain `init` with no `--preset` refuses to overwrite an existing `wensity.json`
+unless you pass `--force`. To restyle an existing project, prefer
+`apply --preset`.
 
-- Colors, radius, and fonts re-apply into the CSS block
-- Tabler ↔ Lucide icon imports transform at install time for **UI primitives only**
-- Mandatory dependency swap installs exactly one icon package when icons are used
+## Icon libraries
 
-Plain `init` (no `--preset`) refuses to overwrite an existing `wensity.json` unless you pass `--force`. Prefer `apply --preset` for style-only updates; `init --preset` also merges `style` (+ CSS) without rewriting installed component source.
+Wensity primitives are authored against [Tabler](https://tabler.io/icons). If
+your project uses [Lucide](https://lucide.dev), set that in your preset or
+`wensity.json` and the CLI rewrites icon imports at install time for UI
+primitives. It installs exactly one icon package, whichever you chose.
+
+This transform applies to UI primitives only. Larger composed components ship
+with their icons as authored.
 
 ## Commands
 
-| Command | Purpose |
-|---|---|
-| `wensity init [--preset <code>] [--template next\|vite\|astro\|react-router]` | Create / merge project config |
-| `wensity apply --preset <code>` | Apply style + CSS to an existing project |
-| `wensity preset inspect <code>` | Decode a preset code |
-| `wensity login` | Save a dashboard API token for Pro |
-| `wensity logout` | Clear credentials |
-| `wensity whoami` | Show current user / plan |
-| `wensity list` | List registry entries |
-| `wensity add <slug>` | Install source (skips existing files) |
-| `wensity update <slug>` | Re-download and overwrite local source |
-| `wensity version` | Print `0.1.9` |
-
-Premium components and blocks require an API token from the Wensity dashboard. Tokens are stored at `~/.config/wensity/credentials.json` with `0600` permissions.
-
-## CLI vs shadcn
-
-| | Wensity CLI | Public shadcn registry (`@wensity/*`) |
-|---|---|---|
-| Stored presets (`wensity.json` style) | Yes | No |
-| Lucide delivery | Yes (CLI transform) | No — Tabler-canonical payloads |
+| Command | What it does |
+| --- | --- |
+| `wensity init` | Create `wensity.json` and local helper files. Optional `--preset` applies style and CSS, optional `--template` scaffolds an app |
+| `wensity apply --preset <code>` | Apply a preset to an existing project, style and CSS only |
+| `wensity preset inspect <code>` | Decode and print a preset code, add `--json` for machine output |
+| `wensity list` | List registry components and blocks |
+| `wensity add <slug...>` | Download component source into your project, skipping files that already exist |
+| `wensity update <slug...>` | Re-download components and overwrite the local copies |
+| `wensity login` | Save a Wensity API token for Pro component access |
+| `wensity logout` | Remove saved credentials |
+| `wensity whoami` | Verify the saved token and print the account and plan |
+| `wensity version` | Print the CLI version |
+
+Useful flags:
+
+| Flag | Effect |
+| --- | --- |
+| `--template next\|vite\|astro\|react-router` | Scaffold a new app during `init` |
+| `--type component\|block` | Narrow `list`, `add`, and `update` |
+| `--api-url <url>` | Point at a different Wensity origin, defaults to `https://ui.wensity.com` |
+| `--force` | Allow `init` to overwrite an existing `wensity.json` |
+| `--json` | Machine readable output where supported |
+
+## Authentication
+
+Free components need no account. Wensity Pro components and blocks require an
+API token from the [dashboard](https://ui.wensity.com/dashboard).
+
+```bash
+npx wensity@latest login
+npx wensity@latest whoami
+```
+
+The token is written to `~/.config/wensity/credentials.json` with `0600`
+permissions. The location honours `XDG_CONFIG_HOME`, and can be overridden with
+`WENSITY_CONFIG_HOME` or `WENSITY_CREDENTIALS_FILE`. Access is checked server
+side on every request, so the token is the only secret involved and it never
+leaves your machine except as a bearer header to the Wensity API.
+
+Run `wensity logout` to delete it.
+
+## Wensity CLI or the shadcn CLI
+
+Free Wensity components are published to a public shadcn registry, so you can
+install them with either tool. Use whichever fits your project.
+
+| | Wensity CLI | shadcn CLI with `@wensity/*` |
+| --- | --- | --- |
 | Full editable source | Yes | Yes |
-| `@wensity/ui` runtime | Never | Never |
-| Premium `/components` | Token + license | Not exported |
+| `@wensity/ui` runtime dependency | Never | Never |
+| Stored presets and `wensity.json` style | Yes | No |
+| Lucide delivery | Yes, via icon transform | No, payloads are Tabler canonical |
+| Project scaffolding (`--template`) | Yes | No |
+| Wensity Pro components | Yes, with a token | Not published |
+
+The public registry lives at [wensity/registry](https://github.com/wensity/registry):
+
+```bash
+npx shadcn@latest add @wensity/button
+```
+
+## Configuration
+
+`wensity.json` sits at your project root:
+
+```json
+{
+  "$schema": "https://ui.wensity.com/schema/wensity.json",
+  "version": 1,
+  "registry": "https://ui.wensity.com/api/registry",
+  "components": "src/components/wensity",
+  "utils": "src/lib/utils",
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css"
+  },
+  "aliases": {
+    "components": "@/components/wensity",
+    "utils": "@/lib/utils"
+  },
+  "style": {
+    "iconLibrary": "tabler",
+    "radius": "medium"
+  }
+}
+```
+
+`init` also records a `style` block with fonts and control colors, which is
+what `--preset` overwrites. Paths and aliases are read on every `add` and
+`update`, so you can relocate the components directory and the CLI follows.
+
+## Source and issues
+
+The CLI is open source at [wensity/cli](https://github.com/wensity/cli), MIT
+licensed. Issues and pull requests are welcome there.
+
+For a bug in a component's source rather than the CLI itself, open an issue on
+[wensity/registry](https://github.com/wensity/registry) instead.
+
+## License
+
+MIT. See [LICENSE](./LICENSE).
 
-Docs: [CLI reference](https://ui.wensity.com/docs/cli) · [Create preset](https://ui.wensity.com/docs/create-preset) · [Primitives](https://ui.wensity.com/docs/primitives)
+Copyright (c) 2026 Wensity Private Limited.

package/dist/index.js

@@ -1,12 +1,12 @@
 #!/usr/bin/env node
 
 // src/commands.ts
-import { mkdir as mkdir6, readFile as readFile6, writeFile as writeFile6 } from "fs/promises";
+import { mkdir as mkdir6, readFile as readFile6, stat, writeFile as writeFile6 } from "fs/promises";
 import { dirname as dirname7, join as join7 } from "path";
 
 // src/constants.ts
 var CLI_NAME = "wensity";
-var CLI_VERSION = "0.1.11";
+var CLI_VERSION = "0.1.12";
 var CONFIG_FILE_NAME = "wensity.json";
 var DEFAULT_API_ORIGIN = "https://ui.wensity.com";
 var DEFAULT_REGISTRY_PATH = "/api/registry";
@@ -25,8 +25,8 @@ Usage:
   wensity logout
   wensity whoami [--json]
   wensity list [--type component|block] [options]
-  wensity add <slug> [--type component|block] [options]
-  wensity update <slug> [--type component|block] [options]
+  wensity add <slug...> [--type component|block] [options]
+  wensity update <slug...> [--type component|block] [options]
   wensity version
 
 Commands:
@@ -37,8 +37,8 @@ Commands:
   logout     Remove saved CLI credentials
   whoami     Verify the saved token and print the authenticated account
   list       List registry components or blocks
-  add        Download a component or block source file into this project
-  update     Re-download a component or block and overwrite the local copy
+  add        Download one or more component/block source files into this project
+  update     Re-download one or more components/blocks and overwrite the local copies
   version    Print the CLI version
 
 Options:
@@ -49,6 +49,7 @@ Options:
   --preset <code>      Apply a shareable Wensity style preset (wsty1.\u2026); merges style when config exists
   --preset-file <path> Read a preset code or JSON payload from a file
   --template <name>    Scaffold a new app before init: next, vite, astro, react-router
+  --package-manager <pm> Force npm, pnpm, yarn, or bun instead of auto-detection
   --force              Overwrite generated files when adding or initializing
   --no-install         Write files without running the package manager
   --dry-run            Print planned writes and installs without changing files
@@ -63,7 +64,7 @@ Preset notes:
   Plain init refuses an existing wensity.json unless --force
   init --preset merges style + primitive CSS; does not rewrite installed source
   init --template writes a minimal app scaffold in the current directory before Wensity files
-  add/update read style.iconLibrary for UI primitives only (Tabler|Lucide)
+  add/update accept several slugs at once and read style.iconLibrary for UI primitives only (Tabler|Lucide)
   Invalid/expired/unsupported codes exit non-zero with an actionable message
 `;
 
@@ -126,7 +127,16 @@ function hasFlag(args, name) {
   return args.options.get(name) === true;
 }
 function expectsValue(name) {
-  return ["api-url", "registry", "token", "type", "preset", "preset-file", "template"].includes(name);
+  return [
+    "api-url",
+    "registry",
+    "token",
+    "type",
+    "preset",
+    "preset-file",
+    "template",
+    "package-manager"
+  ].includes(name);
 }
 function normalizeOptionName(name) {
   if (name === "dry") return "dry-run";
@@ -2521,6 +2531,91 @@ function resolvedTokensToCssVars(tokens, mode) {
     [RESOLVED_TOKEN_CSS_VARS.fontMono]: tokens.fontMono
   };
 }
+function resolvedNamedBaseSemanticCssVars(baseColor, mode) {
+  if (baseColor === "inherit") return {};
+  const seeds = BASE_COLOR_PALETTE[baseColor]?.[mode];
+  if (!seeds) return {};
+  if (mode === "light") {
+    return {
+      // Soft family wash over white — the main light-mode tell (slate vs stone).
+      "--background": `color-mix(in oklab, ${seeds.surfaceHover} 62%, white)`,
+      "--foreground": `color-mix(in oklab, ${seeds.textSecondary} 38%, black)`,
+      "--surface": seeds.surfaceElevated,
+      "--surface-muted": seeds.surfaceHover,
+      "--muted": seeds.surfaceHover,
+      "--muted-foreground": seeds.textSecondary,
+      "--border": seeds.borderSubtle,
+      "--border-strong": `color-mix(in oklab, ${seeds.textSecondary} 30%, transparent)`
+    };
+  }
+  return {
+    // Canvas sits under elevated cards (darker than surfaceElevated).
+    "--background": `color-mix(in oklab, ${seeds.surfaceElevated} 58%, black)`,
+    "--foreground": `color-mix(in oklab, ${seeds.textSecondary} 22%, white)`,
+    "--surface": seeds.surfaceElevated,
+    "--surface-muted": seeds.surfaceHover,
+    "--muted": seeds.surfaceHover,
+    "--muted-foreground": seeds.textSecondary,
+    "--border": seeds.borderSubtle,
+    "--border-strong": `color-mix(in oklab, ${seeds.textSecondary} 38%, transparent)`
+  };
+}
+var INHERIT_BASE_SEMANTIC_CSS_VARS = {
+  light: {
+    "--background": "#fafafa",
+    "--foreground": "#0a0a0a",
+    "--surface": "#ffffff",
+    "--surface-muted": "#f4f4f5",
+    "--muted": "#f4f4f5",
+    "--muted-foreground": "#52525b",
+    "--border": "rgba(10, 10, 10, 0.08)",
+    "--border-strong": "rgba(10, 10, 10, 0.16)"
+  },
+  dark: {
+    "--background": "#0a0a0b",
+    "--foreground": "#f5f5f6",
+    "--surface": "#111113",
+    "--surface-muted": "#18181b",
+    "--muted": "#1c1c1f",
+    "--muted-foreground": "#a1a1aa",
+    "--border": "rgba(255, 255, 255, 0.08)",
+    "--border-strong": "rgba(255, 255, 255, 0.14)"
+  }
+};
+function exportedBaseSemanticCssVars(baseColor, mode) {
+  const named = resolvedNamedBaseSemanticCssVars(baseColor, mode);
+  return Object.keys(named).length > 0 ? named : { ...INHERIT_BASE_SEMANTIC_CSS_VARS[mode] };
+}
+var BASE_SEMANTIC_THEME_UTILITIES = {
+  "--color-background": "var(--background)",
+  "--color-foreground": "var(--foreground)",
+  "--color-surface": "var(--surface)",
+  "--color-surface-muted": "var(--surface-muted)",
+  "--color-muted": "var(--muted)",
+  "--color-muted-foreground": "var(--muted-foreground)",
+  "--color-border": "var(--border)",
+  "--color-border-strong": "var(--border-strong)"
+};
+var BASE_CSS_START = "/* \u2500\u2500 Wensity Base Tokens \u2014 generated by the Wensity CLI.\n      Edit these values to retheme your app; re-running `wensity init --preset`\n      replaces this block. \u2500\u2500 */";
+var BASE_CSS_END = "/* \u2500\u2500 End Wensity Base Tokens \u2500\u2500 */";
+function formatBaseDeclarations(entries, indent = "  ") {
+  return Object.entries(entries).map(([name, value]) => `${indent}${name}: ${value};`).join("\n");
+}
+function buildBaseCssBlock(baseColor = "inherit") {
+  return [
+    BASE_CSS_START,
+    "@theme inline {",
+    formatBaseDeclarations(BASE_SEMANTIC_THEME_UTILITIES),
+    "}",
+    ":root {",
+    formatBaseDeclarations(exportedBaseSemanticCssVars(baseColor, "light")),
+    "}",
+    ".dark {",
+    formatBaseDeclarations(exportedBaseSemanticCssVars(baseColor, "dark")),
+    "}",
+    BASE_CSS_END
+  ].join("\n");
+}
 
 // src/paths.ts
 import { dirname, isAbsolute, relative, resolve, sep } from "path";
@@ -2608,6 +2703,12 @@ function resolveTokensForStyle(style) {
   }
   return resolveStyleConfig(normalizeStyleConfig(style));
 }
+function baseColorFromStyle(style) {
+  if (isCanonicalStyleShape(style)) {
+    return normalizeStyleConfigCanonical(style).baseColor;
+  }
+  return "inherit";
+}
 function curatedFontsFromStyle(style) {
   if (isCanonicalStyleShape(style)) {
     const normalized = normalizeStyleConfigCanonical(style);
@@ -3475,15 +3576,34 @@ function rewriteStrokeProps(content, localBindings) {
 }
 
 // src/package-manager.ts
-import { existsSync as existsSync2, readFileSync } from "fs";
+import { existsSync as existsSync2, readFileSync, writeFileSync } from "fs";
 import { spawnSync } from "child_process";
 import { join as join4 } from "path";
-function detectPackageManager(projectRoot) {
+var PACKAGE_MANAGERS = ["npm", "pnpm", "yarn", "bun"];
+function parsePackageManager(value) {
+  if (!value) return void 0;
+  const normalized = value.trim().toLowerCase();
+  if (isPackageManager(normalized)) return normalized;
+  throw new CliError(
+    `Unsupported package manager "${value}". Use one of: ${PACKAGE_MANAGERS.join(", ")}.`
+  );
+}
+function packageManagerFromUserAgent(env = process.env) {
+  const agent = env.npm_config_user_agent;
+  if (!agent) return void 0;
+  const first = agent.trim().split(/\s+/)[0] ?? "";
+  const name = first.split("/")[0]?.toLowerCase();
+  return name && isPackageManager(name) ? name : void 0;
+}
+function detectPackageManager(projectRoot, env = process.env) {
   if (existsSync2(join4(projectRoot, "pnpm-lock.yaml"))) return "pnpm";
   if (existsSync2(join4(projectRoot, "bun.lockb")) || existsSync2(join4(projectRoot, "bun.lock"))) return "bun";
   if (existsSync2(join4(projectRoot, "yarn.lock"))) return "yarn";
   if (existsSync2(join4(projectRoot, "package-lock.json"))) return "npm";
-  return "npm";
+  return packageManagerFromUserAgent(env) ?? "npm";
+}
+function isPackageManager(value) {
+  return PACKAGE_MANAGERS.includes(value);
 }
 function missingDependencies(projectRoot, dependencies) {
   const installed = readInstalledPackageNames(projectRoot);
@@ -3503,15 +3623,34 @@ function readInstalledPackageNames(projectRoot) {
     })
   );
 }
-function runInstall(projectRoot, dependencies) {
+var YARN_CONFIG_FILE = ".yarnrc.yml";
+function prepareProjectPackageManager(projectRoot, options = {}) {
+  if (resolvePackageManager(projectRoot, options) !== "yarn") return [];
+  const configPath = join4(projectRoot, YARN_CONFIG_FILE);
+  if (existsSync2(configPath)) return [];
+  if (!options.dryRun) writeFileSync(configPath, "nodeLinker: node-modules\n", "utf8");
+  return [YARN_CONFIG_FILE];
+}
+function runProjectInstall(projectRoot, options = {}) {
+  const packageJsonPath = join4(projectRoot, "package.json");
+  if (!existsSync2(packageJsonPath)) return;
+  const packageManager = resolvePackageManager(projectRoot, options);
+  runPackageManager(projectRoot, packageManager, ["install"]);
+}
+function resolvePackageManager(projectRoot, options = {}) {
+  return options.packageManager ?? detectPackageManager(projectRoot, options.env);
+}
+function runInstall(projectRoot, dependencies, options = {}) {
   if (dependencies.length === 0) return;
   const packageJsonPath = join4(projectRoot, "package.json");
   if (!existsSync2(packageJsonPath)) {
     warn(`No package.json found. Install these dependencies manually: ${dependencies.join(" ")}`);
     return;
   }
-  const packageManager = detectPackageManager(projectRoot);
-  const args = installArgs(packageManager, dependencies);
+  const packageManager = resolvePackageManager(projectRoot, options);
+  runPackageManager(projectRoot, packageManager, installArgs(packageManager, dependencies));
+}
+function runPackageManager(projectRoot, packageManager, args) {
   const result = spawnSync(packageManager, args, {
     cwd: projectRoot,
     stdio: "inherit",
@@ -3775,6 +3914,12 @@ async function commitPresetInitWrites(input) {
 // src/project-templates.ts
 import { mkdir as mkdir4, readFile as readFile4, writeFile as writeFile4 } from "fs/promises";
 import { dirname as dirname5, join as join5 } from "path";
+function templateCss() {
+  return `@import "tailwindcss";
+
+${buildBaseCssBlock()}
+`;
+}
 var PROJECT_TEMPLATE_IDS = ["next", "vite", "astro", "react-router"];
 function parseProjectTemplate(value) {
   if (!value) return void 0;
@@ -3886,11 +4031,14 @@ var templateDefinitions = {
             start: "next start"
           },
           dependencies: {
+            "clsx": "^2.1.1",
             "next": "^16.2.4",
             "react": "^19.2.4",
-            "react-dom": "^19.2.4"
+            "react-dom": "^19.2.4",
+            "tailwind-merge": "^3.3.1"
           },
           devDependencies: {
+            "@tailwindcss/postcss": "^4.0.0",
             "@types/node": "^22.10.2",
             "@types/react": "^19.0.0",
             "@types/react-dom": "^19.0.0",
@@ -3899,7 +4047,18 @@ var templateDefinitions = {
           }
         })
       },
-      { path: "src/app/globals.css", content: '@import "tailwindcss";\n' },
+      {
+        path: "postcss.config.mjs",
+        content: `const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
+`
+      },
+      { path: "src/app/globals.css", content: templateCss() },
       {
         path: "src/app/layout.tsx",
         content: `import type { ReactNode } from "react";
@@ -3961,11 +4120,14 @@ export default function RootLayout({ children }: { children: ReactNode }) {
             preview: "vite preview"
           },
           dependencies: {
+            "clsx": "^2.1.1",
             "vite": "^7.3.0",
             "react": "^19.2.4",
-            "react-dom": "^19.2.4"
+            "react-dom": "^19.2.4",
+            "tailwind-merge": "^3.3.1"
           },
           devDependencies: {
+            "@tailwindcss/vite": "^4.0.0",
             "@vitejs/plugin-react": "^5.1.2",
             "@types/react": "^19.0.0",
             "@types/react-dom": "^19.0.0",
@@ -3975,7 +4137,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         })
       },
       { path: "index.html", content: '<div id="root"></div><script type="module" src="/src/main.tsx"></script>\n' },
-      { path: "src/index.css", content: '@import "tailwindcss";\n' },
+      { path: "src/index.css", content: templateCss() },
       {
         path: "src/main.tsx",
         content: `import { createRoot } from "react-dom/client";
@@ -3990,9 +4152,10 @@ createRoot(document.getElementById("root")!).render(
         path: "vite.config.ts",
         content: `import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       "@": new URL("./src", import.meta.url).pathname,
@@ -4019,23 +4182,30 @@ export default defineConfig({
           dependencies: {
             "@astrojs/react": "^4.4.0",
             "astro": "^5.16.0",
+            "clsx": "^2.1.1",
             "react": "^19.2.4",
-            "react-dom": "^19.2.4"
+            "react-dom": "^19.2.4",
+            "tailwind-merge": "^3.3.1"
           },
           devDependencies: {
+            "@tailwindcss/vite": "^4.0.0",
             "tailwindcss": "^4.0.0",
             "typescript": "^5.7.2"
           }
         })
       },
-      { path: "src/styles/global.css", content: '@import "tailwindcss";\n' },
+      { path: "src/styles/global.css", content: templateCss() },
       {
         path: "astro.config.mjs",
         content: `import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   integrations: [react()],
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });
 `
       },
@@ -4064,12 +4234,15 @@ import "../styles/global.css";
             preview: "vite preview"
           },
           dependencies: {
+            "clsx": "^2.1.1",
             "vite": "^7.3.0",
             "react": "^19.2.4",
             "react-dom": "^19.2.4",
-            "react-router": "^7.12.0"
+            "react-router": "^7.12.0",
+            "tailwind-merge": "^3.3.1"
           },
           devDependencies: {
+            "@tailwindcss/vite": "^4.0.0",
             "@vitejs/plugin-react": "^5.1.2",
             "@types/react": "^19.0.0",
             "@types/react-dom": "^19.0.0",
@@ -4079,7 +4252,7 @@ import "../styles/global.css";
         })
       },
       { path: "index.html", content: '<div id="root"></div><script type="module" src="/src/main.tsx"></script>\n' },
-      { path: "src/app/globals.css", content: '@import "tailwindcss";\n' },
+      { path: "src/app/globals.css", content: templateCss() },
       {
         path: "src/main.tsx",
         content: `import { createRoot } from "react-dom/client";
@@ -4099,9 +4272,10 @@ createRoot(document.getElementById("root")!).render(
         path: "vite.config.ts",
         content: `import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       "@": new URL("./src", import.meta.url).pathname,
@@ -4363,6 +4537,8 @@ var ALWAYS_PRESENT_PACKAGES = /* @__PURE__ */ new Set(["react", "react-dom", "ne
 var OVERLAY_HELPER_PATH = "components/wensity/overlay.tsx";
 var PRIMITIVE_CSS_START_MARKER = "/* \u2500\u2500 Wensity Primitive Tokens";
 var PRIMITIVE_CSS_END_MARKER = "/* \u2500\u2500 End Wensity Primitive Tokens \u2500\u2500 */";
+var BASE_CSS_START_MARKER = "/* \u2500\u2500 Wensity Base Tokens";
+var BASE_CSS_END_MARKER = "/* \u2500\u2500 End Wensity Base Tokens \u2500\u2500 */";
 async function prepareInstall(projectRoot, config, payload, options = {}) {
   const fallbackFileName = componentFileName(payload.slug);
   const files = [];
@@ -4453,7 +4629,8 @@ async function planPrimitiveCssFile(projectRoot, config, payload) {
   if (!cssRelative) return void 0;
   const absolutePath = resolveInside(projectRoot, cssRelative);
   const existing = await fileExists(absolutePath) ? await readFile5(absolutePath, "utf8") : "";
-  const withTokens = upsertPrimitiveCssBlock(existing, primitiveCss);
+  const withBase = upsertBaseCssBlock(existing, buildBaseCssBlock(baseColorFromStyle(style)));
+  const withTokens = upsertPrimitiveCssBlock(withBase, primitiveCss);
   const fonts = curatedFontsFromStyle(style);
   const fontPlan = planFontInstall(fonts.headingFont, fonts.bodyFont);
   const next = upsertFontImportBlock(withTokens, fontPlan.block);
@@ -4466,19 +4643,44 @@ async function planPrimitiveCssFile(projectRoot, config, payload) {
   };
 }
 function upsertPrimitiveCssBlock(existingCss, block) {
+  return upsertDelimitedBlock(existingCss, block, {
+    startMarker: PRIMITIVE_CSS_START_MARKER,
+    endMarker: PRIMITIVE_CSS_END_MARKER,
+    label: "Wensity Primitive Tokens"
+  });
+}
+function upsertBaseCssBlock(existingCss, block) {
+  return upsertDelimitedBlock(existingCss, block, {
+    startMarker: BASE_CSS_START_MARKER,
+    endMarker: BASE_CSS_END_MARKER,
+    label: "Wensity Base Tokens",
+    insertBeforeMarker: PRIMITIVE_CSS_START_MARKER
+  });
+}
+function upsertDelimitedBlock(existingCss, block, options) {
   const normalizedBlock = block.trim();
-  const start = existingCss.indexOf(PRIMITIVE_CSS_START_MARKER);
-  const end = existingCss.indexOf(PRIMITIVE_CSS_END_MARKER);
+  const start = existingCss.indexOf(options.startMarker);
+  const end = existingCss.indexOf(options.endMarker);
   if (start !== -1 && end !== -1 && end > start) {
     const before = existingCss.slice(0, start).replace(/\s*$/, "\n\n");
-    const after = existingCss.slice(end + PRIMITIVE_CSS_END_MARKER.length).replace(/^\s*/, "\n");
+    const after = existingCss.slice(end + options.endMarker.length).replace(/^\s*/, "\n");
     return `${before}${normalizedBlock}${after}`.replace(/\n{3,}/g, "\n\n");
   }
   if (start !== -1 || end !== -1) {
     throw new CliError(
-      "Configured Tailwind CSS has a partial Wensity Primitive Tokens block. Remove the broken markers and re-run install."
+      `Configured Tailwind CSS has a partial ${options.label} block. Remove the broken markers and re-run install.`
     );
   }
+  if (options.insertBeforeMarker) {
+    const anchor = existingCss.indexOf(options.insertBeforeMarker);
+    if (anchor !== -1) {
+      const before = existingCss.slice(0, anchor).replace(/\s*$/, "\n\n");
+      const after = existingCss.slice(anchor);
+      return `${before}${normalizedBlock}
+
+${after}`.replace(/\n{3,}/g, "\n\n");
+    }
+  }
   const trimmed = existingCss.replace(/\s*$/, "");
   if (!trimmed) return `${normalizedBlock}
 `;
@@ -4722,6 +4924,7 @@ async function initCommand(context, parsed) {
   const template = templateId ? getProjectTemplateDefinition(templateId) : void 0;
   const hasPreset = Boolean(presetCode || presetFile);
   const dependencies = ["clsx", "tailwind-merge"];
+  const installOptions = installOptionsFrom(context, parsed);
   if (hasPreset) {
     await initWithPreset(context, {
       dryRun,
@@ -4731,11 +4934,13 @@ async function initCommand(context, parsed) {
       presetCode,
       presetFile,
       dependencies,
-      template
+      template,
+      installOptions
     });
     return;
   }
   const templateFiles = template ? await scaffoldProjectTemplate(context.cwd, template, { dryRun, force }) : [];
+  const packageManagerFiles = template ? prepareProjectPackageManager(context.cwd, { ...installOptions, dryRun }) : [];
   const config = template ? applyTemplateToConfig(createDefaultConfig(context.cwd, apiUrl), template) : createDefaultConfig(context.cwd, apiUrl);
   const configPath = join7(context.cwd, CONFIG_FILE_NAME);
   const utilityPath = resolveConfiguredFilePath(context.cwd, config.utils);
@@ -4743,7 +4948,12 @@ async function initCommand(context, parsed) {
   if (dryRun) {
     printTitle("Project initialization preview");
     print(action("Would write:"));
-    print(formatList([...formatTemplateFiles(templateFiles), CONFIG_FILE_NAME, utilityRelativePath]));
+    print(formatList([
+      ...formatTemplateFiles(templateFiles),
+      ...packageManagerFiles,
+      CONFIG_FILE_NAME,
+      utilityRelativePath
+    ]));
     if (template) print(action(`Template: ${template.label}`));
     if (install) print(action(`Would install: ${dependencies.join(" ")}`));
     return;
@@ -4753,14 +4963,24 @@ async function initCommand(context, parsed) {
     await writeTextFile(utilityPath, cnUtilityTemplate());
   }
   if (install) {
-    runInstall(context.cwd, missingDependencies(context.cwd, dependencies));
-  }
+    if (template) runProjectInstall(context.cwd, installOptions);
+    runInstall(context.cwd, missingDependencies(context.cwd, dependencies), installOptions);
+  }
+  await assertInitPostconditions(context.cwd, [
+    ...templateFiles,
+    ...packageManagerFiles,
+    CONFIG_FILE_NAME,
+    utilityRelativePath
+  ]);
   printTitle("Project initialized");
   print(panel("Created", [
+    ...formatTemplateFiles(templateFiles).map((file) => success(file)),
+    ...packageManagerFiles.map((file) => success(file)),
     success(CONFIG_FILE_NAME),
     success(utilityRelativePath),
     success(`registry: ${apiUrl}`)
   ]));
+  print(action(`Location: ${context.cwd}`));
   print(nextSteps([
     "Browse available components: npx wensity list",
     "Browse premium blocks: npx wensity list --type block",
@@ -4778,6 +4998,10 @@ async function initWithPreset(context, options) {
     dryRun: options.dryRun,
     force: options.force
   }) : [];
+  const packageManagerFiles = options.template ? prepareProjectPackageManager(context.cwd, {
+    ...options.installOptions,
+    dryRun: options.dryRun
+  }) : [];
   let config;
   if (configExists && !options.force) {
     if (options.template) {
@@ -4801,7 +5025,12 @@ async function initWithPreset(context, options) {
   if (options.dryRun) {
     printTitle("Project initialization preview (preset)");
     print(action("Would write:"));
-    const planned = [...formatTemplateFiles(templateFiles), CONFIG_FILE_NAME, utilityRelativePath];
+    const planned = [
+      ...formatTemplateFiles(templateFiles),
+      ...packageManagerFiles,
+      CONFIG_FILE_NAME,
+      utilityRelativePath
+    ];
     if (prepared.cssChanged) planned.push(toPosixPath(prepared.cssRelative));
     print(formatList(planned));
     if (options.template) print(action(`Template: ${options.template.label}`));
@@ -4832,11 +5061,25 @@ async function initWithPreset(context, options) {
     }
   });
   if (options.install) {
-    runInstall(context.cwd, missingDependencies(context.cwd, installDependencies));
+    if (options.template) runProjectInstall(context.cwd, options.installOptions);
+    runInstall(
+      context.cwd,
+      missingDependencies(context.cwd, installDependencies),
+      options.installOptions
+    );
   }
+  await assertInitPostconditions(context.cwd, [
+    ...templateFiles,
+    ...packageManagerFiles,
+    CONFIG_FILE_NAME,
+    utilityRelativePath,
+    prepared.cssRelative
+  ]);
   printTitle("Project initialized");
   const created = [
     ...options.template ? [success(`template: ${options.template.label}`)] : [],
+    ...formatTemplateFiles(templateFiles).map((file) => success(file)),
+    ...packageManagerFiles.map((file) => success(file)),
     success(CONFIG_FILE_NAME),
     success(utilityRelativePath),
     success(`registry: ${options.apiUrl}`),
@@ -4851,6 +5094,7 @@ async function initWithPreset(context, options) {
     created.push(success(`fonts: ${prepared.fontPlan.packages.join(", ")}`));
   }
   print(panel("Created", created));
+  print(action(`Location: ${context.cwd}`));
   if (prepared.unusedFontWarning) warn(prepared.unusedFontWarning);
   print(nextSteps([
     "Browse available components: npx wensity list",
@@ -4915,7 +5159,11 @@ async function applyCommand(context, parsed) {
     }
   });
   if (install && installDependencies.length > 0) {
-    runInstall(loaded.projectRoot, missingDependencies(loaded.projectRoot, installDependencies));
+    runInstall(
+      loaded.projectRoot,
+      missingDependencies(loaded.projectRoot, installDependencies),
+      installOptionsFrom(context, parsed)
+    );
   }
   printTitle("Preset applied");
   const applied = [
@@ -4965,7 +5213,8 @@ async function preparePresetStyleApplication(projectRoot, config, style, operati
   }
   const cssAbsolute = resolveInside(projectRoot, cssRelative);
   const existingCss = await fileExists(cssAbsolute) ? await readFile6(cssAbsolute, "utf8") : "";
-  const withTokens = upsertPrimitiveCssBlock(existingCss, primitiveCss);
+  const withBase = upsertBaseCssBlock(existingCss, buildBaseCssBlock(baseColorFromStyle(style)));
+  const withTokens = upsertPrimitiveCssBlock(withBase, primitiveCss);
   const nextCss = upsertFontImportBlock(withTokens, fontPlan.block);
   const cssChanged = nextCss !== existingCss;
   const installedPackages = readInstalledPackageNames(projectRoot);
@@ -5095,13 +5344,13 @@ function formatBlockGroup(blocks) {
 }
 async function addCommand(context, parsed, positionals, updateMode) {
   const resourceType = getResourceType(parsed);
-  const slug = positionals[0];
-  if (!slug) {
-    throw new CliError(
-      `Missing ${resourceType} slug.
+  const command = updateMode ? "update" : "add";
+  const usage = `Usage: wensity ${command} <slug...>${resourceType === "block" ? " --type block" : ""}`;
+  const slugs = dedupe(positionals);
+  if (slugs.length === 0) {
+    throw new CliError(`Missing ${resourceType} slug.
 
-Usage: wensity ${updateMode ? "update" : "add"} <slug>${resourceType === "block" ? " --type block" : ""}`
-    );
+${usage}`);
   }
   const apiUrl = getStringOption(parsed, "api-url") ?? context.env.WENSITY_API_URL;
   const registryOverride = getStringOption(parsed, "registry");
@@ -5109,40 +5358,67 @@ Usage: wensity ${updateMode ? "update" : "add"} <slug>${resourceType === "block"
   const credentials = await readCredentials(context.env);
   const registry = registryUrlForType(loaded.config.registry, resourceType, registryOverride);
   const force = updateMode || hasFlag(parsed, "force");
-  const payload = resourceType === "block" ? await fetchBlockPayload({ slug, registry, credentials }) : await fetchComponentPayload({ slug, registry, credentials });
-  const prepared = await prepareInstall(loaded.projectRoot, loaded.config, payload, {
-    overwriteExistingDependencyFiles: force
-  });
   const dryRun = hasFlag(parsed, "dry-run");
   const install = !hasFlag(parsed, "no-install");
-  const plannedInstallFiles = prepared.cssFile ? [...prepared.files, prepared.cssFile] : prepared.files;
-  await assertNoConflicts(plannedInstallFiles, force || dryRun);
-  const plannedFiles = summarizeFiles(loaded.projectRoot, plannedInstallFiles);
-  const missing = missingDependencies(loaded.projectRoot, prepared.dependencies);
+  const payloads = [];
+  for (const slug of slugs) {
+    payloads.push(
+      resourceType === "block" ? await fetchBlockPayload({ slug, registry, credentials }) : await fetchComponentPayload({ slug, registry, credentials })
+    );
+  }
   const style = normalizeProjectStyle(loaded.config.style);
   const fonts = curatedFontsFromStyle(style);
   const installedPackages = readInstalledPackageNames(loaded.projectRoot);
-  const oppositeIconWarning = installedPackages && prepared.iconDependencySwap ? warnOppositeIconPackageMessage(style.iconLibrary, installedPackages) : void 0;
   const unusedFontWarning = installedPackages ? warnUnusedFontPackageMessage(fonts.headingFont, fonts.bodyFont, installedPackages) : void 0;
+  const writtenFiles = [];
+  const cssTargets = [];
+  const dependencies = [];
+  const installPlans = [];
+  let iconDependencySwapped = false;
+  for (const payload of payloads) {
+    const prepared = await prepareInstall(loaded.projectRoot, loaded.config, payload, {
+      overwriteExistingDependencyFiles: force
+    });
+    const plannedInstallFiles = prepared.cssFile ? [...prepared.files, prepared.cssFile] : prepared.files;
+    installPlans.push(prepared);
+    writtenFiles.push(...summarizeFiles(loaded.projectRoot, plannedInstallFiles));
+    if (prepared.cssFile) cssTargets.push(prepared.cssFile.relativePath);
+    dependencies.push(...prepared.dependencies);
+    if (prepared.iconDependencySwap) iconDependencySwapped = true;
+  }
+  const allPlannedInstallFiles = installPlans.flatMap(
+    (prepared) => prepared.cssFile ? [...prepared.files, prepared.cssFile] : prepared.files
+  );
+  await assertNoConflicts(allPlannedInstallFiles, force || dryRun);
+  const plannedFiles = dedupe(writtenFiles);
+  const missing = missingDependencies(loaded.projectRoot, dedupe(dependencies));
+  const oppositeIconWarning = installedPackages && iconDependencySwapped ? warnOppositeIconPackageMessage(style.iconLibrary, installedPackages) : void 0;
   if (dryRun) {
     printTitle(updateMode ? "Update preview" : "Install preview");
     print(action("Would write:"));
     print(formatList(plannedFiles));
-    if (prepared.cssFile) {
-      print(action(`Would update CSS tokens in: ${prepared.cssFile.relativePath}`));
+    for (const target of dedupe(cssTargets)) {
+      print(action(`Would update CSS tokens in: ${target}`));
     }
     if (install && missing.length > 0) print(action(`Would install: ${missing.join(" ")}`));
     if (oppositeIconWarning) warn(oppositeIconWarning);
     if (unusedFontWarning) warn(unusedFontWarning);
     return;
   }
-  await writePlannedFiles(plannedInstallFiles);
-  if (install) {
-    runInstall(loaded.projectRoot, missing);
+  for (const prepared of installPlans) {
+    await writePlannedFiles(
+      prepared.cssFile ? [...prepared.files, prepared.cssFile] : prepared.files
+    );
   }
-  printTitle(updateMode ? "Component updated" : "Component installed");
-  print(panel(payload.name, [
-    success(`${updateMode ? "Updated" : "Added"} ${payload.slug}`),
+  if (install) {
+    runInstall(loaded.projectRoot, missing, installOptionsFrom(context, parsed));
+  }
+  const noun = payloads.length === 1 ? "Component" : "Components";
+  printTitle(updateMode ? `${noun} updated` : `${noun} installed`);
+  print(panel(payloads.map((payload) => payload.name).join(", "), [
+    ...payloads.map(
+      (payload) => success(`${updateMode ? "Updated" : "Added"} ${payload.slug}`)
+    ),
     ...plannedFiles.map((file) => success(file))
   ]));
   if (oppositeIconWarning) warn(oppositeIconWarning);
@@ -5156,10 +5432,13 @@ Usage: wensity ${updateMode ? "update" : "add"} <slug>${resourceType === "block"
     return;
   }
   print(nextSteps([
-    "Import the installed file from your Wensity components folder",
+    payloads.length === 1 ? "Import the installed file from your Wensity components folder" : "Import the installed files from your Wensity components folder",
     resourceType === "block" ? "Customize the block copy, colors, and sections" : "Customize props and styling for your app"
   ]));
 }
+function dedupe(values) {
+  return [...new Set(values)];
+}
 async function fetchComponentPayload(input) {
   const metadata = await withSpinner(
     `Finding ${input.slug}`,
@@ -5272,6 +5551,32 @@ async function writeTextFile(path, content) {
   await mkdir6(dirname7(path), { recursive: true });
   await writeFile6(path, content, "utf8");
 }
+function installOptionsFrom(context, parsed) {
+  return {
+    packageManager: parsePackageManager(getStringOption(parsed, "package-manager")),
+    env: context.env
+  };
+}
+async function assertInitPostconditions(projectRoot, relativePaths) {
+  const missing = [];
+  for (const relativePath of new Set(relativePaths)) {
+    const absolute = join7(projectRoot, relativePath);
+    let size = 0;
+    try {
+      size = (await stat(absolute)).size;
+    } catch {
+      missing.push(relativePath);
+      continue;
+    }
+    if (size === 0) missing.push(relativePath);
+  }
+  if (missing.length > 0) {
+    throw new CliError(
+      `Initialization did not complete. These files are missing or empty in ${projectRoot}:
+` + missing.map((file) => `  - ${toPosixPath(file)}`).join("\n")
+    );
+  }
+}
 
 // src/index.ts
 run({

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "wensity",
-  "version": "0.1.11",
-  "description": "Wensity component registry CLI",
+  "version": "0.1.12",
+  "description": "Install React components, UI primitives, and shareable Tailwind CSS presets into your Next.js project as source code you own.",
   "license": "MIT",
   "author": "Wensity <hey@wensity.com> (https://wensity.com)",
-  "homepage": "https://ui.wensity.com",
+  "homepage": "https://ui.wensity.com/docs/cli",
   "bugs": {
+    "url": "https://github.com/wensity/cli/issues",
     "email": "hey@wensity.com"
   },
   "keywords": [
@@ -13,10 +14,17 @@
     "react",
     "nextjs",
     "tailwindcss",
+    "tailwind-v4",
     "components",
     "ui",
+    "ui-components",
     "design-system",
-    "shadcn"
+    "design-tokens",
+    "theme",
+    "shadcn",
+    "shadcn-ui",
+    "base-ui",
+    "cli"
   ],
   "type": "module",
   "bin": {
@@ -29,16 +37,22 @@
     "dist",
     "README.md"
   ],
+  "scripts": {
+    "build": "tsup --config tsup.config.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --config vitest.config.ts",
+    "lint": "echo 'no lint'"
+  },
   "engines": {
     "node": ">=20.0.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.2",
+    "@wensity/preset": "workspace:*",
     "lucide-react": "^1.24.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
-    "vitest": "^4.1.5",
-    "@wensity/preset": "0.1.0"
+    "vitest": "^4.1.5"
   },
   "publishConfig": {
     "access": "public"
@@ -49,10 +63,8 @@
     "ora": "^9.4.0",
     "picocolors": "^1.1.1"
   },
-  "scripts": {
-    "build": "tsup --config tsup.config.ts",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run --config vitest.config.ts",
-    "lint": "echo 'no lint'"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wensity/cli.git"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Wensity Private Limited
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.