rafters 0.0.30 → 0.0.32

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("");
@@ -47126,7 +47132,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);
@@ -57654,11 +57660,13 @@ function generateRadiusTokens(config3, radiusDefs) {
     } else if (def.step === "full") {
       value2 = "9999px";
       mathRelationship = "infinite (9999px)";
+    } else if (def.step === 0) {
+      value2 = "var(--rafters-radius-base)";
+      mathRelationship = `${baseRadiusRem}rem (base)`;
     } else {
-      const computedPx = Math.round(progression.compute(baseRadius, def.step) * 100) / 100;
-      const computedRem = Math.round(computedPx / 16 * 100) / 100;
-      value2 = `${computedRem}rem`;
-      mathRelationship = def.step === 0 ? `${baseRadiusRem}rem (base)` : `${baseRadiusRem} \xD7 ${progression.ratio}^${def.step}`;
+      const multiplier = Math.round(progression.ratio ** def.step * 1e3) / 1e3;
+      value2 = `calc(var(--rafters-radius-base) * ${multiplier})`;
+      mathRelationship = `base \xD7 ${progression.ratio}^${def.step} (\xD7${multiplier})`;
     }
     tokens.push({
       name: scale3 === "DEFAULT" ? "radius" : `radius-${scale3}`,
@@ -57910,9 +57918,10 @@ function generateSpacingTokens(config3, spacingMultipliers) {
       usageContext = ["hero-spacing", "page-margins", "major-sections"];
     }
     const remValue = value2 / 16;
+    const cssValue = multiplier === 0 ? "0" : multiplier === 1 ? "var(--rafters-spacing-base)" : `calc(var(--rafters-spacing-base) * ${multiplier})`;
     tokens.push({
       name: `spacing-${scale3}`,
-      value: value2 === 0 ? "0" : `${remValue}rem`,
+      value: cssValue,
       category: "spacing",
       namespace: "spacing",
       semanticMeaning: meaning,
@@ -58440,10 +58449,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");
   }
@@ -58628,6 +58637,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;
@@ -58747,6 +58841,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 {
@@ -60972,7 +61067,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.30",
+  "version": "0.0.32",
   "description": "CLI for Rafters design system - scaffold tokens and add components",
   "license": "MIT",
   "type": "module",