rafters 0.0.31 → 0.0.33

package/dist/index.js

@@ -13431,30 +13431,33 @@ function transformFileContent(content, config3, fileType = "component") {
   let transformed = content;
   const componentsPath = config3?.componentsPath ?? "components/ui";
   const primitivesPath = config3?.primitivesPath ?? "lib/primitives";
+  const stripSourceRoot = (p2) => p2.replace(/^(src|app)\//, "");
+  const aliasComponents = stripSourceRoot(componentsPath);
+  const aliasPrimitives = stripSourceRoot(primitivesPath);
   transformed = transformed.replace(
     /from\s+['"]\.\.\/\.\.\/primitives\/([^'"]+)['"]/g,
-    `from '@/${primitivesPath}/$1'`
+    `from '@/${aliasPrimitives}/$1'`
   );
   transformed = transformed.replace(
     /from\s+['"]\.\.\/primitives\/([^'"]+)['"]/g,
-    `from '@/${primitivesPath}/$1'`
+    `from '@/${aliasPrimitives}/$1'`
   );
-  const siblingPath = fileType === "primitive" ? primitivesPath : componentsPath;
-  transformed = transformed.replace(/from\s+['"]\.\/([^'"]+)['"]/g, `from '@/${siblingPath}/$1'`);
-  const libPath = dirname(primitivesPath);
+  const aliasSibling = fileType === "primitive" ? aliasPrimitives : aliasComponents;
+  transformed = transformed.replace(/from\s+['"]\.\/([^'"]+)['"]/g, `from '@/${aliasSibling}/$1'`);
+  const aliasLib = stripSourceRoot(dirname(primitivesPath));
   transformed = transformed.replace(
     /from\s+['"]\.\.\/lib\/([^'"]+)['"]/g,
-    `from '@/${libPath}/$1'`
+    `from '@/${aliasLib}/$1'`
   );
-  const componentsMatch = componentsPath.match(/^(.*)components\/ui$/);
-  const hooksPath = componentsMatch ? `${componentsMatch[1]}hooks`.replace(/^\//, "") : "hooks";
+  const componentsMatch = aliasComponents.match(/^(.*)components\/ui$/);
+  const aliasHooks = componentsMatch ? `${componentsMatch[1]}hooks`.replace(/^\//, "") : "hooks";
   transformed = transformed.replace(
     /from\s+['"]\.\.\/hooks\/([^'"]+)['"]/g,
-    `from '@/${hooksPath}/$1'`
+    `from '@/${aliasHooks}/$1'`
   );
   transformed = transformed.replace(
     /from\s+['"]\.\.\/(?!lib\/|hooks\/)([^'"]+)['"]/g,
-    `from '@/${componentsPath}/$1'`
+    `from '@/${aliasComponents}/$1'`
   );
   return transformed;
 }
@@ -46876,7 +46879,7 @@ function generateThemeInlineBlock(semanticTokens) {
   lines.push("}");
   return lines.join("\n");
 }
-function generateRootBlock(semanticTokens) {
+function generateRootBlock(semanticTokens, darkMode = "class") {
   const semanticMappings = getSemanticMappingsFromTokens(semanticTokens);
   const lines = [];
   lines.push(":root {");
@@ -46893,17 +46896,20 @@ function generateRootBlock(semanticTokens) {
   }
   lines.push("}");
   lines.push("");
-  lines.push("@media (prefers-color-scheme: dark) {");
-  lines.push("  :root {");
-  for (const name2 of Object.keys(semanticMappings)) {
-    lines.push(`    --${name2}: var(--rafters-dark-${name2});`);
+  if (darkMode === "class") {
+    lines.push("@custom-variant dark (&:where(.dark, .dark *));");
+    lines.push("");
+    lines.push(".dark {");
+  } else {
+    lines.push("@media (prefers-color-scheme: dark) {");
+    lines.push("  :root {");
   }
-  lines.push("  }");
-  lines.push("}");
-  lines.push("");
-  lines.push(".dark {");
   for (const name2 of Object.keys(semanticMappings)) {
-    lines.push(`  --${name2}: var(--rafters-dark-${name2});`);
+    const indent2 = darkMode === "media" ? "    " : "  ";
+    lines.push(`${indent2}--${name2}: var(--rafters-dark-${name2});`);
+  }
+  if (darkMode === "media") {
+    lines.push("  }");
   }
   lines.push("}");
   lines.push("");
@@ -46924,7 +46930,8 @@ function generateThemeBlock(groups) {
     for (const token of groups.spacing) {
       const value2 = tokenValueToCSS(token);
       if (value2 === null) continue;
-      lines.push(`  --spacing-${token.name}: ${value2};`);
+      const key = token.name.replace(/^spacing-/, "");
+      lines.push(`  --spacing-${key}: ${value2};`);
     }
     lines.push("");
   }
@@ -46943,7 +46950,8 @@ function generateThemeBlock(groups) {
     for (const token of groups.radius) {
       const value2 = tokenValueToCSS(token);
       if (value2 === null) continue;
-      lines.push(`  --radius-${token.name}: ${value2};`);
+      const key = token.name.replace(/^radius-/, "");
+      lines.push(`  --radius-${key}: ${value2};`);
     }
     lines.push("");
   }
@@ -46951,7 +46959,8 @@ function generateThemeBlock(groups) {
     for (const token of groups.shadow) {
       const value2 = tokenValueToCSS(token);
       if (value2 === null) continue;
-      lines.push(`  --shadow-${token.name}: ${value2};`);
+      const key = token.name.replace(/^shadow-/, "");
+      lines.push(`  --shadow-${key}: ${value2};`);
     }
     lines.push("");
   }
@@ -47126,7 +47135,7 @@ function tokensToTailwind(tokens, options = {}) {
   const themeInlineBlock = generateThemeInlineBlock(groups.semantic);
   sections.push(themeInlineBlock);
   sections.push("");
-  const rootBlock = generateRootBlock(groups.semantic);
+  const rootBlock = generateRootBlock(groups.semantic, options.darkMode ?? "class");
   sections.push(rootBlock);
   sections.push("");
   const keyframes = generateKeyframes(groups.motion);
@@ -58443,10 +58452,10 @@ async function ensureTailwindCli(cwd) {
     );
   }
 }
-async function generateOutputs(cwd, paths, registry2, exports, shadcn) {
+async function generateOutputs(cwd, paths, registry2, exports, shadcn, darkMode = "class") {
   const outputs = [];
   if (exports.tailwind) {
-    const tailwindCss = registryToTailwind(registry2, { includeImport: !shadcn });
+    const tailwindCss = registryToTailwind(registry2, { includeImport: !shadcn, darkMode });
     await writeFile3(join9(paths.output, "rafters.css"), tailwindCss);
     outputs.push("rafters.css");
   }
@@ -58631,6 +58640,91 @@ async function resetToDefaults(cwd, paths, shadcn, isAgentMode2, framework) {
     path: paths.output
   });
 }
+async function writeRaftersSkill(cwd) {
+  const skillDir = join9(cwd, ".claude", "skills", "rafters-frontend");
+  await mkdir3(skillDir, { recursive: true });
+  const skill = `---
+name: rafters-frontend
+description: Use when building frontend UI in a Rafters project -- enforces Container, Grid, typography components, and design token usage.
+---
+
+## Layout Is Solved
+
+Container and Grid handle ALL layout. You do not write layout code.
+
+\`\`\`tsx
+// WRONG
+<div className={classy("flex gap-4 p-6")}>
+
+// RIGHT
+<Container>
+  <Grid preset="sidebar-main">
+    <aside>Sidebar</aside>
+    <main>Content</main>
+  </Grid>
+</Container>
+\`\`\`
+
+**Never use:** flex, grid, gap-*, p-*, m-*, items-*, justify-*
+
+### Grid Presets
+
+| Preset | Use for |
+|---|---|
+| sidebar-main | Navigation + content |
+| form | Label/input pairs |
+| cards | Responsive card grid |
+| row | Horizontal group |
+| stack | Vertical sequence |
+| split | Equal columns |
+
+## Typography -- Components, Not Utilities
+
+| Instead of | Use |
+|---|---|
+| \`<p className="text-sm text-muted-foreground">\` | \`<Muted>\` |
+| \`<p>\` | \`<P>\` |
+| \`<h1 className="text-4xl font-bold">\` | \`<H1>\` |
+| \`<h2>\` | \`<H2>\` |
+| \`<h3>\` | \`<H3>\` |
+| \`<span className="text-xs">\` | \`<Small>\` |
+| \`<span className="text-lg font-semibold">\` | \`<Large>\` |
+
+## Color -- Tokens, Not Values
+
+Use semantic tokens as Tailwind classes: \`bg-primary\`, \`text-destructive\`, \`border-success\`.
+Never use hex, HSL, or palette internals.
+
+## A Correct Page
+
+\`\`\`tsx
+import { Container, Grid } from "@rafters/ui"
+import { H1, Lead } from "@rafters/ui/components/ui/typography"
+import { Card } from "@rafters/ui/components/ui/card"
+import { Button } from "@rafters/ui/components/ui/button"
+
+export default function Page() {
+  return (
+    <Container>
+      <H1>Title</H1>
+      <Lead>Description.</Lead>
+      <Grid preset="cards">
+        <Card>...</Card>
+        <Card>...</Card>
+      </Grid>
+      <Grid preset="row">
+        <Button variant="secondary">Cancel</Button>
+        <Button>Save</Button>
+      </Grid>
+    </Container>
+  )
+}
+\`\`\`
+
+No flex. No gap. No padding. No text utilities.
+`;
+  await writeFile3(join9(skillDir, "SKILL.md"), skill);
+}
 async function init(options) {
   setAgentMode(options.agent ?? false);
   const isAgentMode2 = options.agent ?? false;
@@ -58750,6 +58844,7 @@ async function init(options) {
     }
   };
   await writeFile3(paths.config, JSON.stringify(config3, null, 2));
+  await writeRaftersSkill(cwd);
   const existingCssPath = detectedCssPath ?? (shadcn?.tailwind?.css || null);
   if (existingCssPath) {
     try {
@@ -60975,7 +61070,8 @@ var RaftersToolHandler = class _RaftersToolHandler {
     const shadcn = config3?.shadcn ?? false;
     await mkdir4(paths.output, { recursive: true });
     if (exports.tailwind) {
-      const css3 = registryToTailwind(registry2, { includeImport: !shadcn });
+      const darkMode = config3?.darkMode ?? "class";
+      const css3 = registryToTailwind(registry2, { includeImport: !shadcn, darkMode });
       await writeFile4(join10(paths.output, "rafters.css"), css3);
     }
     if (exports.typescript) {

package/package.json

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