rafters 0.3.1 → 0.4.0

package/dist/index.js

@@ -20309,6 +20309,11 @@ var MOTION_NAMESPACE_PROPERTY = {
 };
 var MOTION_NAMESPACE_NAMES = Object.keys(MOTION_NAMESPACE_PROPERTY);
 var REDUCED_MOTION_ZEROED = /* @__PURE__ */ new Set(["duration", "delay"]);
+var TAILWIND_THEME_PREFIX = {
+  duration: "transition-duration",
+  ease: "ease",
+  delay: "transition-delay"
+};
 var MOTION_NAMESPACE_TOKEN = new RegExp(`^rafters-(${MOTION_NAMESPACE_NAMES.join("|")})-(.+)$`);
 function motionNamespaceParts(name) {
   const match = MOTION_NAMESPACE_TOKEN.exec(name);
@@ -20565,6 +20570,11 @@ function generateThemeBlock(groups) {
     lines.push(bridgeLines);
     lines.push("");
   }
+  const animationKeys = generateMotionAnimationKeys(groups.motion);
+  if (animationKeys) {
+    lines.push(animationKeys);
+    lines.push("");
+  }
   if (groups.breakpoint.length > 0) {
     for (const token of groups.breakpoint) {
       const value = tokenValueToCSS(token);
@@ -20591,10 +20601,6 @@ function generateThemeBlock(groups) {
     }
     lines.push("");
   }
-  const animationTokens = generateAnimationTokens(groups.motion);
-  if (animationTokens) {
-    lines.push(animationTokens);
-  }
   lines.push("}");
   return lines.join("\n");
 }
@@ -20685,18 +20691,6 @@ function generateKeyframes(motionTokens) {
   }
   return lines.join("\n").trim();
 }
-function generateAnimationTokens(motionTokens) {
-  const animationTokens = motionTokens.filter((t) => t.name.startsWith("motion-animation-"));
-  if (animationTokens.length === 0) {
-    return "";
-  }
-  const lines = [];
-  for (const token of animationTokens) {
-    const animName = token.animationName || token.name.replace("motion-animation-", "");
-    lines.push(`  --animate-${animName}: ${token.value};`);
-  }
-  return lines.join("\n");
-}
 function generateDepthUtilities(depthTokens) {
   if (depthTokens.length === 0) return "";
   const lines = ["/* Depth (z-index) utilities -- words over numbers */"];
@@ -20791,8 +20785,8 @@ function generateMotionUtilities(motionTokens) {
     const className = token.name.replace("motion-semantic-", "motion-");
     lines.push(`@utility ${className} {`);
     lines.push(`  transition-property: ${spec.properties.join(", ")};`);
-    lines.push(`  transition-duration: var(--duration-${spec.durationTier});`);
-    lines.push(`  transition-timing-function: var(--ease-${spec.curve});`);
+    lines.push(`  transition-duration: var(--rafters-duration-${spec.durationTier});`);
+    lines.push(`  transition-timing-function: var(--rafters-ease-${spec.curve});`);
     if (spec.reducedMotion) {
       lines.push("  @media (prefers-reduced-motion: reduce) {");
       lines.push(`    transition-property: ${spec.reducedMotion.properties.join(", ")};`);
@@ -20848,7 +20842,7 @@ function parseCellSpec(tokenName, raw) {
     `tailwind exporter: motion cell token "${tokenName}" has an unrecognized duration.kind ${JSON.stringify(kind ?? null)}. Known duration.kind values: period, tier.`
   );
 }
-function generateMotionCellUtilities(motionTokens) {
+function generateMotionAnimationKeys(motionTokens) {
   const cellTokens = motionTokens.filter((t) => t.name.startsWith("motion-cell-"));
   if (cellTokens.length === 0) return "";
   const periodMembers = /* @__PURE__ */ new Set();
@@ -20856,38 +20850,38 @@ function generateMotionCellUtilities(motionTokens) {
     const parts = motionNamespaceParts(token.name);
     if (parts?.namespace === "period") periodMembers.add(parts.member);
   }
-  const lines = [
-    "/* Motion cells -- one utility per animated (component, part, transition) */"
-  ];
+  const keys = /* @__PURE__ */ new Map();
   for (const token of cellTokens) {
     if (typeof token.value !== "string") continue;
     const spec = parseCellSpec(token.name, token.value);
-    lines.push(`@utility ${token.name.replace("motion-cell-", "animate-")} {`);
     if (spec === null) {
-      lines.push(`  animation: ${token.value};`);
-    } else if (spec.duration.kind === "period") {
+      keys.set(token.name.replace("motion-cell-", ""), token.value);
+      continue;
+    }
+    if (spec.duration.kind === "period") {
       const { period } = spec.duration;
       if (!periodMembers.has(period)) {
         throw new Error(
           `tailwind exporter: motion cell token "${token.name}" references unknown period "${period}". Known periods: ${[...periodMembers].sort().join(", ")}.`
         );
       }
-      lines.push(`  animation-name: ${spec.keyframe};`);
-      lines.push(`  animation-duration: var(--rafters-period-${period});`);
-      lines.push("  animation-iteration-count: infinite;");
-    } else {
-      lines.push(`  animation-name: ${spec.keyframe};`);
-      lines.push(`  animation-duration: var(--rafters-duration-${spec.duration.tier});`);
-      lines.push(`  animation-timing-function: var(--rafters-ease-${spec.curve});`);
-    }
-    if (token.reducedMotionAware !== false) {
-      lines.push("  @media (prefers-reduced-motion: reduce) {");
-      lines.push("    animation-duration: 0s;");
-      lines.push("  }");
+      keys.set(
+        `${spec.keyframe}-${period}`,
+        `${spec.keyframe} var(--rafters-period-${period}) infinite`
+      );
+      continue;
     }
-    lines.push("}");
+    const { tier } = spec.duration;
+    keys.set(
+      `${spec.keyframe}-${tier}-${spec.curve}`,
+      `${spec.keyframe} var(--rafters-duration-${tier}) var(--rafters-ease-${spec.curve})`
+    );
   }
-  return lines.join("\n");
+  if (keys.size === 0) return "";
+  return [
+    "  /* Motion assignments -- one key per distinct (shape, tier, curve) */",
+    ...[...keys].map(([name, value]) => `  --animate-${name}: ${value};`)
+  ].join("\n");
 }
 function generateMotionNamespaceVars(motionTokens) {
   const lines = [];
@@ -20903,35 +20897,45 @@ function generateMotionNamespaceVars(motionTokens) {
     ...lines
   ].join("\n");
 }
+function generateReducedMotionLaw(motionTokens) {
+  const lines = [];
+  for (const token of motionTokens) {
+    const parts = motionNamespaceParts(token.name);
+    if (!parts || !REDUCED_MOTION_ZEROED.has(parts.namespace)) continue;
+    lines.push(`    --${token.name}: 0ms;`);
+  }
+  if (lines.length === 0) return "";
+  return [
+    "/* Reduced motion is law: every duration and delay is zero, loops are not. */",
+    "@media (prefers-reduced-motion: reduce) {",
+    "  :root {",
+    ...lines,
+    "  }",
+    "}"
+  ].join("\n");
+}
 function generateMotionBridgeVars(motionTokens) {
   const lines = [];
   for (const token of motionTokens) {
-    if (token.name.startsWith("motion-duration-") && token.name !== "motion-duration-base") {
-      const key = token.name.replace("motion-duration-", "");
-      lines.push(`  --duration-${key}: var(--rafters-duration-${key});`);
-    }
-    if (token.name.startsWith("motion-easing-")) {
-      const key = token.name.replace("motion-easing-", "");
-      lines.push(`  --ease-${key}: var(--rafters-ease-${key});`);
-    }
+    const parts = motionNamespaceParts(token.name);
+    if (!parts) continue;
+    const themePrefix = TAILWIND_THEME_PREFIX[parts.namespace];
+    if (!themePrefix) continue;
+    lines.push(`  --${themePrefix}-${parts.member}: var(--${token.name});`);
   }
   return lines.join("\n");
 }
 function generateMotionNamespaceUtilities(motionTokens) {
-  const lines = ["/* The five motion namespaces -- one utility per member */"];
+  const lines = ["/* Motion namespaces Tailwind has no theme key for */"];
   let emitted = 0;
   for (const token of motionTokens) {
     const parts = motionNamespaceParts(token.name);
     if (!parts) continue;
+    if (TAILWIND_THEME_PREFIX[parts.namespace]) continue;
     const property = MOTION_NAMESPACE_PROPERTY[parts.namespace];
     emitted++;
     lines.push(`@utility ${parts.namespace}-${parts.member} {`);
     lines.push(`  ${property}: var(--${token.name});`);
-    if (REDUCED_MOTION_ZEROED.has(parts.namespace)) {
-      lines.push("  @media (prefers-reduced-motion: reduce) {");
-      lines.push(`    ${property}: 0ms;`);
-      lines.push("  }");
-    }
     lines.push("}");
   }
   return emitted === 0 ? "" : lines.join("\n");
@@ -21001,6 +21005,11 @@ function tokensToTailwind(tokens, options = {}, typographyOverrides = []) {
   if (keyframes) {
     sections.push(keyframes);
   }
+  const reducedMotionLaw = generateReducedMotionLaw(groups.motion);
+  if (reducedMotionLaw) {
+    sections.push("");
+    sections.push(reducedMotionLaw);
+  }
   const typographyThemeInline = generateTypographyCompositeThemeInline(
     groups["typography-composite"]
   );
@@ -21028,11 +21037,6 @@ function tokensToTailwind(tokens, options = {}, typographyOverrides = []) {
     sections.push("");
     sections.push(motionUtilities);
   }
-  const cellUtilities = generateMotionCellUtilities(groups.motion);
-  if (cellUtilities) {
-    sections.push("");
-    sections.push(cellUtilities);
-  }
   const overrideCSS = generateTypographyOverrideCSS(typographyOverrides);
   if (overrideCSS) {
     sections.push("");
@@ -22294,6 +22298,28 @@ var DEFAULT_KEYFRAME_DEFINITIONS = {
     meaning: "Scale down while fading out",
     contexts: ["modal-exit", "popover-close"]
   },
+  "grow-in": {
+    // scaleY, not a uniform scale -- a bar growing from the baseline to its
+    // full height is STRUCTURAL geometry (fixed, like the accordion
+    // chevron's 180deg rotation), not a pop: no opacity, no other numeric.
+    // The transform-origin anchoring the growth at the bottom (the
+    // value-axis baseline) is the caller-set `transform-origin`
+    // (bar-chart.behavior.ts's `transformOriginFor`), not this keyframe --
+    // this declares only the scaleY 0 -> 1 extent.
+    css: () => "from { transform: scaleY(0); } to { transform: scaleY(1); }",
+    meaning: "Grow from zero to full height, anchored at the baseline (caller-set transform-origin)",
+    contexts: ["bar-chart", "value-display"]
+  },
+  "grow-in-x": {
+    // The horizontal-layout counterpart of grow-in: scaleX, not scaleY --
+    // `layout: 'horizontal'` swaps computeBars' value axis from y to x
+    // (bar-chart.behavior.ts), so the structural growth axis swaps with it.
+    // Same rationale as grow-in: no opacity, no other numeric, transform-
+    // origin is caller-set (transformOriginFor).
+    css: () => "from { transform: scaleX(0); } to { transform: scaleX(1); }",
+    meaning: "Grow from zero to full width, anchored at the baseline (caller-set transform-origin)",
+    contexts: ["bar-chart", "value-display"]
+  },
   spin: {
     css: () => "from { transform: rotate(0deg); } to { transform: rotate(360deg); }",
     meaning: "Continuous rotation",
@@ -22739,6 +22765,38 @@ var DEFAULT_MOTION_CELL_ANIMATIONS = {
     meaning: "The incoming tab panel as the selection moves: the calendar month-change moment on a panel instead of a grid, one tier quicker because a panel swap covers no distance.",
     contexts: ["tabs", "panel", "crossfade"]
   },
+  "bar-chart-bar-enter": {
+    keyframe: "grow-in",
+    duration: { kind: "tier", tier: "normal" },
+    curve: "enter",
+    cell: { component: "bar-chart", part: "bar", transition: "enter" },
+    meaning: "A bar arriving: grows from zero at the value-axis baseline (bar-chart.behavior.ts sets the transform-origin), on the arrival curve. Vertical layout, the default -- see bar-chart-bar-enter-x for the horizontal counterpart.",
+    contexts: ["bar-chart", "chart", "value-display"]
+  },
+  "bar-chart-bar-enter-x": {
+    keyframe: "grow-in-x",
+    duration: { kind: "tier", tier: "normal" },
+    curve: "enter",
+    cell: { component: "bar-chart", part: "bar", transition: "enter-horizontal" },
+    meaning: 'A bar arriving under layout: "horizontal": grows from zero at the value-axis baseline, now the left edge (bar-chart.behavior.ts sets the transform-origin), on the same arrival curve as the vertical bar-chart-bar-enter cell -- only the transform property (scaleX, not scaleY) changes with the swapped axis.',
+    contexts: ["bar-chart", "chart", "value-display"]
+  },
+  "area-chart-area-enter": {
+    keyframe: "fade-in",
+    duration: { kind: "tier", tier: "moderate" },
+    curve: "enter",
+    cell: { component: "area-chart", part: "area", transition: "enter" },
+    meaning: "A filled area arriving on mount: fade, not scale -- unlike bar-chart-bar-enter, a stacked area series has no single baseline edge to grow from (its baseline is the previous series own top curve, area-chart.behavior.ts computeAreas), so opacity is the one property every area shares whether overlaid or stacked.",
+    contexts: ["area-chart", "chart", "value-display"]
+  },
+  "line-chart-line-enter": {
+    keyframe: "fade-in",
+    duration: { kind: "tier", tier: "moderate" },
+    curve: "enter",
+    cell: { component: "line-chart", part: "line", transition: "enter" },
+    meaning: "A line series arriving on mount: fades in rather than snapping into place. The matrix assigns opacity over a stroke-dashoffset reveal for this cell -- a dashoffset keyframe needs a per-instance path-length value nothing here names, where a fade needs none.",
+    contexts: ["line-chart", "chart", "value-display"]
+  },
   // ------------------------------------------------------------- load / appearance
   "avatar-image-load": {
     keyframe: "fade-in",
@@ -29639,6 +29697,21 @@ async function installWithPackageManager(packageManager, dependencies, options)
 
 // src/utils/install-registry-deps.ts
 var RAFTERS_SCOPE_PREFIX = "@rafters/";
+var PLACEHOLDER_DEPENDENCY_NAMES = /* @__PURE__ */ new Set(["none", "n/a"]);
+function isPlaceholderDependencyName(name) {
+  const normalized = name.trim().toLowerCase();
+  return normalized === "" || PLACEHOLDER_DEPENDENCY_NAMES.has(normalized);
+}
+var PlaceholderDependencyError = class extends Error {
+  constructor(itemName, dependency) {
+    super(
+      `Registry item "${itemName}" declares dependency "${dependency}", which is not a real npm package name -- it looks like a placeholder left in the manifest. Refusing to install it.`
+    );
+    this.itemName = itemName;
+    this.dependency = dependency;
+    this.name = "PlaceholderDependencyError";
+  }
+};
 var REACT_RUNTIME_PACKAGES = /* @__PURE__ */ new Set(["react", "react-dom", "@types/react", "@types/react-dom"]);
 function parseDependency(dep) {
   const trimmed = dep.trim();
@@ -29685,6 +29758,16 @@ async function installRegistryDependencies(items, targetDir, options = {}) {
     devInstalled: [],
     failed: []
   };
+  for (const item of items) {
+    for (const file2 of item.files) {
+      for (const dep of file2.dependencies) {
+        const { name } = parseDependency(dep);
+        if (isPlaceholderDependencyName(name)) {
+          throw new PlaceholderDependencyError(item.name, dep);
+        }
+      }
+    }
+  }
   const allDeps = new Set(items.flatMap((item) => item.files.flatMap((file2) => file2.dependencies)));
   if (allDeps.size === 0) {
     return result;
@@ -30464,13 +30547,23 @@ async function add(componentArgs, options) {
       target
     });
   } catch (err) {
-    const message = err instanceof Error ? err.message : String(err);
-    log({
-      event: "add:deps:install-failed",
-      message: `Failed to process dependencies: ${message}`,
-      dependencies: [],
-      suggestion: "Check package.json and try installing dependencies manually."
-    });
+    if (err instanceof PlaceholderDependencyError) {
+      log({
+        event: "add:deps:install-failed",
+        message: err.message,
+        dependencies: [],
+        suggestion: "This is a registry defect, not a local problem -- do not install it manually."
+      });
+      process.exitCode = 1;
+    } else {
+      const message = err instanceof Error ? err.message : String(err);
+      log({
+        event: "add:deps:install-failed",
+        message: `Failed to process dependencies: ${message}`,
+        dependencies: [],
+        suggestion: "Check package.json and try installing dependencies manually."
+      });
+    }
   }
   if (depsResult.installed.length > 0 || depsResult.skipped.length > 0) {
     log({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rafters",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Design Intelligence CLI. Scaffold tokens, import existing shadcn/Tailwind v4 sources, add components, and serve an MCP server so AI agents read decisions instead of guessing.",
   "homepage": "https://rafters.studio",
   "license": "MIT",