locusing 0.1.2 → 0.1.3

package/dist/index.mjs

@@ -1,33 +1,14 @@
-import {
-  init_render_svg,
-  renderToSVG,
-  toSVGString
-} from "./chunk-3XW6GBD6.mjs";
-import {
-  ClockwiseTransform,
-  CounterclockwiseTransform,
-  Morphing,
-  MoveToTarget,
-  ReplacementTransform,
-  Timeline,
-  Transform,
-  TransformFromCopy,
-  TransformMatchingShapes,
-  TransformMatchingTex,
-  createTimeline,
-  easingMap,
-  getGSAPEasing,
-  init_timeline,
-  querySelectorAllIncludingSelf
-} from "./chunk-HNU2F3GX.mjs";
 import {
   __esm,
   __export,
   __objRest,
   __spreadProps,
   __spreadValues,
-  __toCommonJS
-} from "./chunk-TQQRYA5H.mjs";
+  __toCommonJS,
+  init_render_svg,
+  renderToSVG,
+  toSVGString
+} from "./chunk-VPKI3XSA.mjs";
 
 // src/math/complex.ts
 function complexToVector(z) {
@@ -481,8 +462,199 @@ var init_frame = __esm({
   }
 });
 
-// src/core/animate-proxy.ts
+// src/animate/timeline.ts
 import { gsap } from "gsap";
+function createTimeline(options) {
+  return new Timeline(options);
+}
+function getGSAPEasing(easing2) {
+  return easingMap[easing2] || easing2;
+}
+var Timeline, easingMap;
+var init_timeline = __esm({
+  "src/animate/timeline.ts"() {
+    "use strict";
+    Timeline = class {
+      constructor(options = {}) {
+        this._status = "pending";
+        this.timeline = gsap.timeline({
+          paused: true,
+          onStart: () => {
+            var _a;
+            this._status = "running";
+            (_a = options.onStart) == null ? void 0 : _a.call(options);
+          },
+          onComplete: () => {
+            var _a;
+            this._status = "completed";
+            (_a = options.onComplete) == null ? void 0 : _a.call(options);
+          },
+          onUpdate: () => {
+            var _a;
+            (_a = options.onUpdate) == null ? void 0 : _a.call(options, this.progress);
+          }
+        });
+      }
+      /** 当前状态 */
+      get status() {
+        return this._status;
+      }
+      /** 当前进度 (0-1) */
+      get progress() {
+        return this.timeline.progress();
+      }
+      /** 总时长 */
+      get duration() {
+        return this.timeline.duration();
+      }
+      /** 当前时间 */
+      get time() {
+        return this.timeline.time();
+      }
+      /**
+       * 添加动画到时间线
+       */
+      add(target, vars, position) {
+        this.timeline.to(target, vars, position);
+        return this;
+      }
+      /**
+       * 添加回调函数
+       */
+      call(callback, position) {
+        this.timeline.call(callback, void 0, position);
+        return this;
+      }
+      /**
+       * 添加延迟
+       */
+      delay(seconds, position) {
+        this.timeline.to({}, { duration: seconds }, position);
+        return this;
+      }
+      /**
+       * 添加标签
+       */
+      label(name, position) {
+        this.timeline.addLabel(name, position);
+        return this;
+      }
+      /**
+       * 播放
+       */
+      play() {
+        this._status = "running";
+        this.timeline.play();
+        return this;
+      }
+      /**
+       * 暂停
+       */
+      pause() {
+        this._status = "paused";
+        this.timeline.pause();
+        return this;
+      }
+      /**
+       * 恢复
+       */
+      resume() {
+        this._status = "running";
+        this.timeline.resume();
+        return this;
+      }
+      /**
+       * 停止并重置
+       */
+      restart() {
+        this._status = "pending";
+        this.timeline.restart();
+        return this;
+      }
+      /**
+       * 跳转到指定时间
+       */
+      seek(time) {
+        this.timeline.seek(time);
+        return this;
+      }
+      /**
+       * 设置进度
+       */
+      setProgress(progress) {
+        this.timeline.progress(progress);
+        return this;
+      }
+      /**
+       * 设置速度
+       */
+      setSpeed(speed) {
+        this.timeline.timeScale(speed);
+        return this;
+      }
+      /**
+       * 反向播放
+       */
+      reverse() {
+        this.timeline.reverse();
+        return this;
+      }
+      /**
+       * 销毁
+       */
+      kill() {
+        this.timeline.kill();
+      }
+      /**
+       * 等待完成
+       */
+      async finished() {
+        return new Promise((resolve) => {
+          this.timeline.eventCallback("onComplete", resolve);
+        });
+      }
+    };
+    easingMap = {
+      linear: "none",
+      easeIn: "power2.in",
+      easeOut: "power2.out",
+      easeInOut: "power2.inOut",
+      easeInQuad: "power1.in",
+      easeOutQuad: "power1.out",
+      easeInOutQuad: "power1.inOut",
+      easeInCubic: "power2.in",
+      easeOutCubic: "power2.out",
+      easeInOutCubic: "power2.inOut",
+      easeInQuart: "power3.in",
+      easeOutQuart: "power3.out",
+      easeInOutQuart: "power3.inOut",
+      easeInQuint: "power4.in",
+      easeOutQuint: "power4.out",
+      easeInOutQuint: "power4.inOut",
+      easeInSine: "sine.in",
+      easeOutSine: "sine.out",
+      easeInOutSine: "sine.inOut",
+      easeInExpo: "expo.in",
+      easeOutExpo: "expo.out",
+      easeInOutExpo: "expo.inOut",
+      easeInCirc: "circ.in",
+      easeOutCirc: "circ.out",
+      easeInOutCirc: "circ.inOut",
+      easeInBack: "back.in",
+      easeOutBack: "back.out",
+      easeInOutBack: "back.inOut",
+      easeInElastic: "elastic.in",
+      easeOutElastic: "elastic.out",
+      easeInOutElastic: "elastic.inOut",
+      easeInBounce: "bounce.in",
+      easeOutBounce: "bounce.out",
+      easeInOutBounce: "bounce.inOut"
+    };
+  }
+});
+
+// src/core/animate-proxy.ts
+import { gsap as gsap2 } from "gsap";
 function createAnimateAnimation(proxy) {
   var _a, _b, _c;
   const source = proxy.getSource();
@@ -498,7 +670,7 @@ function createAnimateAnimation(proxy) {
       const sourceElement = scene.getElement(source);
       const targetElement = scene.getOrCreateElement(target);
       if (!sourceElement || !targetElement) return;
-      gsap.set(targetElement, { opacity: 0, visibility: "hidden" });
+      gsap2.set(targetElement, { opacity: 0, visibility: "hidden" });
       const sourceBBox = ((_a2 = sourceElement.getBBox) == null ? void 0 : _a2.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
       const targetBBox = ((_b2 = targetElement.getBBox) == null ? void 0 : _b2.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
       const scaleX = targetBBox.width / (sourceBBox.width || 1);
@@ -509,7 +681,7 @@ function createAnimateAnimation(proxy) {
       const targetCenterY = targetBBox.y + targetBBox.height / 2;
       const translateX = targetCenterX - sourceCenterX;
       const translateY = targetCenterY - sourceCenterY;
-      gsap.set(sourceElement, {
+      gsap2.set(sourceElement, {
         transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`
       });
       const targetStyle = target.shape.style;
@@ -522,7 +694,7 @@ function createAnimateAnimation(proxy) {
         ease: getGSAPEasing(easing2),
         onComplete: () => {
           sourceElement.remove();
-          gsap.set(targetElement, { opacity: 1, visibility: "visible" });
+          gsap2.set(targetElement, { opacity: 1, visibility: "visible" });
           scene.updateObject(source, target);
         }
       };
@@ -908,6 +1080,20 @@ var init_diagram = __esm({
       constructor(shape) {
         this.shape = shape;
       }
+      /**
+       * 设置目标状态（Manim 风格）
+       * 用于 MoveToTarget 动画
+       */
+      setTarget(targetDiagram) {
+        this.target = targetDiagram;
+        return this;
+      }
+      /**
+       * 获取目标状态
+       */
+      getTarget() {
+        return this.target;
+      }
       // ========== 样式方法 ==========
       /** 设置填充颜色 */
       fill(color) {
@@ -2854,44 +3040,97 @@ function braceBetweenPoints(start, end, options) {
   const {
     direction = 1,
     // 1 = 垂直于连线的正方向，-1 = 反方向
-    sharpness = 0.3,
-    tipExtent = 0.2
+    sharpness = 2,
+    // Manim 默认值
+    tipExtent: _tipExtent = 0.2
+    // 保留向后兼容但不使用
   } = options || {};
   const dx = end[0] - start[0];
   const dy = end[1] - start[1];
   const length2 = Math.sqrt(dx * dx + dy * dy);
-  if (length2 < 1) {
+  if (length2 < 1e-3) {
     return path([]);
   }
   const ux = dx / length2;
   const uy = dy / length2;
   const perpX = -uy * direction;
   const perpY = ux * direction;
-  const height = length2 * tipExtent;
-  const curveDepth = length2 * sharpness * 0.15;
+  const braceHeight = length2 * 0.09;
+  const curlHeight = braceHeight * 0.35;
+  const curlWidth = length2 * 0.02;
+  const defaultMinWidth = 0.90552;
+  const linearRatio = Math.max(0, (sharpness - defaultMinWidth) / 2);
+  const linearLength = linearRatio * length2;
+  const curveWidth = length2 / 2 - linearLength - curlWidth;
   const midX = (start[0] + end[0]) / 2;
   const midY = (start[1] + end[1]) / 2;
-  const tipX = midX + perpX * height;
-  const tipY = midY + perpY * height;
-  const q1X = start[0] + dx * 0.25;
-  const q1Y = start[1] + dy * 0.25;
-  const q3X = start[0] + dx * 0.75;
-  const q3Y = start[1] + dy * 0.75;
-  const ctrl1X = start[0] + perpX * curveDepth;
-  const ctrl1Y = start[1] + perpY * curveDepth;
-  const ctrl2X = q1X + perpX * height * 0.6;
-  const ctrl2Y = q1Y + perpY * height * 0.6;
-  const ctrl5X = q3X + perpX * height * 0.6;
-  const ctrl5Y = q3Y + perpY * height * 0.6;
-  const ctrl6X = end[0] + perpX * curveDepth;
-  const ctrl6Y = end[1] + perpY * curveDepth;
+  const tipX = midX + perpX * braceHeight;
+  const tipY = midY + perpY * braceHeight;
+  const leftCurlEndX = start[0] + ux * curlWidth - perpX * curlHeight;
+  const leftCurlEndY = start[1] + uy * curlWidth - perpY * curlHeight;
+  const leftLineEndX = leftCurlEndX + ux * linearLength;
+  const leftLineEndY = leftCurlEndY + uy * linearLength;
+  const rightLineStartX = end[0] - ux * (curlWidth + linearLength) - perpX * curlHeight;
+  const rightLineStartY = end[1] - uy * (curlWidth + linearLength) - perpY * curlHeight;
+  const rightCurlStartX = rightLineStartX + ux * linearLength;
+  const rightCurlStartY = rightLineStartY + uy * linearLength;
   const commands = [
     { type: "M", x: start[0], y: start[1] },
-    { type: "C", x1: ctrl1X, y1: ctrl1Y, x2: ctrl2X, y2: ctrl2Y, x: tipX - ux * length2 * 0.05, y: tipY - uy * length2 * 0.05 },
-    { type: "Q", x1: tipX, y1: tipY, x: tipX + ux * length2 * 0.05, y: tipY + uy * length2 * 0.05 },
-    { type: "C", x1: ctrl5X, y1: ctrl5Y, x2: ctrl6X, y2: ctrl6Y, x: end[0], y: end[1] }
+    // 左端卷曲：明显的向外翘小勾
+    // 控制点1向外凸出，控制点2稍微回来
+    {
+      type: "C",
+      x1: start[0] - perpX * curlHeight * 1.2,
+      y1: start[1] - perpY * curlHeight * 1.2,
+      x2: leftCurlEndX - perpX * curlHeight * 0.3,
+      y2: leftCurlEndY - perpY * curlHeight * 0.3,
+      x: leftCurlEndX,
+      y: leftCurlEndY
+    },
+    // 左直线段
+    ...linearLength > 1e-3 ? [{
+      type: "L",
+      x: leftLineEndX,
+      y: leftLineEndY
+    }] : [],
+    // 左曲线到尖端：平滑的弧线
+    {
+      type: "C",
+      x1: leftLineEndX + ux * curveWidth * 0.55,
+      y1: leftLineEndY + uy * curveWidth * 0.55,
+      x2: tipX - ux * curveWidth * 0.25,
+      y2: tipY - uy * curveWidth * 0.25,
+      x: tipX,
+      y: tipY
+    },
+    // 右曲线从尖端：与左侧对称
+    {
+      type: "C",
+      x1: tipX + ux * curveWidth * 0.25,
+      y1: tipY + uy * curveWidth * 0.25,
+      x2: rightLineStartX - ux * curveWidth * 0.55,
+      y2: rightLineStartY - uy * curveWidth * 0.55,
+      x: rightLineStartX,
+      y: rightLineStartY
+    },
+    // 右直线段
+    ...linearLength > 1e-3 ? [{
+      type: "L",
+      x: rightCurlStartX,
+      y: rightCurlStartY
+    }] : [],
+    // 右端卷曲：明显的向外翘小勾
+    {
+      type: "C",
+      x1: rightCurlStartX - perpX * curlHeight * 0.3,
+      y1: rightCurlStartY - perpY * curlHeight * 0.3,
+      x2: end[0] - perpX * curlHeight * 1.2,
+      y2: end[1] - perpY * curlHeight * 1.2,
+      x: end[0],
+      y: end[1]
+    }
   ];
-  return path(commands).fill("none").stroke("#374151").strokeWidth(2);
+  return path(commands).fill("none").stroke("#FFFFFF").strokeWidth(2);
 }
 function brace(target, options) {
   var _a;
@@ -2932,22 +3171,27 @@ function brace(target, options) {
       end = [bounds.x - buff, bounds.y + bounds.height];
     }
   }
-  const braceDir = 1;
+  let braceDir;
+  if (Math.abs(normDir[1]) > 0.5) {
+    braceDir = normDir[1] > 0 ? 1 : -1;
+  } else {
+    braceDir = normDir[0] > 0 ? -1 : 1;
+  }
   return braceBetweenPoints(start, end, { direction: braceDir, sharpness });
 }
-function getBraceTipPosition(start, end, direction, tipExtent) {
+function getBraceTipPosition(start, end, direction, _tipExtent) {
   const dx = end[0] - start[0];
   const dy = end[1] - start[1];
   const length2 = Math.sqrt(dx * dx + dy * dy);
-  if (length2 < 1) return [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2];
+  if (length2 < 1e-3) return [(start[0] + end[0]) / 2, (start[1] + end[1]) / 2];
   const ux = dx / length2;
   const uy = dy / length2;
   const perpX = -uy * direction;
   const perpY = ux * direction;
   const midX = (start[0] + end[0]) / 2;
   const midY = (start[1] + end[1]) / 2;
-  const height = length2 * tipExtent;
-  return [midX + perpX * height, midY + perpY * height];
+  const braceHeight = length2 * 0.09;
+  return [midX + perpX * braceHeight, midY + perpY * braceHeight];
 }
 function braceLabel(target, label, options) {
   var _a;
@@ -2959,7 +3203,8 @@ function braceLabel(target, label, options) {
     sharpness = 0.3,
     buff = 0.1,
     // 使用适合数学坐标系的默认值
-    labelBuff = 0.15
+    labelBuff = 0.35
+    // 增大默认值，让标签在花括号外侧
   } = options || {};
   const br = brace(target, { direction, sharpness, buff });
   let dir;
@@ -2993,7 +3238,13 @@ function braceLabel(target, label, options) {
       end = [bounds.x - buff, bounds.y + bounds.height];
     }
   }
-  const tipPos = getBraceTipPosition(start, end, 1, 0.2);
+  let braceDir;
+  if (Math.abs(normDir[1]) > 0.5) {
+    braceDir = normDir[1] > 0 ? 1 : -1;
+  } else {
+    braceDir = normDir[0] > 0 ? -1 : 1;
+  }
+  const tipPos = getBraceTipPosition(start, end, braceDir, 0.2);
   const labelX = tipPos[0] + normDir[0] * labelBuff;
   const labelY = tipPos[1] + normDir[1] * labelBuff;
   const labelText = text(label, { fontSize }).fill(labelColor).translate(labelX, labelY);
@@ -3118,7 +3369,7 @@ function pathFromString(d) {
 }
 function text(content, options) {
   const {
-    fontSize = 16,
+    fontSize = 1,
     fontFamily = "system-ui, sans-serif",
     fontWeight = "normal",
     fontStyle = "normal",
@@ -3146,7 +3397,7 @@ function text(content, options) {
   return new Diagram(shape);
 }
 function tex(latex, options) {
-  const { fontSize = 20, color = "#374151" } = options || {};
+  const { fontSize = 1, color = "#374151" } = options || {};
   const html = katex.renderToString(latex, {
     throwOnError: false,
     displayMode: false,
@@ -3207,27 +3458,95 @@ function bulletedList(items, options) {
 }
 function code(source, options) {
   const {
-    fontSize = 14,
+    fontSize = 0.25,
+    // 使用适合数学坐标系的默认值
     theme = "dark",
-    showLineNumbers = false,
-    lineNumberWidth = 30,
-    lineHeight = 1.3
+    showLineNumbers = true,
+    // 默认显示行号
+    lineNumberWidth = 0.5,
+    lineHeight = 1.4,
+    showBackground = true,
+    // 默认显示背景
+    showWindowButtons = true,
+    // 默认显示窗口按钮
+    language = "javascript",
+    padding = 0.3
   } = options || {};
   const fontFamily = 'Consolas, Monaco, "Courier New", monospace';
   const lines = source.split("\n");
   const lineSpacing = fontSize * lineHeight;
-  const textColor = theme === "dark" ? "#E5E7EB" : "#374151";
-  const lineNumColor = theme === "dark" ? "#6B7280" : "#9CA3AF";
+  const bgColor = theme === "dark" ? "#1E1E2E" : "#F8F8F8";
+  const textColor = theme === "dark" ? "#CDD6F4" : "#374151";
+  const lineNumColor = theme === "dark" ? "#6C7086" : "#9CA3AF";
+  const keywordColor = theme === "dark" ? "#CBA6F7" : "#7C3AED";
+  const stringColor = theme === "dark" ? "#A6E3A1" : "#059669";
+  const numberColor = theme === "dark" ? "#FAB387" : "#D97706";
+  const commentColor = theme === "dark" ? "#6C7086" : "#9CA3AF";
+  const keywords = ["const", "let", "var", "function", "return", "if", "else", "for", "while", "class", "import", "export", "from", "async", "await", "new", "this", "true", "false", "null", "undefined"];
+  const highlightLine = (lineContent) => {
+    const tokens = [];
+    let x = 0;
+    const regex = /(\s+)|("[^"]*"|'[^']*')|(\d+\.?\d*)|(\b\w+\b)|(\/\/.*$)|([^\s\w"']+)/g;
+    let match;
+    while ((match = regex.exec(lineContent)) !== null) {
+      const token = match[0];
+      let color = textColor;
+      if (match[1]) {
+        x += token.length * fontSize * 0.6;
+        continue;
+      } else if (match[2]) {
+        color = stringColor;
+      } else if (match[3]) {
+        color = numberColor;
+      } else if (match[4] && keywords.includes(token)) {
+        color = keywordColor;
+      } else if (match[5]) {
+        color = commentColor;
+      }
+      const tokenText = text(token, { fontSize, fontFamily, anchor: "start" }).fill(color).translate(x, 0);
+      tokens.push(tokenText);
+      x += token.length * fontSize * 0.6;
+    }
+    return tokens;
+  };
   const elements = [];
+  const maxLineLength = Math.max(...lines.map((l) => l.length), 1);
+  const contentWidth = (showLineNumbers ? lineNumberWidth : 0) + maxLineLength * fontSize * 0.6 + padding;
+  const contentHeight = lines.length * lineSpacing + padding * 2;
+  const headerHeight = showWindowButtons ? 0.4 : 0;
+  const totalHeight = contentHeight + headerHeight;
+  if (showBackground) {
+    const cornerRadius = 0.15;
+    const bg = rect(contentWidth + padding * 2, totalHeight, { rx: cornerRadius, ry: cornerRadius }).fill(bgColor).translate(contentWidth / 2, -totalHeight / 2 + headerHeight + padding);
+    elements.push(bg);
+  }
+  if (showWindowButtons && showBackground) {
+    const buttonY = headerHeight / 2 + padding * 0.5;
+    const buttonRadius = 0.08;
+    const buttonSpacing = 0.25;
+    const buttonStartX = padding + 0.2;
+    const redBtn = circle(buttonRadius).fill("#FF5F56").translate(buttonStartX, buttonY);
+    const yellowBtn = circle(buttonRadius).fill("#FFBD2E").translate(buttonStartX + buttonSpacing, buttonY);
+    const greenBtn = circle(buttonRadius).fill("#27C93F").translate(buttonStartX + buttonSpacing * 2, buttonY);
+    elements.push(redBtn, yellowBtn, greenBtn);
+  }
+  const codeStartY = showWindowButtons ? -headerHeight : 0;
   lines.forEach((lineContent, i) => {
-    const y = -i * lineSpacing;
+    const y = codeStartY - i * lineSpacing - padding;
     if (showLineNumbers) {
-      const lineNum = text(String(i + 1), { fontSize, fontFamily, anchor: "end" }).fill(lineNumColor).translate(lineNumberWidth - 5, y);
+      const lineNum = text(String(i + 1), { fontSize, fontFamily, anchor: "end" }).fill(lineNumColor).translate(lineNumberWidth + padding - 0.05, y);
       elements.push(lineNum);
     }
-    const xOffset = showLineNumbers ? lineNumberWidth + 10 : 0;
-    const codeLine = text(lineContent || " ", { fontSize, fontFamily, anchor: "start" }).fill(textColor).translate(xOffset, y);
-    elements.push(codeLine);
+    const xOffset = (showLineNumbers ? lineNumberWidth + 0.15 : 0) + padding;
+    if (language && lineContent.trim()) {
+      const highlightedTokens = highlightLine(lineContent);
+      highlightedTokens.forEach((token) => {
+        elements.push(token.translate(xOffset, y));
+      });
+    } else {
+      const codeLine = text(lineContent || " ", { fontSize, fontFamily, anchor: "start" }).fill(textColor).translate(xOffset, y);
+      elements.push(codeLine);
+    }
   });
   if (elements.length === 0) {
     return group();
@@ -3236,11 +3555,104 @@ function code(source, options) {
 }
 function markupText(content, options) {
   const {
-    fontSize = 16,
-    fontFamily = "system-ui, sans-serif"
+    fontSize = 0.4,
+    // 使用适合数学坐标系的默认值
+    fontFamily = "system-ui, sans-serif",
+    color = "#FFFFFF"
   } = options || {};
-  const plainText = content.replace(/<b>|<\/b>/g, "").replace(/<i>|<\/i>/g, "").replace(/<color=[^>]*>|<\/color>/g, "").replace(/<sub>|<\/sub>/g, "").replace(/<sup>|<\/sup>/g, "");
-  return text(plainText, { fontSize, fontFamily });
+  const parseMarkup = (input) => {
+    const segments2 = [];
+    let currentText = "";
+    let bold = false;
+    let italic = false;
+    let currentColor;
+    let i = 0;
+    while (i < input.length) {
+      if (input.slice(i).startsWith("<b>")) {
+        if (currentText) {
+          segments2.push({ text: currentText, bold, italic, color: currentColor });
+          currentText = "";
+        }
+        bold = true;
+        i += 3;
+        continue;
+      }
+      if (input.slice(i).startsWith("</b>")) {
+        if (currentText) {
+          segments2.push({ text: currentText, bold, italic, color: currentColor });
+          currentText = "";
+        }
+        bold = false;
+        i += 4;
+        continue;
+      }
+      if (input.slice(i).startsWith("<i>")) {
+        if (currentText) {
+          segments2.push({ text: currentText, bold, italic, color: currentColor });
+          currentText = "";
+        }
+        italic = true;
+        i += 3;
+        continue;
+      }
+      if (input.slice(i).startsWith("</i>")) {
+        if (currentText) {
+          segments2.push({ text: currentText, bold, italic, color: currentColor });
+          currentText = "";
+        }
+        italic = false;
+        i += 4;
+        continue;
+      }
+      const colorMatch = input.slice(i).match(/^<color=([^>]+)>/);
+      if (colorMatch) {
+        if (currentText) {
+          segments2.push({ text: currentText, bold, italic, color: currentColor });
+          currentText = "";
+        }
+        currentColor = colorMatch[1];
+        i += colorMatch[0].length;
+        continue;
+      }
+      if (input.slice(i).startsWith("</color>")) {
+        if (currentText) {
+          segments2.push({ text: currentText, bold, italic, color: currentColor });
+          currentText = "";
+        }
+        currentColor = void 0;
+        i += 8;
+        continue;
+      }
+      currentText += input[i];
+      i++;
+    }
+    if (currentText) {
+      segments2.push({ text: currentText, bold, italic, color: currentColor });
+    }
+    return segments2;
+  };
+  const segments = parseMarkup(content);
+  const elements = [];
+  let x = 0;
+  segments.forEach((segment) => {
+    if (!segment.text) return;
+    const fontWeight = segment.bold ? "bold" : "normal";
+    const fontStyle = segment.italic ? "italic" : "normal";
+    const textColor = segment.color || color;
+    const segmentText = text(segment.text, {
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      anchor: "start"
+    }).fill(textColor).translate(x, 0);
+    elements.push(segmentText);
+    x += segment.text.length * fontSize * 0.6;
+  });
+  if (elements.length === 0) {
+    return text("", { fontSize, fontFamily });
+  }
+  return elements[0].combine(...elements.slice(1));
 }
 function crossMark(size, options) {
   const { strokeWidth = 2, style = "x" } = options || {};
@@ -4959,7 +5371,18 @@ var SimpleMovingCameraScene = class extends MovingCameraScene {
 
 // src/animate/animations/create.ts
 init_timeline();
-import { gsap as gsap2 } from "gsap";
+import { gsap as gsap3 } from "gsap";
+
+// src/animate/animations/utils.ts
+function querySelectorAllIncludingSelf(element, selector) {
+  const results = Array.from(element.querySelectorAll(selector));
+  if (element.matches(selector)) {
+    results.unshift(element);
+  }
+  return results;
+}
+
+// src/animate/animations/create.ts
 function Create(target, options = {}) {
   const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
   return {
@@ -4972,7 +5395,7 @@ function Create(target, options = {}) {
       paths.forEach((path2) => {
         if (path2 instanceof SVGGeometryElement) {
           const length2 = path2.getTotalLength();
-          gsap2.set(path2, {
+          gsap3.set(path2, {
             strokeDasharray: length2,
             strokeDashoffset: length2,
             fillOpacity: 0
@@ -4995,7 +5418,7 @@ function Create(target, options = {}) {
       });
       const texts = querySelectorAllIncludingSelf(element, "text");
       texts.forEach((text2) => {
-        gsap2.set(text2, { opacity: 0 });
+        gsap3.set(text2, { opacity: 0 });
         timeline.add(text2, {
           opacity: 1,
           duration: duration * 0.5,
@@ -5022,7 +5445,7 @@ function Write(target, options = {}) {
           chars.forEach((char, i) => {
             const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
             tspan.textContent = char;
-            gsap2.set(tspan, { opacity: 0 });
+            gsap3.set(tspan, { opacity: 0 });
             text2.appendChild(tspan);
             const charDelay = i / chars.length * duration;
             timeline.add(tspan, {
@@ -5052,7 +5475,7 @@ function DrawBorderThenFill(target, options = {}) {
           const length2 = path2.getTotalLength();
           const originalFill = path2.getAttribute("fill") || "none";
           const originalStroke = path2.getAttribute("stroke") || "#374151";
-          gsap2.set(path2, {
+          gsap3.set(path2, {
             strokeDasharray: length2,
             strokeDashoffset: length2,
             fill: "none",
@@ -5091,7 +5514,7 @@ function GrowFromCenter(target, options = {}) {
       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;
-      gsap2.set(element, {
+      gsap3.set(element, {
         transformOrigin: `${cx}px ${cy}px`,
         scale: 0,
         opacity: 0
@@ -5114,7 +5537,7 @@ function GrowFromPoint(target, point, options = {}) {
     execute(scene, timeline, startTime) {
       const element = scene.getOrCreateElement(target);
       if (!element) return;
-      gsap2.set(element, {
+      gsap3.set(element, {
         transformOrigin: `${point[0]}px ${point[1]}px`,
         scale: 0,
         opacity: 0
@@ -5159,7 +5582,7 @@ function GrowFromEdge(target, edge = "LEFT", options = {}) {
           scaleFrom = { scaleY: 0 };
           break;
       }
-      gsap2.set(element, __spreadProps(__spreadValues({
+      gsap3.set(element, __spreadProps(__spreadValues({
         transformOrigin: origin
       }, scaleFrom), {
         opacity: 0
@@ -5187,7 +5610,7 @@ function SpinInFromNothing(target, options = {}) {
       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;
-      gsap2.set(element, {
+      gsap3.set(element, {
         transformOrigin: `${cx}px ${cy}px`,
         scale: 0,
         rotation: -360,
@@ -5216,7 +5639,7 @@ function Uncreate(target, options = {}) {
       paths.forEach((path2) => {
         if (path2 instanceof SVGGeometryElement) {
           const length2 = path2.getTotalLength();
-          gsap2.set(path2, {
+          gsap3.set(path2, {
             strokeDasharray: length2,
             strokeDashoffset: 0
           });
@@ -5297,7 +5720,7 @@ function ShrinkToCenter(target, options = {}) {
       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;
-      gsap2.set(element, {
+      gsap3.set(element, {
         transformOrigin: `${cx}px ${cy}px`
       });
       timeline.add(element, {
@@ -5317,7 +5740,7 @@ function ShrinkToCenter(target, options = {}) {
 // src/animate/animations/fade.ts
 init_math();
 init_timeline();
-import { gsap as gsap3 } from "gsap";
+import { gsap as gsap4 } from "gsap";
 function directionToVector(direction) {
   if (!direction) return void 0;
   if (Array.isArray(direction)) return direction;
@@ -5346,7 +5769,7 @@ function FadeIn(target, options = {}) {
         initialState.x = -dir[0] * shift;
         initialState.y = -dir[1] * shift;
       }
-      gsap3.set(element, initialState);
+      gsap4.set(element, initialState);
       const targetState = {
         opacity: 1,
         duration,
@@ -5405,41 +5828,423 @@ function FadeInFromLeft(target, options = {}) {
 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;
+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;
+      gsap4.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/transform.ts
+init_timeline();
+import { gsap as gsap5 } from "gsap";
+function Transform(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap5.set(targetElement, { opacity: 0 });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      const translateX = targetBBox.x + targetBBox.width / 2 - (sourceBBox.x + sourceBBox.width / 2);
+      const translateY = targetBBox.y + targetBBox.height / 2 - (sourceBBox.y + sourceBBox.height / 2);
+      const originX = sourceBBox.x + sourceBBox.width / 2;
+      const originY = sourceBBox.y + sourceBBox.height / 2;
+      gsap5.set(sourceElement, {
+        transformOrigin: `${originX}px ${originY}px`
+      });
+      timeline.add(sourceElement, {
+        scaleX,
+        scaleY,
+        x: translateX,
+        y: translateY,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay,
+        onComplete: () => {
+          sourceElement.remove();
+          gsap5.set(targetElement, { opacity: 1 });
+        }
+      }, startTime);
+    }
+  };
+}
+function ReplacementTransform(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0, replace = true } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap5.set(targetElement, { opacity: 0, visibility: "hidden" });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2;
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2;
+      const targetCenterX = targetBBox.x + targetBBox.width / 2;
+      const targetCenterY = targetBBox.y + targetBBox.height / 2;
+      timeline.add(sourceElement, {
+        transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`,
+        scaleX,
+        scaleY,
+        x: targetCenterX - sourceCenterX,
+        y: targetCenterY - sourceCenterY,
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay,
+        onComplete: () => {
+          if (replace) {
+            sourceElement.remove();
+          }
+        }
+      }, startTime);
+      timeline.add(targetElement, {
+        visibility: "visible",
+        opacity: 1,
+        duration: duration * 0.5,
+        ease: "power2.out",
+        delay: delay + duration * 0.5
+      }, startTime);
+    }
+  };
+}
+function MoveToTarget(source, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  const targetDiagram = source.getTarget();
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b, _c, _d, _e, _f;
+      const element = scene.getOrCreateElement(source);
+      if (!element || !targetDiagram) return;
+      const sourceBounds = source.bounds();
+      const targetBounds = targetDiagram.bounds();
+      const sourceCenter = [
+        sourceBounds.x + sourceBounds.width / 2,
+        sourceBounds.y + sourceBounds.height / 2
+      ];
+      const targetCenter = [
+        targetBounds.x + targetBounds.width / 2,
+        targetBounds.y + targetBounds.height / 2
+      ];
+      const translateX = ((_a = targetCenter[0]) != null ? _a : 0) - ((_b = sourceCenter[0]) != null ? _b : 0);
+      const translateY = ((_c = targetCenter[1]) != null ? _c : 0) - ((_d = sourceCenter[1]) != null ? _d : 0);
+      const scaleX = targetBounds.width / (sourceBounds.width || 1);
+      const scaleY = targetBounds.height / (sourceBounds.height || 1);
+      gsap5.set(element, {
+        transformOrigin: `${(_e = sourceCenter[0]) != null ? _e : 0}px ${(_f = sourceCenter[1]) != null ? _f : 0}px`
+      });
+      timeline.add(element, {
+        x: translateX,
+        y: -translateY,
+        // SVG Y 轴翻转
+        scaleX: isFinite(scaleX) ? scaleX : 1,
+        scaleY: isFinite(scaleY) ? scaleY : 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function Morphing(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      const sourcePath = sourceElement.querySelector("path") || sourceElement;
+      const targetPath = targetElement.querySelector("path") || targetElement;
+      gsap5.set(targetElement, { opacity: 0 });
+      if ((_a = gsap5.plugins) == null ? void 0 : _a.morphSVG) {
+        const targetD = targetPath.getAttribute("d");
+        if (targetD) {
+          timeline.add(sourcePath, {
+            morphSVG: targetD,
+            duration,
+            ease: getGSAPEasing(easing2),
+            delay,
+            onComplete: () => {
+              sourceElement.remove();
+              gsap5.set(targetElement, { opacity: 1 });
+            }
+          }, startTime);
+        }
+      } else {
+        Transform(source, target, options).execute(scene, timeline, startTime);
+      }
+    }
+  };
+}
+function TransformMatchingShapes(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      const sourceChildren = Array.from(sourceElement.children);
+      const targetChildren = Array.from(targetElement.children);
+      gsap5.set(targetElement, { opacity: 0 });
+      const pairs = Math.min(sourceChildren.length, targetChildren.length);
+      for (let i = 0; i < pairs; i++) {
+        const sourceChild = sourceChildren[i];
+        const targetChild = targetChildren[i];
+        const sourceBBox = ((_a = sourceChild.getBBox) == null ? void 0 : _a.call(sourceChild)) || { x: 0, y: 0, width: 0, height: 0 };
+        const targetBBox = ((_b = targetChild.getBBox) == null ? void 0 : _b.call(targetChild)) || { x: 0, y: 0, width: 0, height: 0 };
+        const scaleX = targetBBox.width / (sourceBBox.width || 1);
+        const scaleY = targetBBox.height / (sourceBBox.height || 1);
+        const translateX = targetBBox.x - sourceBBox.x;
+        const translateY = targetBBox.y - sourceBBox.y;
+        timeline.add(sourceChild, {
+          scaleX,
+          scaleY,
+          x: translateX,
+          y: translateY,
+          duration,
+          ease: getGSAPEasing(easing2),
+          delay
+        }, startTime);
+      }
+      for (let i = pairs; i < sourceChildren.length; i++) {
+        const child = sourceChildren[i];
+        if (child) {
+          timeline.add(child, {
+            opacity: 0,
+            duration: duration * 0.5,
+            ease: "power2.in"
+          }, startTime);
+        }
+      }
+      timeline.call(() => {
+        sourceElement.remove();
+        gsap5.set(targetElement, { opacity: 1 });
+      }, startTime + duration);
+    }
+  };
+}
+function TransformMatchingTex(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap5.set(targetElement, { opacity: 0 });
+      const sourceTexParts = querySelectorAllIncludingSelf(sourceElement, "path, use, text");
+      const targetTexParts = querySelectorAllIncludingSelf(targetElement, "path, use, text");
+      const pairs = Math.min(sourceTexParts.length, targetTexParts.length);
+      for (let i = 0; i < pairs; i++) {
+        const sourcePart = sourceTexParts[i];
+        const targetPart = targetTexParts[i];
+        const sourceBBox = ((_a = sourcePart.getBBox) == null ? void 0 : _a.call(sourcePart)) || { x: 0, y: 0, width: 0, height: 0 };
+        const targetBBox = ((_b = targetPart.getBBox) == null ? void 0 : _b.call(targetPart)) || { x: 0, y: 0, width: 0, height: 0 };
+        const scaleX = targetBBox.width / (sourceBBox.width || 1);
+        const scaleY = targetBBox.height / (sourceBBox.height || 1);
+        const translateX = targetBBox.x + targetBBox.width / 2 - (sourceBBox.x + sourceBBox.width / 2);
+        const translateY = targetBBox.y + targetBBox.height / 2 - (sourceBBox.y + sourceBBox.height / 2);
+        timeline.add(sourcePart, {
+          scaleX: isFinite(scaleX) ? scaleX : 1,
+          scaleY: isFinite(scaleY) ? scaleY : 1,
+          x: translateX,
+          y: translateY,
+          duration,
+          ease: getGSAPEasing(easing2),
+          delay
+        }, startTime);
+      }
+      for (let i = pairs; i < sourceTexParts.length; i++) {
+        const part = sourceTexParts[i];
+        if (part) {
+          timeline.add(part, {
+            opacity: 0,
+            duration: duration * 0.5,
+            ease: "power2.in"
+          }, startTime);
+        }
+      }
+      timeline.call(() => {
+        sourceElement.remove();
+        gsap5.set(targetElement, { opacity: 1 });
+      }, startTime + duration);
+    }
+  };
+}
+function ClockwiseTransform(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap5.set(targetElement, { opacity: 0 });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2;
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2;
+      const targetCenterX = targetBBox.x + targetBBox.width / 2;
+      const targetCenterY = targetBBox.y + targetBBox.height / 2;
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      gsap5.set(sourceElement, {
+        transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`
+      });
+      timeline.add(sourceElement, {
+        rotation: 180,
+        scaleX: isFinite(scaleX) ? scaleX : 1,
+        scaleY: isFinite(scaleY) ? scaleY : 1,
+        x: targetCenterX - sourceCenterX,
+        y: targetCenterY - sourceCenterY,
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay,
+        onComplete: () => {
+          sourceElement.remove();
+          gsap5.set(targetElement, { opacity: 1 });
+        }
+      }, startTime);
+    }
+  };
+}
+function CounterclockwiseTransform(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target: source,
+    execute(scene, timeline, startTime) {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      gsap5.set(targetElement, { opacity: 0 });
+      const sourceBBox = ((_a = sourceElement.getBBox) == null ? void 0 : _a.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_b = targetElement.getBBox) == null ? void 0 : _b.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2;
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2;
+      const targetCenterX = targetBBox.x + targetBBox.width / 2;
+      const targetCenterY = targetBBox.y + targetBBox.height / 2;
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      gsap5.set(sourceElement, {
+        transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`
+      });
+      timeline.add(sourceElement, {
+        rotation: -180,
+        scaleX: isFinite(scaleX) ? scaleX : 1,
+        scaleY: isFinite(scaleY) ? scaleY : 1,
+        x: targetCenterX - sourceCenterX,
+        y: targetCenterY - sourceCenterY,
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay,
+        onComplete: () => {
+          sourceElement.remove();
+          gsap5.set(targetElement, { opacity: 1 });
+        }
+      }, startTime);
+    }
+  };
+}
+function TransformFromCopy(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
   return {
     duration,
     target: source,
     execute(scene, timeline, startTime) {
+      var _a, _b, _c;
       const sourceElement = scene.getElement(source);
       const targetElement = scene.getOrCreateElement(target);
       if (!sourceElement || !targetElement) return;
-      gsap3.set(targetElement, { opacity: 0 });
-      timeline.add(sourceElement, {
+      gsap5.set(targetElement, { opacity: 0 });
+      const copyElement = sourceElement.cloneNode(true);
+      copyElement.setAttribute("id", `${sourceElement.id}-copy-${Date.now()}`);
+      (_a = sourceElement.parentNode) == null ? void 0 : _a.appendChild(copyElement);
+      const sourceBBox = ((_b = sourceElement.getBBox) == null ? void 0 : _b.call(sourceElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const targetBBox = ((_c = targetElement.getBBox) == null ? void 0 : _c.call(targetElement)) || { x: 0, y: 0, width: 0, height: 0 };
+      const sourceCenterX = sourceBBox.x + sourceBBox.width / 2;
+      const sourceCenterY = sourceBBox.y + sourceBBox.height / 2;
+      const targetCenterX = targetBBox.x + targetBBox.width / 2;
+      const targetCenterY = targetBBox.y + targetBBox.height / 2;
+      const scaleX = targetBBox.width / (sourceBBox.width || 1);
+      const scaleY = targetBBox.height / (sourceBBox.height || 1);
+      gsap5.set(copyElement, {
+        transformOrigin: `${sourceCenterX}px ${sourceCenterY}px`
+      });
+      timeline.add(copyElement, {
+        scaleX: isFinite(scaleX) ? scaleX : 1,
+        scaleY: isFinite(scaleY) ? scaleY : 1,
+        x: targetCenterX - sourceCenterX,
+        y: targetCenterY - sourceCenterY,
         opacity: 0,
         duration,
         ease: getGSAPEasing(easing2),
         delay,
         onComplete: () => {
-          sourceElement.remove();
+          copyElement.remove();
+          gsap5.set(targetElement, { opacity: 1 });
         }
       }, startTime);
-      timeline.add(targetElement, {
-        opacity: 1,
-        duration,
-        ease: getGSAPEasing(easing2),
-        delay
-      }, startTime);
     }
   };
 }
 
 // src/animate/animations/move.ts
 init_timeline();
-import { gsap as gsap4 } from "gsap";
+import { gsap as gsap6 } from "gsap";
 import { MotionPathPlugin } from "gsap/MotionPathPlugin";
 if (typeof window !== "undefined") {
-  gsap4.registerPlugin(MotionPathPlugin);
+  gsap6.registerPlugin(MotionPathPlugin);
 }
 function Shift(target, offset, options = {}) {
   const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0 } = options;
@@ -5515,7 +6320,7 @@ function MoveAlongPath(target, path2, options = {}) {
           console.warn("MoveAlongPath: \u65E0\u6CD5\u83B7\u53D6\u8DEF\u5F84\u6570\u636E");
           return;
         }
-        gsap4.set(pathElement, { opacity: 0 });
+        gsap6.set(pathElement, { opacity: 0 });
       }
       timeline.add(element, {
         motionPath: {
@@ -5541,12 +6346,12 @@ function Rotate(target, angle3, options = {}) {
       const element = scene.getElement(target);
       if (!element) return;
       if (aboutPoint) {
-        gsap4.set(element, {
+        gsap6.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 };
-        gsap4.set(element, {
+        gsap6.set(element, {
           transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
         });
       }
@@ -5584,12 +6389,12 @@ function Scale(target, factor, options = {}) {
       const element = scene.getElement(target);
       if (!element) return;
       if (aboutPoint) {
-        gsap4.set(element, {
+        gsap6.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 };
-        gsap4.set(element, {
+        gsap6.set(element, {
           transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
         });
       }
@@ -5758,7 +6563,7 @@ function FadeToColor(target, color, options = {}) {
 
 // src/animate/animations/indicate.ts
 init_timeline();
-import { gsap as gsap5 } from "gsap";
+import { gsap as gsap7 } from "gsap";
 function Indicate(target, options = {}) {
   const {
     duration = 0.5,
@@ -5778,7 +6583,7 @@ function Indicate(target, options = {}) {
       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 };
-      gsap5.set(element, {
+      gsap7.set(element, {
         transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
       });
       timeline.add(element, {
@@ -5851,7 +6656,7 @@ function Circumscribe(target, options = {}) {
         const h = parseFloat(circumscribeElement.getAttribute("height") || "0");
         length2 = (w + h) * 2;
       }
-      gsap5.set(circumscribeElement, {
+      gsap7.set(circumscribeElement, {
         strokeDasharray: length2,
         strokeDashoffset: length2,
         opacity: 0
@@ -5890,7 +6695,7 @@ function Wiggle(target, options = {}) {
       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 };
-      gsap5.set(element, {
+      gsap7.set(element, {
         transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
       });
       const wiggleDuration = duration / nWiggles;
@@ -5952,7 +6757,7 @@ function Flash(target, options = {}) {
         line3.setAttribute("stroke", color);
         line3.setAttribute("stroke-width", "2");
         line3.setAttribute("stroke-linecap", "round");
-        gsap5.set(line3, { opacity: 0 });
+        gsap7.set(line3, { opacity: 0 });
         flashGroup.appendChild(line3);
         timeline.add(line3, {
           attr: { x2, y2 },
@@ -6016,7 +6821,7 @@ function ShowPassingFlash(target, options = {}) {
           flashPath.setAttribute("stroke", `url(#${gradientId})`);
           flashPath.setAttribute("fill", "none");
           flashPath.setAttribute("stroke-width", "4");
-          gsap5.set(flashPath, {
+          gsap7.set(flashPath, {
             strokeDasharray: `${length2 * 0.1} ${length2 * 0.9}`,
             strokeDashoffset: length2
           });
@@ -6080,7 +6885,7 @@ function ApplyWave(target, options = {}) {
       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 };
-      gsap5.set(element, {
+      gsap7.set(element, {
         transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
       });
       const proxy = { t: 0 };
@@ -6093,13 +6898,13 @@ function ApplyWave(target, options = {}) {
           const t = proxy.t;
           const wave = Math.sin(t * Math.PI * 2 * frequency) * amplitude * (1 - t);
           if (direction === "horizontal") {
-            gsap5.set(element, { x: wave });
+            gsap7.set(element, { x: wave });
           } else {
-            gsap5.set(element, { y: wave });
+            gsap7.set(element, { y: wave });
           }
         },
         onComplete: () => {
-          gsap5.set(element, { x: 0, y: 0 });
+          gsap7.set(element, { x: 0, y: 0 });
         }
       }, startTime);
     }
@@ -6120,7 +6925,7 @@ function FocusOn(target, options = {}) {
       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 };
-      gsap5.set(element, {
+      gsap7.set(element, {
         transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
       });
       const overlay = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -6129,7 +6934,7 @@ function FocusOn(target, options = {}) {
       overlay.setAttribute("width", "100%");
       overlay.setAttribute("height", "100%");
       overlay.setAttribute("fill", "#000000");
-      gsap5.set(overlay, { opacity: 0 });
+      gsap7.set(overlay, { opacity: 0 });
       (_b = element.parentNode) == null ? void 0 : _b.insertBefore(overlay, element);
       timeline.add(overlay, {
         opacity: dimSurroundings,
@@ -6173,10 +6978,10 @@ function SpiralIn(target, options = {}) {
       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 };
-      gsap5.set(element, {
+      gsap7.set(element, {
         transformOrigin: `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height / 2}px`
       });
-      gsap5.set(element, {
+      gsap7.set(element, {
         x: startDistance,
         y: 0,
         rotation: 0,
@@ -6195,7 +7000,7 @@ function SpiralIn(target, options = {}) {
           const x = Math.cos(angle3) * distance2;
           const y = Math.sin(angle3) * distance2;
           const rotation = angle3 * (180 / Math.PI);
-          gsap5.set(element, {
+          gsap7.set(element, {
             x,
             y,
             rotation,
@@ -6203,7 +7008,7 @@ function SpiralIn(target, options = {}) {
           });
         },
         onComplete: () => {
-          gsap5.set(element, { x: 0, y: 0, rotation: 0, opacity: 1 });
+          gsap7.set(element, { x: 0, y: 0, rotation: 0, opacity: 1 });
         }
       }, startTime);
     }
@@ -6236,13 +7041,13 @@ function PhaseFlow(target, options = {}) {
           const [newX, newY] = phaseFunc(cx, cy, proxy.t);
           const offsetX = newX - cx;
           const offsetY = newY - cy;
-          gsap5.set(element, {
+          gsap7.set(element, {
             x: offsetX,
             y: offsetY
           });
         },
         onComplete: () => {
-          gsap5.set(element, { x: 0, y: 0 });
+          gsap7.set(element, { x: 0, y: 0 });
         }
       }, startTime);
     }
@@ -6251,6 +7056,8 @@ function PhaseFlow(target, options = {}) {
 
 // src/animate/animations/composition.ts
 init_core();
+import { gsap as gsap8 } from "gsap";
+init_timeline();
 function AnimationGroup(animations, options = {}) {
   var _a, _b;
   const { lagRatio = 0 } = options;
@@ -6305,16 +7112,61 @@ function Wait(duration = 1) {
     }
   };
 }
-function ApplyMethod(target, method, options = {}) {
-  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0 } = options;
+function ApplyMethod(target, methodOrName, argsOrOptions, options = {}) {
+  let method;
+  let config;
+  if (typeof methodOrName === "string") {
+    const methodName = methodOrName;
+    const args = argsOrOptions || [];
+    config = options;
+    method = (d) => {
+      const fn = d[methodName];
+      if (typeof fn === "function") {
+        return fn.apply(d, args);
+      }
+      console.warn(`Method "${methodName}" not found on Diagram`);
+      return d;
+    };
+  } else {
+    method = methodOrName;
+    config = argsOrOptions || {};
+  }
+  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0 } = config;
   const targetDiagram = method(target);
   return {
     duration,
     target,
     execute(scene, timeline, startTime) {
-      import("./transform-4WYIJSLH.mjs").then(({ Transform: Transform2 }) => {
-        Transform2(target, targetDiagram, { duration, easing: easing2, delay }).execute(scene, timeline, startTime);
+      var _a, _b, _c, _d, _e, _f;
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const sourceBounds = target.bounds();
+      const targetBounds = targetDiagram.bounds();
+      const sourceCenter = [
+        sourceBounds.x + sourceBounds.width / 2,
+        sourceBounds.y + sourceBounds.height / 2
+      ];
+      const targetCenter = [
+        targetBounds.x + targetBounds.width / 2,
+        targetBounds.y + targetBounds.height / 2
+      ];
+      const translateX = ((_a = targetCenter[0]) != null ? _a : 0) - ((_b = sourceCenter[0]) != null ? _b : 0);
+      const translateY = ((_c = targetCenter[1]) != null ? _c : 0) - ((_d = sourceCenter[1]) != null ? _d : 0);
+      const scaleX = targetBounds.width / (sourceBounds.width || 1);
+      const scaleY = targetBounds.height / (sourceBounds.height || 1);
+      gsap8.set(element, {
+        transformOrigin: `${(_e = sourceCenter[0]) != null ? _e : 0}px ${(_f = sourceCenter[1]) != null ? _f : 0}px`
       });
+      timeline.add(element, {
+        x: translateX,
+        y: -translateY,
+        // SVG Y 轴翻转
+        scaleX: isFinite(scaleX) ? scaleX : 1,
+        scaleY: isFinite(scaleY) ? scaleY : 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
     }
   };
 }
@@ -6380,7 +7232,7 @@ function transformPathByHomotopy(d, homotopyFn, t) {
 
 // src/animate/animations/text.ts
 init_timeline();
-import { gsap as gsap6 } from "gsap";
+import { gsap as gsap9 } from "gsap";
 function AddTextLetterByLetter(target, options = {}) {
   const { duration = 1, easing: easing2 = "linear", delay = 0, timePerChar } = options;
   return {
@@ -6399,7 +7251,7 @@ function AddTextLetterByLetter(target, options = {}) {
         chars.forEach((char, i) => {
           const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
           tspan.textContent = char;
-          gsap6.set(tspan, { opacity: 0 });
+          gsap9.set(tspan, { opacity: 0 });
           text2.appendChild(tspan);
           const charDelay = i * charDuration;
           timeline.add(tspan, {
@@ -6476,7 +7328,7 @@ function Typewriter(target, options = {}) {
           cursorTspan.textContent = cursorChar;
           cursorTspan.setAttribute("class", "typewriter-cursor");
           text2.appendChild(cursorTspan);
-          gsap6.to(cursorTspan, {
+          gsap9.to(cursorTspan, {
             opacity: 0,
             duration: cursorBlinkInterval,
             repeat: -1,
@@ -6498,8 +7350,8 @@ function Typewriter(target, options = {}) {
         });
         if (cursorTspan) {
           timeline.call(() => {
-            gsap6.killTweensOf(cursorTspan);
-            gsap6.to(cursorTspan, {
+            gsap9.killTweensOf(cursorTspan);
+            gsap9.to(cursorTspan, {
               opacity: 0,
               duration: 0.3,
               delay: 1
@@ -6712,7 +7564,7 @@ function CameraSetFrame(camera, targetFrame, options = {}) {
 
 // src/animate/animations/traced-path.ts
 init_core();
-import { gsap as gsap7 } from "gsap";
+import { gsap as gsap10 } from "gsap";
 function TracedPath(target, config = {}) {
   const {
     strokeColor = "#EA580C",
@@ -6753,11 +7605,10 @@ function TracedPath(target, config = {}) {
   const stop = () => {
     state.active = false;
   };
-  return {
-    diagram: traceDiagram,
-    updater,
-    stop
-  };
+  const result = traceDiagram;
+  result.updater = updater;
+  result.stop = stop;
+  return result;
 }
 function TracedPathAnimation(target, config = {}) {
   const {
@@ -6821,7 +7672,7 @@ function GrowArrow(arrowDiagram, config = {}) {
       lines.forEach((line3) => {
         var _a;
         const length2 = ((_a = line3.getTotalLength) == null ? void 0 : _a.call(line3)) || 100;
-        gsap7.set(line3, {
+        gsap10.set(line3, {
           strokeDasharray: length2,
           strokeDashoffset: length2
         });
@@ -6838,7 +7689,7 @@ function GrowArrow(arrowDiagram, config = {}) {
 // src/animate/animations/p1-animations.ts
 init_core();
 init_complex();
-import { gsap as gsap8 } from "gsap";
+import { gsap as gsap11 } from "gsap";
 function AddTextWordByWord(textDiagram, config = {}) {
   const { timePerWord = 0.2, duration = 1 } = config;
   return {
@@ -6849,7 +7700,7 @@ function AddTextWordByWord(textDiagram, config = {}) {
       if (!element) return;
       const textElement = element.querySelector("text") || element;
       if (!(textElement instanceof SVGTextElement)) {
-        gsap8.set(element, { opacity: 0 });
+        gsap11.set(element, { opacity: 0 });
         timeline.add(element, { opacity: 1, duration }, startTime);
         return;
       }
@@ -6875,18 +7726,19 @@ function AddTextWordByWord(textDiagram, config = {}) {
     }
   };
 }
-function ShowIncreasingSubsets(group4, config = {}) {
+function ShowIncreasingSubsets(groupOrArray, config = {}) {
   const { duration = 1 } = config;
+  const targetGroup = Array.isArray(groupOrArray) ? group(...groupOrArray) : groupOrArray;
   return {
     duration,
-    target: group4,
+    target: targetGroup,
     execute(scene, timeline, startTime) {
-      const element = scene.getOrCreateElement(group4);
+      const element = scene.getOrCreateElement(targetGroup);
       if (!element) return;
       const children = Array.from(element.children);
       if (children.length === 0) return;
       const timePerChild = duration / children.length;
-      children.forEach((child) => gsap8.set(child, { opacity: 0 }));
+      children.forEach((child) => gsap11.set(child, { opacity: 0 }));
       children.forEach((child, i) => {
         timeline.add(child, { opacity: 1, duration: timePerChild * 0.5 }, startTime + i * timePerChild);
       });
@@ -6904,7 +7756,7 @@ function ChangingDecimal(textDiagram, targetValue, config = {}) {
       const textElement = element.querySelector("text") || element;
       const obj = { value: startValue };
       timeline.call(() => {
-        gsap8.to(obj, {
+        gsap11.to(obj, {
           value: targetValue,
           duration,
           ease: "none",
@@ -6935,7 +7787,7 @@ function Broadcast(source, config = {}) {
         const waveDiagram = circle(0.01).stroke(color).strokeWidth(0.05).fill("none").translate(cx, cy);
         const waveElement = scene.getOrCreateElement(waveDiagram);
         if (!waveElement) continue;
-        gsap8.set(waveElement, { opacity: 1 });
+        gsap11.set(waveElement, { opacity: 1 });
         const waveStartTime = startTime + i * waveDelay;
         timeline.add(waveElement, {
           attr: { r: maxRadius },
@@ -6968,7 +7820,7 @@ function ApplyFunction(diagram, fn, config = {}) {
           }
           const obj = { progress: 0 };
           timeline.call(() => {
-            gsap8.to(obj, {
+            gsap11.to(obj, {
               progress: 1,
               duration,
               ease: "power2.inOut",
@@ -7007,7 +7859,7 @@ function Restore(diagram, config = {}) {
       const currentElement = scene.getElement(diagram);
       const targetElement = scene.getOrCreateElement(savedState);
       if (!currentElement || !targetElement) return;
-      gsap8.set(targetElement, { opacity: 0 });
+      gsap11.set(targetElement, { opacity: 0 });
       timeline.add(currentElement, { opacity: 0, duration: duration / 2 }, startTime);
       timeline.add(targetElement, { opacity: 1, duration: duration / 2 }, startTime + duration / 2);
     }
@@ -7081,7 +7933,7 @@ var Axes = class {
         );
       }
       for (let y = yMin; y <= yMax; y += yStep) {
-        const py = oy - y * yScale;
+        const py = oy + y * yScale;
         diagrams.push(
           line([ox + xMin * xScale, py], [ox + xMax * xScale, py]).stroke(gridColor).strokeWidth(gridStrokeWidth)
         );
@@ -7090,8 +7942,8 @@ var Axes = class {
     const xAxisStart = [ox + xMin * xScale, oy];
     const xAxisEnd = [ox + xMax * xScale, oy];
     diagrams.push(arrow(xAxisStart, xAxisEnd, { headSize }).stroke(axisColor).strokeWidth(strokeWidth));
-    const yAxisStart = [ox, oy - yMin * yScale];
-    const yAxisEnd = [ox, oy - yMax * yScale];
+    const yAxisStart = [ox, oy + yMin * yScale];
+    const yAxisEnd = [ox, oy + yMax * yScale];
     diagrams.push(arrow(yAxisStart, yAxisEnd, { headSize }).stroke(axisColor).strokeWidth(strokeWidth));
     if (showTicks || showLabels) {
       for (let x = xMin; x <= xMax; x += xStep) {
@@ -7110,7 +7962,7 @@ var Axes = class {
       }
       for (let y = yMin; y <= yMax; y += yStep) {
         if (y === 0) continue;
-        const py = oy - y * yScale;
+        const py = oy + y * yScale;
         if (showTicks) {
           diagrams.push(
             line([ox - tickSize, py], [ox + tickSize, py]).stroke(axisColor).strokeWidth(strokeWidth)
@@ -7137,7 +7989,7 @@ var Axes = class {
     const yScale = yLength / (yRange[1] - yRange[0]);
     return [
       origin[0] + x * xScale,
-      origin[1] - yVal * yScale
+      origin[1] + yVal * yScale
       // Y 轴向上为正
     ];
   }
@@ -7148,7 +8000,8 @@ var Axes = class {
     const yScale = yLength / (yRange[1] - yRange[0]);
     return [
       (px - origin[0]) / xScale,
-      -(pyVal - origin[1]) / yScale
+      (pyVal - origin[1]) / yScale
+      // Y 轴向上为正
     ];
   }
   /** 绑制函数图像 */
@@ -7435,9 +8288,9 @@ var LinearTransformationScene = class extends Scene {
     ];
     void _transformFn;
     return new Promise((resolve) => {
-      import("gsap").then(({ gsap: gsap9 }) => {
+      import("gsap").then(({ gsap: gsap12 }) => {
         const obj = { t: 0 };
-        gsap9.to(obj, {
+        gsap12.to(obj, {
           t: 1,
           duration,
           ease: "power2.inOut",
@@ -7879,8 +8732,10 @@ var Interactive = class {
       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);
+      const svgWidth = this.svg.viewBox.baseVal.width || this.options.width;
+      const svgHeight = this.svg.viewBox.baseVal.height || this.options.height;
+      let newX = (clientX - rect2.left) * (svgWidth / rect2.width);
+      let newY = (clientY - rect2.top) * (svgHeight / rect2.height);
       if (constraint) {
         [newX, newY] = constraint([newX, newY]);
       }
@@ -8902,19 +9757,19 @@ var Table = class {
     } else {
       this._colWidths = Array(numCols).fill(80);
     }
-    if (config.hLines === true) {
-      this._hLines = Array.from({ length: numRows + 1 }, (_, i) => i);
+    if (config.hLines === false) {
+      this._hLines = [];
     } else if (Array.isArray(config.hLines)) {
       this._hLines = config.hLines;
     } else {
-      this._hLines = [];
+      this._hLines = Array.from({ length: numRows + 1 }, (_, i) => i);
     }
-    if (config.vLines === true) {
-      this._vLines = Array.from({ length: numCols + 1 }, (_, i) => i);
+    if (config.vLines === false) {
+      this._vLines = [];
     } else if (Array.isArray(config.vLines)) {
       this._vLines = config.vLines;
     } else {
-      this._vLines = [];
+      this._vLines = Array.from({ length: numCols + 1 }, (_, i) => i);
     }
     this._headerRow = (_a = config.headerRow) != null ? _a : false;
     this._headerCol = (_b = config.headerCol) != null ? _b : false;
@@ -8935,11 +9790,12 @@ var Table = class {
   buildCells() {
     var _a, _b;
     const cells = [];
-    let y = 0;
+    let y = this._totalHeight;
     for (let row = 0; row < this._data.length; row++) {
       const rowCells = [];
       let x = 0;
       const rowHeight = (_a = this._rowHeights[row]) != null ? _a : 30;
+      y -= rowHeight / 2;
       for (let col = 0; col < this._data[row].length; col++) {
         const colWidth = (_b = this._colWidths[col]) != null ? _b : 80;
         const cellData = this._data[row][col];
@@ -8959,14 +9815,14 @@ var Table = class {
           row,
           col,
           x: x + colWidth / 2,
-          y: y + rowHeight / 2,
+          y,
           width: colWidth,
           height: rowHeight
         });
         x += colWidth;
       }
       cells.push(rowCells);
-      y += rowHeight;
+      y -= rowHeight / 2;
     }
     return cells;
   }
@@ -9057,22 +9913,22 @@ var Table = class {
     var _a, _b, _c, _d, _e;
     const elements = [];
     if (this._alternateRowColor) {
-      let y2 = 0;
+      let y2 = this._totalHeight;
       for (let row = 0; row < this._data.length; row++) {
         const rowHeight = (_a = this._rowHeights[row]) != null ? _a : 30;
+        y2 -= rowHeight;
         if (row % 2 === 1) {
           elements.push(
             rect(this._totalWidth, rowHeight).fill(this._alternateRowColor).translate(this._totalWidth / 2, y2 + rowHeight / 2)
           );
         }
-        y2 += rowHeight;
       }
     }
     if (this._headerBackground) {
       if (this._headerRow) {
         const headerHeight = (_b = this._rowHeights[0]) != null ? _b : 30;
         elements.push(
-          rect(this._totalWidth, headerHeight).fill(this._headerBackground).translate(this._totalWidth / 2, headerHeight / 2)
+          rect(this._totalWidth, headerHeight).fill(this._headerBackground).translate(this._totalWidth / 2, this._totalHeight - headerHeight / 2)
         );
       }
       if (this._headerCol) {
@@ -9082,7 +9938,7 @@ var Table = class {
         );
       }
     }
-    let y = 0;
+    let y = this._totalHeight;
     for (let i = 0; i <= this._data.length; i++) {
       if (this._hLines.includes(i)) {
         elements.push(
@@ -9090,7 +9946,7 @@ var Table = class {
         );
       }
       if (i < this._data.length) {
-        y += (_d = this._rowHeights[i]) != null ? _d : 30;
+        y -= (_d = this._rowHeights[i]) != null ? _d : 30;
       }
     }
     let x = 0;
@@ -13975,6 +14831,1067 @@ import * as THREE18 from "three";
 // src/webgl/overlay/index.ts
 import * as THREE19 from "three";
 import { CSS2DRenderer, CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";
+
+// src/showcase/Showcase.tsx
+import React, { useCallback as useCallback3, useMemo } from "react";
+
+// src/showcase/hooks/useShowcase.ts
+import { useRef, useEffect, useState, useCallback } from "react";
+
+// src/showcase/ShowcaseCore.ts
+init_core();
+
+// src/showcase/utils/scope-api.ts
+var scope_api_exports = {};
+__export(scope_api_exports, {
+  AddTextLetterByLetter: () => AddTextLetterByLetter,
+  AddTextWordByWord: () => AddTextWordByWord,
+  AnimationGroup: () => AnimationGroup,
+  ApplyComplexFunction: () => ApplyComplexFunction,
+  ApplyFunction: () => ApplyFunction,
+  ApplyMethod: () => ApplyMethod,
+  ApplyWave: () => ApplyWave,
+  Axes: () => Axes,
+  Blink: () => Blink,
+  Broadcast: () => Broadcast,
+  Camera: () => Camera,
+  CameraAutoZoom: () => CameraAutoZoom,
+  CameraMove: () => CameraMove,
+  CameraReset: () => CameraReset,
+  CameraSetFrame: () => CameraSetFrame,
+  CameraZoom: () => CameraZoom,
+  ChangingDecimal: () => ChangingDecimal,
+  Circumscribe: () => Circumscribe,
+  ClockwiseTransform: () => ClockwiseTransform,
+  ColorScales: () => ColorScales,
+  Colors: () => Colors,
+  CounterclockwiseTransform: () => CounterclockwiseTransform,
+  Create: () => Create,
+  CyclicReplace: () => CyclicReplace,
+  DEGREES: () => DEGREES,
+  DL: () => DL,
+  DOWN: () => DOWN,
+  DR: () => DR,
+  DiGraph: () => DiGraph,
+  Diagram: () => Diagram,
+  Dir: () => Dir,
+  DrawBorderThenFill: () => DrawBorderThenFill,
+  FadeIn: () => FadeIn,
+  FadeInFrom: () => FadeInFrom,
+  FadeInFromDown: () => FadeInFromDown,
+  FadeInFromLeft: () => FadeInFromLeft,
+  FadeInFromRight: () => FadeInFromRight,
+  FadeInFromUp: () => FadeInFromUp,
+  FadeOut: () => FadeOut,
+  FadeOutTo: () => FadeOutTo,
+  FadeToColor: () => FadeToColor,
+  FadeTransform: () => FadeTransform,
+  Flash: () => Flash,
+  FocusOn: () => FocusOn,
+  Graph: () => Graph,
+  GrowArrow: () => GrowArrow,
+  GrowFromCenter: () => GrowFromCenter,
+  GrowFromEdge: () => GrowFromEdge,
+  GrowFromPoint: () => GrowFromPoint,
+  Homotopy: () => Homotopy,
+  IDENTITY: () => IDENTITY,
+  Indicate: () => Indicate,
+  Interactive: () => Interactive,
+  LEFT: () => LEFT,
+  LaggedStart: () => LaggedStart,
+  LaggedStartMap: () => LaggedStartMap,
+  ManimColor: () => ManimColor,
+  MatrixDisplay: () => MatrixDisplay,
+  Morphing: () => Morphing,
+  MoveAlongPath: () => MoveAlongPath,
+  MoveTo: () => MoveTo,
+  MoveToTarget: () => MoveToTarget,
+  MovingCamera: () => MovingCamera,
+  NumberLine: () => NumberLine,
+  NumberPlane: () => NumberPlane,
+  ORIGIN: () => ORIGIN,
+  PI: () => PI,
+  PhaseFlow: () => PhaseFlow,
+  PolarAxes: () => PolarAxes,
+  RIGHT: () => RIGHT,
+  RemoveTextLetterByLetter: () => RemoveTextLetterByLetter,
+  ReplacementTransform: () => ReplacementTransform,
+  Restore: () => Restore,
+  Rotate: () => Rotate,
+  Rotating: () => Rotating,
+  Scale: () => Scale,
+  ScaleInPlace: () => ScaleInPlace,
+  Scene: () => Scene,
+  Shift: () => Shift,
+  ShowIncreasingSubsets: () => ShowIncreasingSubsets,
+  ShowPassingFlash: () => ShowPassingFlash,
+  ShrinkToCenter: () => ShrinkToCenter,
+  SpinInFromNothing: () => SpinInFromNothing,
+  SpiralIn: () => SpiralIn,
+  Succession: () => Succession,
+  Swap: () => Swap,
+  TAU: () => TAU,
+  Table: () => Table,
+  ThreeB1BColors: () => ThreeB1BColors,
+  TracedPath: () => TracedPath,
+  TracedPathAnimation: () => TracedPathAnimation,
+  Transform: () => Transform,
+  TransformFromCopy: () => TransformFromCopy,
+  TransformMatchingShapes: () => TransformMatchingShapes,
+  TransformMatchingTex: () => TransformMatchingTex,
+  Typewriter: () => Typewriter,
+  UL: () => UL,
+  UP: () => UP,
+  UR: () => UR,
+  Uncreate: () => Uncreate,
+  Unwrite: () => Unwrite,
+  UpdateFromAlphaFunc: () => UpdateFromAlphaFunc,
+  UpdateFromFunc: () => UpdateFromFunc,
+  V2: () => V2,
+  V3: () => V3,
+  Wait: () => Wait,
+  Wiggle: () => Wiggle,
+  Write: () => Write,
+  add: () => add,
+  altitude: () => altitude,
+  angle: () => angle,
+  angleBetween: () => angleBetween,
+  angleBisector: () => angleBisector,
+  angleMarker: () => angleMarker,
+  annularSector: () => annularSector,
+  annulus: () => annulus,
+  applyMatrix: () => applyMatrix,
+  arc: () => arc,
+  arcBetweenPoints: () => arcBetweenPoints,
+  arrow: () => arrow,
+  brace: () => brace,
+  braceBetweenPoints: () => braceBetweenPoints,
+  braceLabel: () => braceLabel,
+  bulletedList: () => bulletedList,
+  centroid: () => centroid,
+  circle: () => circle,
+  circleConstraint: () => circleConstraint,
+  circleIntersections: () => circleIntersections,
+  circumscribedCircle: () => circumscribedCircle,
+  clamp: () => clamp,
+  code: () => code,
+  colorGradient: () => colorGradient,
+  combine: () => combine,
+  createCamera: () => createCamera,
+  createInteractive: () => createInteractive,
+  createMovingCamera: () => createMovingCamera,
+  createTimeline: () => createTimeline,
+  cross: () => cross,
+  crossMark: () => crossMark,
+  cubicBezier: () => cubicBezier,
+  curvedArrow: () => curvedArrow,
+  curvedDoubleArrow: () => curvedDoubleArrow,
+  cutout: () => cutout,
+  decimalMatrix: () => decimalMatrix,
+  decimalTable: () => decimalTable,
+  degToRad: () => degToRad,
+  determinant: () => determinant,
+  digraph: () => digraph,
+  distance: () => distance,
+  div: () => div,
+  dot: () => dot2,
+  doubleArrow: () => doubleArrow,
+  easing: () => easing,
+  elbow: () => elbow,
+  ellipse: () => ellipse,
+  equilateralTriangle: () => equilateralTriangle,
+  footOfPerpendicular: () => footOfPerpendicular,
+  functionConstraint: () => functionConstraint,
+  getColor: () => getColor,
+  graph: () => graph,
+  gridConstraint: () => gridConstraint,
+  group: () => group,
+  inscribedCircle: () => inscribedCircle,
+  integerMatrix: () => integerMatrix,
+  integerTable: () => integerTable,
+  interpolateColor: () => interpolateColor,
+  labeledDot: () => labeledDot,
+  length: () => length,
+  lerp: () => lerp,
+  lerpNumber: () => lerpNumber,
+  line: () => line,
+  lineConstraint: () => lineConstraint,
+  lineIntersection: () => lineIntersection,
+  mapRange: () => mapRange,
+  markupText: () => markupText,
+  mathTable: () => mathTable,
+  matrix: () => matrix,
+  matrixMultiply: () => matrixMultiply,
+  median: () => median,
+  midpoint: () => midpoint,
+  mul: () => mul,
+  normalize: () => normalize,
+  orthocenter: () => orthocenter,
+  paragraph: () => paragraph,
+  parallelLine: () => parallelLine,
+  path: () => path,
+  pathFromString: () => pathFromString,
+  perpendicular: () => perpendicular,
+  perpendicularBisector: () => perpendicularBisector,
+  perpendicularLine: () => perpendicularLine,
+  polarConstraint: () => polarConstraint,
+  polygon: () => polygon,
+  polyline: () => polyline,
+  quadraticBezier: () => quadraticBezier,
+  radToDeg: () => radToDeg,
+  rect: () => rect,
+  rectConstraint: () => rectConstraint,
+  reflect: () => reflect,
+  reflectOverPoint: () => reflectOverPoint,
+  reflectPoint: () => reflectPoint,
+  reflectPointOverLine: () => reflectPointOverLine,
+  regularPolygon: () => regularPolygon,
+  regularPolygram: () => regularPolygram,
+  renderToRough: () => renderToRough,
+  renderToSVG: () => renderToSVG,
+  rightAngleMarker: () => rightAngleMarker,
+  rotate: () => rotate,
+  rotationMatrix: () => rotationMatrix,
+  roughPresets: () => roughPresets,
+  sampleParametric: () => sampleParametric,
+  scaleMatrix: () => scaleMatrix,
+  sector: () => sector,
+  square: () => square,
+  star: () => star,
+  sub: () => sub,
+  table: () => table,
+  tangentLine: () => tangentLine,
+  tex: () => tex,
+  text: () => text,
+  toSVGString: () => toSVGString,
+  translationMatrix: () => translationMatrix,
+  triangle: () => triangle,
+  vector: () => vector
+});
+init_math();
+init_core();
+
+// src/showcase/utils/code-executor.ts
+function preprocessCode(code2) {
+  return code2.split("\n").filter((line3) => {
+    const trimmed = line3.trim();
+    return !trimmed.startsWith("import ") && !trimmed.startsWith("export ");
+  }).join("\n");
+}
+function detectRenderMode(code2) {
+  const processedCode = preprocessCode(code2);
+  if (processedCode.includes("scene.play") || processedCode.includes("scene.add") || /play\s*\(/.test(processedCode)) {
+    return "animation";
+  }
+  if (/\bint\./.test(processedCode) || /\bint\[/.test(processedCode)) {
+    return "interactive";
+  }
+  return "static";
+}
+async function executeCode(code2, svg, options) {
+  const processedCode = preprocessCode(code2);
+  const mode = detectRenderMode(processedCode);
+  const diagrams = [];
+  let sceneInstance = null;
+  let interactiveInstance = null;
+  let RegisteredSceneClass = null;
+  const scope = __spreadProps(__spreadValues({}, scope_api_exports), {
+    // draw 函数：收集静态图形
+    draw: (diagram) => {
+      diagrams.push(diagram);
+    },
+    // play 函数：注册 Scene 类
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    play: (sceneClass) => {
+      RegisteredSceneClass = sceneClass;
+    },
+    // int 代理：交互模式
+    int: new Proxy({}, {
+      get(_target, prop) {
+        if (!interactiveInstance) {
+          const Interactive2 = Interactive;
+          if (Interactive2) {
+            interactiveInstance = new Interactive2(
+              svg.parentElement,
+              { width: options.width, height: options.height }
+            );
+          }
+        }
+        return interactiveInstance == null ? void 0 : interactiveInstance[prop];
+      }
+    }),
+    // SVG 元素
+    svg,
+    // 控制台
+    console,
+    // scene 对象（动画模式直接使用）
+    scene: null
+  });
+  if (mode === "animation" && (processedCode.includes("scene.play") || processedCode.includes("scene.add"))) {
+    class ShowcaseScene extends Scene {
+      async construct() {
+      }
+    }
+    sceneInstance = new ShowcaseScene();
+    sceneInstance.setup(svg, {
+      width: options.width,
+      height: options.height,
+      background: options.background || "#000"
+    });
+    scope.scene = sceneInstance;
+  }
+  try {
+    const AsyncFunction = Object.getPrototypeOf(async function() {
+    }).constructor;
+    const fn = new AsyncFunction(
+      "scope",
+      `with (scope) {
+${processedCode}
+}`
+    );
+    await fn(scope);
+    if (RegisteredSceneClass && !sceneInstance) {
+      const SceneClass = RegisteredSceneClass;
+      const newScene = new SceneClass();
+      newScene.setup(svg, {
+        width: options.width,
+        height: options.height,
+        background: options.background || "#000"
+      });
+      await newScene.construct();
+      sceneInstance = newScene;
+    }
+    if (sceneInstance) {
+      sceneInstance.start();
+    }
+    return {
+      mode,
+      diagrams,
+      scene: sceneInstance,
+      interactive: interactiveInstance
+    };
+  } catch (error) {
+    throw new Error(`\u4EE3\u7801\u6267\u884C\u9519\u8BEF: ${error.message}`);
+  }
+}
+
+// src/showcase/utils/export.ts
+function exportSVG(svg) {
+  const serializer = new XMLSerializer();
+  const svgString = serializer.serializeToString(svg);
+  return `<?xml version="1.0" encoding="UTF-8"?>
+${svgString}`;
+}
+async function exportJPG(svg, options = {}) {
+  const { quality = 0.9 } = options;
+  const bbox = svg.getBBox();
+  const width = options.width || svg.clientWidth || bbox.width || 800;
+  const height = options.height || svg.clientHeight || bbox.height || 450;
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("\u65E0\u6CD5\u521B\u5EFA Canvas \u4E0A\u4E0B\u6587");
+  }
+  const svgString = exportSVG(svg);
+  const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(0, 0, width, height);
+      ctx.drawImage(img, 0, 0, width, height);
+      URL.revokeObjectURL(url);
+      canvas.toBlob(
+        (blob2) => {
+          if (blob2) {
+            resolve(blob2);
+          } else {
+            reject(new Error("JPG \u5BFC\u51FA\u5931\u8D25"));
+          }
+        },
+        "image/jpeg",
+        quality
+      );
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("SVG \u56FE\u50CF\u52A0\u8F7D\u5931\u8D25"));
+    };
+    img.src = url;
+  });
+}
+async function exportMP4(svg, captureFrame, options = {}) {
+  const { fps = 60, duration = 3 } = options;
+  if (typeof VideoEncoder === "undefined") {
+    throw new Error("\u6D4F\u89C8\u5668\u4E0D\u652F\u6301 VideoEncoder API");
+  }
+  const { Muxer, ArrayBufferTarget } = await import("mp4-muxer");
+  const width = svg.clientWidth || 800;
+  const height = svg.clientHeight || 450;
+  const encoderWidth = Math.ceil(width / 2) * 2;
+  const encoderHeight = Math.ceil(height / 2) * 2;
+  const target = new ArrayBufferTarget();
+  const muxer = new Muxer({
+    target,
+    video: {
+      codec: "avc",
+      width: encoderWidth,
+      height: encoderHeight
+    },
+    fastStart: "in-memory"
+  });
+  const encoder = new VideoEncoder({
+    output: (chunk, meta) => {
+      muxer.addVideoChunk(chunk, meta);
+    },
+    error: (e) => {
+      console.error("VideoEncoder error:", e);
+    }
+  });
+  encoder.configure({
+    codec: "avc1.42001f",
+    width: encoderWidth,
+    height: encoderHeight,
+    bitrate: 5e6,
+    framerate: fps
+  });
+  const canvas = document.createElement("canvas");
+  canvas.width = encoderWidth;
+  canvas.height = encoderHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("\u65E0\u6CD5\u521B\u5EFA Canvas \u4E0A\u4E0B\u6587");
+  }
+  const totalFrames = Math.ceil(duration * fps);
+  const frameDuration = 1e6 / fps;
+  for (let i = 0; i < totalFrames; i++) {
+    await captureFrame();
+    const svgString = new XMLSerializer().serializeToString(svg);
+    const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    await new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(0, 0, encoderWidth, encoderHeight);
+        ctx.drawImage(img, 0, 0, encoderWidth, encoderHeight);
+        URL.revokeObjectURL(url);
+        resolve();
+      };
+      img.onerror = () => {
+        URL.revokeObjectURL(url);
+        reject(new Error("\u5E27\u6355\u83B7\u5931\u8D25"));
+      };
+      img.src = url;
+    });
+    const frame = new VideoFrame(canvas, {
+      timestamp: i * frameDuration,
+      duration: frameDuration
+    });
+    encoder.encode(frame);
+    frame.close();
+  }
+  await encoder.flush();
+  encoder.close();
+  muxer.finalize();
+  const buffer = target.buffer;
+  return new Blob([buffer], { type: "video/mp4" });
+}
+function downloadFile(blob, filename) {
+  const url = typeof blob === "string" ? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(blob)}` : URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  if (typeof blob !== "string") {
+    URL.revokeObjectURL(url);
+  }
+}
+
+// src/showcase/ShowcaseCore.ts
+function createShowcase(options) {
+  let status = "idle";
+  let mode = null;
+  let animationState = "idle";
+  let error = null;
+  let container = null;
+  let svg = null;
+  let sceneInstance = null;
+  let interactiveInstance = null;
+  let diagrams = [];
+  const {
+    code: code2,
+    diagram,
+    sceneClass,
+    width: configWidth = "auto",
+    height: configHeight = "auto",
+    aspectRatio = 16 / 9,
+    background = "#000",
+    onReady,
+    onError,
+    onStatusChange
+  } = options;
+  function setStatus(newStatus) {
+    status = newStatus;
+    onStatusChange == null ? void 0 : onStatusChange(newStatus);
+  }
+  function getDimensions() {
+    if (!container) return { width: 800, height: 450 };
+    const containerWidth = container.clientWidth || 800;
+    const width = configWidth === "auto" ? containerWidth : configWidth;
+    const height = configHeight === "auto" ? Math.round(width / aspectRatio) : configHeight;
+    return { width, height };
+  }
+  function createSVG() {
+    const { width, height } = getDimensions();
+    const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svgElement.setAttribute("width", String(width));
+    svgElement.setAttribute("height", String(height));
+    svgElement.style.width = "100%";
+    svgElement.style.aspectRatio = String(aspectRatio);
+    svgElement.style.borderRadius = "8px";
+    svgElement.style.overflow = "hidden";
+    svgElement.style.background = background;
+    return svgElement;
+  }
+  function cleanup() {
+    if (sceneInstance) {
+      if ("destroy" in sceneInstance && typeof sceneInstance.destroy === "function") {
+        sceneInstance.destroy();
+      }
+      sceneInstance = null;
+    }
+    if (interactiveInstance) {
+      if (typeof interactiveInstance.destroy === "function") {
+        interactiveInstance.destroy();
+      }
+      interactiveInstance = null;
+    }
+    if (svg && svg.parentElement) {
+      svg.remove();
+    }
+    svg = null;
+    diagrams = [];
+    mode = null;
+    animationState = "idle";
+  }
+  function renderStatic() {
+    if (!svg || diagrams.length === 0) return;
+    const { width, height } = getDimensions();
+    const combined = diagrams.length === 1 ? diagrams[0] : combine(...diagrams);
+    renderToSVG(combined, svg, {
+      width,
+      height,
+      background
+    });
+    const bounds = combined.bounds();
+    if (bounds.width > 0 && bounds.height > 0) {
+      const padding = 0.5;
+      const contentW = bounds.width + padding * 2;
+      const contentH = bounds.height + padding * 2;
+      const vX = bounds.x - padding;
+      const vY = bounds.y - padding;
+      svg.setAttribute("viewBox", `${vX} ${vY} ${contentW} ${contentH}`);
+    }
+    svg.removeAttribute("width");
+    svg.removeAttribute("height");
+    svg.style.overflow = "visible";
+  }
+  const controller = {
+    get status() {
+      return status;
+    },
+    get mode() {
+      return mode;
+    },
+    get animationState() {
+      return animationState;
+    },
+    get error() {
+      return error;
+    },
+    /**
+     * 初始化
+     */
+    async init(containerElement) {
+      container = containerElement;
+      setStatus("loading");
+      error = null;
+      try {
+        cleanup();
+        svg = createSVG();
+        container.appendChild(svg);
+        const { width, height } = getDimensions();
+        if (diagram) {
+          mode = "static";
+          diagrams = [diagram];
+          renderStatic();
+        } else if (sceneClass) {
+          mode = "animation";
+          const newScene = new sceneClass();
+          newScene.setup(svg, { width, height, background });
+          await newScene.construct();
+          sceneInstance = newScene;
+        } else if (code2) {
+          mode = detectRenderMode(code2);
+          const result = await executeCode(code2, svg, { width, height, background });
+          diagrams = result.diagrams;
+          sceneInstance = result.scene;
+          interactiveInstance = result.interactive;
+          if (result.mode === "static" && diagrams.length > 0) {
+            renderStatic();
+          }
+        } else {
+          throw new Error("\u5FC5\u987B\u63D0\u4F9B code\u3001diagram \u6216 sceneClass \u4E4B\u4E00");
+        }
+        setStatus("ready");
+        onReady == null ? void 0 : onReady();
+      } catch (e) {
+        error = e;
+        setStatus("error");
+        onError == null ? void 0 : onError(error);
+        console.error("Showcase \u521D\u59CB\u5316\u9519\u8BEF:", error);
+      }
+    },
+    /**
+     * 销毁
+     */
+    destroy() {
+      cleanup();
+      container = null;
+      setStatus("idle");
+    },
+    /**
+     * 重置
+     */
+    async reset() {
+      if (container) {
+        await controller.init(container);
+      }
+    },
+    /**
+     * 播放动画
+     */
+    play() {
+      if (mode !== "animation" || !sceneInstance) return;
+      if (animationState === "idle") {
+        sceneInstance.start();
+        animationState = "playing";
+      } else if (animationState === "paused") {
+        sceneInstance.resume();
+        animationState = "playing";
+      }
+    },
+    /**
+     * 暂停动画
+     */
+    pause() {
+      if (mode !== "animation" || !sceneInstance) return;
+      if (animationState === "playing") {
+        sceneInstance.pause();
+        animationState = "paused";
+      }
+    },
+    /**
+     * 恢复动画
+     */
+    resume() {
+      if (mode !== "animation" || !sceneInstance) return;
+      if (animationState === "paused") {
+        sceneInstance.resume();
+        animationState = "playing";
+      }
+    },
+    /**
+     * 导出 SVG
+     */
+    async exportSVG() {
+      if (!svg) throw new Error("SVG \u672A\u521D\u59CB\u5316");
+      return exportSVG(svg);
+    },
+    /**
+     * 导出 JPG
+     */
+    async exportJPG(quality = 0.9) {
+      if (!svg) throw new Error("SVG \u672A\u521D\u59CB\u5316");
+      const { width, height } = getDimensions();
+      return exportJPG(svg, { quality, width, height });
+    },
+    /**
+     * 导出 MP4
+     */
+    async exportMP4(exportOptions = {}) {
+      if (!svg) throw new Error("SVG \u672A\u521D\u59CB\u5316");
+      if (mode !== "animation" || !sceneInstance) {
+        throw new Error("\u53EA\u6709\u52A8\u753B\u6A21\u5F0F\u652F\u6301 MP4 \u5BFC\u51FA");
+      }
+      await controller.reset();
+      const captureFrame = async () => {
+        await new Promise((resolve) => setTimeout(resolve, 16));
+      };
+      return exportMP4(svg, captureFrame, exportOptions);
+    }
+  };
+  return controller;
+}
+
+// src/showcase/hooks/useShowcase.ts
+function useShowcase(options) {
+  const containerRef = useRef(null);
+  const controllerRef = useRef(null);
+  const [status, setStatus] = useState("idle");
+  const [mode, setMode] = useState(null);
+  const [animationState, setAnimationState] = useState("idle");
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const controller = createShowcase(__spreadProps(__spreadValues({}, options), {
+      onStatusChange: (newStatus) => {
+        var _a;
+        setStatus(newStatus);
+        (_a = options.onStatusChange) == null ? void 0 : _a.call(options, newStatus);
+      },
+      onReady: () => {
+        var _a;
+        setMode(controller.mode);
+        setAnimationState(controller.animationState);
+        (_a = options.onReady) == null ? void 0 : _a.call(options);
+      },
+      onError: (err) => {
+        var _a;
+        setError(err);
+        (_a = options.onError) == null ? void 0 : _a.call(options, err);
+      }
+    }));
+    controllerRef.current = controller;
+    controller.init(containerRef.current);
+    return () => {
+      controller.destroy();
+      controllerRef.current = null;
+    };
+  }, [options.code, options.diagram, options.sceneClass]);
+  const play = useCallback(() => {
+    if (controllerRef.current) {
+      controllerRef.current.play();
+      setAnimationState("playing");
+    }
+  }, []);
+  const pause = useCallback(() => {
+    if (controllerRef.current) {
+      controllerRef.current.pause();
+      setAnimationState("paused");
+    }
+  }, []);
+  const resume = useCallback(() => {
+    if (controllerRef.current) {
+      controllerRef.current.resume();
+      setAnimationState("playing");
+    }
+  }, []);
+  const reset = useCallback(async () => {
+    if (controllerRef.current) {
+      await controllerRef.current.reset();
+      setAnimationState("idle");
+    }
+  }, []);
+  const exportSVG2 = useCallback(async () => {
+    if (!controllerRef.current) {
+      throw new Error("Showcase \u672A\u521D\u59CB\u5316");
+    }
+    return controllerRef.current.exportSVG();
+  }, []);
+  const exportJPG2 = useCallback(async (quality) => {
+    if (!controllerRef.current) {
+      throw new Error("Showcase \u672A\u521D\u59CB\u5316");
+    }
+    return controllerRef.current.exportJPG(quality);
+  }, []);
+  const exportMP42 = useCallback(async (exportOptions) => {
+    if (!controllerRef.current) {
+      throw new Error("Showcase \u672A\u521D\u59CB\u5316");
+    }
+    return controllerRef.current.exportMP4(exportOptions);
+  }, []);
+  return {
+    containerRef,
+    status,
+    mode,
+    animationState,
+    error,
+    play,
+    pause,
+    resume,
+    reset,
+    exportSVG: exportSVG2,
+    exportJPG: exportJPG2,
+    exportMP4: exportMP42
+  };
+}
+
+// src/showcase/hooks/useExport.ts
+import { useCallback as useCallback2, useState as useState2 } from "react";
+function useExport() {
+  const [status, setStatus] = useState2("idle");
+  const [error, setError] = useState2(null);
+  const downloadSVG = useCallback2(async (getSVG, filename = "diagram.svg") => {
+    setStatus("exporting");
+    setError(null);
+    try {
+      const svgString = await getSVG();
+      downloadFile(svgString, filename);
+      setStatus("success");
+    } catch (err) {
+      setError(err);
+      setStatus("error");
+      throw err;
+    }
+  }, []);
+  const downloadJPG = useCallback2(async (getJPG, filename = "diagram.jpg") => {
+    setStatus("exporting");
+    setError(null);
+    try {
+      const blob = await getJPG();
+      downloadFile(blob, filename);
+      setStatus("success");
+    } catch (err) {
+      setError(err);
+      setStatus("error");
+      throw err;
+    }
+  }, []);
+  const downloadMP4 = useCallback2(async (getMP4, filename = "animation.mp4") => {
+    setStatus("exporting");
+    setError(null);
+    try {
+      const blob = await getMP4();
+      downloadFile(blob, filename);
+      setStatus("success");
+    } catch (err) {
+      setError(err);
+      setStatus("error");
+      throw err;
+    }
+  }, []);
+  return {
+    status,
+    error,
+    downloadSVG,
+    downloadJPG,
+    downloadMP4
+  };
+}
+
+// src/showcase/Showcase.tsx
+function Showcase({
+  code: code2,
+  diagram,
+  sceneClass,
+  width = "auto",
+  height = "auto",
+  aspectRatio = 16 / 9,
+  background = "#000",
+  className,
+  showControls = true,
+  showExport = true,
+  showCode = false,
+  onReady,
+  onError,
+  onStatusChange
+}) {
+  const showcaseOptions = {
+    width,
+    height,
+    aspectRatio,
+    background
+  };
+  if (code2 !== void 0) showcaseOptions.code = code2;
+  if (diagram !== void 0) showcaseOptions.diagram = diagram;
+  if (sceneClass !== void 0) showcaseOptions.sceneClass = sceneClass;
+  if (onReady !== void 0) showcaseOptions.onReady = onReady;
+  if (onError !== void 0) showcaseOptions.onError = onError;
+  if (onStatusChange !== void 0) showcaseOptions.onStatusChange = onStatusChange;
+  const {
+    containerRef,
+    status,
+    mode,
+    animationState,
+    error,
+    play,
+    pause,
+    reset,
+    exportSVG: exportSVG2,
+    exportJPG: exportJPG2,
+    exportMP4: exportMP42
+  } = useShowcase(showcaseOptions);
+  const {
+    status: exportStatus,
+    downloadSVG,
+    downloadJPG,
+    downloadMP4
+  } = useExport();
+  const shouldShowControls = showControls && mode === "animation";
+  const shouldShowExport = showExport && status === "ready";
+  const handlePlayPause = useCallback3(() => {
+    if (animationState === "playing") {
+      pause();
+    } else {
+      play();
+    }
+  }, [animationState, play, pause]);
+  const handleExportSVG = useCallback3(() => {
+    downloadSVG(exportSVG2, "locusing-diagram.svg");
+  }, [downloadSVG, exportSVG2]);
+  const handleExportJPG = useCallback3(() => {
+    downloadJPG(() => exportJPG2(0.9), "locusing-diagram.jpg");
+  }, [downloadJPG, exportJPG2]);
+  const handleExportMP4 = useCallback3(() => {
+    downloadMP4(exportMP42, "locusing-animation.mp4");
+  }, [downloadMP4, exportMP42]);
+  const containerStyle = useMemo(() => ({
+    position: "relative",
+    width: width === "auto" ? "100%" : width,
+    aspectRatio: height === "auto" ? String(aspectRatio) : void 0,
+    height: height === "auto" ? void 0 : height,
+    borderRadius: "8px",
+    overflow: "hidden",
+    background
+  }), [width, height, aspectRatio, background]);
+  const controlsStyle = useMemo(() => ({
+    position: "absolute",
+    bottom: "12px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    display: "flex",
+    gap: "8px",
+    padding: "8px 12px",
+    background: "rgba(0, 0, 0, 0.6)",
+    borderRadius: "8px",
+    backdropFilter: "blur(4px)"
+  }), []);
+  const buttonStyle = useMemo(() => ({
+    padding: "6px 12px",
+    border: "none",
+    borderRadius: "4px",
+    background: "rgba(255, 255, 255, 0.2)",
+    color: "#fff",
+    cursor: "pointer",
+    fontSize: "14px",
+    transition: "background 0.2s"
+  }), []);
+  if (status === "loading") {
+    return /* @__PURE__ */ React.createElement("div", { className, style: containerStyle }, /* @__PURE__ */ React.createElement("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: "100%",
+      color: "rgba(255, 255, 255, 0.6)"
+    } }, "\u52A0\u8F7D\u4E2D..."));
+  }
+  if (status === "error" && error) {
+    return /* @__PURE__ */ React.createElement("div", { className, style: containerStyle }, /* @__PURE__ */ React.createElement("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: "100%",
+      color: "#ff6b6b",
+      padding: "20px",
+      textAlign: "center"
+    } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "8px" } }, "\u6E32\u67D3\u9519\u8BEF"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "12px", opacity: 0.8 } }, error.message)));
+  }
+  return /* @__PURE__ */ React.createElement("div", { className, style: containerStyle }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  ), shouldShowControls && /* @__PURE__ */ React.createElement("div", { style: controlsStyle }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: buttonStyle,
+      onClick: handlePlayPause,
+      onMouseOver: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.3)",
+      onMouseOut: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)"
+    },
+    animationState === "playing" ? "\u6682\u505C" : "\u64AD\u653E"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: buttonStyle,
+      onClick: reset,
+      onMouseOver: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.3)",
+      onMouseOut: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)"
+    },
+    "\u91CD\u7F6E"
+  )), shouldShowExport && /* @__PURE__ */ React.createElement("div", { style: {
+    position: "absolute",
+    top: "12px",
+    right: "12px",
+    display: "flex",
+    gap: "4px"
+  } }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: __spreadProps(__spreadValues({}, buttonStyle), {
+        padding: "4px 8px",
+        fontSize: "12px"
+      }),
+      onClick: handleExportSVG,
+      disabled: exportStatus === "exporting",
+      onMouseOver: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.3)",
+      onMouseOut: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)"
+    },
+    "SVG"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: __spreadProps(__spreadValues({}, buttonStyle), {
+        padding: "4px 8px",
+        fontSize: "12px"
+      }),
+      onClick: handleExportJPG,
+      disabled: exportStatus === "exporting",
+      onMouseOver: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.3)",
+      onMouseOut: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)"
+    },
+    "JPG"
+  ), mode === "animation" && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      style: __spreadProps(__spreadValues({}, buttonStyle), {
+        padding: "4px 8px",
+        fontSize: "12px"
+      }),
+      onClick: handleExportMP4,
+      disabled: exportStatus === "exporting",
+      onMouseOver: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.3)",
+      onMouseOut: (e) => e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)"
+    },
+    "MP4"
+  )), showCode && code2 && /* @__PURE__ */ React.createElement("details", { style: {
+    position: "absolute",
+    bottom: shouldShowControls ? "60px" : "12px",
+    left: "12px",
+    right: "12px",
+    background: "rgba(0, 0, 0, 0.8)",
+    borderRadius: "8px",
+    padding: "8px 12px",
+    color: "#fff",
+    fontSize: "12px",
+    maxHeight: "200px",
+    overflow: "auto"
+  } }, /* @__PURE__ */ React.createElement("summary", { style: { cursor: "pointer", marginBottom: "8px" } }, "\u67E5\u770B\u4EE3\u7801"), /* @__PURE__ */ React.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, code2)));
+}
 export {
   AddTextLetterByLetter,
   AddTextWordByWord,
@@ -14063,6 +15980,7 @@ export {
   Shift,
   ShowIncreasingSubsets,
   ShowPassingFlash,
+  Showcase,
   ShrinkToCenter,
   SpinInFromNothing,
   SpiralIn,
@@ -14164,6 +16082,7 @@ export {
   createPhysicsWorld,
   createPlane,
   createScene,
+  createShowcase,
   createSphere,
   createSpringMass,
   createTheme,
@@ -14209,6 +16128,7 @@ export {
   defaultTheme,
   defaultTokens,
   degToRad,
+  detectRenderMode,
   determinant,
   diagram_combine,
   diff,
@@ -14219,6 +16139,7 @@ export {
   dot2 as dot,
   dot3D,
   doubleArrow,
+  downloadFile,
   draw_to_svg,
   draw_to_svg_string,
   easing,
@@ -14227,6 +16148,7 @@ export {
   ellipse,
   empty,
   equilateralTriangle,
+  executeCode,
   footOfPerpendicular,
   functionConstraint,
   getBuffer,
@@ -14296,6 +16218,7 @@ export {
   polygon,
   polyline,
   powScale,
+  preprocessCode,
   quadraticBezier,
   radToDeg,
   randomLayout,
@@ -14322,6 +16245,9 @@ export {
   sector,
   semanticStyle,
   setCurrentTheme,
+  exportJPG as showcaseExportJPG,
+  exportMP4 as showcaseExportMP4,
+  exportSVG as showcaseExportSVG,
   shuffle2 as shuffle,
   sortGroups,
   sphere,
@@ -14344,6 +16270,8 @@ export {
   translationMatrix,
   treeLayout,
   triangle,
+  useExport,
+  useShowcase,
   vector,
   vector3D,
   dot as vectorDot