locusing 0.1.2 → 0.1.3

package/dist/index.js

@@ -1129,6 +1129,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) {
@@ -3074,44 +3088,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;
@@ -3152,22 +3219,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;
@@ -3179,7 +3251,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;
@@ -3213,7 +3286,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);
@@ -3338,7 +3417,7 @@ function pathFromString(d) {
 }
 function text(content, options) {
   const {
-    fontSize = 16,
+    fontSize = 1,
     fontFamily = "system-ui, sans-serif",
     fontWeight = "normal",
     fontStyle = "normal",
@@ -3366,7 +3445,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 = import_katex.default.renderToString(latex, {
     throwOnError: false,
     displayMode: false,
@@ -3427,27 +3506,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();
@@ -3456,11 +3603,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 || {};
@@ -4588,507 +4828,114 @@ var init_core = __esm({
   }
 });
 
-// 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;
-}
-var init_utils = __esm({
-  "src/animate/animations/utils.ts"() {
-    "use strict";
-  }
-});
-
-// src/animate/animations/transform.ts
-var transform_exports = {};
-__export(transform_exports, {
+// src/index.ts
+var index_exports = {};
+__export(index_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,
+  ComplexValueTracker: () => ComplexValueTracker,
   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,
+  Group: () => Group,
+  GrowArrow: () => GrowArrow,
+  GrowFromCenter: () => GrowFromCenter,
+  GrowFromEdge: () => GrowFromEdge,
+  GrowFromPoint: () => GrowFromPoint,
+  Homotopy: () => Homotopy,
+  IDENTITY: () => IDENTITY,
+  Indicate: () => Indicate,
+  Interactive: () => Interactive,
+  LEFT: () => LEFT,
+  LaggedStart: () => LaggedStart,
+  LaggedStartMap: () => LaggedStartMap,
+  LinearTransformationScene: () => LinearTransformationScene,
+  ManimColor: () => ManimColor,
+  MathTex: () => MathTex,
+  MatrixDisplay: () => MatrixDisplay,
   Morphing: () => Morphing,
+  MoveAlongPath: () => MoveAlongPath,
+  MoveTo: () => MoveTo,
   MoveToTarget: () => MoveToTarget,
+  MovingCamera: () => MovingCamera,
+  MovingCameraScene: () => MovingCameraScene,
+  NumberLine: () => NumberLine,
+  NumberPlane: () => NumberPlane,
+  ORIGIN: () => ORIGIN,
+  PI: () => PI,
+  PhaseFlow: () => PhaseFlow,
+  Physics2DWorld: () => Physics2DWorld,
+  PolarAxes: () => PolarAxes,
+  RIGHT: () => RIGHT,
+  RemoveTextLetterByLetter: () => RemoveTextLetterByLetter,
   ReplacementTransform: () => ReplacementTransform,
-  Transform: () => Transform,
-  TransformFromCopy: () => TransformFromCopy,
-  TransformMatchingShapes: () => TransformMatchingShapes,
-  TransformMatchingTex: () => TransformMatchingTex
-});
-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;
-      import_gsap5.gsap.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;
-      import_gsap5.gsap.set(sourceElement, {
-        transformOrigin: `${originX}px ${originY}px`
-      });
-      timeline.add(sourceElement, {
-        scaleX,
-        scaleY,
-        x: translateX,
-        y: translateY,
-        duration,
-        ease: getGSAPEasing(easing2),
-        delay,
-        onComplete: () => {
-          sourceElement.remove();
-          import_gsap5.gsap.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;
-      import_gsap5.gsap.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(target, options = {}) {
-  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
-  return {
-    duration,
-    target,
-    execute(scene, timeline, startTime) {
-      const element = scene.getElement(target);
-      if (!element) return;
-      const targetState = target._targetState;
-      if (targetState) {
-        timeline.add(element, __spreadProps(__spreadValues({}, targetState), {
-          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;
-      import_gsap5.gsap.set(targetElement, { opacity: 0 });
-      if ((_a = import_gsap5.gsap.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();
-              import_gsap5.gsap.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);
-      import_gsap5.gsap.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();
-        import_gsap5.gsap.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;
-      import_gsap5.gsap.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();
-        import_gsap5.gsap.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;
-      import_gsap5.gsap.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);
-      import_gsap5.gsap.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();
-          import_gsap5.gsap.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;
-      import_gsap5.gsap.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);
-      import_gsap5.gsap.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();
-          import_gsap5.gsap.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;
-      import_gsap5.gsap.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);
-      import_gsap5.gsap.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: () => {
-          copyElement.remove();
-          import_gsap5.gsap.set(targetElement, { opacity: 1 });
-        }
-      }, startTime);
-    }
-  };
-}
-var import_gsap5;
-var init_transform = __esm({
-  "src/animate/animations/transform.ts"() {
-    "use strict";
-    import_gsap5 = require("gsap");
-    init_timeline();
-    init_utils();
-  }
-});
-
-// src/index.ts
-var index_exports = {};
-__export(index_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,
-  ComplexValueTracker: () => ComplexValueTracker,
-  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,
-  Group: () => Group,
-  GrowArrow: () => GrowArrow,
-  GrowFromCenter: () => GrowFromCenter,
-  GrowFromEdge: () => GrowFromEdge,
-  GrowFromPoint: () => GrowFromPoint,
-  Homotopy: () => Homotopy,
-  IDENTITY: () => IDENTITY,
-  Indicate: () => Indicate,
-  Interactive: () => Interactive,
-  LEFT: () => LEFT,
-  LaggedStart: () => LaggedStart,
-  LaggedStartMap: () => LaggedStartMap,
-  LinearTransformationScene: () => LinearTransformationScene,
-  ManimColor: () => ManimColor,
-  MathTex: () => MathTex,
-  MatrixDisplay: () => MatrixDisplay,
-  Morphing: () => Morphing,
-  MoveAlongPath: () => MoveAlongPath,
-  MoveTo: () => MoveTo,
-  MoveToTarget: () => MoveToTarget,
-  MovingCamera: () => MovingCamera,
-  MovingCameraScene: () => MovingCameraScene,
-  NumberLine: () => NumberLine,
-  NumberPlane: () => NumberPlane,
-  ORIGIN: () => ORIGIN,
-  PI: () => PI,
-  PhaseFlow: () => PhaseFlow,
-  Physics2DWorld: () => Physics2DWorld,
-  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,
-  Tex: () => Tex,
-  ThreeB1BColors: () => ThreeB1BColors,
-  ThreeCamera: () => ThreeCamera,
-  ThreeDAxes: () => ThreeDAxes,
-  ThreeDCamera: () => ThreeDCamera,
-  ThreeDiagram: () => ThreeDiagram,
-  ThreeScene: () => ThreeScene,
-  Timeline: () => Timeline,
-  TracedPath: () => TracedPath,
-  TracedPathAnimation: () => TracedPathAnimation,
+  Restore: () => Restore,
+  Rotate: () => Rotate,
+  Rotating: () => Rotating,
+  Scale: () => Scale,
+  ScaleInPlace: () => ScaleInPlace,
+  Scene: () => Scene,
+  Shift: () => Shift,
+  ShowIncreasingSubsets: () => ShowIncreasingSubsets,
+  ShowPassingFlash: () => ShowPassingFlash,
+  Showcase: () => Showcase,
+  ShrinkToCenter: () => ShrinkToCenter,
+  SpinInFromNothing: () => SpinInFromNothing,
+  SpiralIn: () => SpiralIn,
+  Succession: () => Succession,
+  Swap: () => Swap,
+  TAU: () => TAU,
+  Table: () => Table,
+  Tex: () => Tex,
+  ThreeB1BColors: () => ThreeB1BColors,
+  ThreeCamera: () => ThreeCamera,
+  ThreeDAxes: () => ThreeDAxes,
+  ThreeDCamera: () => ThreeDCamera,
+  ThreeDiagram: () => ThreeDiagram,
+  ThreeScene: () => ThreeScene,
+  Timeline: () => Timeline,
+  TracedPath: () => TracedPath,
+  TracedPathAnimation: () => TracedPathAnimation,
   Transform: () => Transform,
   TransformFromCopy: () => TransformFromCopy,
   TransformMatchingShapes: () => TransformMatchingShapes,
@@ -5173,6 +5020,7 @@ __export(index_exports, {
   createPhysicsWorld: () => createPhysicsWorld,
   createPlane: () => createPlane,
   createScene: () => createScene,
+  createShowcase: () => createShowcase,
   createSphere: () => createSphere,
   createSpringMass: () => createSpringMass,
   createTheme: () => createTheme,
@@ -5218,6 +5066,7 @@ __export(index_exports, {
   defaultTheme: () => defaultTheme,
   defaultTokens: () => defaultTokens,
   degToRad: () => degToRad,
+  detectRenderMode: () => detectRenderMode,
   determinant: () => determinant,
   diagram_combine: () => diagram_combine,
   diff: () => diff,
@@ -5228,6 +5077,7 @@ __export(index_exports, {
   dot: () => dot2,
   dot3D: () => dot3D,
   doubleArrow: () => doubleArrow,
+  downloadFile: () => downloadFile,
   draw_to_svg: () => draw_to_svg,
   draw_to_svg_string: () => draw_to_svg_string,
   easing: () => easing,
@@ -5236,6 +5086,7 @@ __export(index_exports, {
   ellipse: () => ellipse,
   empty: () => empty,
   equilateralTriangle: () => equilateralTriangle,
+  executeCode: () => executeCode,
   footOfPerpendicular: () => footOfPerpendicular,
   functionConstraint: () => functionConstraint,
   getBuffer: () => getBuffer,
@@ -5305,6 +5156,7 @@ __export(index_exports, {
   polygon: () => polygon,
   polyline: () => polyline,
   powScale: () => powScale,
+  preprocessCode: () => preprocessCode,
   quadraticBezier: () => quadraticBezier,
   radToDeg: () => radToDeg,
   randomLayout: () => randomLayout,
@@ -5331,6 +5183,9 @@ __export(index_exports, {
   sector: () => sector,
   semanticStyle: () => semanticStyle,
   setCurrentTheme: () => setCurrentTheme,
+  showcaseExportJPG: () => exportJPG,
+  showcaseExportMP4: () => exportMP4,
+  showcaseExportSVG: () => exportSVG,
   shuffle: () => shuffle2,
   sortGroups: () => sortGroups,
   sphere: () => sphere,
@@ -5353,6 +5208,8 @@ __export(index_exports, {
   translationMatrix: () => translationMatrix,
   treeLayout: () => treeLayout,
   triangle: () => triangle,
+  useExport: () => useExport,
+  useShowcase: () => useShowcase,
   vector: () => vector,
   vector3D: () => vector3D,
   vectorDot: () => dot
@@ -6319,212 +6176,549 @@ var Scene = class {
     if (this.svg && this.container && !(this.container instanceof SVGSVGElement)) {
       this.svg.remove();
     }
-    this.objects.clear();
-    this._isSetup = false;
-  }
-};
-function createScene(container, buildFn, config) {
-  const scene = new SimpleScene(container, buildFn, config);
-  return scene;
+    this.objects.clear();
+    this._isSetup = false;
+  }
+};
+function createScene(container, buildFn, config) {
+  const scene = new SimpleScene(container, buildFn, config);
+  return scene;
+}
+var SimpleScene = class extends Scene {
+  constructor(container, buildFn, config) {
+    super(container, config);
+    this.buildFn = buildFn;
+  }
+  construct() {
+    this.buildFn(this);
+  }
+};
+
+// src/animate/moving-camera-scene.ts
+var MovingCameraScene = class extends Scene {
+  /**
+   * 创建 MovingCameraScene 实例
+   * @param container - 可选的容器元素
+   * @param config - 场景配置
+   */
+  constructor(container, config = {}) {
+    super(container, config);
+  }
+  /**
+   * 初始化场景（重写以使用 MovingCamera）
+   */
+  setup(svgOrContainer, config = {}) {
+    var _a, _b, _c, _d;
+    super.setup(svgOrContainer, config);
+    const cameraConfig = (_a = config.camera) != null ? _a : {};
+    const movingCameraConfig = {
+      frameCenter: (_b = cameraConfig.frameCenter) != null ? _b : [0, 0],
+      frameWidth: (_c = cameraConfig.frameWidth) != null ? _c : this.frameWidth,
+      frameHeight: (_d = cameraConfig.frameHeight) != null ? _d : this.frameHeight
+    };
+    if (cameraConfig.defaultDuration !== void 0) {
+      movingCameraConfig.defaultDuration = cameraConfig.defaultDuration;
+    }
+    if (cameraConfig.defaultEasing !== void 0) {
+      movingCameraConfig.defaultEasing = cameraConfig.defaultEasing;
+    }
+    this.camera = new MovingCamera(movingCameraConfig);
+    this.updateCameraViewBox();
+  }
+};
+function createMovingCameraScene(container, buildFn, config) {
+  const scene = new SimpleMovingCameraScene(container, buildFn, config);
+  return scene;
+}
+var SimpleMovingCameraScene = class extends MovingCameraScene {
+  constructor(container, buildFn, config) {
+    super(container, config);
+    this.buildFn = buildFn;
+  }
+  construct() {
+    this.buildFn(this);
+  }
+};
+
+// src/animate/animations/create.ts
+var import_gsap3 = require("gsap");
+init_timeline();
+
+// 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 {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const paths = querySelectorAllIncludingSelf(element, "path, line, polyline, polygon, circle, ellipse, rect");
+      paths.forEach((path2) => {
+        if (path2 instanceof SVGGeometryElement) {
+          const length2 = path2.getTotalLength();
+          import_gsap3.gsap.set(path2, {
+            strokeDasharray: length2,
+            strokeDashoffset: length2,
+            fillOpacity: 0
+          });
+          timeline.add(path2, {
+            strokeDashoffset: 0,
+            duration,
+            ease: getGSAPEasing(easing2),
+            delay
+          }, startTime);
+          const fill = path2.getAttribute("fill");
+          if (fill && fill !== "none") {
+            timeline.add(path2, {
+              fillOpacity: 1,
+              duration: duration * 0.3,
+              ease: "power2.out"
+            }, startTime + duration);
+          }
+        }
+      });
+      const texts = querySelectorAllIncludingSelf(element, "text");
+      texts.forEach((text2) => {
+        import_gsap3.gsap.set(text2, { opacity: 0 });
+        timeline.add(text2, {
+          opacity: 1,
+          duration: duration * 0.5,
+          ease: "power2.out"
+        }, startTime + duration * 0.5);
+      });
+    }
+  };
+}
+function Write(target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const texts = querySelectorAllIncludingSelf(element, "text");
+      if (texts.length > 0) {
+        texts.forEach((text2) => {
+          const content = text2.textContent || "";
+          const chars = content.split("");
+          text2.textContent = "";
+          chars.forEach((char, i) => {
+            const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+            tspan.textContent = char;
+            import_gsap3.gsap.set(tspan, { opacity: 0 });
+            text2.appendChild(tspan);
+            const charDelay = i / chars.length * duration;
+            timeline.add(tspan, {
+              opacity: 1,
+              duration: duration / chars.length,
+              ease: getGSAPEasing(easing2)
+            }, startTime + delay + charDelay);
+          });
+        });
+      } else {
+        return Create(target, options).execute(scene, timeline, startTime);
+      }
+    }
+  };
+}
+function DrawBorderThenFill(target, options = {}) {
+  const { duration = 1.5, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const paths = querySelectorAllIncludingSelf(element, "path, line, polyline, polygon, circle, ellipse, rect");
+      paths.forEach((path2) => {
+        if (path2 instanceof SVGGeometryElement) {
+          const length2 = path2.getTotalLength();
+          const originalFill = path2.getAttribute("fill") || "none";
+          const originalStroke = path2.getAttribute("stroke") || "#374151";
+          import_gsap3.gsap.set(path2, {
+            strokeDasharray: length2,
+            strokeDashoffset: length2,
+            fill: "none",
+            stroke: originalStroke,
+            strokeWidth: path2.getAttribute("stroke-width") || 2
+          });
+          const borderDuration = duration * 0.6;
+          timeline.add(path2, {
+            strokeDashoffset: 0,
+            duration: borderDuration,
+            ease: getGSAPEasing(easing2)
+          }, startTime + delay);
+          if (originalFill && originalFill !== "none") {
+            const fillDuration = duration * 0.4;
+            timeline.add(path2, {
+              fill: originalFill,
+              fillOpacity: 1,
+              duration: fillDuration,
+              ease: "power2.out"
+            }, startTime + delay + borderDuration);
+          }
+        }
+      });
+    }
+  };
+}
+function GrowFromCenter(target, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeOutBack", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      const cx = bbox.x + bbox.width / 2;
+      const cy = bbox.y + bbox.height / 2;
+      import_gsap3.gsap.set(element, {
+        transformOrigin: `${cx}px ${cy}px`,
+        scale: 0,
+        opacity: 0
+      });
+      timeline.add(element, {
+        scale: 1,
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
 }
-var SimpleScene = class extends Scene {
-  constructor(container, buildFn, config) {
-    super(container, config);
-    this.buildFn = buildFn;
-  }
-  construct() {
-    this.buildFn(this);
-  }
-};
-
-// src/animate/moving-camera-scene.ts
-var MovingCameraScene = class extends Scene {
-  /**
-   * 创建 MovingCameraScene 实例
-   * @param container - 可选的容器元素
-   * @param config - 场景配置
-   */
-  constructor(container, config = {}) {
-    super(container, config);
-  }
-  /**
-   * 初始化场景（重写以使用 MovingCamera）
-   */
-  setup(svgOrContainer, config = {}) {
-    var _a, _b, _c, _d;
-    super.setup(svgOrContainer, config);
-    const cameraConfig = (_a = config.camera) != null ? _a : {};
-    const movingCameraConfig = {
-      frameCenter: (_b = cameraConfig.frameCenter) != null ? _b : [0, 0],
-      frameWidth: (_c = cameraConfig.frameWidth) != null ? _c : this.frameWidth,
-      frameHeight: (_d = cameraConfig.frameHeight) != null ? _d : this.frameHeight
-    };
-    if (cameraConfig.defaultDuration !== void 0) {
-      movingCameraConfig.defaultDuration = cameraConfig.defaultDuration;
+function GrowFromPoint(target, point, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeOutBack", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      import_gsap3.gsap.set(element, {
+        transformOrigin: `${point[0]}px ${point[1]}px`,
+        scale: 0,
+        opacity: 0
+      });
+      timeline.add(element, {
+        scale: 1,
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
     }
-    if (cameraConfig.defaultEasing !== void 0) {
-      movingCameraConfig.defaultEasing = cameraConfig.defaultEasing;
+  };
+}
+function GrowFromEdge(target, edge = "LEFT", options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getOrCreateElement(target);
+      if (!element) return;
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      let origin;
+      let scaleFrom;
+      switch (edge) {
+        case "LEFT":
+          origin = `${bbox.x}px ${bbox.y + bbox.height / 2}px`;
+          scaleFrom = { scaleX: 0 };
+          break;
+        case "RIGHT":
+          origin = `${bbox.x + bbox.width}px ${bbox.y + bbox.height / 2}px`;
+          scaleFrom = { scaleX: 0 };
+          break;
+        case "TOP":
+          origin = `${bbox.x + bbox.width / 2}px ${bbox.y}px`;
+          scaleFrom = { scaleY: 0 };
+          break;
+        case "BOTTOM":
+          origin = `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height}px`;
+          scaleFrom = { scaleY: 0 };
+          break;
+      }
+      import_gsap3.gsap.set(element, __spreadProps(__spreadValues({
+        transformOrigin: origin
+      }, scaleFrom), {
+        opacity: 0
+      }));
+      timeline.add(element, {
+        scaleX: 1,
+        scaleY: 1,
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
     }
-    this.camera = new MovingCamera(movingCameraConfig);
-    this.updateCameraViewBox();
-  }
-};
-function createMovingCameraScene(container, buildFn, config) {
-  const scene = new SimpleMovingCameraScene(container, buildFn, config);
-  return scene;
+  };
 }
-var SimpleMovingCameraScene = class extends MovingCameraScene {
-  constructor(container, buildFn, config) {
-    super(container, config);
-    this.buildFn = buildFn;
-  }
-  construct() {
-    this.buildFn(this);
-  }
-};
-
-// src/animate/animations/create.ts
-var import_gsap3 = require("gsap");
-init_timeline();
-init_utils();
-function Create(target, options = {}) {
-  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+function SpinInFromNothing(target, options = {}) {
+  const { duration = 0.8, easing: easing2 = "easeOut", delay = 0 } = options;
   return {
     duration,
     target,
     execute(scene, timeline, startTime) {
+      var _a;
       const element = scene.getOrCreateElement(target);
       if (!element) return;
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      const cx = bbox.x + bbox.width / 2;
+      const cy = bbox.y + bbox.height / 2;
+      import_gsap3.gsap.set(element, {
+        transformOrigin: `${cx}px ${cy}px`,
+        scale: 0,
+        rotation: -360,
+        opacity: 0
+      });
+      timeline.add(element, {
+        scale: 1,
+        rotation: 0,
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      }, startTime);
+    }
+  };
+}
+function Uncreate(target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
       const paths = querySelectorAllIncludingSelf(element, "path, line, polyline, polygon, circle, ellipse, rect");
       paths.forEach((path2) => {
         if (path2 instanceof SVGGeometryElement) {
           const length2 = path2.getTotalLength();
           import_gsap3.gsap.set(path2, {
             strokeDasharray: length2,
-            strokeDashoffset: length2,
-            fillOpacity: 0
+            strokeDashoffset: 0
           });
-          timeline.add(path2, {
-            strokeDashoffset: 0,
-            duration,
-            ease: getGSAPEasing(easing2),
-            delay
-          }, startTime);
           const fill = path2.getAttribute("fill");
           if (fill && fill !== "none") {
             timeline.add(path2, {
-              fillOpacity: 1,
+              fillOpacity: 0,
               duration: duration * 0.3,
-              ease: "power2.out"
-            }, startTime + duration);
+              ease: "power2.in"
+            }, startTime + delay);
           }
+          timeline.add(path2, {
+            strokeDashoffset: length2,
+            duration,
+            ease: getGSAPEasing(easing2),
+            delay: delay + (fill && fill !== "none" ? duration * 0.1 : 0)
+          }, startTime);
         }
       });
       const texts = querySelectorAllIncludingSelf(element, "text");
       texts.forEach((text2) => {
-        import_gsap3.gsap.set(text2, { opacity: 0 });
         timeline.add(text2, {
-          opacity: 1,
+          opacity: 0,
           duration: duration * 0.5,
-          ease: "power2.out"
-        }, startTime + duration * 0.5);
+          ease: "power2.in"
+        }, startTime + delay);
+      });
+      timeline.call(() => {
+        element.remove();
+      }, startTime + duration + delay);
+    }
+  };
+}
+function Unwrite(target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeIn", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      const element = scene.getElement(target);
+      if (!element) return;
+      const texts = querySelectorAllIncludingSelf(element, "text");
+      if (texts.length > 0) {
+        texts.forEach((text2) => {
+          const content = text2.textContent || "";
+          const chars = content.split("");
+          text2.textContent = "";
+          chars.forEach((char, i) => {
+            const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+            tspan.textContent = char;
+            text2.appendChild(tspan);
+            const charDelay = (chars.length - 1 - i) / chars.length * duration;
+            timeline.add(tspan, {
+              opacity: 0,
+              duration: duration / chars.length,
+              ease: getGSAPEasing(easing2)
+            }, startTime + delay + charDelay);
+          });
+        });
+        timeline.call(() => {
+          element.remove();
+        }, startTime + duration + delay);
+      } else {
+        return Uncreate(target, options).execute(scene, timeline, startTime);
+      }
+    }
+  };
+}
+function ShrinkToCenter(target, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeInBack", delay = 0 } = options;
+  return {
+    duration,
+    target,
+    execute(scene, timeline, startTime) {
+      var _a;
+      const element = scene.getElement(target);
+      if (!element) return;
+      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
+      const cx = bbox.x + bbox.width / 2;
+      const cy = bbox.y + bbox.height / 2;
+      import_gsap3.gsap.set(element, {
+        transformOrigin: `${cx}px ${cy}px`
       });
+      timeline.add(element, {
+        scale: 0,
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay,
+        onComplete: () => {
+          element.remove();
+        }
+      }, startTime);
     }
   };
 }
-function Write(target, options = {}) {
-  const { duration = 1, easing: easing2 = "easeOut", delay = 0 } = options;
+
+// src/animate/animations/fade.ts
+var import_gsap4 = require("gsap");
+init_math();
+init_timeline();
+function directionToVector(direction) {
+  if (!direction) return void 0;
+  if (Array.isArray(direction)) return direction;
+  switch (direction) {
+    case "UP":
+      return UP;
+    case "DOWN":
+      return DOWN;
+    case "LEFT":
+      return LEFT;
+    case "RIGHT":
+      return RIGHT;
+  }
+}
+function FadeIn(target, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeOut", delay = 0, direction, shift = 50 } = options;
+  const dir = directionToVector(direction);
   return {
     duration,
     target,
     execute(scene, timeline, startTime) {
       const element = scene.getOrCreateElement(target);
       if (!element) return;
-      const texts = querySelectorAllIncludingSelf(element, "text");
-      if (texts.length > 0) {
-        texts.forEach((text2) => {
-          const content = text2.textContent || "";
-          const chars = content.split("");
-          text2.textContent = "";
-          chars.forEach((char, i) => {
-            const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-            tspan.textContent = char;
-            import_gsap3.gsap.set(tspan, { opacity: 0 });
-            text2.appendChild(tspan);
-            const charDelay = i / chars.length * duration;
-            timeline.add(tspan, {
-              opacity: 1,
-              duration: duration / chars.length,
-              ease: getGSAPEasing(easing2)
-            }, startTime + delay + charDelay);
-          });
-        });
-      } else {
-        return Create(target, options).execute(scene, timeline, startTime);
+      const initialState = { opacity: 0 };
+      if (dir) {
+        initialState.x = -dir[0] * shift;
+        initialState.y = -dir[1] * shift;
+      }
+      import_gsap4.gsap.set(element, initialState);
+      const targetState = {
+        opacity: 1,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay
+      };
+      if (dir) {
+        targetState.x = 0;
+        targetState.y = 0;
       }
+      timeline.add(element, targetState, startTime);
     }
   };
 }
-function DrawBorderThenFill(target, options = {}) {
-  const { duration = 1.5, easing: easing2 = "easeInOut", delay = 0 } = options;
+function FadeOut(target, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeIn", delay = 0, direction, shift = 50 } = options;
+  const dir = directionToVector(direction);
   return {
     duration,
     target,
     execute(scene, timeline, startTime) {
-      const element = scene.getOrCreateElement(target);
+      const element = scene.getElement(target);
       if (!element) return;
-      const paths = querySelectorAllIncludingSelf(element, "path, line, polyline, polygon, circle, ellipse, rect");
-      paths.forEach((path2) => {
-        if (path2 instanceof SVGGeometryElement) {
-          const length2 = path2.getTotalLength();
-          const originalFill = path2.getAttribute("fill") || "none";
-          const originalStroke = path2.getAttribute("stroke") || "#374151";
-          import_gsap3.gsap.set(path2, {
-            strokeDasharray: length2,
-            strokeDashoffset: length2,
-            fill: "none",
-            stroke: originalStroke,
-            strokeWidth: path2.getAttribute("stroke-width") || 2
-          });
-          const borderDuration = duration * 0.6;
-          timeline.add(path2, {
-            strokeDashoffset: 0,
-            duration: borderDuration,
-            ease: getGSAPEasing(easing2)
-          }, startTime + delay);
-          if (originalFill && originalFill !== "none") {
-            const fillDuration = duration * 0.4;
-            timeline.add(path2, {
-              fill: originalFill,
-              fillOpacity: 1,
-              duration: fillDuration,
-              ease: "power2.out"
-            }, startTime + delay + borderDuration);
-          }
+      const targetState = {
+        opacity: 0,
+        duration,
+        ease: getGSAPEasing(easing2),
+        delay,
+        onComplete: () => {
+          element.remove();
         }
-      });
+      };
+      if (dir) {
+        targetState.x = dir[0] * shift;
+        targetState.y = dir[1] * shift;
+      }
+      timeline.add(element, targetState, startTime);
     }
   };
 }
-function GrowFromCenter(target, options = {}) {
-  const { duration = 0.5, easing: easing2 = "easeOutBack", delay = 0 } = options;
+function FadeInFrom(target, direction, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction }));
+}
+function FadeOutTo(target, direction, options = {}) {
+  return FadeOut(target, __spreadProps(__spreadValues({}, options), { direction }));
+}
+function FadeInFromDown(target, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "DOWN" }));
+}
+function FadeInFromUp(target, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "UP" }));
+}
+function FadeInFromLeft(target, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "LEFT" }));
+}
+function FadeInFromRight(target, options = {}) {
+  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "RIGHT" }));
+}
+function FadeTransform(source, target, options = {}) {
+  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0 } = options;
   return {
     duration,
-    target,
+    target: source,
     execute(scene, timeline, startTime) {
-      var _a;
-      const element = scene.getOrCreateElement(target);
-      if (!element) return;
-      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
-      const cx = bbox.x + bbox.width / 2;
-      const cy = bbox.y + bbox.height / 2;
-      import_gsap3.gsap.set(element, {
-        transformOrigin: `${cx}px ${cy}px`,
-        scale: 0,
-        opacity: 0
-      });
-      timeline.add(element, {
-        scale: 1,
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      import_gsap4.gsap.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),
@@ -6533,97 +6727,126 @@ function GrowFromCenter(target, options = {}) {
     }
   };
 }
-function GrowFromPoint(target, point, options = {}) {
-  const { duration = 0.5, easing: easing2 = "easeOutBack", delay = 0 } = options;
+
+// src/animate/animations/transform.ts
+var import_gsap5 = require("gsap");
+init_timeline();
+function Transform(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
   return {
     duration,
-    target,
+    target: source,
     execute(scene, timeline, startTime) {
-      const element = scene.getOrCreateElement(target);
-      if (!element) return;
-      import_gsap3.gsap.set(element, {
-        transformOrigin: `${point[0]}px ${point[1]}px`,
-        scale: 0,
-        opacity: 0
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      import_gsap5.gsap.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;
+      import_gsap5.gsap.set(sourceElement, {
+        transformOrigin: `${originX}px ${originY}px`
       });
-      timeline.add(element, {
-        scale: 1,
-        opacity: 1,
+      timeline.add(sourceElement, {
+        scaleX,
+        scaleY,
+        x: translateX,
+        y: translateY,
         duration,
         ease: getGSAPEasing(easing2),
-        delay
+        delay,
+        onComplete: () => {
+          sourceElement.remove();
+          import_gsap5.gsap.set(targetElement, { opacity: 1 });
+        }
       }, startTime);
     }
   };
 }
-function GrowFromEdge(target, edge = "LEFT", options = {}) {
-  const { duration = 0.5, easing: easing2 = "easeOut", delay = 0 } = options;
+function ReplacementTransform(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0, replace = true } = options;
   return {
     duration,
-    target,
+    target: source,
     execute(scene, timeline, startTime) {
-      var _a;
-      const element = scene.getOrCreateElement(target);
-      if (!element) return;
-      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
-      let origin;
-      let scaleFrom;
-      switch (edge) {
-        case "LEFT":
-          origin = `${bbox.x}px ${bbox.y + bbox.height / 2}px`;
-          scaleFrom = { scaleX: 0 };
-          break;
-        case "RIGHT":
-          origin = `${bbox.x + bbox.width}px ${bbox.y + bbox.height / 2}px`;
-          scaleFrom = { scaleX: 0 };
-          break;
-        case "TOP":
-          origin = `${bbox.x + bbox.width / 2}px ${bbox.y}px`;
-          scaleFrom = { scaleY: 0 };
-          break;
-        case "BOTTOM":
-          origin = `${bbox.x + bbox.width / 2}px ${bbox.y + bbox.height}px`;
-          scaleFrom = { scaleY: 0 };
-          break;
-      }
-      import_gsap3.gsap.set(element, __spreadProps(__spreadValues({
-        transformOrigin: origin
-      }, scaleFrom), {
-        opacity: 0
-      }));
-      timeline.add(element, {
-        scaleX: 1,
-        scaleY: 1,
-        opacity: 1,
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      import_gsap5.gsap.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
+        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 SpinInFromNothing(target, options = {}) {
-  const { duration = 0.8, easing: easing2 = "easeOut", delay = 0 } = options;
+function MoveToTarget(source, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
+  const targetDiagram = source.getTarget();
   return {
     duration,
-    target,
+    target: source,
     execute(scene, timeline, startTime) {
-      var _a;
-      const element = scene.getOrCreateElement(target);
-      if (!element) return;
-      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
-      const cx = bbox.x + bbox.width / 2;
-      const cy = bbox.y + bbox.height / 2;
-      import_gsap3.gsap.set(element, {
-        transformOrigin: `${cx}px ${cy}px`,
-        scale: 0,
-        rotation: -360,
-        opacity: 0
+      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);
+      import_gsap5.gsap.set(element, {
+        transformOrigin: `${(_e = sourceCenter[0]) != null ? _e : 0}px ${(_f = sourceCenter[1]) != null ? _f : 0}px`
       });
       timeline.add(element, {
-        scale: 1,
-        rotation: 0,
-        opacity: 1,
+        x: translateX,
+        y: -translateY,
+        // SVG Y 轴翻转
+        scaleX: isFinite(scaleX) ? scaleX : 1,
+        scaleY: isFinite(scaleY) ? scaleY : 1,
         duration,
         ease: getGSAPEasing(easing2),
         delay
@@ -6631,244 +6854,266 @@ function SpinInFromNothing(target, options = {}) {
     }
   };
 }
-function Uncreate(target, options = {}) {
+function Morphing(source, target, options = {}) {
   const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
   return {
     duration,
-    target,
+    target: source,
     execute(scene, timeline, startTime) {
-      const element = scene.getElement(target);
-      if (!element) return;
-      const paths = querySelectorAllIncludingSelf(element, "path, line, polyline, polygon, circle, ellipse, rect");
-      paths.forEach((path2) => {
-        if (path2 instanceof SVGGeometryElement) {
-          const length2 = path2.getTotalLength();
-          import_gsap3.gsap.set(path2, {
-            strokeDasharray: length2,
-            strokeDashoffset: 0
-          });
-          const fill = path2.getAttribute("fill");
-          if (fill && fill !== "none") {
-            timeline.add(path2, {
-              fillOpacity: 0,
-              duration: duration * 0.3,
-              ease: "power2.in"
-            }, startTime + delay);
-          }
-          timeline.add(path2, {
-            strokeDashoffset: length2,
+      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;
+      import_gsap5.gsap.set(targetElement, { opacity: 0 });
+      if ((_a = import_gsap5.gsap.plugins) == null ? void 0 : _a.morphSVG) {
+        const targetD = targetPath.getAttribute("d");
+        if (targetD) {
+          timeline.add(sourcePath, {
+            morphSVG: targetD,
             duration,
             ease: getGSAPEasing(easing2),
-            delay: delay + (fill && fill !== "none" ? duration * 0.1 : 0)
+            delay,
+            onComplete: () => {
+              sourceElement.remove();
+              import_gsap5.gsap.set(targetElement, { opacity: 1 });
+            }
           }, startTime);
         }
-      });
-      const texts = querySelectorAllIncludingSelf(element, "text");
-      texts.forEach((text2) => {
-        timeline.add(text2, {
-          opacity: 0,
-          duration: duration * 0.5,
-          ease: "power2.in"
-        }, startTime + delay);
-      });
-      timeline.call(() => {
-        element.remove();
-      }, startTime + duration + delay);
-    }
-  };
-}
-function Unwrite(target, options = {}) {
-  const { duration = 1, easing: easing2 = "easeIn", delay = 0 } = options;
-  return {
-    duration,
-    target,
-    execute(scene, timeline, startTime) {
-      const element = scene.getElement(target);
-      if (!element) return;
-      const texts = querySelectorAllIncludingSelf(element, "text");
-      if (texts.length > 0) {
-        texts.forEach((text2) => {
-          const content = text2.textContent || "";
-          const chars = content.split("");
-          text2.textContent = "";
-          chars.forEach((char, i) => {
-            const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-            tspan.textContent = char;
-            text2.appendChild(tspan);
-            const charDelay = (chars.length - 1 - i) / chars.length * duration;
-            timeline.add(tspan, {
-              opacity: 0,
-              duration: duration / chars.length,
-              ease: getGSAPEasing(easing2)
-            }, startTime + delay + charDelay);
-          });
-        });
-        timeline.call(() => {
-          element.remove();
-        }, startTime + duration + delay);
       } else {
-        return Uncreate(target, options).execute(scene, timeline, startTime);
+        Transform(source, target, options).execute(scene, timeline, startTime);
       }
     }
   };
 }
-function ShrinkToCenter(target, options = {}) {
-  const { duration = 0.5, easing: easing2 = "easeInBack", delay = 0 } = options;
+function TransformMatchingShapes(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
   return {
     duration,
-    target,
+    target: source,
     execute(scene, timeline, startTime) {
-      var _a;
-      const element = scene.getElement(target);
-      if (!element) return;
-      const bbox = ((_a = element.getBBox) == null ? void 0 : _a.call(element)) || { x: 0, y: 0, width: 0, height: 0 };
-      const cx = bbox.x + bbox.width / 2;
-      const cy = bbox.y + bbox.height / 2;
-      import_gsap3.gsap.set(element, {
-        transformOrigin: `${cx}px ${cy}px`
-      });
-      timeline.add(element, {
-        scale: 0,
-        opacity: 0,
-        duration,
-        ease: getGSAPEasing(easing2),
-        delay,
-        onComplete: () => {
-          element.remove();
+      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);
+      import_gsap5.gsap.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);
         }
-      }, startTime);
+      }
+      timeline.call(() => {
+        sourceElement.remove();
+        import_gsap5.gsap.set(targetElement, { opacity: 1 });
+      }, startTime + duration);
     }
   };
 }
-
-// src/animate/animations/fade.ts
-var import_gsap4 = require("gsap");
-init_math();
-init_timeline();
-function directionToVector(direction) {
-  if (!direction) return void 0;
-  if (Array.isArray(direction)) return direction;
-  switch (direction) {
-    case "UP":
-      return UP;
-    case "DOWN":
-      return DOWN;
-    case "LEFT":
-      return LEFT;
-    case "RIGHT":
-      return RIGHT;
-  }
-}
-function FadeIn(target, options = {}) {
-  const { duration = 0.5, easing: easing2 = "easeOut", delay = 0, direction, shift = 50 } = options;
-  const dir = directionToVector(direction);
+function TransformMatchingTex(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
   return {
     duration,
-    target,
+    target: source,
     execute(scene, timeline, startTime) {
-      const element = scene.getOrCreateElement(target);
-      if (!element) return;
-      const initialState = { opacity: 0 };
-      if (dir) {
-        initialState.x = -dir[0] * shift;
-        initialState.y = -dir[1] * shift;
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      import_gsap5.gsap.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);
       }
-      import_gsap4.gsap.set(element, initialState);
-      const targetState = {
-        opacity: 1,
-        duration,
-        ease: getGSAPEasing(easing2),
-        delay
-      };
-      if (dir) {
-        targetState.x = 0;
-        targetState.y = 0;
+      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.add(element, targetState, startTime);
+      timeline.call(() => {
+        sourceElement.remove();
+        import_gsap5.gsap.set(targetElement, { opacity: 1 });
+      }, startTime + duration);
     }
   };
 }
-function FadeOut(target, options = {}) {
-  const { duration = 0.5, easing: easing2 = "easeIn", delay = 0, direction, shift = 50 } = options;
-  const dir = directionToVector(direction);
+function ClockwiseTransform(source, target, options = {}) {
+  const { duration = 1, easing: easing2 = "easeInOut", delay = 0 } = options;
   return {
     duration,
-    target,
+    target: source,
     execute(scene, timeline, startTime) {
-      const element = scene.getElement(target);
-      if (!element) return;
-      const targetState = {
+      var _a, _b;
+      const sourceElement = scene.getElement(source);
+      const targetElement = scene.getOrCreateElement(target);
+      if (!sourceElement || !targetElement) return;
+      import_gsap5.gsap.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);
+      import_gsap5.gsap.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: () => {
-          element.remove();
+          sourceElement.remove();
+          import_gsap5.gsap.set(targetElement, { opacity: 1 });
         }
-      };
-      if (dir) {
-        targetState.x = dir[0] * shift;
-        targetState.y = dir[1] * shift;
-      }
-      timeline.add(element, targetState, startTime);
+      }, startTime);
     }
   };
 }
-function FadeInFrom(target, direction, options = {}) {
-  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction }));
-}
-function FadeOutTo(target, direction, options = {}) {
-  return FadeOut(target, __spreadProps(__spreadValues({}, options), { direction }));
-}
-function FadeInFromDown(target, options = {}) {
-  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "DOWN" }));
-}
-function FadeInFromUp(target, options = {}) {
-  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "UP" }));
-}
-function FadeInFromLeft(target, options = {}) {
-  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "LEFT" }));
-}
-function FadeInFromRight(target, options = {}) {
-  return FadeIn(target, __spreadProps(__spreadValues({}, options), { direction: "RIGHT" }));
-}
-function FadeTransform(source, target, options = {}) {
-  const { duration = 0.5, easing: easing2 = "easeInOut", delay = 0 } = options;
+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;
-      import_gsap4.gsap.set(targetElement, { opacity: 0 });
+      import_gsap5.gsap.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);
+      import_gsap5.gsap.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();
+          import_gsap5.gsap.set(targetElement, { opacity: 1 });
         }
       }, startTime);
-      timeline.add(targetElement, {
-        opacity: 1,
+    }
+  };
+}
+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;
+      import_gsap5.gsap.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);
+      import_gsap5.gsap.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
+        delay,
+        onComplete: () => {
+          copyElement.remove();
+          import_gsap5.gsap.set(targetElement, { opacity: 1 });
+        }
       }, startTime);
     }
   };
 }
 
-// src/animate/animations/index.ts
-init_transform();
-
 // src/animate/animations/move.ts
 var import_gsap6 = require("gsap");
 var import_MotionPathPlugin = require("gsap/MotionPathPlugin");
 init_timeline();
-init_utils();
 if (typeof window !== "undefined") {
   import_gsap6.gsap.registerPlugin(import_MotionPathPlugin.MotionPathPlugin);
 }
@@ -7190,7 +7435,6 @@ function FadeToColor(target, color, options = {}) {
 // src/animate/animations/indicate.ts
 var import_gsap7 = require("gsap");
 init_timeline();
-init_utils();
 function Indicate(target, options = {}) {
   const {
     duration = 0.5,
@@ -7682,8 +7926,9 @@ function PhaseFlow(target, options = {}) {
 }
 
 // src/animate/animations/composition.ts
+var import_gsap8 = require("gsap");
 init_core();
-init_utils();
+init_timeline();
 function AnimationGroup(animations, options = {}) {
   var _a, _b;
   const { lagRatio = 0 } = options;
@@ -7738,16 +7983,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) {
-      Promise.resolve().then(() => (init_transform(), transform_exports)).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);
+      import_gsap8.gsap.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);
     }
   };
 }
@@ -7812,9 +8102,8 @@ function transformPathByHomotopy(d, homotopyFn, t) {
 }
 
 // src/animate/animations/text.ts
-var import_gsap8 = require("gsap");
+var import_gsap9 = require("gsap");
 init_timeline();
-init_utils();
 function AddTextLetterByLetter(target, options = {}) {
   const { duration = 1, easing: easing2 = "linear", delay = 0, timePerChar } = options;
   return {
@@ -7833,7 +8122,7 @@ function AddTextLetterByLetter(target, options = {}) {
         chars.forEach((char, i) => {
           const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
           tspan.textContent = char;
-          import_gsap8.gsap.set(tspan, { opacity: 0 });
+          import_gsap9.gsap.set(tspan, { opacity: 0 });
           text2.appendChild(tspan);
           const charDelay = i * charDuration;
           timeline.add(tspan, {
@@ -7910,7 +8199,7 @@ function Typewriter(target, options = {}) {
           cursorTspan.textContent = cursorChar;
           cursorTspan.setAttribute("class", "typewriter-cursor");
           text2.appendChild(cursorTspan);
-          import_gsap8.gsap.to(cursorTspan, {
+          import_gsap9.gsap.to(cursorTspan, {
             opacity: 0,
             duration: cursorBlinkInterval,
             repeat: -1,
@@ -7932,8 +8221,8 @@ function Typewriter(target, options = {}) {
         });
         if (cursorTspan) {
           timeline.call(() => {
-            import_gsap8.gsap.killTweensOf(cursorTspan);
-            import_gsap8.gsap.to(cursorTspan, {
+            import_gsap9.gsap.killTweensOf(cursorTspan);
+            import_gsap9.gsap.to(cursorTspan, {
               opacity: 0,
               duration: 0.3,
               delay: 1
@@ -8145,7 +8434,7 @@ function CameraSetFrame(camera, targetFrame, options = {}) {
 }
 
 // src/animate/animations/traced-path.ts
-var import_gsap9 = require("gsap");
+var import_gsap10 = require("gsap");
 init_core();
 function TracedPath(target, config = {}) {
   const {
@@ -8187,11 +8476,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 {
@@ -8255,7 +8543,7 @@ function GrowArrow(arrowDiagram, config = {}) {
       lines.forEach((line3) => {
         var _a;
         const length2 = ((_a = line3.getTotalLength) == null ? void 0 : _a.call(line3)) || 100;
-        import_gsap9.gsap.set(line3, {
+        import_gsap10.gsap.set(line3, {
           strokeDasharray: length2,
           strokeDashoffset: length2
         });
@@ -8270,7 +8558,7 @@ function GrowArrow(arrowDiagram, config = {}) {
 }
 
 // src/animate/animations/p1-animations.ts
-var import_gsap10 = require("gsap");
+var import_gsap11 = require("gsap");
 init_core();
 init_complex();
 function AddTextWordByWord(textDiagram, config = {}) {
@@ -8283,7 +8571,7 @@ function AddTextWordByWord(textDiagram, config = {}) {
       if (!element) return;
       const textElement = element.querySelector("text") || element;
       if (!(textElement instanceof SVGTextElement)) {
-        import_gsap10.gsap.set(element, { opacity: 0 });
+        import_gsap11.gsap.set(element, { opacity: 0 });
         timeline.add(element, { opacity: 1, duration }, startTime);
         return;
       }
@@ -8309,18 +8597,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) => import_gsap10.gsap.set(child, { opacity: 0 }));
+      children.forEach((child) => import_gsap11.gsap.set(child, { opacity: 0 }));
       children.forEach((child, i) => {
         timeline.add(child, { opacity: 1, duration: timePerChild * 0.5 }, startTime + i * timePerChild);
       });
@@ -8338,7 +8627,7 @@ function ChangingDecimal(textDiagram, targetValue, config = {}) {
       const textElement = element.querySelector("text") || element;
       const obj = { value: startValue };
       timeline.call(() => {
-        import_gsap10.gsap.to(obj, {
+        import_gsap11.gsap.to(obj, {
           value: targetValue,
           duration,
           ease: "none",
@@ -8369,7 +8658,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;
-        import_gsap10.gsap.set(waveElement, { opacity: 1 });
+        import_gsap11.gsap.set(waveElement, { opacity: 1 });
         const waveStartTime = startTime + i * waveDelay;
         timeline.add(waveElement, {
           attr: { r: maxRadius },
@@ -8402,7 +8691,7 @@ function ApplyFunction(diagram, fn, config = {}) {
           }
           const obj = { progress: 0 };
           timeline.call(() => {
-            import_gsap10.gsap.to(obj, {
+            import_gsap11.gsap.to(obj, {
               progress: 1,
               duration,
               ease: "power2.inOut",
@@ -8441,7 +8730,7 @@ function Restore(diagram, config = {}) {
       const currentElement = scene.getElement(diagram);
       const targetElement = scene.getOrCreateElement(savedState);
       if (!currentElement || !targetElement) return;
-      import_gsap10.gsap.set(targetElement, { opacity: 0 });
+      import_gsap11.gsap.set(targetElement, { opacity: 0 });
       timeline.add(currentElement, { opacity: 0, duration: duration / 2 }, startTime);
       timeline.add(targetElement, { opacity: 1, duration: duration / 2 }, startTime + duration / 2);
     }
@@ -8515,7 +8804,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)
         );
@@ -8524,8 +8813,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) {
@@ -8544,7 +8833,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)
@@ -8571,7 +8860,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 轴向上为正
     ];
   }
@@ -8582,7 +8871,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 轴向上为正
     ];
   }
   /** 绑制函数图像 */
@@ -8869,9 +9159,9 @@ var LinearTransformationScene = class extends Scene {
     ];
     void _transformFn;
     return new Promise((resolve) => {
-      import("gsap").then(({ gsap: gsap11 }) => {
+      import("gsap").then(({ gsap: gsap12 }) => {
         const obj = { t: 0 };
-        gsap11.to(obj, {
+        gsap12.to(obj, {
           t: 1,
           duration,
           ease: "power2.inOut",
@@ -9313,8 +9603,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]);
       }
@@ -10336,19 +10628,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;
@@ -10369,11 +10661,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];
@@ -10393,14 +10686,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;
   }
@@ -10491,22 +10784,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) {
@@ -10516,7 +10809,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(
@@ -10524,7 +10817,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;
@@ -15296,119 +15589,1180 @@ function axes3D(config = {}) {
     );
     group4.add(zArrow);
   }
-  if (showTicks) {
-    for (let x = Math.ceil(xRange[0]); x <= Math.floor(xRange[1]); x += tickSpacing) {
-      if (x === 0) continue;
-      const tickGeom = new THREE14.BufferGeometry().setFromPoints([
-        new THREE14.Vector3(x, -tickLength, 0),
-        new THREE14.Vector3(x, tickLength, 0)
-      ]);
-      group4.add(new THREE14.Line(tickGeom, xMaterial));
+  if (showTicks) {
+    for (let x = Math.ceil(xRange[0]); x <= Math.floor(xRange[1]); x += tickSpacing) {
+      if (x === 0) continue;
+      const tickGeom = new THREE14.BufferGeometry().setFromPoints([
+        new THREE14.Vector3(x, -tickLength, 0),
+        new THREE14.Vector3(x, tickLength, 0)
+      ]);
+      group4.add(new THREE14.Line(tickGeom, xMaterial));
+    }
+    for (let y = Math.ceil(yRange[0]); y <= Math.floor(yRange[1]); y += tickSpacing) {
+      if (y === 0) continue;
+      const tickGeom = new THREE14.BufferGeometry().setFromPoints([
+        new THREE14.Vector3(-tickLength, y, 0),
+        new THREE14.Vector3(tickLength, y, 0)
+      ]);
+      group4.add(new THREE14.Line(tickGeom, yMaterial));
+    }
+    for (let z = Math.ceil(zRange[0]); z <= Math.floor(zRange[1]); z += tickSpacing) {
+      if (z === 0) continue;
+      const tickGeom = new THREE14.BufferGeometry().setFromPoints([
+        new THREE14.Vector3(0, -tickLength, z),
+        new THREE14.Vector3(0, tickLength, z)
+      ]);
+      group4.add(new THREE14.Line(tickGeom, zMaterial));
+    }
+  }
+  return new ThreeDiagram(group4);
+}
+function createArrowHead(position, direction, size, color) {
+  const geometry = new THREE14.ConeGeometry(size * 0.5, size, 8);
+  const material = new THREE14.MeshBasicMaterial({ color });
+  const cone2 = new THREE14.Mesh(geometry, material);
+  cone2.position.copy(position);
+  const axis = new THREE14.Vector3(0, 1, 0);
+  const quaternion = new THREE14.Quaternion().setFromUnitVectors(axis, direction.normalize());
+  cone2.setRotationFromQuaternion(quaternion);
+  return cone2;
+}
+var createAxes3D = axes3D;
+
+// src/webgl/math/vector3d.ts
+var THREE15 = __toESM(require("three"));
+function vector3D(from = [0, 0, 0], to = [1, 0, 0], config = {}) {
+  const {
+    color = "#3498db",
+    lineWidth = 2,
+    arrowSize = 0.15,
+    showArrow = true
+  } = config;
+  const group4 = new THREE15.Group();
+  const material = new THREE15.LineBasicMaterial({ color, linewidth: lineWidth });
+  const geometry = new THREE15.BufferGeometry().setFromPoints([
+    new THREE15.Vector3(from[0], from[1], from[2]),
+    new THREE15.Vector3(to[0], to[1], to[2])
+  ]);
+  const line3 = new THREE15.Line(geometry, material);
+  group4.add(line3);
+  if (showArrow) {
+    const direction = new THREE15.Vector3(
+      to[0] - from[0],
+      to[1] - from[1],
+      to[2] - from[2]
+    ).normalize();
+    const arrowGeometry = new THREE15.ConeGeometry(arrowSize * 0.5, arrowSize, 8);
+    const arrowMaterial = new THREE15.MeshBasicMaterial({ color });
+    const arrow2 = new THREE15.Mesh(arrowGeometry, arrowMaterial);
+    arrow2.position.set(to[0], to[1], to[2]);
+    const axis = new THREE15.Vector3(0, 1, 0);
+    const quaternion = new THREE15.Quaternion().setFromUnitVectors(axis, direction);
+    arrow2.setRotationFromQuaternion(quaternion);
+    group4.add(arrow2);
+  }
+  return new ThreeDiagram(group4);
+}
+var createVector3D = vector3D;
+
+// src/webgl/math/grid3d.ts
+var THREE16 = __toESM(require("three"));
+function grid3D(config = {}) {
+  const {
+    size = 10,
+    divisions = 10,
+    color1 = "#444444",
+    color2 = "#888888",
+    plane: plane2 = "xz",
+    center = [0, 0, 0]
+  } = config;
+  const gridHelper = new THREE16.GridHelper(size, divisions, color1, color2);
+  switch (plane2) {
+    case "xy":
+      gridHelper.rotation.x = Math.PI / 2;
+      break;
+    case "yz":
+      gridHelper.rotation.z = Math.PI / 2;
+      break;
+    case "xz":
+    default:
+      break;
+  }
+  gridHelper.position.set(center[0], center[1], center[2]);
+  return new ThreeDiagram(gridHelper);
+}
+var createGrid3D = grid3D;
+
+// src/webgl/materials/index.ts
+var THREE17 = __toESM(require("three"));
+
+// src/webgl/lights/index.ts
+var THREE18 = __toESM(require("three"));
+
+// src/webgl/overlay/index.ts
+var THREE19 = __toESM(require("three"));
+var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.js");
+
+// src/showcase/Showcase.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/showcase/hooks/useShowcase.ts
+var import_react = require("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() {
+      }
     }
-    for (let y = Math.ceil(yRange[0]); y <= Math.floor(yRange[1]); y += tickSpacing) {
-      if (y === 0) continue;
-      const tickGeom = new THREE14.BufferGeometry().setFromPoints([
-        new THREE14.Vector3(-tickLength, y, 0),
-        new THREE14.Vector3(tickLength, y, 0)
-      ]);
-      group4.add(new THREE14.Line(tickGeom, yMaterial));
+    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;
     }
-    for (let z = Math.ceil(zRange[0]); z <= Math.floor(zRange[1]); z += tickSpacing) {
-      if (z === 0) continue;
-      const tickGeom = new THREE14.BufferGeometry().setFromPoints([
-        new THREE14.Vector3(0, -tickLength, z),
-        new THREE14.Vector3(0, tickLength, z)
-      ]);
-      group4.add(new THREE14.Line(tickGeom, zMaterial));
+    if (sceneInstance) {
+      sceneInstance.start();
     }
+    return {
+      mode,
+      diagrams,
+      scene: sceneInstance,
+      interactive: interactiveInstance
+    };
+  } catch (error) {
+    throw new Error(`\u4EE3\u7801\u6267\u884C\u9519\u8BEF: ${error.message}`);
   }
-  return new ThreeDiagram(group4);
-}
-function createArrowHead(position, direction, size, color) {
-  const geometry = new THREE14.ConeGeometry(size * 0.5, size, 8);
-  const material = new THREE14.MeshBasicMaterial({ color });
-  const cone2 = new THREE14.Mesh(geometry, material);
-  cone2.position.copy(position);
-  const axis = new THREE14.Vector3(0, 1, 0);
-  const quaternion = new THREE14.Quaternion().setFromUnitVectors(axis, direction.normalize());
-  cone2.setRotationFromQuaternion(quaternion);
-  return cone2;
 }
-var createAxes3D = axes3D;
 
-// src/webgl/math/vector3d.ts
-var THREE15 = __toESM(require("three"));
-function vector3D(from = [0, 0, 0], to = [1, 0, 0], config = {}) {
-  const {
-    color = "#3498db",
-    lineWidth = 2,
-    arrowSize = 0.15,
-    showArrow = true
-  } = config;
-  const group4 = new THREE15.Group();
-  const material = new THREE15.LineBasicMaterial({ color, linewidth: lineWidth });
-  const geometry = new THREE15.BufferGeometry().setFromPoints([
-    new THREE15.Vector3(from[0], from[1], from[2]),
-    new THREE15.Vector3(to[0], to[1], to[2])
-  ]);
-  const line3 = new THREE15.Line(geometry, material);
-  group4.add(line3);
-  if (showArrow) {
-    const direction = new THREE15.Vector3(
-      to[0] - from[0],
-      to[1] - from[1],
-      to[2] - from[2]
-    ).normalize();
-    const arrowGeometry = new THREE15.ConeGeometry(arrowSize * 0.5, arrowSize, 8);
-    const arrowMaterial = new THREE15.MeshBasicMaterial({ color });
-    const arrow2 = new THREE15.Mesh(arrowGeometry, arrowMaterial);
-    arrow2.position.set(to[0], to[1], to[2]);
-    const axis = new THREE15.Vector3(0, 1, 0);
-    const quaternion = new THREE15.Quaternion().setFromUnitVectors(axis, direction);
-    arrow2.setRotationFromQuaternion(quaternion);
-    group4.add(arrow2);
+// 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);
   }
-  return new ThreeDiagram(group4);
 }
-var createVector3D = vector3D;
 
-// src/webgl/math/grid3d.ts
-var THREE16 = __toESM(require("three"));
-function grid3D(config = {}) {
+// 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 {
-    size = 10,
-    divisions = 10,
-    color1 = "#444444",
-    color2 = "#888888",
-    plane: plane2 = "xz",
-    center = [0, 0, 0]
-  } = config;
-  const gridHelper = new THREE16.GridHelper(size, divisions, color1, color2);
-  switch (plane2) {
-    case "xy":
-      gridHelper.rotation.x = Math.PI / 2;
-      break;
-    case "yz":
-      gridHelper.rotation.z = Math.PI / 2;
-      break;
-    case "xz":
-    default:
-      break;
+    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";
   }
-  gridHelper.position.set(center[0], center[1], center[2]);
-  return new ThreeDiagram(gridHelper);
+  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;
 }
-var createGrid3D = grid3D;
 
-// src/webgl/materials/index.ts
-var THREE17 = __toESM(require("three"));
+// src/showcase/hooks/useShowcase.ts
+function useShowcase(options) {
+  const containerRef = (0, import_react.useRef)(null);
+  const controllerRef = (0, import_react.useRef)(null);
+  const [status, setStatus] = (0, import_react.useState)("idle");
+  const [mode, setMode] = (0, import_react.useState)(null);
+  const [animationState, setAnimationState] = (0, import_react.useState)("idle");
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.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 = (0, import_react.useCallback)(() => {
+    if (controllerRef.current) {
+      controllerRef.current.play();
+      setAnimationState("playing");
+    }
+  }, []);
+  const pause = (0, import_react.useCallback)(() => {
+    if (controllerRef.current) {
+      controllerRef.current.pause();
+      setAnimationState("paused");
+    }
+  }, []);
+  const resume = (0, import_react.useCallback)(() => {
+    if (controllerRef.current) {
+      controllerRef.current.resume();
+      setAnimationState("playing");
+    }
+  }, []);
+  const reset = (0, import_react.useCallback)(async () => {
+    if (controllerRef.current) {
+      await controllerRef.current.reset();
+      setAnimationState("idle");
+    }
+  }, []);
+  const exportSVG2 = (0, import_react.useCallback)(async () => {
+    if (!controllerRef.current) {
+      throw new Error("Showcase \u672A\u521D\u59CB\u5316");
+    }
+    return controllerRef.current.exportSVG();
+  }, []);
+  const exportJPG2 = (0, import_react.useCallback)(async (quality) => {
+    if (!controllerRef.current) {
+      throw new Error("Showcase \u672A\u521D\u59CB\u5316");
+    }
+    return controllerRef.current.exportJPG(quality);
+  }, []);
+  const exportMP42 = (0, import_react.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/webgl/lights/index.ts
-var THREE18 = __toESM(require("three"));
+// src/showcase/hooks/useExport.ts
+var import_react2 = require("react");
+function useExport() {
+  const [status, setStatus] = (0, import_react2.useState)("idle");
+  const [error, setError] = (0, import_react2.useState)(null);
+  const downloadSVG = (0, import_react2.useCallback)(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 = (0, import_react2.useCallback)(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 = (0, import_react2.useCallback)(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/webgl/overlay/index.ts
-var THREE19 = __toESM(require("three"));
-var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.js");
+// 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 = (0, import_react3.useCallback)(() => {
+    if (animationState === "playing") {
+      pause();
+    } else {
+      play();
+    }
+  }, [animationState, play, pause]);
+  const handleExportSVG = (0, import_react3.useCallback)(() => {
+    downloadSVG(exportSVG2, "locusing-diagram.svg");
+  }, [downloadSVG, exportSVG2]);
+  const handleExportJPG = (0, import_react3.useCallback)(() => {
+    downloadJPG(() => exportJPG2(0.9), "locusing-diagram.jpg");
+  }, [downloadJPG, exportJPG2]);
+  const handleExportMP4 = (0, import_react3.useCallback)(() => {
+    downloadMP4(exportMP42, "locusing-animation.mp4");
+  }, [downloadMP4, exportMP42]);
+  const containerStyle = (0, import_react3.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 = (0, import_react3.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 = (0, import_react3.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__ */ import_react3.default.createElement("div", { className, style: containerStyle }, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("div", { className, style: containerStyle }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "100%",
+      height: "100%",
+      color: "#ff6b6b",
+      padding: "20px",
+      textAlign: "center"
+    } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { marginBottom: "8px" } }, "\u6E32\u67D3\u9519\u8BEF"), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "12px", opacity: 0.8 } }, error.message)));
+  }
+  return /* @__PURE__ */ import_react3.default.createElement("div", { className, style: containerStyle }, /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  ), shouldShowControls && /* @__PURE__ */ import_react3.default.createElement("div", { style: controlsStyle }, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.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__ */ import_react3.default.createElement("div", { style: {
+    position: "absolute",
+    top: "12px",
+    right: "12px",
+    display: "flex",
+    gap: "4px"
+  } }, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.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__ */ import_react3.default.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__ */ import_react3.default.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__ */ import_react3.default.createElement("summary", { style: { cursor: "pointer", marginBottom: "8px" } }, "\u67E5\u770B\u4EE3\u7801"), /* @__PURE__ */ import_react3.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, code2)));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddTextLetterByLetter,
@@ -15498,6 +16852,7 @@ var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.j
   Shift,
   ShowIncreasingSubsets,
   ShowPassingFlash,
+  Showcase,
   ShrinkToCenter,
   SpinInFromNothing,
   SpiralIn,
@@ -15599,6 +16954,7 @@ var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.j
   createPhysicsWorld,
   createPlane,
   createScene,
+  createShowcase,
   createSphere,
   createSpringMass,
   createTheme,
@@ -15644,6 +17000,7 @@ var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.j
   defaultTheme,
   defaultTokens,
   degToRad,
+  detectRenderMode,
   determinant,
   diagram_combine,
   diff,
@@ -15654,6 +17011,7 @@ var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.j
   dot,
   dot3D,
   doubleArrow,
+  downloadFile,
   draw_to_svg,
   draw_to_svg_string,
   easing,
@@ -15662,6 +17020,7 @@ var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.j
   ellipse,
   empty,
   equilateralTriangle,
+  executeCode,
   footOfPerpendicular,
   functionConstraint,
   getBuffer,
@@ -15731,6 +17090,7 @@ var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.j
   polygon,
   polyline,
   powScale,
+  preprocessCode,
   quadraticBezier,
   radToDeg,
   randomLayout,
@@ -15757,6 +17117,9 @@ var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.j
   sector,
   semanticStyle,
   setCurrentTheme,
+  showcaseExportJPG,
+  showcaseExportMP4,
+  showcaseExportSVG,
   shuffle,
   sortGroups,
   sphere,
@@ -15779,6 +17142,8 @@ var import_CSS2DRenderer = require("three/examples/jsm/renderers/CSS2DRenderer.j
   translationMatrix,
   treeLayout,
   triangle,
+  useExport,
+  useShowcase,
   vector,
   vector3D,
   vectorDot