locusing 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Yao Shen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,147 @@
+# Locusing
+
+A declarative graphics and animation library for mathematical visualization.
+
+Locusing combines the elegance of [Manim](https://www.manim.community/) with the interactivity of [Diagramatics](https://github.com/ray-x/diagramatics), bringing beautiful mathematical animations to the web.
+
+## Features
+
+- **Declarative API** - Immutable, composable diagram primitives
+- **Manim-style Animations** - 30+ built-in animations (Create, FadeIn, Transform, etc.)
+- **Interactive Controls** - Sliders, draggable points, and constraints
+- **Hand-drawn Style** - Rough.js integration for sketch-like graphics
+- **Mathematical Tools** - Vectors, matrices, Bezier curves, coordinate systems
+- **Geometry Constructions** - Compass-and-straightedge style constructions
+
+## Packages
+
+| Package | Description |
+|:--------|:------------|
+| `@wangyaoshen/core` | Core rendering engine with SVG and Rough.js support |
+| `@wangyaoshen/animate` | Manim-style animation system powered by GSAP |
+| `@wangyaoshen/math` | Mathematical utilities (vectors, matrices, curves) |
+| `@wangyaoshen/geometry` | Coordinate systems and geometric constructions |
+| `@wangyaoshen/interactive` | Interactive controls and constraints |
+
+## Quick Start
+
+```bash
+# Install packages
+pnpm add @wangyaoshen/core @wangyaoshen/animate @wangyaoshen/math
+```
+
+### Static Diagram
+
+```typescript
+import { square, circle, text, combine, renderToSVG } from '@wangyaoshen/core';
+
+// Create shapes
+const sq = square(100).fill('#EA580C');
+const label = text('Hello').translate(0, 80);
+
+// Combine and render
+const diagram = combine(sq, label);
+renderToSVG(diagram, document.getElementById('canvas'));
+```
+
+### Animated Scene
+
+```typescript
+import { Scene, Create, FadeOut, Wait } from '@wangyaoshen/animate';
+import { square, circle } from '@wangyaoshen/core';
+
+class MyScene extends Scene {
+  construct() {
+    const sq = square(100).fill('#EA580C');
+    const c = circle(50).fill('#58C4DD');
+
+    this.play(Create(sq));
+    this.play(Create(c, { delay: 0.5 }));
+    this.wait(1);
+    this.play(FadeOut(sq), FadeOut(c));
+  }
+}
+
+const scene = new MyScene(document.getElementById('canvas'));
+scene.render();
+```
+
+### Interactive Diagram
+
+```typescript
+import { Interactive } from '@wangyaoshen/interactive';
+import { circle } from '@wangyaoshen/core';
+
+const interactive = new Interactive(container);
+
+interactive.slider({
+  min: 10,
+  max: 100,
+  value: 50,
+  onChange: (radius) => {
+    const c = circle(radius).fill('#EA580C');
+    interactive.update(c);
+  }
+});
+```
+
+## Animation Library
+
+### Creation Animations
+- `Create` - Draw stroke animation
+- `Write` - Text writing effect
+- `GrowFromCenter` - Scale from center
+- `DrawBorderThenFill` - Draw border then fill
+
+### Fade Animations
+- `FadeIn` / `FadeOut`
+- `FadeInFrom` / `FadeOutTo`
+
+### Transform Animations
+- `Transform` - Morph between shapes
+- `ReplacementTransform` - Replace with transform
+- `Morphing` - SVG path morphing (requires GSAP MorphSVG)
+
+### Movement Animations
+- `Shift` - Relative movement
+- `MoveTo` - Absolute movement
+- `MoveAlongPath` - Follow a path
+- `Rotate` / `Scale`
+
+### Indication Animations
+- `Indicate` - Highlight effect
+- `Circumscribe` - Circle around
+- `Wiggle` - Shake effect
+- `Flash` - Flash effect
+
+### Composition
+- `Succession` - Play in sequence
+- `LaggedStart` - Staggered start times
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run playground
+pnpm dev
+
+# Build all packages
+pnpm build
+
+# Run tests
+pnpm test
+```
+
+## Credits
+
+- [GSAP](https://gsap.com/) - Animation engine
+- [Rough.js](https://roughjs.com/) - Hand-drawn style graphics
+- [KaTeX](https://katex.org/) - LaTeX rendering (playground)
+- [Manim](https://www.manim.community/) - Animation API inspiration
+- [Diagramatics](https://github.com/ray-x/diagramatics) - Interactive diagram inspiration
+
+## License
+
+MIT License - see [LICENSE](LICENSE) for details.

package/dist/chunk-3XW6GBD6.mjs

@@ -0,0 +1,445 @@
+import {
+  __esm
+} from "./chunk-TQQRYA5H.mjs";
+
+// src/core/render-svg.ts
+function ensureKatexStyles() {
+  if (katexStyleInjected || typeof document === "undefined") return;
+  if (document.querySelector('link[href*="katex"]') || document.querySelector("style[data-katex]")) {
+    katexStyleInjected = true;
+    return;
+  }
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = "https://cdn.jsdelivr.net/npm/katex@0.16.27/dist/katex.min.css";
+  link.crossOrigin = "anonymous";
+  document.head.appendChild(link);
+  katexStyleInjected = true;
+}
+function renderToSVG(diagram, container, options = {}) {
+  const { width = 800, height = 600, background, frame } = options;
+  ensureKatexStyles();
+  let svg;
+  if (container instanceof SVGSVGElement) {
+    svg = container;
+  } else {
+    svg = document.createElementNS(SVG_NS, "svg");
+    container.appendChild(svg);
+  }
+  svg.setAttribute("width", String(width));
+  svg.setAttribute("height", String(height));
+  while (svg.firstChild) {
+    svg.removeChild(svg.firstChild);
+  }
+  const frameConfig = frame ? typeof frame === "boolean" ? DEFAULT_FRAME : frame : null;
+  if (frameConfig) {
+    const { width: fw, height: fh } = frameConfig;
+    svg.setAttribute("viewBox", `${-fw / 2} ${-fh / 2} ${fw} ${fh}`);
+    if (background) {
+      const rect = document.createElementNS(SVG_NS, "rect");
+      rect.setAttribute("x", String(-fw / 2));
+      rect.setAttribute("y", String(-fh / 2));
+      rect.setAttribute("width", String(fw));
+      rect.setAttribute("height", String(fh));
+      rect.setAttribute("fill", background);
+      svg.appendChild(rect);
+    }
+    const defs = document.createElementNS(SVG_NS, "defs");
+    svg.appendChild(defs);
+    const flipGroup = document.createElementNS(SVG_NS, "g");
+    flipGroup.setAttribute("transform", "scale(1, -1)");
+    const element = renderShape(diagram.shape, true);
+    if (element) {
+      flipGroup.appendChild(element);
+    }
+    svg.appendChild(flipGroup);
+  } else {
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    if (background) {
+      const rect = document.createElementNS(SVG_NS, "rect");
+      rect.setAttribute("width", "100%");
+      rect.setAttribute("height", "100%");
+      rect.setAttribute("fill", background);
+      svg.appendChild(rect);
+    }
+    const defs = document.createElementNS(SVG_NS, "defs");
+    svg.appendChild(defs);
+    const element = renderShape(diagram.shape, false);
+    if (element) {
+      svg.appendChild(element);
+    }
+  }
+  return svg;
+}
+function toSVGString(diagram, options = {}) {
+  const { width = 800, height = 600, background, frame } = options;
+  const frameConfig = frame ? typeof frame === "boolean" ? DEFAULT_FRAME : frame : null;
+  if (frameConfig) {
+    const { width: fw, height: fh } = frameConfig;
+    const viewBox = `${-fw / 2} ${-fh / 2} ${fw} ${fh}`;
+    let content2 = "";
+    if (background) {
+      content2 += `<rect x="${-fw / 2}" y="${-fh / 2}" width="${fw}" height="${fh}" fill="${background}"/>`;
+    }
+    content2 += `<g transform="scale(1,-1)">${shapeToSVGString(diagram.shape)}</g>`;
+    return `<svg xmlns="${SVG_NS}" width="${width}" height="${height}" viewBox="${viewBox}">${content2}</svg>`;
+  }
+  let content = "";
+  if (background) {
+    content += `<rect width="100%" height="100%" fill="${background}"/>`;
+  }
+  content += shapeToSVGString(diagram.shape);
+  return `<svg xmlns="${SVG_NS}" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">${content}</svg>`;
+}
+function renderTexShape(shape, frameMode = false) {
+  if (frameMode) {
+    const g = document.createElementNS(SVG_NS, "g");
+    const matrix = shape.transform;
+    const a = matrix[0], c = matrix[1], tx = matrix[2];
+    const b = matrix[3], d = matrix[4], ty = matrix[5];
+    const fx = a * shape.x + c * shape.y + tx;
+    const fy = b * shape.x + d * shape.y + ty;
+    const scale = 16 / 800;
+    g.setAttribute("transform", `translate(${fx}, ${-fy}) scale(${scale}, ${-scale})`);
+    const foreignObject = document.createElementNS(SVG_NS, "foreignObject");
+    const pixelWidth = 1e3;
+    const pixelHeight = 200;
+    foreignObject.setAttribute("x", String(-pixelWidth / 2));
+    foreignObject.setAttribute("y", String(-pixelHeight / 2));
+    foreignObject.setAttribute("width", String(pixelWidth));
+    foreignObject.setAttribute("height", String(pixelHeight));
+    foreignObject.setAttribute("overflow", "visible");
+    const div = document.createElementNS(XHTML_NS, "div");
+    div.setAttribute("xmlns", XHTML_NS);
+    div.style.fontSize = `${shape.fontSize}px`;
+    div.style.color = shape.color;
+    div.style.display = "flex";
+    div.style.justifyContent = "center";
+    div.style.alignItems = "center";
+    div.style.width = `${pixelWidth}px`;
+    div.style.height = `${pixelHeight}px`;
+    div.style.whiteSpace = "nowrap";
+    div.innerHTML = shape.html;
+    foreignObject.appendChild(div);
+    g.appendChild(foreignObject);
+    return g;
+  } else {
+    const foreignObject = document.createElementNS(SVG_NS, "foreignObject");
+    foreignObject.setAttribute("x", String(shape.x));
+    foreignObject.setAttribute("y", String(shape.y));
+    foreignObject.setAttribute("width", "1000");
+    foreignObject.setAttribute("height", "200");
+    foreignObject.setAttribute("overflow", "visible");
+    const div = document.createElementNS(XHTML_NS, "div");
+    div.setAttribute("xmlns", XHTML_NS);
+    div.style.fontSize = `${shape.fontSize}px`;
+    div.style.color = shape.color;
+    div.style.display = "inline-block";
+    div.style.whiteSpace = "nowrap";
+    div.innerHTML = shape.html;
+    foreignObject.appendChild(div);
+    return foreignObject;
+  }
+}
+function renderShape(shape, frameMode = false) {
+  let element = null;
+  switch (shape.type) {
+    case "rect":
+      element = document.createElementNS(SVG_NS, "rect");
+      element.setAttribute("x", String(shape.x));
+      element.setAttribute("y", String(shape.y));
+      element.setAttribute("width", String(shape.width));
+      element.setAttribute("height", String(shape.height));
+      if (shape.rx) element.setAttribute("rx", String(shape.rx));
+      if (shape.ry) element.setAttribute("ry", String(shape.ry));
+      break;
+    case "circle":
+      element = document.createElementNS(SVG_NS, "circle");
+      element.setAttribute("cx", String(shape.cx));
+      element.setAttribute("cy", String(shape.cy));
+      element.setAttribute("r", String(shape.r));
+      break;
+    case "ellipse":
+      element = document.createElementNS(SVG_NS, "ellipse");
+      element.setAttribute("cx", String(shape.cx));
+      element.setAttribute("cy", String(shape.cy));
+      element.setAttribute("rx", String(shape.rx));
+      element.setAttribute("ry", String(shape.ry));
+      break;
+    case "line":
+      element = document.createElementNS(SVG_NS, "line");
+      element.setAttribute("x1", String(shape.x1));
+      element.setAttribute("y1", String(shape.y1));
+      element.setAttribute("x2", String(shape.x2));
+      element.setAttribute("y2", String(shape.y2));
+      break;
+    case "polyline":
+      element = document.createElementNS(SVG_NS, "polyline");
+      element.setAttribute("points", shape.points.map((p) => `${p[0]},${p[1]}`).join(" "));
+      break;
+    case "polygon":
+      element = document.createElementNS(SVG_NS, "polygon");
+      element.setAttribute("points", shape.points.map((p) => `${p[0]},${p[1]}`).join(" "));
+      break;
+    case "path":
+      element = document.createElementNS(SVG_NS, "path");
+      element.setAttribute("d", commandsToPath(shape.commands, frameMode));
+      break;
+    case "arc":
+      element = document.createElementNS(SVG_NS, "path");
+      element.setAttribute("d", arcToPath(shape.cx, shape.cy, shape.r, shape.startAngle, shape.endAngle));
+      break;
+    case "text":
+      element = document.createElementNS(SVG_NS, "text");
+      element.setAttribute("x", String(shape.x));
+      element.setAttribute("y", String(shape.y));
+      element.textContent = shape.content;
+      applyTextStyle(element, shape.style);
+      if (frameMode) {
+        const matrix = shape.transform;
+        const a = matrix[0], c = matrix[1], tx = matrix[2];
+        const b = matrix[3], d = matrix[4], ty = matrix[5];
+        const fx = a * shape.x + c * shape.y + tx;
+        const fy = b * shape.x + d * shape.y + ty;
+        element.setAttribute(
+          "transform",
+          `translate(${fx}, ${fy}) scale(1, -1) translate(${-fx}, ${-fy}) matrix(${a},${b},${c},${d},${tx},${ty})`
+        );
+      }
+      break;
+    case "tex":
+      element = renderTexShape(shape, frameMode);
+      break;
+    case "group":
+      element = document.createElementNS(SVG_NS, "g");
+      for (const child of shape.children) {
+        const childElement = renderShape(child, frameMode);
+        if (childElement) {
+          element.appendChild(childElement);
+        }
+      }
+      break;
+    case "svg":
+      element = document.createElementNS(SVG_NS, "g");
+      const svgShape = shape;
+      const parser = new DOMParser();
+      const svgDoc = parser.parseFromString(svgShape.content, "image/svg+xml");
+      const svgElement = svgDoc.querySelector("svg");
+      if (svgElement) {
+        const scaleX = shape.width / svgShape.originalWidth;
+        const scaleY = shape.height / svgShape.originalHeight;
+        element.setAttribute("transform", `scale(${scaleX}, ${scaleY})`);
+        for (const child of Array.from(svgElement.childNodes)) {
+          element.appendChild(document.importNode(child, true));
+        }
+      }
+      break;
+    case "image":
+      element = document.createElementNS(SVG_NS, "image");
+      const imgShape = shape;
+      element.setAttribute("href", imgShape.src);
+      element.setAttribute("x", String(-shape.width / 2));
+      element.setAttribute("y", String(-shape.height / 2));
+      element.setAttribute("width", String(shape.width));
+      element.setAttribute("height", String(shape.height));
+      element.setAttribute("preserveAspectRatio", "xMidYMid meet");
+      break;
+  }
+  if (element) {
+    element.setAttribute("id", shape.id);
+    applyStyle(element, shape.style);
+    if (!(frameMode && (shape.type === "text" || shape.type === "tex"))) {
+      applyTransform(element, shape.transform);
+    }
+  }
+  return element;
+}
+function shapeToSVGString(shape) {
+  const attrs = [`id="${shape.id}"`];
+  const style = styleToString(shape.style);
+  const transform = transformToString(shape.transform);
+  if (style) attrs.push(style);
+  if (transform) attrs.push(`transform="${transform}"`);
+  switch (shape.type) {
+    case "rect":
+      attrs.push(`x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}"`);
+      if (shape.rx) attrs.push(`rx="${shape.rx}"`);
+      if (shape.ry) attrs.push(`ry="${shape.ry}"`);
+      return `<rect ${attrs.join(" ")}/>`;
+    case "circle":
+      attrs.push(`cx="${shape.cx}" cy="${shape.cy}" r="${shape.r}"`);
+      return `<circle ${attrs.join(" ")}/>`;
+    case "ellipse":
+      attrs.push(`cx="${shape.cx}" cy="${shape.cy}" rx="${shape.rx}" ry="${shape.ry}"`);
+      return `<ellipse ${attrs.join(" ")}/>`;
+    case "line":
+      attrs.push(`x1="${shape.x1}" y1="${shape.y1}" x2="${shape.x2}" y2="${shape.y2}"`);
+      return `<line ${attrs.join(" ")}/>`;
+    case "polyline":
+      attrs.push(`points="${shape.points.map((p) => `${p[0]},${p[1]}`).join(" ")}"`);
+      return `<polyline ${attrs.join(" ")}/>`;
+    case "polygon":
+      attrs.push(`points="${shape.points.map((p) => `${p[0]},${p[1]}`).join(" ")}"`);
+      return `<polygon ${attrs.join(" ")}/>`;
+    case "path":
+      attrs.push(`d="${commandsToPath(shape.commands)}"`);
+      return `<path ${attrs.join(" ")}/>`;
+    case "arc":
+      attrs.push(`d="${arcToPath(shape.cx, shape.cy, shape.r, shape.startAngle, shape.endAngle)}"`);
+      return `<path ${attrs.join(" ")}/>`;
+    case "text":
+      const textStyle = textStyleToString(shape.style);
+      if (textStyle) attrs.push(textStyle);
+      attrs.push(`x="${shape.x}" y="${shape.y}"`);
+      return `<text ${attrs.join(" ")}>${escapeXML(shape.content)}</text>`;
+    case "tex":
+      const texShape = shape;
+      return `<foreignObject x="${texShape.x}" y="${texShape.y}" width="1000" height="200" overflow="visible"><div xmlns="${XHTML_NS}" style="font-size:${texShape.fontSize}px;color:${texShape.color};display:inline-block;white-space:nowrap">${texShape.html}</div></foreignObject>`;
+    case "group":
+      const children = shape.children.map(shapeToSVGString).join("");
+      return `<g ${attrs.join(" ")}>${children}</g>`;
+    case "svg":
+      const svgShapeStr = shape;
+      const scaleXStr = shape.width / svgShapeStr.originalWidth;
+      const scaleYStr = shape.height / svgShapeStr.originalHeight;
+      return `<g ${attrs.join(" ")} transform="scale(${scaleXStr}, ${scaleYStr})">${svgShapeStr.content}</g>`;
+    case "image":
+      const imgShapeStr = shape;
+      attrs.push(`href="${imgShapeStr.src}"`);
+      attrs.push(`x="${-shape.width / 2}" y="${-shape.height / 2}"`);
+      attrs.push(`width="${shape.width}" height="${shape.height}"`);
+      attrs.push('preserveAspectRatio="xMidYMid meet"');
+      return `<image ${attrs.join(" ")}/>`;
+    default:
+      return "";
+  }
+}
+function applyStyle(element, style) {
+  if (style.fill) element.setAttribute("fill", style.fill);
+  if (style.fillOpacity !== void 0) element.setAttribute("fill-opacity", String(style.fillOpacity));
+  if (style.stroke) element.setAttribute("stroke", style.stroke);
+  if (style.strokeWidth !== void 0) element.setAttribute("stroke-width", String(style.strokeWidth));
+  if (style.strokeOpacity !== void 0) element.setAttribute("stroke-opacity", String(style.strokeOpacity));
+  if (style.strokeDasharray) element.setAttribute("stroke-dasharray", style.strokeDasharray);
+  if (style.strokeLinecap) element.setAttribute("stroke-linecap", style.strokeLinecap);
+  if (style.strokeLinejoin) element.setAttribute("stroke-linejoin", style.strokeLinejoin);
+  if (style.opacity !== void 0) element.setAttribute("opacity", String(style.opacity));
+}
+function applyTextStyle(element, style) {
+  if (style.fontSize) element.setAttribute("font-size", String(style.fontSize));
+  if (style.fontFamily) element.setAttribute("font-family", style.fontFamily);
+  if (style.fontWeight) element.setAttribute("font-weight", String(style.fontWeight));
+  if (style.textAnchor) element.setAttribute("text-anchor", style.textAnchor);
+  if (style.dominantBaseline) element.setAttribute("dominant-baseline", style.dominantBaseline);
+}
+function applyTransform(element, matrix) {
+  const [a, b, c, d, e, f] = [
+    matrix[0],
+    matrix[3],
+    matrix[1],
+    matrix[4],
+    matrix[2],
+    matrix[5]
+  ];
+  if (a === 1 && b === 0 && c === 0 && d === 1 && e === 0 && f === 0) {
+    return;
+  }
+  element.setAttribute("transform", `matrix(${a},${b},${c},${d},${e},${f})`);
+}
+function styleToString(style) {
+  const parts = [];
+  if (style.fill) parts.push(`fill="${style.fill}"`);
+  if (style.fillOpacity !== void 0) parts.push(`fill-opacity="${style.fillOpacity}"`);
+  if (style.stroke) parts.push(`stroke="${style.stroke}"`);
+  if (style.strokeWidth !== void 0) parts.push(`stroke-width="${style.strokeWidth}"`);
+  if (style.strokeOpacity !== void 0) parts.push(`stroke-opacity="${style.strokeOpacity}"`);
+  if (style.strokeDasharray) parts.push(`stroke-dasharray="${style.strokeDasharray}"`);
+  if (style.strokeLinecap) parts.push(`stroke-linecap="${style.strokeLinecap}"`);
+  if (style.strokeLinejoin) parts.push(`stroke-linejoin="${style.strokeLinejoin}"`);
+  if (style.opacity !== void 0) parts.push(`opacity="${style.opacity}"`);
+  return parts.join(" ");
+}
+function textStyleToString(style) {
+  const parts = [];
+  if (style.fontSize) parts.push(`font-size="${style.fontSize}"`);
+  if (style.fontFamily) parts.push(`font-family="${style.fontFamily}"`);
+  if (style.fontWeight) parts.push(`font-weight="${style.fontWeight}"`);
+  if (style.textAnchor) parts.push(`text-anchor="${style.textAnchor}"`);
+  if (style.dominantBaseline) parts.push(`dominant-baseline="${style.dominantBaseline}"`);
+  return parts.join(" ");
+}
+function transformToString(matrix) {
+  const [a, b, c, d, e, f] = [
+    matrix[0],
+    matrix[3],
+    matrix[1],
+    matrix[4],
+    matrix[2],
+    matrix[5]
+  ];
+  if (a === 1 && b === 0 && c === 0 && d === 1 && e === 0 && f === 0) {
+    return "";
+  }
+  return `matrix(${a},${b},${c},${d},${e},${f})`;
+}
+function commandsToPath(commands, _frameMode = false) {
+  return commands.map((cmd) => {
+    switch (cmd.type) {
+      case "M":
+        return `M${cmd.x},${cmd.y}`;
+      case "L":
+        return `L${cmd.x},${cmd.y}`;
+      case "H":
+        return `H${cmd.x}`;
+      case "V":
+        return `V${cmd.y}`;
+      case "C":
+        return `C${cmd.x1},${cmd.y1} ${cmd.x2},${cmd.y2} ${cmd.x},${cmd.y}`;
+      case "S":
+        return `S${cmd.x2},${cmd.y2} ${cmd.x},${cmd.y}`;
+      case "Q":
+        return `Q${cmd.x1},${cmd.y1} ${cmd.x},${cmd.y}`;
+      case "T":
+        return `T${cmd.x},${cmd.y}`;
+      case "A": {
+        return `A${cmd.rx},${cmd.ry} ${cmd.angle} ${cmd.largeArc ? 1 : 0},${cmd.sweep ? 1 : 0} ${cmd.x},${cmd.y}`;
+      }
+      case "Z":
+        return "Z";
+    }
+  }).join(" ");
+}
+function arcToPath(cx, cy, r, startAngle, endAngle) {
+  const startX = cx + r * Math.cos(startAngle);
+  const startY = cy + r * Math.sin(startAngle);
+  const endX = cx + r * Math.cos(endAngle);
+  const endY = cy + r * Math.sin(endAngle);
+  const largeArc = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0;
+  const sweep = endAngle > startAngle ? 1 : 0;
+  return `M${startX},${startY} A${r},${r} 0 ${largeArc},${sweep} ${endX},${endY}`;
+}
+function escapeXML(str) {
+  if (typeof str !== "string") {
+    str = String(str != null ? str : "");
+  }
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+var DEFAULT_FRAME, XHTML_NS, katexStyleInjected, SVG_NS;
+var init_render_svg = __esm({
+  "src/core/render-svg.ts"() {
+    "use strict";
+    DEFAULT_FRAME = {
+      width: 16,
+      height: 9
+    };
+    XHTML_NS = "http://www.w3.org/1999/xhtml";
+    katexStyleInjected = false;
+    SVG_NS = "http://www.w3.org/2000/svg";
+  }
+});
+
+export {
+  renderToSVG,
+  toSVGString,
+  init_render_svg
+};