rafters 0.0.13 → 0.0.15

package/dist/index.js

@@ -8,9 +8,9 @@ import {
 import { Command } from "commander";
 
 // src/commands/add.ts
-import { existsSync } from "fs";
-import { access, mkdir, readFile as readFile2, writeFile } from "fs/promises";
-import { dirname, join as join3 } from "path";
+import { existsSync as existsSync2 } from "fs";
+import { access, mkdir, readFile as readFile3, writeFile } from "fs/promises";
+import { dirname, join as join4 } from "path";
 
 // ../../node_modules/.pnpm/zod@4.1.12/node_modules/zod/v4/classic/external.js
 var external_exports = {};
@@ -12751,6 +12751,159 @@ var RegistryClient = class {
 };
 var registryClient = new RegistryClient();
 
+// src/utils/detect.ts
+import { existsSync } from "fs";
+import { readFile } from "fs/promises";
+import { join } from "path";
+var CONFIG_FILE_FRAMEWORKS = [
+  { files: ["astro.config.mjs", "astro.config.ts", "astro.config.js"], framework: "astro" },
+  { files: ["next.config.mjs", "next.config.ts", "next.config.js"], framework: "next" },
+  { files: ["remix.config.js", "remix.config.ts"], framework: "remix" },
+  { files: ["vite.config.ts", "vite.config.js", "vite.config.mjs"], framework: "vite" }
+];
+async function detectFramework(cwd) {
+  try {
+    const content = await readFile(join(cwd, "package.json"), "utf-8");
+    const pkg = JSON.parse(content);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (deps.next) {
+      return "next";
+    }
+    if (deps["react-router"]) {
+      return "react-router";
+    }
+    const hasRemix = Object.keys(deps).some((dep) => dep.startsWith("@remix-run/"));
+    if (hasRemix) {
+      return "remix";
+    }
+    if (deps.astro) {
+      return "astro";
+    }
+    if (deps.vite) {
+      return "vite";
+    }
+  } catch {
+  }
+  return detectFrameworkFromConfigFiles(cwd);
+}
+function detectFrameworkFromConfigFiles(cwd) {
+  for (const { files, framework } of CONFIG_FILE_FRAMEWORKS) {
+    for (const file2 of files) {
+      if (existsSync(join(cwd, file2))) {
+        return framework;
+      }
+    }
+  }
+  return "unknown";
+}
+async function detectTailwindVersion(cwd) {
+  try {
+    const content = await readFile(join(cwd, "package.json"), "utf-8");
+    const pkg = JSON.parse(content);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    const tailwindVersion = deps.tailwindcss;
+    if (!tailwindVersion) {
+      return null;
+    }
+    const versionMatch = tailwindVersion.match(/\d+\.\d+\.\d+/);
+    return versionMatch ? versionMatch[0] : tailwindVersion;
+  } catch {
+    return null;
+  }
+}
+function isTailwindV3(version2) {
+  if (!version2) {
+    return false;
+  }
+  return version2.startsWith("3.");
+}
+async function detectShadcn(cwd) {
+  try {
+    const content = await readFile(join(cwd, "components.json"), "utf-8");
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+}
+function parseCssVariables(css3) {
+  const light = {};
+  const dark = {};
+  const rootMatch = css3.match(/:root\s*\{([^}]+)\}/);
+  if (rootMatch?.[1]) {
+    parseVariablesIntoColors(rootMatch[1], light);
+  }
+  const darkMatch = css3.match(/\.dark\s*\{([^}]+)\}/);
+  if (darkMatch?.[1]) {
+    parseVariablesIntoColors(darkMatch[1], dark);
+  }
+  return { light, dark };
+}
+function parseVariablesIntoColors(block, colors) {
+  const varMap = {
+    "--background": "background",
+    "--foreground": "foreground",
+    "--card": "card",
+    "--card-foreground": "cardForeground",
+    "--popover": "popover",
+    "--popover-foreground": "popoverForeground",
+    "--primary": "primary",
+    "--primary-foreground": "primaryForeground",
+    "--secondary": "secondary",
+    "--secondary-foreground": "secondaryForeground",
+    "--muted": "muted",
+    "--muted-foreground": "mutedForeground",
+    "--accent": "accent",
+    "--accent-foreground": "accentForeground",
+    "--destructive": "destructive",
+    "--destructive-foreground": "destructiveForeground",
+    "--border": "border",
+    "--input": "input",
+    "--ring": "ring"
+  };
+  for (const [cssVar, colorKey] of Object.entries(varMap)) {
+    const regex = new RegExp(`${cssVar}:\\s*([^;]+);`);
+    const match2 = block.match(regex);
+    if (match2?.[1]) {
+      colors[colorKey] = match2[1].trim();
+    }
+  }
+}
+function frameworkToTarget(framework) {
+  if (framework === "astro") return "astro";
+  return "react";
+}
+function targetToExtension(target) {
+  const map2 = {
+    react: ".tsx",
+    astro: ".astro",
+    vue: ".vue",
+    svelte: ".svelte"
+  };
+  return map2[target];
+}
+async function hasAstroReact(cwd) {
+  try {
+    const content = await readFile(join(cwd, "package.json"), "utf-8");
+    const pkg = JSON.parse(content);
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    return Boolean(deps["@astrojs/react"]);
+  } catch {
+    return false;
+  }
+}
+async function detectProject(cwd) {
+  const [framework, shadcn, tailwindVersion] = await Promise.all([
+    detectFramework(cwd),
+    detectShadcn(cwd),
+    detectTailwindVersion(cwd)
+  ]);
+  return {
+    framework,
+    shadcn,
+    tailwindVersion
+  };
+}
+
 // src/utils/exports.ts
 var DEFAULT_EXPORTS = {
   tailwind: true,
@@ -12806,8 +12959,8 @@ function selectionsToConfig(selections) {
 }
 
 // src/utils/install-registry-deps.ts
-import { readFile } from "fs/promises";
-import { join } from "path";
+import { readFile as readFile2 } from "fs/promises";
+import { join as join2 } from "path";
 
 // src/utils/ui.ts
 import ora from "ora";
@@ -13098,7 +13251,7 @@ function parseDependency(dep) {
 async function readInstalledDeps(targetDir) {
   let raw;
   try {
-    raw = await readFile(join(targetDir, "package.json"), "utf-8");
+    raw = await readFile2(join2(targetDir, "package.json"), "utf-8");
   } catch {
     return { packageJsonFound: false, installed: /* @__PURE__ */ new Set() };
   }
@@ -13190,14 +13343,14 @@ async function installRegistryDependencies(items, targetDir, options = {}) {
 }
 
 // src/utils/paths.ts
-import { join as join2 } from "path";
+import { join as join3 } from "path";
 function getRaftersPaths(projectRoot = process.cwd()) {
-  const root = join2(projectRoot, ".rafters");
+  const root = join3(projectRoot, ".rafters");
   return {
     root,
-    config: join2(root, "config.rafters.json"),
-    tokens: join2(root, "tokens"),
-    output: join2(root, "output")
+    config: join3(root, "config.rafters.json"),
+    tokens: join3(root, "tokens"),
+    output: join3(root, "output")
   };
 }
 
@@ -13214,10 +13367,10 @@ async function isInitialized(cwd) {
 async function loadConfig(cwd) {
   const paths = getRaftersPaths(cwd);
   try {
-    const content = await readFile2(paths.config, "utf-8");
+    const content = await readFile3(paths.config, "utf-8");
     return JSON.parse(content);
   } catch (err) {
-    if (existsSync(paths.config)) {
+    if (existsSync2(paths.config)) {
       const message = err instanceof Error ? err.message : String(err);
       log({ event: "add:warning", message: `Failed to load config: ${message}` });
     }
@@ -13237,6 +13390,33 @@ function getInstalledNames(config3) {
   ]);
   return [...names2].sort();
 }
+function getComponentTarget(config3) {
+  if (config3?.componentTarget) return config3.componentTarget;
+  if (config3?.framework) return frameworkToTarget(config3.framework);
+  return "react";
+}
+var SHARED_EXTENSIONS = /* @__PURE__ */ new Set([".classes.ts", ".types.ts", ".constants.ts"]);
+function isSharedFile(path2) {
+  for (const ext2 of SHARED_EXTENSIONS) {
+    if (path2.endsWith(ext2)) return true;
+  }
+  return false;
+}
+function selectFilesForFramework(files, target) {
+  const preferredExt = targetToExtension(target);
+  const shared = files.filter((f) => isSharedFile(f.path));
+  const matched = files.filter((f) => f.path.endsWith(preferredExt));
+  if (matched.length > 0) {
+    return { files: [...matched, ...shared], fallback: false };
+  }
+  if (target !== "react") {
+    const fallbackFiles = files.filter((f) => f.path.endsWith(".tsx"));
+    if (fallbackFiles.length > 0) {
+      return { files: [...fallbackFiles, ...shared], fallback: true };
+    }
+  }
+  return { files, fallback: false };
+}
 var FOLDER_NAMES = /* @__PURE__ */ new Set(["composites"]);
 function isAlreadyInstalled(config3, item) {
   if (!config3?.installed) return false;
@@ -13288,7 +13468,7 @@ function transformPath(registryPath, config3) {
   return registryPath;
 }
 function fileExists(cwd, relativePath) {
-  return existsSync(join3(cwd, relativePath));
+  return existsSync2(join4(cwd, relativePath));
 }
 function transformFileContent(content, config3, fileType = "component") {
   let transformed = content;
@@ -13324,9 +13504,23 @@ function transformFileContent(content, config3, fileType = "component") {
 async function installItem(cwd, item, options, config3) {
   const installedFiles = [];
   let skipped = false;
-  for (const file2 of item.files) {
+  let filesToInstall = item.files;
+  if (item.type === "ui") {
+    const target = getComponentTarget(config3);
+    const selection = selectFilesForFramework(item.files, target);
+    filesToInstall = selection.files;
+    if (selection.fallback) {
+      log({
+        event: "add:fallback",
+        component: item.name,
+        target,
+        message: `No ${targetToExtension(target)} version available for ${item.name}. Installing React version.`
+      });
+    }
+  }
+  for (const file2 of filesToInstall) {
     const projectPath = transformPath(file2.path, config3);
-    const targetPath = join3(cwd, projectPath);
+    const targetPath = join4(cwd, projectPath);
     if (fileExists(cwd, projectPath)) {
       if (!options.overwrite) {
         log({
@@ -13548,7 +13742,7 @@ import { existsSync as existsSync3 } from "fs";
 import { copyFile, mkdir as mkdir3, readFile as readFile5, rm, writeFile as writeFile3 } from "fs/promises";
 import { createRequire } from "module";
 import { join as join9, relative } from "path";
-import { checkbox, confirm } from "@inquirer/prompts";
+import { checkbox, confirm, select } from "@inquirer/prompts";
 
 // ../design-tokens/src/plugins/scale.ts
 function scale(registry2, tokenName, dependencies) {
@@ -27861,7 +28055,7 @@ var posix = {
 
 // ../../node_modules/.pnpm/path-unified@0.2.0/node_modules/path-unified/src/posix.js
 var resolve = posResolve;
-var join4 = posJoin;
+var join5 = posJoin;
 
 // ../../node_modules/.pnpm/@isaacs+balanced-match@4.0.1/node_modules/@isaacs/balanced-match/dist/esm/index.js
 var balanced = (a, b, str) => {
@@ -37760,7 +37954,7 @@ var transforms_default = {
     type: value,
     filter: isAsset,
     transform: function(token, _, options) {
-      return join4(process?.cwd() ?? "/", options.usesDtcg ? token.$value : token.value);
+      return join5(process?.cwd() ?? "/", options.usesDtcg ? token.$value : token.value);
     }
   },
   /**
@@ -43960,12 +44154,12 @@ var formats_default = formats2;
 var { androidCopyImages, copyAssets } = actions;
 var { silent } = logVerbosityLevels;
 function getAssetDir(config3) {
-  return join4(config3.buildPath ?? "", "android/main/res/drawable-").replace(/\\/g, "/");
+  return join5(config3.buildPath ?? "", "android/main/res/drawable-").replace(/\\/g, "/");
 }
 function getAssetPath(token, imagesDir) {
   const name2 = token.path.slice(2, 4).join("_");
   const dir = `${imagesDir}${token.attributes?.state}`;
-  return { file: join4(dir, `${name2}.png`), dir };
+  return { file: join5(dir, `${name2}.png`), dir };
 }
 var actions_default = {
   /**
@@ -44006,7 +44200,7 @@ var actions_default = {
    */
   [copyAssets]: {
     do: async function(_, config3, _options, vol2 = fs2) {
-      const assetsPath = join4(config3.buildPath ?? "", "assets");
+      const assetsPath = join5(config3.buildPath ?? "", "assets");
       if (config3.log?.verbosity !== silent) {
         console.log(`Copying assets directory to ${assetsPath}`);
       }
@@ -44020,7 +44214,7 @@ var actions_default = {
       );
     },
     undo: async function(_, config3, _options, vol2 = fs2) {
-      const assetsPath = join4(config3.buildPath ?? "", "assets");
+      const assetsPath = join5(config3.buildPath ?? "", "assets");
       if (config3.log?.verbosity !== silent) {
         console.log(`Removing assets directory from ${assetsPath}`);
       }
@@ -47486,11 +47680,11 @@ function getParser4({ startLine = 0, fence = "```", spacing = "compact", markers
 }
 
 // ../../node_modules/.pnpm/comment-parser@1.4.1/node_modules/comment-parser/es6/stringifier/index.js
-function join5(tokens) {
+function join6(tokens) {
   return tokens.start + tokens.delimiter + tokens.postDelimiter + tokens.tag + tokens.postTag + tokens.type + tokens.postType + tokens.name + tokens.postName + tokens.description + tokens.end + tokens.lineEnd;
 }
 function getStringifier() {
-  return (block) => block.source.map(({ tokens }) => join5(tokens)).join("\n");
+  return (block) => block.source.map(({ tokens }) => join6(tokens)).join("\n");
 }
 
 // ../../node_modules/.pnpm/comment-parser@1.4.1/node_modules/comment-parser/es6/stringifier/inspect.js
@@ -49003,74 +49197,27 @@ function validateScaleGeneration(baseColor) {
   }
   return { isValid: true };
 }
-function generateContrastBasedLightness(baseLightness) {
-  const WHITE_L = 1;
-  const BLACK_L = 0;
-  const targetContrasts = {
-    "50": 1.01,
-    // Ultra-subtle (dark mode borders)
-    "100": 1.45,
-    // Subtle (dark mode disabled text)
-    "200": 2.05,
-    // Functional (dark mode secondary UI)
-    "300": 3,
-    // Large text AA minimum
-    "400": 4.54,
-    // Normal text AA (light mode)
-    "500": null,
-    // Crossover - avoid this zone
-    "600": 7,
-    // Normal text AAA
-    "700": 10.86,
-    // High contrast
-    "800": 11.86,
-    // Higher contrast
-    "900": 12.86,
-    // Maximum usable
-    "950": 13.86
-    // Absolute maximum
-  };
+function generateLightnessProgression(baseLightness) {
+  const MAX_LIGHT = 0.95;
+  const MIN_DARK = 0.05;
+  const positions = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  const baseIndex = 6;
   const lightness = {};
-  function lightnessForContrast(targetRatio, _backgroundL, onDark = false) {
-    if (onDark) {
-      const calculatedL2 = targetRatio * 0.05 - 0.05;
-      return Math.max(0.05, Math.min(0.98, calculatedL2));
-    }
-    const calculatedL = 1.05 / targetRatio - 0.05;
-    return Math.max(0.01, Math.min(0.95, calculatedL));
-  }
-  for (const [step, targetRatio] of Object.entries(targetContrasts)) {
-    if (targetRatio === null) {
-      lightness[step] = baseLightness;
-      continue;
-    }
-    let calculatedL;
-    if (Number.parseInt(step, 10) <= 400) {
-      calculatedL = lightnessForContrast(targetRatio, BLACK_L, true);
-      const stepNum = Number.parseInt(step, 10);
-      if (stepNum === 50)
-        calculatedL = 0.98;
-      else if (stepNum === 100)
-        calculatedL = 0.95;
-      else if (stepNum === 200)
-        calculatedL = 0.9;
-      else if (stepNum === 300)
-        calculatedL = 0.8;
-      else if (stepNum === 400) calculatedL = 0.7;
-    } else {
-      calculatedL = lightnessForContrast(targetRatio, WHITE_L, false);
-      const stepNum = Number.parseInt(step, 10);
-      if (stepNum === 600)
-        calculatedL = 0.4;
-      else if (stepNum === 700)
-        calculatedL = 0.25;
-      else if (stepNum === 800)
-        calculatedL = 0.15;
-      else if (stepNum === 900)
-        calculatedL = 0.08;
-      else if (stepNum === 950) calculatedL = 0.04;
-    }
-    lightness[step] = Math.max(5e-3, Math.min(0.98, calculatedL));
+  for (let i = 0; i < baseIndex; i++) {
+    const stepsFromBase = baseIndex - i;
+    const totalLighterSteps = baseIndex;
+    const t2 = (stepsFromBase / totalLighterSteps) ** 0.8;
+    const calculatedL = baseLightness + (MAX_LIGHT - baseLightness) * t2;
+    lightness[positions[i].toString()] = Math.min(MAX_LIGHT, calculatedL);
+  }
+  lightness["600"] = baseLightness;
+  for (let i = baseIndex + 1; i < positions.length; i++) {
+    const stepsFromBase = i - baseIndex;
+    const totalDarkerSteps = positions.length - 1 - baseIndex;
+    const t2 = stepsFromBase / totalDarkerSteps;
+    const darkenAmount = (baseLightness - MIN_DARK) * t2;
+    const calculatedL = Math.max(MIN_DARK, baseLightness - darkenAmount);
+    lightness[positions[i].toString()] = calculatedL;
   }
   return lightness;
 }
@@ -49080,25 +49227,18 @@ function generateOKLCHScale(baseColor) {
     const adjustedColor = validation.suggestedLightness ? { ...baseColor, l: validation.suggestedLightness } : baseColor;
     return generateOKLCHScale(adjustedColor);
   }
-  const lightnessSteps = generateContrastBasedLightness(baseColor.l);
+  const lightnessSteps = generateLightnessProgression(baseColor.l);
   const scale2 = {};
   for (const [step, lightness] of Object.entries(lightnessSteps)) {
     let adjustedChroma = baseColor.c;
     if (lightness > 0.9) {
-      adjustedChroma *= 0.15;
-    } else if (lightness > 0.8) {
-      adjustedChroma *= 0.25;
-    } else if (lightness > 0.6) {
-      adjustedChroma *= 0.7;
+      adjustedChroma *= 0.3;
     } else if (lightness < 0.15) {
-      adjustedChroma *= 0.8;
-    } else if (lightness < 0.3) {
-      adjustedChroma *= 0.9;
+      adjustedChroma *= 0.6;
     }
     scale2[step] = roundOKLCH({
       l: lightness,
-      c: Math.max(0.01, adjustedChroma),
-      // Ensure minimum chroma
+      c: adjustedChroma,
       h: baseColor.h,
       alpha: baseColor.alpha
     });
@@ -50844,14 +50984,14 @@ function buildColorSystem(options = {}) {
 }
 
 // ../design-tokens/src/persistence/node-adapter.ts
-import { mkdir as mkdir2, readdir as readdir2, readFile as readFile3, writeFile as writeFile2 } from "fs/promises";
-import { join as join6 } from "path";
+import { mkdir as mkdir2, readdir as readdir2, readFile as readFile4, writeFile as writeFile2 } from "fs/promises";
+import { join as join7 } from "path";
 var SCHEMA_URL = "https://rafters.studio/schemas/namespace-tokens.json";
 var VERSION = "1.0.0";
 var NodePersistenceAdapter = class {
   tokensDir;
   constructor(projectRoot) {
-    this.tokensDir = join6(projectRoot, ".rafters", "tokens");
+    this.tokensDir = join7(projectRoot, ".rafters", "tokens");
   }
   async load() {
     let files;
@@ -50863,7 +51003,7 @@ var NodePersistenceAdapter = class {
     const allTokens = [];
     for (const file2 of files) {
       if (!file2.endsWith(".rafters.json")) continue;
-      const content = await readFile3(join6(this.tokensDir, file2), "utf-8");
+      const content = await readFile4(join7(this.tokensDir, file2), "utf-8");
       const data = NamespaceFileSchema.parse(JSON.parse(content));
       allTokens.push(...data.tokens);
     }
@@ -50891,7 +51031,7 @@ var NodePersistenceAdapter = class {
       };
       NamespaceFileSchema.parse(data);
       await writeFile2(
-        join6(this.tokensDir, `${namespace}.rafters.json`),
+        join7(this.tokensDir, `${namespace}.rafters.json`),
         JSON.stringify(data, null, 2)
       );
     }
@@ -50900,7 +51040,7 @@ var NodePersistenceAdapter = class {
 
 // ../design-tokens/src/rule-engine.ts
 import { promises as fs3 } from "fs";
-import { join as join7 } from "path";
+import { join as join8 } from "path";
 var RuleResultSchema = external_exports.union([
   external_exports.string(),
   external_exports.object({
@@ -50915,136 +51055,6 @@ var RuleContextSchema = external_exports.object({
   // Functions validated at runtime
 });
 
-// src/utils/detect.ts
-import { existsSync as existsSync2 } from "fs";
-import { readFile as readFile4 } from "fs/promises";
-import { join as join8 } from "path";
-var CONFIG_FILE_FRAMEWORKS = [
-  { files: ["astro.config.mjs", "astro.config.ts", "astro.config.js"], framework: "astro" },
-  { files: ["next.config.mjs", "next.config.ts", "next.config.js"], framework: "next" },
-  { files: ["remix.config.js", "remix.config.ts"], framework: "remix" },
-  { files: ["vite.config.ts", "vite.config.js", "vite.config.mjs"], framework: "vite" }
-];
-async function detectFramework(cwd) {
-  try {
-    const content = await readFile4(join8(cwd, "package.json"), "utf-8");
-    const pkg = JSON.parse(content);
-    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-    if (deps.next) {
-      return "next";
-    }
-    if (deps["react-router"]) {
-      return "react-router";
-    }
-    const hasRemix = Object.keys(deps).some((dep) => dep.startsWith("@remix-run/"));
-    if (hasRemix) {
-      return "remix";
-    }
-    if (deps.astro) {
-      return "astro";
-    }
-    if (deps.vite) {
-      return "vite";
-    }
-  } catch {
-  }
-  return detectFrameworkFromConfigFiles(cwd);
-}
-function detectFrameworkFromConfigFiles(cwd) {
-  for (const { files, framework } of CONFIG_FILE_FRAMEWORKS) {
-    for (const file2 of files) {
-      if (existsSync2(join8(cwd, file2))) {
-        return framework;
-      }
-    }
-  }
-  return "unknown";
-}
-async function detectTailwindVersion(cwd) {
-  try {
-    const content = await readFile4(join8(cwd, "package.json"), "utf-8");
-    const pkg = JSON.parse(content);
-    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
-    const tailwindVersion = deps.tailwindcss;
-    if (!tailwindVersion) {
-      return null;
-    }
-    const versionMatch = tailwindVersion.match(/\d+\.\d+\.\d+/);
-    return versionMatch ? versionMatch[0] : tailwindVersion;
-  } catch {
-    return null;
-  }
-}
-function isTailwindV3(version2) {
-  if (!version2) {
-    return false;
-  }
-  return version2.startsWith("3.");
-}
-async function detectShadcn(cwd) {
-  try {
-    const content = await readFile4(join8(cwd, "components.json"), "utf-8");
-    return JSON.parse(content);
-  } catch {
-    return null;
-  }
-}
-function parseCssVariables(css3) {
-  const light = {};
-  const dark = {};
-  const rootMatch = css3.match(/:root\s*\{([^}]+)\}/);
-  if (rootMatch?.[1]) {
-    parseVariablesIntoColors(rootMatch[1], light);
-  }
-  const darkMatch = css3.match(/\.dark\s*\{([^}]+)\}/);
-  if (darkMatch?.[1]) {
-    parseVariablesIntoColors(darkMatch[1], dark);
-  }
-  return { light, dark };
-}
-function parseVariablesIntoColors(block, colors) {
-  const varMap = {
-    "--background": "background",
-    "--foreground": "foreground",
-    "--card": "card",
-    "--card-foreground": "cardForeground",
-    "--popover": "popover",
-    "--popover-foreground": "popoverForeground",
-    "--primary": "primary",
-    "--primary-foreground": "primaryForeground",
-    "--secondary": "secondary",
-    "--secondary-foreground": "secondaryForeground",
-    "--muted": "muted",
-    "--muted-foreground": "mutedForeground",
-    "--accent": "accent",
-    "--accent-foreground": "accentForeground",
-    "--destructive": "destructive",
-    "--destructive-foreground": "destructiveForeground",
-    "--border": "border",
-    "--input": "input",
-    "--ring": "ring"
-  };
-  for (const [cssVar, colorKey] of Object.entries(varMap)) {
-    const regex = new RegExp(`${cssVar}:\\s*([^;]+);`);
-    const match2 = block.match(regex);
-    if (match2?.[1]) {
-      colors[colorKey] = match2[1].trim();
-    }
-  }
-}
-async function detectProject(cwd) {
-  const [framework, shadcn, tailwindVersion] = await Promise.all([
-    detectFramework(cwd),
-    detectShadcn(cwd),
-    detectTailwindVersion(cwd)
-  ]);
-  return {
-    framework,
-    shadcn,
-    tailwindVersion
-  };
-}
-
 // src/commands/init.ts
 async function backupCss(cssPath) {
   const backupPath = cssPath.replace(/\.css$/, ".backup.css");
@@ -51479,9 +51489,29 @@ async function init(options) {
   } else if (shadcn?.tailwind?.css) {
     detectedCssPath = shadcn.tailwind.css;
   }
+  let componentTarget = frameworkToTarget(framework);
+  if (framework === "astro" && isInteractive() && !isAgentMode2) {
+    const astroHasReact = await hasAstroReact(cwd);
+    if (astroHasReact) {
+      componentTarget = await select({
+        message: "This Astro project has React integration. Install components as:",
+        choices: [
+          {
+            name: "Astro components (zero client JS, server-rendered)",
+            value: "astro"
+          },
+          {
+            name: "React components (client islands with client:load)",
+            value: "react"
+          }
+        ]
+      });
+    }
+  }
   const frameworkPaths = COMPONENT_PATHS[framework] || COMPONENT_PATHS.unknown;
   const config3 = {
     framework,
+    componentTarget,
     componentsPath: frameworkPaths.components,
     primitivesPath: frameworkPaths.primitives,
     compositesPath: frameworkPaths.composites,
@@ -52417,7 +52447,37 @@ Rafters Button, Input, Card, etc. include their own spacing, sizing, and states.
 UTILITIES EXIST FOR EDGE CASES.
 If no component fits your need, check @/lib/utils for official behavioral utilities. Do not invent your own. If nothing exists there either, ask the human.
 
+COLORS ARE TAILWIND CLASSES.
+Write border-l-primary, bg-success, text-info-foreground. Do not create color constants, mapping objects, or reference palette names. Palette families are internal. See quickstart.colorTokens for the full list of semantic tokens and usage examples.
+
 When in doubt: less code, not more. Rafters has already made the design decision.`;
+var CONSUMER_QUICKSTART = {
+  rule1: "Components are pre-styled. Import and render. Do not add className for visual styling -- only for layout context (e.g. border-l-4 for accent). Input knows its focus ring. Label knows its weight. You arrange, you do not style.",
+  rule2: "Colors are Tailwind classes. Write border-l-primary, bg-success, text-info-foreground. Do not create color constants, mapping objects, or reference palette internals.",
+  rule3: "Layout uses Container and Grid presets (sidebar-main, form, cards, row, stack, split). Do not write flex, grid, gap-* directly.",
+  antiPatterns: [
+    "Do NOT reference palette families (silver-true-sky-500, neutral-400). Those are internal.",
+    "Do NOT add className to Input/Label/Select for styling. They handle their own styles.",
+    "Do NOT create wrapper components that add styling to Rafters components.",
+    "Do NOT define focus states, hover states, or error states. Components include these.",
+    "Do NOT create color mapping objects. The Tailwind class name IS the mapping."
+  ],
+  colorTokens: {
+    semantic: [
+      "primary -- Main brand, CTA buttons, links",
+      "secondary -- Less prominent actions",
+      "accent -- Hover highlights, emphasis",
+      "muted -- Subdued backgrounds, disabled text",
+      "destructive -- Delete, remove, errors",
+      "success -- Confirmations, positive feedback",
+      "warning -- Caution, important notices",
+      "info -- Tips, help, neutral information"
+    ],
+    categorical: "chart-1 through chart-5 -- For data viz and categorical distinction (guaranteed harmonious)",
+    structural: "card, popover, border, input, ring -- Surface and boundary tokens",
+    usage: "Use as Tailwind class fragments: bg-primary, text-info-foreground, border-l-success. Each token has a -foreground variant for text on that background."
+  }
+};
 var DESIGN_PATTERNS = {
   "destructive-action": {
     name: "Destructive Action",
@@ -52717,7 +52777,7 @@ var DESIGN_PATTERNS = {
 var TOOL_DEFINITIONS = [
   {
     name: "rafters_vocabulary",
-    description: "Get compact design system vocabulary: color palette names, spacing scale, type scale, and component list with cognitive loads. Use this first to understand what you can compose with.",
+    description: "Get design system vocabulary with consumer quickstart guide. Returns: system rules, onboarding guidance (what to do and what NOT to do), semantic color tokens, spacing scale, type scale, layout presets, and component list. ALWAYS call this first before building with Rafters.",
     inputSchema: {
       type: "object",
       properties: {},
@@ -52829,7 +52889,7 @@ var RaftersToolHandler = class {
   // ==================== Tool 1: Vocabulary ====================
   /**
    * Get compact design system vocabulary
-   * Returns: color palettes, spacing scale, type scale, component list with loads
+   * Returns: system rules, consumer quickstart, color tokens, spacing, type scale, components
    */
   async getVocabulary() {
     try {
@@ -52841,6 +52901,7 @@ var RaftersToolHandler = class {
       ]);
       const vocabulary = {
         system: SYSTEM_PREAMBLE,
+        quickstart: CONSUMER_QUICKSTART,
         components,
         colors,
         spacing,
@@ -52860,16 +52921,19 @@ var RaftersToolHandler = class {
     }
   }
   /**
-   * Extract compact color vocabulary
+   * Extract compact color vocabulary.
+   * Always includes the known semantic token list so consumers get guidance
+   * even when dynamic token loading fails or returns empty.
    */
   async getColorVocabulary() {
+    const knownSemantic = Object.keys(DEFAULT_SEMANTIC_COLOR_MAPPINGS);
     try {
       const tokens = await this.loadNamespace("color");
-      const semantic = [];
+      const dynamicSemantic = [];
       const palettes = /* @__PURE__ */ new Map();
       for (const token of tokens) {
         if (typeof token.value === "object" && "family" in token.value) {
-          semantic.push(token.name);
+          dynamicSemantic.push(token.name);
         } else if (typeof token.value === "object" && "scale" in token.value) {
           const colorValue = token.value;
           palettes.set(
@@ -52878,55 +52942,89 @@ var RaftersToolHandler = class {
           );
         }
       }
+      const allSemantic = [.../* @__PURE__ */ new Set([...knownSemantic, ...dynamicSemantic])];
       return {
-        semantic,
+        semantic: allSemantic,
         palettes: [...palettes.entries()].map(([name2, positions]) => ({
           name: name2,
           positions: [...positions]
-        }))
+        })),
+        usage: "Use as Tailwind classes: bg-primary, text-info-foreground, border-l-success. Palette families are internal -- never reference them in consumer code."
       };
     } catch {
-      return { semantic: [], palettes: [] };
+      return {
+        semantic: knownSemantic,
+        palettes: [],
+        usage: "Use as Tailwind classes: bg-primary, text-info-foreground, border-l-success. Palette families are internal -- never reference them in consumer code."
+      };
     }
   }
   /**
-   * Extract compact spacing vocabulary
+   * Extract compact spacing vocabulary.
+   * Includes static scale names so consumers always get guidance.
    */
   async getSpacingVocabulary() {
     try {
       const tokens = await this.loadNamespace("spacing");
-      const scale2 = {};
+      const scale3 = {};
       for (const token of tokens) {
         if (typeof token.value === "string") {
-          scale2[token.name] = token.value;
+          scale3[token.name] = token.value;
         }
       }
-      return { scale: scale2 };
+      if (Object.keys(scale3).length > 0) {
+        return {
+          scale: scale3,
+          usage: "Container and Grid handle spacing. Do not use gap-*, p-*, m-* directly."
+        };
+      }
     } catch {
-      return { scale: {} };
     }
+    const scale2 = {};
+    for (const [key, multiplier] of Object.entries(DEFAULT_SPACING_MULTIPLIERS)) {
+      scale2[`spacing-${key}`] = `${multiplier * 0.25}rem`;
+    }
+    return {
+      scale: scale2,
+      usage: "Container and Grid handle spacing. Do not use gap-*, p-*, m-* directly."
+    };
   }
   /**
-   * Extract compact typography vocabulary
+   * Extract compact typography vocabulary.
+   * Includes static fallbacks so consumers always get guidance.
    */
   async getTypographyVocabulary() {
     try {
       const tokens = await this.loadNamespace("typography");
-      const sizes = {};
+      const sizes2 = {};
       const weights = /* @__PURE__ */ new Set();
       for (const token of tokens) {
         if (typeof token.value === "string") {
           if (token.name.includes("weight")) {
             weights.add(token.name.replace("-weight", ""));
           } else {
-            sizes[token.name] = token.value;
+            sizes2[token.name] = token.value;
           }
         }
       }
-      return { sizes, weights: [...weights] };
+      if (Object.keys(sizes2).length > 0) {
+        return {
+          sizes: sizes2,
+          weights: [...weights],
+          usage: "Typography components (H1-H4, P, Label) handle sizing. Do not set font sizes directly."
+        };
+      }
     } catch {
-      return { sizes: {}, weights: [] };
     }
+    const sizes = {};
+    for (const name2 of Object.keys(DEFAULT_TYPOGRAPHY_SCALE)) {
+      sizes[`font-size-${name2}`] = name2;
+    }
+    return {
+      sizes,
+      weights: Object.keys(DEFAULT_FONT_WEIGHTS),
+      usage: "Typography components (H1-H4, P, Label) handle sizing. Do not set font sizes directly."
+    };
   }
   /**
    * Load and cache the project's Rafters config from .rafters/config.rafters.json.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rafters",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "CLI for Rafters design system - scaffold tokens and add components",
   "license": "MIT",
   "type": "module",