designlang 12.15.0 → 12.17.0

package/src/classifiers/smart.js

@@ -1,7 +1,8 @@
 // Optional LLM fallback for low-confidence classifications. No SDK deps — we
-// hit the OpenAI or Anthropic REST API directly via global fetch. Runs only
-// when the user passes --smart AND an API key is available in env. Silently
-// no-ops otherwise so the core extractor stays zero-config.
+// hit the Anthropic REST API or an OpenAI-compatible chat endpoint directly via
+// global fetch. Runs only when the user passes --smart AND an API key is
+// available in env. Silently no-ops otherwise so the core extractor stays
+// zero-config.
 //
 // Consumers call `refineWithSmart({ pageIntent, sectionRoles, materialLanguage,
 // componentLibrary }, digest)` — we only hit the network for fields where
@@ -19,9 +20,38 @@ const TASKS = {
   },
 };
 
-function detectProvider() {
-  if (process.env.ANTHROPIC_API_KEY) return 'anthropic';
-  if (process.env.OPENAI_API_KEY) return 'openai';
+function trimTrailingSlash(url) {
+  return url ? url.replace(/\/+$/, '') : url;
+}
+
+export function resolveSmartProviderConfig(env = process.env) {
+  if (env.ANTHROPIC_API_KEY) {
+    return {
+      provider: 'anthropic',
+      apiKey: env.ANTHROPIC_API_KEY,
+      model: env.DESIGNLANG_MODEL || 'claude-haiku-4-5-20251001',
+    };
+  }
+
+  const atlasApiKey = env.ATLASCLOUD_API_KEY || env.ATLAS_CLOUD_API_KEY;
+  if (atlasApiKey) {
+    return {
+      provider: 'atlascloud',
+      apiKey: atlasApiKey,
+      baseUrl: trimTrailingSlash(env.ATLASCLOUD_API_BASE || env.ATLAS_CLOUD_API_BASE || 'https://api.atlascloud.ai/v1'),
+      model: env.DESIGNLANG_MODEL || env.ATLASCLOUD_MODEL || env.ATLAS_CLOUD_MODEL || 'deepseek-ai/deepseek-v4-pro',
+    };
+  }
+
+  if (env.OPENAI_API_KEY) {
+    return {
+      provider: 'openai',
+      apiKey: env.OPENAI_API_KEY,
+      baseUrl: trimTrailingSlash(env.OPENAI_API_BASE || env.OPENAI_BASE_URL || 'https://api.openai.com/v1'),
+      model: env.DESIGNLANG_MODEL || 'gpt-4o-mini',
+    };
+  }
+
   return null;
 }
 
@@ -44,16 +74,16 @@ function buildDigest({ rawData, design, pageIntent }) {
   ].join('\n\n');
 }
 
-async function callAnthropic(system, user) {
+async function callAnthropic(config, system, user) {
   const res = await fetch('https://api.anthropic.com/v1/messages', {
     method: 'POST',
     headers: {
-      'x-api-key': process.env.ANTHROPIC_API_KEY,
+      'x-api-key': config.apiKey,
       'anthropic-version': '2023-06-01',
       'content-type': 'application/json',
     },
     body: JSON.stringify({
-      model: process.env.DESIGNLANG_MODEL || 'claude-haiku-4-5-20251001',
+      model: config.model,
       max_tokens: 200,
       system,
       messages: [{ role: 'user', content: user }],
@@ -65,15 +95,15 @@ async function callAnthropic(system, user) {
   return text;
 }
 
-async function callOpenAI(system, user) {
-  const res = await fetch('https://api.openai.com/v1/chat/completions', {
+async function callOpenAICompatible(config, system, user) {
+  const res = await fetch(`${config.baseUrl}/chat/completions`, {
     method: 'POST',
     headers: {
-      'authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
+      'authorization': `Bearer ${config.apiKey}`,
       'content-type': 'application/json',
     },
     body: JSON.stringify({
-      model: process.env.DESIGNLANG_MODEL || 'gpt-4o-mini',
+      model: config.model,
       messages: [
         { role: 'system', content: system },
         { role: 'user', content: user },
@@ -82,14 +112,14 @@ async function callOpenAI(system, user) {
       response_format: { type: 'json_object' },
     }),
   });
-  if (!res.ok) throw new Error(`openai ${res.status}`);
+  if (!res.ok) throw new Error(`${config.provider} ${res.status}`);
   const json = await res.json();
   return json.choices?.[0]?.message?.content || '';
 }
 
-async function callLLM(provider, system, user) {
-  if (provider === 'anthropic') return callAnthropic(system, user);
-  return callOpenAI(system, user);
+async function callLLM(config, system, user) {
+  if (config.provider === 'anthropic') return callAnthropic(config, system, user);
+  return callOpenAICompatible(config, system, user);
 }
 
 function parseJsonLoose(text) {
@@ -101,8 +131,10 @@ function parseJsonLoose(text) {
 
 export async function refineWithSmart({ enabled, rawData, design, pageIntent, sectionRoles, materialLanguage, componentLibrary }) {
   if (!enabled) return { applied: false, reason: 'disabled' };
-  const provider = detectProvider();
-  if (!provider) return { applied: false, reason: 'no API key (set OPENAI_API_KEY or ANTHROPIC_API_KEY)' };
+  const providerConfig = resolveSmartProviderConfig();
+  if (!providerConfig) {
+    return { applied: false, reason: 'no API key (set OPENAI_API_KEY, ATLASCLOUD_API_KEY, or ANTHROPIC_API_KEY)' };
+  }
 
   const digest = buildDigest({ rawData, design, pageIntent });
   const updates = {};
@@ -118,13 +150,13 @@ export async function refineWithSmart({ enabled, rawData, design, pageIntent, se
     if (!spec) continue;
     const user = `Digest:\n${digest}\n\nCurrent heuristic result:\n${JSON.stringify(current)}\n\nRespond with the requested JSON.`;
     try {
-      const raw = await callLLM(provider, spec.system, user);
+      const raw = await callLLM(providerConfig, spec.system, user);
       const parsed = parseJsonLoose(raw);
-      if (parsed) updates[task] = { ...parsed, smart: true, provider };
+      if (parsed) updates[task] = { ...parsed, smart: true, provider: providerConfig.provider };
     } catch (e) {
       errors.push(`${task}: ${e.message}`);
     }
   }
 
-  return { applied: true, provider, updates, errors };
+  return { applied: true, provider: providerConfig.provider, updates, errors };
 }

package/src/formatters/framer-motion.js

@@ -5,6 +5,11 @@
 // (fade, slide-up, scale-in, stagger). Framer Motion is the dominant
 // React animation library, so this is the highest-leverage motion
 // emitter for the React ecosystem.
+//
+// v12.16 — now also emits:
+//   • spring presets derived from detected overshoot beziers
+//   • whileInView variants when the source uses scroll/view-timeline
+//   • keyframe variants reconstructed from on-page @keyframes
 
 function bezier(raw) {
   if (!raw) return null;
@@ -21,10 +26,25 @@ function camel(s) {
   return String(s || '').replace(/[^a-zA-Z0-9]+(.)/g, (_, c) => c.toUpperCase()).replace(/^[0-9]/, '_$&');
 }
 
+// Rough inverse of a critically-damped second-order response.
+// Shorter durations → stiffer; deeper overshoot → less damping.
+// Same heuristic the Motion One emitter uses, kept in sync for parity.
+function springFromBezier(pts, ms) {
+  const [, y1, , y2] = pts;
+  const overshoot = Math.max(0, Math.max(y1 - 1, y2 - 1, -y1, -y2));
+  const seconds = Math.max(0.1, (ms || 400) / 1000);
+  const stiffness = Math.round(Math.min(700, Math.max(80, 600 / seconds)));
+  const damping = Math.round(Math.max(8, 30 - overshoot * 40));
+  return { stiffness, damping, mass: 1 };
+}
+
 export function formatFramerMotion(design) {
   const host = (() => { try { return new URL(design?.meta?.url).hostname.replace(/^www\./, ''); } catch { return 'site'; } })();
   const durations = Array.isArray(design?.motion?.durations) ? design.motion.durations : [];
   const easings   = Array.isArray(design?.motion?.easings)   ? design.motion.easings   : [];
+  const springs   = Array.isArray(design?.motion?.springs)   ? design.motion.springs   : [];
+  const keyframes = Array.isArray(design?.motion?.keyframes) ? design.motion.keyframes : [];
+  const scroll    = design?.motion?.scrollLinked || { present: false, signals: [] };
 
   // Pick a default duration (the most common "medium" feel) and easing.
   const durSec = (d) => ((d.ms || parseInt(d.css || d.value || d, 10) || 300) / 1000);
@@ -75,13 +95,33 @@ export function formatFramerMotion(design) {
   }
   lines.push('};', '');
 
+  // Spring presets — derived from detected overshoot beziers when present,
+  // else a single tasteful default so consumers can always reach for one.
+  const springEntries = [];
+  springs.forEach((s, i) => {
+    const pts = bezier(s.raw);
+    if (!pts) return;
+    springEntries.push({ key: i === 0 ? 'soft' : `spring${i + 1}`, opts: springFromBezier(pts, defaultDur * 1000) });
+  });
+  if (springEntries.length === 0) {
+    springEntries.push({ key: 'soft', opts: { stiffness: 320, damping: 30, mass: 1 } });
+  }
+  const primarySpringKey = springEntries[0].key;
+
+  lines.push('/** Spring presets — pass to a Framer Motion `transition` prop. */');
+  lines.push('export const springs = {');
+  for (const { key, opts } of springEntries) {
+    lines.push(`  ${key}: { type: 'spring', stiffness: ${opts.stiffness}, damping: ${opts.damping}, mass: ${opts.mass} },`);
+  }
+  lines.push('};', '');
+
   const primaryEaseKey = easeEntries[0].key;
   lines.push('/** Ready-to-spread Framer Motion transition objects. */');
   lines.push('export const transitions = {');
   lines.push(`  base:  { duration: ${defaultDur}, ease: easings.${primaryEaseKey} },`);
   lines.push(`  fast:  { duration: ${Math.max(0.1, defaultDur * 0.5).toFixed(3)}, ease: easings.${primaryEaseKey} },`);
   lines.push(`  slow:  { duration: ${(defaultDur * 1.8).toFixed(3)}, ease: easings.${primaryEaseKey} },`);
-  lines.push(`  spring: { type: 'spring', stiffness: 320, damping: 30 },`);
+  lines.push(`  spring: springs.${primarySpringKey},`);
   lines.push('};', '');
 
   lines.push('/** Common variants wired to the extracted timing. */');
@@ -98,12 +138,60 @@ export function formatFramerMotion(design) {
   lines.push('    hidden: { opacity: 0, scale: 0.96 },');
   lines.push('    show:   { opacity: 1, scale: 1, transition: transitions.base },');
   lines.push('  },');
+  lines.push('  pop: {');
+  lines.push('    hidden: { opacity: 0, scale: 0.9 },');
+  lines.push(`    show:   { opacity: 1, scale: 1, transition: springs.${primarySpringKey} },`);
+  lines.push('  },');
   lines.push('  stagger: {');
   lines.push('    hidden: {},');
   lines.push('    show:   { transition: { staggerChildren: ' + Math.max(0.04, defaultDur * 0.25).toFixed(3) + ' } },');
   lines.push('  },');
+
+  // Reconstructed keyframe variants — Framer Motion accepts arrays per
+  // property to produce keyframe animations. We use the camelCased
+  // @keyframes name so the source intent survives.
+  const usedKeyframes = keyframes.filter(k => k.used && k.steps && k.steps.length);
+  for (const kf of usedKeyframes.slice(0, 8)) {
+    const propMap = {};
+    for (const step of kf.steps) {
+      for (const part of (step.style || '').split(';')) {
+        const [p, v] = part.split(':').map(s => (s || '').trim());
+        if (!p || !v) continue;
+        (propMap[p] ||= []).push(v);
+      }
+    }
+    const entries = Object.entries(propMap)
+      .filter(([, vals]) => vals.length >= 2)
+      .map(([prop, vals]) => `      ${JSON.stringify(camel(prop))}: ${JSON.stringify(vals)}`);
+    if (!entries.length) continue;
+    lines.push(`  ${camel(kf.name)}: {`);
+    lines.push('    hidden: {},');
+    lines.push('    show: {');
+    lines.push(entries.join(',\n') + ',');
+    lines.push('      transition: transitions.base,');
+    lines.push('    },');
+    lines.push('  },');
+  }
+
   lines.push('};', '');
-  lines.push('export default { easings, durations, transitions, variants };');
+
+  if (scroll.present) {
+    lines.push('/** Site uses scroll- or view-timeline. Drop-in `whileInView` props. */');
+    lines.push('export const inView = {');
+    lines.push('  fadeIn: {');
+    lines.push('    initial: variants.fade.hidden,');
+    lines.push('    whileInView: variants.fade.show,');
+    lines.push('    viewport: { once: true, amount: 0.3 },');
+    lines.push('  },');
+    lines.push('  riseIn: {');
+    lines.push('    initial: variants.slideUp.hidden,');
+    lines.push('    whileInView: variants.slideUp.show,');
+    lines.push('    viewport: { once: true, amount: 0.3 },');
+    lines.push('  },');
+    lines.push('};', '');
+  }
+
+  lines.push(`export default { easings, durations, springs, transitions, variants${scroll.present ? ', inView' : ''} };`);
   lines.push('');
 
   return lines.join('\n');

package/src/formatters/motion-css.js

@@ -0,0 +1,136 @@
+// Motion CSS emitter — `<host>-motion.css`.
+//
+// The framework-agnostic sibling of the Framer Motion / Motion One
+// emitters. Anything that renders HTML can drop this file in: it ships
+//   • custom properties — `--duration-*` and `--ease-*` from the live page
+//   • `@keyframes` — fade-in / slide-up / scale-in / pop, plus any used
+//     on-page @keyframes reconstructed from their real steps
+//   • utility classes — `.mo-fade-in`, `.mo-slide-up`, … wired to the vars
+//   • a `prefers-reduced-motion: reduce` guard so the whole thing degrades
+//     to no-motion for users who ask for it (accessibility by default)
+
+function bezier(raw) {
+  if (!raw) return null;
+  const m = String(raw).match(/cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/i);
+  if (m) return `cubic-bezier(${parseFloat(m[1])}, ${parseFloat(m[2])}, ${parseFloat(m[3])}, ${parseFloat(m[4])})`;
+  const named = {
+    linear: 'linear', ease: 'ease', 'ease-in': 'ease-in',
+    'ease-out': 'ease-out', 'ease-in-out': 'ease-in-out',
+  };
+  return named[String(raw).trim()] || null;
+}
+
+// CSS identifiers: lowercase, hyphen-separated, never leading with a digit.
+function kebab(s) {
+  return String(s || '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/[^a-zA-Z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase()
+    .replace(/^(\d)/, '_$1');
+}
+
+export function formatMotionCss(design) {
+  const host = (() => { try { return new URL(design?.meta?.url).hostname.replace(/^www\./, ''); } catch { return 'site'; } })();
+  const durations = Array.isArray(design?.motion?.durations) ? design.motion.durations : [];
+  const easings   = Array.isArray(design?.motion?.easings)   ? design.motion.easings   : [];
+  const springs   = Array.isArray(design?.motion?.springs)   ? design.motion.springs   : [];
+  const keyframes = Array.isArray(design?.motion?.keyframes) ? design.motion.keyframes : [];
+
+  // Default duration (the most common "medium" feel) and easing.
+  const defaultDur = durations.length
+    ? (durations[Math.min(2, durations.length - 1)].css || '300ms')
+    : '300ms';
+  const sortedEase = [...easings].sort((a, b) => (b.count || 0) - (a.count || 0));
+
+  // Named easing variables, deduped by classified family.
+  const easeEntries = [];
+  sortedEase.forEach((e, i) => {
+    const css = bezier(e.raw);
+    if (!css) return;
+    const key = e.family && e.family !== 'custom' ? kebab(e.family) : `custom-${i + 1}`;
+    if (easeEntries.find((x) => x.key === key)) return;
+    easeEntries.push({ key, css, count: e.count });
+  });
+  const firstSpring = springs.map(s => bezier(s.raw)).find(Boolean);
+  if (firstSpring) easeEntries.push({ key: 'spring', css: firstSpring, count: 0 });
+  if (easeEntries.length === 0) easeEntries.push({ key: 'standard', css: 'cubic-bezier(0.25, 0.1, 0.25, 1)', count: 0 });
+  const defaultEaseVar = easeEntries[0].key;
+
+  const lines = [
+    '/* Motion CSS — generated by designlang (motionlang)',
+    ` * Source: ${design?.meta?.url || host}`,
+    ` * ${new Date().toISOString()}`,
+    ' *',
+    ' *   <link rel="stylesheet" href="./' + host + '-motion.css">',
+    ' *   <div class="mo-slide-up">…</div>',
+    ' */',
+    '',
+    ':root {',
+  ];
+
+  if (durations.length) {
+    for (const d of durations) lines.push(`  --duration-${kebab(d.name || `ms-${d.ms}`)}: ${d.css};`);
+  } else {
+    lines.push('  --duration-fast: 150ms;', '  --duration-base: 300ms;', '  --duration-slow: 500ms;');
+  }
+  for (const { key, css, count } of easeEntries) {
+    lines.push(`  --ease-${key}: ${css};${count ? ` /* ${count}× on page */` : ''}`);
+  }
+  lines.push('}', '');
+
+  // Built-in keyframes — the same vocabulary the JS emitters expose.
+  lines.push('@keyframes fade-in   { from { opacity: 0; }                              to { opacity: 1; } }');
+  lines.push('@keyframes slide-up  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }');
+  lines.push('@keyframes scale-in  { from { opacity: 0; transform: scale(0.96); }      to { opacity: 1; transform: none; } }');
+  lines.push('@keyframes pop       { 0% { transform: scale(0.9); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }');
+  lines.push('');
+
+  // Reconstructed @keyframes that the page actually attached to elements.
+  const usedKeyframes = keyframes.filter(k => k.used && k.steps && k.steps.length);
+  for (const kf of usedKeyframes.slice(0, 12)) {
+    const name = kebab(kf.name);
+    if (['fade-in', 'slide-up', 'scale-in', 'pop'].includes(name)) continue;
+    const steps = kf.steps
+      .map(s => {
+        const offset = s.offset === 'from' ? '0%' : s.offset === 'to' ? '100%' : s.offset;
+        const body = String(s.style || '').split(';').map(x => x.trim()).filter(Boolean).join('; ');
+        return offset && body ? `  ${offset} { ${body}; }` : '';
+      })
+      .filter(Boolean);
+    if (!steps.length) continue;
+    lines.push(`@keyframes ${name} {`);
+    lines.push(steps.join('\n'));
+    lines.push('}', '');
+  }
+
+  // Utility classes wired to the extracted timing.
+  lines.push('.mo-animate,');
+  lines.push('[class^="mo-"], [class*=" mo-"] {');
+  lines.push(`  animation-duration: var(--duration-${kebab(durations[Math.min(2, durations.length - 1)]?.name || 'base')}, ${defaultDur});`);
+  lines.push(`  animation-timing-function: var(--ease-${defaultEaseVar});`);
+  lines.push('  animation-fill-mode: both;');
+  lines.push('}', '');
+
+  const utility = (cls, kf, ease) => {
+    lines.push(`.mo-${cls} { animation-name: ${kf};${ease ? ` animation-timing-function: var(--ease-${ease});` : ''} }`);
+  };
+  utility('fade-in', 'fade-in');
+  utility('slide-up', 'slide-up');
+  utility('scale-in', 'scale-in');
+  utility('pop', 'pop', firstSpring ? 'spring' : defaultEaseVar);
+  lines.push('');
+
+  // Accessibility: honour reduced-motion globally.
+  lines.push('@media (prefers-reduced-motion: reduce) {');
+  lines.push('  *, ::before, ::after {');
+  lines.push('    animation-duration: 0.01ms !important;');
+  lines.push('    animation-iteration-count: 1 !important;');
+  lines.push('    transition-duration: 0.01ms !important;');
+  lines.push('    scroll-behavior: auto !important;');
+  lines.push('  }');
+  lines.push('}');
+  lines.push('');
+
+  return lines.join('\n');
+}

package/src/formatters/motion-gsap.js

@@ -0,0 +1,131 @@
+// GSAP emitter — `<host>-motion.gsap.js`.
+//
+// Targets GreenSock (gsap). The extracted cubic-bezier curves are registered
+// as named `CustomEase`s (so the site's exact feel is reproducible), durations
+// come through as seconds, and we emit `gsap.from()` reveal helpers plus a
+// ScrollTrigger reveal when the page actually uses scroll-/view-timeline.
+//
+// We emit:
+//   • `eases`       — CustomEase SVG-path strings keyed by family
+//   • `durations`   — extracted timings in seconds
+//   • `registerEases(gsap)` — registers every ease as a named CustomEase
+//   • `reveals`     — gsap.from() helpers (fadeIn / slideUp / scaleIn / pop)
+//   • `revealOnScroll()` — ScrollTrigger batch reveal (only when scroll-linked)
+
+function bezierPts(raw) {
+  if (!raw) return null;
+  const m = String(raw).match(/cubic-bezier\(\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*,\s*([-\d.]+)\s*\)/i);
+  if (m) return [parseFloat(m[1]), parseFloat(m[2]), parseFloat(m[3]), parseFloat(m[4])];
+  const named = {
+    linear: [0, 0, 1, 1], ease: [0.25, 0.1, 0.25, 1],
+    'ease-in': [0.42, 0, 1, 1], 'ease-out': [0, 0, 0.58, 1], 'ease-in-out': [0.42, 0, 0.58, 1],
+  };
+  return named[String(raw).trim()] || null;
+}
+
+function camel(s) {
+  return String(s || '').replace(/[^a-zA-Z0-9]+(.)/g, (_, c) => c.toUpperCase()).replace(/^[0-9]/, '_$&');
+}
+
+// GSAP CustomEase accepts SVG cubic-path data; a bezier from (0,0)→(1,1) with
+// the two extracted control points maps directly to one cubic segment.
+function customEasePath([x1, y1, x2, y2]) {
+  return `M0,0 C${x1},${y1} ${x2},${y2} 1,1`;
+}
+
+export function formatMotionGsap(design) {
+  const host = (() => { try { return new URL(design?.meta?.url).hostname.replace(/^www\./, ''); } catch { return 'site'; } })();
+  const durations = Array.isArray(design?.motion?.durations) ? design.motion.durations : [];
+  const easings   = Array.isArray(design?.motion?.easings)   ? design.motion.easings   : [];
+  const springs   = Array.isArray(design?.motion?.springs)   ? design.motion.springs   : [];
+  const scroll    = design?.motion?.scrollLinked || { present: false, signals: [] };
+
+  const durSec = (d) => ((d.ms || parseInt(d.css || d.value || d, 10) || 300) / 1000);
+  const defaultDur = durations.length ? durSec(durations[Math.min(2, durations.length - 1)]) : 0.3;
+
+  // Eases: dedupe by family, most-used first, fall back to a standard curve.
+  const sortedEase = [...easings].sort((a, b) => (b.count || 0) - (a.count || 0));
+  const easeEntries = [];
+  sortedEase.forEach((e, i) => {
+    const pts = bezierPts(e.raw);
+    if (!pts) return;
+    const key = e.family && e.family !== 'custom' ? camel(e.family) : `custom${i + 1}`;
+    if (easeEntries.find((x) => x.key === key)) return;
+    easeEntries.push({ key, path: customEasePath(pts), count: e.count });
+  });
+  springs.forEach((s) => {
+    const pts = bezierPts(s.raw);
+    if (pts && !easeEntries.find((x) => x.key === 'spring')) {
+      easeEntries.push({ key: 'spring', path: customEasePath(pts), count: s.count });
+    }
+  });
+  if (easeEntries.length === 0) {
+    easeEntries.push({ key: 'standard', path: customEasePath([0.25, 0.1, 0.25, 1]), count: 0 });
+  }
+  const primaryEaseKey = easeEntries[0].key;
+
+  const lines = [
+    '// GSAP presets — generated by designlang (motionlang)',
+    `// Source: ${design?.meta?.url || host}`,
+    `// ${new Date().toISOString()}`,
+    '//',
+    "//   import gsap from 'gsap';",
+    `//   import { registerEases, reveals } from './${host}-motion.gsap.js';`,
+    '//   registerEases(gsap);            // one-time: registers CustomEases',
+    "//   reveals.slideUp('.card');",
+    '',
+    '/** CustomEase path data extracted from the live page, keyed by family. */',
+    'export const eases = {',
+  ];
+  for (const { key, path, count } of easeEntries) {
+    lines.push(`  ${key}: '${path}',${count ? ` // ${count}× on page` : ''}`);
+  }
+  lines.push('};', '');
+
+  lines.push('/** Duration presets (seconds), extracted from the live page. */');
+  lines.push('export const durations = {');
+  if (durations.length) {
+    for (const d of durations) lines.push(`  ${camel(d.name || `ms${d.ms}`)}: ${durSec(d)},`);
+  } else {
+    lines.push('  fast: 0.15,', '  base: 0.3,', '  slow: 0.5,');
+  }
+  lines.push('};', '');
+
+  lines.push('/** Register every extracted curve as a named GSAP CustomEase. Call once. */');
+  lines.push('export function registerEases(gsap) {');
+  lines.push('  const CustomEase = gsap.plugins?.CustomEase || (typeof window !== \'undefined\' && window.CustomEase);');
+  lines.push('  if (!CustomEase) {');
+  lines.push("    console.warn('[motion.gsap] CustomEase plugin not registered — call gsap.registerPlugin(CustomEase) first.');");
+  lines.push('    return;');
+  lines.push('  }');
+  lines.push('  for (const [name, path] of Object.entries(eases)) CustomEase.create(name, path);');
+  lines.push('}');
+  lines.push('');
+
+  lines.push('/** gsap.from() reveal helpers. Pass any GSAP target + optional vars override. */');
+  lines.push('export const reveals = {');
+  lines.push(`  fadeIn: (target, vars = {}) => gsap.from(target, { opacity: 0, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars }),`);
+  lines.push(`  slideUp: (target, vars = {}) => gsap.from(target, { opacity: 0, y: 24, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars }),`);
+  lines.push(`  slideDown: (target, vars = {}) => gsap.from(target, { opacity: 0, y: -24, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars }),`);
+  lines.push(`  scaleIn: (target, vars = {}) => gsap.from(target, { opacity: 0, scale: 0.96, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars }),`);
+  lines.push(`  pop: (target, vars = {}) => gsap.from(target, { scale: 0.9, duration: ${defaultDur}, ease: '${easeEntries.find((e) => e.key === 'spring') ? 'spring' : primaryEaseKey}', ...vars }),`);
+  lines.push('};', '');
+
+  if (scroll.present) {
+    lines.push('/** Site uses scroll-/view-timeline. Batch-reveals elements as they enter. */');
+    lines.push('/** Requires: gsap.registerPlugin(ScrollTrigger). */');
+    lines.push('export function revealOnScroll(targets, vars = {}) {');
+    lines.push('  return gsap.utils.toArray(targets).map((el) =>');
+    lines.push('    gsap.from(el, {');
+    lines.push(`      opacity: 0, y: 24, duration: ${defaultDur}, ease: '${primaryEaseKey}', ...vars,`);
+    lines.push("      scrollTrigger: { trigger: el, start: 'top 85%', toggleActions: 'play none none reverse' },");
+    lines.push('    }));');
+    lines.push('}');
+    lines.push('');
+  }
+
+  lines.push('export default { eases, durations, registerEases, reveals };');
+  lines.push('');
+
+  return lines.join('\n');
+}