rafters 0.0.76 → 0.0.78

package/dist/index.js

@@ -968,12 +968,61 @@ var RADIUS_UTILITIES = [
   "rounded-bl"
 ];
 var STATE_VARIANTS = ["hover", "focus-visible", "focus", "active", "dark"];
+var CONTAINER_LAYOUT_UTILITIES = [
+  "grid-cols",
+  "gap",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "h",
+  "w",
+  "max-w",
+  "flex-row",
+  "flex-col",
+  "flex-col-reverse",
+  "flex-wrap",
+  "items-center",
+  "justify-end",
+  "justify-center",
+  "justify-between",
+  "text-left",
+  "text-center",
+  "text-right",
+  "space-x",
+  "space-y",
+  "mt",
+  "rounded",
+  "rounded-sm",
+  "rounded-md",
+  "rounded-lg"
+];
+function extractThemeBlocks(css) {
+  const blocks = [];
+  const re = /@theme\s*(?:inline\s*)?\{/g;
+  let match;
+  while ((match = re.exec(css)) !== null) {
+    let depth = 1;
+    const start = match.index + match[0].length;
+    for (let i = start; i < css.length; i++) {
+      if (css[i] === "{") depth++;
+      if (css[i] === "}") {
+        depth--;
+        if (depth === 0) {
+          blocks.push(css.slice(start, i));
+          break;
+        }
+      }
+    }
+  }
+  return blocks;
+}
 function deriveCandidates(themeCSS) {
   const themeVarNames = [];
-  const themeBlockRe = /@theme\s*(?:inline\s*)?\{([^}]*)\}/gs;
-  let blockMatch;
-  while ((blockMatch = themeBlockRe.exec(themeCSS)) !== null) {
-    const block = blockMatch[1] ?? "";
+  for (const block of extractThemeBlocks(themeCSS)) {
     const varRe = /--([a-z][a-z0-9-]*)\s*:/g;
     let varMatch;
     while ((varMatch = varRe.exec(block)) !== null) {
@@ -1009,6 +1058,15 @@ function deriveCandidates(themeCSS) {
       candidates.add(`${variant}:${c4}`);
     }
   }
+  const containerSizes = themeVarNames.filter((n2) => n2.startsWith("container-")).map((n2) => n2.slice(10));
+  const layoutCandidates = base.filter(
+    (c4) => CONTAINER_LAYOUT_UTILITIES.some((u) => c4 === u || c4.startsWith(`${u}-`))
+  );
+  for (const size of containerSizes) {
+    for (const c4 of layoutCandidates) {
+      candidates.add(`@${size}:${c4}`);
+    }
+  }
   return [...candidates];
 }
 async function registryToDocumentation(registry2, options = {}) {
@@ -22531,42 +22589,48 @@ var DEFAULT_SHADOW_DEFINITIONS = {
 };
 var DEFAULT_DURATION_DEFINITIONS = {
   instant: {
-    ms: 0,
+    range: [0, 0],
+    default: 0,
     band: "",
     meaning: "No perceptible transition. Cursor changes, text selection, badge counts. Below all perception -- there is nothing to track, so nothing is communicated.",
     contexts: ["disabled-motion", "prefers-reduced-motion", "cursor", "badge-count"],
     motionIntent: "transition"
   },
   micro: {
-    ms: 100,
+    range: [50, 120],
+    default: 100,
     band: "at the instantaneous threshold (Nielsen 0.1s)",
     meaning: "Immediate but visible. Focus rings and press feedback. At the instantaneous threshold -- acknowledgment that input landed, not communication of a change.",
     contexts: ["focus", "press", "micro-feedback"],
     motionIntent: "transition"
   },
   fast: {
-    ms: 150,
+    range: [120, 200],
+    default: 150,
     band: "below the communicative window",
     meaning: "Hover states. The cursor is already there, so the response must match its speed. Below the communicative window -- acknowledgment, not communication.",
     contexts: ["hover", "micro-feedback"],
     motionIntent: "transition"
   },
   moderate: {
-    ms: 250,
+    range: [200, 300],
+    default: 200,
     band: "communicative (~200-300ms)",
     meaning: "Dropdowns, tab switches, small reveals. The communicative window: fast enough to feel responsive, slow enough for the eye to track a trajectory and build a spatial model.",
     contexts: ["dropdowns", "tab-switches", "small-reveals"],
     motionIntent: "transition"
   },
   normal: {
-    ms: 350,
+    range: [300, 400],
+    default: 300,
     band: "communicative, larger movement",
     meaning: "The workhorse -- modal entrances, toggles, standard state transitions. The communicative window for larger movement.",
     contexts: ["modals", "toggles", "state-changes"],
     motionIntent: "enter"
   },
   slow: {
-    ms: 500,
+    range: [400, 500],
+    default: 400,
     band: "at the sluggish boundary",
     meaning: "Sheets, page transitions, large spatial movement where the user needs orientation. At the sluggish boundary -- the ceiling for anything but full-screen spatial transitions.",
     contexts: ["sheets", "page-transitions", "large-spatial-movement"],
@@ -22575,10 +22639,10 @@ var DEFAULT_DURATION_DEFINITIONS = {
 };
 var DEFAULT_EASING_DEFINITIONS = {
   standard: {
-    curve: [0.25, 0.1, 0.25, 1],
-    meaning: "Precision -- arrives exactly where it should, engineered rather than thrown. Decelerates into its final position. General-purpose state transitions and hover.",
+    curve: [0.4, 0, 0.2, 1],
+    meaning: "Precision -- a responsive start that decelerates into place, engineered rather than thrown. The general-purpose workhorse for state transitions and hover: the fast start matches a cursor already on target, where a symmetric ease would drag.",
     contexts: ["state-changes", "hover", "general-purpose"],
-    css: "cubic-bezier(0.25, 0.1, 0.25, 1)"
+    css: "cubic-bezier(0.4, 0, 0.2, 1)"
   },
   enter: {
     curve: [0, 0, 0.2, 1],
@@ -22611,6 +22675,252 @@ var DEFAULT_EASING_DEFINITIONS = {
     css: "cubic-bezier(0.2, 0.8, 0.2, 1)"
   }
 };
+var DEFAULT_KEYFRAME_DEFINITIONS = {
+  "fade-in": {
+    css: () => "from { opacity: 0; } to { opacity: 1; }",
+    meaning: "Fade from transparent to opaque",
+    contexts: ["enter", "appear", "show"]
+  },
+  "fade-out": {
+    css: () => "from { opacity: 1; } to { opacity: 0; }",
+    meaning: "Fade from opaque to transparent",
+    contexts: ["exit", "disappear", "hide"]
+  },
+  "slide-in-from-top": {
+    css: () => "from { transform: translateY(-100%); } to { transform: translateY(0); }",
+    meaning: "Slide in from above",
+    contexts: ["dropdown", "notification", "toast"]
+  },
+  "slide-in-from-bottom": {
+    css: () => "from { transform: translateY(100%); } to { transform: translateY(0); }",
+    meaning: "Slide in from below",
+    contexts: ["sheet", "drawer", "mobile-menu"]
+  },
+  "slide-in-from-left": {
+    css: () => "from { transform: translateX(-100%); } to { transform: translateX(0); }",
+    meaning: "Slide in from left",
+    contexts: ["sidebar", "panel", "drawer"]
+  },
+  "slide-in-from-right": {
+    css: () => "from { transform: translateX(100%); } to { transform: translateX(0); }",
+    meaning: "Slide in from right",
+    contexts: ["sidebar", "panel", "drawer"]
+  },
+  "slide-out-to-top": {
+    css: () => "from { transform: translateY(0); } to { transform: translateY(-100%); }",
+    meaning: "Slide out upward",
+    contexts: ["dropdown-exit", "notification-dismiss"]
+  },
+  "slide-out-to-bottom": {
+    css: () => "from { transform: translateY(0); } to { transform: translateY(100%); }",
+    meaning: "Slide out downward",
+    contexts: ["sheet-exit", "drawer-close"]
+  },
+  "slide-out-to-left": {
+    css: () => "from { transform: translateX(0); } to { transform: translateX(-100%); }",
+    meaning: "Slide out to left",
+    contexts: ["sidebar-close", "panel-exit"]
+  },
+  "slide-out-to-right": {
+    css: () => "from { transform: translateX(0); } to { transform: translateX(100%); }",
+    meaning: "Slide out to right",
+    contexts: ["sidebar-close", "panel-exit"]
+  },
+  "scale-in": {
+    css: (ctx) => `from { transform: scale(${ctx.scaleStart}); opacity: 0; } to { transform: scale(1); opacity: 1; }`,
+    meaning: "Scale up while fading in",
+    contexts: ["modal", "popover", "dialog"]
+  },
+  "scale-out": {
+    css: (ctx) => `from { transform: scale(1); opacity: 1; } to { transform: scale(${ctx.scaleStart}); opacity: 0; }`,
+    meaning: "Scale down while fading out",
+    contexts: ["modal-exit", "popover-close"]
+  },
+  spin: {
+    css: () => "from { transform: rotate(0deg); } to { transform: rotate(360deg); }",
+    meaning: "Continuous rotation",
+    contexts: ["loading", "spinner", "refresh"]
+  },
+  ping: {
+    css: (ctx) => `75%, 100% { transform: scale(${ctx.pingScale}); opacity: 0; }`,
+    meaning: "Expanding pulse that fades out",
+    contexts: ["notification-badge", "attention", "pulse"]
+  },
+  pulse: {
+    css: (ctx) => `0%, 100% { opacity: 1; } 50% { opacity: ${ctx.pulseOpacity}; }`,
+    meaning: "Gentle opacity pulse",
+    contexts: ["skeleton", "loading-placeholder"]
+  },
+  bounce: {
+    // Inline beziers retained deliberately -- see the provenance note above.
+    css: (ctx) => `0%, 100% { transform: translateY(-${ctx.bouncePercent}%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }`,
+    meaning: "Bouncing motion",
+    contexts: ["attention", "scroll-indicator"]
+  },
+  "caret-blink": {
+    css: () => "0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; }",
+    meaning: "Text cursor blinking",
+    contexts: ["input-caret", "text-cursor"]
+  }
+};
+var DEFAULT_ANIMATION_DEFINITIONS = {
+  "fade-in": {
+    keyframe: "fade-in",
+    duration: { tier: "fast" },
+    curve: "enter",
+    meaning: "Fade in animation",
+    contexts: ["enter", "appear"]
+  },
+  "fade-out": {
+    keyframe: "fade-out",
+    duration: { tier: "fast" },
+    curve: "exit",
+    meaning: "Fade out animation",
+    contexts: ["exit", "disappear"]
+  },
+  "slide-in-from-top": {
+    keyframe: "slide-in-from-top",
+    duration: { tier: "normal" },
+    curve: "enter",
+    meaning: "Slide in from top",
+    contexts: ["dropdown", "notification"]
+  },
+  "slide-in-from-bottom": {
+    keyframe: "slide-in-from-bottom",
+    duration: { tier: "normal" },
+    curve: "enter",
+    meaning: "Slide in from bottom",
+    contexts: ["sheet", "drawer"]
+  },
+  "slide-in-from-left": {
+    keyframe: "slide-in-from-left",
+    duration: { tier: "normal" },
+    curve: "enter",
+    meaning: "Slide in from left",
+    contexts: ["sidebar", "panel"]
+  },
+  "slide-in-from-right": {
+    keyframe: "slide-in-from-right",
+    duration: { tier: "normal" },
+    curve: "enter",
+    meaning: "Slide in from right",
+    contexts: ["sidebar", "panel"]
+  },
+  "slide-out-to-top": {
+    keyframe: "slide-out-to-top",
+    duration: { tier: "fast" },
+    curve: "exit",
+    meaning: "Slide out to top",
+    contexts: ["dropdown-exit"]
+  },
+  "slide-out-to-bottom": {
+    keyframe: "slide-out-to-bottom",
+    duration: { tier: "fast" },
+    curve: "exit",
+    meaning: "Slide out to bottom",
+    contexts: ["sheet-exit"]
+  },
+  "slide-out-to-left": {
+    keyframe: "slide-out-to-left",
+    duration: { tier: "fast" },
+    curve: "exit",
+    meaning: "Slide out to left",
+    contexts: ["sidebar-close"]
+  },
+  "slide-out-to-right": {
+    keyframe: "slide-out-to-right",
+    duration: { tier: "fast" },
+    curve: "exit",
+    meaning: "Slide out to right",
+    contexts: ["sidebar-close"]
+  },
+  "scale-in": {
+    keyframe: "scale-in",
+    duration: { tier: "normal" },
+    curve: "spring-snappy",
+    meaning: "Scale in with spring",
+    contexts: ["modal", "popover"]
+  },
+  "scale-out": {
+    keyframe: "scale-out",
+    duration: { tier: "fast" },
+    curve: "exit",
+    meaning: "Scale out",
+    contexts: ["modal-exit"]
+  },
+  spin: {
+    keyframe: "spin",
+    duration: { loopPeriod: "1s" },
+    curve: "linear",
+    iterations: "infinite",
+    meaning: "Continuous spin",
+    contexts: ["loading", "spinner"]
+  },
+  ping: {
+    keyframe: "ping",
+    duration: { loopPeriod: "1s" },
+    curve: "enter",
+    iterations: "infinite",
+    meaning: "Pinging pulse",
+    contexts: ["notification"]
+  },
+  pulse: {
+    keyframe: "pulse",
+    duration: { loopPeriod: "2s" },
+    curve: "standard",
+    iterations: "infinite",
+    meaning: "Gentle pulse",
+    contexts: ["skeleton", "loading"]
+  },
+  bounce: {
+    keyframe: "bounce",
+    duration: { loopPeriod: "1s" },
+    curve: "standard",
+    iterations: "infinite",
+    meaning: "Bouncing",
+    contexts: ["attention"]
+  },
+  "caret-blink": {
+    keyframe: "caret-blink",
+    duration: { loopPeriod: "1.25s" },
+    curve: "enter",
+    iterations: "infinite",
+    meaning: "Caret blinking",
+    contexts: ["input"]
+  }
+};
+var DEFAULT_MOTION_COMPOSITE_PRESETS = {
+  "motion-fade-in": {
+    durationTier: "fast",
+    curve: "enter",
+    meaning: "Fade in animation preset",
+    contexts: ["fade-in", "appear"]
+  },
+  "motion-fade-out": {
+    durationTier: "fast",
+    curve: "exit",
+    meaning: "Fade out animation preset",
+    contexts: ["fade-out", "disappear"]
+  },
+  "motion-slide-in": {
+    durationTier: "normal",
+    curve: "enter",
+    meaning: "Slide in animation preset",
+    contexts: ["slide-in", "panel-enter", "modal-enter"]
+  },
+  "motion-slide-out": {
+    durationTier: "fast",
+    curve: "exit",
+    meaning: "Slide out animation preset",
+    contexts: ["slide-out", "panel-exit", "modal-exit"]
+  },
+  "motion-scale-in": {
+    durationTier: "normal",
+    curve: "spring-snappy",
+    meaning: "Scale in with spring animation",
+    contexts: ["pop-in", "button-press", "emphasis"]
+  }
+};
 var DEFAULT_MOTION_SEMANTIC_MAPPINGS = {
   hover: {
     properties: ["color", "background-color", "border-color"],
@@ -22694,11 +23004,11 @@ var DEFAULT_MOTION_SEMANTIC_MAPPINGS = {
   },
   "sheet-in": {
     properties: ["transform"],
-    durationTier: "slow",
+    durationTier: "normal",
     curve: "spring-smooth",
     reducedMotion: { properties: ["opacity"], ms: 250 },
     category: "enter",
-    sizeReasoning: "A sheet is the largest spatial movement -- slow tier with the physical settle of a smooth spring, because the user must track it into place. Reduced motion becomes a cross-fade.",
+    sizeReasoning: "A sheet is a large spatial movement -- normal tier with the physical settle of a smooth spring, because the user must track it into place. Reduced motion becomes a cross-fade.",
     meaning: "Sheet/drawer entrance.",
     contexts: ["sheet", "drawer", "side-panel"]
   },
@@ -22734,11 +23044,11 @@ var DEFAULT_MOTION_SEMANTIC_MAPPINGS = {
   },
   page: {
     properties: ["opacity", "transform"],
-    durationTier: "slow",
+    durationTier: "normal",
     curve: "spring-smooth",
     reducedMotion: { properties: ["opacity"], ms: 200 },
     category: "enter",
-    sizeReasoning: "A whole-view transition -- slow tier with the physical settle of a smooth spring, because the user reorients across the largest possible distance.",
+    sizeReasoning: "A whole-view transition -- normal tier with the physical settle of a smooth spring, because the user reorients across a large distance.",
     meaning: "Page/route transition.",
     contexts: ["page-transition", "route-change", "view-switch"]
   }
@@ -25365,14 +25675,7 @@ function tryParseUnit(cssValue, registry2 = DEFAULT_UNITS) {
 }
 
 // ../design-tokens/src/generators/motion.ts
-var LEGACY_EASING_REMAP = {
-  linear: "linear",
-  "ease-out": "enter",
-  "ease-in": "exit",
-  "ease-in-out": "standard",
-  spring: "spring-snappy"
-};
-function generateMotionTokens(config2, durationDefs, easingDefs, delayDefs, semanticMappings) {
+function generateMotionTokens(config2, durationDefs, easingDefs, delayDefs, semanticMappings, keyframeDefs, animationDefs, compositePresets) {
   const tokens = [];
   const timestamp = (/* @__PURE__ */ new Date()).toISOString();
   const { baseTransitionDuration, progressionRatio } = config2;
@@ -25387,22 +25690,26 @@ function generateMotionTokens(config2, durationDefs, easingDefs, delayDefs, sema
     semanticMeaning: "Legacy base transition duration. The perceptual duration scale (motion-duration-*) no longer derives from this; retained only as a reference value and delay-progression base.",
     usageContext: ["calculation-reference", "delay-base"],
     progressionSystem: progressionRatio,
-    description: `Base duration (${baseTransitionDuration}ms). Delay tokens use ${progressionRatio} progression (ratio ${ratioVal}); duration tiers are perceptually derived literals.`,
+    description: `Base duration (${baseTransitionDuration}ms). Delay tokens use ${progressionRatio} progression (ratio ${ratioVal}); duration tiers are perceptual RANGES a designer sets within and do not derive from this base.`,
     generatedAt: timestamp,
     containerQueryAware: false,
     reducedMotionAware: true,
     userOverride: null,
     usagePatterns: {
       do: ["Reference as the delay-progression base"],
-      never: ["Assume the perceptual duration tiers derive from this"]
+      never: [
+        "Assume the perceptual duration tiers derive from this -- they are ranges a designer sets within, bounded by perception, not computed from this base"
+      ]
     }
   });
   for (const scale2 of MOTION_DURATION_SCALE) {
     const def = durationDefs[scale2];
     if (!def) continue;
     const scaleIndex = MOTION_DURATION_SCALE.indexOf(scale2);
-    const durationMs = def.ms;
+    const durationMs = def.default;
+    const [rangeMin, rangeMax] = def.range;
     const bandNote = def.band ? ` Band: ${def.band}.` : "";
+    const rangeNote = rangeMin === rangeMax ? " Fixed." : ` Range: ${rangeMin}-${rangeMax}ms.`;
     tokens.push({
       name: `motion-duration-${scale2}`,
       value: `${durationMs}ms`,
@@ -25413,9 +25720,9 @@ function generateMotionTokens(config2, durationDefs, easingDefs, delayDefs, sema
       scalePosition: scaleIndex,
       motionIntent: def.motionIntent,
       motionDuration: durationMs,
-      mathRelationship: def.band ? `${durationMs}ms (perceptual: ${def.band})` : `${durationMs}ms`,
+      mathRelationship: def.band ? `${durationMs}ms within ${rangeMin}-${rangeMax}ms (perceptual: ${def.band})` : `${durationMs}ms (fixed)`,
       dependsOn: [],
-      description: `Duration ${scale2}: ${durationMs}ms.${bandNote} ${def.meaning}`,
+      description: `Duration ${scale2}: ${durationMs}ms.${rangeNote}${bandNote} ${def.meaning}`,
       generatedAt: timestamp,
       containerQueryAware: false,
       reducedMotionAware: true,
@@ -25484,384 +25791,79 @@ function generateMotionTokens(config2, durationDefs, easingDefs, delayDefs, sema
   const pingScale = Math.round(ratioValue2 ** 3 * 10) / 10;
   const pulseOpacity = Math.round(1 / ratioValue2 ** 4 * 100) / 100;
   const bouncePercent = Math.round(100 / ratioValue2 ** 6);
-  const keyframes = [
-    {
-      name: "fade-in",
-      css: "from { opacity: 0; } to { opacity: 1; }",
-      meaning: "Fade from transparent to opaque",
-      contexts: ["enter", "appear", "show"]
-    },
-    {
-      name: "fade-out",
-      css: "from { opacity: 1; } to { opacity: 0; }",
-      meaning: "Fade from opaque to transparent",
-      contexts: ["exit", "disappear", "hide"]
-    },
-    {
-      name: "slide-in-from-top",
-      css: "from { transform: translateY(-100%); } to { transform: translateY(0); }",
-      meaning: "Slide in from above",
-      contexts: ["dropdown", "notification", "toast"]
-    },
-    {
-      name: "slide-in-from-bottom",
-      css: "from { transform: translateY(100%); } to { transform: translateY(0); }",
-      meaning: "Slide in from below",
-      contexts: ["sheet", "drawer", "mobile-menu"]
-    },
-    {
-      name: "slide-in-from-left",
-      css: "from { transform: translateX(-100%); } to { transform: translateX(0); }",
-      meaning: "Slide in from left",
-      contexts: ["sidebar", "panel", "drawer"]
-    },
-    {
-      name: "slide-in-from-right",
-      css: "from { transform: translateX(100%); } to { transform: translateX(0); }",
-      meaning: "Slide in from right",
-      contexts: ["sidebar", "panel", "drawer"]
-    },
-    {
-      name: "slide-out-to-top",
-      css: "from { transform: translateY(0); } to { transform: translateY(-100%); }",
-      meaning: "Slide out upward",
-      contexts: ["dropdown-exit", "notification-dismiss"]
-    },
-    {
-      name: "slide-out-to-bottom",
-      css: "from { transform: translateY(0); } to { transform: translateY(100%); }",
-      meaning: "Slide out downward",
-      contexts: ["sheet-exit", "drawer-close"]
-    },
-    {
-      name: "slide-out-to-left",
-      css: "from { transform: translateX(0); } to { transform: translateX(-100%); }",
-      meaning: "Slide out to left",
-      contexts: ["sidebar-close", "panel-exit"]
-    },
-    {
-      name: "slide-out-to-right",
-      css: "from { transform: translateX(0); } to { transform: translateX(100%); }",
-      meaning: "Slide out to right",
-      contexts: ["sidebar-close", "panel-exit"]
-    },
-    {
-      name: "scale-in",
-      css: `from { transform: scale(${scaleStart}); opacity: 0; } to { transform: scale(1); opacity: 1; }`,
-      meaning: "Scale up while fading in",
-      contexts: ["modal", "popover", "dialog"]
-    },
-    {
-      name: "scale-out",
-      css: `from { transform: scale(1); opacity: 1; } to { transform: scale(${scaleStart}); opacity: 0; }`,
-      meaning: "Scale down while fading out",
-      contexts: ["modal-exit", "popover-close"]
-    },
-    {
-      name: "spin",
-      css: "from { transform: rotate(0deg); } to { transform: rotate(360deg); }",
-      meaning: "Continuous rotation",
-      contexts: ["loading", "spinner", "refresh"]
-    },
-    {
-      name: "ping",
-      css: `75%, 100% { transform: scale(${pingScale}); opacity: 0; }`,
-      meaning: "Expanding pulse that fades out",
-      contexts: ["notification-badge", "attention", "pulse"]
-    },
-    {
-      name: "pulse",
-      css: `0%, 100% { opacity: 1; } 50% { opacity: ${pulseOpacity}; }`,
-      meaning: "Gentle opacity pulse",
-      contexts: ["skeleton", "loading-placeholder"]
-    },
-    {
-      name: "bounce",
-      css: `0%, 100% { transform: translateY(-${bouncePercent}%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }`,
-      meaning: "Bouncing motion",
-      contexts: ["attention", "scroll-indicator"]
-    },
-    {
-      name: "accordion-down",
-      css: "from { height: 0; } to { height: var(--radix-accordion-content-height); }",
-      meaning: "Expand accordion content",
-      contexts: ["accordion", "collapsible", "expand"]
-    },
-    {
-      name: "accordion-up",
-      css: "from { height: var(--radix-accordion-content-height); } to { height: 0; }",
-      meaning: "Collapse accordion content",
-      contexts: ["accordion", "collapsible", "collapse"]
-    },
-    {
-      name: "caret-blink",
-      css: "0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; }",
-      meaning: "Text cursor blinking",
-      contexts: ["input-caret", "text-cursor"]
-    }
-  ];
-  for (const kf of keyframes) {
+  const keyframeContext = {
+    scaleStart,
+    pingScale,
+    pulseOpacity,
+    bouncePercent
+  };
+  for (const [name, kf] of Object.entries(keyframeDefs)) {
     tokens.push({
-      name: `motion-keyframe-${kf.name}`,
-      value: kf.css,
+      name: `motion-keyframe-${name}`,
+      value: kf.css(keyframeContext),
       category: "motion",
       namespace: "motion",
       semanticMeaning: kf.meaning,
       usageContext: kf.contexts,
-      keyframeName: kf.name,
-      description: `Keyframe ${kf.name}: ${kf.meaning}`,
+      keyframeName: name,
+      description: `Keyframe ${name}: ${kf.meaning}`,
       generatedAt: timestamp,
       containerQueryAware: false,
       reducedMotionAware: true,
       userOverride: null
     });
   }
-  const animations = [
-    {
-      name: "fade-in",
-      keyframe: "fade-in",
-      duration: "fast",
-      easing: "ease-out",
-      meaning: "Fade in animation",
-      contexts: ["enter", "appear"]
-    },
-    {
-      name: "fade-out",
-      keyframe: "fade-out",
-      duration: "fast",
-      easing: "ease-in",
-      meaning: "Fade out animation",
-      contexts: ["exit", "disappear"]
-    },
-    {
-      name: "slide-in-from-top",
-      keyframe: "slide-in-from-top",
-      duration: "normal",
-      easing: "ease-out",
-      meaning: "Slide in from top",
-      contexts: ["dropdown", "notification"]
-    },
-    {
-      name: "slide-in-from-bottom",
-      keyframe: "slide-in-from-bottom",
-      duration: "normal",
-      easing: "ease-out",
-      meaning: "Slide in from bottom",
-      contexts: ["sheet", "drawer"]
-    },
-    {
-      name: "slide-in-from-left",
-      keyframe: "slide-in-from-left",
-      duration: "normal",
-      easing: "ease-out",
-      meaning: "Slide in from left",
-      contexts: ["sidebar", "panel"]
-    },
-    {
-      name: "slide-in-from-right",
-      keyframe: "slide-in-from-right",
-      duration: "normal",
-      easing: "ease-out",
-      meaning: "Slide in from right",
-      contexts: ["sidebar", "panel"]
-    },
-    {
-      name: "slide-out-to-top",
-      keyframe: "slide-out-to-top",
-      duration: "fast",
-      easing: "ease-in",
-      meaning: "Slide out to top",
-      contexts: ["dropdown-exit"]
-    },
-    {
-      name: "slide-out-to-bottom",
-      keyframe: "slide-out-to-bottom",
-      duration: "fast",
-      easing: "ease-in",
-      meaning: "Slide out to bottom",
-      contexts: ["sheet-exit"]
-    },
-    {
-      name: "slide-out-to-left",
-      keyframe: "slide-out-to-left",
-      duration: "fast",
-      easing: "ease-in",
-      meaning: "Slide out to left",
-      contexts: ["sidebar-close"]
-    },
-    {
-      name: "slide-out-to-right",
-      keyframe: "slide-out-to-right",
-      duration: "fast",
-      easing: "ease-in",
-      meaning: "Slide out to right",
-      contexts: ["sidebar-close"]
-    },
-    {
-      name: "scale-in",
-      keyframe: "scale-in",
-      duration: "normal",
-      easing: "spring",
-      meaning: "Scale in with spring",
-      contexts: ["modal", "popover"]
-    },
-    {
-      name: "scale-out",
-      keyframe: "scale-out",
-      duration: "fast",
-      easing: "ease-in",
-      meaning: "Scale out",
-      contexts: ["modal-exit"]
-    },
-    {
-      name: "spin",
-      keyframe: "spin",
-      duration: "1s",
-      easing: "linear",
-      iterations: "infinite",
-      meaning: "Continuous spin",
-      contexts: ["loading", "spinner"]
-    },
-    {
-      name: "ping",
-      keyframe: "ping",
-      duration: "1s",
-      easing: "ease-out",
-      iterations: "infinite",
-      meaning: "Pinging pulse",
-      contexts: ["notification"]
-    },
-    {
-      name: "pulse",
-      keyframe: "pulse",
-      duration: "2s",
-      easing: "ease-in-out",
-      iterations: "infinite",
-      meaning: "Gentle pulse",
-      contexts: ["skeleton", "loading"]
-    },
-    {
-      name: "bounce",
-      keyframe: "bounce",
-      duration: "1s",
-      easing: "ease-in-out",
-      iterations: "infinite",
-      meaning: "Bouncing",
-      contexts: ["attention"]
-    },
-    {
-      name: "accordion-down",
-      keyframe: "accordion-down",
-      duration: "normal",
-      easing: "ease-out",
-      meaning: "Accordion expand",
-      contexts: ["accordion", "collapsible"]
-    },
-    {
-      name: "accordion-up",
-      keyframe: "accordion-up",
-      duration: "normal",
-      easing: "ease-out",
-      meaning: "Accordion collapse",
-      contexts: ["accordion", "collapsible"]
-    },
-    {
-      name: "caret-blink",
-      keyframe: "caret-blink",
-      duration: "1.25s",
-      easing: "ease-out",
-      iterations: "infinite",
-      meaning: "Caret blinking",
-      contexts: ["input"]
-    }
-  ];
-  for (const anim of animations) {
+  for (const [name, anim] of Object.entries(animationDefs)) {
     let durationValue;
     let durationRef;
-    if (anim.duration.endsWith("s") || anim.duration.endsWith("ms")) {
-      durationValue = anim.duration;
-      durationRef = anim.duration;
+    let durationDependency;
+    if ("loopPeriod" in anim.duration) {
+      durationValue = anim.duration.loopPeriod;
+      durationRef = anim.duration.loopPeriod;
+      durationDependency = [];
     } else {
-      const durationDef = durationDefs[anim.duration];
+      const durationDef = durationDefs[anim.duration.tier];
       if (!durationDef) continue;
-      durationValue = `${durationDef.ms}ms`;
-      durationRef = `var(--motion-duration-${anim.duration})`;
+      durationValue = `${durationDef.default}ms`;
+      durationRef = `var(--motion-duration-${anim.duration.tier})`;
+      durationDependency = [`motion-duration-${anim.duration.tier}`];
     }
-    const easingKey = LEGACY_EASING_REMAP[anim.easing] ?? anim.easing;
-    const easingDef = easingDefs[easingKey];
+    const easingDef = easingDefs[anim.curve];
     if (!easingDef) continue;
-    const easingRef = `var(--motion-easing-${easingKey})`;
+    const easingRef = `var(--motion-easing-${anim.curve})`;
     const iterations = anim.iterations || "";
     const animValue = iterations ? `${anim.keyframe} ${durationRef} ${easingRef} ${iterations}` : `${anim.keyframe} ${durationRef} ${easingRef}`;
     tokens.push({
-      name: `motion-animation-${anim.name}`,
+      name: `motion-animation-${name}`,
       value: animValue,
       category: "motion",
       namespace: "motion",
       semanticMeaning: anim.meaning,
       usageContext: anim.contexts,
-      animationName: anim.name,
+      animationName: name,
       keyframeName: anim.keyframe,
       animationDuration: durationValue,
       animationEasing: easingDef.css,
       animationIterations: anim.iterations || "1",
       dependsOn: [
         `motion-keyframe-${anim.keyframe}`,
-        ...anim.duration.endsWith("s") || anim.duration.endsWith("ms") ? [] : [`motion-duration-${anim.duration}`],
-        `motion-easing-${easingKey}`
+        ...durationDependency,
+        `motion-easing-${anim.curve}`
       ],
-      description: `Animation ${anim.name}: ${anim.meaning}`,
+      description: `Animation ${name}: ${anim.meaning}`,
       generatedAt: timestamp,
       containerQueryAware: false,
       reducedMotionAware: true,
       userOverride: null
     });
   }
-  const composites2 = [
-    {
-      name: "motion-fade-in",
-      duration: "fast",
-      easing: "ease-out",
-      meaning: "Fade in animation preset",
-      contexts: ["fade-in", "appear"]
-    },
-    {
-      name: "motion-fade-out",
-      duration: "fast",
-      easing: "ease-in",
-      meaning: "Fade out animation preset",
-      contexts: ["fade-out", "disappear"]
-    },
-    {
-      name: "motion-slide-in",
-      duration: "normal",
-      easing: "ease-out",
-      meaning: "Slide in animation preset",
-      contexts: ["slide-in", "panel-enter", "modal-enter"]
-    },
-    {
-      name: "motion-slide-out",
-      duration: "fast",
-      easing: "ease-in",
-      meaning: "Slide out animation preset",
-      contexts: ["slide-out", "panel-exit", "modal-exit"]
-    },
-    {
-      name: "motion-scale-in",
-      duration: "normal",
-      easing: "spring",
-      meaning: "Scale in with spring animation",
-      contexts: ["pop-in", "button-press", "emphasis"]
-    }
-  ];
-  for (const comp of composites2) {
-    const durationDef = durationDefs[comp.duration];
-    const easingKey = LEGACY_EASING_REMAP[comp.easing] ?? comp.easing;
-    const easingDef = easingDefs[easingKey];
+  for (const [name, comp] of Object.entries(compositePresets)) {
+    const durationDef = durationDefs[comp.durationTier];
+    const easingDef = easingDefs[comp.curve];
     if (!durationDef || !easingDef) continue;
-    const durationMs = durationDef.ms;
+    const durationMs = durationDef.default;
     tokens.push({
-      name: comp.name,
+      name,
       value: `${durationMs}ms ${easingDef.css}`,
       category: "motion",
       namespace: "motion",
@@ -25869,9 +25871,9 @@ function generateMotionTokens(config2, durationDefs, easingDefs, delayDefs, sema
       usageContext: comp.contexts,
       motionDuration: durationMs,
       easingCurve: easingDef.curve,
-      easingName: easingKey,
-      dependsOn: [`motion-duration-${comp.duration}`, `motion-easing-${easingKey}`],
-      description: `${comp.meaning}. Combines ${comp.duration} duration with ${easingKey} easing.`,
+      easingName: comp.curve,
+      dependsOn: [`motion-duration-${comp.durationTier}`, `motion-easing-${comp.curve}`],
+      description: `${comp.meaning}. Combines ${comp.durationTier} duration with ${comp.curve} easing.`,
       generatedAt: timestamp,
       containerQueryAware: false,
       reducedMotionAware: true,
@@ -26827,7 +26829,10 @@ function createGeneratorDefs(colorPaletteBases) {
         DEFAULT_DURATION_DEFINITIONS,
         DEFAULT_EASING_DEFINITIONS,
         DEFAULT_DELAY_DEFINITIONS,
-        DEFAULT_MOTION_SEMANTIC_MAPPINGS
+        DEFAULT_MOTION_SEMANTIC_MAPPINGS,
+        DEFAULT_KEYFRAME_DEFINITIONS,
+        DEFAULT_ANIMATION_DEFINITIONS,
+        DEFAULT_MOTION_COMPOSITE_PRESETS
       )
     },
     {
@@ -27076,7 +27081,7 @@ function extractShadcnRoot(css) {
 var THEME_BLOCK = /@theme(?:\s+inline)?\s*\{([^}]*)\}/g;
 var COMMENT = /\/\*[\s\S]*?\*\//g;
 var DECLARATION = /--([A-Za-z_-][\w-]*)\s*:\s*([^;]+);/g;
-function extractThemeBlocks(css) {
+function extractThemeBlocks2(css) {
   const out = [];
   for (const match of css.matchAll(THEME_BLOCK)) {
     const body = (match[1] ?? "").replace(COMMENT, "");
@@ -27093,7 +27098,7 @@ function extractThemeBlocks(css) {
 // ../design-tokens/src/importers/bases.ts
 var LENGTH = /^(-?\d+(?:\.\d+)?)\s*(rem|px|em)$/;
 function detectBase(css, names, parse7) {
-  const decls = [...extractShadcnRoot(css), ...extractThemeBlocks(css)];
+  const decls = [...extractShadcnRoot(css), ...extractThemeBlocks2(css)];
   let last2 = null;
   for (const decl of decls) {
     if (names.includes(decl.name)) last2 = decl.value.trim();
@@ -27318,7 +27323,7 @@ function detectFonts(css) {
     accept(family, quoteIfNeeded(family));
   }
   const rootDecls = extractShadcnRoot(css);
-  const themeDecls = extractThemeBlocks(css);
+  const themeDecls = extractThemeBlocks2(css);
   for (const decl of [...rootDecls, ...themeDecls]) {
     if (!decl.name.startsWith("font-")) continue;
     const first = firstFamilyFromStack(decl.value);
@@ -29986,7 +29991,7 @@ async function init(options) {
         }
       }
       {
-        const themeDecls = extractThemeBlocks(sourceCss);
+        const themeDecls = extractThemeBlocks2(sourceCss);
         if (themeDecls.length > 0) {
           const POSITION_SUFFIX = new RegExp(`^(.+)-(${SCALE_POSITIONS.join("|")})$`);
           const familySeeds = /* @__PURE__ */ new Map();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rafters",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "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",