@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/design/app/components/design/bridge/motion-preview.bridge.ts

@@ -0,0 +1,605 @@
+/**
+ * Motion-preview bridge — injected into every canvas iframe.
+ *
+ * Allows the MotionDock's scrubbing preview to animate elements in ALL editor
+ * modes without writing anything to the DB, Yjs state, or source files.
+ *
+ * Protocol (parent → iframe):
+ *
+ *   { type: 'motion-load-tracks', tracks: Array<{
+ *       targetNodeId: string,
+ *       property: string,
+ *       keyframes: Array<{ t: number, value: string, ease?: string }>
+ *     }>, defaultEase?: string }
+ *     Load (or replace) the track list. t ∈ [0, 1]. defaultEase is the
+ *     timeline-level fallback easing applied to any keyframe that omits its
+ *     own `ease` (mirrors the compiled stylesheet); defaults to "ease".
+ *
+ *   { type: 'motion-preview', t, durationMs }
+ *     Seek all loaded tracks to normalised position t ∈ [0, 1] and apply
+ *     interpolated CSS property values as inline styles on the matching
+ *     [data-agent-native-node-id="…"] elements. Never writes to storage.
+ *
+ *   { type: 'motion-preview-clear' }
+ *     Remove all motion-preview inline-style overrides and the in-memory
+ *     track list. Called when the dock is closed or the timeline is discarded.
+ *
+ * Rules:
+ *   • No import/require of any module (DOM globals only).
+ *   • No references to outer/module scope (the code runs inside an iframe).
+ *   • Wrap everything in a self-executing IIFE.
+ */
+(function () {
+  // Track list loaded by 'motion-load-tracks'.
+  var loadedTracks: Array<{
+    targetNodeId: string;
+    property: string;
+    keyframes: Array<{ t: number; value: string; ease?: string }>;
+  }> = [];
+  // Timeline-level default easing sent alongside the tracks. Applied to any
+  // keyframe that omits its own `ease`, matching the compiled stylesheet's
+  // defaultEase fallback so scrub/playback preview equals the persisted CSS.
+  // Falls back to "ease" when the loader doesn't provide one.
+  var loadedDefaultEase = "ease";
+  // Map of nodeId -> [property, ...] we have touched, for cleanup.
+  var touchedProps: Record<string, string[]> = {};
+  // Map of nodeId -> property -> original inline style value.
+  var originalInlineValues: Record<string, Record<string, string>> = {};
+
+  function camelizeProp(prop: string): string {
+    return String(prop).replace(/-([a-z])/g, function (_m: string, c: string) {
+      return c.toUpperCase();
+    });
+  }
+
+  function formatNum(n: number): string {
+    if (!Number.isFinite(n)) return "0";
+    return (Math.round(n * 10000) / 10000).toString();
+  }
+
+  function clamp255(x: number): number {
+    return x < 0 ? 0 : x > 255 ? 255 : x;
+  }
+  function clamp01(x: number): number {
+    return x < 0 ? 0 : x > 1 ? 1 : x;
+  }
+
+  function parseAlpha(s: string): number {
+    if (typeof s === "string" && s.indexOf("%") >= 0)
+      return parseFloat(s) / 100;
+    return parseFloat(s);
+  }
+
+  function hueToRgb(p: number, q: number, h: number): number {
+    if (h < 0) h += 1;
+    if (h > 1) h -= 1;
+    if (h < 1 / 6) return p + (q - p) * 6 * h;
+    if (h < 1 / 2) return q;
+    if (h < 2 / 3) return p + (q - p) * (2 / 3 - h) * 6;
+    return p;
+  }
+
+  function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+    h = (((h % 360) + 360) % 360) / 360;
+    s = clamp01(s);
+    l = clamp01(l);
+    if (s === 0) return [l * 255, l * 255, l * 255];
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+    return [
+      hueToRgb(p, q, h + 1 / 3) * 255,
+      hueToRgb(p, q, h) * 255,
+      hueToRgb(p, q, h - 1 / 3) * 255,
+    ];
+  }
+
+  // Parse a CSS color (hex, rgb/rgba, hsl/hsla) into [r, g, b, a] or null.
+  function parseColor(str: string): [number, number, number, number] | null {
+    if (typeof str !== "string") return null;
+    var s = str.trim();
+    var hex = /^#([0-9a-fA-F]{3,8})$/.exec(s);
+    if (hex) {
+      var h = hex[1];
+      if (h.length === 3 || h.length === 4) {
+        return [
+          parseInt(h.charAt(0) + h.charAt(0), 16),
+          parseInt(h.charAt(1) + h.charAt(1), 16),
+          parseInt(h.charAt(2) + h.charAt(2), 16),
+          h.length === 4 ? parseInt(h.charAt(3) + h.charAt(3), 16) / 255 : 1,
+        ];
+      }
+      if (h.length === 6 || h.length === 8) {
+        return [
+          parseInt(h.slice(0, 2), 16),
+          parseInt(h.slice(2, 4), 16),
+          parseInt(h.slice(4, 6), 16),
+          h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1,
+        ];
+      }
+      return null;
+    }
+    var rgb = /^rgba?\(([^)]+)\)$/i.exec(s);
+    if (rgb) {
+      var rp = rgb[1].split(/[\s,\/]+/).filter(function (x: string) {
+        return x.length;
+      });
+      if (rp.length >= 3) {
+        return [
+          parseFloat(rp[0]),
+          parseFloat(rp[1]),
+          parseFloat(rp[2]),
+          rp.length >= 4 ? parseAlpha(rp[3]) : 1,
+        ];
+      }
+      return null;
+    }
+    var hsl = /^hsla?\(([^)]+)\)$/i.exec(s);
+    if (hsl) {
+      var hp = hsl[1].split(/[\s,\/]+/).filter(function (x: string) {
+        return x.length;
+      });
+      if (hp.length >= 3) {
+        var c = hslToRgb(
+          parseFloat(hp[0]),
+          parseFloat(hp[1]) / 100,
+          parseFloat(hp[2]) / 100,
+        );
+        return [c[0], c[1], c[2], hp.length >= 4 ? parseAlpha(hp[3]) : 1];
+      }
+      return null;
+    }
+    return null;
+  }
+
+  function lerpColorArr(
+    a: [number, number, number, number],
+    b: [number, number, number, number],
+    ratio: number,
+  ): [number, number, number, number] {
+    return [
+      a[0] + (b[0] - a[0]) * ratio,
+      a[1] + (b[1] - a[1]) * ratio,
+      a[2] + (b[2] - a[2]) * ratio,
+      a[3] + (b[3] - a[3]) * ratio,
+    ];
+  }
+
+  function formatColor(c: [number, number, number, number]): string {
+    var r = Math.round(clamp255(c[0]));
+    var g = Math.round(clamp255(c[1]));
+    var b = Math.round(clamp255(c[2]));
+    var a = clamp01(c[3]);
+    if (a >= 1) return "rgb(" + r + ", " + g + ", " + b + ")";
+    return (
+      "rgba(" +
+      r +
+      ", " +
+      g +
+      ", " +
+      b +
+      ", " +
+      Math.round(a * 1000) / 1000 +
+      ")"
+    );
+  }
+
+  type Segment =
+    | { lit: string }
+    | { type: "color"; value: [number, number, number, number] }
+    | { type: "num"; value: number; unit: string };
+
+  // Split a value into literal + typed (number / color) segments so two values
+  // that share a skeleton (e.g. 'translateY(16px)' / 'translateY(0px)') can be
+  // interpolated component-wise instead of snapping at the midpoint.
+  function tokenizeSegments(str: string): Segment[] | null {
+    if (typeof str !== "string") return null;
+    var segs: Segment[] = [];
+    var i = 0;
+    var n = str.length;
+    var litStart = 0;
+    var colorRe = /^(#[0-9a-fA-F]{3,8}|rgba?\([^)]*\)|hsla?\([^)]*\))/i;
+    var numRe = /^[+-]?(?:\d+\.?\d*|\.\d+)/;
+    while (i < n) {
+      var rest = str.slice(i);
+      var cm = colorRe.exec(rest);
+      if (cm) {
+        var parsed = parseColor(cm[0]);
+        if (parsed) {
+          if (i > litStart) segs.push({ lit: str.slice(litStart, i) });
+          segs.push({ type: "color", value: parsed });
+          i += cm[0].length;
+          litStart = i;
+          continue;
+        }
+      }
+      // Skip a number when the previous char is a letter — it belongs to an
+      // identifier such as translate3d / matrix3d, not a numeric argument.
+      var prevCh = i > 0 ? str.charAt(i - 1) : "";
+      if (!/[a-zA-Z]/.test(prevCh)) {
+        var nm = numRe.exec(rest);
+        if (nm) {
+          var numText = nm[0];
+          var unit = "";
+          var um = /^[a-z%]+/i.exec(str.slice(i + numText.length));
+          if (um) unit = um[0];
+          if (i > litStart) segs.push({ lit: str.slice(litStart, i) });
+          segs.push({ type: "num", value: parseFloat(numText), unit: unit });
+          i += numText.length + unit.length;
+          litStart = i;
+          continue;
+        }
+      }
+      i++;
+    }
+    if (n > litStart) segs.push({ lit: str.slice(litStart, n) });
+    return segs;
+  }
+
+  function segShape(segs: Segment[]): string {
+    var parts: string[] = [];
+    for (var i = 0; i < segs.length; i++) {
+      var s = segs[i];
+      parts.push("lit" in s ? "L" + s.lit : "T" + s.type);
+    }
+    return parts.join("\x1f");
+  }
+
+  // ── Easing evaluation ─────────────────────────────────────────────────────
+  // Dependency-free copy of the shared evaluateMotionEase algorithm in
+  // shared/motion-timeline.ts (this bridge cannot import modules) — keep the
+  // two in sync. Evaluates CSS timing functions so scrubbing matches the real
+  // compiled animation instead of always lerping linearly.
+
+  // Evaluate y for a CSS cubic-bezier at progress x (Newton + bisection).
+  function cubicBezierY(
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    x: number,
+  ): number {
+    if (x <= 0) return 0;
+    if (x >= 1) return 1;
+    var cx = 3 * x1;
+    var bx = 3 * (x2 - x1) - cx;
+    var ax = 1 - cx - bx;
+    var cy = 3 * y1;
+    var by = 3 * (y2 - y1) - cy;
+    var ay = 1 - cy - by;
+    function sampleX(u: number): number {
+      return ((ax * u + bx) * u + cx) * u;
+    }
+    function sampleY(u: number): number {
+      return ((ay * u + by) * u + cy) * u;
+    }
+    function sampleDX(u: number): number {
+      return (3 * ax * u + 2 * bx) * u + cx;
+    }
+    var u = x;
+    for (var i = 0; i < 8; i++) {
+      var err = sampleX(u) - x;
+      if (Math.abs(err) < 1e-6) return sampleY(u);
+      var d = sampleDX(u);
+      if (Math.abs(d) < 1e-6) break;
+      u = Math.min(1, Math.max(0, u - err / d));
+    }
+    var lo = 0;
+    var hi = 1;
+    u = x;
+    while (hi - lo > 1e-6) {
+      u = (lo + hi) / 2;
+      if (sampleX(u) < x) lo = u;
+      else hi = u;
+    }
+    return sampleY(u);
+  }
+
+  // Evaluate a CSS timing function (keywords, cubic-bezier, steps, spring
+  // approximation) at linear progress x ∈ [0, 1]. Result may overshoot [0, 1]
+  // for overshoot beziers (the dock's "Spring" preset).
+  function evalEase(ease: string | undefined, x: number): number {
+    var clamped = x <= 0 ? 0 : x >= 1 ? 1 : x;
+    var raw = String(ease == null ? "ease" : ease)
+      .trim()
+      .toLowerCase();
+    if (raw === "linear") return clamped;
+    if (raw === "step-start") return clamped > 0 ? 1 : 0;
+    if (raw === "step-end") return clamped >= 1 ? 1 : 0;
+    if (raw === "ease") return cubicBezierY(0.25, 0.1, 0.25, 1, clamped);
+    if (raw === "ease-in") return cubicBezierY(0.42, 0, 1, 1, clamped);
+    if (raw === "ease-out") return cubicBezierY(0, 0, 0.58, 1, clamped);
+    if (raw === "ease-in-out") return cubicBezierY(0.42, 0, 0.58, 1, clamped);
+    var bezier = /^cubic-bezier\(([^)]+)\)$/.exec(raw);
+    if (bezier) {
+      var parts = bezier[1].split(",");
+      if (parts.length === 4) {
+        var p0 = parseFloat(parts[0]);
+        var p1 = parseFloat(parts[1]);
+        var p2 = parseFloat(parts[2]);
+        var p3 = parseFloat(parts[3]);
+        if (
+          Number.isFinite(p0) &&
+          Number.isFinite(p1) &&
+          Number.isFinite(p2) &&
+          Number.isFinite(p3)
+        ) {
+          // x control points must stay in [0, 1]; y may overshoot.
+          return cubicBezierY(
+            Math.min(1, Math.max(0, p0)),
+            p1,
+            Math.min(1, Math.max(0, p2)),
+            p3,
+            clamped,
+          );
+        }
+      }
+    }
+    var steps = /^steps\(([^)]+)\)$/.exec(raw);
+    if (steps) {
+      var stepArgs = steps[1].split(",");
+      var count = parseInt(stepArgs[0], 10);
+      if (Number.isFinite(count) && count > 0) {
+        if (clamped >= 1) return 1;
+        var pos = (stepArgs[1] || "").trim();
+        var jumpStart = pos === "start" || pos === "jump-start";
+        return Math.min(
+          1,
+          (Math.floor(clamped * count) + (jumpStart ? 1 : 0)) / count,
+        );
+      }
+    }
+    // Spring approximation: gentle overshoot bezier.
+    if (raw.indexOf("spring") === 0) {
+      return cubicBezierY(0.34, 1.56, 0.64, 1, clamped);
+    }
+    return clamped;
+  }
+
+  // Build the identity counterpart of a transform/filter list so a
+  // `none` endpoint interpolates smoothly instead of midpoint-snapping
+  // (e.g. none -> translateY(16px) lerps from translateY(0px)).
+  function identityForFunctions(value: string): string | null {
+    var fnRe = /([a-zA-Z][a-zA-Z0-9]*)\(([^)]*)\)/g;
+    var out = "";
+    var lastIndex = 0;
+    var matched = false;
+    var m: RegExpExecArray | null;
+    while ((m = fnRe.exec(value)) !== null) {
+      // Only whitespace may sit between functions in a transform/filter list.
+      if (value.slice(lastIndex, m.index).trim() !== "") return null;
+      var fn = m[1].toLowerCase();
+      var args = m[2];
+      var identity: string | null = null;
+      if (/^translate/.test(fn) || /^skew/.test(fn)) {
+        identity = args.replace(/[+-]?(?:\d+\.?\d*|\.\d+)([a-z%]*)/gi, "0$1");
+      } else if (/^scale/.test(fn)) {
+        identity = args.replace(/[+-]?(?:\d+\.?\d*|\.\d+)/g, "1");
+      } else if (/^rotate/.test(fn) || fn === "hue-rotate") {
+        identity = args.replace(/[+-]?(?:\d+\.?\d*|\.\d+)([a-z%]*)/gi, "0$1");
+      } else if (fn === "matrix") {
+        identity = "1, 0, 0, 1, 0, 0";
+      } else if (
+        fn === "blur" ||
+        fn === "grayscale" ||
+        fn === "sepia" ||
+        fn === "invert"
+      ) {
+        identity = args.replace(/[+-]?(?:\d+\.?\d*|\.\d+)([a-z%]*)/gi, "0$1");
+      } else if (
+        fn === "brightness" ||
+        fn === "contrast" ||
+        fn === "saturate" ||
+        fn === "opacity"
+      ) {
+        identity = args.indexOf("%") >= 0 ? "100%" : "1";
+      } else {
+        // matrix3d, perspective, drop-shadow, unknown functions: bail out.
+        return null;
+      }
+      out += (out ? " " : "") + m[1] + "(" + identity + ")";
+      lastIndex = m.index + m[0].length;
+      matched = true;
+    }
+    if (!matched) return null;
+    if (value.slice(lastIndex).trim() !== "") return null;
+    return out;
+  }
+
+  // Interpolate two keyframe values. Handles plain numbers (with units), CSS
+  // function values (translate/scale/blur/…), numbers embedded in gradients,
+  // and colors (hex / rgb(a) / hsl(a)). Falls back to a midpoint snap only for
+  // genuinely non-interpolable keywords (e.g. none -> block).
+  function lerp(a: string, b: string, ratio: number): string {
+    a = a == null ? "" : String(a);
+    b = b == null ? "" : String(b);
+    if (a === b) return a;
+    // Map a `none` endpoint to the identity form of the other endpoint so
+    // transform/filter tracks seeded from a `none` base animate smoothly.
+    if (a.trim() === "none") {
+      var identA = identityForFunctions(b);
+      if (identA) a = identA;
+    } else if (b.trim() === "none") {
+      var identB = identityForFunctions(a);
+      if (identB) b = identB;
+    }
+    if (a === b) return a;
+    var ca = parseColor(a);
+    var cb = parseColor(b);
+    if (ca && cb) return formatColor(lerpColorArr(ca, cb, ratio));
+    var aSegs = tokenizeSegments(a);
+    var bSegs = tokenizeSegments(b);
+    if (
+      aSegs &&
+      bSegs &&
+      aSegs.length === bSegs.length &&
+      segShape(aSegs) === segShape(bSegs)
+    ) {
+      var out = "";
+      var ok = true;
+      var touched = false;
+      for (var k = 0; k < aSegs.length; k++) {
+        var seg = aSegs[k];
+        if ("lit" in seg) {
+          out += seg.lit;
+          continue;
+        }
+        var other = bSegs[k];
+        if (!other || !("type" in other) || other.type !== seg.type) {
+          ok = false;
+          break;
+        }
+        touched = true;
+        if (seg.type === "color" && "value" in seg && "value" in other) {
+          out += formatColor(
+            lerpColorArr(
+              seg.value as [number, number, number, number],
+              other.value as [number, number, number, number],
+              ratio,
+            ),
+          );
+        } else if ("value" in seg && "value" in other) {
+          var unit =
+            ("unit" in seg ? seg.unit : "") ||
+            ("unit" in other ? other.unit : "") ||
+            "";
+          out +=
+            formatNum(
+              (seg.value as number) +
+                ((other.value as number) - (seg.value as number)) * ratio,
+            ) + unit;
+        }
+      }
+      if (ok && touched) return out;
+    }
+    // Non-interpolable (keywords, mismatched shapes): snap at the midpoint.
+    return ratio < 0.5 ? a : b;
+  }
+
+  function interpolate(
+    keyframes: Array<{ t: number; value: string; ease?: string }>,
+    t: number,
+  ): string {
+    if (!keyframes || keyframes.length === 0) return "";
+    if (keyframes.length === 1) return keyframes[0].value;
+    // Find surrounding keyframes.
+    var prev = keyframes[0];
+    var next = keyframes[keyframes.length - 1];
+    for (var i = 0; i < keyframes.length - 1; i++) {
+      if (t >= keyframes[i].t && t <= keyframes[i + 1].t) {
+        prev = keyframes[i];
+        next = keyframes[i + 1];
+        break;
+      }
+    }
+    var span = next.t - prev.t;
+    if (span <= 0) return prev.value;
+    var ratio = Math.max(0, Math.min(1, (t - prev.t) / span));
+    // Per-keyframe ease shapes the interval to the NEXT keyframe (standard
+    // CSS keyframe semantics). A keyframe that omits its own ease falls back to
+    // the timeline's defaultEase (loadedDefaultEase) so scrub/playback preview
+    // matches the compiled stylesheet, which uses that same fallback when it
+    // emits animation-timing-function. Overshoot beziers may push the eased
+    // ratio outside [0, 1] on purpose — lerp extrapolates.
+    var kfEase = prev.ease == null ? loadedDefaultEase : prev.ease;
+    var eased = evalEase(kfEase, ratio);
+    return lerp(prev.value, next.value, eased);
+  }
+
+  function applyPreview(t: number): void {
+    for (var i = 0; i < loadedTracks.length; i++) {
+      var track = loadedTracks[i];
+      var el = document.querySelector(
+        '[data-agent-native-node-id="' + track.targetNodeId + '"]',
+      ) as HTMLElement | null;
+      if (!el) continue;
+      var value = interpolate(track.keyframes, t);
+      if (value === "") continue;
+      // Normalize kebab properties (e.g. background-color) to the camelCase
+      // CSSOM accessor; el.style['background-color'] = … is unreliable.
+      var prop = camelizeProp(track.property);
+      if (!originalInlineValues[track.targetNodeId])
+        originalInlineValues[track.targetNodeId] = {};
+      if (!(prop in originalInlineValues[track.targetNodeId])) {
+        originalInlineValues[track.targetNodeId][prop] =
+          (el.style as unknown as Record<string, string>)[prop] || "";
+      }
+      (el.style as unknown as Record<string, string>)[prop] = value;
+      if (!touchedProps[track.targetNodeId])
+        touchedProps[track.targetNodeId] = [];
+      if (touchedProps[track.targetNodeId].indexOf(prop) === -1) {
+        touchedProps[track.targetNodeId].push(prop);
+      }
+    }
+  }
+
+  function clearPreview(): void {
+    var nodeIds = Object.keys(touchedProps);
+    for (var i = 0; i < nodeIds.length; i++) {
+      var el = document.querySelector(
+        '[data-agent-native-node-id="' + nodeIds[i] + '"]',
+      ) as HTMLElement | null;
+      if (!el) continue;
+      var props = touchedProps[nodeIds[i]];
+      for (var j = 0; j < props.length; j++) {
+        var originals = originalInlineValues[nodeIds[i]] || {};
+        (el.style as unknown as Record<string, string>)[props[j]] =
+          Object.prototype.hasOwnProperty.call(originals, props[j])
+            ? originals[props[j]]
+            : "";
+      }
+    }
+    touchedProps = {};
+    originalInlineValues = {};
+    loadedTracks = [];
+    loadedDefaultEase = "ease";
+  }
+
+  // Last previewed playhead position, so reloading the track list (which
+  // resets touched styles to base) can immediately re-apply the current
+  // scrub position instead of leaving the canvas at t=0 while the dock's
+  // playhead still shows the old time.
+  var lastPreviewT: number | null = null;
+
+  window.addEventListener("message", function (e: MessageEvent) {
+    if (e.source !== window.parent) return;
+    if (!e.data || typeof e.data.type !== "string") return;
+    if (e.data.type === "motion-load-tracks") {
+      clearPreview();
+      loadedTracks = Array.isArray(e.data.tracks) ? e.data.tracks : [];
+      // Timeline-level default easing for keyframes that omit their own ease.
+      // Read AFTER clearPreview() (which resets it to "ease") so a non-default
+      // defaultEase from API/agent-created timelines drives the preview.
+      loadedDefaultEase =
+        typeof e.data.defaultEase === "string" && e.data.defaultEase
+          ? e.data.defaultEase
+          : "ease";
+      // Defensive: interpolate() scans keyframe pairs in array order, so an
+      // unsorted track (e.g. mid-drag ordering) would fail the window test.
+      for (var i = 0; i < loadedTracks.length; i++) {
+        var kfs = loadedTracks[i] && loadedTracks[i].keyframes;
+        if (Array.isArray(kfs)) {
+          kfs.sort(function (a, b) {
+            return (a && a.t) - (b && b.t);
+          });
+        }
+      }
+      if (lastPreviewT !== null && loadedTracks.length > 0) {
+        applyPreview(lastPreviewT);
+      }
+      return;
+    }
+    if (e.data.type === "motion-preview") {
+      var t = Number(e.data.t);
+      if (!Number.isFinite(t)) return;
+      t = Math.max(0, Math.min(1, t));
+      lastPreviewT = t;
+      applyPreview(t);
+      return;
+    }
+    if (e.data.type === "motion-preview-clear") {
+      clearPreview();
+      lastPreviewT = null;
+      return;
+    }
+  });
+})();