design-brain-memory 0.9.2 → 0.9.4

package/dist/extractFromUrl.js

@@ -1,7 +1,6 @@
 import path from 'node:path';
 import fs from 'fs-extra';
 import { runAgentBrowserJson } from './agentBrowser.js';
-import { classifyMotionIntent, detectPhysics, detectAnimationGroups, classifyGsapEasing } from './classify.js';
 const DEFAULT_VIEWPORTS = [
     { label: 'desktop', width: 1440, height: 1200 },
     { label: 'tablet', width: 1024, height: 1366 },
@@ -208,6 +207,7 @@ const EXTRACTION_SCRIPT = String.raw `(() => {
         selector,
         text: normalizeWhitespace(el.textContent || '').slice(0, 90),
         className: typeof el.className === 'string' ? normalizeWhitespace(el.className) : '',
+        html: el.outerHTML.slice(0, 2048),
         styles: {
           color: style.color,
           backgroundColor: style.backgroundColor,
@@ -227,12 +227,46 @@ const EXTRACTION_SCRIPT = String.raw `(() => {
     const hasTransform = style.transform && style.transform !== 'none';
 
     if ((hasTransition || hasAnimation || hasTransform) && motionList.length < maxMotion) {
-      motionList.push({
+      const motionEntry = {
         selector,
         transition: style.transition,
         animation: style.animation,
         transform: style.transform,
-      });
+      };
+
+      if (hasTransition) {
+        const props = style.transitionProperty.split(',').map(s => s.trim());
+        const durs = style.transitionDuration.split(',').map(s => s.trim());
+        const funcs = style.transitionTimingFunction.split(',').map(s => s.trim());
+        const delays = style.transitionDelay.split(',').map(s => s.trim());
+        motionEntry.transitions = props.map((p, i) => ({
+          property: p,
+          duration: durs[i % durs.length] || '0s',
+          timingFunction: funcs[i % funcs.length] || 'ease',
+          delay: delays[i % delays.length] || '0s',
+        }));
+      }
+
+      if (hasAnimation) {
+        const names = style.animationName.split(',').map(s => s.trim());
+        const durs = style.animationDuration.split(',').map(s => s.trim());
+        const funcs = style.animationTimingFunction.split(',').map(s => s.trim());
+        const delays = style.animationDelay.split(',').map(s => s.trim());
+        const iters = style.animationIterationCount.split(',').map(s => s.trim());
+        const dirs = style.animationDirection.split(',').map(s => s.trim());
+        const fills = style.animationFillMode.split(',').map(s => s.trim());
+        motionEntry.animations = names.map((n, i) => ({
+          name: n,
+          duration: durs[i % durs.length] || '0s',
+          timingFunction: funcs[i % funcs.length] || 'ease',
+          delay: delays[i % delays.length] || '0s',
+          iterationCount: iters[i % iters.length] || '1',
+          direction: dirs[i % dirs.length] || 'normal',
+          fillMode: fills[i % fills.length] || 'none',
+        }));
+      }
+
+      motionList.push(motionEntry);
     }
   });
 
@@ -296,6 +330,35 @@ const EXTRACTION_SCRIPT = String.raw `(() => {
 
   addPseudoStateStyles();
 
+  const keyframeList = [];
+  const seenKeyframes = new Set();
+  const maxKeyframes = 60;
+
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules;
+    try { rules = sheet.cssRules; } catch { continue; }
+    if (!rules) continue;
+
+    for (const rule of Array.from(rules)) {
+      if (rule.constructor.name !== 'CSSKeyframesRule') continue;
+      const kfRule = rule;
+      const name = kfRule.name;
+      if (seenKeyframes.has(name) || keyframeList.length >= maxKeyframes) continue;
+      seenKeyframes.add(name);
+
+      const steps = [];
+      for (const kf of Array.from(kfRule.cssRules)) {
+        const declarations = {};
+        for (let i = 0; i < kf.style.length; i++) {
+          const prop = kf.style[i];
+          declarations[prop] = kf.style.getPropertyValue(prop);
+        }
+        steps.push({ offset: kf.keyText, declarations });
+      }
+      keyframeList.push({ name, steps });
+    }
+  }
+
   const colors = Array.from(colorMap.values()).sort((a, b) => b.count - a.count).slice(0, 70);
   const typography = Array.from(typographyMap.values()).sort((a, b) => b.count - a.count).slice(0, 90);
 
@@ -310,6 +373,7 @@ const EXTRACTION_SCRIPT = String.raw `(() => {
     typography,
     components: componentList,
     motion: motionList,
+    keyframes: keyframeList,
     layout: layoutList,
     cssVariables: variableMap,
     stateStyles: stateStyleList,
@@ -325,312 +389,6 @@ const PAGE_SUMMARY_SCRIPT = String.raw `(() => {
     summary: [h1, 'nav-links:' + navCount, 'ctas:' + ctaCount].filter(Boolean).join(' | '),
   };
 })();`;
-const ANIMATION_OBSERVER_SCRIPT = String.raw `(() => {
-  const maxAnimations = 200;
-  const result = {
-    libraries: [],
-    webAnimations: [],
-    gsapTweens: [],
-    lottiePlayers: [],
-    scrollBindings: {
-      hasScrollTrigger: false,
-      hasIntersectionObserver: false,
-      scrollTriggers: [],
-      hasScrollSnap: false,
-      hasScrollTimeline: false,
-    },
-  };
-
-  function buildSelector(el) {
-    if (!el || !el.tagName) return 'unknown';
-    const tag = el.tagName.toLowerCase();
-    if (el.id) return tag + '#' + el.id;
-    if (typeof el.className === 'string' && el.className.trim()) {
-      const firstClass = el.className.trim().split(/\s+/).slice(0, 2).join('.');
-      if (firstClass) return tag + '.' + firstClass;
-    }
-    return tag;
-  }
-
-  /* Layer 1: Library Detection */
-  try {
-    if (typeof gsap !== 'undefined') {
-      result.libraries.push({ name: 'gsap', version: typeof gsap.version === 'string' ? gsap.version : 'unknown' });
-    }
-    if (typeof ScrollTrigger !== 'undefined') {
-      result.libraries.push({ name: 'scrolltrigger', version: 'detected' });
-      result.scrollBindings.hasScrollTrigger = true;
-    }
-    if (typeof lottie !== 'undefined' || typeof bodymovin !== 'undefined') {
-      result.libraries.push({ name: 'lottie', version: 'detected' });
-    }
-    if (document.querySelector('lottie-player, dotlottie-player')) {
-      if (!result.libraries.some(function(l) { return l.name === 'lottie'; })) {
-        result.libraries.push({ name: 'lottie', version: 'web-component' });
-      }
-    }
-    if (document.querySelector('[data-framer-name], [data-framer-component-type]')) {
-      result.libraries.push({ name: 'framer-motion', version: 'detected' });
-    }
-  } catch(e) {}
-
-  /* Layer 2: Web Animations API */
-  try {
-    var animations = document.getAnimations();
-    for (var ai = 0; ai < Math.min(animations.length, maxAnimations); ai++) {
-      var anim = animations[ai];
-      var effect = anim.effect;
-      if (!effect || !effect.target) continue;
-
-      var target = effect.target;
-      var selector = buildSelector(target);
-
-      var keyframes = [];
-      try { keyframes = effect.getKeyframes(); } catch(e) {}
-
-      var computedTiming = {};
-      try { computedTiming = effect.getComputedTiming(); } catch(e) {}
-
-      var timelineType = 'document';
-      try {
-        if (anim.timeline && anim.timeline.constructor) {
-          var tlName = anim.timeline.constructor.name;
-          if (tlName === 'ScrollTimeline') timelineType = 'scroll';
-          else if (tlName === 'ViewTimeline') timelineType = 'view';
-        }
-      } catch(e) {}
-
-      if (timelineType !== 'document') {
-        result.scrollBindings.hasScrollTimeline = true;
-      }
-
-      result.webAnimations.push({
-        selector: selector,
-        playState: anim.playState,
-        animationName: anim.animationName || anim.id || '',
-        keyframes: keyframes.map(function(kf) {
-          var props = {};
-          for (var k in kf) {
-            if (k !== 'offset' && k !== 'computedOffset' && k !== 'easing' && k !== 'composite') {
-              props[k] = String(kf[k]);
-            }
-          }
-          return {
-            offset: kf.computedOffset != null ? kf.computedOffset : (kf.offset || 0),
-            properties: props,
-            easing: kf.easing || 'linear',
-          };
-        }),
-        timing: {
-          duration: typeof computedTiming.duration === 'number' ? computedTiming.duration : 0,
-          delay: computedTiming.delay || 0,
-          easing: computedTiming.easing || 'linear',
-          iterations: computedTiming.iterations != null ? computedTiming.iterations : 1,
-          direction: computedTiming.direction || 'normal',
-          fillMode: computedTiming.fill || 'none',
-        },
-        timelineType: timelineType,
-      });
-    }
-  } catch(e) {}
-
-  /* Layer 3: GSAP Introspection */
-  try {
-    if (typeof gsap !== 'undefined' && gsap.globalTimeline) {
-      var children = gsap.globalTimeline.getChildren(true, true, false);
-      for (var gi = 0; gi < Math.min(children.length, maxAnimations); gi++) {
-        var tween = children[gi];
-        var targets = tween.targets ? tween.targets() : [];
-        if (targets.length === 0) continue;
-
-        var gsSelector = buildSelector(targets[0]);
-        var vars = {};
-        if (tween.vars) {
-          for (var vk in tween.vars) {
-            var vv = tween.vars[vk];
-            if (typeof vv === 'number' || typeof vv === 'string') {
-              vars[vk] = vv;
-            }
-          }
-        }
-
-        result.gsapTweens.push({
-          selector: gsSelector,
-          duration: typeof tween.duration === 'function' ? tween.duration() : 0,
-          delay: typeof tween.delay === 'function' ? tween.delay() : 0,
-          ease: tween.vars && tween.vars.ease ? tween.vars.ease : 'power1.out',
-          vars: vars,
-          startTime: typeof tween.startTime === 'function' ? tween.startTime() : 0,
-        });
-      }
-    }
-  } catch(e) {}
-
-  /* Layer 4: Lottie Extraction */
-  try {
-    var lottieRef = (typeof lottie !== 'undefined') ? lottie : ((typeof bodymovin !== 'undefined') ? bodymovin : null);
-    if (lottieRef && typeof lottieRef.getRegisteredAnimations === 'function') {
-      var registered = lottieRef.getRegisteredAnimations();
-      for (var li = 0; li < Math.min(registered.length, 20); li++) {
-        var la = registered[li];
-        var container = la.wrapper || la.container;
-        result.lottiePlayers.push({
-          selector: container ? buildSelector(container) : 'lottie-unknown',
-          frameRate: la.frameRate || (la.animationData && la.animationData.fr) || 0,
-          totalFrames: la.totalFrames || (la.animationData && la.animationData.op) || 0,
-          duration: typeof la.getDuration === 'function' ? la.getDuration(false) : 0,
-        });
-      }
-    }
-
-    var players = document.querySelectorAll('lottie-player, dotlottie-player');
-    for (var pi = 0; pi < Math.min(players.length, 20); pi++) {
-      var pSelector = buildSelector(players[pi]);
-      if (!result.lottiePlayers.some(function(l) { return l.selector === pSelector; })) {
-        result.lottiePlayers.push({ selector: pSelector, frameRate: 0, totalFrames: 0, duration: 0 });
-      }
-    }
-  } catch(e) {}
-
-  /* Layer 5: Passive Scroll Detection */
-  try {
-    if (typeof ScrollTrigger !== 'undefined' && typeof ScrollTrigger.getAll === 'function') {
-      var triggers = ScrollTrigger.getAll();
-      for (var si = 0; si < Math.min(triggers.length, 50); si++) {
-        var st = triggers[si];
-        result.scrollBindings.scrollTriggers.push({
-          triggerSelector: st.trigger ? buildSelector(st.trigger) : '',
-          isActive: !!st.isActive,
-        });
-      }
-    }
-  } catch(e) {}
-
-  try {
-    var scrollSnap = window.getComputedStyle(document.documentElement).scrollSnapType;
-    if (scrollSnap && scrollSnap !== 'none') {
-      result.scrollBindings.hasScrollSnap = true;
-    }
-  } catch(e) {}
-
-  return result;
-})();`;
-function convertObserverResult(raw) {
-    const tokens = [];
-    const libraryNames = new Set(raw.libraries.map((l) => l.name));
-    // Convert Web Animations API results
-    for (const wa of raw.webAnimations) {
-        const intent = classifyMotionIntent(wa.keyframes);
-        let library = 'css';
-        if (libraryNames.has('framer-motion')) {
-            library = 'framer-motion';
-        }
-        const token = {
-            selector: wa.selector,
-            library,
-            motionIntent: intent,
-            timing: {
-                duration: wa.timing.duration,
-                delay: wa.timing.delay,
-                easing: wa.timing.easing,
-                iterations: wa.timing.iterations === Infinity ? Infinity : wa.timing.iterations,
-                direction: wa.timing.direction,
-                fillMode: wa.timing.fillMode,
-            },
-            keyframes: wa.keyframes,
-            trigger: wa.timelineType === 'scroll' || wa.timelineType === 'view' ? 'scroll' : 'load',
-        };
-        if (wa.timelineType !== 'document') {
-            token.scrollBinding = {
-                hasScrollTrigger: false,
-                hasIntersectionObserver: false,
-                scrollTimelineAxis: 'block',
-            };
-        }
-        // Detect physics from keyframes
-        const allProps = new Set();
-        for (const kf of wa.keyframes) {
-            for (const prop of Object.keys(kf.properties))
-                allProps.add(prop);
-        }
-        if (allProps.has('transform')) {
-            for (const fnName of ['translateX', 'translateY', 'scale', 'rotate']) {
-                const physics = detectPhysics(wa.keyframes, fnName);
-                if (physics) {
-                    token.physics = physics;
-                    token.motionIntent = physics.type === 'spring' ? 'spring' : 'bounce';
-                    break;
-                }
-            }
-        }
-        tokens.push(token);
-    }
-    // Convert GSAP tweens
-    for (const tween of raw.gsapTweens) {
-        const token = {
-            selector: tween.selector,
-            library: 'gsap',
-            motionIntent: 'complex',
-            timing: {
-                duration: tween.duration * 1000,
-                delay: tween.delay * 1000,
-                easing: tween.ease || 'power1.out',
-                iterations: 1,
-                direction: 'normal',
-                fillMode: 'none',
-            },
-            trigger: 'load',
-            gsapVars: tween.vars,
-        };
-        const physics = classifyGsapEasing(tween.ease);
-        if (physics) {
-            token.physics = physics;
-            token.motionIntent = physics.type === 'spring' ? 'spring' : 'bounce';
-        }
-        else {
-            const varKeys = Object.keys(tween.vars);
-            if (varKeys.some((k) => ['x', 'y', 'xPercent', 'yPercent'].includes(k))) {
-                token.motionIntent = 'slide';
-            }
-            else if (varKeys.some((k) => ['scale', 'scaleX', 'scaleY'].includes(k))) {
-                token.motionIntent = 'scale';
-            }
-            else if (varKeys.some((k) => ['rotation', 'rotationX', 'rotationY'].includes(k))) {
-                token.motionIntent = 'rotate';
-            }
-            else if (varKeys.includes('opacity')) {
-                token.motionIntent = 'fade';
-            }
-        }
-        if (raw.scrollBindings.hasScrollTrigger) {
-            const matchingTrigger = raw.scrollBindings.scrollTriggers.find((st) => st.triggerSelector === tween.selector);
-            if (matchingTrigger) {
-                token.trigger = 'scroll';
-                token.scrollBinding = {
-                    triggerSelector: matchingTrigger.triggerSelector,
-                    hasScrollTrigger: true,
-                    hasIntersectionObserver: false,
-                };
-            }
-        }
-        tokens.push(token);
-    }
-    // Convert Lottie players
-    for (const lp of raw.lottiePlayers) {
-        tokens.push({
-            selector: lp.selector,
-            library: 'lottie',
-            motionIntent: 'complex',
-            trigger: 'load',
-            lottieMetadata: {
-                frameRate: lp.frameRate,
-                totalFrames: lp.totalFrames,
-                duration: lp.duration,
-            },
-        });
-    }
-    return tokens;
-}
 function normalizeResult(result) {
     return {
         pageTitle: result.pageTitle ?? undefined,
@@ -640,6 +398,7 @@ function normalizeResult(result) {
         typography: result.typography ?? [],
         components: result.components ?? [],
         motion: result.motion ?? [],
+        keyframes: result.keyframes ?? [],
         layout: result.layout ?? [],
         cssVariables: result.cssVariables ?? {},
         stateStyles: result.stateStyles ?? [],
@@ -678,6 +437,7 @@ function mergeAnalysis(all) {
     }
     const componentMap = new Map();
     const motionMap = new Map();
+    const keyframeMap = new Map();
     const layoutMap = new Map();
     const stateMap = new Map();
     const cssVariables = {};
@@ -690,13 +450,16 @@ function mergeAnalysis(all) {
             }
         }
         for (const motion of entry.motion) {
-            const key = ('library' in motion && 'motionIntent' in motion)
-                ? `${motion.selector}|${motion.library}|${motion.motionIntent}`
-                : `${motion.selector}|${motion.transition}|${motion.animation}|${motion.transform}`;
+            const key = `${motion.selector}|${motion.transition}|${motion.animation}|${motion.transform}`;
             if (!motionMap.has(key)) {
                 motionMap.set(key, motion);
             }
         }
+        for (const kf of entry.keyframes ?? []) {
+            if (!keyframeMap.has(kf.name)) {
+                keyframeMap.set(kf.name, kf);
+            }
+        }
         for (const layout of entry.layout) {
             const key = `${layout.tag}|${layout.selector}|${layout.role}`;
             if (!layoutMap.has(key)) {
@@ -718,6 +481,7 @@ function mergeAnalysis(all) {
         typography: [...typographyMap.values()].sort((a, b) => b.count - a.count).slice(0, 120),
         components: [...componentMap.values()].slice(0, 260),
         motion: [...motionMap.values()].slice(0, 260),
+        keyframes: [...keyframeMap.values()].slice(0, 80),
         layout: [...layoutMap.values()].slice(0, 220),
         cssVariables,
         stateStyles: [...stateMap.values()].slice(0, 300),
@@ -740,6 +504,7 @@ async function collectInteractiveStateStyles(params) {
     const snapshot = await runAgentBrowserJson(['snapshot', '-i', '-d', '2'], {
         session: params.sessionName,
         cwd: params.workingDir,
+        headed: params.headed,
     });
     const refs = (snapshot.data.refs ?? {});
     const refIds = Object.keys(refs).slice(0, 8);
@@ -748,10 +513,12 @@ async function collectInteractiveStateStyles(params) {
         await runAgentBrowserJson(['hover', ref], {
             session: params.sessionName,
             cwd: params.workingDir,
+            headed: params.headed,
         }).catch(() => undefined);
         const hoverStyles = await runAgentBrowserJson(['get', 'styles', ref], {
             session: params.sessionName,
             cwd: params.workingDir,
+            headed: params.headed,
         }).catch(() => undefined);
         if (hoverStyles?.success) {
             const declarations = parseStylesFromGetStyles(hoverStyles.data);
@@ -762,10 +529,12 @@ async function collectInteractiveStateStyles(params) {
         await runAgentBrowserJson(['focus', ref], {
             session: params.sessionName,
             cwd: params.workingDir,
+            headed: params.headed,
         }).catch(() => undefined);
         const focusStyles = await runAgentBrowserJson(['get', 'styles', ref], {
             session: params.sessionName,
             cwd: params.workingDir,
+            headed: params.headed,
         }).catch(() => undefined);
         if (focusStyles?.success) {
             const declarations = parseStylesFromGetStyles(focusStyles.data);
@@ -791,6 +560,7 @@ async function getCurrentUrl(params) {
     const response = await runAgentBrowserJson(['get', 'url'], {
         session: params.sessionName,
         cwd: params.workingDir,
+        headed: params.headed,
     }).catch(() => undefined);
     return response?.success ? response.data.url : undefined;
 }
@@ -802,6 +572,7 @@ async function collectJourney(params) {
     const snapshot = await runAgentBrowserJson(['snapshot', '-i', '-d', '2'], {
         session: params.sessionName,
         cwd: params.workingDir,
+        headed: params.headed,
     });
     const refs = (snapshot.data.refs ?? {});
     const clickable = Object.entries(refs)
@@ -814,6 +585,7 @@ async function collectJourney(params) {
         const clickResult = await runAgentBrowserJson(['click', ref], {
             session: params.sessionName,
             cwd: params.workingDir,
+            headed: params.headed,
         }).catch(() => undefined);
         if (!clickResult?.success) {
             continue;
@@ -821,10 +593,12 @@ async function collectJourney(params) {
         await runAgentBrowserJson(['wait', '1200'], {
             session: params.sessionName,
             cwd: params.workingDir,
+            headed: params.headed,
         }).catch(() => undefined);
         const summaryResult = await runAgentBrowserJson(['eval', PAGE_SUMMARY_SCRIPT], {
             session: params.sessionName,
             cwd: params.workingDir,
+            headed: params.headed,
         }).catch(() => undefined);
         const summaryData = summaryResult?.data.result ?? {};
         const toUrl = summaryData.url ?? (await getCurrentUrl(params));
@@ -837,22 +611,25 @@ async function collectJourney(params) {
                 title: summaryData.title,
                 summary: summaryData.summary,
             });
+            params.onStep?.(i + 1, toUrl);
             await runAgentBrowserJson(['back'], {
                 session: params.sessionName,
                 cwd: params.workingDir,
+                headed: params.headed,
             }).catch(() => undefined);
             await runAgentBrowserJson(['wait', '900'], {
                 session: params.sessionName,
                 cwd: params.workingDir,
+                headed: params.headed,
             }).catch(() => undefined);
         }
     }
     return steps;
 }
 export async function captureDesignFromUrl(params) {
-    const { url, sessionName, screenshotPath, workingDir, journeySteps = 3, responsiveViewports = DEFAULT_VIEWPORTS, } = params;
+    const { url, sessionName, screenshotPath, workingDir, headed = false, journeySteps = 3, responsiveViewports = DEFAULT_VIEWPORTS, callbacks, } = params;
     await fs.ensureDir(path.dirname(screenshotPath));
-    await runAgentBrowserJson(['open', url], { session: sessionName, cwd: workingDir });
+    await runAgentBrowserJson(['open', url], { session: sessionName, cwd: workingDir, headed });
     try {
         const captures = [];
         const responsiveSnapshots = [];
@@ -860,14 +637,17 @@ export async function captureDesignFromUrl(params) {
             await runAgentBrowserJson(['set', 'viewport', String(viewport.width), String(viewport.height)], {
                 session: sessionName,
                 cwd: workingDir,
+                headed,
             });
             await runAgentBrowserJson(['wait', '900'], {
                 session: sessionName,
                 cwd: workingDir,
+                headed,
             });
             const extraction = await runAgentBrowserJson(['eval', EXTRACTION_SCRIPT], {
                 session: sessionName,
                 cwd: workingDir,
+                headed,
             });
             if (!extraction.success) {
                 throw new Error(`Extraction failed: ${extraction.error ?? 'Unknown error'}`);
@@ -875,72 +655,41 @@ export async function captureDesignFromUrl(params) {
             const normalized = normalizeResult(extraction.data.result ?? {});
             captures.push(normalized);
             responsiveSnapshots.push(toResponsiveSnapshot(viewport.label, normalized));
+            callbacks?.onViewportExtracted?.(viewport.label, normalized);
         }
         await runAgentBrowserJson(['set', 'viewport', '1440', '1200'], {
             session: sessionName,
             cwd: workingDir,
+            headed,
         }).catch(() => undefined);
-        // Scroll through the page to trigger lazy-loaded animation libraries (GSAP, ScrollTrigger, etc.)
-        try {
-            const pageInfo = await runAgentBrowserJson(['eval',
-                `({ height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight), vh: window.innerHeight })`
-            ], { session: sessionName, cwd: workingDir });
-            const { height = 5000, vh = 800 } = pageInfo.data.result ?? {};
-            const scrollSteps = Math.min(Math.ceil(height / vh), 15);
-            const stepSize = Math.ceil(height / scrollSteps);
-            for (let i = 1; i <= scrollSteps; i++) {
-                await runAgentBrowserJson(['eval', `window.scrollTo({top:${i * stepSize},behavior:"instant"});true`], { session: sessionName, cwd: workingDir });
-                await runAgentBrowserJson(['wait', '200'], { session: sessionName, cwd: workingDir });
-            }
-            await runAgentBrowserJson(['eval', 'window.scrollTo({top:0,behavior:"instant"});true'], { session: sessionName, cwd: workingDir });
-            await runAgentBrowserJson(['wait', '1500'], { session: sessionName, cwd: workingDir });
-        }
-        catch {
-            // Scroll is best-effort; continue to animation capture
-        }
-        // Run animation observer script (once, at desktop viewport)
-        let animationTokens = [];
-        try {
-            const animResult = await runAgentBrowserJson(['eval', ANIMATION_OBSERVER_SCRIPT], {
-                session: sessionName,
-                cwd: workingDir,
-            });
-            if (animResult.success && animResult.data.result) {
-                const rawAnimData = animResult.data.result;
-                animationTokens = convertObserverResult(rawAnimData);
-                animationTokens = detectAnimationGroups(animationTokens);
-            }
-        }
-        catch {
-            // Animation capture is best-effort; don't fail the whole extraction
-        }
         const snapshotResult = await runAgentBrowserJson(['snapshot', '-c', '-d', '3'], {
             session: sessionName,
             cwd: workingDir,
+            headed,
         });
         const interactiveStates = await collectInteractiveStateStyles({
             sessionName,
             workingDir,
+            headed,
         });
+        callbacks?.onInteractiveStates?.(interactiveStates.length);
         const journey = await collectJourney({
             sessionName,
             workingDir,
+            headed,
             maxSteps: journeySteps,
+            onStep: callbacks?.onJourneyStep,
         });
         await runAgentBrowserJson(['screenshot', screenshotPath, '--full'], {
             session: sessionName,
             cwd: workingDir,
+            headed,
         });
         const merged = mergeAnalysis(captures);
+        callbacks?.onMerged?.(merged);
         const stateStyles = [...(merged.stateStyles ?? []), ...interactiveStates].slice(0, 400);
-        // Merge: prefer new AnimationTokens, fall back to legacy MotionTokens
-        const mergedMotion = [
-            ...animationTokens,
-            ...merged.motion.filter((legacyToken) => !animationTokens.some((at) => at.selector === legacyToken.selector)),
-        ];
         return {
             ...merged,
-            motion: mergedMotion,
             accessibilitySnapshot: snapshotResult.data.snapshot ?? undefined,
             responsiveSnapshots,
             stateStyles,
@@ -948,7 +697,7 @@ export async function captureDesignFromUrl(params) {
         };
     }
     finally {
-        await runAgentBrowserJson(['close'], { session: sessionName, cwd: workingDir }).catch(() => undefined);
+        await runAgentBrowserJson(['close'], { session: sessionName, cwd: workingDir, headed }).catch(() => undefined);
     }
 }
 //# sourceMappingURL=extractFromUrl.js.map