rafters 0.0.12 → 0.0.14

package/dist/index.js

@@ -13290,7 +13290,7 @@ function transformPath(registryPath, config3) {
 function fileExists(cwd, relativePath) {
   return existsSync(join3(cwd, relativePath));
 }
-function transformFileContent(content, config3) {
+function transformFileContent(content, config3, fileType = "component") {
   let transformed = content;
   const componentsPath = config3?.componentsPath ?? "components/ui";
   const primitivesPath = config3?.primitivesPath ?? "lib/primitives";
@@ -13302,10 +13302,8 @@ function transformFileContent(content, config3) {
     /from\s+['"]\.\.\/primitives\/([^'"]+)['"]/g,
     `from '@/${primitivesPath}/$1'`
   );
-  transformed = transformed.replace(
-    /from\s+['"]\.\/([^'"]+)['"]/g,
-    `from '@/${componentsPath}/$1'`
-  );
+  const siblingPath = fileType === "primitive" ? primitivesPath : componentsPath;
+  transformed = transformed.replace(/from\s+['"]\.\/([^'"]+)['"]/g, `from '@/${siblingPath}/$1'`);
   const libPath = dirname(primitivesPath);
   transformed = transformed.replace(
     /from\s+['"]\.\.\/lib\/([^'"]+)['"]/g,
@@ -13342,7 +13340,8 @@ async function installItem(cwd, item, options, config3) {
       }
     }
     await mkdir(dirname(targetPath), { recursive: true });
-    const transformedContent = transformFileContent(file2.content, config3);
+    const fileType = item.type === "primitive" ? "primitive" : "component";
+    const transformedContent = transformFileContent(file2.content, config3, fileType);
     await writeFile(targetPath, transformedContent, "utf-8");
     installedFiles.push(projectPath);
   }
@@ -24715,7 +24714,7 @@ var require_volume = __commonJS({
     var Dir_1 = require_Dir();
     var resolveCrossPlatform = pathModule.resolve;
     var { O_RDONLY, O_WRONLY, O_RDWR, O_CREAT, O_EXCL, O_TRUNC, O_APPEND, O_DIRECTORY, O_SYMLINK, F_OK, COPYFILE_EXCL, COPYFILE_FICLONE_FORCE } = constants_1.constants;
-    var { sep: sep2, relative: relative2, join: join12, dirname: dirname4 } = pathModule.posix ? pathModule.posix : pathModule;
+    var { sep: sep2, relative: relative3, join: join12, dirname: dirname4 } = pathModule.posix ? pathModule.posix : pathModule;
     var kMinPoolSpace = 128;
     var EPERM = "EPERM";
     var ENOENT2 = "ENOENT";
@@ -25058,7 +25057,7 @@ var require_volume = __commonJS({
           if (node.isFile()) {
             let filename = child.getPath();
             if (path2)
-              filename = relative2(path2, filename);
+              filename = relative3(path2, filename);
             json3[filename] = asBuffer ? node.getBuffer() : node.getString();
           } else if (node.isDirectory()) {
             this._toJSON(child, json3, path2, asBuffer);
@@ -25066,7 +25065,7 @@ var require_volume = __commonJS({
         }
         let dirPath = link.getPath();
         if (path2)
-          dirPath = relative2(path2, dirPath);
+          dirPath = relative3(path2, dirPath);
         if (dirPath && isEmpty) {
           json3[dirPath] = null;
         }
@@ -26544,7 +26543,7 @@ var require_volume = __commonJS({
           const filepath = link.getPath();
           const node = link.getNode();
           const onNodeChange = () => {
-            let filename = relative2(this._filename, filepath);
+            let filename = relative3(this._filename, filepath);
             if (!filename) {
               filename = this._getName();
             }
@@ -26559,7 +26558,7 @@ var require_volume = __commonJS({
           var _a;
           const node = link.getNode();
           const onLinkChildAdd = (l) => {
-            this.emit("change", "rename", relative2(this._filename, l.getPath()));
+            this.emit("change", "rename", relative3(this._filename, l.getPath()));
             setTimeout(() => {
               watchLinkNodeChanged(l);
               watchLinkChildrenChanged(l);
@@ -26580,7 +26579,7 @@ var require_volume = __commonJS({
               }
             };
             removeLinkNodeListeners(l);
-            this.emit("change", "rename", relative2(this._filename, l.getPath()));
+            this.emit("change", "rename", relative3(this._filename, l.getPath()));
           };
           for (const [name2, childLink] of link.children.entries()) {
             if (childLink && name2 !== "." && name2 !== "..") {
@@ -33680,10 +33679,10 @@ var Ignore = class {
   ignored(p) {
     const fullpath = p.fullpath();
     const fullpaths = `${fullpath}/`;
-    const relative2 = p.relative() || ".";
-    const relatives = `${relative2}/`;
+    const relative3 = p.relative() || ".";
+    const relatives = `${relative3}/`;
     for (const m of this.relative) {
-      if (m.match(relative2) || m.match(relatives))
+      if (m.match(relative3) || m.match(relatives))
         return true;
     }
     for (const m of this.absolute) {
@@ -33694,9 +33693,9 @@ var Ignore = class {
   }
   childrenIgnored(p) {
     const fullpath = p.fullpath() + "/";
-    const relative2 = (p.relative() || ".") + "/";
+    const relative3 = (p.relative() || ".") + "/";
     for (const m of this.relativeChildren) {
-      if (m.match(relative2))
+      if (m.match(relative3))
         return true;
     }
     for (const m of this.absoluteChildren) {
@@ -46629,6 +46628,9 @@ function getSemanticMappingsFromTokens(semanticTokens) {
 function tokenValueToCSS(token) {
   const { value: value2 } = token;
   if (typeof value2 === "string") {
+    if (value2.startsWith("{") || value2.startsWith("[")) {
+      return null;
+    }
     return value2;
   }
   if (typeof value2 === "object" && value2 !== null) {
@@ -46754,6 +46756,7 @@ function generateThemeBlock(groups) {
   if (groups.color.length > 0) {
     for (const token of groups.color) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --color-${token.name}: ${value2};`);
     }
     lines.push("");
@@ -46761,6 +46764,7 @@ function generateThemeBlock(groups) {
   if (groups.spacing.length > 0) {
     for (const token of groups.spacing) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --spacing-${token.name}: ${value2};`);
     }
     lines.push("");
@@ -46768,6 +46772,7 @@ function generateThemeBlock(groups) {
   if (groups.typography.length > 0) {
     for (const token of groups.typography) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --${token.name}: ${value2};`);
       if (token.lineHeight) {
         lines.push(`  --${token.name}--line-height: ${token.lineHeight};`);
@@ -46778,6 +46783,7 @@ function generateThemeBlock(groups) {
   if (groups.radius.length > 0) {
     for (const token of groups.radius) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --radius-${token.name}: ${value2};`);
     }
     lines.push("");
@@ -46785,6 +46791,7 @@ function generateThemeBlock(groups) {
   if (groups.shadow.length > 0) {
     for (const token of groups.shadow) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --shadow-${token.name}: ${value2};`);
     }
     lines.push("");
@@ -46792,6 +46799,7 @@ function generateThemeBlock(groups) {
   if (groups.depth.length > 0) {
     for (const token of groups.depth) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --${token.name}: ${value2};`);
     }
     lines.push("");
@@ -46799,6 +46807,7 @@ function generateThemeBlock(groups) {
   if (groups.motion.length > 0) {
     for (const token of groups.motion) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --${token.name}: ${value2};`);
     }
     lines.push("");
@@ -46806,6 +46815,7 @@ function generateThemeBlock(groups) {
   if (groups.breakpoint.length > 0) {
     for (const token of groups.breakpoint) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --${token.name}: ${value2};`);
     }
     lines.push("");
@@ -46813,6 +46823,7 @@ function generateThemeBlock(groups) {
   if (groups.elevation.length > 0) {
     for (const token of groups.elevation) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --${token.name}: ${value2};`);
     }
     lines.push("");
@@ -46820,6 +46831,7 @@ function generateThemeBlock(groups) {
   if (groups.focus.length > 0) {
     for (const token of groups.focus) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --${token.name}: ${value2};`);
     }
     lines.push("");
@@ -46827,6 +46839,7 @@ function generateThemeBlock(groups) {
   if (groups.other.length > 0) {
     for (const token of groups.other) {
       const value2 = tokenValueToCSS(token);
+      if (value2 === null) continue;
       lines.push(`  --${token.name}: ${value2};`);
     }
     lines.push("");
@@ -47008,6 +47021,9 @@ async function registryToCompiled(registry2, options = {}) {
 function tokenValueToTS(token) {
   const { value: value2 } = token;
   if (typeof value2 === "string") {
+    if (value2.startsWith("{") || value2.startsWith("[")) {
+      return value2;
+    }
     return escapeStringValue(value2);
   }
   if (typeof value2 === "object" && value2 !== null) {
@@ -51494,7 +51510,7 @@ import { CallToolRequestSchema, ListToolsRequestSchema } from "@modelcontextprot
 // src/mcp/tools.ts
 import { existsSync as existsSync4 } from "fs";
 import { readdir as readdir3, readFile as readFile6 } from "fs/promises";
-import { basename, join as join10 } from "path";
+import { basename, join as join10, relative as relative2 } from "path";
 
 // src/mcp/cognitive-load.ts
 var BUDGET_TIERS = {
@@ -52401,7 +52417,53 @@ 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 (silver-true-sky-500, neutral-400, etc). The designer already decided what each token looks like. Palette families are internal -- never use them in consumer code.
+
+SYSTEM COLOR TOKENS (use these as Tailwind class fragments):
+- primary / primary-foreground -- Main brand, CTA buttons, links
+- secondary / secondary-foreground -- Less prominent actions
+- accent / accent-foreground -- Hover highlights, emphasis
+- muted / muted-foreground -- Subdued backgrounds, disabled text
+- destructive / destructive-foreground -- Delete, remove, errors
+- success / success-foreground -- Confirmations, positive feedback
+- warning / warning-foreground -- Caution, important notices
+- info / info-foreground -- Tips, help, neutral information
+- chart-1 through chart-5 -- Categorical distinction (guaranteed harmonious)
+- card / card-foreground -- Card surfaces
+- popover / popover-foreground -- Overlay surfaces
+- border, input, ring -- Structural tokens
+
+For categorical color coding (e.g. field types), use border-l-{token} on a container with bg-card. Example Tailwind classes: "border-l-4 border-l-primary", "border-l-4 border-l-info", "border-l-4 border-l-success".
+
 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",
@@ -52701,7 +52763,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: {},
@@ -52813,7 +52875,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 {
@@ -52825,6 +52887,7 @@ var RaftersToolHandler = class {
       ]);
       const vocabulary = {
         system: SYSTEM_PREAMBLE,
+        quickstart: CONSUMER_QUICKSTART,
         components,
         colors,
         spacing,
@@ -52844,16 +52907,50 @@ 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 = [
+      "primary",
+      "primary-foreground",
+      "secondary",
+      "secondary-foreground",
+      "accent",
+      "accent-foreground",
+      "muted",
+      "muted-foreground",
+      "destructive",
+      "destructive-foreground",
+      "success",
+      "success-foreground",
+      "warning",
+      "warning-foreground",
+      "info",
+      "info-foreground",
+      "card",
+      "card-foreground",
+      "popover",
+      "popover-foreground",
+      "background",
+      "foreground",
+      "border",
+      "input",
+      "ring",
+      "chart-1",
+      "chart-2",
+      "chart-3",
+      "chart-4",
+      "chart-5"
+    ];
     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(
@@ -52862,19 +52959,26 @@ 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 {
@@ -52885,13 +52989,32 @@ var RaftersToolHandler = class {
           scale2[token.name] = token.value;
         }
       }
-      return { scale: scale2 };
+      if (Object.keys(scale2).length > 0) {
+        return {
+          scale: scale2,
+          usage: "Container and Grid handle spacing. Do not use gap-*, p-*, m-* directly."
+        };
+      }
     } catch {
-      return { scale: {} };
     }
+    return {
+      scale: {
+        "spacing-0": "0rem",
+        "spacing-1": "0.25rem",
+        "spacing-2": "0.5rem",
+        "spacing-3": "0.75rem",
+        "spacing-4": "1rem",
+        "spacing-6": "1.5rem",
+        "spacing-8": "2rem",
+        "spacing-12": "3rem",
+        "spacing-16": "4rem"
+      },
+      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 {
@@ -52907,9 +53030,44 @@ var RaftersToolHandler = class {
           }
         }
       }
-      return { sizes, weights: [...weights] };
+      if (Object.keys(sizes).length > 0) {
+        return {
+          sizes,
+          weights: [...weights],
+          usage: "Typography components (H1-H4, P, Label) handle sizing. Do not set font sizes directly."
+        };
+      }
     } catch {
-      return { sizes: {}, weights: [] };
+    }
+    return {
+      sizes: {
+        "font-size-xs": "0.75rem",
+        "font-size-sm": "0.875rem",
+        "font-size-base": "1rem",
+        "font-size-lg": "1.125rem",
+        "font-size-xl": "1.25rem",
+        "font-size-2xl": "1.5rem",
+        "font-size-3xl": "1.875rem",
+        "font-size-4xl": "2.25rem"
+      },
+      weights: ["normal", "medium", "semibold", "bold"],
+      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.
+   * Returns null when no config exists or when it cannot be parsed.
+   */
+  async loadConfig() {
+    try {
+      const paths = getRaftersPaths(this.projectRoot);
+      if (!existsSync4(paths.config)) {
+        return null;
+      }
+      const content = await readFile6(paths.config, "utf-8");
+      return JSON.parse(content);
+    } catch {
+      return null;
     }
   }
   /**
@@ -52918,10 +53076,8 @@ var RaftersToolHandler = class {
   async getComponentVocabulary() {
     let installed = [];
     try {
-      const paths = getRaftersPaths(this.projectRoot);
-      if (existsSync4(paths.config)) {
-        const content = await readFile6(paths.config, "utf-8");
-        const config3 = JSON.parse(content);
+      const config3 = await this.loadConfig();
+      if (config3) {
         installed = config3.installed?.components ?? [];
       }
     } catch {
@@ -52973,17 +53129,22 @@ var RaftersToolHandler = class {
   }
   // ==================== Tool 3: Component ====================
   /**
-   * Get path to UI components directory
+   * Get path to UI components directory.
+   * Reads componentsPath from .rafters/config.rafters.json when available,
+   * falls back to the monorepo layout for local development.
    */
-  getComponentsPath() {
-    const monorepoPath = join10(this.projectRoot, "packages/ui/src/components/ui");
-    return monorepoPath;
+  async getComponentsPath() {
+    const config3 = await this.loadConfig();
+    if (config3?.componentsPath) {
+      return join10(this.projectRoot, config3.componentsPath);
+    }
+    return join10(this.projectRoot, "packages/ui/src/components/ui");
   }
   /**
    * Load component metadata from source file
    */
   async loadComponentMetadata(name2) {
-    const componentsPath = this.getComponentsPath();
+    const componentsPath = await this.getComponentsPath();
     const filePath = join10(componentsPath, `${name2}.tsx`);
     try {
       const source = await readFile6(filePath, "utf-8");
@@ -53002,7 +53163,7 @@ var RaftersToolHandler = class {
         sizes: extractSizes(source),
         dependencies: extractDependencies(source),
         primitives: extractPrimitiveDependencies(source),
-        filePath: `packages/ui/src/components/ui/${name2}.tsx`
+        filePath: relative2(this.projectRoot, join10(componentsPath, `${name2}.tsx`))
       };
       if (hasAnyDeps(jsDocDeps)) {
         metadata.jsDocDependencies = jsDocDeps;
@@ -53094,7 +53255,7 @@ var RaftersToolHandler = class {
     try {
       const metadata = await this.loadComponentMetadata(name2);
       if (!metadata) {
-        const componentsPath = this.getComponentsPath();
+        const componentsPath = await this.getComponentsPath();
         let available = [];
         try {
           const files = await readdir3(componentsPath);

package/package.json

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