shapes-ui 0.5.0 → 0.6.0

package/dist/cli.js

@@ -784,10 +784,10 @@ function mergeDefs(...defs) {
 function cloneDef(schema) {
   return mergeDefs(schema._zod.def);
 }
-function getElementAtPath(obj, path4) {
-  if (!path4)
+function getElementAtPath(obj, path7) {
+  if (!path7)
     return obj;
-  return path4.reduce((acc, key) => acc?.[key], obj);
+  return path7.reduce((acc, key) => acc?.[key], obj);
 }
 function promiseAllObject(promisesObj) {
   const keys = Object.keys(promisesObj);
@@ -1170,11 +1170,11 @@ function aborted(x, startIndex = 0) {
   }
   return false;
 }
-function prefixIssues(path4, issues) {
+function prefixIssues(path7, issues) {
   return issues.map((iss) => {
     var _a2;
     (_a2 = iss).path ?? (_a2.path = []);
-    iss.path.unshift(path4);
+    iss.path.unshift(path7);
     return iss;
   });
 }
@@ -1357,7 +1357,7 @@ function formatError(error48, mapper = (issue2) => issue2.message) {
 }
 function treeifyError(error48, mapper = (issue2) => issue2.message) {
   const result = { errors: [] };
-  const processError = (error49, path4 = []) => {
+  const processError = (error49, path7 = []) => {
     var _a2, _b;
     for (const issue2 of error49.issues) {
       if (issue2.code === "invalid_union" && issue2.errors.length) {
@@ -1367,7 +1367,7 @@ function treeifyError(error48, mapper = (issue2) => issue2.message) {
       } else if (issue2.code === "invalid_element") {
         processError({ issues: issue2.issues }, issue2.path);
       } else {
-        const fullpath = [...path4, ...issue2.path];
+        const fullpath = [...path7, ...issue2.path];
         if (fullpath.length === 0) {
           result.errors.push(mapper(issue2));
           continue;
@@ -1399,8 +1399,8 @@ function treeifyError(error48, mapper = (issue2) => issue2.message) {
 }
 function toDotPath(_path) {
   const segs = [];
-  const path4 = _path.map((seg) => typeof seg === "object" ? seg.key : seg);
-  for (const seg of path4) {
+  const path7 = _path.map((seg) => typeof seg === "object" ? seg.key : seg);
+  for (const seg of path7) {
     if (typeof seg === "number")
       segs.push(`[${seg}]`);
     else if (typeof seg === "symbol")
@@ -7249,8 +7249,8 @@ function ko_default() {
 }
 
 // node_modules/.pnpm/zod@4.3.6/node_modules/zod/v4/locales/lt.js
-var capitalizeFirstCharacter = (text2) => {
-  return text2.charAt(0).toUpperCase() + text2.slice(1);
+var capitalizeFirstCharacter = (text3) => {
+  return text3.charAt(0).toUpperCase() + text3.slice(1);
 };
 function getUnitTypeFromNumber(number4) {
   const abs = Math.abs(number4);
@@ -13377,13 +13377,13 @@ function resolveRef(ref, ctx) {
   if (!ref.startsWith("#")) {
     throw new Error("External $ref is not supported, only local refs (#/...) are allowed");
   }
-  const path4 = ref.slice(1).split("/").filter(Boolean);
-  if (path4.length === 0) {
+  const path7 = ref.slice(1).split("/").filter(Boolean);
+  if (path7.length === 0) {
     return ctx.rootSchema;
   }
   const defsKey = ctx.version === "draft-2020-12" ? "$defs" : "definitions";
-  if (path4[0] === defsKey) {
-    const key = path4[1];
+  if (path7[0] === defsKey) {
+    const key = path7[1];
     if (!key || !ctx.defs[key]) {
       throw new Error(`Reference not found: ${ref}`);
     }
@@ -13790,6 +13790,10 @@ import { zodToJsonSchema } from "zod-to-json-schema";
 var configSchema = external_exports.object({
   $schema: external_exports.string().optional(),
   style: external_exports.enum(["default", "brutalist", "minimal"]).default("default"),
+  palette: external_exports.object({
+    name: external_exports.string().default("blue"),
+    contrastMode: external_exports.enum(["deterministic", "dynamic"]).default("deterministic")
+  }).default({ name: "blue", contrastMode: "deterministic" }),
   tailwind: external_exports.object({
     config: external_exports.string().optional(),
     css: external_exports.string().default("src/styles/globals.css"),
@@ -13809,13 +13813,13 @@ function exitIfCancelled(value) {
   }
   return value;
 }
-async function getConfig() {
-  const configPath = path.join(process.cwd(), "shapes.json");
+async function getConfig(cwd = process.cwd()) {
+  const configPath = path.join(cwd, "shapes.json");
   if (!fs2.existsSync(configPath)) return null;
   return configSchema.parse(await fs2.readJSON(configPath));
 }
-async function readPackageJson() {
-  const pkgPath = path.join(process.cwd(), "package.json");
+async function readPackageJson(cwd = process.cwd()) {
+  const pkgPath = path.join(cwd, "package.json");
   if (!await fs2.pathExists(pkgPath)) return null;
   return fs2.readJSON(pkgPath);
 }
@@ -13835,30 +13839,33 @@ function getMissingDeps(pkg, deps) {
   if (!pkg) return deps;
   return deps.filter((dep) => !pkg.dependencies?.[dep] && !pkg.devDependencies?.[dep]);
 }
-async function isViteProject() {
-  const viteConfigTs = path.join(process.cwd(), "vite.config.ts");
-  const viteConfigJs = path.join(process.cwd(), "vite.config.js");
-  const viteConfigMjs = path.join(process.cwd(), "vite.config.mjs");
+async function isViteProject(cwd = process.cwd()) {
+  const viteConfigTs = path.join(cwd, "vite.config.ts");
+  const viteConfigJs = path.join(cwd, "vite.config.js");
+  const viteConfigMjs = path.join(cwd, "vite.config.mjs");
   return await fs2.pathExists(viteConfigTs) || await fs2.pathExists(viteConfigJs) || await fs2.pathExists(viteConfigMjs);
 }
 
 // src/commands/add.ts
 import path2 from "path";
-import { cancel as cancel2, multiselect, note, spinner } from "@clack/prompts";
-import { execa } from "execa";
+import { cancel as cancel2, multiselect, note, spinner as spinner2 } from "@clack/prompts";
 import fs3 from "fs-extra";
 
+// src/utils/dependency-installer.ts
+import { spinner } from "@clack/prompts";
+import { execa } from "execa";
+
 // src/utils/package-manager.ts
 import { detect } from "detect-package-manager";
-async function getPackageManager() {
+async function getPackageManager(cwd = process.cwd()) {
   try {
-    return await detect();
+    return await detect({ cwd });
   } catch {
     return "npm";
   }
 }
-async function getInstallCommand(deps, dev = false) {
-  const pm = await getPackageManager();
+async function getInstallCommand(deps, dev = false, cwd = process.cwd()) {
+  const pm = await getPackageManager(cwd);
   if (pm === "yarn") {
     return ["yarn", "add", ...dev ? ["-D"] : [], ...deps];
   }
@@ -13871,10 +13878,22 @@ async function getInstallCommand(deps, dev = false) {
   return ["npm", "install", ...dev ? ["--save-dev"] : [], ...deps];
 }
 
+// src/utils/dependency-installer.ts
+async function installDependencies(deps, options = {}) {
+  if (!deps.length) return;
+  const spin = spinner();
+  const label = options.label ?? (options.dev ? "Installing dev dependencies" : "Installing dependencies");
+  spin.start(label);
+  const cwd = options.cwd ?? process.cwd();
+  const [command, ...args] = await getInstallCommand(deps, options.dev ?? false, cwd);
+  await execa(command, args, { cwd });
+  spin.stop(options.successMessage ?? "Dependencies installed");
+}
+
 // src/commands/add.ts
 var REGISTRY_URL = "https://shapes-ui.com/r";
-async function loadRegistryIndex() {
-  const localRegistryDir = path2.resolve(process.cwd(), "public/r");
+async function loadRegistryIndex(cwd = process.cwd()) {
+  const localRegistryDir = path2.resolve(cwd, "public/r");
   if (await fs3.pathExists(localRegistryDir)) {
     const files = await fs3.readdir(localRegistryDir);
     const entries = [];
@@ -13899,7 +13918,7 @@ async function loadRegistryIndex() {
 async function pickComponents() {
   let components = [];
   try {
-    components = await loadRegistryIndex();
+    components = await loadRegistryIndex(process.cwd());
   } catch (error48) {
     cancel2(error48 instanceof Error ? error48.message : "Failed to load registry.");
     process.exit(1);
@@ -13916,59 +13935,607 @@ async function pickComponents() {
   );
   return selected;
 }
-async function installComponent(name, config2) {
-  const spin = spinner();
-  spin.start(`Fetching ${name}`);
-  let data;
-  const localFile = path2.resolve(process.cwd(), `public/r/${name}.json`);
-  if (await fs3.pathExists(localFile)) {
-    data = await fs3.readJSON(localFile);
-  } else {
-    const res = await fetch(`${REGISTRY_URL}/${name}.json`);
-    if (!res.ok) {
-      spin.stop("Fetch failed");
-      throw new Error(`Component ${name} not found in registry.`);
-    }
-    data = await res.json();
+function createInstallContext() {
+  return {
+    installing: /* @__PURE__ */ new Set(),
+    installed: /* @__PURE__ */ new Set()
+  };
+}
+async function installComponent(name, config2, context = createInstallContext(), cwd = process.cwd()) {
+  if (context.installed.has(name)) return;
+  if (context.installing.has(name)) {
+    note(`Skipped circular dependency while resolving ${name}`);
+    return;
   }
-  spin.stop(`Fetched ${name}`);
-  if (data.registryDependencies) {
-    for (const dep of data.registryDependencies) {
-      const depPath = path2.join(process.cwd(), config2.paths.ui, `${dep}.tsx`);
-      if (!fs3.existsSync(depPath)) {
-        await installComponent(dep, config2);
+  context.installing.add(name);
+  try {
+    const spin = spinner2();
+    spin.start(`Fetching ${name}`);
+    let data;
+    const localFile = path2.resolve(cwd, `public/r/${name}.json`);
+    if (await fs3.pathExists(localFile)) {
+      data = await fs3.readJSON(localFile);
+    } else {
+      const res = await fetch(`${REGISTRY_URL}/${name}.json`);
+      if (!res.ok) {
+        spin.stop("Fetch failed");
+        throw new Error(`Component ${name} not found in registry.`);
       }
+      data = await res.json();
     }
+    spin.stop(`Fetched ${name}`);
+    if (data.registryDependencies) {
+      for (const dep of data.registryDependencies) {
+        const depPath = path2.join(cwd, config2.paths.ui, `${dep}.tsx`);
+        if (!fs3.existsSync(depPath)) {
+          await installComponent(dep, config2, context, cwd);
+        }
+      }
+    }
+    if (data.dependencies?.length) {
+      await installDependencies(data.dependencies, {
+        label: `Installing dependencies for ${name}`,
+        successMessage: `Dependencies installed for ${name}`,
+        cwd
+      });
+    }
+    for (const file2 of data.files) {
+      const target = path2.join(cwd, config2.paths.ui, file2.path);
+      await fs3.ensureDir(path2.dirname(target));
+      await fs3.writeFile(target, file2.content);
+    }
+    context.installed.add(name);
+    note(`Added ${name}`);
+  } finally {
+    context.installing.delete(name);
   }
-  if (data.dependencies?.length) {
-    const [command, ...args] = await getInstallCommand(data.dependencies);
-    await execa(command, args);
-  }
-  for (const file2 of data.files) {
-    const target = path2.join(process.cwd(), config2.paths.ui, file2.path);
-    await fs3.ensureDir(path2.dirname(target));
-    await fs3.writeFile(target, file2.content);
+}
+async function addAllComponents(config2, cwd = process.cwd()) {
+  const all = await loadRegistryIndex(cwd);
+  const context = createInstallContext();
+  for (const name of all) {
+    await installComponent(name, config2, context, cwd);
   }
-  note(`Added ${name}`);
 }
 async function addCommand(components, config2) {
   let selections = components;
   if (!selections?.length) {
     selections = await pickComponents();
   }
+  const context = createInstallContext();
   for (const name of selections) {
-    await installComponent(name, config2);
+    await installComponent(name, config2, context, process.cwd());
   }
 }
 
-// src/commands/init.ts
-import path3 from "path";
-import { confirm, intro, note as note2, outro, select, text, spinner as spinner2 } from "@clack/prompts";
+// src/commands/create.ts
+import path4 from "path";
+import { confirm, intro, note as note2, outro, spinner as spinner3, text } from "@clack/prompts";
 import { execa as execa2 } from "execa";
-import figlet from "figlet";
-import fs4 from "fs-extra";
-import gradient from "gradient-string";
+import fs5 from "fs-extra";
 import pc from "picocolors";
+
+// src/utils/palette.ts
+import os from "os";
+import path3 from "path";
+import fs4 from "fs-extra";
+var CACHE_VERSION = 1;
+var TAILWIND_COLORS_URL = "https://tailwindcss.com/docs/colors";
+var MARKER_START = "/* shapes-ui:tokens:start v1 */";
+var MARKER_END = "/* shapes-ui:tokens:end */";
+var SHADE_STEPS = [
+  "50",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "950"
+];
+var DEFAULT_BRAND_PALETTES = [
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+var FOREGROUND_PAIRS = [
+  { background: "card", foreground: "card-foreground" },
+  { background: "popup", foreground: "popup-foreground" },
+  { background: "primary", foreground: "primary-foreground" },
+  { background: "secondary", foreground: "secondary-foreground" },
+  { background: "muted", foreground: "muted-foreground" },
+  { background: "accent", foreground: "accent-foreground" },
+  { background: "destructive", foreground: "destructive-foreground" },
+  { background: "success", foreground: "success-foreground" },
+  { background: "warning", foreground: "warning-foreground" },
+  { background: "info", foreground: "info-foreground" }
+];
+var DETERMINISTIC_FOREGROUND_SHADE = {
+  light: {
+    background: "950",
+    foreground: "950",
+    card: "950",
+    "card-foreground": "950",
+    popup: "950",
+    "popup-foreground": "950",
+    primary: "50",
+    "primary-foreground": "50",
+    secondary: "900",
+    "secondary-foreground": "900",
+    muted: "500",
+    "muted-foreground": "500",
+    accent: "900",
+    "accent-foreground": "900",
+    destructive: "50",
+    "destructive-foreground": "50",
+    success: "50",
+    "success-foreground": "50",
+    warning: "950",
+    "warning-foreground": "950",
+    info: "50",
+    "info-foreground": "50",
+    border: "900",
+    input: "900",
+    ring: "50"
+  },
+  dark: {
+    background: "50",
+    foreground: "50",
+    card: "100",
+    "card-foreground": "100",
+    popup: "100",
+    "popup-foreground": "100",
+    primary: "950",
+    "primary-foreground": "950",
+    secondary: "100",
+    "secondary-foreground": "100",
+    muted: "400",
+    "muted-foreground": "400",
+    accent: "100",
+    "accent-foreground": "100",
+    destructive: "950",
+    "destructive-foreground": "950",
+    success: "950",
+    "success-foreground": "950",
+    warning: "950",
+    "warning-foreground": "950",
+    info: "950",
+    "info-foreground": "950",
+    border: "100",
+    input: "100",
+    ring: "950"
+  }
+};
+function normalizeName(value) {
+  return value.trim().toLowerCase();
+}
+function normalizeColorValue(value) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith("oklch(")) {
+    return trimmed.slice(6, -1).trim();
+  }
+  return trimmed;
+}
+function isValidScale(value) {
+  if (!value || typeof value !== "object") return false;
+  return SHADE_STEPS.every((step) => typeof value[step] === "string");
+}
+function getCacheFilePath() {
+  return path3.join(os.homedir(), ".shapes-ui", "cache", "tailwind-colors-v4.json");
+}
+async function readCache() {
+  const cachePath = getCacheFilePath();
+  if (!await fs4.pathExists(cachePath)) return null;
+  const payload = await fs4.readJSON(cachePath);
+  if (payload.version !== CACHE_VERSION || !payload.palettes || typeof payload.palettes !== "object") {
+    return null;
+  }
+  const validated = {};
+  for (const [name, scale] of Object.entries(payload.palettes)) {
+    if (isValidScale(scale)) {
+      validated[normalizeName(name)] = scale;
+    }
+  }
+  return Object.keys(validated).length > 0 ? validated : null;
+}
+async function writeCache(palettes) {
+  const cachePath = getCacheFilePath();
+  await fs4.ensureDir(path3.dirname(cachePath));
+  const payload = {
+    version: CACHE_VERSION,
+    fetchedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    palettes
+  };
+  await fs4.writeJSON(cachePath, payload, { spaces: 2 });
+}
+async function loadFromTailwindPackage() {
+  try {
+    const colorsModule = await import("tailwindcss/colors");
+    const source = colorsModule.default ?? colorsModule;
+    const palettes = {};
+    for (const [familyName, rawScale] of Object.entries(source)) {
+      if (!rawScale || typeof rawScale !== "object") continue;
+      const family = normalizeName(familyName);
+      const scale = rawScale;
+      const next = {};
+      for (const step of SHADE_STEPS) {
+        const value = scale[step];
+        if (typeof value !== "string") {
+          next[step] = void 0;
+          continue;
+        }
+        next[step] = normalizeColorValue(value);
+      }
+      if (isValidScale(next)) {
+        palettes[family] = next;
+      }
+    }
+    return Object.keys(palettes).length > 0 ? palettes : null;
+  } catch {
+    return null;
+  }
+}
+function parseTailwindColorsFromDocs(markup) {
+  const regex = /--color-([a-z]+)-(50|100|200|300|400|500|600|700|800|900|950)\s*:\s*(oklch\([^)]+\))/g;
+  const palettes = {};
+  let match = regex.exec(markup);
+  while (match) {
+    const family = normalizeName(match[1]);
+    const shade = match[2];
+    const value = normalizeColorValue(match[3]);
+    palettes[family] ??= {};
+    palettes[family][shade] = value;
+    match = regex.exec(markup);
+  }
+  const validated = {};
+  for (const [family, scale] of Object.entries(palettes)) {
+    if (isValidScale(scale)) {
+      validated[family] = scale;
+    }
+  }
+  return validated;
+}
+async function loadFromRemote() {
+  try {
+    const response = await fetch(TAILWIND_COLORS_URL);
+    if (!response.ok) return null;
+    const markup = await response.text();
+    const palettes = parseTailwindColorsFromDocs(markup);
+    if (Object.keys(palettes).length === 0) return null;
+    return palettes;
+  } catch {
+    return null;
+  }
+}
+async function resolvePaletteSource(refresh = false) {
+  if (!refresh) {
+    const fromCache2 = await readCache();
+    if (fromCache2) {
+      return { source: "cache", palettes: fromCache2 };
+    }
+  }
+  const fromRemote = await loadFromRemote();
+  if (fromRemote) {
+    await writeCache(fromRemote);
+    return { source: "remote", palettes: fromRemote };
+  }
+  const fromCache = await readCache();
+  if (fromCache) {
+    return { source: "cache", palettes: fromCache };
+  }
+  const fromPackage = await loadFromTailwindPackage();
+  if (fromPackage) {
+    return { source: "package", palettes: fromPackage };
+  }
+  throw new Error("Could not load Tailwind color palettes from docs, cache, or local package.");
+}
+function resolveFamily(palettes, familyName) {
+  const family = normalizeName(familyName);
+  const scale = palettes[family];
+  if (!scale) {
+    const available = Object.keys(palettes).sort().join(", ");
+    throw new Error(`Palette "${familyName}" is not available. Available palettes: ${available}`);
+  }
+  return { family, scale };
+}
+function parseLightness(value) {
+  const first = value.split(/\s+/)[0]?.trim() ?? "";
+  if (!first) return Number.NaN;
+  if (first.endsWith("%")) {
+    return Number.parseFloat(first.slice(0, -1));
+  }
+  const numeric = Number.parseFloat(first);
+  if (Number.isNaN(numeric)) return Number.NaN;
+  return numeric <= 1 ? numeric * 100 : numeric;
+}
+function pickDynamicForegroundShade(scale, backgroundShade) {
+  const backgroundValue = scale[backgroundShade];
+  const backgroundLightness = parseLightness(backgroundValue);
+  if (!Number.isFinite(backgroundLightness)) {
+    return backgroundShade === "950" ? "50" : "950";
+  }
+  let bestShade = "950";
+  let bestDelta = -1;
+  for (const shade of SHADE_STEPS) {
+    const delta = Math.abs(parseLightness(scale[shade]) - backgroundLightness);
+    if (delta > bestDelta) {
+      bestDelta = delta;
+      bestShade = shade;
+    }
+  }
+  return bestShade;
+}
+function buildAssignments(brandFamily, neutralFamily) {
+  return {
+    light: {
+      background: { family: neutralFamily, shade: "50" },
+      foreground: { family: neutralFamily, shade: "950" },
+      card: { family: neutralFamily, shade: "50" },
+      "card-foreground": { family: neutralFamily, shade: "950" },
+      popup: { family: neutralFamily, shade: "50" },
+      "popup-foreground": { family: neutralFamily, shade: "950" },
+      primary: { family: brandFamily, shade: "600" },
+      "primary-foreground": { family: brandFamily, shade: "50" },
+      secondary: { family: neutralFamily, shade: "100" },
+      "secondary-foreground": { family: neutralFamily, shade: "900" },
+      muted: { family: neutralFamily, shade: "100" },
+      "muted-foreground": { family: neutralFamily, shade: "500" },
+      accent: { family: brandFamily, shade: "100" },
+      "accent-foreground": { family: brandFamily, shade: "900" },
+      destructive: { family: "red", shade: "600" },
+      "destructive-foreground": { family: "red", shade: "50" },
+      success: { family: "green", shade: "600" },
+      "success-foreground": { family: "green", shade: "50" },
+      warning: { family: "amber", shade: "500" },
+      "warning-foreground": { family: "amber", shade: "950" },
+      info: { family: brandFamily, shade: "600" },
+      "info-foreground": { family: brandFamily, shade: "50" },
+      border: { family: neutralFamily, shade: "200" },
+      input: { family: neutralFamily, shade: "300" },
+      ring: { family: brandFamily, shade: "500" }
+    },
+    dark: {
+      background: { family: neutralFamily, shade: "950" },
+      foreground: { family: neutralFamily, shade: "50" },
+      card: { family: neutralFamily, shade: "900" },
+      "card-foreground": { family: neutralFamily, shade: "100" },
+      popup: { family: neutralFamily, shade: "900" },
+      "popup-foreground": { family: neutralFamily, shade: "100" },
+      primary: { family: brandFamily, shade: "500" },
+      "primary-foreground": { family: brandFamily, shade: "950" },
+      secondary: { family: neutralFamily, shade: "800" },
+      "secondary-foreground": { family: neutralFamily, shade: "100" },
+      muted: { family: neutralFamily, shade: "800" },
+      "muted-foreground": { family: neutralFamily, shade: "400" },
+      accent: { family: brandFamily, shade: "800" },
+      "accent-foreground": { family: brandFamily, shade: "100" },
+      destructive: { family: "red", shade: "500" },
+      "destructive-foreground": { family: "red", shade: "950" },
+      success: { family: "green", shade: "500" },
+      "success-foreground": { family: "green", shade: "950" },
+      warning: { family: "amber", shade: "500" },
+      "warning-foreground": { family: "amber", shade: "950" },
+      info: { family: brandFamily, shade: "500" },
+      "info-foreground": { family: brandFamily, shade: "950" },
+      border: { family: neutralFamily, shade: "800" },
+      input: { family: neutralFamily, shade: "700" },
+      ring: { family: brandFamily, shade: "400" }
+    }
+  };
+}
+function assignForegrounds(palettes, assignments, contrastMode) {
+  if (contrastMode === "deterministic") {
+    for (const mode of ["light", "dark"]) {
+      for (const pair of FOREGROUND_PAIRS) {
+        const bg = assignments[mode][pair.background];
+        assignments[mode][pair.foreground] = {
+          family: bg.family,
+          shade: DETERMINISTIC_FOREGROUND_SHADE[mode][pair.background]
+        };
+      }
+    }
+    return;
+  }
+  for (const mode of ["light", "dark"]) {
+    for (const pair of FOREGROUND_PAIRS) {
+      const background = assignments[mode][pair.background];
+      const scale = palettes[background.family];
+      if (!scale) continue;
+      assignments[mode][pair.foreground] = {
+        family: background.family,
+        shade: pickDynamicForegroundShade(scale, background.shade)
+      };
+    }
+  }
+}
+function resolveTokenThemes(palettes, brandFamily, neutralFamily, contrastMode) {
+  const assignments = buildAssignments(brandFamily, neutralFamily);
+  assignForegrounds(palettes, assignments, contrastMode);
+  const result = {
+    light: {},
+    dark: {}
+  };
+  for (const mode of ["light", "dark"]) {
+    for (const [role, ref] of Object.entries(assignments[mode])) {
+      const scale = palettes[ref.family];
+      if (!scale) {
+        throw new Error(`Palette "${ref.family}" is missing required shades.`);
+      }
+      result[mode][role] = scale[ref.shade];
+    }
+  }
+  return result;
+}
+function formatThemeBlock(theme) {
+  return [
+    `  --background: oklch(${theme.background});`,
+    `  --foreground: oklch(${theme.foreground});`,
+    `  --card: oklch(${theme.card});`,
+    `  --card-foreground: oklch(${theme["card-foreground"]});`,
+    `  --popup: oklch(${theme.popup});`,
+    `  --popup-foreground: oklch(${theme["popup-foreground"]});`,
+    `  --primary: oklch(${theme.primary});`,
+    `  --primary-foreground: oklch(${theme["primary-foreground"]});`,
+    `  --secondary: oklch(${theme.secondary});`,
+    `  --secondary-foreground: oklch(${theme["secondary-foreground"]});`,
+    `  --muted: oklch(${theme.muted});`,
+    `  --muted-foreground: oklch(${theme["muted-foreground"]});`,
+    `  --accent: oklch(${theme.accent});`,
+    `  --accent-foreground: oklch(${theme["accent-foreground"]});`,
+    `  --destructive: oklch(${theme.destructive});`,
+    `  --destructive-foreground: oklch(${theme["destructive-foreground"]});`,
+    `  --success: oklch(${theme.success});`,
+    `  --success-foreground: oklch(${theme["success-foreground"]});`,
+    `  --warning: oklch(${theme.warning});`,
+    `  --warning-foreground: oklch(${theme["warning-foreground"]});`,
+    `  --info: oklch(${theme.info});`,
+    `  --info-foreground: oklch(${theme["info-foreground"]});`,
+    `  --border: oklch(${theme.border});`,
+    `  --input: oklch(${theme.input});`,
+    `  --ring: oklch(${theme.ring});`
+  ].join("\n");
+}
+function buildTokenBlock(assignments, result) {
+  return [
+    MARKER_START,
+    `/* source=${result.source} palette=${result.paletteName} neutral=${result.neutralPalette} contrast=${result.contrastMode} */`,
+    ":root {",
+    formatThemeBlock(assignments.light),
+    "}",
+    "",
+    ".dark {",
+    formatThemeBlock(assignments.dark),
+    "}",
+    "",
+    "@theme inline {",
+    "  --color-background: var(--background);",
+    "  --color-foreground: var(--foreground);",
+    "  --color-card: var(--card);",
+    "  --color-card-foreground: var(--card-foreground);",
+    "  --color-popup: var(--popup);",
+    "  --color-popup-foreground: var(--popup-foreground);",
+    "  --color-primary: var(--primary);",
+    "  --color-primary-foreground: var(--primary-foreground);",
+    "  --color-secondary: var(--secondary);",
+    "  --color-secondary-foreground: var(--secondary-foreground);",
+    "  --color-muted: var(--muted);",
+    "  --color-muted-foreground: var(--muted-foreground);",
+    "  --color-accent: var(--accent);",
+    "  --color-accent-foreground: var(--accent-foreground);",
+    "  --color-destructive: var(--destructive);",
+    "  --color-destructive-foreground: var(--destructive-foreground);",
+    "  --color-success: var(--success);",
+    "  --color-success-foreground: var(--success-foreground);",
+    "  --color-warning: var(--warning);",
+    "  --color-warning-foreground: var(--warning-foreground);",
+    "  --color-info: var(--info);",
+    "  --color-info-foreground: var(--info-foreground);",
+    "  --color-border: var(--border);",
+    "  --color-input: var(--input);",
+    "  --color-ring: var(--ring);",
+    "}",
+    MARKER_END
+  ].join("\n");
+}
+function upsertGeneratedBlock(current, generatedBlock) {
+  const hasStart = current.includes(MARKER_START);
+  const hasEnd = current.includes(MARKER_END);
+  if (hasStart !== hasEnd) {
+    throw new Error("Found an incomplete generated token block. Please fix it manually and retry.");
+  }
+  if (!hasStart) {
+    const trimmed = current.trimEnd();
+    return `${trimmed}
+
+${generatedBlock}
+`;
+  }
+  const startIndex = current.indexOf(MARKER_START);
+  const endIndex = current.indexOf(MARKER_END);
+  if (startIndex === -1 || endIndex === -1 || endIndex < startIndex) {
+    throw new Error("Could not safely update generated token block.");
+  }
+  const endMarkerIndex = endIndex + MARKER_END.length;
+  const before = current.slice(0, startIndex).trimEnd();
+  const after = current.slice(endMarkerIndex).trimStart();
+  if (!before && !after) {
+    return `${generatedBlock}
+`;
+  }
+  if (!after) {
+    return `${before}
+
+${generatedBlock}
+`;
+  }
+  if (!before) {
+    return `${generatedBlock}
+
+${after}`;
+  }
+  return `${before}
+
+${generatedBlock}
+
+${after}`;
+}
+function getDefaultBrandPaletteOptions() {
+  return [...DEFAULT_BRAND_PALETTES];
+}
+function normalizeContrastMode(value) {
+  const normalized = value ? value.trim().toLowerCase() : "deterministic";
+  if (normalized === "deterministic" || normalized === "dynamic") {
+    return normalized;
+  }
+  throw new Error(`Invalid contrast mode "${value}". Use deterministic or dynamic.`);
+}
+async function writePaletteTokens(options) {
+  const cwd = options.cwd ?? process.cwd();
+  const cssFilePath = path3.join(cwd, options.cssPath);
+  const resolved = await resolvePaletteSource(options.refresh);
+  const brand = resolveFamily(resolved.palettes, options.paletteName);
+  const neutral = resolveFamily(resolved.palettes, options.neutralPalette);
+  resolveFamily(resolved.palettes, "red");
+  resolveFamily(resolved.palettes, "green");
+  resolveFamily(resolved.palettes, "amber");
+  const result = {
+    source: resolved.source,
+    paletteName: brand.family,
+    neutralPalette: neutral.family,
+    contrastMode: options.contrastMode
+  };
+  const assignments = resolveTokenThemes(
+    resolved.palettes,
+    brand.family,
+    neutral.family,
+    options.contrastMode
+  );
+  const generatedBlock = buildTokenBlock(assignments, result);
+  const current = await fs4.pathExists(cssFilePath) ? await fs4.readFile(cssFilePath, "utf-8") : "";
+  const updated = upsertGeneratedBlock(current, generatedBlock);
+  await fs4.ensureDir(path3.dirname(cssFilePath));
+  await fs4.writeFile(cssFilePath, updated);
+  return result;
+}
+
+// src/commands/create.ts
 var BASE_DEPS = [
   "@base-ui/react",
   "class-variance-authority",
@@ -13977,44 +14544,229 @@ var BASE_DEPS = [
   "tailwind-merge",
   "tw-animate-css"
 ];
+async function ensureTailwindStyles(cwd, cssPath) {
+  const template = '@import "tailwindcss";\n';
+  const absPath = path4.join(cwd, cssPath);
+  await fs5.ensureDir(path4.dirname(absPath));
+  if (await fs5.pathExists(absPath)) {
+    const current = await fs5.readFile(absPath, "utf-8");
+    if (current.includes("tailwindcss") || current.includes("@tailwind")) return;
+    await fs5.writeFile(absPath, `${current.trimEnd()}
+
+${template}`);
+    return;
+  }
+  await fs5.writeFile(absPath, template);
+}
+async function setupShapesFull(projectDir, options) {
+  const setupSpin = spinner3();
+  setupSpin.start("Configuring Shapes UI");
+  const cssPath = options.cssPath ?? "src/index.css";
+  const uiPath = options.uiPath ?? "./src/components/ui";
+  const style = options.style ?? "default";
+  const palette = options.palette ?? "blue";
+  const contrastMode = options.contrastMode ?? "deterministic";
+  const pkg = await readPackageJson(projectDir);
+  const hasTailwindV4 = isTailwindV4Installed(pkg);
+  const isVite = await isViteProject(projectDir);
+  if (!hasTailwindV4) {
+    const tailwindDeps = ["tailwindcss"];
+    if (isVite) {
+      tailwindDeps.push("@tailwindcss/vite");
+    }
+    await installDependencies(tailwindDeps, {
+      dev: true,
+      label: "Installing Tailwind dependencies",
+      successMessage: "Tailwind dependencies installed",
+      cwd: projectDir
+    });
+  }
+  const latestPkg = await readPackageJson(projectDir);
+  const missingBaseDeps = getMissingDeps(latestPkg, BASE_DEPS);
+  await installDependencies(missingBaseDeps, {
+    label: "Installing Shapes base dependencies",
+    successMessage: "Shapes base dependencies installed",
+    cwd: projectDir
+  });
+  await ensureTailwindStyles(projectDir, cssPath);
+  const paletteResult = await writePaletteTokens({
+    cwd: projectDir,
+    cssPath,
+    paletteName: palette,
+    neutralPalette: "zinc",
+    contrastMode
+  });
+  const config2 = {
+    $schema: "https://shapes-ui.com/schema.json",
+    style,
+    palette: {
+      name: paletteResult.paletteName,
+      contrastMode: paletteResult.contrastMode
+    },
+    tailwind: { css: cssPath, baseColor: "zinc" },
+    paths: { ui: uiPath, lib: "./src/lib" }
+  };
+  await fs5.writeJSON(path4.join(projectDir, "shapes.json"), config2, { spaces: 2 });
+  await addAllComponents(config2, projectDir);
+  setupSpin.stop("Shapes UI configured with all components");
+}
+function getCreateCommand(packageManager, projectName) {
+  if (packageManager === "pnpm") {
+    return ["pnpm", ["create", "vite", projectName, "--template", "react-ts"]];
+  }
+  if (packageManager === "yarn") {
+    return ["yarn", ["create", "vite", projectName, "--template", "react-ts"]];
+  }
+  if (packageManager === "bun") {
+    return ["bun", ["create", "vite", projectName, "--template", "react-ts"]];
+  }
+  return ["npm", ["create", "vite@latest", projectName, "--", "--template", "react-ts"]];
+}
+function getProjectInstallCommand(packageManager) {
+  if (packageManager === "pnpm") {
+    return ["pnpm", ["install"]];
+  }
+  if (packageManager === "yarn") {
+    return ["yarn", ["install"]];
+  }
+  if (packageManager === "bun") {
+    return ["bun", ["install"]];
+  }
+  return ["npm", ["install"]];
+}
+async function createCommand(projectNameArg, options = {}) {
+  intro(pc.bgCyan(pc.black(" Create a Shapes UI app ")));
+  const allowedStyles = /* @__PURE__ */ new Set(["default", "brutalist", "minimal"]);
+  if (options.style && !allowedStyles.has(options.style)) {
+    throw new Error(`Invalid style "${options.style}". Use one of: default, brutalist, minimal.`);
+  }
+  if (options.palette) {
+    const normalizedPalette = options.palette.toLowerCase();
+    const allowedPalettes = new Set(getDefaultBrandPaletteOptions());
+    if (!allowedPalettes.has(normalizedPalette)) {
+      throw new Error(
+        `Invalid palette "${options.palette}". Use one of: ${getDefaultBrandPaletteOptions().join(", ")}.`
+      );
+    }
+    options.palette = normalizedPalette;
+  }
+  if (options.contrastMode) {
+    options.contrastMode = normalizeContrastMode(options.contrastMode);
+  }
+  if (options.uiPath !== void 0 && !options.uiPath.trim()) {
+    throw new Error("Invalid ui path. Please provide a non-empty value.");
+  }
+  if (options.cssPath !== void 0 && !options.cssPath.trim()) {
+    throw new Error("Invalid css path. Please provide a non-empty value.");
+  }
+  const projectName = projectNameArg && projectNameArg.trim().length > 0 ? projectNameArg.trim() : exitIfCancelled(
+    await text({
+      message: "Project name",
+      initialValue: "my-shapes-app",
+      validate(value) {
+        if (!value || !value.trim()) return "Project name is required.";
+        return void 0;
+      }
+    })
+  ).trim();
+  const projectDir = path4.resolve(process.cwd(), projectName);
+  const exists = await fs5.pathExists(projectDir);
+  if (exists) {
+    const overwrite = options.force ?? exitIfCancelled(
+      await confirm({
+        message: `${projectName} already exists. Overwrite it?`,
+        initialValue: false
+      })
+    );
+    if (!overwrite) {
+      outro(pc.yellow("Create cancelled."));
+      return;
+    }
+    await fs5.remove(projectDir);
+  }
+  const packageManager = await getPackageManager();
+  const [createCommandName, createArgs] = getCreateCommand(packageManager, projectName);
+  const createSpin = spinner3();
+  createSpin.start(`Scaffolding ${projectName}`);
+  await execa2(createCommandName, createArgs, { stdio: "ignore" });
+  createSpin.stop(`Created ${projectName}`);
+  note2(`Project scaffolded with ${packageManager} + Vite (React + TypeScript).`, "Create");
+  const shouldInstallProjectDeps = options.install || options.full;
+  if (shouldInstallProjectDeps) {
+    const [installCommand, installArgs] = getProjectInstallCommand(packageManager);
+    const installSpin = spinner3();
+    installSpin.start("Installing project dependencies");
+    await execa2(installCommand, installArgs, {
+      cwd: projectDir,
+      stdio: "ignore"
+    });
+    installSpin.stop("Dependencies installed");
+  }
+  if (options.full) {
+    await setupShapesFull(projectDir, options);
+  }
+  const runShapesInit = `${packageManager === "npm" ? "npx" : packageManager === "pnpm" ? "pnpm dlx" : packageManager === "yarn" ? "yarn dlx" : "bunx"} shapes-ui init`;
+  outro(
+    `${pc.green(options.full ? "Project ready with Shapes UI." : "Project ready.")}
+
+${pc.bold("Next steps:")}
+  cd ${projectName}
+  ${shouldInstallProjectDeps ? "" : `${packageManager} install
+  `}${options.full ? "" : `${runShapesInit}
+  `}  ${packageManager} run dev`
+  );
+}
+
+// src/commands/init.ts
+import path5 from "path";
+import { confirm as confirm2, intro as intro2, note as note3, outro as outro2, select, text as text2 } from "@clack/prompts";
+import figlet from "figlet";
+import fs6 from "fs-extra";
+import gradient from "gradient-string";
+import pc2 from "picocolors";
+var BASE_DEPS2 = [
+  "@base-ui/react",
+  "class-variance-authority",
+  "clsx",
+  "lucide-react",
+  "tailwind-merge",
+  "tw-animate-css"
+];
 async function installDeps(deps, dev = false) {
-  if (!deps.length) return;
-  const spin = spinner2();
-  const label = dev ? "Installing dev dependencies" : "Installing dependencies";
-  spin.start(label);
-  const [command, ...args] = await getInstallCommand(deps, dev);
-  await execa2(command, args);
-  spin.stop(pc.green("Dependencies installed"));
+  await installDependencies(deps, {
+    dev,
+    successMessage: pc2.green("Dependencies installed")
+  });
 }
-async function ensureTailwindStyles(cssPath) {
+async function ensureTailwindStyles2(cssPath) {
   const template = '@import "tailwindcss";\n';
-  const absPath = path3.join(process.cwd(), cssPath);
-  await fs4.ensureDir(path3.dirname(absPath));
-  if (await fs4.pathExists(absPath)) {
-    const current = await fs4.readFile(absPath, "utf-8");
+  const absPath = path5.join(process.cwd(), cssPath);
+  await fs6.ensureDir(path5.dirname(absPath));
+  if (await fs6.pathExists(absPath)) {
+    const current = await fs6.readFile(absPath, "utf-8");
     if (current.includes("tailwindcss") || current.includes("@tailwind")) return;
-    await fs4.writeFile(absPath, `${current.trimEnd()}
+    await fs6.writeFile(absPath, `${current.trimEnd()}
 
 ${template}`);
     return;
   }
-  await fs4.writeFile(absPath, template);
+  await fs6.writeFile(absPath, template);
 }
 function renderTitle() {
-  const text2 = figlet.textSync("Shapes UI", { font: "Standard" });
-  console.log(gradient.pastel.multiline(text2));
+  const text3 = figlet.textSync("Shapes UI", { font: "Standard" });
+  console.log(gradient.pastel.multiline(text3));
 }
 async function initCommand() {
   console.clear();
   renderTitle();
-  intro(pc.bgCyan(pc.black(" Welcome to Shapes UI ")));
-  const configPath = path3.join(process.cwd(), "shapes.json");
-  if (await fs4.pathExists(configPath)) {
+  intro2(pc2.bgCyan(pc2.black(" Welcome to Shapes UI ")));
+  const configPath = path5.join(process.cwd(), "shapes.json");
+  if (await fs6.pathExists(configPath)) {
     const overwrite = exitIfCancelled(
-      await confirm({ message: "shapes.json already exists. Overwrite it?" })
+      await confirm2({ message: "shapes.json already exists. Overwrite it?" })
     );
     if (!overwrite) {
-      outro(pc.yellow("Init cancelled."));
+      outro2(pc2.yellow("Init cancelled."));
       return;
     }
   }
@@ -14023,12 +14775,33 @@ async function initCommand() {
       message: "Which style do you want to use?",
       options: [
         { label: "Default", value: "default" },
-        { label: "Brutalist", value: "brutalist" }
+        { label: "Brutalist", value: "brutalist" },
+        { label: "Minimal", value: "minimal" }
       ]
     })
   );
+  const palette = exitIfCancelled(
+    await select({
+      message: "Pick a brand palette",
+      options: getDefaultBrandPaletteOptions().map((name) => ({
+        label: name[0].toUpperCase() + name.slice(1),
+        value: name
+      })),
+      initialValue: "blue"
+    })
+  );
+  const contrastMode = exitIfCancelled(
+    await select({
+      message: "Choose foreground contrast strategy",
+      options: [
+        { label: "Deterministic shades", value: "deterministic" },
+        { label: "Dynamic contrast", value: "dynamic" }
+      ],
+      initialValue: "deterministic"
+    })
+  );
   const uiPath = exitIfCancelled(
-    await text({
+    await text2({
       message: "Where should we install components?",
       initialValue: "./src/components/ui"
     })
@@ -14037,10 +14810,10 @@ async function initCommand() {
   const hasTailwindV4 = isTailwindV4Installed(pkg);
   const isVite = await isViteProject();
   const hasExistingCss = exitIfCancelled(
-    await confirm({ message: "Do you already have a CSS file?" })
+    await confirm2({ message: "Do you already have a CSS file?" })
   );
   const cssPath = hasExistingCss ? exitIfCancelled(
-    await text({
+    await text2({
       message: "Path to your CSS file",
       initialValue: "src/styles/globals.css"
     })
@@ -14052,18 +14825,28 @@ async function initCommand() {
     }
     await installDeps(tailwindDeps, true);
   }
-  const missingBaseDeps = getMissingDeps(pkg, BASE_DEPS);
+  const missingBaseDeps = getMissingDeps(pkg, BASE_DEPS2);
   await installDeps(missingBaseDeps, false);
-  await ensureTailwindStyles(cssPath);
+  await ensureTailwindStyles2(cssPath);
+  const paletteResult = await writePaletteTokens({
+    cssPath,
+    paletteName: palette,
+    neutralPalette: "zinc",
+    contrastMode
+  });
   const config2 = {
     $schema: "https://shapes-ui.com/schema.json",
     style,
+    palette: {
+      name: paletteResult.paletteName,
+      contrastMode: paletteResult.contrastMode
+    },
     tailwind: { css: cssPath, baseColor: "zinc" },
     paths: { ui: uiPath, lib: "./src/lib" }
   };
-  await fs4.writeJSON("shapes.json", config2, { spaces: 2 });
-  note2("Created shapes.json", "Configuration");
-  const addNow = exitIfCancelled(await confirm({ message: "Add components now?" }));
+  await fs6.writeJSON("shapes.json", config2, { spaces: 2 });
+  note3("Created shapes.json", "Configuration");
+  const addNow = exitIfCancelled(await confirm2({ message: "Add components now?" }));
   if (addNow) {
     const selected = await pickComponents();
     if (selected.length > 0) {
@@ -14072,19 +14855,82 @@ async function initCommand() {
       }
     }
   }
-  outro(pc.green("Shapes UI is ready."));
+  outro2(pc2.green("Shapes UI is ready."));
+}
+
+// src/commands/palette.ts
+import path6 from "path";
+import { intro as intro3, note as note4, outro as outro3 } from "@clack/prompts";
+import fs7 from "fs-extra";
+import pc3 from "picocolors";
+async function paletteSetCommand(name, options = {}) {
+  intro3(pc3.bgCyan(pc3.black(" Update Shapes palette ")));
+  const config2 = await getConfig();
+  if (!config2) {
+    throw new Error("Could not find shapes.json. Run `shapes-ui init` first.");
+  }
+  const contrastMode = normalizeContrastMode(options.contrastMode ?? config2.palette?.contrastMode);
+  const cssPath = options.cssPath ?? config2.tailwind.css;
+  const neutralPalette = config2.tailwind.baseColor;
+  const result = await writePaletteTokens({
+    cssPath,
+    paletteName: name,
+    neutralPalette,
+    contrastMode,
+    refresh: options.refresh
+  });
+  const updatedConfig = {
+    ...config2,
+    palette: {
+      name: result.paletteName,
+      contrastMode: result.contrastMode
+    },
+    tailwind: {
+      ...config2.tailwind,
+      css: cssPath
+    }
+  };
+  await fs7.writeJSON(path6.join(process.cwd(), "shapes.json"), updatedConfig, { spaces: 2 });
+  note4(
+    `palette=${result.paletteName} neutral=${result.neutralPalette} contrast=${result.contrastMode} source=${result.source}`,
+    "Palette updated"
+  );
+  outro3(pc3.green("Shapes UI palette updated."));
 }
 
 // src/commands/cli.ts
 var program = new Command();
-program.name("shapes").description("Shapes UI CLI").version("0.0.1");
+program.name("shapes-ui").description("Shapes UI CLI").version("0.0.1");
 program.command("init").description("Configure Shapes UI for your project").action(initCommand);
-program.command("add [components...]").description("Add components to your project").action(async (components) => {
+program.command("create [project-name]").description("Create a new Vite React TypeScript app ready for Shapes UI").option("-i, --install", "Install project dependencies").option("--full", "Configure Shapes UI and install all components").option("--style <style>", "Shapes style for --full (default|brutalist|minimal)").option("--palette <name>", "Brand palette for --full (e.g. blue, emerald, rose)").option("--contrast-mode <mode>", "Foreground contrast mode for --full (deterministic|dynamic)").option("--ui-path <path>", "UI components path for --full (e.g. ./src/components/ui)").option("--css-path <path>", "Tailwind CSS file path for --full (e.g. src/index.css)").option("-f, --force", "Overwrite target directory if it already exists").action(async (projectName, options) => {
+  await createCommand(projectName, {
+    install: options.install,
+    full: options.full,
+    style: options.style,
+    palette: options.palette,
+    contrastMode: options.contrastMode,
+    uiPath: options.uiPath,
+    cssPath: options.cssPath,
+    force: options.force
+  });
+});
+program.command("add [components...]").description("Add components to your project").option("-a, --all", "Add all available components").action(async (components, options) => {
   const config2 = await getConfig();
   if (!config2) {
     console.error("Please run 'init' first.");
     return;
   }
+  if (options.all) {
+    await addAllComponents(config2);
+    return;
+  }
   await addCommand(components, config2);
 });
+program.command("palette").description("Manage color palettes").command("set <name>").description("Set brand palette and regenerate semantic tokens").option("--css-path <path>", "Override Tailwind CSS file path").option("--contrast-mode <mode>", "Foreground contrast mode (deterministic|dynamic)").option("--refresh", "Refresh Tailwind palette data from docs").action(async (name, options) => {
+  await paletteSetCommand(name, {
+    cssPath: options.cssPath,
+    contrastMode: options.contrastMode,
+    refresh: options.refresh
+  });
+});
 program.parse();