@it-compiles/anima 0.1.0

package/dist/player-MRRNy8I9.js

@@ -0,0 +1,1458 @@
+function isExpr(v) {
+  return typeof v === "function";
+}
+function isGroup(obj) {
+  return "isGroup" in obj && obj.isGroup === true;
+}
+const Screen = {
+  width: 1280,
+  height: 720,
+  center: () => [640, 360],
+  centerX: () => 640,
+  centerY: () => 360,
+  topLeft: () => [0, 0],
+  topRight: () => [1280, 0],
+  bottomLeft: () => [0, 720],
+  bottomRight: () => [1280, 720]
+};
+const vec = {
+  add: ([x1, y1], [x2, y2]) => [x1 + x2, y1 + y2],
+  sub: ([x1, y1], [x2, y2]) => [x1 - x2, y1 - y2],
+  lerp: ([x1, y1], [x2, y2], u) => [x1 + (x2 - x1) * u, y1 + (y2 - y1) * u]
+};
+const Vec = (x, y) => [x, y];
+const lerp = (a, b, u) => a + (b - a) * u;
+const angle = (deg) => {
+  return deg * (Math.PI / 180);
+};
+function applySR([x, y], scale, rotate, scaleX = 1, scaleY = 1) {
+  const sx = x * scale * scaleX;
+  const sy = y * scale * scaleY;
+  const c = Math.cos(rotate);
+  const s = Math.sin(rotate);
+  return [
+    sx * c - sy * s,
+    sx * s + sy * c
+  ];
+}
+class BBoxHandleImpl {
+  paddingValues = { top: 0, right: 0, bottom: 0, left: 0 };
+  // Store a function that computes the rect lazily
+  computeRect;
+  constructor(computeRect) {
+    this.computeRect = computeRect;
+  }
+  pad(p) {
+    const parentCompute = this.computeRect;
+    const parentPadding = this.paddingValues;
+    let newPadding;
+    if (typeof p === "number") {
+      newPadding = {
+        top: parentPadding.top + p,
+        right: parentPadding.right + p,
+        bottom: parentPadding.bottom + p,
+        left: parentPadding.left + p
+      };
+    } else {
+      newPadding = {
+        top: parentPadding.top + (p.top ?? 0),
+        right: parentPadding.right + (p.right ?? 0),
+        bottom: parentPadding.bottom + (p.bottom ?? 0),
+        left: parentPadding.left + (p.left ?? 0)
+      };
+    }
+    const result = new BBoxHandleImpl(parentCompute);
+    result.paddingValues = newPadding;
+    return result;
+  }
+  getRect() {
+    const baseRect = this.computeRect();
+    return {
+      x: baseRect.x - this.paddingValues.left,
+      y: baseRect.y - this.paddingValues.top,
+      w: baseRect.w + this.paddingValues.left + this.paddingValues.right,
+      h: baseRect.h + this.paddingValues.top + this.paddingValues.bottom
+    };
+  }
+  size() {
+    return (_ctx) => {
+      const r = this.getRect();
+      return [r.w, r.h];
+    };
+  }
+  width() {
+    return (_ctx) => {
+      return this.getRect().w;
+    };
+  }
+  height() {
+    return (_ctx) => {
+      return this.getRect().h;
+    };
+  }
+  whSize() {
+    return {
+      width: this.width(),
+      height: this.height()
+    };
+  }
+  center() {
+    return (_ctx) => {
+      const r = this.getRect();
+      return [r.x + r.w / 2, r.y + r.h / 2];
+    };
+  }
+  anchor(a) {
+    return (_ctx) => {
+      const r = this.getRect();
+      let x = r.x, y = r.y;
+      if (a === "top" || a === "center" || a === "bottom" || a === "baseline") {
+        x = r.x + r.w / 2;
+      } else if (a === "topRight" || a === "right" || a === "bottomRight") {
+        x = r.x + r.w;
+      }
+      if (a === "left" || a === "center" || a === "right") {
+        y = r.y + r.h / 2;
+      } else if (a === "bottomLeft" || a === "bottom" || a === "bottomRight" || a === "baselineLeft" || a === "baseline") {
+        y = r.y + r.h;
+      }
+      return [x, y];
+    };
+  }
+  toRect() {
+    return (_ctx) => {
+      return this.getRect();
+    };
+  }
+}
+class AnimCtxImpl {
+  base = /* @__PURE__ */ new Map();
+  channels = /* @__PURE__ */ new Map();
+  pins = /* @__PURE__ */ new Map();
+  scene = null;
+  debugGroups = [];
+  /** Resolve a Vec2 expression to a concrete Vec2 */
+  resolveVec2(expr) {
+    if (isExpr(expr)) {
+      const ctx = this.createResolvedCtx();
+      return expr(ctx);
+    }
+    return expr;
+  }
+  /** Resolve a number expression to a concrete number */
+  resolveNum(expr) {
+    if (isExpr(expr)) {
+      const ctx = this.createResolvedCtx();
+      return expr(ctx);
+    }
+    return expr;
+  }
+  /** Create a ResolvedCtx based on current state */
+  createResolvedCtx() {
+    if (!this.scene) throw new Error("Scene not set");
+    return this.solve(this.scene);
+  }
+  reset(scene) {
+    this.base.clear();
+    this.channels.clear();
+    this.pins.clear();
+    this.debugGroups = [];
+    this.scene = scene;
+    for (const obj of scene.objects()) {
+      this.base.set(obj, scene.getInitialTransform(obj));
+    }
+  }
+  getDebugGroups() {
+    return this.debugGroups;
+  }
+  getDebugPins() {
+    return this.pins;
+  }
+  /** Get the current world position of a specific anchor on an object */
+  getCurrentAnchorPosition(obj, anchor) {
+    if (!this.scene) throw new Error("Scene not set");
+    const existingPin = this.pins.get(obj);
+    if (existingPin && existingPin.anchor === anchor) {
+      return existingPin.world;
+    }
+    const base = this.base.get(obj);
+    const ch = this.channels.get(obj);
+    const scale = ch?.scale ?? base.scale;
+    const scaleX = (ch?.scaleX ?? 1) * scale;
+    const scaleY = (ch?.scaleY ?? 1) * scale;
+    const rotate = ch?.rotate ?? base.rotate;
+    let originPos;
+    if (existingPin) {
+      const pinnedLocal = this.scene.resolveAnchor(obj, existingPin.anchor);
+      const cos2 = Math.cos(rotate);
+      const sin2 = Math.sin(rotate);
+      const transformedX2 = pinnedLocal[0] * scaleX * cos2 - pinnedLocal[1] * scaleY * sin2;
+      const transformedY2 = pinnedLocal[0] * scaleX * sin2 + pinnedLocal[1] * scaleY * cos2;
+      originPos = [existingPin.world[0] - transformedX2, existingPin.world[1] - transformedY2];
+    } else {
+      originPos = base.translate;
+    }
+    const local = this.scene.resolveAnchor(obj, anchor);
+    const cos = Math.cos(rotate);
+    const sin = Math.sin(rotate);
+    const transformedX = local[0] * scaleX * cos - local[1] * scaleY * sin;
+    const transformedY = local[0] * scaleX * sin + local[1] * scaleY * cos;
+    return [originPos[0] + transformedX, originPos[1] + transformedY];
+  }
+  getGroupBounds(group) {
+    return this.computeGroupWorldBounds(group);
+  }
+  /** Get the origin position of an object in world space, accounting for any existing pin */
+  getOriginPosition(obj) {
+    if (!this.scene) throw new Error("Scene not set");
+    const pin = this.pins.get(obj);
+    if (!pin) {
+      return this.base.get(obj).translate;
+    }
+    const base = this.base.get(obj);
+    const ch = this.channels.get(obj);
+    const scale = ch?.scale ?? base.scale;
+    const scaleX = (ch?.scaleX ?? 1) * scale;
+    const scaleY = (ch?.scaleY ?? 1) * scale;
+    const rotate = ch?.rotate ?? base.rotate;
+    const localAnchor = this.scene.resolveAnchor(obj, pin.anchor);
+    const cos = Math.cos(rotate);
+    const sin = Math.sin(rotate);
+    const transformedX = localAnchor[0] * scaleX * cos - localAnchor[1] * scaleY * sin;
+    const transformedY = localAnchor[0] * scaleX * sin + localAnchor[1] * scaleY * cos;
+    return [pin.world[0] - transformedX, pin.world[1] - transformedY];
+  }
+  resolveGroupAnchor(group, anchor) {
+    const bounds = this.getGroupBounds(group);
+    const anchorMap = {
+      origin: [bounds.x, bounds.y],
+      // For groups, origin is same as topLeft
+      topLeft: [bounds.x, bounds.y],
+      top: [bounds.x + bounds.w / 2, bounds.y],
+      topRight: [bounds.x + bounds.w, bounds.y],
+      left: [bounds.x, bounds.y + bounds.h / 2],
+      center: [bounds.x + bounds.w / 2, bounds.y + bounds.h / 2],
+      right: [bounds.x + bounds.w, bounds.y + bounds.h / 2],
+      bottomLeft: [bounds.x, bounds.y + bounds.h],
+      bottom: [bounds.x + bounds.w / 2, bounds.y + bounds.h],
+      bottomRight: [bounds.x + bounds.w, bounds.y + bounds.h],
+      baselineLeft: [bounds.x, bounds.y + bounds.h],
+      // baseline defaults to bottom
+      baseline: [bounds.x + bounds.w / 2, bounds.y + bounds.h]
+    };
+    return anchorMap[anchor];
+  }
+  getGroupCenter(group) {
+    const bounds = this.getGroupBounds(group);
+    return [bounds.x + bounds.w / 2, bounds.y + bounds.h / 2];
+  }
+  scale(obj) {
+    if (isGroup(obj)) {
+      return {
+        to: (vExpr, u) => {
+          const v = this.resolveNum(vExpr);
+          const groupCenter = this.getGroupCenter(obj);
+          const scaleFactor = lerp(1, v, u);
+          for (const member of obj.members) {
+            const base = this.base.get(member);
+            const ch = this.channels.get(member) ?? {};
+            const currentScale = ch.scale ?? base.scale;
+            ch.scale = currentScale * scaleFactor;
+            const originPos = this.getOriginPosition(member);
+            const offsetFromCenter = vec.sub(originPos, groupCenter);
+            const scaledOffset = [offsetFromCenter[0] * scaleFactor, offsetFromCenter[1] * scaleFactor];
+            const newOriginPos = vec.add(groupCenter, scaledOffset);
+            this.pins.set(member, {
+              anchor: "origin",
+              world: newOriginPos
+            });
+            this.channels.set(member, ch);
+          }
+        },
+        by: (deltaExpr, u) => {
+          const delta = this.resolveNum(deltaExpr);
+          const groupCenter = this.getGroupCenter(obj);
+          const scaleFactor = lerp(1, 1 + delta, u);
+          for (const member of obj.members) {
+            const base = this.base.get(member);
+            const ch = this.channels.get(member) ?? {};
+            const currentScale = ch.scale ?? base.scale;
+            ch.scale = currentScale * scaleFactor;
+            const originPos = this.getOriginPosition(member);
+            const offsetFromCenter = vec.sub(originPos, groupCenter);
+            const scaledOffset = [offsetFromCenter[0] * scaleFactor, offsetFromCenter[1] * scaleFactor];
+            const newOriginPos = vec.add(groupCenter, scaledOffset);
+            this.pins.set(member, {
+              anchor: "origin",
+              world: newOriginPos
+            });
+            this.channels.set(member, ch);
+          }
+        }
+      };
+    }
+    return {
+      to: (vExpr, u) => {
+        const v = this.resolveNum(vExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.scale ?? this.base.get(obj).scale;
+        ch.scale = lerp(current, v, u);
+        this.channels.set(obj, ch);
+      },
+      by: (deltaExpr, u) => {
+        const delta = this.resolveNum(deltaExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.scale ?? this.base.get(obj).scale;
+        ch.scale = current * lerp(1, 1 + delta, u);
+        this.channels.set(obj, ch);
+      }
+    };
+  }
+  scaleX(obj) {
+    return {
+      to: (vExpr, u) => {
+        const v = this.resolveNum(vExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.scaleX ?? 1;
+        ch.scaleX = lerp(current, v, u);
+        this.channels.set(obj, ch);
+      },
+      by: (deltaExpr, u) => {
+        const delta = this.resolveNum(deltaExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.scaleX ?? 1;
+        ch.scaleX = current * lerp(1, 1 + delta, u);
+        this.channels.set(obj, ch);
+      }
+    };
+  }
+  scaleY(obj) {
+    return {
+      to: (vExpr, u) => {
+        const v = this.resolveNum(vExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.scaleY ?? 1;
+        ch.scaleY = lerp(current, v, u);
+        this.channels.set(obj, ch);
+      },
+      by: (deltaExpr, u) => {
+        const delta = this.resolveNum(deltaExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.scaleY ?? 1;
+        ch.scaleY = current * lerp(1, 1 + delta, u);
+        this.channels.set(obj, ch);
+      }
+    };
+  }
+  width(obj) {
+    if (!this.scene) throw new Error("Scene not set");
+    const bounds = this.scene.getBounds(obj);
+    const originalWidth = bounds.w;
+    return {
+      to: (targetPxExpr, u) => {
+        const targetPx = this.resolveNum(targetPxExpr);
+        const targetScaleX = targetPx / originalWidth;
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.scaleX ?? 1;
+        ch.scaleX = lerp(current, targetScaleX, u);
+        this.channels.set(obj, ch);
+      },
+      by: (deltaPxExpr, u) => {
+        const deltaPx = this.resolveNum(deltaPxExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const currentScaleX = ch.scaleX ?? 1;
+        const currentWidth = originalWidth * currentScaleX;
+        const targetWidth = currentWidth + deltaPx;
+        const targetScaleX = targetWidth / originalWidth;
+        ch.scaleX = lerp(currentScaleX, targetScaleX, u);
+        this.channels.set(obj, ch);
+      }
+    };
+  }
+  height(obj) {
+    if (!this.scene) throw new Error("Scene not set");
+    const bounds = this.scene.getBounds(obj);
+    const originalHeight = bounds.h;
+    return {
+      to: (targetPxExpr, u) => {
+        const targetPx = this.resolveNum(targetPxExpr);
+        const targetScaleY = targetPx / originalHeight;
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.scaleY ?? 1;
+        ch.scaleY = lerp(current, targetScaleY, u);
+        this.channels.set(obj, ch);
+      },
+      by: (deltaPxExpr, u) => {
+        const deltaPx = this.resolveNum(deltaPxExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const currentScaleY = ch.scaleY ?? 1;
+        const currentHeight = originalHeight * currentScaleY;
+        const targetHeight = currentHeight + deltaPx;
+        const targetScaleY = targetHeight / originalHeight;
+        ch.scaleY = lerp(currentScaleY, targetScaleY, u);
+        this.channels.set(obj, ch);
+      }
+    };
+  }
+  resize(obj) {
+    if (!this.scene) throw new Error("Scene not set");
+    const bounds = this.scene.getBounds(obj);
+    const originalWidth = bounds.w;
+    const originalHeight = bounds.h;
+    const resolveTarget = (target) => {
+      if (typeof target === "number") return target;
+      if (typeof target === "function") return this.resolveNum(target);
+      if ("fit" in target) return { fit: this.resolveNum(target.fit) };
+      if ("width" in target && "height" in target) {
+        return { width: this.resolveNum(target.width), height: this.resolveNum(target.height) };
+      }
+      if ("width" in target) return { width: this.resolveNum(target.width) };
+      if ("height" in target) return { height: this.resolveNum(target.height) };
+      return target;
+    };
+    const parseTarget = (target) => {
+      if (typeof target === "number") {
+        return { scale: target / originalWidth };
+      }
+      if ("fit" in target) {
+        const scaleW = target.fit / originalWidth;
+        const scaleH = target.fit / originalHeight;
+        return { scale: Math.min(scaleW, scaleH) };
+      }
+      if ("width" in target && "height" in target) {
+        return {
+          scaleX: target.width / originalWidth,
+          scaleY: target.height / originalHeight
+        };
+      }
+      if ("width" in target) {
+        return { scale: target.width / originalWidth };
+      }
+      if ("height" in target) {
+        return { scale: target.height / originalHeight };
+      }
+      return {};
+    };
+    return {
+      to: (targetExpr, u) => {
+        const target = resolveTarget(targetExpr);
+        const { scaleX, scaleY, scale } = parseTarget(target);
+        const ch = this.channels.get(obj) ?? {};
+        if (scale !== void 0) {
+          const currentScale = ch.scale ?? this.base.get(obj).scale;
+          ch.scale = lerp(currentScale, scale, u);
+        } else {
+          if (scaleX !== void 0) {
+            const current = ch.scaleX ?? 1;
+            ch.scaleX = lerp(current, scaleX, u);
+          }
+          if (scaleY !== void 0) {
+            const current = ch.scaleY ?? 1;
+            ch.scaleY = lerp(current, scaleY, u);
+          }
+        }
+        this.channels.set(obj, ch);
+      },
+      by: (deltaExpr, u) => {
+        const delta = resolveTarget(deltaExpr);
+        const ch = this.channels.get(obj) ?? {};
+        if (typeof delta === "number") {
+          const currentScale = ch.scale ?? this.base.get(obj).scale;
+          const currentWidth = originalWidth * currentScale;
+          const targetWidth = currentWidth + delta;
+          const targetScale = targetWidth / originalWidth;
+          ch.scale = lerp(currentScale, targetScale, u);
+        } else if ("fit" in delta) {
+          const currentScale = ch.scale ?? this.base.get(obj).scale;
+          const currentFit = Math.max(originalWidth, originalHeight) * currentScale;
+          const targetFit = currentFit + delta.fit;
+          const scaleW = targetFit / originalWidth;
+          const scaleH = targetFit / originalHeight;
+          const targetScale = Math.min(scaleW, scaleH);
+          ch.scale = lerp(currentScale, targetScale, u);
+        } else if ("width" in delta && "height" in delta) {
+          const currentScaleX = ch.scaleX ?? 1;
+          const currentScaleY = ch.scaleY ?? 1;
+          const currentWidth = originalWidth * currentScaleX;
+          const currentHeight = originalHeight * currentScaleY;
+          const targetScaleX = (currentWidth + delta.width) / originalWidth;
+          const targetScaleY = (currentHeight + delta.height) / originalHeight;
+          ch.scaleX = lerp(currentScaleX, targetScaleX, u);
+          ch.scaleY = lerp(currentScaleY, targetScaleY, u);
+        } else if ("width" in delta) {
+          const currentScale = ch.scale ?? this.base.get(obj).scale;
+          const currentWidth = originalWidth * currentScale;
+          const targetScale = (currentWidth + delta.width) / originalWidth;
+          ch.scale = lerp(currentScale, targetScale, u);
+        } else if ("height" in delta) {
+          const currentScale = ch.scale ?? this.base.get(obj).scale;
+          const currentHeight = originalHeight * currentScale;
+          const targetScale = (currentHeight + delta.height) / originalHeight;
+          ch.scale = lerp(currentScale, targetScale, u);
+        }
+        this.channels.set(obj, ch);
+      }
+    };
+  }
+  fit(obj) {
+    return {
+      to: (bbox, u) => {
+        this.resize(obj).to(bbox.whSize(), u);
+        this.pin(obj, "center").to(bbox.center(), u);
+      },
+      toBBox: (target, u, opts) => {
+        let bbox = this.bbox(target);
+        if (opts?.pad !== void 0) {
+          bbox = bbox.pad(opts.pad);
+        }
+        this.resize(obj).to(bbox.whSize(), u);
+        this.pin(obj, "center").to(bbox.center(), u);
+      }
+    };
+  }
+  computeWorldBounds(obj) {
+    if (!this.scene) throw new Error("Scene not set");
+    const bounds = this.scene.getBounds(obj);
+    const ch = this.channels.get(obj);
+    const base = this.base.get(obj);
+    const pin = this.pins.get(obj);
+    let translate;
+    if (pin) {
+      const local = this.scene.resolveAnchor(obj, pin.anchor);
+      const scale2 = ch?.scale ?? base.scale;
+      const scaleX2 = (ch?.scaleX ?? 1) * scale2;
+      const scaleY2 = (ch?.scaleY ?? 1) * scale2;
+      const rotate = ch?.rotate ?? base.rotate;
+      const cos = Math.cos(rotate);
+      const sin = Math.sin(rotate);
+      const transformedX = local[0] * scaleX2 * cos - local[1] * scaleY2 * sin;
+      const transformedY = local[0] * scaleX2 * sin + local[1] * scaleY2 * cos;
+      translate = [pin.world[0] - transformedX, pin.world[1] - transformedY];
+    } else {
+      translate = base.translate;
+    }
+    const scale = ch?.scale ?? base.scale;
+    const scaleX = (ch?.scaleX ?? 1) * scale;
+    const scaleY = (ch?.scaleY ?? 1) * scale;
+    return {
+      x: translate[0] + bounds.x * scaleX,
+      y: translate[1] + bounds.y * scaleY,
+      w: bounds.w * scaleX,
+      h: bounds.h * scaleY
+    };
+  }
+  computeGroupWorldBounds(group) {
+    let minX = Infinity, minY = Infinity;
+    let maxX = -Infinity, maxY = -Infinity;
+    for (const member of group.members) {
+      const b = this.computeWorldBounds(member);
+      minX = Math.min(minX, b.x);
+      minY = Math.min(minY, b.y);
+      maxX = Math.max(maxX, b.x + b.w);
+      maxY = Math.max(maxY, b.y + b.h);
+    }
+    if (!isFinite(minX)) {
+      return { x: 0, y: 0, w: 0, h: 0 };
+    }
+    return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+  }
+  bbox(obj) {
+    if (!this.scene) throw new Error("Scene not set");
+    const computeRect = () => {
+      return isGroup(obj) ? this.computeGroupWorldBounds(obj) : this.computeWorldBounds(obj);
+    };
+    return new BBoxHandleImpl(computeRect);
+  }
+  rotate(obj) {
+    if (isGroup(obj)) {
+      return {
+        to: (radExpr, u) => {
+          const rad = this.resolveNum(radExpr);
+          const groupCenter = this.getGroupCenter(obj);
+          for (const member of obj.members) {
+            const base = this.base.get(member);
+            const ch = this.channels.get(member) ?? {};
+            const currentRot = ch.rotate ?? base.rotate;
+            ch.rotate = lerp(currentRot, rad, u);
+            const originPos = this.getOriginPosition(member);
+            const offsetFromCenter = vec.sub(originPos, groupCenter);
+            const angle2 = lerp(0, rad, u);
+            const cos = Math.cos(angle2);
+            const sin = Math.sin(angle2);
+            const rotatedOffset = [
+              offsetFromCenter[0] * cos - offsetFromCenter[1] * sin,
+              offsetFromCenter[0] * sin + offsetFromCenter[1] * cos
+            ];
+            const newOriginPos = vec.add(groupCenter, rotatedOffset);
+            this.pins.set(member, {
+              anchor: "origin",
+              world: newOriginPos
+            });
+            this.channels.set(member, ch);
+          }
+        },
+        by: (deltaExpr, u) => {
+          const delta = this.resolveNum(deltaExpr);
+          const groupCenter = this.getGroupCenter(obj);
+          for (const member of obj.members) {
+            const base = this.base.get(member);
+            const ch = this.channels.get(member) ?? {};
+            const currentRot = ch.rotate ?? base.rotate;
+            ch.rotate = currentRot + delta * u;
+            const originPos = this.getOriginPosition(member);
+            const offsetFromCenter = vec.sub(originPos, groupCenter);
+            const angle2 = delta * u;
+            const cos = Math.cos(angle2);
+            const sin = Math.sin(angle2);
+            const rotatedOffset = [
+              offsetFromCenter[0] * cos - offsetFromCenter[1] * sin,
+              offsetFromCenter[0] * sin + offsetFromCenter[1] * cos
+            ];
+            const newOriginPos = vec.add(groupCenter, rotatedOffset);
+            this.pins.set(member, {
+              anchor: "origin",
+              world: newOriginPos
+            });
+            this.channels.set(member, ch);
+          }
+        }
+      };
+    }
+    return {
+      to: (radExpr, u) => {
+        const rad = this.resolveNum(radExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.rotate ?? this.base.get(obj).rotate;
+        ch.rotate = lerp(current, rad, u);
+        this.channels.set(obj, ch);
+      },
+      by: (deltaExpr, u) => {
+        const delta = this.resolveNum(deltaExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.rotate ?? this.base.get(obj).rotate;
+        ch.rotate = current + delta * u;
+        this.channels.set(obj, ch);
+      }
+    };
+  }
+  pin(obj, anchor) {
+    if (isGroup(obj)) {
+      return {
+        to: (posExpr, u) => {
+          const pos = this.resolveVec2(posExpr);
+          const currentAnchor = this.resolveGroupAnchor(obj, anchor);
+          const targetAnchor = vec.lerp(currentAnchor, pos, u);
+          const delta = vec.sub(targetAnchor, currentAnchor);
+          for (const member of obj.members) {
+            const existingPin = this.pins.get(member);
+            const memberAnchor = existingPin?.anchor ?? "origin";
+            const currentAnchorPos = this.getCurrentAnchorPosition(member, memberAnchor);
+            const newPos = vec.add(currentAnchorPos, delta);
+            this.pins.set(member, {
+              anchor: memberAnchor,
+              world: newPos
+            });
+          }
+        },
+        by: (deltaExpr, u) => {
+          const delta = this.resolveVec2(deltaExpr);
+          const interpolatedDelta = vec.lerp([0, 0], delta, u);
+          for (const member of obj.members) {
+            const existingPin = this.pins.get(member);
+            const memberAnchor = existingPin?.anchor ?? "origin";
+            const currentAnchorPos = this.getCurrentAnchorPosition(member, memberAnchor);
+            const newPos = vec.add(currentAnchorPos, interpolatedDelta);
+            this.pins.set(member, {
+              anchor: memberAnchor,
+              world: newPos
+            });
+          }
+        }
+      };
+    }
+    return {
+      to: (posExpr, u) => {
+        const pos = this.resolveVec2(posExpr);
+        const current = this.getCurrentAnchorPosition(obj, anchor);
+        const world = vec.lerp(current, pos, u);
+        this.pins.set(obj, {
+          anchor,
+          world
+        });
+      },
+      by: (deltaExpr, u) => {
+        const delta = this.resolveVec2(deltaExpr);
+        const current = this.getCurrentAnchorPosition(obj, anchor);
+        const world = vec.add(current, vec.lerp([0, 0], delta, u));
+        this.pins.set(obj, {
+          anchor,
+          world
+        });
+      }
+    };
+  }
+  opacity(obj) {
+    if (isGroup(obj)) {
+      return {
+        to: (vExpr, u) => {
+          const v = this.resolveNum(vExpr);
+          for (const member of obj.members) {
+            const ch = this.channels.get(member) ?? {};
+            const current = ch.opacity ?? 1;
+            ch.opacity = lerp(current, v, u);
+            this.channels.set(member, ch);
+          }
+        },
+        by: (deltaExpr, u) => {
+          const delta = this.resolveNum(deltaExpr);
+          for (const member of obj.members) {
+            const ch = this.channels.get(member) ?? {};
+            const current = ch.opacity ?? 1;
+            ch.opacity = current * lerp(1, 1 + delta, u);
+            this.channels.set(member, ch);
+          }
+        }
+      };
+    }
+    return {
+      to: (vExpr, u) => {
+        const v = this.resolveNum(vExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.opacity ?? 1;
+        ch.opacity = lerp(current, v, u);
+        this.channels.set(obj, ch);
+      },
+      by: (deltaExpr, u) => {
+        const delta = this.resolveNum(deltaExpr);
+        const ch = this.channels.get(obj) ?? {};
+        const current = ch.opacity ?? 1;
+        ch.opacity = current * lerp(1, 1 + delta, u);
+        this.channels.set(obj, ch);
+      }
+    };
+  }
+  group(...objects) {
+    const groupObj = {
+      id: /* @__PURE__ */ Symbol("group"),
+      members: objects,
+      isGroup: true
+    };
+    const self = this;
+    const builder = {
+      ...groupObj,
+      pin: (anchor) => {
+        const methods = self.pin(groupObj, anchor);
+        return {
+          to: (pos, u) => {
+            methods.to(pos, u);
+            self.trackGroupDebug(groupObj, u, { anchor, target: pos });
+          },
+          by: (delta, u) => {
+            methods.by(delta, u);
+            self.trackGroupDebug(groupObj, u);
+          }
+        };
+      },
+      scale: () => {
+        const methods = self.scale(groupObj);
+        return {
+          to: (v, u) => {
+            methods.to(v, u);
+            self.trackGroupDebug(groupObj, u);
+          },
+          by: (delta, u) => {
+            methods.by(delta, u);
+            self.trackGroupDebug(groupObj, u);
+          }
+        };
+      },
+      rotate: () => {
+        const methods = self.rotate(groupObj);
+        return {
+          to: (v, u) => {
+            methods.to(v, u);
+            self.trackGroupDebug(groupObj, u);
+          },
+          by: (delta, u) => {
+            methods.by(delta, u);
+            self.trackGroupDebug(groupObj, u);
+          }
+        };
+      },
+      opacity: () => {
+        const methods = self.opacity(groupObj);
+        return {
+          to: (v, u) => {
+            methods.to(v, u);
+            self.trackGroupDebug(groupObj, u);
+          },
+          by: (delta, u) => {
+            methods.by(delta, u);
+            self.trackGroupDebug(groupObj, u);
+          }
+        };
+      }
+    };
+    return builder;
+  }
+  trackGroupDebug(groupObj, u, pin) {
+    if (u < 1) {
+      let entry = this.debugGroups.find(
+        (g) => g.kind === "group" && g.members === groupObj.members
+      );
+      if (!entry) {
+        entry = {
+          members: groupObj.members,
+          kind: "group"
+        };
+        this.debugGroups.push(entry);
+      }
+      if (pin) {
+        entry.pin = pin;
+      }
+      return entry;
+    }
+    return null;
+  }
+  /** Flatten objects for final result (extracts all SceneObjects from groups) */
+  flattenToSceneObjects(objects) {
+    const result = [];
+    for (const obj of objects) {
+      if (isGroup(obj)) {
+        result.push(...obj.members);
+      } else {
+        result.push(obj);
+      }
+    }
+    return result;
+  }
+  /** Get bounds for an ObjRef (single object or group) */
+  getObjRefBounds(obj) {
+    if (isGroup(obj)) {
+      return this.computeGroupWorldBounds(obj);
+    }
+    return this.computeWorldBounds(obj);
+  }
+  /** Get the top-left position of an ObjRef (bounds position, not pin position) */
+  getObjRefPosition(obj) {
+    const bounds = this.getObjRefBounds(obj);
+    return [bounds.x, bounds.y];
+  }
+  /** Move an ObjRef by a delta (moves all members of a group together, preserving pin anchors) */
+  moveObjRef(obj, fromPos, toPos, u) {
+    const delta = vec.sub(toPos, fromPos);
+    const interpolatedDelta = vec.lerp([0, 0], delta, u);
+    if (isGroup(obj)) {
+      for (const member of obj.members) {
+        const existingPin = this.pins.get(member);
+        const anchor = existingPin?.anchor ?? "origin";
+        const currentAnchorPos = this.getCurrentAnchorPosition(member, anchor);
+        const newPos = vec.add(currentAnchorPos, interpolatedDelta);
+        this.pins.set(member, {
+          anchor,
+          world: newPos
+        });
+      }
+    } else {
+      const existingPin = this.pins.get(obj);
+      const anchor = existingPin?.anchor ?? "origin";
+      const currentAnchorPos = this.getCurrentAnchorPosition(obj, anchor);
+      const newPos = vec.add(currentAnchorPos, interpolatedDelta);
+      this.pins.set(obj, {
+        anchor,
+        world: newPos
+      });
+    }
+  }
+  alignOnCrossAxis(start, size, maxSize, align) {
+    if (align === "center") {
+      return start + (maxSize - size) / 2;
+    }
+    if (align === "topLeft" || align === "left" || align === "top") {
+      return start;
+    }
+    if (align === "bottomRight" || align === "right" || align === "bottom") {
+      return start + maxSize - size;
+    }
+    if (align === "baselineLeft" || align === "baseline") {
+      return start + maxSize - size;
+    }
+    return start;
+  }
+  calculateLayoutPositions(objects, axis, align, gap) {
+    if (!this.scene) throw new Error("Scene not set");
+    const boundsList = objects.map((obj) => this.getObjRefBounds(obj));
+    const startX = Math.min(...boundsList.map((b) => b.x));
+    const startY = Math.min(...boundsList.map((b) => b.y));
+    const maxH = Math.max(...boundsList.map((b) => b.h));
+    const maxW = Math.max(...boundsList.map((b) => b.w));
+    const targets = [];
+    let cursor = axis === "x" ? startX : startY;
+    for (let i = 0; i < objects.length; i++) {
+      const b = boundsList[i];
+      let x, y;
+      if (axis === "x") {
+        x = cursor;
+        y = this.alignOnCrossAxis(startY, b.h, maxH, align);
+        cursor += b.w + gap;
+      } else {
+        x = this.alignOnCrossAxis(startX, b.w, maxW, align);
+        y = cursor;
+        cursor += b.h + gap;
+      }
+      targets.push([x, y]);
+    }
+    return targets;
+  }
+  layout(...args) {
+    let opts = {};
+    let objects;
+    const last = args[args.length - 1];
+    if (last && typeof last === "object" && !("id" in last)) {
+      opts = last;
+      objects = args.slice(0, -1);
+    } else {
+      objects = args;
+    }
+    const axis = opts.axis ?? "x";
+    const align = opts.align ?? "center";
+    const gap = opts.gap ?? 0;
+    return {
+      to: (u) => {
+        const targets = this.calculateLayoutPositions(objects, axis, align, gap);
+        for (let i = 0; i < objects.length; i++) {
+          const obj = objects[i];
+          const currentPos = this.getObjRefPosition(obj);
+          const targetPos = targets[i];
+          this.moveObjRef(obj, currentPos, targetPos, u);
+        }
+        const allMembers = this.flattenToSceneObjects(objects);
+        const groupObj = {
+          id: /* @__PURE__ */ Symbol("layout-group"),
+          members: allMembers,
+          isGroup: true
+        };
+        let debugEntry = null;
+        if (u < 1) {
+          debugEntry = {
+            members: allMembers,
+            kind: "layout"
+          };
+          this.debugGroups.push(debugEntry);
+        }
+        const self = this;
+        const builder = {
+          ...groupObj,
+          pin: (anchor) => {
+            const methods = self.pin(groupObj, anchor);
+            return {
+              to: (pos, pinU) => {
+                methods.to(pos, pinU);
+                if (debugEntry) {
+                  debugEntry.pin = { anchor, target: pos };
+                }
+              },
+              by: (delta, pinU) => {
+                methods.by(delta, pinU);
+              }
+            };
+          },
+          scale: () => self.scale(groupObj),
+          rotate: () => self.rotate(groupObj),
+          opacity: () => self.opacity(groupObj)
+        };
+        return builder;
+      }
+    };
+  }
+  inline(...args) {
+    const { objects, gap } = this.parseLayoutArgs(args);
+    return this.layout(...objects, { axis: "x", align: "baselineLeft", gap });
+  }
+  stack(...args) {
+    const { objects, gap } = this.parseLayoutArgs(args);
+    return this.layout(...objects, { axis: "y", align: "center", gap });
+  }
+  paragraph(...args) {
+    const { objects, gap } = this.parseLayoutArgs(args);
+    return this.layout(...objects, { axis: "y", align: "left", gap });
+  }
+  /** Parse layout args - last arg may be a gap number */
+  parseLayoutArgs(args) {
+    const last = args[args.length - 1];
+    if (typeof last === "number") {
+      return { objects: args.slice(0, -1), gap: last };
+    }
+    return { objects: args, gap: 0 };
+  }
+  /** Get anchor offset within bounds */
+  getAnchorOffsetFromRect(bounds, anchor) {
+    let ox = 0, oy = 0;
+    if (anchor === "top" || anchor === "center" || anchor === "bottom" || anchor === "baseline") {
+      ox = bounds.w / 2;
+    } else if (anchor === "topRight" || anchor === "right" || anchor === "bottomRight") {
+      ox = bounds.w;
+    }
+    if (anchor === "left" || anchor === "center" || anchor === "right") {
+      oy = bounds.h / 2;
+    } else if (anchor === "bottomLeft" || anchor === "bottom" || anchor === "bottomRight" || anchor === "baselineLeft" || anchor === "baseline") {
+      oy = bounds.h;
+    }
+    return [ox, oy];
+  }
+  /** Get anchor position in world space for an ObjRef */
+  getObjRefAnchorPosition(obj, anchor) {
+    const bounds = this.getObjRefBounds(obj);
+    const offset = this.getAnchorOffsetFromRect(bounds, anchor);
+    return [bounds.x + offset[0], bounds.y + offset[1]];
+  }
+  align(...args) {
+    let opts = {};
+    let objects;
+    const last = args[args.length - 1];
+    if (last && typeof last === "object" && !("id" in last)) {
+      opts = last;
+      objects = args.slice(0, -1);
+    } else {
+      objects = args;
+    }
+    const anchor = opts.anchor ?? "center";
+    return {
+      to: (u) => {
+        if (!this.scene || objects.length === 0) {
+          const allMembers2 = this.flattenToSceneObjects(objects);
+          return this.group(...allMembers2);
+        }
+        const targetAnchorPos = this.getObjRefAnchorPosition(objects[0], anchor);
+        for (let i = 1; i < objects.length; i++) {
+          const obj = objects[i];
+          const bounds = this.getObjRefBounds(obj);
+          const anchorOffset = this.getAnchorOffsetFromRect(bounds, anchor);
+          const targetPos = [
+            targetAnchorPos[0] - anchorOffset[0],
+            targetAnchorPos[1] - anchorOffset[1]
+          ];
+          const currentPos = this.getObjRefPosition(obj);
+          this.moveObjRef(obj, currentPos, targetPos, u);
+        }
+        const allMembers = this.flattenToSceneObjects(objects);
+        const groupObj = {
+          id: /* @__PURE__ */ Symbol("align-group"),
+          members: allMembers,
+          isGroup: true
+        };
+        let debugEntry = null;
+        if (u < 1) {
+          debugEntry = {
+            members: allMembers,
+            kind: "layout"
+          };
+          this.debugGroups.push(debugEntry);
+        }
+        const self = this;
+        return {
+          ...groupObj,
+          pin: (pinAnchor) => {
+            const methods = self.pin(groupObj, pinAnchor);
+            return {
+              to: (pos, pinU) => {
+                methods.to(pos, pinU);
+                if (debugEntry) {
+                  debugEntry.pin = { anchor: pinAnchor, target: pos };
+                }
+              },
+              by: (delta, pinU) => {
+                methods.by(delta, pinU);
+              }
+            };
+          },
+          scale: () => self.scale(groupObj),
+          rotate: () => self.rotate(groupObj),
+          opacity: () => self.opacity(groupObj)
+        };
+      }
+    };
+  }
+  center(...objects) {
+    return this.align(...objects, { anchor: "center" });
+  }
+  solve(scene) {
+    const resolved = /* @__PURE__ */ new Map();
+    const opacity = /* @__PURE__ */ new Map();
+    for (const obj of scene.objects()) {
+      const base = scene.getInitialTransform(obj);
+      const ch = this.channels.get(obj);
+      const scale = ch?.scale ?? base.scale;
+      const scaleX = ch?.scaleX;
+      const scaleY = ch?.scaleY;
+      const rotate = ch?.rotate ?? base.rotate;
+      let translate = base.translate ?? [0, 0];
+      const pin = this.pins.get(obj);
+      if (pin) {
+        const local = scene.resolveAnchor(obj, pin.anchor);
+        const transformed = applySR(local, scale, rotate, scaleX ?? 1, scaleY ?? 1);
+        translate = vec.sub(pin.world, transformed);
+      }
+      resolved.set(obj, {
+        translate,
+        rotate: rotate ?? 0,
+        scale: scale ?? 1,
+        scaleX,
+        scaleY
+      });
+      opacity.set(obj, ch?.opacity ?? 1);
+    }
+    return {
+      getTransform: (o) => resolved.get(o),
+      getOpacity: (o) => opacity.get(o) ?? 1
+    };
+  }
+}
+function getAnchorOffset(anchor, bounds) {
+  const { x, y, w, h } = bounds;
+  const left = x;
+  const right = x + w;
+  const top = y;
+  const bottom = y + h;
+  const centerX = x + w / 2;
+  const centerY = y + h / 2;
+  switch (anchor) {
+    case "origin":
+      return [0, 0];
+    case "topLeft":
+      return [left, top];
+    case "top":
+      return [centerX, top];
+    case "topRight":
+      return [right, top];
+    case "left":
+      return [left, centerY];
+    case "center":
+      return [centerX, centerY];
+    case "right":
+      return [right, centerY];
+    case "bottomLeft":
+      return [left, bottom];
+    case "bottom":
+      return [centerX, bottom];
+    case "bottomRight":
+      return [right, bottom];
+    case "baselineLeft":
+      return [left, bottom];
+    case "baseline":
+      return [centerX, bottom];
+    default:
+      return [0, 0];
+  }
+}
+function renderDebugOverlay(g, scene, solved, debugGroups, pins, dpr) {
+  g.save();
+  g.scale(dpr, dpr);
+  const debugInfos = [];
+  for (const obj of scene.objects()) {
+    const transform = solved.getTransform(obj);
+    if (!transform || !transform.translate) continue;
+    const bounds = scene.getBounds(obj);
+    const opacity = solved.getOpacity(obj);
+    debugInfos.push({ obj, transform, bounds, opacity });
+  }
+  for (const groupInfo of debugGroups) {
+    const { members, kind, pin } = groupInfo;
+    let minX = Infinity, minY = Infinity;
+    let maxX = -Infinity, maxY = -Infinity;
+    for (const member of members) {
+      const transform = solved.getTransform(member);
+      if (!transform || !transform.translate) continue;
+      const memberBounds = scene.getBounds(member);
+      const x = transform.translate[0] + memberBounds.x;
+      const y = transform.translate[1] + memberBounds.y;
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x + memberBounds.w * transform.scale);
+      maxY = Math.max(maxY, y + memberBounds.h * transform.scale);
+    }
+    if (!isFinite(minX)) continue;
+    const bounds = { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    const color = kind === "group" ? "rgba(255, 200, 0" : "rgba(255, 0, 255";
+    g.strokeStyle = color + ", 0.7)";
+    g.lineWidth = 2;
+    g.setLineDash([6, 4]);
+    g.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
+    g.font = "10px monospace";
+    g.fillStyle = color + ", 0.9)";
+    g.fillText(kind, bounds.x + 2, bounds.y - 3);
+    if (pin) {
+      let anchorX = bounds.x, anchorY = bounds.y;
+      const anchor = pin.anchor;
+      if (anchor === "top" || anchor === "center" || anchor === "bottom" || anchor === "baseline") {
+        anchorX = bounds.x + bounds.w / 2;
+      } else if (anchor === "topRight" || anchor === "right" || anchor === "bottomRight") {
+        anchorX = bounds.x + bounds.w;
+      }
+      if (anchor === "left" || anchor === "center" || anchor === "right") {
+        anchorY = bounds.y + bounds.h / 2;
+      } else if (anchor === "bottomLeft" || anchor === "bottom" || anchor === "bottomRight" || anchor === "baselineLeft" || anchor === "baseline") {
+        anchorY = bounds.y + bounds.h;
+      }
+      g.fillStyle = color + ", 0.9)";
+      g.beginPath();
+      g.moveTo(anchorX, anchorY - 5);
+      g.lineTo(anchorX + 5, anchorY);
+      g.lineTo(anchorX, anchorY + 5);
+      g.lineTo(anchorX - 5, anchorY);
+      g.closePath();
+      g.fill();
+      const [tx, ty] = pin.target;
+      g.strokeStyle = color + ", 0.9)";
+      g.lineWidth = 2;
+      g.setLineDash([]);
+      g.beginPath();
+      g.moveTo(tx - 6, ty - 6);
+      g.lineTo(tx + 6, ty + 6);
+      g.moveTo(tx + 6, ty - 6);
+      g.lineTo(tx - 6, ty + 6);
+      g.stroke();
+      g.strokeStyle = color + ", 0.4)";
+      g.lineWidth = 1;
+      g.setLineDash([3, 3]);
+      g.beginPath();
+      g.moveTo(anchorX, anchorY);
+      g.lineTo(tx, ty);
+      g.stroke();
+      g.font = "9px monospace";
+      g.fillStyle = color + ", 0.9)";
+      g.fillText(anchor, anchorX + 7, anchorY - 2);
+    }
+  }
+  for (const { transform, bounds } of debugInfos) {
+    g.save();
+    g.translate(transform.translate[0], transform.translate[1]);
+    g.rotate(transform.rotate);
+    const sx = (transform.scaleX ?? 1) * transform.scale;
+    const sy = (transform.scaleY ?? 1) * transform.scale;
+    g.scale(sx, sy);
+    const avgScale = (sx + sy) / 2;
+    g.strokeStyle = "rgba(0, 200, 255, 0.8)";
+    g.lineWidth = 1 / avgScale;
+    g.setLineDash([4 / avgScale, 4 / avgScale]);
+    g.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
+    g.restore();
+  }
+  for (const { obj, transform, bounds } of debugInfos) {
+    const x = transform.translate[0];
+    const y = transform.translate[1];
+    const sx = (transform.scaleX ?? 1) * transform.scale;
+    const sy = (transform.scaleY ?? 1) * transform.scale;
+    const cos = Math.cos(transform.rotate);
+    const sin = Math.sin(transform.rotate);
+    g.fillStyle = "rgba(255, 100, 100, 0.9)";
+    g.beginPath();
+    g.arc(x, y, 4, 0, Math.PI * 2);
+    g.fill();
+    const centerOffX = (bounds.x + bounds.w / 2) * sx;
+    const centerOffY = (bounds.y + bounds.h / 2) * sy;
+    const centerX = x + centerOffX * cos - centerOffY * sin;
+    const centerY = y + centerOffX * sin + centerOffY * cos;
+    g.fillStyle = "rgba(100, 255, 100, 0.9)";
+    g.beginPath();
+    g.arc(centerX, centerY, 3, 0, Math.PI * 2);
+    g.fill();
+    g.strokeStyle = "rgba(255, 100, 100, 0.6)";
+    g.lineWidth = 1;
+    g.setLineDash([]);
+    g.beginPath();
+    g.moveTo(x - 8, y);
+    g.lineTo(x + 8, y);
+    g.moveTo(x, y - 8);
+    g.lineTo(x, y + 8);
+    g.stroke();
+    const baseline = scene.getBaseline(obj);
+    if (baseline !== null) {
+      g.save();
+      g.translate(x, y);
+      g.rotate(transform.rotate);
+      g.scale(transform.scale, transform.scale);
+      g.strokeStyle = "rgba(255, 165, 0, 0.8)";
+      g.lineWidth = 1 / transform.scale;
+      g.setLineDash([2 / transform.scale, 2 / transform.scale]);
+      g.beginPath();
+      g.moveTo(bounds.x - 5, baseline);
+      g.lineTo(bounds.x + bounds.w + 5, baseline);
+      g.stroke();
+      g.restore();
+    }
+    const pin = pins.get(obj);
+    if (pin) {
+      const [anchorOffX, anchorOffY] = getAnchorOffset(pin.anchor, bounds);
+      const scaledOffX = anchorOffX * sx;
+      const scaledOffY = anchorOffY * sy;
+      const anchorX = x + scaledOffX * cos - scaledOffY * sin;
+      const anchorY = y + scaledOffX * sin + scaledOffY * cos;
+      const [tx, ty] = pin.world;
+      g.fillStyle = "rgba(0, 200, 255, 0.9)";
+      g.beginPath();
+      g.moveTo(anchorX, anchorY - 4);
+      g.lineTo(anchorX + 4, anchorY);
+      g.lineTo(anchorX, anchorY + 4);
+      g.lineTo(anchorX - 4, anchorY);
+      g.closePath();
+      g.fill();
+      g.strokeStyle = "rgba(0, 200, 255, 0.9)";
+      g.lineWidth = 2;
+      g.setLineDash([]);
+      g.beginPath();
+      g.moveTo(tx - 5, ty - 5);
+      g.lineTo(tx + 5, ty + 5);
+      g.moveTo(tx + 5, ty - 5);
+      g.lineTo(tx - 5, ty + 5);
+      g.stroke();
+      g.strokeStyle = "rgba(0, 200, 255, 0.4)";
+      g.lineWidth = 1;
+      g.setLineDash([3, 3]);
+      g.beginPath();
+      g.moveTo(anchorX, anchorY);
+      g.lineTo(tx, ty);
+      g.stroke();
+      g.font = "9px monospace";
+      g.fillStyle = "rgba(0, 200, 255, 0.9)";
+      g.fillText(pin.anchor, anchorX + 6, anchorY - 4);
+    }
+  }
+  g.restore();
+}
+function makePlayer(canvas, opts) {
+  const ctx = new AnimCtxImpl();
+  const { scene, timeline } = opts;
+  const duration = timeline.duration;
+  let isPlaying = false;
+  let currentTime = 0;
+  let startTime = 0;
+  let animationFrameId = null;
+  let onTimeUpdate = null;
+  let onError = null;
+  let hasError = false;
+  let debugMode = false;
+  function render(timeMs, throwOnError = false) {
+    try {
+      ctx.reset(scene);
+      timeline.evaluate(timeMs, ctx);
+      const solved = ctx.solve(scene);
+      scene.render(solved, canvas);
+      if (debugMode) {
+        const g = canvas.getContext("2d");
+        const dpr = window.devicePixelRatio || 1;
+        renderDebugOverlay(g, scene, solved, ctx.getDebugGroups(), ctx.getDebugPins(), dpr);
+      }
+      return true;
+    } catch (e) {
+      hasError = true;
+      isPlaying = false;
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+      const error = e instanceof Error ? e : new Error(String(e));
+      if (throwOnError || !onError) {
+        throw error;
+      }
+      onError(error);
+      return false;
+    }
+  }
+  function frame(now) {
+    if (!isPlaying || hasError) return;
+    currentTime = now - startTime;
+    if (currentTime >= duration) {
+      currentTime = duration;
+      isPlaying = false;
+      render(currentTime);
+      onTimeUpdate?.(currentTime);
+      return;
+    }
+    if (render(currentTime)) {
+      onTimeUpdate?.(currentTime);
+      animationFrameId = requestAnimationFrame(frame);
+    }
+  }
+  render(0, true);
+  return {
+    get isPlaying() {
+      return isPlaying;
+    },
+    get currentTime() {
+      return currentTime;
+    },
+    get duration() {
+      return duration;
+    },
+    get onTimeUpdate() {
+      return onTimeUpdate;
+    },
+    set onTimeUpdate(callback) {
+      onTimeUpdate = callback;
+    },
+    get onError() {
+      return onError;
+    },
+    set onError(callback) {
+      onError = callback;
+    },
+    get debug() {
+      return debugMode;
+    },
+    set debug(value) {
+      debugMode = value;
+      if (!isPlaying) {
+        render(currentTime);
+      }
+    },
+    play() {
+      if (isPlaying || hasError) return;
+      if (currentTime >= duration) {
+        currentTime = 0;
+      }
+      isPlaying = true;
+      startTime = performance.now() - currentTime;
+      animationFrameId = requestAnimationFrame(frame);
+    },
+    pause() {
+      isPlaying = false;
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+    },
+    stop() {
+      this.pause();
+      currentTime = 0;
+      render(0);
+      onTimeUpdate?.(0);
+    },
+    seek(timeMs) {
+      if (hasError) return;
+      currentTime = Math.max(0, Math.min(duration, timeMs));
+      startTime = performance.now() - currentTime;
+      render(currentTime);
+      onTimeUpdate?.(currentTime);
+    },
+    renderAt(timeMs) {
+      if (hasError) return;
+      render(Math.max(0, Math.min(duration, timeMs)));
+    },
+    dispose() {
+      this.pause();
+    }
+  };
+}
+export {
+  AnimCtxImpl as A,
+  Screen as S,
+  Vec as V,
+  isExpr as a,
+  angle as b,
+  isGroup as i,
+  lerp as l,
+  makePlayer as m,
+  vec as v
+};
+//# sourceMappingURL=player-MRRNy8I9.js.map