locusing 0.1.0

package/dist/index.mjs

@@ -0,0 +1,3487 @@
+import {
+  Morphing,
+  MoveToTarget,
+  ReplacementTransform,
+  Timeline,
+  Transform,
+  TransformMatchingShapes,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  createTimeline,
+  easingMap,
+  getGSAPEasing
+} from "./chunk-2THKOSBL.mjs";
+
+// src/math/index.ts
+function V2(x, y) {
+  return [x, y];
+}
+function V3(x, y, z) {
+  return [x, y, z];
+}
+var ORIGIN = [0, 0];
+var UP = [0, -1];
+var DOWN = [0, 1];
+var LEFT = [-1, 0];
+var RIGHT = [1, 0];
+var UL = [-1, -1];
+var UR = [1, -1];
+var DL = [-1, 1];
+var DR = [1, 1];
+function add(a, b) {
+  return [a[0] + b[0], a[1] + b[1]];
+}
+function sub(a, b) {
+  return [a[0] - b[0], a[1] - b[1]];
+}
+function mul(v, scalar) {
+  return [v[0] * scalar, v[1] * scalar];
+}
+function div(v, scalar) {
+  return [v[0] / scalar, v[1] / scalar];
+}
+function dot(a, b) {
+  return a[0] * b[0] + a[1] * b[1];
+}
+function cross(a, b) {
+  return a[0] * b[1] - a[1] * b[0];
+}
+function length(v) {
+  return Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+}
+function normalize(v) {
+  const len = length(v);
+  if (len === 0) return [0, 0];
+  return [v[0] / len, v[1] / len];
+}
+function distance(a, b) {
+  return length(sub(b, a));
+}
+function angle(v) {
+  return Math.atan2(v[1], v[0]);
+}
+function angleBetween(a, b) {
+  return Math.atan2(cross(a, b), dot(a, b));
+}
+function rotate(v, radians) {
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  return [v[0] * cos - v[1] * sin, v[0] * sin + v[1] * cos];
+}
+function lerp(a, b, t) {
+  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+}
+function midpoint(a, b) {
+  return lerp(a, b, 0.5);
+}
+function perpendicular(v) {
+  return [-v[1], v[0]];
+}
+function reflect(v, normal) {
+  const n = normalize(normal);
+  const d = 2 * dot(v, n);
+  return sub(v, mul(n, d));
+}
+var IDENTITY = [
+  1,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  1
+];
+function matrixMultiply(a, b) {
+  return [
+    a[0] * b[0] + a[1] * b[3] + a[2] * b[6],
+    a[0] * b[1] + a[1] * b[4] + a[2] * b[7],
+    a[0] * b[2] + a[1] * b[5] + a[2] * b[8],
+    a[3] * b[0] + a[4] * b[3] + a[5] * b[6],
+    a[3] * b[1] + a[4] * b[4] + a[5] * b[7],
+    a[3] * b[2] + a[4] * b[5] + a[5] * b[8],
+    a[6] * b[0] + a[7] * b[3] + a[8] * b[6],
+    a[6] * b[1] + a[7] * b[4] + a[8] * b[7],
+    a[6] * b[2] + a[7] * b[5] + a[8] * b[8]
+  ];
+}
+function applyMatrix(m, v) {
+  return [
+    m[0] * v[0] + m[1] * v[1] + m[2],
+    m[3] * v[0] + m[4] * v[1] + m[5]
+  ];
+}
+function translationMatrix(tx, ty) {
+  return [
+    1,
+    0,
+    tx,
+    0,
+    1,
+    ty,
+    0,
+    0,
+    1
+  ];
+}
+function rotationMatrix(radians) {
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  return [
+    cos,
+    -sin,
+    0,
+    sin,
+    cos,
+    0,
+    0,
+    0,
+    1
+  ];
+}
+function scaleMatrix(sx, sy = sx) {
+  return [
+    sx,
+    0,
+    0,
+    0,
+    sy,
+    0,
+    0,
+    0,
+    1
+  ];
+}
+function quadraticBezier(p0, p1, p2, t) {
+  const t1 = 1 - t;
+  return [
+    t1 * t1 * p0[0] + 2 * t1 * t * p1[0] + t * t * p2[0],
+    t1 * t1 * p0[1] + 2 * t1 * t * p1[1] + t * t * p2[1]
+  ];
+}
+function cubicBezier(p0, p1, p2, p3, t) {
+  const t1 = 1 - t;
+  const t12 = t1 * t1;
+  const t13 = t12 * t1;
+  const t2 = t * t;
+  const t3 = t2 * t;
+  return [
+    t13 * p0[0] + 3 * t12 * t * p1[0] + 3 * t1 * t2 * p2[0] + t3 * p3[0],
+    t13 * p0[1] + 3 * t12 * t * p1[1] + 3 * t1 * t2 * p2[1] + t3 * p3[1]
+  ];
+}
+function sampleParametric(fn, start = 0, end = 1, segments = 100) {
+  const points = [];
+  for (let i = 0; i <= segments; i++) {
+    const t = start + (end - start) * (i / segments);
+    points.push(fn(t));
+  }
+  return points;
+}
+var easing = {
+  linear: (t) => t,
+  easeInQuad: (t) => t * t,
+  easeOutQuad: (t) => t * (2 - t),
+  easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+  easeInCubic: (t) => t * t * t,
+  easeOutCubic: (t) => --t * t * t + 1,
+  easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+  easeInSine: (t) => 1 - Math.cos(t * Math.PI / 2),
+  easeOutSine: (t) => Math.sin(t * Math.PI / 2),
+  easeInOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
+  easeInExpo: (t) => t === 0 ? 0 : Math.pow(2, 10 * t - 10),
+  easeOutExpo: (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t),
+  easeInOutExpo: (t) => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2,
+  easeInBack: (t) => {
+    const c = 1.70158;
+    return (c + 1) * t * t * t - c * t * t;
+  },
+  easeOutBack: (t) => {
+    const c = 1.70158;
+    return 1 + (c + 1) * Math.pow(t - 1, 3) + c * Math.pow(t - 1, 2);
+  },
+  easeInOutBack: (t) => {
+    const c = 1.70158 * 1.525;
+    return t < 0.5 ? Math.pow(2 * t, 2) * ((c + 1) * 2 * t - c) / 2 : (Math.pow(2 * t - 2, 2) * ((c + 1) * (t * 2 - 2) + c) + 2) / 2;
+  },
+  easeInElastic: (t) => {
+    if (t === 0 || t === 1) return t;
+    return -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * (2 * Math.PI / 3));
+  },
+  easeOutElastic: (t) => {
+    if (t === 0 || t === 1) return t;
+    return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * (2 * Math.PI / 3)) + 1;
+  },
+  easeInBounce: (t) => 1 - easing.easeOutBounce(1 - t),
+  easeOutBounce: (t) => {
+    if (t < 1 / 2.75) {
+      return 7.5625 * t * t;
+    } else if (t < 2 / 2.75) {
+      return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75;
+    } else if (t < 2.5 / 2.75) {
+      return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375;
+    } else {
+      return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
+    }
+  }
+};
+var PI = Math.PI;
+var TAU = Math.PI * 2;
+var DEGREES = PI / 180;
+function degToRad(degrees) {
+  return degrees * DEGREES;
+}
+function radToDeg(radians) {
+  return radians / DEGREES;
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function mapRange(value, inMin, inMax, outMin, outMax) {
+  return (value - inMin) / (inMax - inMin) * (outMax - outMin) + outMin;
+}
+function lerpNumber(a, b, t) {
+  return a + (b - a) * t;
+}
+
+// src/core/diagram.ts
+var idCounter = 0;
+function generateId() {
+  return `shape_${++idCounter}`;
+}
+var Diagram = class _Diagram {
+  constructor(shape) {
+    this.shape = shape;
+  }
+  // ========== 样式方法 ==========
+  /** 设置填充颜色 */
+  fill(color) {
+    return this.style({ fill: color });
+  }
+  /** 设置描边颜色 */
+  stroke(color) {
+    return this.style({ stroke: color });
+  }
+  /** 设置描边宽度 */
+  strokeWidth(width) {
+    return this.style({ strokeWidth: width });
+  }
+  /** 设置透明度 */
+  opacity(value) {
+    return this.style({ opacity: value });
+  }
+  /** 设置虚线样式 */
+  dashed(dasharray = "5,5") {
+    return this.style({ strokeDasharray: dasharray });
+  }
+  /** 批量设置样式 */
+  style(newStyle) {
+    return new _Diagram(__spreadProps(__spreadValues({}, this.shape), {
+      style: __spreadValues(__spreadValues({}, this.shape.style), newStyle)
+    }));
+  }
+  translate(xOrV, y) {
+    const [tx, ty] = typeof xOrV === "number" ? [xOrV, y] : xOrV;
+    return this.transform(translationMatrix(tx, ty));
+  }
+  position(xOrV, y) {
+    const [px, py] = typeof xOrV === "number" ? [xOrV, y] : xOrV;
+    const center = this.center();
+    return this.translate(px - center[0], py - center[1]);
+  }
+  /** 旋转（弧度） */
+  rotate(radians, center) {
+    if (center) {
+      const [cx, cy] = center;
+      return this.translate(-cx, -cy).transform(rotationMatrix(radians)).translate(cx, cy);
+    }
+    const c = this.center();
+    return this.translate(-c[0], -c[1]).transform(rotationMatrix(radians)).translate(c[0], c[1]);
+  }
+  /** 旋转（度数） */
+  rotateDeg(degrees, center) {
+    return this.rotate(degToRad(degrees), center);
+  }
+  scale(sxOrFactor, syOrCenter, center) {
+    let sx, sy, c;
+    if (typeof syOrCenter === "number") {
+      sx = sxOrFactor;
+      sy = syOrCenter;
+      c = center;
+    } else {
+      sx = sy = sxOrFactor;
+      c = syOrCenter;
+    }
+    if (c) {
+      return this.translate(-c[0], -c[1]).transform(scaleMatrix(sx, sy)).translate(c[0], c[1]);
+    }
+    const cc = this.center();
+    return this.translate(-cc[0], -cc[1]).transform(scaleMatrix(sx, sy)).translate(cc[0], cc[1]);
+  }
+  /** 应用变换矩阵 */
+  transform(matrix) {
+    return new _Diagram(__spreadProps(__spreadValues({}, this.shape), {
+      transform: matrixMultiply(matrix, this.shape.transform)
+    }));
+  }
+  // ========== 组合方法 ==========
+  /** 组合多个图形 */
+  combine(...others) {
+    const children = [this.shape, ...others.map((d) => d.shape)];
+    return new _Diagram({
+      id: generateId(),
+      type: "group",
+      style: {},
+      transform: IDENTITY,
+      children
+    });
+  }
+  /** 添加子图形 */
+  add(...others) {
+    if (this.shape.type === "group") {
+      return new _Diagram(__spreadProps(__spreadValues({}, this.shape), {
+        children: [...this.shape.children, ...others.map((d) => d.shape)]
+      }));
+    }
+    return this.combine(...others);
+  }
+  // ========== 几何查询 ==========
+  /** 获取中心点 */
+  center() {
+    const bounds = this.bounds();
+    return V2(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
+  }
+  /** 获取包围盒 */
+  bounds() {
+    return calculateBounds(this.shape);
+  }
+  /** 获取指定方向的边缘点 */
+  edge(direction) {
+    const c = this.center();
+    const b = this.bounds();
+    const [dx, dy] = direction;
+    const x = dx > 0 ? b.x + b.width : dx < 0 ? b.x : c[0];
+    const y = dy > 0 ? b.y + b.height : dy < 0 ? b.y : c[1];
+    return V2(x, y);
+  }
+  /** 获取相对于另一个图形的位置 */
+  nextTo(other, direction, buffer = 10) {
+    const otherEdge = other.edge(direction);
+    const myEdge = this.edge(V2(-direction[0], -direction[1]));
+    const offset = V2(
+      otherEdge[0] - myEdge[0] + direction[0] * buffer,
+      otherEdge[1] - myEdge[1] + direction[1] * buffer
+    );
+    return this.translate(offset);
+  }
+  // ========== 复制方法 ==========
+  /** 克隆图形 */
+  clone() {
+    return new _Diagram(cloneShape(this.shape));
+  }
+  /** 复制到指定位置 */
+  copy() {
+    const cloned = this.clone();
+    return new _Diagram(__spreadProps(__spreadValues({}, cloned.shape), {
+      id: generateId()
+    }));
+  }
+};
+function calculateBounds(shape) {
+  if (shape._bounds) return shape._bounds;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  const updateBounds = (point) => {
+    const transformed = applyMatrix(shape.transform, point);
+    minX = Math.min(minX, transformed[0]);
+    minY = Math.min(minY, transformed[1]);
+    maxX = Math.max(maxX, transformed[0]);
+    maxY = Math.max(maxY, transformed[1]);
+  };
+  switch (shape.type) {
+    case "rect":
+      updateBounds([shape.x, shape.y]);
+      updateBounds([shape.x + shape.width, shape.y]);
+      updateBounds([shape.x, shape.y + shape.height]);
+      updateBounds([shape.x + shape.width, shape.y + shape.height]);
+      break;
+    case "circle":
+      updateBounds([shape.cx - shape.r, shape.cy - shape.r]);
+      updateBounds([shape.cx + shape.r, shape.cy + shape.r]);
+      break;
+    case "ellipse":
+      updateBounds([shape.cx - shape.rx, shape.cy - shape.ry]);
+      updateBounds([shape.cx + shape.rx, shape.cy + shape.ry]);
+      break;
+    case "line":
+      updateBounds([shape.x1, shape.y1]);
+      updateBounds([shape.x2, shape.y2]);
+      break;
+    case "polygon":
+    case "polyline":
+      shape.points.forEach(updateBounds);
+      break;
+    case "text":
+      const fontSize = shape.style.fontSize || 16;
+      const width = shape.content.length * fontSize * 0.6;
+      updateBounds([shape.x, shape.y - fontSize]);
+      updateBounds([shape.x + width, shape.y]);
+      break;
+    case "arc":
+      updateBounds([shape.cx - shape.r, shape.cy - shape.r]);
+      updateBounds([shape.cx + shape.r, shape.cy + shape.r]);
+      break;
+    case "path":
+      shape.commands.forEach((cmd) => {
+        if ("x" in cmd && "y" in cmd) {
+          updateBounds([cmd.x, cmd.y]);
+        }
+      });
+      break;
+    case "group":
+      shape.children.forEach((child) => {
+        const childBounds = calculateBounds(child);
+        updateBounds([childBounds.x, childBounds.y]);
+        updateBounds([childBounds.x + childBounds.width, childBounds.y + childBounds.height]);
+      });
+      break;
+  }
+  if (minX === Infinity) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function cloneShape(shape) {
+  if (shape.type === "group") {
+    return __spreadProps(__spreadValues({}, shape), {
+      id: generateId(),
+      children: shape.children.map(cloneShape)
+    });
+  }
+  return __spreadProps(__spreadValues({}, shape), { id: generateId() });
+}
+
+// src/core/shapes.ts
+var DEFAULT_STYLE = {
+  fill: "none",
+  stroke: "#374151",
+  // gray-700
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var DEFAULT_FILL_STYLE = {
+  fill: "#EA580C",
+  // orange-600
+  stroke: "none",
+  strokeWidth: 0
+};
+function rect(width, height, options) {
+  const { rx = 0, ry = 0, centered = true } = options || {};
+  const x = centered ? -width / 2 : 0;
+  const y = centered ? -height / 2 : 0;
+  const shape = {
+    id: generateId(),
+    type: "rect",
+    x,
+    y,
+    width,
+    height,
+    rx,
+    ry,
+    style: __spreadValues({}, DEFAULT_FILL_STYLE),
+    transform: IDENTITY
+  };
+  return new Diagram(shape);
+}
+function square(size, options) {
+  return rect(size, size, options);
+}
+function circle(radius) {
+  const shape = {
+    id: generateId(),
+    type: "circle",
+    cx: 0,
+    cy: 0,
+    r: radius,
+    style: __spreadValues({}, DEFAULT_FILL_STYLE),
+    transform: IDENTITY
+  };
+  return new Diagram(shape);
+}
+function ellipse(rx, ry) {
+  const shape = {
+    id: generateId(),
+    type: "ellipse",
+    cx: 0,
+    cy: 0,
+    rx,
+    ry,
+    style: __spreadValues({}, DEFAULT_FILL_STYLE),
+    transform: IDENTITY
+  };
+  return new Diagram(shape);
+}
+function dot2(position, radius = 4) {
+  const [x, y] = position || [0, 0];
+  return circle(radius).translate(x, y);
+}
+function line(from, to) {
+  const shape = {
+    id: generateId(),
+    type: "line",
+    x1: from[0],
+    y1: from[1],
+    x2: to[0],
+    y2: to[1],
+    style: __spreadValues({}, DEFAULT_STYLE),
+    transform: IDENTITY
+  };
+  return new Diagram(shape);
+}
+function arrow(from, to, options) {
+  const { headSize = 10, headAngle = PI / 6 } = options || {};
+  const dx = to[0] - from[0];
+  const dy = to[1] - from[1];
+  const angle2 = Math.atan2(dy, dx);
+  const head1 = [
+    to[0] - headSize * Math.cos(angle2 - headAngle),
+    to[1] - headSize * Math.sin(angle2 - headAngle)
+  ];
+  const head2 = [
+    to[0] - headSize * Math.cos(angle2 + headAngle),
+    to[1] - headSize * Math.sin(angle2 + headAngle)
+  ];
+  const mainLine = line(from, to);
+  const headLine1 = line(to, head1);
+  const headLine2 = line(to, head2);
+  return mainLine.combine(headLine1, headLine2);
+}
+function doubleArrow(from, to, options) {
+  const a1 = arrow(from, to, options);
+  const a2 = arrow(to, from, options);
+  return a1.combine(a2);
+}
+function polygon(...points) {
+  const shape = {
+    id: generateId(),
+    type: "polygon",
+    points,
+    style: __spreadValues({}, DEFAULT_FILL_STYLE),
+    transform: IDENTITY
+  };
+  return new Diagram(shape);
+}
+function regularPolygon(sides, radius) {
+  const points = [];
+  const angleStep = TAU / sides;
+  const startAngle = -PI / 2;
+  for (let i = 0; i < sides; i++) {
+    const angle2 = startAngle + i * angleStep;
+    points.push([
+      radius * Math.cos(angle2),
+      radius * Math.sin(angle2)
+    ]);
+  }
+  return polygon(...points);
+}
+function triangle(width, height) {
+  return polygon(
+    [0, -height / 2],
+    [width / 2, height / 2],
+    [-width / 2, height / 2]
+  );
+}
+function equilateralTriangle(sideLength) {
+  return regularPolygon(3, sideLength / Math.sqrt(3));
+}
+function star(points, outerRadius, innerRadius) {
+  const inner = innerRadius != null ? innerRadius : outerRadius * 0.4;
+  const starPoints = [];
+  const angleStep = PI / points;
+  const startAngle = -PI / 2;
+  for (let i = 0; i < points * 2; i++) {
+    const angle2 = startAngle + i * angleStep;
+    const r = i % 2 === 0 ? outerRadius : inner;
+    starPoints.push([
+      r * Math.cos(angle2),
+      r * Math.sin(angle2)
+    ]);
+  }
+  return polygon(...starPoints);
+}
+function polyline(...points) {
+  const shape = {
+    id: generateId(),
+    type: "polyline",
+    points,
+    style: __spreadValues({}, DEFAULT_STYLE),
+    transform: IDENTITY
+  };
+  return new Diagram(shape);
+}
+function arc(radius, startAngle, endAngle) {
+  const shape = {
+    id: generateId(),
+    type: "arc",
+    cx: 0,
+    cy: 0,
+    r: radius,
+    startAngle,
+    endAngle,
+    style: __spreadValues({}, DEFAULT_STYLE),
+    transform: IDENTITY
+  };
+  return new Diagram(shape);
+}
+function sector(radius, startAngle, endAngle) {
+  const startX = radius * Math.cos(startAngle);
+  const startY = radius * Math.sin(startAngle);
+  const endX = radius * Math.cos(endAngle);
+  const endY = radius * Math.sin(endAngle);
+  const largeArc = Math.abs(endAngle - startAngle) > PI;
+  const commands = [
+    { type: "M", x: 0, y: 0 },
+    { type: "L", x: startX, y: startY },
+    { type: "A", rx: radius, ry: radius, angle: 0, largeArc, sweep: true, x: endX, y: endY },
+    { type: "Z" }
+  ];
+  return path(commands).fill("#EA580C");
+}
+function path(commands) {
+  const shape = {
+    id: generateId(),
+    type: "path",
+    commands,
+    style: __spreadValues({}, DEFAULT_STYLE),
+    transform: IDENTITY
+  };
+  return new Diagram(shape);
+}
+function pathFromString(d) {
+  const commands = parseSVGPath(d);
+  return path(commands);
+}
+function text(content, options) {
+  const {
+    fontSize = 16,
+    fontFamily = "system-ui, sans-serif",
+    fontWeight = "normal",
+    fontStyle = "normal",
+    anchor = "middle"
+  } = options || {};
+  const style = {
+    fill: "#374151",
+    stroke: "none",
+    fontSize,
+    fontFamily,
+    fontWeight,
+    fontStyle,
+    textAnchor: anchor,
+    dominantBaseline: "middle"
+  };
+  const shape = {
+    id: generateId(),
+    type: "text",
+    x: 0,
+    y: 0,
+    content,
+    style,
+    transform: IDENTITY
+  };
+  return new Diagram(shape);
+}
+function tex(latex, options) {
+  return text(latex, options);
+}
+function combine(...diagrams) {
+  if (diagrams.length === 0) {
+    return new Diagram({
+      id: generateId(),
+      type: "group",
+      style: {},
+      transform: IDENTITY,
+      children: []
+    });
+  }
+  return diagrams[0].combine(...diagrams.slice(1));
+}
+function group() {
+  return combine();
+}
+function parseSVGPath(d) {
+  var _a;
+  const commands = [];
+  const regex = /([MmLlHhVvCcSsQqTtAaZz])([^MmLlHhVvCcSsQqTtAaZz]*)/g;
+  let match;
+  while ((match = regex.exec(d)) !== null) {
+    const type = match[1];
+    const argsRaw = ((_a = match[2]) == null ? void 0 : _a.trim().split(/[\s,]+/).map(Number).filter((n) => !isNaN(n))) || [];
+    const args = argsRaw;
+    switch (type == null ? void 0 : type.toUpperCase()) {
+      case "M":
+        if (args.length >= 2) commands.push({ type: "M", x: args[0], y: args[1] });
+        break;
+      case "L":
+        if (args.length >= 2) commands.push({ type: "L", x: args[0], y: args[1] });
+        break;
+      case "H":
+        if (args.length >= 1) commands.push({ type: "H", x: args[0] });
+        break;
+      case "V":
+        if (args.length >= 1) commands.push({ type: "V", y: args[0] });
+        break;
+      case "C":
+        if (args.length >= 6) {
+          commands.push({
+            type: "C",
+            x1: args[0],
+            y1: args[1],
+            x2: args[2],
+            y2: args[3],
+            x: args[4],
+            y: args[5]
+          });
+        }
+        break;
+      case "S":
+        if (args.length >= 4) {
+          commands.push({
+            type: "S",
+            x2: args[0],
+            y2: args[1],
+            x: args[2],
+            y: args[3]
+          });
+        }
+        break;
+      case "Q":
+        if (args.length >= 4) {
+          commands.push({
+            type: "Q",
+            x1: args[0],
+            y1: args[1],
+            x: args[2],
+            y: args[3]
+          });
+        }
+        break;
+      case "T":
+        if (args.length >= 2) commands.push({ type: "T", x: args[0], y: args[1] });
+        break;
+      case "A":
+        if (args.length >= 7) {
+          commands.push({
+            type: "A",
+            rx: args[0],
+            ry: args[1],
+            angle: args[2],
+            largeArc: args[3] === 1,
+            sweep: args[4] === 1,
+            x: args[5],
+            y: args[6]
+          });
+        }
+        break;
+      case "Z":
+        commands.push({ type: "Z" });
+        break;
+    }
+  }
+  return commands;
+}
+
+// src/core/render-svg.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function renderToSVG(diagram, container, options = {}) {
+  const { width = 800, height = 600, background } = options;
+  let svg;
+  if (container instanceof SVGSVGElement) {
+    svg = container;
+  } else {
+    svg = document.createElementNS(SVG_NS, "svg");
+    container.appendChild(svg);
+  }
+  svg.setAttribute("width", String(width));
+  svg.setAttribute("height", String(height));
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  while (svg.firstChild) {
+    svg.removeChild(svg.firstChild);
+  }
+  if (background) {
+    const rect2 = document.createElementNS(SVG_NS, "rect");
+    rect2.setAttribute("width", "100%");
+    rect2.setAttribute("height", "100%");
+    rect2.setAttribute("fill", background);
+    svg.appendChild(rect2);
+  }
+  const defs = document.createElementNS(SVG_NS, "defs");
+  svg.appendChild(defs);
+  const element = renderShape(diagram.shape);
+  if (element) {
+    svg.appendChild(element);
+  }
+  return svg;
+}
+function toSVGString(diagram, options = {}) {
+  const { width = 800, height = 600, background } = options;
+  let content = "";
+  if (background) {
+    content += `<rect width="100%" height="100%" fill="${background}"/>`;
+  }
+  content += shapeToSVGString(diagram.shape);
+  return `<svg xmlns="${SVG_NS}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${content}</svg>`;
+}
+function renderShape(shape) {
+  let element = null;
+  switch (shape.type) {
+    case "rect":
+      element = document.createElementNS(SVG_NS, "rect");
+      element.setAttribute("x", String(shape.x));
+      element.setAttribute("y", String(shape.y));
+      element.setAttribute("width", String(shape.width));
+      element.setAttribute("height", String(shape.height));
+      if (shape.rx) element.setAttribute("rx", String(shape.rx));
+      if (shape.ry) element.setAttribute("ry", String(shape.ry));
+      break;
+    case "circle":
+      element = document.createElementNS(SVG_NS, "circle");
+      element.setAttribute("cx", String(shape.cx));
+      element.setAttribute("cy", String(shape.cy));
+      element.setAttribute("r", String(shape.r));
+      break;
+    case "ellipse":
+      element = document.createElementNS(SVG_NS, "ellipse");
+      element.setAttribute("cx", String(shape.cx));
+      element.setAttribute("cy", String(shape.cy));
+      element.setAttribute("rx", String(shape.rx));
+      element.setAttribute("ry", String(shape.ry));
+      break;
+    case "line":
+      element = document.createElementNS(SVG_NS, "line");
+      element.setAttribute("x1", String(shape.x1));
+      element.setAttribute("y1", String(shape.y1));
+      element.setAttribute("x2", String(shape.x2));
+      element.setAttribute("y2", String(shape.y2));
+      break;
+    case "polyline":
+      element = document.createElementNS(SVG_NS, "polyline");
+      element.setAttribute("points", shape.points.map((p) => `${p[0]},${p[1]}`).join(" "));
+      break;
+    case "polygon":
+      element = document.createElementNS(SVG_NS, "polygon");
+      element.setAttribute("points", shape.points.map((p) => `${p[0]},${p[1]}`).join(" "));
+      break;
+    case "path":
+      element = document.createElementNS(SVG_NS, "path");
+      element.setAttribute("d", commandsToPath(shape.commands));
+      break;
+    case "arc":
+      element = document.createElementNS(SVG_NS, "path");
+      element.setAttribute("d", arcToPath(shape.cx, shape.cy, shape.r, shape.startAngle, shape.endAngle));
+      break;
+    case "text":
+      element = document.createElementNS(SVG_NS, "text");
+      element.setAttribute("x", String(shape.x));
+      element.setAttribute("y", String(shape.y));
+      element.textContent = shape.content;
+      applyTextStyle(element, shape.style);
+      break;
+    case "group":
+      element = document.createElementNS(SVG_NS, "g");
+      for (const child of shape.children) {
+        const childElement = renderShape(child);
+        if (childElement) {
+          element.appendChild(childElement);
+        }
+      }
+      break;
+  }
+  if (element) {
+    element.setAttribute("id", shape.id);
+    applyStyle(element, shape.style);
+    applyTransform(element, shape.transform);
+  }
+  return element;
+}
+function shapeToSVGString(shape) {
+  const attrs = [`id="${shape.id}"`];
+  const style = styleToString(shape.style);
+  const transform = transformToString(shape.transform);
+  if (style) attrs.push(style);
+  if (transform) attrs.push(`transform="${transform}"`);
+  switch (shape.type) {
+    case "rect":
+      attrs.push(`x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}"`);
+      if (shape.rx) attrs.push(`rx="${shape.rx}"`);
+      if (shape.ry) attrs.push(`ry="${shape.ry}"`);
+      return `<rect ${attrs.join(" ")}/>`;
+    case "circle":
+      attrs.push(`cx="${shape.cx}" cy="${shape.cy}" r="${shape.r}"`);
+      return `<circle ${attrs.join(" ")}/>`;
+    case "ellipse":
+      attrs.push(`cx="${shape.cx}" cy="${shape.cy}" rx="${shape.rx}" ry="${shape.ry}"`);
+      return `<ellipse ${attrs.join(" ")}/>`;
+    case "line":
+      attrs.push(`x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}"`);
+      return `<line ${attrs.join(" ")}/>`;
+    case "polyline":
+      attrs.push(`points="${shape.points.map((p) => `${p[0]},${p[1]}`).join(" ")}"`);
+      return `<polyline ${attrs.join(" ")}/>`;
+    case "polygon":
+      attrs.push(`points="${shape.points.map((p) => `${p[0]},${p[1]}`).join(" ")}"`);
+      return `<polygon ${attrs.join(" ")}/>`;
+    case "path":
+      attrs.push(`d="${commandsToPath(shape.commands)}"`);
+      return `<path ${attrs.join(" ")}/>`;
+    case "arc":
+      attrs.push(`d="${arcToPath(shape.cx, shape.cy, shape.r, shape.startAngle, shape.endAngle)}"`);
+      return `<path ${attrs.join(" ")}/>`;
+    case "text":
+      const textStyle = textStyleToString(shape.style);
+      if (textStyle) attrs.push(textStyle);
+      attrs.push(`x="${shape.x}" y="${shape.y}"`);
+      return `<text ${attrs.join(" ")}>${escapeXML(shape.content)}</text>`;
+    case "group":
+      const children = shape.children.map(shapeToSVGString).join("");
+      return `<g ${attrs.join(" ")}>${children}</g>`;
+    default:
+      return "";
+  }
+}
+function applyStyle(element, style) {
+  if (style.fill) element.setAttribute("fill", style.fill);
+  if (style.fillOpacity !== void 0) element.setAttribute("fill-opacity", String(style.fillOpacity));
+  if (style.stroke) element.setAttribute("stroke", style.stroke);
+  if (style.strokeWidth !== void 0) element.setAttribute("stroke-width", String(style.strokeWidth));
+  if (style.strokeOpacity !== void 0) element.setAttribute("stroke-opacity", String(style.strokeOpacity));
+  if (style.strokeDasharray) element.setAttribute("stroke-dasharray", style.strokeDasharray);
+  if (style.strokeLinecap) element.setAttribute("stroke-linecap", style.strokeLinecap);
+  if (style.strokeLinejoin) element.setAttribute("stroke-linejoin", style.strokeLinejoin);
+  if (style.opacity !== void 0) element.setAttribute("opacity", String(style.opacity));
+}
+function applyTextStyle(element, style) {
+  if (style.fontSize) element.setAttribute("font-size", String(style.fontSize));
+  if (style.fontFamily) element.setAttribute("font-family", style.fontFamily);
+  if (style.fontWeight) element.setAttribute("font-weight", String(style.fontWeight));
+  if (style.textAnchor) element.setAttribute("text-anchor", style.textAnchor);
+  if (style.dominantBaseline) element.setAttribute("dominant-baseline", style.dominantBaseline);
+}
+function applyTransform(element, matrix) {
+  const [a, b, c, d, e, f] = [
+    matrix[0],
+    matrix[3],
+    matrix[1],
+    matrix[4],
+    matrix[2],
+    matrix[5]
+  ];
+  if (a === 1 && b === 0 && c === 0 && d === 1 && e === 0 && f === 0) {
+    return;
+  }
+  element.setAttribute("transform", `matrix(${a},${b},${c},${d},${e},${f})`);
+}
+function styleToString(style) {
+  const parts = [];
+  if (style.fill) parts.push(`fill="${style.fill}"`);
+  if (style.fillOpacity !== void 0) parts.push(`fill-opacity="${style.fillOpacity}"`);
+  if (style.stroke) parts.push(`stroke="${style.stroke}"`);
+  if (style.strokeWidth !== void 0) parts.push(`stroke-width="${style.strokeWidth}"`);
+  if (style.strokeOpacity !== void 0) parts.push(`stroke-opacity="${style.strokeOpacity}"`);
+  if (style.strokeDasharray) parts.push(`stroke-dasharray="${style.strokeDasharray}"`);
+  if (style.strokeLinecap) parts.push(`stroke-linecap="${style.strokeLinecap}"`);
+  if (style.strokeLinejoin) parts.push(`stroke-linejoin="${style.strokeLinejoin}"`);
+  if (style.opacity !== void 0) parts.push(`opacity="${style.opacity}"`);
+  return parts.join(" ");
+}
+function textStyleToString(style) {
+  const parts = [];
+  if (style.fontSize) parts.push(`font-size="${style.fontSize}"`);
+  if (style.fontFamily) parts.push(`font-family="${style.fontFamily}"`);
+  if (style.fontWeight) parts.push(`font-weight="${style.fontWeight}"`);
+  if (style.textAnchor) parts.push(`text-anchor="${style.textAnchor}"`);
+  if (style.dominantBaseline) parts.push(`dominant-baseline="${style.dominantBaseline}"`);
+  return parts.join(" ");
+}
+function transformToString(matrix) {
+  const [a, b, c, d, e, f] = [
+    matrix[0],
+    matrix[3],
+    matrix[1],
+    matrix[4],
+    matrix[2],
+    matrix[5]
+  ];
+  if (a === 1 && b === 0 && c === 0 && d === 1 && e === 0 && f === 0) {
+    return "";
+  }
+  return `matrix(${a},${b},${c},${d},${e},${f})`;
+}
+function commandsToPath(commands) {
+  return commands.map((cmd) => {
+    switch (cmd.type) {
+      case "M":
+        return `M${cmd.x},${cmd.y}`;
+      case "L":
+        return `L${cmd.x},${cmd.y}`;
+      case "H":
+        return `H${cmd.x}`;
+      case "V":
+        return `V${cmd.y}`;
+      case "C":
+        return `C${cmd.x1},${cmd.y1} ${cmd.x2},${cmd.y2} ${cmd.x},${cmd.y}`;
+      case "S":
+        return `S${cmd.x2},${cmd.y2} ${cmd.x},${cmd.y}`;
+      case "Q":
+        return `Q${cmd.x1},${cmd.y1} ${cmd.x},${cmd.y}`;
+      case "T":
+        return `T${cmd.x},${cmd.y}`;
+      case "A":
+        return `A${cmd.rx},${cmd.ry} ${cmd.angle} ${cmd.largeArc ? 1 : 0},${cmd.sweep ? 1 : 0} ${cmd.x},${cmd.y}`;
+      case "Z":
+        return "Z";
+    }
+  }).join(" ");
+}
+function arcToPath(cx, cy, r, startAngle, endAngle) {
+  const startX = cx + r * Math.cos(startAngle);
+  const startY = cy + r * Math.sin(startAngle);
+  const endX = cx + r * Math.cos(endAngle);
+  const endY = cy + r * Math.sin(endAngle);
+  const largeArc = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0;
+  const sweep = endAngle > startAngle ? 1 : 0;
+  return `M${startX},${startY} A${r},${r} 0 ${largeArc},${sweep} ${endX},${endY}`;
+}
+function escapeXML(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+// src/core/render-rough.ts
+import rough from "roughjs";
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+function renderToRough(diagram, container, options = {}) {
+  const {
+    width = 800,
+    height = 600,
+    background,
+    roughness = 1,
+    bowing = 1,
+    seed,
+    fillStyle = "hachure",
+    fillWeight,
+    hachureAngle,
+    hachureGap
+  } = options;
+  let svg;
+  if (container instanceof SVGSVGElement) {
+    svg = container;
+  } else {
+    svg = document.createElementNS(SVG_NS2, "svg");
+    container.appendChild(svg);
+  }
+  svg.setAttribute("width", String(width));
+  svg.setAttribute("height", String(height));
+  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  while (svg.firstChild) {
+    svg.removeChild(svg.firstChild);
+  }
+  if (background) {
+    const rect2 = document.createElementNS(SVG_NS2, "rect");
+    rect2.setAttribute("width", "100%");
+    rect2.setAttribute("height", "100%");
+    rect2.setAttribute("fill", background);
+    svg.appendChild(rect2);
+  }
+  const rc = rough.svg(svg);
+  const defaultRoughOptions = Object.fromEntries(
+    Object.entries({
+      roughness,
+      bowing,
+      seed,
+      fillStyle,
+      fillWeight,
+      hachureAngle,
+      hachureGap
+    }).filter(([_, v]) => v !== void 0)
+  );
+  renderShapeRough(diagram.shape, svg, rc, defaultRoughOptions);
+  return svg;
+}
+function renderShapeRough(shape, svg, rc, defaultOptions) {
+  const g = document.createElementNS(SVG_NS2, "g");
+  g.setAttribute("id", shape.id);
+  applyTransform2(g, shape.transform);
+  svg.appendChild(g);
+  const roughOptions = styleToRoughOptions(shape.style, defaultOptions);
+  switch (shape.type) {
+    case "rect":
+      const rectNode = rc.rectangle(
+        shape.x,
+        shape.y,
+        shape.width,
+        shape.height,
+        roughOptions
+      );
+      g.appendChild(rectNode);
+      break;
+    case "circle":
+      const circleNode = rc.circle(
+        shape.cx,
+        shape.cy,
+        shape.r * 2,
+        roughOptions
+      );
+      g.appendChild(circleNode);
+      break;
+    case "ellipse":
+      const ellipseNode = rc.ellipse(
+        shape.cx,
+        shape.cy,
+        shape.rx * 2,
+        shape.ry * 2,
+        roughOptions
+      );
+      g.appendChild(ellipseNode);
+      break;
+    case "line":
+      const lineNode = rc.line(
+        shape.x1,
+        shape.y1,
+        shape.x2,
+        shape.y2,
+        roughOptions
+      );
+      g.appendChild(lineNode);
+      break;
+    case "polygon":
+      const polygonNode = rc.polygon(
+        shape.points,
+        roughOptions
+      );
+      g.appendChild(polygonNode);
+      break;
+    case "polyline":
+      const polylineNode = rc.linearPath(
+        shape.points,
+        roughOptions
+      );
+      g.appendChild(polylineNode);
+      break;
+    case "path":
+      const pathD = commandsToPath2(shape.commands);
+      const pathNode = rc.path(pathD, roughOptions);
+      g.appendChild(pathNode);
+      break;
+    case "arc":
+      const arcNode = rc.arc(
+        shape.cx,
+        shape.cy,
+        shape.r * 2,
+        shape.r * 2,
+        shape.startAngle,
+        shape.endAngle,
+        false,
+        roughOptions
+      );
+      g.appendChild(arcNode);
+      break;
+    case "text":
+      const textNode = document.createElementNS(SVG_NS2, "text");
+      textNode.setAttribute("x", String(shape.x));
+      textNode.setAttribute("y", String(shape.y));
+      textNode.textContent = shape.content;
+      applyTextStyle2(textNode, shape.style);
+      g.appendChild(textNode);
+      break;
+    case "group":
+      for (const child of shape.children) {
+        renderShapeRough(child, svg, rc, defaultOptions);
+      }
+      if (!g.hasChildNodes()) {
+        svg.removeChild(g);
+      }
+      break;
+  }
+}
+function styleToRoughOptions(style, defaults) {
+  const options = __spreadValues({}, defaults);
+  if (style.fill && style.fill !== "none") {
+    options.fill = style.fill;
+  }
+  if (style.stroke && style.stroke !== "none") {
+    options.stroke = style.stroke;
+  } else if (!style.fill || style.fill === "none") {
+    options.stroke = "#374151";
+  }
+  if (style.strokeWidth !== void 0) {
+    options.strokeWidth = style.strokeWidth;
+  }
+  if (style.fillOpacity !== void 0) {
+    options.fillWeight = (options.fillWeight || 1) * style.fillOpacity;
+  }
+  return options;
+}
+function applyTransform2(element, matrix) {
+  const [a, b, c, d, e, f] = [
+    matrix[0],
+    matrix[3],
+    matrix[1],
+    matrix[4],
+    matrix[2],
+    matrix[5]
+  ];
+  if (a === 1 && b === 0 && c === 0 && d === 1 && e === 0 && f === 0) {
+    return;
+  }
+  element.setAttribute("transform", `matrix(${a},${b},${c},${d},${e},${f})`);
+}
+function applyTextStyle2(element, style) {
+  if (style.fill) element.setAttribute("fill", style.fill);
+  if (style.fontSize) element.setAttribute("font-size", String(style.fontSize));
+  if (style.fontFamily) element.setAttribute("font-family", style.fontFamily);
+  if (style.fontWeight) element.setAttribute("font-weight", String(style.fontWeight));
+  if (style.textAnchor) element.setAttribute("text-anchor", style.textAnchor);
+  if (style.dominantBaseline) element.setAttribute("dominant-baseline", style.dominantBaseline);
+}
+function commandsToPath2(commands) {
+  return commands.map((cmd) => {
+    switch (cmd.type) {
+      case "M":
+        return `M${cmd.x},${cmd.y}`;
+      case "L":
+        return `L${cmd.x},${cmd.y}`;
+      case "H":
+        return `H${cmd.x}`;
+      case "V":
+        return `V${cmd.y}`;
+      case "C":
+        return `C${cmd.x1},${cmd.y1} ${cmd.x2},${cmd.y2} ${cmd.x},${cmd.y}`;
+      case "S":
+        return `S${cmd.x2},${cmd.y2} ${cmd.x},${cmd.y}`;
+      case "Q":
+        return `Q${cmd.x1},${cmd.y1} ${cmd.x},${cmd.y}`;
+      case "T":
+        return `T${cmd.x},${cmd.y}`;
+      case "A":
+        return `A${cmd.rx},${cmd.ry} ${cmd.angle} ${cmd.largeArc ? 1 : 0},${cmd.sweep ? 1 : 0} ${cmd.x},${cmd.y}`;
+      case "Z":
+        return "Z";
+    }
+  }).join(" ");
+}
+var roughPresets = {
+  /** 默认手绘风格 */
+  default: {
+    roughness: 1,
+    bowing: 1,
+    fillStyle: "hachure"
+  },
+  /** 粉笔风格 */
+  chalk: {
+    roughness: 2,
+    bowing: 1.5,
+    fillStyle: "zigzag",
+    fillWeight: 0.5
+  },
+  /** 钢笔风格 */
+  pen: {
+    roughness: 0.5,
+    bowing: 0.5,
+    fillStyle: "cross-hatch"
+  },
+  /** 铅笔风格 */
+  pencil: {
+    roughness: 1.5,
+    bowing: 1,
+    fillStyle: "hachure",
+    fillWeight: 0.3
+  },
+  /** 马克笔风格 */
+  marker: {
+    roughness: 0.8,
+    bowing: 0.3,
+    fillStyle: "solid",
+    strokeWidth: 3
+  },
+  /** 涂鸦风格 */
+  doodle: {
+    roughness: 3,
+    bowing: 2,
+    fillStyle: "zigzag-line"
+  }
+};
+
+// src/animate/types.ts
+var ValueTracker = class {
+  constructor(initialValue = 0) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this._value = initialValue;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(newValue) {
+    this._value = newValue;
+    this.listeners.forEach((listener) => listener(newValue));
+  }
+  /** 添加变化监听器 */
+  addListener(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  /** 创建动画目标对象 */
+  animate(targetValue) {
+    return { value: targetValue };
+  }
+  /** 获取当前值的普通对象（用于 GSAP） */
+  toObject() {
+    return { value: this._value };
+  }
+};
+
+// src/animate/scene.ts
+var Scene = class {
+  constructor(container, config = {}) {
+    this.objects = /* @__PURE__ */ new Map();
+    this.currentTime = 0;
+    var _a, _b, _c, _d, _e;
+    this.container = container;
+    this.config = {
+      width: (_a = config.width) != null ? _a : 800,
+      height: (_b = config.height) != null ? _b : 600,
+      background: (_c = config.background) != null ? _c : "#1a1a2e",
+      fps: (_d = config.fps) != null ? _d : 60,
+      rough: (_e = config.rough) != null ? _e : false
+    };
+    this.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    this.svg.setAttribute("width", String(this.config.width));
+    this.svg.setAttribute("height", String(this.config.height));
+    this.svg.setAttribute("viewBox", `0 0 ${this.config.width} ${this.config.height}`);
+    this.svg.style.background = this.config.background;
+    this.container.appendChild(this.svg);
+    this.timeline = createTimeline();
+  }
+  /**
+   * 添加图形到场景（不带动画）
+   */
+  add(...diagrams) {
+    for (const diagram of diagrams) {
+      this.objects.set(diagram.shape.id, diagram);
+      this.renderDiagram(diagram);
+    }
+  }
+  /**
+   * 从场景移除图形
+   */
+  remove(...diagrams) {
+    for (const diagram of diagrams) {
+      this.objects.delete(diagram.shape.id);
+      const element = this.svg.getElementById(diagram.shape.id);
+      if (element) {
+        element.remove();
+      }
+    }
+  }
+  /**
+   * 播放动画
+   *
+   * @param animations - 要播放的动画
+   * @param config - 动画配置
+   */
+  play(...args) {
+    const animations = [];
+    let config = {};
+    for (const arg of args) {
+      if ("execute" in arg) {
+        animations.push(arg);
+      } else {
+        config = __spreadValues(__spreadValues({}, config), arg);
+      }
+    }
+    const { lagRatio = 0, runTime } = config;
+    if (animations.length === 0) return;
+    for (let i = 0; i < animations.length; i++) {
+      const animation = animations[i];
+      const delay = i * lagRatio * (runTime || animation.duration);
+      animation.execute(this, this.timeline, this.currentTime + delay);
+    }
+    const maxDuration = Math.max(...animations.map((a) => a.duration));
+    this.currentTime += maxDuration + lagRatio * maxDuration * (animations.length - 1);
+  }
+  /**
+   * 等待指定时间
+   */
+  wait(seconds = 1) {
+    this.currentTime += seconds;
+  }
+  /**
+   * 运行场景
+   */
+  async render() {
+    this.construct();
+    this.timeline.play();
+    await this.timeline.finished();
+  }
+  /**
+   * 渲染单个图形到 SVG
+   */
+  renderDiagram(diagram) {
+    const tempSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    renderToSVG(diagram, tempSvg, {
+      width: this.config.width,
+      height: this.config.height
+    });
+    const element = tempSvg.querySelector(`#${diagram.shape.id}`);
+    if (element) {
+      this.svg.appendChild(element.cloneNode(true));
+      return this.svg.getElementById(diagram.shape.id);
+    }
+    return null;
+  }
+  /**
+   * 获取图形对应的 SVG 元素
+   */
+  getElement(diagram) {
+    return this.svg.getElementById(diagram.shape.id);
+  }
+  /**
+   * 获取或创建图形元素
+   */
+  getOrCreateElement(diagram) {
+    let element = this.getElement(diagram);
+    if (!element) {
+      element = this.renderDiagram(diagram);
+    }
+    return element;
+  }
+  /**
+   * 获取 SVG 容器
+   */
+  getSVG() {
+    return this.svg;
+  }
+  /**
+   * 获取配置
+   */
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * 导出为 SVG 字符串
+   */
+  toSVGString() {
+    return this.svg.outerHTML;
+  }
+  /**
+   * 暂停
+   */
+  pause() {
+    this.timeline.pause();
+  }
+  /**
+   * 恢复
+   */
+  resume() {
+    this.timeline.resume();
+  }
+  /**
+   * 重新开始
+   */
+  restart() {
+    this.timeline.restart();
+  }
+  /**
+   * 销毁场景
+   */
+  destroy() {
+    this.timeline.kill();
+    this.svg.remove();
+    this.objects.clear();
+  }
+};
+function createScene(container, buildFn, config) {
+  const scene = new SimpleScene(container, buildFn, config);
+  return scene;
+}
+var SimpleScene = class extends Scene {
+  constructor(container, buildFn, config) {
+    super(container, config);
+    this.buildFn = buildFn;
+  }
+  construct() {
+    this.buildFn(this);
+  }
+};
+
+// src/animate/animations/create.ts
+import { gsap } from "gsap";
+function Create(target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const paths = element.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+      paths.forEach((path2) => {
+        if (path2 instanceof SVGGeometryElement) {
+          const length2 = path2.getTotalLength();
+          gsap.set(path2, {
+            strokeDasharray: length2,
+            strokeDashoffset: length2,
+            fillOpacity: 0
+          });
+          timeline.add(path2, {
+            strokeDashoffset: 0,
+            duration,
+            ease: getGSAPEasing(easing2),
+            delay
+          }, startTime);
+          const fill = path2.getAttribute("fill");
+          if (fill && fill !== "none") {
+            timeline.add(path2, {
+              fillOpacity: 1,
+              duration: duration * 0.3,
+              ease: "power2.out"
+            }, startTime + duration);
+          }
+        }
+      });
+      const texts = element.querySelectorAll("text");
+      texts.forEach((text2) => {
+        gsap.set(text2, { opacity: 0 });
+        timeline.add(text2, {
+          opacity: 1,
+          duration: duration * 0.5,
+          ease: "power2.out"
+        }, startTime + duration * 0.5);
+      });
+    }
+  };
+}
+function Write(target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const texts = element.querySelectorAll("text");
+      if (texts.length > 0) {
+        texts.forEach((text2) => {
+          const content = text2.textContent || "";
+          const chars = content.split("");
+          text2.textContent = "";
+          chars.forEach((char, i) => {
+            const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+            tspan.textContent = char;
+            gsap.set(tspan, { opacity: 0 });
+            text2.appendChild(tspan);
+            const charDelay = i / chars.length * duration;
+            timeline.add(tspan, {
+              opacity: 1,
+              duration: duration / chars.length,
+              ease: getGSAPEasing(easing2)
+            }, startTime + delay + charDelay);
+          });
+        });
+      } else {
+        return Create(target, options).execute(scene, timeline, startTime);
+      }
+    }
+  };
+}
+function DrawBorderThenFill(target, options = {}) {
+  const { duration = 1.5, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const paths = element.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+      paths.forEach((path2) => {
+        if (path2 instanceof SVGGeometryElement) {
+          const length2 = path2.getTotalLength();
+          const originalFill = path2.getAttribute("fill") || "none";
+          const originalStroke = path2.getAttribute("stroke") || "#374151";
+          gsap.set(path2, {
+            strokeDasharray: length2,
+            strokeDashoffset: length2,
+            fill: "none",
+            stroke: originalStroke,
+            strokeWidth: path2.getAttribute("stroke-width") || 2
+          });
+          const borderDuration = duration * 0.6;
+          timeline.add(path2, {
+            strokeDashoffset: 0,
+            duration: borderDuration,
+            ease: getGSAPEasing(easing2)
+          }, startTime + delay);
+          if (originalFill && originalFill !== "none") {
+            const fillDuration = duration * 0.4;
+            timeline.add(path2, {
+              fill: originalFill,
+              fillOpacity: 1,
+              duration: fillDuration,
+              ease: "power2.out"
+            }, startTime + delay + borderDuration);
+          }
+        }
+      });
+    }
+  };
+}
+function GrowFromCenter(target, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeOutBack", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      const cx = bbox.x + bbox.width / 2;
+      const cy = bbox.y + bbox.height / 2;
+      gsap.set(element, {
+        transformOrigin: `${cx}px ${cy}px`,
+        scale: 0,
+        opacity: 0
+      });
+      timeline.add(element, {
+        scale: 1,
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function GrowFromPoint(target, point, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeOutBack", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      gsap.set(element, {
+        transformOrigin: `${point[0]}px ${point[1]}px`,
+        scale: 0,
+        opacity: 0
+      });
+      timeline.add(element, {
+        scale: 1,
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function GrowFromEdge(target, edge = "LEFT", options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      let origin;
+      let scaleFrom;
+      switch (edge) {
+        case "LEFT":
+          origin = `${bbox.x}px ${bbox.y + bbox.height / 2}px`;
+          scaleFrom = { scaleX: 0 };
+          break;
+        case "RIGHT":
+          origin = `${bbox.x + bbox.width}px ${bbox.y + bbox.height / 2}px`;
+          scaleFrom = { scaleX: 0 };
+          break;
+        case "TOP":
+          origin = `${bbox.x + bbox.width / 2}px ${bbox.y}px`;
+          scaleFrom = { scaleY: 0 };
+          break;
+        case "BOTTOM":
+          origin = `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height}px`;
+          scaleFrom = { scaleY: 0 };
+          break;
+      }
+      gsap.set(element, __spreadProps(__spreadValues({
+        transformOrigin: origin
+      }, scaleFrom), {
+        opacity: 0
+      }));
+      timeline.add(element, {
+        scaleX: 1,
+        scaleY: 1,
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function SpinInFromNothing(target, options = {}) {
+  const { duration = 0.8, easing: easing2 = "easeOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      const cx = bbox.x + bbox.width / 2;
+      const cy = bbox.y + bbox.height / 2;
+      gsap.set(element, {
+        transformOrigin: `${cx}px ${cy}px`,
+        scale: 0,
+        rotation: -360,
+        opacity: 0
+      });
+      timeline.add(element, {
+        scale: 1,
+        rotation: 0,
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+
+// src/animate/animations/fade.ts
+import { gsap as gsap2 } from "gsap";
+function directionToVector(direction) {
+  if (!direction) return void 0;
+  if (Array.isArray(direction)) return direction;
+  switch (direction) {
+    case "UP":
+      return UP;
+    case "DOWN":
+      return DOWN;
+    case "LEFT":
+      return LEFT;
+    case "RIGHT":
+      return RIGHT;
+  }
+}
+function FadeIn(target, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeOut", delay = 0, direction, shift = 50 } = options;
+  const dir = directionToVector(direction);
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const initialState = { opacity: 0 };
+      if (dir) {
+        initialState.x = -dir[0] * shift;
+        initialState.y = -dir[1] * shift;
+      }
+      gsap2.set(element, initialState);
+      timeline.add(element, {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function FadeOut(target, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeIn", delay = 0, direction, shift = 50 } = options;
+  const dir = directionToVector(direction);
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      const targetState = {
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay,
+        onComplete: () => {
+          element.remove();
+        }
+      };
+      if (dir) {
+        targetState.x = dir[0] * shift;
+        targetState.y = dir[1] * shift;
+      }
+      timeline.add(element, targetState, startTime);
+    }
+  };
+}
+function FadeInFrom(target, direction, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction }));
+}
+function FadeOutTo(target, direction, options = {}) {
+  return FadeOut(target, __spreadProps(__spreadValues({}, options), { direction }));
+}
+function FadeInFromDown(target, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "DOWN" }));
+}
+function FadeInFromUp(target, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "UP" }));
+}
+function FadeInFromLeft(target, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "LEFT" }));
+}
+function FadeInFromRight(target, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "RIGHT" }));
+}
+function FadeTransform(source, target, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap2.set(targetElement, { opacity: 0 });
+      timeline.add(sourceElement, {
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay,
+        onComplete: () => {
+          sourceElement.remove();
+        }
+      }, startTime);
+      timeline.add(targetElement, {
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+
+// src/animate/animations/move.ts
+import { gsap as gsap3 } from "gsap";
+import { MotionPathPlugin } from "gsap/MotionPathPlugin";
+if (typeof window !== "undefined") {
+  gsap3.registerPlugin(MotionPathPlugin);
+}
+function Shift(target, offset, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      timeline.add(element, {
+        x: `+=${offset[0]}`,
+        y: `+=${offset[1]}`,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function MoveTo(target, position, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getElement(target);
+      if (!element) return;
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      const currentCenter = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
+      const offsetX = position[0] - currentCenter[0];
+      const offsetY = position[1] - currentCenter[1];
+      timeline.add(element, {
+        x: `+=${offsetX}`,
+        y: `+=${offsetY}`,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function MoveAlongPath(target, path2, options = {}) {
+  const { duration = 2, easing: easing2 = "linear", delay = 0, rotateAlongPath = false } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      let pathData;
+      if (typeof path2 === "string") {
+        pathData = path2;
+      } else {
+        const pathElement = scene.getOrCreateElement(path2);
+        const pathNode = pathElement.querySelector("path") || pathElement.querySelector("circle") || pathElement.querySelector("ellipse") || pathElement;
+        if (pathNode instanceof SVGGeometryElement) {
+          if (pathNode instanceof SVGCircleElement) {
+            const cx = parseFloat(pathNode.getAttribute("cx") || "0");
+            const cy = parseFloat(pathNode.getAttribute("cy") || "0");
+            const r = parseFloat(pathNode.getAttribute("r") || "0");
+            pathData = circleToPath(cx, cy, r);
+          } else if (pathNode instanceof SVGEllipseElement) {
+            const cx = parseFloat(pathNode.getAttribute("cx") || "0");
+            const cy = parseFloat(pathNode.getAttribute("cy") || "0");
+            const rx = parseFloat(pathNode.getAttribute("rx") || "0");
+            const ry = parseFloat(pathNode.getAttribute("ry") || "0");
+            pathData = ellipseToPath(cx, cy, rx, ry);
+          } else {
+            pathData = pathNode.getAttribute("d") || "";
+          }
+        } else {
+          console.warn("MoveAlongPath: \u65E0\u6CD5\u83B7\u53D6\u8DEF\u5F84\u6570\u636E");
+          return;
+        }
+        gsap3.set(pathElement, { opacity: 0 });
+      }
+      timeline.add(element, {
+        motionPath: {
+          path: pathData,
+          align: "self",
+          autoRotate: rotateAlongPath,
+          alignOrigin: [0.5, 0.5]
+        },
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function Rotate(target, angle2, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0, aboutPoint } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getElement(target);
+      if (!element) return;
+      if (aboutPoint) {
+        gsap3.set(element, {
+          transformOrigin: `${aboutPoint[0]}px ${aboutPoint[1]}px`
+        });
+      } else {
+        const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+        gsap3.set(element, {
+          transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
+        });
+      }
+      const degrees = angle2 * (180 / Math.PI);
+      timeline.add(element, {
+        rotation: `+=${degrees}`,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function Rotating(target, options = {}) {
+  const {
+    duration = 2,
+    easing: easing2 = "linear",
+    delay = 0,
+    angularVelocity = Math.PI,
+    aboutPoint
+  } = options;
+  const totalAngle = angularVelocity * duration;
+  const rotateOptions = { duration, easing: easing2, delay };
+  if (aboutPoint) rotateOptions.aboutPoint = aboutPoint;
+  return Rotate(target, totalAngle, rotateOptions);
+}
+function Scale(target, factor, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0, aboutPoint } = options;
+  const [scaleX, scaleY] = Array.isArray(factor) ? factor : [factor, factor];
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getElement(target);
+      if (!element) return;
+      if (aboutPoint) {
+        gsap3.set(element, {
+          transformOrigin: `${aboutPoint[0]}px ${aboutPoint[1]}px`
+        });
+      } else {
+        const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+        gsap3.set(element, {
+          transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
+        });
+      }
+      timeline.add(element, {
+        scaleX,
+        scaleY,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function ScaleInPlace(target, factor, options = {}) {
+  return Scale(target, factor, options);
+}
+function circleToPath(cx, cy, r) {
+  return `M ${cx - r},${cy} A ${r},${r} 0 1,0 ${cx + r},${cy} A ${r},${r} 0 1,0 ${cx - r},${cy}`;
+}
+function ellipseToPath(cx, cy, rx, ry) {
+  return `M ${cx - rx},${cy} A ${rx},${ry} 0 1,0 ${cx + rx},${cy} A ${rx},${ry} 0 1,0 ${cx - rx},${cy}`;
+}
+
+// src/animate/animations/indicate.ts
+import { gsap as gsap4 } from "gsap";
+function Indicate(target, options = {}) {
+  const {
+    duration = 0.5,
+    easing: easing2 = "easeInOut",
+    delay = 0,
+    color = "#FBBF24",
+    // amber-400
+    scaleFactor = 1.2
+  } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a, _b, _c;
+      const element = scene.getElement(target);
+      if (!element) return;
+      const originalFill = (_a = element.getAttribute("fill")) != null ? _a : "";
+      const originalStroke = (_b = element.getAttribute("stroke")) != null ? _b : "";
+      const bbox = ((_c = element.getBBox) == null ? void 0 : _c.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      gsap4.set(element, {
+        transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
+      });
+      timeline.add(element, {
+        scale: scaleFactor,
+        fill: color,
+        stroke: color,
+        duration: duration / 2,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+      timeline.add(element, {
+        scale: 1,
+        fill: originalFill,
+        stroke: originalStroke,
+        duration: duration / 2,
+        ease: getGSAPEasing(easing2)
+      }, startTime + duration / 2);
+    }
+  };
+}
+function Circumscribe(target, options = {}) {
+  const {
+    duration = 1,
+    easing: easing2 = "easeInOut",
+    delay = 0,
+    shape = "rectangle",
+    color = "#EA580C",
+    strokeWidth = 3,
+    fill = false,
+    fillOpacity = 0.2
+  } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getElement(target);
+      if (!element) return;
+      const svg = scene.getSVG();
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      const padding = 10;
+      let circumscribeElement;
+      if (shape === "circle") {
+        const cx = bbox.x + bbox.width / 2;
+        const cy = bbox.y + bbox.height / 2;
+        const r = Math.max(bbox.width, bbox.height) / 2 + padding;
+        circumscribeElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+        circumscribeElement.setAttribute("cx", String(cx));
+        circumscribeElement.setAttribute("cy", String(cy));
+        circumscribeElement.setAttribute("r", String(r));
+      } else {
+        circumscribeElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        circumscribeElement.setAttribute("x", String(bbox.x - padding));
+        circumscribeElement.setAttribute("y", String(bbox.y - padding));
+        circumscribeElement.setAttribute("width", String(bbox.width + padding * 2));
+        circumscribeElement.setAttribute("height", String(bbox.height + padding * 2));
+        circumscribeElement.setAttribute("rx", "4");
+      }
+      circumscribeElement.setAttribute("fill", fill ? color : "none");
+      circumscribeElement.setAttribute("fill-opacity", String(fillOpacity));
+      circumscribeElement.setAttribute("stroke", color);
+      circumscribeElement.setAttribute("stroke-width", String(strokeWidth));
+      const length2 = circumscribeElement instanceof SVGGeometryElement ? circumscribeElement.getTotalLength() : shape === "circle" ? Math.PI * 2 * parseFloat(circumscribeElement.getAttribute("r") || "0") : (bbox.width + bbox.height + padding * 4) * 2;
+      gsap4.set(circumscribeElement, {
+        strokeDasharray: length2,
+        strokeDashoffset: length2,
+        opacity: 0
+      });
+      svg.appendChild(circumscribeElement);
+      timeline.add(circumscribeElement, {
+        opacity: 1,
+        strokeDashoffset: 0,
+        duration: duration * 0.6,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+      timeline.add(circumscribeElement, {
+        opacity: 0,
+        duration: duration * 0.4,
+        ease: "power2.in",
+        onComplete: () => {
+          circumscribeElement.remove();
+        }
+      }, startTime + duration * 0.6);
+    }
+  };
+}
+function Wiggle(target, options = {}) {
+  const {
+    duration = 0.5,
+    delay = 0,
+    nWiggles = 6,
+    scaleValue = 1.1,
+    rotationAngle = 0.02 * Math.PI
+  } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getElement(target);
+      if (!element) return;
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      gsap4.set(element, {
+        transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
+      });
+      const wiggleDuration = duration / nWiggles;
+      const rotationDegrees = rotationAngle * (180 / Math.PI);
+      for (let i = 0; i < nWiggles; i++) {
+        const direction = i % 2 === 0 ? 1 : -1;
+        const progress = i / nWiggles;
+        const dampening = 1 - progress * 0.5;
+        timeline.add(element, {
+          rotation: rotationDegrees * direction * dampening,
+          scale: 1 + (scaleValue - 1) * dampening * 0.5,
+          duration: wiggleDuration,
+          ease: "sine.inOut"
+        }, startTime + delay + i * wiggleDuration);
+      }
+      timeline.add(element, {
+        rotation: 0,
+        scale: 1,
+        duration: wiggleDuration,
+        ease: "sine.out"
+      }, startTime + delay + duration);
+    }
+  };
+}
+function Flash(target, options = {}) {
+  const {
+    duration = 0.5,
+    delay = 0,
+    color = "#FBBF24",
+    lineLength = 30,
+    numLines = 12
+  } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getElement(target);
+      if (!element) return;
+      const svg = scene.getSVG();
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      const cx = bbox.x + bbox.width / 2;
+      const cy = bbox.y + bbox.height / 2;
+      const innerRadius = Math.max(bbox.width, bbox.height) / 2 + 5;
+      const flashGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      flashGroup.setAttribute("id", `flash_${Date.now()}`);
+      svg.appendChild(flashGroup);
+      for (let i = 0; i < numLines; i++) {
+        const angle2 = i / numLines * Math.PI * 2;
+        const x1 = cx + innerRadius * Math.cos(angle2);
+        const y1 = cy + innerRadius * Math.sin(angle2);
+        const x2 = cx + (innerRadius + lineLength) * Math.cos(angle2);
+        const y2 = cy + (innerRadius + lineLength) * Math.sin(angle2);
+        const line2 = document.createElementNS("http://www.w3.org/2000/svg", "line");
+        line2.setAttribute("x1", String(x1));
+        line2.setAttribute("y1", String(y1));
+        line2.setAttribute("x2", String(x1));
+        line2.setAttribute("y2", String(y1));
+        line2.setAttribute("stroke", color);
+        line2.setAttribute("stroke-width", "2");
+        line2.setAttribute("stroke-linecap", "round");
+        gsap4.set(line2, { opacity: 0 });
+        flashGroup.appendChild(line2);
+        timeline.add(line2, {
+          attr: { x2, y2 },
+          opacity: 1,
+          duration: duration * 0.4,
+          ease: "power2.out",
+          delay: delay + i / numLines * duration * 0.1
+        }, startTime);
+        timeline.add(line2, {
+          opacity: 0,
+          duration: duration * 0.4,
+          ease: "power2.in"
+        }, startTime + duration * 0.5);
+      }
+      timeline.call(() => {
+        flashGroup.remove();
+      }, startTime + duration);
+    }
+  };
+}
+function ShowPassingFlash(target, options = {}) {
+  const {
+    duration = 1,
+    easing: easing2 = "easeInOut",
+    delay = 0,
+    color = "#FBBF24"
+  } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      const paths = element.querySelectorAll("path, line, polyline, polygon");
+      paths.forEach((path2) => {
+        var _a;
+        if (path2 instanceof SVGGeometryElement) {
+          const length2 = path2.getTotalLength();
+          const svg = scene.getSVG();
+          const defs = svg.querySelector("defs") || svg.insertBefore(
+            document.createElementNS("http://www.w3.org/2000/svg", "defs"),
+            svg.firstChild
+          );
+          const gradientId = `flash_gradient_${Date.now()}`;
+          const gradient = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
+          gradient.setAttribute("id", gradientId);
+          const stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+          stop1.setAttribute("offset", "0%");
+          stop1.setAttribute("stop-color", "transparent");
+          const stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+          stop2.setAttribute("offset", "50%");
+          stop2.setAttribute("stop-color", color);
+          const stop3 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
+          stop3.setAttribute("offset", "100%");
+          stop3.setAttribute("stop-color", "transparent");
+          gradient.appendChild(stop1);
+          gradient.appendChild(stop2);
+          gradient.appendChild(stop3);
+          defs.appendChild(gradient);
+          const flashPath = path2.cloneNode();
+          flashPath.setAttribute("stroke", `url(#${gradientId})`);
+          flashPath.setAttribute("fill", "none");
+          flashPath.setAttribute("stroke-width", "4");
+          gsap4.set(flashPath, {
+            strokeDasharray: `${length2 * 0.1} ${length2 * 0.9}`,
+            strokeDashoffset: length2
+          });
+          (_a = path2.parentNode) == null ? void 0 : _a.insertBefore(flashPath, path2.nextSibling);
+          timeline.add(flashPath, {
+            strokeDashoffset: -length2 * 0.1,
+            duration,
+            ease: getGSAPEasing(easing2),
+            delay,
+            onComplete: () => {
+              flashPath.remove();
+              gradient.remove();
+            }
+          }, startTime);
+        }
+      });
+    }
+  };
+}
+function Blink(target, options = {}) {
+  const {
+    duration = 1,
+    delay = 0,
+    times = 3
+  } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      const blinkDuration = duration / (times * 2);
+      for (let i = 0; i < times; i++) {
+        timeline.add(element, {
+          opacity: 0,
+          duration: blinkDuration,
+          ease: "power2.in"
+        }, startTime + delay + i * blinkDuration * 2);
+        timeline.add(element, {
+          opacity: 1,
+          duration: blinkDuration,
+          ease: "power2.out"
+        }, startTime + delay + i * blinkDuration * 2 + blinkDuration);
+      }
+    }
+  };
+}
+
+// src/animate/animations/composition.ts
+function AnimationGroup(animations, options = {}) {
+  var _a, _b;
+  const { lagRatio = 0 } = options;
+  const maxDuration = animations.length > 0 ? Math.max(...animations.map((a, i) => a.duration + i * lagRatio * a.duration)) : 0;
+  return {
+    duration: maxDuration,
+    target: (_b = (_a = animations[0]) == null ? void 0 : _a.target) != null ? _b : null,
+    execute(scene, timeline, startTime) {
+      animations.forEach((animation, index) => {
+        const delay = index * lagRatio * animation.duration;
+        animation.execute(scene, timeline, startTime + delay);
+      });
+    }
+  };
+}
+function Succession(animations, options = {}) {
+  var _a, _b;
+  const { delay = 0 } = options;
+  const totalDuration = animations.reduce((sum, a) => sum + a.duration, 0);
+  return {
+    duration: totalDuration,
+    target: (_b = (_a = animations[0]) == null ? void 0 : _a.target) != null ? _b : null,
+    execute(scene, timeline, startTime) {
+      let currentTime = startTime + delay;
+      animations.forEach((animation) => {
+        animation.execute(scene, timeline, currentTime);
+        currentTime += animation.duration;
+      });
+    }
+  };
+}
+function LaggedStart(animations, options = {}) {
+  var _a;
+  const { lagRatio = 0.05, duration, delay = 0 } = options;
+  let effectiveLagRatio = lagRatio;
+  if (duration && animations.length > 1) {
+    const baseDuration = ((_a = animations[0]) == null ? void 0 : _a.duration) || 1;
+    effectiveLagRatio = (duration - baseDuration) / (baseDuration * (animations.length - 1));
+  }
+  return AnimationGroup(animations, { lagRatio: effectiveLagRatio, delay });
+}
+function LaggedStartMap(animationFn, targets, options = {}) {
+  const _a = options, { animationOptions } = _a, groupOptions = __objRest(_a, ["animationOptions"]);
+  const animations = targets.map((target) => animationFn(target, animationOptions));
+  return LaggedStart(animations, groupOptions);
+}
+function Wait(duration = 1) {
+  return {
+    duration,
+    target: null,
+    execute() {
+    }
+  };
+}
+function ApplyMethod(target, method, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0 } = options;
+  const targetDiagram = method(target);
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      import("./transform-TMK5SL54.mjs").then(({ Transform: Transform2 }) => {
+        Transform2(target, targetDiagram, { duration, easing: easing2, delay }).execute(scene, timeline, startTime);
+      });
+    }
+  };
+}
+function UpdateFromFunc(target, updateFn, options = {}) {
+  const { duration = 1, delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      const proxy = { t: 0 };
+      timeline.add(proxy, {
+        t: 1,
+        duration,
+        delay,
+        ease: "none",
+        onUpdate: () => {
+          updateFn(target, proxy.t);
+        }
+      }, startTime);
+    }
+  };
+}
+function UpdateFromAlphaFunc(target, updateFn, options = {}) {
+  return UpdateFromFunc(target, updateFn, options);
+}
+function Homotopy(target, homotopyFn, options = {}) {
+  const { duration = 1, delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      const paths = element.querySelectorAll("path");
+      paths.forEach((path2) => {
+        const originalD = path2.getAttribute("d") || "";
+        const proxy = { t: 0 };
+        timeline.add(proxy, {
+          t: 1,
+          duration,
+          delay,
+          ease: "none",
+          onUpdate: () => {
+            const newD = transformPathByHomotopy(originalD, homotopyFn, proxy.t);
+            path2.setAttribute("d", newD);
+          }
+        }, startTime);
+      });
+    }
+  };
+}
+function transformPathByHomotopy(d, homotopyFn, t) {
+  return d.replace(
+    /([ML])\s*([\d.-]+)[,\s]+([\d.-]+)/g,
+    (_match, cmd, x, y) => {
+      const [newX, newY] = homotopyFn(parseFloat(x), parseFloat(y), t);
+      return `${cmd}${newX},${newY}`;
+    }
+  );
+}
+
+// src/geometry/axes.ts
+var Axes = class {
+  constructor(config = {}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    this.config = {
+      xRange: (_a = config.xRange) != null ? _a : [-5, 5, 1],
+      yRange: (_b = config.yRange) != null ? _b : [-5, 5, 1],
+      xLength: (_c = config.xLength) != null ? _c : 400,
+      yLength: (_d = config.yLength) != null ? _d : 400,
+      origin: (_e = config.origin) != null ? _e : [400, 300],
+      showTicks: (_f = config.showTicks) != null ? _f : true,
+      showLabels: (_g = config.showLabels) != null ? _g : true,
+      showGrid: (_h = config.showGrid) != null ? _h : false,
+      axisColor: (_i = config.axisColor) != null ? _i : "#374151",
+      gridColor: (_j = config.gridColor) != null ? _j : "#E5E7EB",
+      labelSize: (_k = config.labelSize) != null ? _k : 12
+    };
+    this.diagram = this.build();
+  }
+  /** 构建坐标系图形 */
+  build() {
+    const diagrams = [];
+    const {
+      xRange,
+      yRange,
+      xLength,
+      yLength,
+      origin,
+      showTicks,
+      showLabels,
+      showGrid,
+      axisColor,
+      gridColor,
+      labelSize
+    } = this.config;
+    const [ox, oy] = origin;
+    const xMin = xRange[0], xMax = xRange[1], xStep = xRange[2] || 1;
+    const yMin = yRange[0], yMax = yRange[1], yStep = yRange[2] || 1;
+    const xScale = xLength / (xMax - xMin);
+    const yScale = yLength / (yMax - yMin);
+    if (showGrid) {
+      for (let x = xMin; x <= xMax; x += xStep) {
+        const px = ox + x * xScale;
+        diagrams.push(
+          line([px, oy + yMin * yScale], [px, oy + yMax * yScale]).stroke(gridColor).strokeWidth(0.5)
+        );
+      }
+      for (let y = yMin; y <= yMax; y += yStep) {
+        const py = oy - y * yScale;
+        diagrams.push(
+          line([ox + xMin * xScale, py], [ox + xMax * xScale, py]).stroke(gridColor).strokeWidth(0.5)
+        );
+      }
+    }
+    const xAxisStart = [ox + xMin * xScale, oy];
+    const xAxisEnd = [ox + xMax * xScale, oy];
+    diagrams.push(arrow(xAxisStart, xAxisEnd).stroke(axisColor));
+    const yAxisStart = [ox, oy - yMin * yScale];
+    const yAxisEnd = [ox, oy - yMax * yScale];
+    diagrams.push(arrow(yAxisStart, yAxisEnd).stroke(axisColor));
+    if (showTicks || showLabels) {
+      const tickSize = 5;
+      for (let x = xMin; x <= xMax; x += xStep) {
+        if (x === 0) continue;
+        const px = ox + x * xScale;
+        if (showTicks) {
+          diagrams.push(
+            line([px, oy - tickSize], [px, oy + tickSize]).stroke(axisColor).strokeWidth(1)
+          );
+        }
+        if (showLabels) {
+          diagrams.push(
+            text(String(x), { fontSize: labelSize }).position(px, oy + tickSize + labelSize)
+          );
+        }
+      }
+      for (let y = yMin; y <= yMax; y += yStep) {
+        if (y === 0) continue;
+        const py = oy - y * yScale;
+        if (showTicks) {
+          diagrams.push(
+            line([ox - tickSize, py], [ox + tickSize, py]).stroke(axisColor).strokeWidth(1)
+          );
+        }
+        if (showLabels) {
+          diagrams.push(
+            text(String(y), { fontSize: labelSize, anchor: "end" }).position(ox - tickSize - 5, py)
+          );
+        }
+      }
+      if (showLabels) {
+        diagrams.push(
+          text("O", { fontSize: labelSize }).position(ox - tickSize - 5, oy + tickSize + labelSize)
+        );
+      }
+    }
+    return combine(...diagrams);
+  }
+  c2p(xOrPoint, y) {
+    const [x, yVal] = typeof xOrPoint === "number" ? [xOrPoint, y] : xOrPoint;
+    const { xRange, yRange, xLength, yLength, origin } = this.config;
+    const xScale = xLength / (xRange[1] - xRange[0]);
+    const yScale = yLength / (yRange[1] - yRange[0]);
+    return [
+      origin[0] + x * xScale,
+      origin[1] - yVal * yScale
+      // Y 轴向上为正
+    ];
+  }
+  p2c(pxOrPoint, py) {
+    const [px, pyVal] = typeof pxOrPoint === "number" ? [pxOrPoint, py] : pxOrPoint;
+    const { xRange, yRange, xLength, yLength, origin } = this.config;
+    const xScale = xLength / (xRange[1] - xRange[0]);
+    const yScale = yLength / (yRange[1] - yRange[0]);
+    return [
+      (px - origin[0]) / xScale,
+      -(pyVal - origin[1]) / yScale
+    ];
+  }
+  /** 绑制函数图像 */
+  plot(fn, options = {}) {
+    const {
+      xRange = [this.config.xRange[0], this.config.xRange[1]],
+      color = "#EA580C",
+      strokeWidth = 2,
+      samples = 200
+    } = options;
+    const points = [];
+    const step = (xRange[1] - xRange[0]) / samples;
+    for (let x = xRange[0]; x <= xRange[1]; x += step) {
+      const y = fn(x);
+      if (isFinite(y)) {
+        points.push(this.c2p(x, y));
+      }
+    }
+    return polyline(...points).stroke(color).strokeWidth(strokeWidth).fill("none");
+  }
+  /** 绘制参数曲线 */
+  plotParametric(fn, options = {}) {
+    const {
+      tRange = [0, 1],
+      color = "#3B82F6",
+      strokeWidth = 2,
+      samples = 200
+    } = options;
+    const coordPoints = sampleParametric(fn, tRange[0], tRange[1], samples);
+    const pixelPoints = coordPoints.map((p) => this.c2p(p));
+    return polyline(...pixelPoints).stroke(color).strokeWidth(strokeWidth).fill("none");
+  }
+  /** 获取函数图像下方区域 */
+  getArea(graph, options = {}) {
+    const {
+      xRange = [this.config.xRange[0], this.config.xRange[1]],
+      color = "#EA580C",
+      opacity = 0.3
+    } = options;
+    void xRange;
+    return graph.clone().fill(color).opacity(opacity);
+  }
+  /** 获取图形标签 */
+  getGraphLabel(graph, label, options = {}) {
+    const {
+      position = "end",
+      direction = [1, 0],
+      fontSize = 14
+    } = options;
+    const bounds = graph.bounds();
+    let labelPos;
+    switch (position) {
+      case "start":
+        labelPos = [bounds.x, bounds.y + bounds.height / 2];
+        break;
+      case "center":
+        labelPos = [bounds.x + bounds.width / 2, bounds.y + bounds.height / 2];
+        break;
+      case "end":
+      default:
+        labelPos = [bounds.x + bounds.width, bounds.y + bounds.height / 2];
+    }
+    return text(label, { fontSize }).position(labelPos[0] + direction[0] * 20, labelPos[1] + direction[1] * 20);
+  }
+  /** 获取 Diagram */
+  toDiagram() {
+    return this.diagram;
+  }
+};
+var NumberLine = class {
+  constructor(config = {}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    this.config = {
+      range: [(_b = (_a = config.range) == null ? void 0 : _a[0]) != null ? _b : -5, (_d = (_c = config.range) == null ? void 0 : _c[1]) != null ? _d : 5, (_f = (_e = config.range) == null ? void 0 : _e[2]) != null ? _f : 1],
+      length: (_g = config.length) != null ? _g : 400,
+      origin: (_h = config.origin) != null ? _h : [400, 300],
+      showTicks: (_i = config.showTicks) != null ? _i : true,
+      showLabels: (_j = config.showLabels) != null ? _j : true,
+      color: (_k = config.color) != null ? _k : "#374151"
+    };
+    this.diagram = this.build();
+  }
+  build() {
+    const { range, length: length2, origin, showTicks, showLabels, color } = this.config;
+    const [min, max, step] = range;
+    const scale = length2 / (max - min);
+    const diagrams = [];
+    const start = [origin[0] + min * scale, origin[1]];
+    const end = [origin[0] + max * scale, origin[1]];
+    diagrams.push(arrow(start, end).stroke(color));
+    if (showTicks || showLabels) {
+      for (let x = min; x <= max; x += step) {
+        const px = origin[0] + x * scale;
+        if (showTicks) {
+          diagrams.push(
+            line([px, origin[1] - 5], [px, origin[1] + 5]).stroke(color).strokeWidth(1)
+          );
+        }
+        if (showLabels) {
+          diagrams.push(
+            text(String(x), { fontSize: 12 }).position(px, origin[1] + 20)
+          );
+        }
+      }
+    }
+    return combine(...diagrams);
+  }
+  n2p(n) {
+    const { range, length: length2, origin } = this.config;
+    const scale = length2 / (range[1] - range[0]);
+    return [origin[0] + n * scale, origin[1]];
+  }
+  p2n(p) {
+    const { range, length: length2, origin } = this.config;
+    const scale = length2 / (range[1] - range[0]);
+    return (p[0] - origin[0]) / scale;
+  }
+  toDiagram() {
+    return this.diagram;
+  }
+};
+function NumberPlane(config = {}) {
+  return new Axes(__spreadProps(__spreadValues({}, config), {
+    showGrid: true
+  }));
+}
+function PolarAxes(config = {}) {
+  const {
+    maxRadius = 200,
+    origin = [400, 300],
+    divisions = 8,
+    color = "#374151"
+  } = config;
+  const diagrams = [];
+  const [ox, oy] = origin;
+  for (let r = maxRadius / 4; r <= maxRadius; r += maxRadius / 4) {
+    const points = [];
+    for (let angle2 = 0; angle2 <= 2 * PI; angle2 += PI / 36) {
+      points.push([ox + r * Math.cos(angle2), oy + r * Math.sin(angle2)]);
+    }
+    diagrams.push(polyline(...points).stroke("#E5E7EB").strokeWidth(0.5));
+  }
+  for (let i = 0; i < divisions; i++) {
+    const angle2 = i / divisions * 2 * PI;
+    diagrams.push(
+      line([ox, oy], [ox + maxRadius * Math.cos(angle2), oy + maxRadius * Math.sin(angle2)]).stroke("#E5E7EB").strokeWidth(0.5)
+    );
+  }
+  diagrams.push(
+    arrow([ox - maxRadius, oy], [ox + maxRadius + 20, oy]).stroke(color),
+    arrow([ox, oy + maxRadius], [ox, oy - maxRadius - 20]).stroke(color)
+  );
+  return combine(...diagrams);
+}
+
+// src/geometry/construct.ts
+function midpoint2(a, b) {
+  return midpoint(a, b);
+}
+function perpendicularBisector(a, b, length2 = 100) {
+  const mid = midpoint2(a, b);
+  const direction = normalize(perpendicular(sub(b, a)));
+  const start = add(mid, mul(direction, -length2 / 2));
+  const end = add(mid, mul(direction, length2 / 2));
+  return line(start, end);
+}
+function perpendicularLine(point, lineStart, lineEnd, length2 = 100) {
+  const lineDir = normalize(sub(lineEnd, lineStart));
+  const perpDir = perpendicular(lineDir);
+  const start = add(point, mul(perpDir, -length2 / 2));
+  const end = add(point, mul(perpDir, length2 / 2));
+  return line(start, end);
+}
+function footOfPerpendicular(point, lineStart, lineEnd) {
+  const lineDir = sub(lineEnd, lineStart);
+  const pointDir = sub(point, lineStart);
+  const lineLenSq = lineDir[0] ** 2 + lineDir[1] ** 2;
+  const t = (pointDir[0] * lineDir[0] + pointDir[1] * lineDir[1]) / lineLenSq;
+  return add(lineStart, mul(lineDir, t));
+}
+function parallelLine(point, lineStart, lineEnd, length2 = 100) {
+  const lineDir = normalize(sub(lineEnd, lineStart));
+  const start = add(point, mul(lineDir, -length2 / 2));
+  const end = add(point, mul(lineDir, length2 / 2));
+  return line(start, end);
+}
+function angleMarker(vertex, a, b, options = {}) {
+  const { radius = 30, color = "#EA580C", label } = options;
+  const dirA = normalize(sub(a, vertex));
+  const dirB = normalize(sub(b, vertex));
+  const angleA = Math.atan2(dirA[1], dirA[0]);
+  const angleB = Math.atan2(dirB[1], dirB[0]);
+  let startAngle = angleA;
+  let endAngle = angleB;
+  if (endAngle < startAngle) {
+    endAngle += 2 * PI;
+  }
+  const diagrams = [];
+  diagrams.push(
+    arc(radius, startAngle, endAngle).translate(vertex[0], vertex[1]).stroke(color).strokeWidth(2)
+  );
+  if (label) {
+    const midAngle = (startAngle + endAngle) / 2;
+    const labelPos = [
+      vertex[0] + (radius + 15) * Math.cos(midAngle),
+      vertex[1] + (radius + 15) * Math.sin(midAngle)
+    ];
+    diagrams.push(text(label, { fontSize: 14 }).position(labelPos[0], labelPos[1]));
+  }
+  return combine(...diagrams);
+}
+function rightAngleMarker(vertex, a, b, size = 15) {
+  const dirA = normalize(sub(a, vertex));
+  const dirB = normalize(sub(b, vertex));
+  const p1 = add(vertex, mul(dirA, size));
+  const p2 = add(add(vertex, mul(dirA, size)), mul(dirB, size));
+  const p3 = add(vertex, mul(dirB, size));
+  return polygon(vertex, p1, p2, p3).fill("none").stroke("#374151").strokeWidth(1.5);
+}
+function circumscribedCircle(a, b, c) {
+  const midAB = midpoint2(a, b);
+  const midBC = midpoint2(b, c);
+  const dirAB = perpendicular(sub(b, a));
+  const dirBC = perpendicular(sub(c, b));
+  const center = lineIntersection(
+    midAB,
+    add(midAB, dirAB),
+    midBC,
+    add(midBC, dirBC)
+  );
+  if (!center) {
+    throw new Error("\u4E09\u70B9\u5171\u7EBF\uFF0C\u65E0\u6CD5\u786E\u5B9A\u5706");
+  }
+  const radius = distance(center, a);
+  return {
+    center,
+    radius,
+    diagram: circle(radius).translate(center[0], center[1]).fill("none").stroke("#EA580C")
+  };
+}
+function inscribedCircle(a, b, c) {
+  const ab = distance(a, b);
+  const bc = distance(b, c);
+  const ca = distance(c, a);
+  const perimeter = ab + bc + ca;
+  const center = [
+    (bc * a[0] + ca * b[0] + ab * c[0]) / perimeter,
+    (bc * a[1] + ca * b[1] + ab * c[1]) / perimeter
+  ];
+  const s = perimeter / 2;
+  const area = Math.sqrt(s * (s - ab) * (s - bc) * (s - ca));
+  const radius = area / s;
+  return {
+    center,
+    radius,
+    diagram: circle(radius).translate(center[0], center[1]).fill("none").stroke("#3B82F6")
+  };
+}
+function circleIntersections(c1, r1, c2, r2) {
+  const d = distance(c1, c2);
+  if (d > r1 + r2 || d < Math.abs(r1 - r2)) {
+    return [];
+  }
+  if (d === 0 && r1 === r2) {
+    return [];
+  }
+  const a = (r1 * r1 - r2 * r2 + d * d) / (2 * d);
+  const h = Math.sqrt(r1 * r1 - a * a);
+  const p2 = [
+    c1[0] + a * (c2[0] - c1[0]) / d,
+    c1[1] + a * (c2[1] - c1[1]) / d
+  ];
+  if (h === 0) {
+    return [p2];
+  }
+  const intersection1 = [
+    p2[0] + h * (c2[1] - c1[1]) / d,
+    p2[1] - h * (c2[0] - c1[0]) / d
+  ];
+  const intersection2 = [
+    p2[0] - h * (c2[1] - c1[1]) / d,
+    p2[1] + h * (c2[0] - c1[0]) / d
+  ];
+  return [intersection1, intersection2];
+}
+function centroid(a, b, c) {
+  return [(a[0] + b[0] + c[0]) / 3, (a[1] + b[1] + c[1]) / 3];
+}
+function orthocenter(a, b, c) {
+  const altitudeA = footOfPerpendicular(a, b, c);
+  const altitudeB = footOfPerpendicular(b, a, c);
+  return lineIntersection(a, altitudeA, b, altitudeB) || centroid(a, b, c);
+}
+function median(vertex, opposite1, opposite2) {
+  const mid = midpoint2(opposite1, opposite2);
+  return line(vertex, mid);
+}
+function angleBisector(vertex, a, b, length2 = 100) {
+  const dirA = normalize(sub(a, vertex));
+  const dirB = normalize(sub(b, vertex));
+  const bisectorDir = normalize(add(dirA, dirB));
+  const end = add(vertex, mul(bisectorDir, length2));
+  return line(vertex, end);
+}
+function altitude(vertex, opposite1, opposite2) {
+  const foot = footOfPerpendicular(vertex, opposite1, opposite2);
+  return line(vertex, foot);
+}
+function reflectPoint(point, center) {
+  return [2 * center[0] - point[0], 2 * center[1] - point[1]];
+}
+function reflectPointOverLine(point, lineStart, lineEnd) {
+  const foot = footOfPerpendicular(point, lineStart, lineEnd);
+  return [2 * foot[0] - point[0], 2 * foot[1] - point[1]];
+}
+function reflectOverPoint(diagram, center) {
+  return diagram.translate(-center[0], -center[1]).scale(-1, -1).translate(center[0], center[1]);
+}
+function lineIntersection(l1Start, l1End, l2Start, l2End) {
+  const x1 = l1Start[0], y1 = l1Start[1];
+  const x2 = l1End[0], y2 = l1End[1];
+  const x3 = l2Start[0], y3 = l2Start[1];
+  const x4 = l2End[0], y4 = l2End[1];
+  const denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
+  if (Math.abs(denom) < 1e-10) {
+    return null;
+  }
+  const t = ((x1 - x3) * (y3 - y4) - (y1 - y3) * (x3 - x4)) / denom;
+  return [
+    x1 + t * (x2 - x1),
+    y1 + t * (y2 - y1)
+  ];
+}
+
+// src/interactive/interactive.ts
+var Interactive = class {
+  constructor(container, options = {}) {
+    this.values = {};
+    this.controls = /* @__PURE__ */ new Map();
+    this.locators = /* @__PURE__ */ new Map();
+    this.drawFn = null;
+    this.animationId = null;
+    this.playingSliders = /* @__PURE__ */ new Map();
+    var _a, _b, _c, _d, _e, _f;
+    this.container = container;
+    const rect2 = container.getBoundingClientRect();
+    const autoWidth = rect2.width > 0 ? rect2.width : 400;
+    const autoHeight = rect2.height > 0 ? Math.min(rect2.height - 80, 300) : 300;
+    this.options = {
+      width: (_a = options.width) != null ? _a : autoWidth,
+      height: (_b = options.height) != null ? _b : autoHeight,
+      background: (_c = options.background) != null ? _c : "#ffffff",
+      controlsPosition: (_d = options.controlsPosition) != null ? _d : "bottom",
+      controlsStyle: (_e = options.controlsStyle) != null ? _e : {},
+      rough: (_f = options.rough) != null ? _f : false
+    };
+    this.setupLayout();
+    this.svg = this.createSVG();
+    this.startAnimationLoop();
+  }
+  /** 设置布局 */
+  setupLayout() {
+    this.container.style.display = "flex";
+    this.container.style.flexDirection = "column";
+    this.container.style.height = "100%";
+    this.container.style.background = "#ffffff";
+    this.svgContainer = document.createElement("div");
+    this.svgContainer.style.flex = "1";
+    this.svgContainer.style.display = "flex";
+    this.svgContainer.style.alignItems = "center";
+    this.svgContainer.style.justifyContent = "center";
+    this.svgContainer.style.position = "relative";
+    this.svgContainer.style.minHeight = "280px";
+    this.svgContainer.style.overflow = "hidden";
+    this.container.appendChild(this.svgContainer);
+    this.controlsContainer = document.createElement("div");
+    this.controlsContainer.style.padding = "12px 16px";
+    this.controlsContainer.style.display = "flex";
+    this.controlsContainer.style.flexWrap = "wrap";
+    this.controlsContainer.style.gap = "16px";
+    this.controlsContainer.style.alignItems = "center";
+    this.controlsContainer.style.justifyContent = "center";
+    this.controlsContainer.style.backgroundColor = "#f9fafb";
+    this.controlsContainer.style.borderTop = "1px solid #e5e7eb";
+    this.controlsContainer.style.flexShrink = "0";
+    Object.assign(this.controlsContainer.style, this.options.controlsStyle);
+    this.container.appendChild(this.controlsContainer);
+  }
+  /** 创建 SVG */
+  createSVG() {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("width", String(this.options.width));
+    svg.setAttribute("height", String(this.options.height));
+    svg.setAttribute("viewBox", `0 0 ${this.options.width} ${this.options.height}`);
+    svg.style.background = this.options.background || "#ffffff";
+    this.svgContainer.appendChild(svg);
+    return svg;
+  }
+  // ========== 控件方法 ==========
+  /** 添加滑块控件 */
+  slider(name, config) {
+    const {
+      min,
+      max,
+      value = min,
+      step = (max - min) / 100,
+      label = name,
+      showPlayButton = false,
+      playDuration = 2,
+      loop = false
+    } = config;
+    this.values[name] = value;
+    const wrapper = document.createElement("div");
+    wrapper.style.display = "flex";
+    wrapper.style.flexDirection = "column";
+    wrapper.style.gap = "4px";
+    wrapper.style.minWidth = "150px";
+    const labelRow = document.createElement("div");
+    labelRow.style.display = "flex";
+    labelRow.style.justifyContent = "space-between";
+    labelRow.style.fontSize = "14px";
+    labelRow.style.color = "#374151";
+    const labelEl = document.createElement("span");
+    labelEl.textContent = label;
+    const valueEl = document.createElement("span");
+    valueEl.textContent = String(value);
+    valueEl.style.fontFamily = "monospace";
+    labelRow.appendChild(labelEl);
+    labelRow.appendChild(valueEl);
+    wrapper.appendChild(labelRow);
+    const sliderRow = document.createElement("div");
+    sliderRow.style.display = "flex";
+    sliderRow.style.gap = "8px";
+    sliderRow.style.alignItems = "center";
+    const slider = document.createElement("input");
+    slider.type = "range";
+    slider.min = String(min);
+    slider.max = String(max);
+    slider.step = String(step);
+    slider.value = String(value);
+    slider.style.flex = "1";
+    slider.style.accentColor = "#EA580C";
+    slider.addEventListener("input", () => {
+      const newValue = parseFloat(slider.value);
+      this.values[name] = newValue;
+      valueEl.textContent = newValue.toFixed(2);
+      this.redraw();
+    });
+    sliderRow.appendChild(slider);
+    if (showPlayButton) {
+      const playBtn = document.createElement("button");
+      playBtn.textContent = "\u25B6";
+      playBtn.style.padding = "4px 8px";
+      playBtn.style.border = "none";
+      playBtn.style.borderRadius = "4px";
+      playBtn.style.backgroundColor = "#EA580C";
+      playBtn.style.color = "white";
+      playBtn.style.cursor = "pointer";
+      playBtn.addEventListener("click", () => {
+        if (this.playingSliders.has(name)) {
+          this.playingSliders.delete(name);
+          playBtn.textContent = "\u25B6";
+        } else {
+          this.playingSliders.set(name, {
+            startTime: performance.now(),
+            startValue: this.values[name],
+            config: { min, max, value, step, label, showPlayButton, playDuration, loop }
+          });
+          playBtn.textContent = "\u23F8";
+        }
+      });
+      sliderRow.appendChild(playBtn);
+    }
+    wrapper.appendChild(sliderRow);
+    this.controlsContainer.appendChild(wrapper);
+    this.controls.set(name, wrapper);
+    return this;
+  }
+  /** 添加可拖拽点 */
+  locator(name, config) {
+    const {
+      x,
+      y,
+      radius = 8,
+      color = "#EA580C",
+      constraint
+    } = config;
+    this.values[name] = V2(x, y);
+    const circle2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle2.setAttribute("cx", String(x));
+    circle2.setAttribute("cy", String(y));
+    circle2.setAttribute("r", String(radius));
+    circle2.setAttribute("fill", color);
+    circle2.setAttribute("stroke", "white");
+    circle2.setAttribute("stroke-width", "2");
+    circle2.style.cursor = "grab";
+    let isDragging = false;
+    const onMouseDown = (e) => {
+      isDragging = true;
+      circle2.style.cursor = "grabbing";
+      e.preventDefault();
+    };
+    const onMouseMove = (e) => {
+      var _a, _b, _c, _d;
+      if (!isDragging) return;
+      const rect2 = this.svg.getBoundingClientRect();
+      const clientX = "touches" in e ? (_b = (_a = e.touches[0]) == null ? void 0 : _a.clientX) != null ? _b : 0 : e.clientX;
+      const clientY = "touches" in e ? (_d = (_c = e.touches[0]) == null ? void 0 : _c.clientY) != null ? _d : 0 : e.clientY;
+      let newX = (clientX - rect2.left) * (this.options.width / rect2.width);
+      let newY = (clientY - rect2.top) * (this.options.height / rect2.height);
+      if (constraint) {
+        [newX, newY] = constraint([newX, newY]);
+      }
+      circle2.setAttribute("cx", String(newX));
+      circle2.setAttribute("cy", String(newY));
+      this.values[name] = V2(newX, newY);
+      this.redraw();
+    };
+    const onMouseUp = () => {
+      isDragging = false;
+      circle2.style.cursor = "grab";
+    };
+    circle2.addEventListener("mousedown", onMouseDown);
+    circle2.addEventListener("touchstart", onMouseDown);
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("touchmove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("touchend", onMouseUp);
+    this.svg.appendChild(circle2);
+    this.locators.set(name, circle2);
+    return this;
+  }
+  /** 添加按钮 */
+  button(config) {
+    const { label, onClick } = config;
+    const button = document.createElement("button");
+    button.textContent = label;
+    button.style.padding = "8px 16px";
+    button.style.border = "none";
+    button.style.borderRadius = "6px";
+    button.style.backgroundColor = "#EA580C";
+    button.style.color = "white";
+    button.style.fontSize = "14px";
+    button.style.cursor = "pointer";
+    button.style.transition = "background-color 0.2s";
+    button.addEventListener("mouseenter", () => {
+      button.style.backgroundColor = "#DC4E08";
+    });
+    button.addEventListener("mouseleave", () => {
+      button.style.backgroundColor = "#EA580C";
+    });
+    button.addEventListener("click", onClick);
+    this.controlsContainer.appendChild(button);
+    return this;
+  }
+  /** 添加复选框 */
+  checkbox(name, config = {}) {
+    const { label = name, value = false } = config;
+    this.values[name] = value;
+    const wrapper = document.createElement("label");
+    wrapper.style.display = "flex";
+    wrapper.style.alignItems = "center";
+    wrapper.style.gap = "8px";
+    wrapper.style.cursor = "pointer";
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.checked = value;
+    checkbox.style.accentColor = "#EA580C";
+    checkbox.addEventListener("change", () => {
+      this.values[name] = checkbox.checked;
+      this.redraw();
+    });
+    const labelEl = document.createElement("span");
+    labelEl.textContent = label;
+    labelEl.style.fontSize = "14px";
+    labelEl.style.color = "#374151";
+    wrapper.appendChild(checkbox);
+    wrapper.appendChild(labelEl);
+    this.controlsContainer.appendChild(wrapper);
+    return this;
+  }
+  // ========== 绘制方法 ==========
+  /** 设置绘制函数 */
+  draw(fn) {
+    this.drawFn = fn;
+    this.redraw();
+    return this;
+  }
+  /** 重新绘制 */
+  redraw() {
+    if (!this.drawFn) return;
+    const savedLocators = [];
+    this.locators.forEach((element, name) => {
+      savedLocators.push({ name, element });
+    });
+    while (this.svg.firstChild) {
+      this.svg.removeChild(this.svg.firstChild);
+    }
+    const diagram = this.drawFn(this.values);
+    renderToSVG(diagram, this.svg, {
+      width: this.options.width,
+      height: this.options.height,
+      background: this.options.background
+    });
+    savedLocators.forEach(({ name, element }) => {
+      this.svg.appendChild(element);
+      this.locators.set(name, element);
+    });
+  }
+  // ========== 动画循环 ==========
+  /** 启动动画循环 */
+  startAnimationLoop() {
+    const animate = () => {
+      this.animationId = requestAnimationFrame(animate);
+      const now = performance.now();
+      let needsRedraw = false;
+      this.playingSliders.forEach((state, name) => {
+        const elapsed = (now - state.startTime) / 1e3;
+        const progress = elapsed / state.config.playDuration;
+        if (progress >= 1) {
+          if (state.config.loop) {
+            state.startTime = now;
+            this.values[name] = state.config.min;
+          } else {
+            this.values[name] = state.config.max;
+            this.playingSliders.delete(name);
+          }
+        } else {
+          const range = state.config.max - state.config.min;
+          this.values[name] = state.config.min + range * progress;
+        }
+        const control = this.controls.get(name);
+        if (control) {
+          const slider = control.querySelector('input[type="range"]');
+          const valueEl = control.querySelector("span:last-child");
+          if (slider) slider.value = String(this.values[name]);
+          if (valueEl) valueEl.textContent = this.values[name].toFixed(2);
+        }
+        needsRedraw = true;
+      });
+      if (needsRedraw) {
+        this.redraw();
+      }
+    };
+    animate();
+  }
+  // ========== 工具方法 ==========
+  /** 获取当前值 */
+  getValue(name) {
+    return this.values[name];
+  }
+  /** 设置值 */
+  setValue(name, value) {
+    this.values[name] = value;
+    if (Array.isArray(value) && this.locators.has(name)) {
+      const circle2 = this.locators.get(name);
+      circle2.setAttribute("cx", String(value[0]));
+      circle2.setAttribute("cy", String(value[1]));
+    }
+    if (typeof value === "number" && this.controls.has(name)) {
+      const control = this.controls.get(name);
+      const slider = control.querySelector('input[type="range"]');
+      if (slider) slider.value = String(value);
+    }
+    this.redraw();
+    return this;
+  }
+  /** 销毁 */
+  destroy() {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+    }
+    this.container.innerHTML = "";
+  }
+};
+function createInteractive(container, options) {
+  return new Interactive(container, options);
+}
+
+// src/interactive/index.ts
+function circleConstraint(cx, cy, radius) {
+  return (p) => {
+    const dx = p[0] - cx;
+    const dy = p[1] - cy;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len === 0) return [cx + radius, cy];
+    return [cx + dx / len * radius, cy + dy / len * radius];
+  };
+}
+function lineConstraint(x1, y1, x2, y2) {
+  return (p) => {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const lenSq = dx * dx + dy * dy;
+    if (lenSq === 0) return [x1, y1];
+    let t = ((p[0] - x1) * dx + (p[1] - y1) * dy) / lenSq;
+    t = Math.max(0, Math.min(1, t));
+    return [x1 + t * dx, y1 + t * dy];
+  };
+}
+function rectConstraint(x, y, width, height) {
+  return (p) => {
+    return [
+      Math.max(x, Math.min(x + width, p[0])),
+      Math.max(y, Math.min(y + height, p[1]))
+    ];
+  };
+}
+function gridConstraint(gridSize, offsetX = 0, offsetY = 0) {
+  return (p) => {
+    return [
+      Math.round((p[0] - offsetX) / gridSize) * gridSize + offsetX,
+      Math.round((p[1] - offsetY) / gridSize) * gridSize + offsetY
+    ];
+  };
+}
+function polarConstraint(cx, cy, minRadius, maxRadius) {
+  return (p) => {
+    const dx = p[0] - cx;
+    const dy = p[1] - cy;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len === 0) return [cx + minRadius, cy];
+    const constrainedLen = Math.max(minRadius, Math.min(maxRadius, len));
+    return [cx + dx / len * constrainedLen, cy + dy / len * constrainedLen];
+  };
+}
+function functionConstraint(fn, minX, maxX) {
+  return (p) => {
+    const x = Math.max(minX, Math.min(maxX, p[0]));
+    return [x, fn(x)];
+  };
+}
+export {
+  AnimationGroup,
+  ApplyMethod,
+  Axes,
+  Blink,
+  Circumscribe,
+  Create,
+  DEGREES,
+  DL,
+  DOWN,
+  DR,
+  Diagram,
+  DrawBorderThenFill,
+  FadeIn,
+  FadeInFrom,
+  FadeInFromDown,
+  FadeInFromLeft,
+  FadeInFromRight,
+  FadeInFromUp,
+  FadeOut,
+  FadeOutTo,
+  FadeTransform,
+  Flash,
+  GrowFromCenter,
+  GrowFromEdge,
+  GrowFromPoint,
+  Homotopy,
+  IDENTITY,
+  Indicate,
+  Interactive,
+  LEFT,
+  LaggedStart,
+  LaggedStartMap,
+  Morphing,
+  MoveAlongPath,
+  MoveTo,
+  MoveToTarget,
+  NumberLine,
+  NumberPlane,
+  ORIGIN,
+  PI,
+  PolarAxes,
+  RIGHT,
+  ReplacementTransform,
+  Rotate,
+  Rotating,
+  Scale,
+  ScaleInPlace,
+  Scene,
+  Shift,
+  ShowPassingFlash,
+  SpinInFromNothing,
+  Succession,
+  TAU,
+  Timeline,
+  Transform,
+  TransformMatchingShapes,
+  UL,
+  UP,
+  UR,
+  UpdateFromAlphaFunc,
+  UpdateFromFunc,
+  V2,
+  V3,
+  ValueTracker,
+  Wait,
+  Wiggle,
+  Write,
+  add,
+  altitude,
+  angle,
+  angleBetween,
+  angleBisector,
+  angleMarker,
+  applyMatrix,
+  arc,
+  arrow,
+  centroid,
+  circle,
+  circleConstraint,
+  circleIntersections,
+  circumscribedCircle,
+  clamp,
+  combine,
+  createInteractive,
+  createScene,
+  createTimeline,
+  cross,
+  cubicBezier,
+  degToRad,
+  distance,
+  div,
+  dot2 as dot,
+  doubleArrow,
+  easing,
+  easingMap,
+  ellipse,
+  equilateralTriangle,
+  footOfPerpendicular,
+  functionConstraint,
+  getGSAPEasing,
+  gridConstraint,
+  group,
+  inscribedCircle,
+  length,
+  lerp,
+  lerpNumber,
+  line,
+  lineConstraint,
+  lineIntersection,
+  mapRange,
+  matrixMultiply,
+  median,
+  midpoint,
+  mul,
+  normalize,
+  orthocenter,
+  parallelLine,
+  path,
+  pathFromString,
+  perpendicular,
+  perpendicularBisector,
+  perpendicularLine,
+  polarConstraint,
+  polygon,
+  polyline,
+  quadraticBezier,
+  radToDeg,
+  rect,
+  rectConstraint,
+  reflect,
+  reflectOverPoint,
+  reflectPoint,
+  reflectPointOverLine,
+  regularPolygon,
+  renderToRough,
+  renderToSVG,
+  rightAngleMarker,
+  rotate,
+  rotationMatrix,
+  roughPresets,
+  sampleParametric,
+  scaleMatrix,
+  sector,
+  square,
+  star,
+  sub,
+  tex,
+  text,
+  toSVGString,
+  translationMatrix,
+  triangle,
+  dot as vectorDot
+};