@codefrydev/svg-engine 0.1.0 → 0.1.2

package/dist/chunk-KRCGD3CL.js

@@ -1,2794 +0,0 @@
-// src/core/geometry.ts
-var GRID_SIZE = 20;
-var snap = (val, gridSize = GRID_SIZE) => Math.round(val / gridSize) * gridSize;
-var distance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1);
-var angleDeg = (x1, y1, x2, y2) => Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
-var getBounds = (x1, y1, x2, y2) => {
-  const minX = Math.min(x1, x2);
-  const minY = Math.min(y1, y2);
-  const maxX = Math.max(x1, x2);
-  const maxY = Math.max(y1, y2);
-  return {
-    minX,
-    minY,
-    maxX,
-    maxY,
-    width: Math.max(1, maxX - minX),
-    height: Math.max(1, maxY - minY)
-  };
-};
-var getMouseCoords = (svg, e) => {
-  const ctm = svg.getScreenCTM();
-  if (!ctm) return { x: 0, y: 0 };
-  return {
-    x: (e.clientX - ctm.e) / ctm.a,
-    y: (e.clientY - ctm.f) / ctm.d
-  };
-};
-
-// src/core/renderers/registry.ts
-var rendererMap = /* @__PURE__ */ new Map();
-var registerRenderer = (type, renderer) => {
-  rendererMap.set(type, renderer);
-};
-var getRenderer = (type) => rendererMap.get(type);
-var hasRenderer = (type) => rendererMap.has(type);
-
-// src/core/Renderer.tsx
-import { useMemo } from "react";
-
-// src/core/renderers/primitives.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var colorOf = (el) => el.color || "#0f172a";
-var strokeOf = (el) => el.strokeWidth || 2;
-var fontOf = (el) => el.fontSize || 16;
-registerRenderer("point", (el) => /* @__PURE__ */ jsxs("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-  /* @__PURE__ */ jsx("circle", { cx: "0", cy: "0", r: 3, fill: colorOf(el) }),
-  el.label && /* @__PURE__ */ jsx("text", { x: "8", y: "-8", fontSize: fontOf(el), fill: colorOf(el), children: String(el.label) })
-] }));
-registerRenderer("text", (el) => /* @__PURE__ */ jsx(
-  "text",
-  {
-    x: el.x1,
-    y: el.y1,
-    dominantBaseline: "central",
-    textAnchor: "middle",
-    fill: colorOf(el),
-    fontSize: fontOf(el),
-    fontFamily: el.fontFamily || "serif",
-    fontWeight: el.fontWeight || "normal",
-    children: String(el.label || el.value || "")
-  }
-));
-var lineLike = (el, arrow = false) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const dashed = el.lineStyle === "dashed" || el.type === "dashed" || el.type === "dashed_line" ? "6 6" : el.lineStyle === "dotted" ? "2 4" : void 0;
-  return /* @__PURE__ */ jsxs("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: colorOf(el), strokeWidth: strokeOf(el), strokeDasharray: dashed, strokeLinecap: "round" }),
-    arrow && /* @__PURE__ */ jsx("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: colorOf(el) }),
-    el.label && /* @__PURE__ */ jsx("text", { x: d / 2, y: -10, fontSize: fontOf(el), fill: colorOf(el), textAnchor: "middle", children: String(el.label) })
-  ] });
-};
-registerRenderer("line", (el) => lineLike(el));
-registerRenderer("dashed", (el) => lineLike({ ...el, lineStyle: "dashed" }));
-registerRenderer("dashed_line", (el) => lineLike({ ...el, lineStyle: "dashed" }));
-registerRenderer("vector", (el) => lineLike(el, true));
-registerRenderer("ray", (el) => lineLike(el, true));
-registerRenderer("wire", (el) => lineLike(el));
-registerRenderer("table_edge", (el) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const hashes = [];
-  const numH = Math.max(2, Math.floor(w / 12));
-  const numV = Math.max(2, Math.floor(h / 12));
-  for (let j = 0; j <= numH; j++) {
-    const x = minX + j / numH * w;
-    hashes.push(/* @__PURE__ */ jsx("line", { x1: x, y1: minY, x2: x - 8, y2: minY + 10, stroke: colorOf(el), strokeWidth: 1 }, `h-${j}`));
-  }
-  for (let j = 0; j <= numV; j++) {
-    const y = minY + j / numV * h;
-    hashes.push(/* @__PURE__ */ jsx("line", { x1: maxX, y1: y, x2: maxX - 10, y2: y + 8, stroke: colorOf(el), strokeWidth: 1 }, `v-${j}`));
-  }
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx("polyline", { points: `${minX},${minY} ${maxX},${minY} ${maxX},${maxY}`, fill: "none", stroke: colorOf(el), strokeWidth: strokeOf(el) }),
-    hashes,
-    el.label && /* @__PURE__ */ jsx("text", { x: minX + w / 2, y: minY - 10, fill: colorOf(el), textAnchor: "middle", fontSize: fontOf(el), children: String(el.label) })
-  ] });
-});
-
-// src/core/renderers/mechanics.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var c = (el) => el.color || "#0f172a";
-var sw = (el) => el.strokeWidth || 2;
-var fo = (el) => el.fillOpacity ?? 0.2;
-registerRenderer("slab", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const depth = el.curveHeight ?? 20;
-  return /* @__PURE__ */ jsxs2("g", { children: [
-    /* @__PURE__ */ jsx2("path", { d: `M ${b.minX} ${b.minY} L ${b.maxX} ${b.minY} L ${b.maxX} ${b.maxY} L ${b.minX} ${b.maxY} Z`, fill: c(el), fillOpacity: fo(el), stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ jsx2("path", { d: `M ${b.minX} ${b.minY} L ${b.minX + depth} ${b.minY - depth} L ${b.maxX + depth} ${b.minY - depth} L ${b.maxX} ${b.minY} Z`, fill: c(el), fillOpacity: Math.max(0, fo(el) - 0.1), stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ jsx2("path", { d: `M ${b.maxX} ${b.minY} L ${b.maxX + depth} ${b.minY - depth} L ${b.maxX + depth} ${b.maxY - depth} L ${b.maxX} ${b.maxY} Z`, fill: c(el), fillOpacity: Math.min(1, fo(el) + 0.1), stroke: c(el), strokeWidth: sw(el) })
-  ] });
-});
-registerRenderer("sphere", (el) => {
-  const r = Math.max(4, distance(el.x1, el.y1, el.x2, el.y2));
-  return /* @__PURE__ */ jsx2("circle", { cx: el.x1, cy: el.y1, r, fill: c(el), fillOpacity: fo(el), stroke: c(el), strokeWidth: sw(el) });
-});
-registerRenderer("shell", (el) => {
-  const r = Math.max(10, distance(el.x1, el.y1, el.x2, el.y2));
-  const t = el.curveHeight ?? 10;
-  const innerR = Math.max(1, r - t);
-  return /* @__PURE__ */ jsx2(
-    "path",
-    {
-      d: `M ${el.x1 - r} ${el.y1} A ${r} ${r} 0 1 0 ${el.x1 + r} ${el.y1} A ${r} ${r} 0 1 0 ${el.x1 - r} ${el.y1} Z M ${el.x1 - innerR} ${el.y1} A ${innerR} ${innerR} 0 1 1 ${el.x1 + innerR} ${el.y1} A ${innerR} ${innerR} 0 1 1 ${el.x1 - innerR} ${el.y1} Z`,
-      fill: c(el),
-      fillOpacity: fo(el),
-      fillRule: "evenodd",
-      stroke: c(el),
-      strokeWidth: sw(el)
-    }
-  );
-});
-registerRenderer("cylinder", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const r = el.curveHeight ?? 20;
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx2("path", { d: `M 0 ${-r} L ${d} ${-r} A 10 ${r} 0 0 1 ${d} ${r} L 0 ${r} Z`, fill: c(el), fillOpacity: fo(el) }),
-    /* @__PURE__ */ jsx2("path", { d: `M 0 ${-r} L ${d} ${-r} M 0 ${r} L ${d} ${r}`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ jsx2("ellipse", { cx: d, cy: 0, rx: 10, ry: r, fill: c(el), fillOpacity: fo(el), stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ jsx2("ellipse", { cx: 0, cy: 0, rx: 10, ry: r, fill: "none", stroke: c(el), strokeWidth: sw(el), strokeDasharray: "2 4" })
-  ] });
-});
-registerRenderer("ladder", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const hw = el.curveHeight ?? 10;
-  const rungs = [];
-  for (let i = 15; i < d - 10; i += 15) {
-    rungs.push(/* @__PURE__ */ jsx2("line", { x1: i, y1: -hw, x2: i, y2: hw, stroke: c(el), strokeWidth: Math.max(1, sw(el) - 1) }, i));
-  }
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx2("line", { x1: 0, y1: -hw, x2: d, y2: -hw, stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ jsx2("line", { x1: 0, y1: hw, x2: d, y2: hw, stroke: c(el), strokeWidth: sw(el) }),
-    rungs
-  ] });
-});
-registerRenderer("spring", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const zigCount = Math.max(0, Math.floor(d / 12));
-  let path = "M 0 0";
-  for (let i = 0; i < zigCount; i++) {
-    path += ` L ${i * 12 + 3} 8 L ${i * 12 + 9} -8`;
-  }
-  path += ` L ${d} 0`;
-  return /* @__PURE__ */ jsx2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ jsx2("path", { d: path, fill: "none", stroke: c(el), strokeWidth: sw(el), strokeLinejoin: "round" }) });
-});
-registerRenderer("rod", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ jsx2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ jsx2("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: Math.max(4, sw(el)), strokeLinecap: "round" }) });
-});
-registerRenderer("arc_arrow", (el) => {
-  const r = Math.max(8, distance(el.x1, el.y1, el.x2, el.y2));
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx2("path", { d: `M ${r} 0 A ${r} ${r} 0 0 0 ${-r} 0`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ jsx2("polygon", { points: `${-r},2 ${-r - 6},-10 ${-r + 6},-10`, fill: c(el) })
-  ] });
-});
-registerRenderer("lens_convex", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const cx = b.minX + b.width / 2;
-  return /* @__PURE__ */ jsx2("ellipse", { cx, cy: b.minY + b.height / 2, rx: Math.max(6, b.width / 2), ry: b.height / 2, fill: c(el), fillOpacity: Math.max(0.15, fo(el)), stroke: c(el), strokeWidth: sw(el) });
-});
-registerRenderer("lens_concave", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const cx = b.minX + b.width / 2;
-  const rx = Math.max(6, b.width / 2);
-  const ry = b.height / 2;
-  return /* @__PURE__ */ jsx2(
-    "path",
-    {
-      d: `M ${cx - rx} ${b.minY} Q ${cx - rx * 0.2} ${b.minY + ry} ${cx - rx} ${b.maxY} M ${cx + rx} ${b.minY} Q ${cx + rx * 0.2} ${b.minY + ry} ${cx + rx} ${b.maxY}`,
-      fill: "none",
-      stroke: c(el),
-      strokeWidth: sw(el)
-    }
-  );
-});
-registerRenderer("mirror_concave", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const ch = el.curveHeight ?? 40;
-  return /* @__PURE__ */ jsx2("path", { d: `M ${b.minX} ${b.minY} Q ${b.maxX + ch} ${b.minY + b.height / 2} ${b.minX} ${b.maxY}`, fill: "none", stroke: c(el), strokeWidth: sw(el) });
-});
-registerRenderer("mirror_convex", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const ch = el.curveHeight ?? 40;
-  const midY = b.minY + b.height / 2;
-  return /* @__PURE__ */ jsx2("path", { d: `M ${b.minX} ${b.minY} Q ${b.minX - ch} ${midY} ${b.minX} ${b.maxY}`, fill: "none", stroke: c(el), strokeWidth: sw(el) });
-});
-registerRenderer("prism", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const py = -d * 0.866;
-  const fs = el.fontSize || 16;
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx2("polygon", { points: `0,0 ${d},0 ${d / 2},${py}`, fill: c(el), fillOpacity: Math.max(0.15, fo(el)), stroke: c(el), strokeWidth: sw(el), strokeLinejoin: "round" }),
-    el.label && /* @__PURE__ */ jsx2("text", { x: d / 2, y: py - 10, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) })
-  ] });
-});
-registerRenderer("slit_single", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const gap = 16;
-  const thick = Math.max(4, sw(el));
-  const fs = el.fontSize || 16;
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx2("line", { x1: 0, y1: 0, x2: d / 2 - gap / 2, y2: 0, stroke: c(el), strokeWidth: thick, strokeLinecap: "square" }),
-    /* @__PURE__ */ jsx2("line", { x1: d / 2 + gap / 2, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: thick, strokeLinecap: "square" }),
-    el.label && /* @__PURE__ */ jsx2("text", { x: d / 2, y: -14, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) })
-  ] });
-});
-registerRenderer("slit_double", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const cx = b.minX + b.width / 2;
-  return /* @__PURE__ */ jsxs2("g", { children: [
-    /* @__PURE__ */ jsx2("line", { x1: cx - 6, y1: b.minY, x2: cx - 6, y2: b.maxY, stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ jsx2("line", { x1: cx + 6, y1: b.minY, x2: cx + 6, y2: b.maxY, stroke: c(el), strokeWidth: sw(el) })
-  ] });
-});
-registerRenderer("photon", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const amp = 6;
-  const waves = Math.max(3, Math.floor(d / 24));
-  const step = d / (waves * 2);
-  let path = "M 0 0 ";
-  for (let i = 0; i < waves * 2; i++) {
-    const x = (i + 1) * step;
-    const y = i % 2 === 0 ? -amp : amp;
-    path += `L ${x} ${y} `;
-  }
-  path += `L ${d} 0`;
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx2("path", { d: path, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
-    el.label && /* @__PURE__ */ jsx2("text", { x: d / 2, y: -12, textAnchor: "middle", fill: c(el), children: String(el.label) })
-  ] });
-});
-registerRenderer("glass_slab", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ jsx2("rect", { x: b.minX, y: b.minY, width: b.width, height: b.height, fill: c(el), fillOpacity: Math.max(0.1, fo(el)), stroke: c(el), strokeWidth: sw(el) });
-});
-registerRenderer("pipe", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const neck = el.curveHeight ?? b.height * 0.35;
-  return /* @__PURE__ */ jsx2(
-    "path",
-    {
-      d: `M ${b.minX} ${b.minY} C ${b.minX + b.width * 0.3} ${b.minY}, ${b.minX + b.width * 0.3} ${b.minY + neck}, ${b.minX + b.width * 0.5} ${b.minY + neck} C ${b.minX + b.width * 0.7} ${b.minY + neck}, ${b.minX + b.width * 0.7} ${b.minY}, ${b.maxX} ${b.minY} L ${b.maxX} ${b.maxY} C ${b.minX + b.width * 0.7} ${b.maxY}, ${b.minX + b.width * 0.7} ${b.maxY - neck}, ${b.minX + b.width * 0.5} ${b.maxY - neck} C ${b.minX + b.width * 0.3} ${b.maxY - neck}, ${b.minX + b.width * 0.3} ${b.maxY}, ${b.minX} ${b.maxY} Z`,
-      fill: c(el),
-      fillOpacity: fo(el),
-      stroke: c(el),
-      strokeWidth: sw(el)
-    }
-  );
-});
-registerRenderer("liquid", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ jsxs2("g", { children: [
-    /* @__PURE__ */ jsx2("path", { d: `M ${b.minX} ${b.minY} Q ${b.minX + b.width / 2} ${b.minY + 10} ${b.maxX} ${b.minY} L ${b.maxX} ${b.maxY} L ${b.minX} ${b.maxY} Z`, fill: c(el), fillOpacity: Math.max(0.2, fo(el)) }),
-    /* @__PURE__ */ jsx2("path", { d: `M ${b.minX} ${b.minY} Q ${b.minX + b.width / 2} ${b.minY + 10} ${b.maxX} ${b.minY}`, fill: "none", stroke: c(el), strokeWidth: 2 })
-  ] });
-});
-registerRenderer("orbit", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ jsx2("ellipse", { cx: b.minX + b.width / 2, cy: b.minY + b.height / 2, rx: b.width / 2, ry: b.height / 2, fill: "none", stroke: c(el), strokeWidth: sw(el), strokeDasharray: "3 3" });
-});
-registerRenderer("pole_piece", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const poleLabel = String(el.label || "N");
-  const isNorth = poleLabel.toUpperCase().includes("N");
-  const blockFill = isNorth ? "#ef4444" : "#3b82f6";
-  const labelFs = Math.min(b.width, b.height) * 0.5 + 10;
-  return /* @__PURE__ */ jsxs2("g", { children: [
-    /* @__PURE__ */ jsx2("rect", { x: b.minX, y: b.minY, width: b.width, height: b.height, fill: blockFill, fillOpacity: 0.2, stroke: c(el), strokeWidth: sw(el), rx: "4" }),
-    /* @__PURE__ */ jsx2("text", { x: b.minX + b.width / 2, y: b.minY + b.height / 2, textAnchor: "middle", dominantBaseline: "central", fill: c(el), fontWeight: "bold", fontSize: labelFs, children: poleLabel })
-  ] });
-});
-registerRenderer("b_field_line", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const fs = el.fontSize || 18;
-  const mid = d / 2;
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx2("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx2("polygon", { points: `${mid + 6},0 ${mid - 6},-5 ${mid - 6},5`, fill: c(el) }),
-    el.label ? /* @__PURE__ */ jsx2("text", { x: mid, y: -10, textAnchor: "middle", fill: c(el), fontSize: fs, children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("b_field_curve", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const curveHeight = el.curveHeight !== void 0 ? el.curveHeight : d * 0.4;
-  const fs = el.fontSize || 18;
-  const apexY = -curveHeight;
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx2(
-      "path",
-      {
-        d: `M 0 0 Q ${d / 2} ${-curveHeight * 2} ${d} 0`,
-        fill: "none",
-        stroke: c(el),
-        strokeWidth: sw(el),
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx2("polygon", { points: `${d / 2 + 6},${apexY} ${d / 2 - 6},${apexY - 5} ${d / 2 - 6},${apexY + 5}`, fill: c(el) }),
-    el.label ? /* @__PURE__ */ jsx2("text", { x: d / 2, y: apexY - 15, textAnchor: "middle", fill: c(el), fontSize: fs, children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("axes_3d", (el) => /* @__PURE__ */ jsxs2("g", { children: [
-  /* @__PURE__ */ jsx2("line", { x1: el.x1, y1: el.y1, x2: el.x1 + 100, y2: el.y1, stroke: c(el), strokeWidth: sw(el) }),
-  /* @__PURE__ */ jsx2("line", { x1: el.x1, y1: el.y1, x2: el.x1, y2: el.y1 - 100, stroke: c(el), strokeWidth: sw(el) }),
-  /* @__PURE__ */ jsx2("line", { x1: el.x1, y1: el.y1, x2: el.x1 + 70, y2: el.y1 + 50, stroke: c(el), strokeWidth: sw(el) })
-] }));
-registerRenderer("wedge", (el) => {
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx2("polygon", { points: `0,0 ${dx},0 ${dx},${dy}`, fill: "#f1f5f9", stroke: c(el), strokeWidth: sw(el), strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ jsx2(
-      "text",
-      {
-        x: dx * 0.6,
-        y: dy * 0.3,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: c(el),
-        fontSize: 20,
-        fontFamily: "serif",
-        fontWeight: "bold",
-        children: String(el.label)
-      }
-    ) : null
-  ] });
-});
-registerRenderer("dimension", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const w = Math.max(1, sw(el) - 0.5);
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx2("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: w, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ jsx2("polygon", { points: `0,0 10,-5 10,5`, fill: c(el) }),
-    /* @__PURE__ */ jsx2("polygon", { points: `${d},0 ${d - 10},-5 ${d - 10},5`, fill: c(el) }),
-    el.label ? /* @__PURE__ */ jsx2("text", { x: d / 2, y: -10, textAnchor: "middle", fill: c(el), fontSize: 18, fontFamily: "serif", fontStyle: "italic", fontWeight: "bold", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("arc", (el) => {
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  const d = Math.hypot(dx, dy);
-  const angleDegVal = Math.atan2(dy, dx) * 180 / Math.PI;
-  const R = Math.min(d, 40);
-  const sweepFlag = dy > 0 ? 1 : 0;
-  const startX = R;
-  const startY = 0;
-  const endX = R * Math.cos(angleDegVal * Math.PI / 180);
-  const endY = R * Math.sin(angleDegVal * Math.PI / 180);
-  const midAngle = angleDegVal / 2;
-  const textDist = R + 15;
-  const tx = textDist * Math.cos(midAngle * Math.PI / 180);
-  const ty = textDist * Math.sin(midAngle * Math.PI / 180);
-  const refLen = Math.max(d, 50);
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx2("line", { x1: 0, y1: 0, x2: refLen, y2: 0, stroke: c(el), strokeWidth: 1.5, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ jsx2("path", { d: `M ${startX} ${startY} A ${R} ${R} 0 0 ${sweepFlag} ${endX} ${endY}`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
-    el.label ? /* @__PURE__ */ jsx2(
-      "text",
-      {
-        x: tx,
-        y: ty,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: c(el),
-        fontSize: 16,
-        fontFamily: "serif",
-        fontStyle: "italic",
-        fontWeight: "bold",
-        children: String(el.label)
-      }
-    ) : null
-  ] });
-});
-registerRenderer("nucleus", (el) => {
-  const fs = el.fontSize || 18;
-  const stroke2 = c(el);
-  const w = sw(el);
-  return /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx2("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(30)" }),
-    /* @__PURE__ */ jsx2("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(-30)" }),
-    /* @__PURE__ */ jsx2("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(90)" }),
-    /* @__PURE__ */ jsx2("circle", { cx: 0, cy: 0, r: 6, fill: "#ef4444" }),
-    el.label && /* @__PURE__ */ jsx2("text", { x: 0, y: 36, fontSize: fs, fill: stroke2, textAnchor: "middle", children: String(el.label) })
-  ] });
-});
-["cone", "curved_wedge", "incline", "container", "hinge"].forEach(
-  (t) => registerRenderer(t, (el) => {
-    const d = distance(el.x1, el.y1, el.x2, el.y2);
-    const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-    return /* @__PURE__ */ jsx2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ jsx2("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el) }) });
-  })
-);
-["semicircle", "quarter_circle", "axes"].forEach(
-  (t) => registerRenderer(t, (el) => {
-    const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-    return /* @__PURE__ */ jsx2("rect", { x: b.minX, y: b.minY, width: b.width, height: b.height, fill: "none", stroke: c(el), strokeWidth: sw(el) });
-  })
-);
-
-// src/core/renderers/magnetism.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var c2 = (el) => el.color || "#0f172a";
-var sw2 = (el) => el.strokeWidth || 2;
-var fontSizeOf = (el) => el.fontSize || 18;
-var dashOf = (el) => el.lineStyle === "dashed" || el.type === "dashed_line" ? "6 6" : el.lineStyle === "dotted" ? "2 4" : void 0;
-registerRenderer("b_region_in", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const minX = b.minX;
-  const maxX = b.maxX;
-  const minY = b.minY;
-  const maxY = b.maxY;
-  const midX = (minX + maxX) / 2;
-  const spacing = 40;
-  const markR = 6;
-  const marks = [];
-  for (let px = minX + spacing / 2; px <= maxX; px += spacing) {
-    for (let py = minY + spacing / 2; py <= maxY; py += spacing) {
-      marks.push(
-        /* @__PURE__ */ jsxs3("g", { transform: `translate(${px}, ${py})`, children: [
-          /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r: markR, fill: "none", stroke: c2(el), strokeWidth: sw2(el) * 0.75 }),
-          /* @__PURE__ */ jsx3("line", { x1: -markR * 0.7, y1: -markR * 0.7, x2: markR * 0.7, y2: markR * 0.7, stroke: c2(el), strokeWidth: sw2(el) * 0.75 }),
-          /* @__PURE__ */ jsx3("line", { x1: markR * 0.7, y1: -markR * 0.7, x2: -markR * 0.7, y2: markR * 0.7, stroke: c2(el), strokeWidth: sw2(el) * 0.75 })
-        ] }, `${px}-${py}`)
-      );
-    }
-  }
-  return /* @__PURE__ */ jsxs3("g", { children: [
-    /* @__PURE__ */ jsx3("rect", { x: minX, y: minY, width: b.width, height: b.height, fill: c2(el), stroke: c2(el), strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.1 }),
-    marks,
-    el.label ? /* @__PURE__ */ jsx3("text", { x: midX, y: minY - 10, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("b_region_out", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const minX = b.minX;
-  const maxX = b.maxX;
-  const minY = b.minY;
-  const maxY = b.maxY;
-  const midX = (minX + maxX) / 2;
-  const spacing = 40;
-  const markR = 6;
-  const marks = [];
-  for (let px = minX + spacing / 2; px <= maxX; px += spacing) {
-    for (let py = minY + spacing / 2; py <= maxY; py += spacing) {
-      marks.push(
-        /* @__PURE__ */ jsxs3("g", { transform: `translate(${px}, ${py})`, children: [
-          /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r: markR, fill: "none", stroke: c2(el), strokeWidth: sw2(el) * 0.75 }),
-          /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r: 2, fill: c2(el) })
-        ] }, `${px}-${py}`)
-      );
-    }
-  }
-  return /* @__PURE__ */ jsxs3("g", { children: [
-    /* @__PURE__ */ jsx3("rect", { x: minX, y: minY, width: b.width, height: b.height, fill: c2(el), stroke: c2(el), strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.1 }),
-    marks,
-    el.label ? /* @__PURE__ */ jsx3("text", { x: midX, y: minY - 10, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("current_wire", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const mid = d / 2;
-  const flip = angle > 90 || angle <= -90;
-  return /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx3("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c2(el), strokeWidth: sw2(el), strokeDasharray: dashOf(el), strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx3("polygon", { points: `${mid + 8},0 ${mid - 6},-7 ${mid - 6},7`, fill: c2(el) }),
-    el.label ? /* @__PURE__ */ jsx3(
-      "text",
-      {
-        x: mid,
-        y: -15,
-        fontSize: fontSizeOf(el),
-        fill: c2(el),
-        textAnchor: "middle",
-        fontStyle: "italic",
-        transform: flip ? `rotate(180, ${mid}, -15)` : void 0,
-        children: String(el.label)
-      }
-    ) : null
-  ] });
-});
-registerRenderer("bar_magnet", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const magW = Math.max(20, sw2(el) * 10);
-  const flipLabel = angle > 90 || angle <= -90;
-  return /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx3("rect", { x: 0, y: -magW / 2, width: d / 2, height: magW, fill: "#ef4444", stroke: c2(el), strokeWidth: 1 }),
-    /* @__PURE__ */ jsx3("rect", { x: d / 2, y: -magW / 2, width: d / 2, height: magW, fill: "#3b82f6", stroke: c2(el), strokeWidth: 1 }),
-    /* @__PURE__ */ jsx3(
-      "text",
-      {
-        x: d / 4,
-        y: 0,
-        fill: "white",
-        fontSize: magW * 0.6,
-        fontWeight: "bold",
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        transform: flipLabel ? `rotate(180, ${d / 4}, 0)` : void 0,
-        children: "N"
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "text",
-      {
-        x: d * 0.75,
-        y: 0,
-        fill: "white",
-        fontSize: magW * 0.6,
-        fontWeight: "bold",
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        transform: flipLabel ? `rotate(180, ${d * 0.75}, 0)` : void 0,
-        children: "S"
-      }
-    ),
-    el.label ? /* @__PURE__ */ jsx3(
-      "text",
-      {
-        x: d / 2,
-        y: -magW / 2 - 10,
-        fill: c2(el),
-        fontSize: fontSizeOf(el),
-        textAnchor: "middle",
-        transform: flipLabel ? `rotate(180, ${d / 2}, ${-magW / 2 - 10})` : void 0,
-        children: String(el.label)
-      }
-    ) : null
-  ] });
-});
-registerRenderer("coil", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const coils = Math.max(Math.floor(d / 15), 1);
-  let dPath = "M 0 0 ";
-  for (let i = 1; i <= coils; i++) {
-    dPath += `C ${i * (d / coils) - d / (coils * 2)} -15, ${i * (d / coils)} 20, ${i * (d / coils)} 0 `;
-  }
-  const flip = angle > 90 || angle <= -90;
-  return /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx3("path", { d: dPath, fill: "none", stroke: c2(el), strokeWidth: sw2(el), strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ jsx3(
-      "text",
-      {
-        x: d / 2,
-        y: -20,
-        fontSize: fontSizeOf(el),
-        fill: c2(el),
-        textAnchor: "middle",
-        transform: flip ? `rotate(180, ${d / 2}, -20)` : void 0,
-        children: String(el.label)
-      }
-    ) : null
-  ] });
-});
-registerRenderer("meter", (el) => {
-  const r = Math.max(16, sw2(el) * 5);
-  const label = String(el.label || "G");
-  return /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r, fill: "white", stroke: c2(el), strokeWidth: sw2(el) }),
-    /* @__PURE__ */ jsx3("text", { x: 0, y: 0, fontSize: fontSizeOf(el), fill: c2(el), fontWeight: "bold", textAnchor: "middle", dominantBaseline: "central", children: label })
-  ] });
-});
-registerRenderer("ac_source", (el) => {
-  const r = Math.max(16, sw2(el) * 5);
-  return /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r, fill: "white", stroke: c2(el), strokeWidth: sw2(el) }),
-    /* @__PURE__ */ jsx3(
-      "path",
-      {
-        d: `M ${-r * 0.6} 0 Q ${-r * 0.3} ${-r * 0.6} 0 0 T ${r * 0.6} 0`,
-        fill: "none",
-        stroke: c2(el),
-        strokeWidth: sw2(el) * 0.8
-      }
-    ),
-    el.label ? /* @__PURE__ */ jsx3("text", { x: 0, y: r + 18, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("bezier", (el) => {
-  const { x1, y1, x2, y2 } = el;
-  const cps = el.cps?.length ? el.cps : [{ x: (x1 + x2) / 2, y: Math.min(y1, y2) - 50 }];
-  const cp0 = cps[0];
-  const dPath = `M ${x1} ${y1} Q ${cp0.x} ${cp0.y} ${x2} ${y2}`;
-  const labelX = 0.25 * x1 + 0.5 * cp0.x + 0.25 * x2;
-  const labelY = 0.25 * y1 + 0.5 * cp0.y + 0.25 * y2;
-  const angleRad = Math.atan2(y2 - y1, x2 - x1);
-  const showArrow = Boolean(el.showArrow);
-  return /* @__PURE__ */ jsxs3("g", { children: [
-    /* @__PURE__ */ jsx3("path", { d: dPath, fill: "none", stroke: "transparent", strokeWidth: 24, strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx3("path", { d: dPath, fill: "none", stroke: c2(el), strokeWidth: sw2(el), strokeDasharray: dashOf(el), strokeLinecap: "round", strokeLinejoin: "round" }),
-    showArrow ? /* @__PURE__ */ jsx3("g", { transform: `translate(${labelX}, ${labelY}) rotate(${angleRad * 180 / Math.PI})`, children: /* @__PURE__ */ jsx3("polygon", { points: "6,0 -6,-5 -6,5", fill: c2(el) }) }) : null,
-    el.label ? /* @__PURE__ */ jsx3("text", { x: labelX, y: labelY - 14, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-
-// src/core/renderers/graph.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var colorOf2 = (el) => el.color || "#0f172a";
-var strokeOf2 = (el) => el.strokeWidth || 2;
-var fontOf2 = (el) => el.fontSize || 16;
-var dashOf2 = (el) => {
-  if (el.lineStyle === "dashed" || el.type === "dashed_line" || el.type === "dashed") return "6 6";
-  if (el.lineStyle === "dotted") return "2 4";
-  return void 0;
-};
-var op = (ctx) => ctx?.isGhost ? 0.5 : 1;
-registerRenderer("axes", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midX = (minX + maxX) / 2;
-  const midY = (minY + maxY) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  if (maxX - minX <= 1 && maxY - minY <= 1) {
-    const cx = el.x1;
-    const cy = el.y1;
-    const arm = 40;
-    const fs = fontOf2(el);
-    return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-      /* @__PURE__ */ jsx4("line", { x1: cx, y1: cy, x2: cx + arm, y2: cy, stroke: c7, strokeWidth: sw7 }),
-      /* @__PURE__ */ jsx4("polygon", { points: `${cx + arm},${cy} ${cx + arm - 8},${cy - 5} ${cx + arm - 8},${cy + 5}`, fill: c7 }),
-      /* @__PURE__ */ jsx4(
-        "text",
-        {
-          x: cx + arm + 10,
-          y: cy,
-          dominantBaseline: "central",
-          textAnchor: "middle",
-          fill: c7,
-          fontSize: fs,
-          fontFamily: "serif",
-          fontStyle: "italic",
-          children: "x"
-        }
-      ),
-      /* @__PURE__ */ jsx4("line", { x1: cx, y1: cy, x2: cx, y2: cy - arm, stroke: c7, strokeWidth: sw7 }),
-      /* @__PURE__ */ jsx4("polygon", { points: `${cx},${cy - arm} ${cx - 5},${cy - arm + 8} ${cx + 5},${cy - arm + 8}`, fill: c7 }),
-      /* @__PURE__ */ jsx4(
-        "text",
-        {
-          x: cx,
-          y: cy - arm - 12,
-          dominantBaseline: "central",
-          textAnchor: "middle",
-          fill: c7,
-          fontSize: fs,
-          fontFamily: "serif",
-          fontStyle: "italic",
-          children: "y"
-        }
-      ),
-      /* @__PURE__ */ jsx4("circle", { cx, cy, r: 2, fill: c7 })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsxs4("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ jsx4("line", { x1: midX, y1: minY, x2: midX, y2: maxY, stroke: c7, strokeWidth: sw7, strokeDasharray: dash, opacity: 0.8 }),
-      /* @__PURE__ */ jsx4("line", { x1: minX, y1: midY, x2: maxX, y2: midY, stroke: c7, strokeWidth: sw7, strokeDasharray: dash, opacity: 0.8 }),
-      /* @__PURE__ */ jsx4("polygon", { points: `${maxX},${midY} ${maxX - 10},${midY - 5} ${maxX - 10},${midY + 5}`, fill: c7, opacity: 0.8 }),
-      /* @__PURE__ */ jsx4("polygon", { points: `${midX},${minY} ${midX - 5},${minY + 10} ${midX + 5},${minY + 10}`, fill: c7, opacity: 0.8 })
-    ] })
-  ] });
-});
-registerRenderer("circle", (el, ctx) => {
-  const r = distance(el.x1, el.y1, el.x2, el.y2);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("circle", { cx: el.x1, cy: el.y1, r, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash, pointerEvents: "none" }),
-    /* @__PURE__ */ jsx4("circle", { cx: el.x1, cy: el.y1, r, fill: "transparent", stroke: "transparent", strokeWidth: 20 })
-  ] });
-});
-registerRenderer("ellipse", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midX = (minX + maxX) / 2;
-  const midY = (minY + maxY) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsx4("ellipse", { cx: midX, cy: midY, rx: w / 2, ry: h / 2, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash, pointerEvents: "none" })
-  ] });
-});
-registerRenderer("rectangle", (el, ctx) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: b.minX, y: b.minY, width: b.width, height: b.height, fill: "transparent" }),
-    /* @__PURE__ */ jsx4(
-      "rect",
-      {
-        x: b.minX,
-        y: b.minY,
-        width: b.width,
-        height: b.height,
-        fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
-        strokeDasharray: dash,
-        strokeLinejoin: "round",
-        pointerEvents: "none"
-      }
-    )
-  ] });
-});
-registerRenderer("angle", (el, ctx) => {
-  const { x1, y1, x2, y2 } = el;
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  const dist = Math.hypot(dx, dy);
-  const minX = Math.min(x1, x2);
-  const maxX = Math.max(x1, x2);
-  const minY = Math.min(y1, y2);
-  const maxY = Math.max(y1, y2);
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  const fs = fontOf2(el);
-  const angleRad = Math.atan2(dy, dx);
-  const r = dist;
-  const arcR = Math.min(r * 0.4, 40);
-  const hDir = dx >= 0 ? 1 : -1;
-  const baseA = hDir === 1 ? 0 : Math.PI;
-  let diff = angleRad - baseA;
-  diff = Math.atan2(Math.sin(diff), Math.cos(diff));
-  const midA = baseA + diff / 2;
-  const sweepFlag = diff > 0 ? 1 : 0;
-  const arcStartX = x1 + arcR * Math.cos(baseA);
-  const arcStartY = y1 + arcR * Math.sin(baseA);
-  const arcEndX = x1 + arcR * Math.cos(angleRad);
-  const arcEndY = y1 + arcR * Math.sin(angleRad);
-  const deg = angleRad * 180 / Math.PI;
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsxs4("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ jsx4("line", { x1, y1, x2: x1 + dx, y2: y1, stroke: c7, strokeWidth: sw7, strokeDasharray: "4 4", opacity: 0.6 }),
-      /* @__PURE__ */ jsx4("line", { x1, y1, x2, y2, stroke: c7, strokeWidth: sw7, strokeLinecap: "round", strokeDasharray: dash }),
-      /* @__PURE__ */ jsx4("g", { transform: `translate(${x2}, ${y2}) rotate(${deg})`, children: /* @__PURE__ */ jsx4("polygon", { points: "0,0 -12,-6 -12,6", fill: c7 }) }),
-      dist > 20 && /* @__PURE__ */ jsx4(
-        "path",
-        {
-          d: `M ${arcStartX} ${arcStartY} A ${arcR} ${arcR} 0 0 ${sweepFlag} ${arcEndX} ${arcEndY}`,
-          fill: "none",
-          stroke: c7,
-          strokeWidth: sw7
-        }
-      ),
-      el.label && /* @__PURE__ */ jsx4(
-        "text",
-        {
-          x: x1 + (arcR + 16) * Math.cos(midA),
-          y: y1 + (arcR + 16) * Math.sin(midA),
-          fontSize: fs,
-          fill: c7,
-          fontFamily: "serif",
-          fontStyle: "italic",
-          dominantBaseline: "central",
-          textAnchor: "middle",
-          children: String(el.label)
-        }
-      )
-    ] })
-  ] });
-});
-registerRenderer("parabola_v", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midX = (minX + maxX) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const cpY = 2 * el.y1 - el.y2;
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: `M ${minX} ${el.y2} Q ${midX} ${cpY} ${maxX} ${el.y2}`,
-        fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
-        strokeDasharray: dash,
-        pointerEvents: "none"
-      }
-    )
-  ] });
-});
-registerRenderer("parabola_h", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midY = (minY + maxY) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const cpX = 2 * el.x1 - el.x2;
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: `M ${el.x2} ${minY} Q ${cpX} ${midY} ${el.x2} ${maxY}`,
-        fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
-        strokeDasharray: dash,
-        pointerEvents: "none"
-      }
-    )
-  ] });
-});
-registerRenderer("hyperbola", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midX = (minX + maxX) / 2;
-  const midY = (minY + maxY) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsxs4("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ jsx4("path", { d: `M ${minX} ${minY} Q ${midX} ${midY} ${minX} ${maxY}`, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      /* @__PURE__ */ jsx4("path", { d: `M ${maxX} ${minY} Q ${midX} ${midY} ${maxX} ${maxY}`, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash })
-    ] })
-  ] });
-});
-registerRenderer("modulus", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midX = (minX + maxX) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsx4(
-      "polyline",
-      {
-        points: `${minX},${minY} ${midX},${maxY} ${maxX},${minY}`,
-        fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeDasharray: dash,
-        pointerEvents: "none"
-      }
-    )
-  ] });
-});
-registerRenderer("exponential", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midX = (minX + maxX) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: `M ${minX} ${maxY} Q ${midX + w * 0.2} ${maxY} ${maxX} ${minY}`,
-        fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
-        strokeDasharray: dash,
-        pointerEvents: "none"
-      }
-    )
-  ] });
-});
-registerRenderer("logarithmic", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midY = (minY + maxY) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: `M ${minX} ${maxY} Q ${minX} ${midY - h * 0.2} ${maxX} ${minY}`,
-        fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
-        strokeDasharray: dash,
-        pointerEvents: "none"
-      }
-    )
-  ] });
-});
-registerRenderer("sine_wave", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midX = (minX + maxX) / 2;
-  const midY = (minY + maxY) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const s = w / 4;
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsx4(
-      "path",
-      {
-        d: `M ${minX} ${midY} Q ${minX + s / 2} ${minY}, ${minX + s} ${midY} T ${minX + 2 * s} ${midY} T ${minX + 3 * s} ${midY} T ${maxX} ${midY}`,
-        fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        strokeDasharray: dash,
-        pointerEvents: "none"
-      }
-    )
-  ] });
-});
-registerRenderer("step_function", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  const stepsCount = 4;
-  const stepW = w / stepsCount;
-  const stepH = h / stepsCount;
-  const steps = [];
-  for (let i = 0; i < stepsCount; i++) {
-    const curX = minX + i * stepW;
-    const curY = maxY - i * stepH;
-    const nextX = curX + stepW;
-    steps.push(
-      /* @__PURE__ */ jsxs4("g", { children: [
-        /* @__PURE__ */ jsx4("line", { x1: curX, y1: curY, x2: nextX, y2: curY, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-        /* @__PURE__ */ jsx4("circle", { cx: curX, cy: curY, r: sw7 * 1.5, fill: c7 }),
-        /* @__PURE__ */ jsx4("circle", { cx: nextX, cy: curY, r: sw7 * 1.5, fill: "white", stroke: c7, strokeWidth: sw7 * 0.75 })
-      ] }, i)
-    );
-  }
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsx4("g", { pointerEvents: "none", children: steps })
-  ] });
-});
-registerRenderer("shaded_area", (el, ctx) => {
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const midX = (minX + maxX) / 2;
-  const w = Math.max(1, maxX - minX);
-  const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
-  const dash = dashOf2(el);
-  return /* @__PURE__ */ jsxs4("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ jsx4("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ jsxs4("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ jsx4(
-        "path",
-        {
-          d: `M ${minX} ${maxY} L ${minX} ${minY + h * 0.3} Q ${midX} ${minY} ${maxX} ${minY + h * 0.3} L ${maxX} ${maxY} Z`,
-          fill: c7,
-          opacity: 0.2
-        }
-      ),
-      /* @__PURE__ */ jsx4("path", { d: `M ${minX} ${minY + h * 0.3} Q ${midX} ${minY} ${maxX} ${minY + h * 0.3}`, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash })
-    ] })
-  ] });
-});
-
-// src/core/renderers/waveOscillation.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var c3 = (el) => el.color || "#0f172a";
-var sw3 = (el) => el.strokeWidth || 2;
-var font = (el) => el.fontSize || 18;
-registerRenderer("mass_box", (el) => {
-  const size = el.size || 30;
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx5(
-      "rect",
-      {
-        x: -size / 2,
-        y: -size / 2,
-        width: size,
-        height: size,
-        fill: color,
-        fillOpacity: 0.2,
-        stroke: color,
-        strokeWidth,
-        rx: 4
-      }
-    ),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: 0, y: 0, dominantBaseline: "central", textAnchor: "middle", fontSize, fill: color, fontWeight: "bold", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("tuning_fork", (el) => {
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  const w = Math.max(3, strokeWidth);
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx5(
-      "path",
-      {
-        d: "M -10 -20 L -10 0 Q -10 10 0 10 Q 10 10 10 0 L 10 -20",
-        fill: "none",
-        stroke: color,
-        strokeWidth: w,
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx5("line", { x1: "0", y1: "10", x2: "0", y2: "30", stroke: color, strokeWidth: Math.max(4, strokeWidth), strokeLinecap: "round" }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: 0, y: 45, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("speaker", (el) => {
-  const color = c3(el);
-  const fontSize = font(el);
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx5("polygon", { points: "-10,-15 5,-25 5,25 -10,15", fill: color }),
-    /* @__PURE__ */ jsx5("rect", { x: "-20", y: "-15", width: "10", height: "30", fill: color }),
-    /* @__PURE__ */ jsx5("path", { d: "M 12 -10 Q 18 0 12 10 M 18 -20 Q 28 0 18 20", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round" }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: 0, y: 40, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("wavefronts", (el) => {
-  const rings = el.rings || 5;
-  const vRatio = el.velocityRatio ?? 0;
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  const circles = [];
-  for (let i = 1; i <= rings; i++) {
-    const r = i * 20;
-    const cx = vRatio * r;
-    circles.push(
-      /* @__PURE__ */ jsx5(
-        "circle",
-        {
-          cx,
-          cy: 0,
-          r,
-          fill: "none",
-          stroke: color,
-          strokeWidth,
-          opacity: 1 - i / rings * 0.5
-        },
-        i
-      )
-    );
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx5("circle", { cx: 0, cy: 0, r: 4, fill: color }),
-    circles,
-    el.label ? /* @__PURE__ */ jsx5("text", { x: 0, y: rings * 20 + 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("pendulum", (el) => {
-  const size = el.size || 15;
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  const theta = Math.atan2(el.x2 - el.x1, el.y2 - el.y1);
-  const thetaDeg = theta * (180 / Math.PI);
-  const l = Math.hypot(el.x2 - el.x1, el.y2 - el.y1);
-  const arcR = Math.min(40, l * 0.5);
-  const arcX = Math.sin(theta) * arcR;
-  const arcY = Math.cos(theta) * arcR;
-  const arcFlag = theta > 0 ? 0 : 1;
-  const showF = el.showForces;
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: -20, y1: 0, x2: 20, y2: 0, stroke: color, strokeWidth: 2 }),
-    /* @__PURE__ */ jsx5("line", { x1: -15, y1: 0, x2: -10, y2: -5, stroke: color }),
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: 5, y2: -5, stroke: color }),
-    /* @__PURE__ */ jsx5("line", { x1: 15, y1: 0, x2: 20, y2: -5, stroke: color }),
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: 0, y2: l + 20, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    Math.abs(theta) > 0.05 ? /* @__PURE__ */ jsx5(
-      "path",
-      {
-        d: `M 0 ${arcR} A ${arcR} ${arcR} 0 0 ${arcFlag} ${arcX} ${arcY}`,
-        fill: "none",
-        stroke: color,
-        strokeWidth: 1.5
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs5("g", { transform: `rotate(${-thetaDeg})`, children: [
-      /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: 0, y2: l, stroke: color, strokeWidth }),
-      /* @__PURE__ */ jsx5("circle", { cx: 0, cy: l, r: size, fill: color, stroke: "#fff", strokeWidth: 2 }),
-      showF ? /* @__PURE__ */ jsxs5("g", { transform: `translate(0, ${l})`, children: [
-        /* @__PURE__ */ jsxs5("g", { transform: `rotate(${thetaDeg})`, children: [
-          /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: 0, y2: 40, stroke: "#ef4444", strokeWidth: 2 }),
-          /* @__PURE__ */ jsx5("polygon", { points: "0,45 -4,37 4,37", fill: "#ef4444" }),
-          /* @__PURE__ */ jsx5("text", { x: 10, y: 40, fontSize: 12, fill: "#ef4444", children: "F_g" })
-        ] }),
-        /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: 0, y2: -40, stroke: "#3b82f6", strokeWidth: 2 }),
-        /* @__PURE__ */ jsx5("polygon", { points: "0,-45 -4,-37 4,-37", fill: "#3b82f6" }),
-        /* @__PURE__ */ jsx5("text", { x: 10, y: -35, fontSize: 12, fill: "#3b82f6", children: "T" }),
-        /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: -35 * Math.sin(theta), y2: 0, stroke: "#10b981", strokeWidth: 2 }),
-        /* @__PURE__ */ jsx5(
-          "polygon",
-          {
-            points: `${-40 * Math.sin(theta)},0 ${-32 * Math.sin(theta)},-4 ${-32 * Math.sin(theta)},4`,
-            fill: "#10b981"
-          }
-        ),
-        /* @__PURE__ */ jsx5("text", { x: -45 * Math.sin(theta), y: -10, fontSize: 12, fill: "#10b981", children: "F_g sin(\u03B8)" })
-      ] }) : null,
-      el.label ? /* @__PURE__ */ jsx5("text", { x: 0, y: l + size + 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-    ] })
-  ] });
-});
-registerRenderer("phasor", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  const showProj = el.showProjection;
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("circle", { cx: 0, cy: 0, r: dist, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("line", { x1: -dist - 10, y1: 0, x2: dist + 10, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: -dist - 10, x2: 0, y2: dist + 10, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth }),
-    /* @__PURE__ */ jsx5("polygon", { points: `${dist},0 ${dist - 12},-6 ${dist - 12},6`, fill: color }),
-    showProj ? /* @__PURE__ */ jsxs5("g", { transform: `rotate(${-angle})`, children: [
-      /* @__PURE__ */ jsx5("line", { x1: dx, y1: dy, x2: dx, y2: 0, stroke: "#ef4444", strokeWidth: 1, strokeDasharray: "4 4" }),
-      /* @__PURE__ */ jsx5("line", { x1: dx, y1: dy, x2: 0, y2: dy, stroke: "#3b82f6", strokeWidth: 1, strokeDasharray: "4 4" }),
-      /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dx, y2: 0, stroke: "#ef4444", strokeWidth: 2 }),
-      /* @__PURE__ */ jsx5("polygon", { points: `${dx},0 ${dx > 0 ? dx - 8 : dx + 8},-4 ${dx > 0 ? dx - 8 : dx + 8},4`, fill: "#ef4444" }),
-      /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: 0, y2: dy, stroke: "#3b82f6", strokeWidth: 2 }),
-      /* @__PURE__ */ jsx5("polygon", { points: `0,${dy} -4,${dy > 0 ? dy - 8 : dy + 8} 4,${dy > 0 ? dy - 8 : dy + 8}`, fill: "#3b82f6" })
-    ] }) : null,
-    /* @__PURE__ */ jsx5(
-      "path",
-      {
-        d: `M ${dist * 0.3} 0 A ${dist * 0.3} ${dist * 0.3} 0 0 0 ${dist * 0.3 * Math.cos(-angle * Math.PI / 180)} ${dist * 0.3 * Math.sin(-angle * Math.PI / 180)}`,
-        fill: "none",
-        stroke: color,
-        strokeWidth: 1.5,
-        transform: `rotate(${-angle})`
-      }
-    ),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("sine_wave", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const amp = el.amplitude || 40;
-  const loops = el.loops || 2;
-  const wl = dist / (loops / 2);
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  let d = "M 0 0";
-  const step = Math.max(1, dist / 100);
-  for (let i = 0; i <= dist; i += step) {
-    d += ` L ${i} ${-amp * Math.sin(i / wl * 2 * Math.PI)}`;
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("standing_wave", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const amp = el.amplitude || 40;
-  const loops = el.loops || 3;
-  const wl = dist / (loops / 2);
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  let d1 = "M 0 0";
-  let d2 = "M 0 0";
-  const step = Math.max(1, dist / 100);
-  for (let i = 0; i <= dist; i += step) {
-    const y = amp * Math.sin(i / wl * 2 * Math.PI);
-    d1 += ` L ${i} ${-y}`;
-    d2 += ` L ${i} ${y}`;
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("path", { d: d1, fill: color, fillOpacity: 0.1, stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx5("path", { d: d2, fill: "none", stroke: color, strokeWidth, strokeDasharray: "4 4", strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("shm_graph", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const amp = el.amplitude || 40;
-  const loops = el.loops || 1;
-  const wl = dist / loops;
-  const gType = el.graphType || "x";
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  let dX = `M 0 ${-amp}`;
-  let dV = "M 0 0";
-  let dA = `M 0 ${amp}`;
-  const step = Math.max(1, dist / 100);
-  for (let i = 0; i <= dist; i += step) {
-    const phase = i / wl * 2 * Math.PI;
-    dX += ` L ${i} ${-amp * Math.cos(phase)}`;
-    dV += ` L ${i} ${-amp * 0.8 * -Math.sin(phase)}`;
-    dA += ` L ${i} ${-amp * 0.6 * -Math.cos(phase)}`;
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: -amp * 1.2, x2: 0, y2: amp * 1.2, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    (gType === "x" || gType === "all") && /* @__PURE__ */ jsx5("path", { d: dX, fill: "none", stroke: "#3b82f6", strokeWidth, strokeLinejoin: "round" }),
-    (gType === "v" || gType === "all") && /* @__PURE__ */ jsx5("path", { d: dV, fill: "none", stroke: "#ef4444", strokeWidth, strokeLinejoin: "round" }),
-    (gType === "a" || gType === "all") && /* @__PURE__ */ jsx5("path", { d: dA, fill: "none", stroke: "#10b981", strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("energy_graph", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const amp = el.amplitude || 50;
-  const loops = el.loops || 1;
-  const wl = dist / loops;
-  const dom = el.domain || "time";
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  let dU = "M 0 0";
-  let dK = `M 0 ${-amp}`;
-  const step = Math.max(1, dist / 100);
-  if (dom === "time") {
-    dU = `M 0 ${-amp}`;
-    dK = "M 0 0";
-    for (let i = 0; i <= dist; i += step) {
-      const phase = i / wl * 2 * Math.PI;
-      dU += ` L ${i} ${-amp * Math.pow(Math.cos(phase), 2)}`;
-      dK += ` L ${i} ${-amp * Math.pow(Math.sin(phase), 2)}`;
-    }
-  } else {
-    for (let i = 0; i <= dist; i += step) {
-      const xNorm = 2 * (i / dist) - 1;
-      const uVal = amp * xNorm * xNorm;
-      dU += ` L ${i} ${-uVal}`;
-      dK += ` L ${i} ${-(amp - uVal)}`;
-    }
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: -amp, x2: dist, y2: -amp, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("path", { d: dU, fill: "none", stroke: "#10b981", strokeWidth, strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx5("path", { d: dK, fill: "none", stroke: "#ef4444", strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("strobe_shm", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const amp = el.amplitude || 40;
-  const loops = el.loops || 1;
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  const rows = 10;
-  const pts = [];
-  const circles = [];
-  const lines = [];
-  for (let i = 0; i <= rows; i++) {
-    const t = i / rows;
-    const cx = amp * Math.cos(t * 2 * Math.PI * loops);
-    const cy = t * dist;
-    pts.push(`${cx},${cy}`);
-    circles.push(/* @__PURE__ */ jsx5("circle", { cx, cy, r: strokeWidth * 2, fill: color }, `c${i}`));
-    lines.push(
-      /* @__PURE__ */ jsx5("line", { x1: -amp - 20, y1: cy, x2: amp + 20, y2: cy, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.3 }, `l${i}`)
-    );
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    lines,
-    /* @__PURE__ */ jsx5("polyline", { points: pts.join(" "), fill: "none", stroke: color, strokeWidth: 1, opacity: 0.4 }),
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: 0, y2: dist, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    circles,
-    el.label ? /* @__PURE__ */ jsx5("text", { x: 0, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("torsion_pendulum", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth }),
-    /* @__PURE__ */ jsx5("ellipse", { cx: dist, cy: 0, rx: 40, ry: 15, fill: color, fillOpacity: 0.2, stroke: color, strokeWidth }),
-    /* @__PURE__ */ jsx5("line", { x1: dist, y1: 0, x2: dist + 40, y2: 0, stroke: color, strokeWidth, strokeDasharray: "2 2" }),
-    /* @__PURE__ */ jsx5("line", { x1: dist, y1: 0, x2: dist + 30, y2: 20, stroke: "#ef4444", strokeWidth }),
-    /* @__PURE__ */ jsx5("path", { d: `M ${dist + 20} 0 A 20 7.5 0 0 1 ${dist + 15} 10`, fill: "none", stroke: "#ef4444", strokeWidth: 1.5 }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("vane_liquid", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  const beakerW = Math.max(40, dist * 0.4);
-  const beakerH = Math.max(40, dist * 0.5);
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth }),
-    /* @__PURE__ */ jsx5("line", { x1: dist, y1: -beakerW * 0.3, x2: dist, y2: beakerW * 0.3, stroke: color, strokeWidth: strokeWidth * 1.5, strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx5(
-      "path",
-      {
-        d: `M ${dist - beakerH} ${-beakerW / 2} L ${dist + 10} ${-beakerW / 2} L ${dist + 10} ${beakerW / 2} L ${dist - beakerH} ${beakerW / 2}`,
-        fill: "none",
-        stroke: color,
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx5(
-      "rect",
-      {
-        x: dist - beakerH + 2,
-        y: -beakerW / 2 + 2,
-        width: beakerH + 8,
-        height: beakerW - 4,
-        fill: "#38bdf8",
-        fillOpacity: 0.3
-      }
-    ),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: -beakerW / 2 - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("wave_pulse", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const amp = el.amplitude || 50;
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  const mid = dist / 2;
-  const spread = dist / 6;
-  let d = "M 0 0";
-  const step = Math.max(1, dist / 50);
-  for (let i = 0; i <= dist; i += step) {
-    const y = amp * Math.exp(-Math.pow(i - mid, 2) / (2 * spread * spread));
-    d += ` L ${i} ${-y}`;
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx5("path", { d, fill: color, fillOpacity: 0.1, stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: mid, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("damped_wave", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const amp = el.amplitude || 50;
-  const damp = el.damping || 0.015;
-  const freq = el.frequency || 10;
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  let d = `M 0 ${-amp}`;
-  let env1 = `M 0 ${-amp}`;
-  let env2 = `M 0 ${amp}`;
-  const step = Math.max(1, dist / 200);
-  for (let i = 0; i <= dist; i += step) {
-    const envY = amp * Math.exp(-damp * i);
-    const y = envY * Math.cos(i / dist * freq * 2 * Math.PI);
-    d += ` L ${i} ${-y}`;
-    env1 += ` L ${i} ${-envY}`;
-    env2 += ` L ${i} ${envY}`;
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ jsx5("path", { d: env1, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("path", { d: env2, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("beats_graph", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const amp = el.amplitude || 30;
-  const freq = el.frequency || 20;
-  const beatF = el.beatFreq || 2;
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  let d = "M 0 0";
-  let env1 = "M 0 0";
-  let env2 = "M 0 0";
-  const step = Math.max(1, dist / 200);
-  for (let i = 0; i <= dist; i += step) {
-    const env = amp * Math.cos(i / dist * beatF * Math.PI);
-    const y = env * Math.sin(i / dist * freq * 2 * Math.PI);
-    d += ` L ${i} ${-y}`;
-    env1 += ` L ${i} ${-Math.abs(env)}`;
-    env2 += ` L ${i} ${Math.abs(env)}`;
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ jsx5("path", { d: env1, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "2 4", opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("path", { d: env2, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "2 4", opacity: 0.5 }),
-    /* @__PURE__ */ jsx5("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: -amp - 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("mach_cone", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const M = el.machNumber || 2;
-  const coneAngle = Math.asin(1 / Math.max(1.01, M));
-  const h = dist;
-  const r = h * Math.tan(coneAngle);
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: h, y2: 0, stroke: color, strokeWidth: 1, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ jsx5("line", { x1: h, y1: 0, x2: 0, y2: -r, stroke: color, strokeWidth }),
-    /* @__PURE__ */ jsx5("line", { x1: h, y1: 0, x2: 0, y2: r, stroke: color, strokeWidth }),
-    /* @__PURE__ */ jsx5("circle", { cx: h, cy: 0, r: 4, fill: color }),
-    [0.2, 0.5, 0.8].map((t) => /* @__PURE__ */ jsx5("circle", { cx: h * t, cy: 0, r: (1 - t) * r, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.6 }, t)),
-    el.label ? /* @__PURE__ */ jsx5("text", { x: h / 2, y: r + 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("wall", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  const hashes = [];
-  const numHashes = Math.max(2, Math.floor(dist / 10));
-  for (let j = 0; j <= numHashes; j++) {
-    const i = j / numHashes * dist;
-    hashes.push(/* @__PURE__ */ jsx5("line", { x1: i, y1: 0, x2: i - 8, y2: -12, stroke: color, strokeWidth: 1 }, j));
-  }
-  return /* @__PURE__ */ jsxs5("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth }),
-    hashes,
-    el.label ? /* @__PURE__ */ jsx5("text", { x: dist / 2, y: 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-
-// src/core/renderers/mechanical.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var c4 = (el) => el.color || "#0f172a";
-var sw4 = (el) => el.strokeWidth || 2;
-var font2 = (el) => el.fontSize || 18;
-registerRenderer("string", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ jsx6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c4(el), strokeWidth: sw4(el), strokeLinecap: "round" }) });
-});
-registerRenderer("surface", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const hatchCount = Math.max(0, Math.floor(d / 12));
-  const hatches = [];
-  for (let i = 0; i <= hatchCount; i++) {
-    hatches.push(/* @__PURE__ */ jsx6("line", { x1: i * 12, y1: 0, x2: i * 12 - 8, y2: 12, stroke: c4(el), strokeWidth: 1.5 }, i));
-  }
-  return /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c4(el), strokeWidth: sw4(el) + 0.5, strokeLinecap: "round" }),
-    hatches
-  ] });
-});
-var rotOf = (el) => el.rotation || 0;
-registerRenderer("block", (el) => {
-  const w = Math.abs(el.x2 - el.x1);
-  const h = Math.abs(el.y2 - el.y1);
-  const cx = (el.x1 + el.x2) / 2;
-  const cy = (el.y1 + el.y2) / 2;
-  const rot = rotOf(el);
-  return /* @__PURE__ */ jsxs6("g", { transform: `translate(${cx}, ${cy}) rotate(${rot})`, children: [
-    /* @__PURE__ */ jsx6("rect", { x: -w / 2, y: -h / 2, width: w, height: h, fill: "#f1f5f9", stroke: c4(el), strokeWidth: sw4(el) }),
-    el.label ? /* @__PURE__ */ jsx6(
-      "text",
-      {
-        x: 0,
-        y: el.value ? -6 : 0,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: c4(el),
-        fontSize: 18,
-        fontFamily: "serif",
-        fontWeight: "bold",
-        children: String(el.label)
-      }
-    ) : null,
-    el.value ? /* @__PURE__ */ jsx6(
-      "text",
-      {
-        x: 0,
-        y: el.label ? 10 : 0,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: "#4b5563",
-        fontSize: 14,
-        fontFamily: "sans-serif",
-        children: String(el.value)
-      }
-    ) : null
-  ] });
-});
-registerRenderer("cart", (el) => {
-  const w = Math.abs(el.x2 - el.x1);
-  const h = Math.abs(el.y2 - el.y1);
-  const cx = (el.x1 + el.x2) / 2;
-  const cy = (el.y1 + el.y2) / 2;
-  const rot = rotOf(el);
-  const wheelR = Math.min(w * 0.15, h * 0.25, 12);
-  return /* @__PURE__ */ jsxs6("g", { transform: `translate(${cx}, ${cy}) rotate(${rot})`, children: [
-    /* @__PURE__ */ jsx6("rect", { x: -w / 2, y: -h / 2, width: w, height: h - wheelR, fill: "#f1f5f9", stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ jsx6("circle", { cx: -w / 2 + wheelR * 1.5, cy: h / 2 - wheelR, r: wheelR, fill: "#cbd5e1", stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ jsx6("circle", { cx: w / 2 - wheelR * 1.5, cy: h / 2 - wheelR, r: wheelR, fill: "#cbd5e1", stroke: c4(el), strokeWidth: sw4(el) }),
-    el.label ? /* @__PURE__ */ jsx6(
-      "text",
-      {
-        x: 0,
-        y: el.value ? -8 : -2,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: c4(el),
-        fontSize: 18,
-        fontFamily: "serif",
-        fontWeight: "bold",
-        children: String(el.label)
-      }
-    ) : null,
-    el.value ? /* @__PURE__ */ jsx6(
-      "text",
-      {
-        x: 0,
-        y: el.label ? 8 : -2,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: "#4b5563",
-        fontSize: 14,
-        fontFamily: "sans-serif",
-        children: String(el.value)
-      }
-    ) : null
-  ] });
-});
-registerRenderer("particle", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const r = Math.max(5, d);
-  return /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx6("circle", { cx: 0, cy: 0, r, fill: c4(el) }),
-    el.label ? /* @__PURE__ */ jsx6("text", { x: 0, y: -r - 12, dominantBaseline: "central", textAnchor: "middle", fill: c4(el), fontSize: font2(el), fontFamily: "serif", fontWeight: "bold", children: String(el.label) }) : null,
-    el.value ? /* @__PURE__ */ jsx6("text", { x: 0, y: r + 12, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: 14, fontFamily: "sans-serif", children: String(el.value) }) : null
-  ] });
-});
-registerRenderer("disk", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const r = Math.max(10, d);
-  return /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx6("circle", { cx: 0, cy: 0, r, fill: "#e2e8f0", stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: r, y2: 0, stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ jsx6("circle", { cx: 0, cy: 0, r: 3, fill: c4(el) }),
-    el.label ? /* @__PURE__ */ jsx6("text", { x: 0, y: -r - 12, dominantBaseline: "central", textAnchor: "middle", fill: c4(el), fontSize: font2(el), fontFamily: "serif", fontWeight: "bold", children: String(el.label) }) : null,
-    el.value ? /* @__PURE__ */ jsx6("text", { x: 0, y: r + 12, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: 14, fontFamily: "sans-serif", children: String(el.value) }) : null
-  ] });
-});
-registerRenderer("com", (el) => /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-  /* @__PURE__ */ jsx6("circle", { cx: 0, cy: 0, r: 10, fill: "none", stroke: c4(el), strokeWidth: sw4(el) }),
-  /* @__PURE__ */ jsx6("path", { d: "M 0 -10 A 10 10 0 0 1 10 0 L 0 0 Z", fill: c4(el) }),
-  /* @__PURE__ */ jsx6("path", { d: "M 0 10 A 10 10 0 0 1 -10 0 L 0 0 Z", fill: c4(el) })
-] }));
-registerRenderer("pivot", (el) => /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-  /* @__PURE__ */ jsx6("polygon", { points: "0,0 -12,20 12,20", fill: "#f8fafc", stroke: c4(el), strokeWidth: sw4(el), strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx6("line", { x1: -20, y1: 20, x2: 20, y2: 20, stroke: c4(el), strokeWidth: sw4(el), strokeLinecap: "round" }),
-  /* @__PURE__ */ jsx6("circle", { cx: 0, cy: 0, r: 3, fill: c4(el) })
-] }));
-registerRenderer("pulley", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const r = Math.max(10, d);
-  return /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx6("circle", { cx: 0, cy: 0, r, fill: "#f8fafc", stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ jsx6("circle", { cx: 0, cy: 0, r: 4, fill: c4(el) }),
-    el.label ? /* @__PURE__ */ jsx6("text", { x: 0, y: -r - 12, dominantBaseline: "central", textAnchor: "middle", fill: c4(el), fontSize: font2(el), fontFamily: "serif", fontWeight: "bold", children: String(el.label) }) : null
-  ] });
-});
-
-// src/core/renderers/rotation.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var c5 = (el) => el.color || "#0f172a";
-var sw5 = (el) => el.strokeWidth || 2;
-var font3 = (el) => el.fontSize || 18;
-function generateSpringPath(dist, coils, width2 = 20) {
-  const ccount = Math.max(3, coils ?? Math.floor(dist / 20));
-  const step = dist / ccount;
-  let d = `M 0 0 L ${step * 0.2} 0 `;
-  for (let i = 0; i < ccount; i++) {
-    const startX = i * step;
-    if (i === ccount - 1) {
-      d += `L ${startX + step * 0.25} ${-width2 / 2} L ${startX + step * 0.75} ${width2 / 2} L ${dist} 0 `;
-    } else {
-      d += `L ${startX + step * 0.25} ${-width2 / 2} L ${startX + step * 0.75} ${width2 / 2} L ${startX + step} 0 `;
-    }
-  }
-  return d;
-}
-registerRenderer("point_mass", (el) => {
-  const size = el.size ?? 15;
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: size, fill: c5(el), fillOpacity: 0.8, stroke: c5(el), strokeWidth: 2 }),
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: size * 0.3, fill: "#fff", fillOpacity: 0.5 }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: size + 15, fontSize: font3(el), fill: c5(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("com_indicator", (el) => {
-  const size = el.size ?? 15;
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: size, fill: "none", stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ jsx7("line", { x1: -size * 1.3, y1: 0, x2: size * 1.3, y2: 0, stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ jsx7("line", { x1: 0, y1: -size * 1.3, x2: 0, y2: size * 1.3, stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ jsx7("path", { d: `M 0 0 L ${size} 0 A ${size} ${size} 0 0 0 0 ${-size} Z`, fill: c5(el), fillOpacity: 0.5 }),
-    /* @__PURE__ */ jsx7("path", { d: `M 0 0 L ${-size} 0 A ${size} ${size} 0 0 0 0 ${size} Z`, fill: c5(el), fillOpacity: 0.5 }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: size + 15, fontSize: font3(el), fill: c5(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("pivot", (el) => {
-  const size = el.size ?? 20;
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx7(
-      "polygon",
-      {
-        points: `0,0 ${-size},${size * 1.5} ${size},${size * 1.5}`,
-        fill: "none",
-        stroke: c5(el),
-        strokeWidth: sw5(el)
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      "line",
-      {
-        x1: -size * 1.5,
-        y1: size * 1.5,
-        x2: size * 1.5,
-        y2: size * 1.5,
-        stroke: c5(el),
-        strokeWidth: sw5(el) + 1,
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: sw5(el) * 1.5, fill: c5(el) }),
-    Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx7(
-      "line",
-      {
-        x1: -size + i * size * 0.5,
-        y1: size * 1.5,
-        x2: -size + i * size * 0.5 - 5,
-        y2: size * 1.5 + 8,
-        stroke: c5(el),
-        strokeWidth: 1
-      },
-      i
-    )),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: size * 1.5 + 20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("block_mass", (el) => {
-  const minX = Math.min(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const w = Math.max(1, Math.abs(el.x2 - el.x1));
-  const h = Math.max(1, Math.abs(el.y2 - el.y1));
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ jsx7("rect", { x: 0, y: 0, width: w, height: h, fill: c5(el), fillOpacity: 0.2, stroke: c5(el), strokeWidth: sw5(el), rx: 2 }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: w / 2, y: h / 2, dominantBaseline: "central", textAnchor: "middle", fontSize: font3(el), fill: c5(el), fontWeight: "bold", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("system_boundary", (el) => {
-  const minX = Math.min(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const w = Math.max(1, Math.abs(el.x2 - el.x1));
-  const h = Math.max(1, Math.abs(el.y2 - el.y1));
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ jsx7("rect", { x: 0, y: 0, width: w, height: h, fill: "none", stroke: c5(el), strokeWidth: sw5(el), strokeDasharray: "8 6", rx: 15 }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: w / 2, y: -10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", fontStyle: "italic", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("rocket", (el) => {
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  const dist = Math.hypot(dx, dy);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const minX = Math.min(el.x1, el.x2);
-  const maxX = Math.max(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
-  const w = Math.max(1, maxX - minX);
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx7(
-      "path",
-      {
-        d: `M 0 ${-w / 4} L ${dist * 0.7} ${-w / 4} L ${dist} 0 L ${dist * 0.7} ${w / 4} L 0 ${w / 4} Z`,
-        fill: "none",
-        stroke: c5(el),
-        strokeWidth: sw5(el)
-      }
-    ),
-    /* @__PURE__ */ jsx7("polygon", { points: `0,${-w / 4} ${dist * 0.2},${-w / 4} 0,${-w / 2}`, fill: c5(el), fillOpacity: 0.8 }),
-    /* @__PURE__ */ jsx7("polygon", { points: `0,${w / 4} ${dist * 0.2},${w / 4} 0,${w / 2}`, fill: c5(el), fillOpacity: 0.8 }),
-    /* @__PURE__ */ jsx7("path", { d: `M 0 ${-w / 6} Q ${-dist * 0.3} 0 0 ${w / 6}`, fill: "#f97316", fillOpacity: 0.8 }),
-    /* @__PURE__ */ jsx7("path", { d: `M 0 ${-w / 8} Q ${-dist * 0.5} 0 0 ${w / 8}`, fill: "#ef4444", fillOpacity: 0.6 }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: dist / 2, y: -w / 2 - 10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("dashed_path", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx7("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c5(el), strokeWidth: sw5(el), strokeLinecap: "round", strokeDasharray: "8 6" }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: d / 2, y: -10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("uniform_rod", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const strokeWidth = sw5(el);
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx7("rect", { x: 0, y: -strokeWidth / 2, width: dist, height: strokeWidth, fill: c5(el), rx: strokeWidth / 4 }),
-    /* @__PURE__ */ jsx7("circle", { cx: dist / 2, cy: 0, r: Math.max(2, strokeWidth / 4), fill: "#fff" }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: dist / 2, y: -strokeWidth / 2 - 10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("solid_disk", (el) => {
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  const radius = Math.hypot(dx, dy);
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius, fill: c5(el), fillOpacity: 0.4, stroke: c5(el), strokeWidth: sw5(el) }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("hoop_ring", (el) => {
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  const radius = Math.hypot(dx, dy);
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius, fill: "none", stroke: c5(el), strokeWidth: Math.max(4, sw5(el) * 2) }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("rolling_body", (el) => {
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  const radius = Math.hypot(dx, dy);
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius, fill: c5(el), fillOpacity: 0.1, stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ jsx7("line", { x1: -radius, y1: 0, x2: radius, y2: 0, stroke: c5(el), strokeWidth: 1, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ jsx7("line", { x1: 0, y1: -radius, x2: 0, y2: radius, stroke: c5(el), strokeWidth: 1, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: 3, fill: c5(el) }),
-    el.showVelocity ? /* @__PURE__ */ jsxs7("g", { children: [
-      /* @__PURE__ */ jsx7("line", { x1: 0, y1: 0, x2: radius * 1.5, y2: 0, stroke: "#ef4444", strokeWidth: 2 }),
-      /* @__PURE__ */ jsx7("polygon", { points: `${radius * 1.5},0 ${radius * 1.5 - 8},-4 ${radius * 1.5 - 8},4`, fill: "#ef4444" }),
-      /* @__PURE__ */ jsx7("text", { x: radius * 1.5 + 10, y: 5, fill: "#ef4444", fontSize: 14, fontStyle: "italic", children: "v" })
-    ] }) : null,
-    el.showOmega ? /* @__PURE__ */ jsxs7("g", { transform: `translate(0, ${-radius * 1.2})`, children: [
-      /* @__PURE__ */ jsx7("path", { d: `M ${-radius * 0.4} 0 A ${radius * 0.4} ${radius * 0.4} 0 0 1 ${radius * 0.4} 0`, fill: "none", stroke: "#10b981", strokeWidth: 2 }),
-      /* @__PURE__ */ jsx7("polygon", { points: `${radius * 0.4},0 ${radius * 0.4 - 4},-6 ${radius * 0.4 + 4},-6`, fill: "#10b981" }),
-      /* @__PURE__ */ jsx7("text", { x: 0, y: -10, fill: "#10b981", fontSize: 14, fontStyle: "italic", textAnchor: "middle", children: "\u03C9" })
-    ] }) : null,
-    el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("inclined_wedge", (el) => {
-  const { x1, y1, x2, y2 } = el;
-  const dx = x2 - x1;
-  const dy = y2 - y1;
-  const angle = Math.atan2(dy, dx) * (180 / Math.PI);
-  return /* @__PURE__ */ jsxs7("g", { children: [
-    /* @__PURE__ */ jsx7(
-      "polygon",
-      {
-        points: `${x1},${y1} ${x1},${y2} ${x2},${y2}`,
-        fill: c5(el),
-        fillOpacity: 0.1,
-        stroke: c5(el),
-        strokeWidth: sw5(el),
-        strokeLinejoin: "round"
-      }
-    ),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: (x1 + x2) / 2, y: y2 - 10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null,
-    Math.abs(x2 - x1) > 20 && Math.abs(y2 - y1) > 20 ? /* @__PURE__ */ jsx7(
-      "path",
-      {
-        d: `M ${x2 > x1 ? x2 - 20 : x2 + 20} ${y2} A 20 20 0 0 ${x2 > x1 ? 0 : 1} ${x2 > x1 ? x2 - 20 * Math.cos(angle * Math.PI / 180) : x2 + 20 * Math.cos(angle * Math.PI / 180)} ${y2 - 20 * Math.sin(Math.abs(angle) * Math.PI / 180)}`,
-        fill: "none",
-        stroke: c5(el),
-        strokeWidth: 1
-      }
-    ) : null
-  ] });
-});
-registerRenderer("pulley", (el) => {
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  const radius = Math.hypot(dx, dy);
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx7("path", { d: `M 0 0 L 0 ${-radius * 1.5}`, fill: "none", stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ jsx7("line", { x1: -radius * 0.8, y1: -radius * 1.5, x2: radius * 0.8, y2: -radius * 1.5, stroke: c5(el), strokeWidth: sw5(el) }),
-    Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx7(
-      "line",
-      {
-        x1: -radius * 0.8 + i * radius * 0.4,
-        y1: -radius * 1.5,
-        x2: -radius * 0.8 + i * radius * 0.4 + 5,
-        y2: -radius * 1.5 - 5,
-        stroke: c5(el),
-        strokeWidth: 1
-      },
-      i
-    )),
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius, fill: "#fff", stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius * 0.8, fill: "none", stroke: c5(el), strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: 3, fill: c5(el) }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: -radius * 1.5 - 15, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("curve_arrow", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx7("path", { d: `M 0 0 Q ${dist / 2} ${-dist * 0.5} ${dist} 0`, fill: "none", stroke: c5(el), strokeWidth: sw5(el), strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx7("polygon", { points: `${dist},0 ${dist - 8},-6 ${dist - 4},-1`, fill: c5(el), transform: `rotate(20 ${dist} 0)` }),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: dist / 2, y: -dist * 0.3, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("spring", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx7(
-      "path",
-      {
-        d: generateSpringPath(dist, el.coils),
-        fill: "none",
-        stroke: c5(el),
-        strokeWidth: sw5(el),
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    el.label ? /* @__PURE__ */ jsx7("text", { x: dist / 2, y: -20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-
-// src/core/renderers/circuit.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var drawColor = (el, ctx) => ctx?.isSelected ? "#2563eb" : el.color || "#111827";
-var drawStroke = (el, ctx) => ctx?.isSelected ? 2.5 : el.strokeWidth || 2;
-registerRenderer("wire", (el, ctx) => /* @__PURE__ */ jsxs8("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
-  /* @__PURE__ */ jsx8(
-    "line",
-    {
-      x1: el.x1,
-      y1: el.y1,
-      x2: el.x2,
-      y2: el.y2,
-      stroke: "transparent",
-      strokeWidth: 20,
-      strokeLinecap: "round"
-    }
-  ),
-  /* @__PURE__ */ jsx8(
-    "line",
-    {
-      x1: el.x1,
-      y1: el.y1,
-      x2: el.x2,
-      y2: el.y2,
-      stroke: drawColor(el, ctx),
-      strokeWidth: drawStroke(el, ctx),
-      strokeLinecap: "round",
-      pointerEvents: "none"
-    }
-  )
-] }));
-var rotated = (el, inner, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const a = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  const mx = (el.x1 + el.x2) / 2;
-  const my = (el.y1 + el.y2) / 2;
-  let nx = -dy / (d || 1);
-  let ny = dx / (d || 1);
-  if (ny > 0) {
-    nx = -nx;
-    ny = -ny;
-  }
-  const labelDist = 20;
-  return /* @__PURE__ */ jsxs8("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ jsx8("line", { x1: el.x1, y1: el.y1, x2: el.x2, y2: el.y2, stroke: "transparent", strokeWidth: 20 }),
-    /* @__PURE__ */ jsx8("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: /* @__PURE__ */ jsx8("g", { children: inner }) }),
-    el.label && /* @__PURE__ */ jsx8("text", { x: mx + nx * labelDist, y: my + ny * labelDist, dominantBaseline: "central", textAnchor: "middle", fill: drawColor(el, ctx), fontSize: "16", fontFamily: "serif", fontWeight: "bold", children: String(el.label) }),
-    el.value && /* @__PURE__ */ jsx8("text", { x: mx - nx * labelDist, y: my - ny * labelDist, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: "14", fontFamily: "sans-serif", children: String(el.value) })
-  ] });
-};
-registerRenderer("resistor", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const start = d / 2 - 15;
-  return rotated(el, /* @__PURE__ */ jsx8("path", { d: `M 0 0 L ${start} 0 l 2.5 -8 l 5 16 l 5 -16 l 5 16 l 5 -16 l 5 16 l 2.5 -8 L ${d} 0`, fill: "none", stroke: drawColor(el, ctx), strokeWidth: drawStroke(el, ctx), strokeLinejoin: "bevel" }), ctx);
-});
-registerRenderer("capacitor", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const cx = d / 2;
-  return rotated(el, /* @__PURE__ */ jsx8("path", { d: `M 0 0 L ${cx - 4} 0 M ${cx - 4} -12 L ${cx - 4} 12 M ${cx + 4} -12 L ${cx + 4} 12 M ${cx + 4} 0 L ${d} 0`, fill: "none", stroke: drawColor(el, ctx), strokeWidth: drawStroke(el, ctx) }), ctx);
-});
-registerRenderer("inductor", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const s = d / 2 - 15;
-  return rotated(el, /* @__PURE__ */ jsx8("path", { d: `M 0 0 L ${s} 0 A 5 5 0 0 0 ${s + 10} 0 A 5 5 0 0 0 ${s + 20} 0 A 5 5 0 0 0 ${s + 30} 0 L ${d} 0`, fill: "none", stroke: drawColor(el, ctx), strokeWidth: drawStroke(el, ctx) }), ctx);
-});
-registerRenderer("diode", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const cx = d / 2;
-  return rotated(el, /* @__PURE__ */ jsx8("path", { d: `M 0 0 L ${cx - 8} 0 M ${cx - 8} -8 L ${cx - 8} 8 L ${cx + 8} 0 Z M ${cx + 8} -8 L ${cx + 8} 8 M ${cx + 8} 0 L ${d} 0`, fill: "none", stroke: drawColor(el, ctx), strokeWidth: drawStroke(el, ctx) }), ctx);
-});
-registerRenderer("battery", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const cx = d / 2;
-  return rotated(el, /* @__PURE__ */ jsxs8(Fragment, { children: [
-    /* @__PURE__ */ jsx8("path", { d: `M 0 0 L ${cx - 4} 0 M ${cx - 4} -16 L ${cx - 4} 16 M ${cx + 4} -8 L ${cx + 4} 8 M ${cx + 4} 0 L ${d} 0`, fill: "none", stroke: drawColor(el, ctx), strokeWidth: drawStroke(el, ctx) }),
-    /* @__PURE__ */ jsx8("line", { x1: cx + 4, y1: -8, x2: cx + 4, y2: 8, stroke: drawColor(el, ctx), strokeWidth: drawStroke(el, ctx) + 2 }),
-    /* @__PURE__ */ jsx8("text", { x: cx - 12, y: -12, fontSize: "12", fill: drawColor(el, ctx), textAnchor: "middle", children: "+" })
-  ] }), ctx);
-});
-["meter_v", "meter_a"].forEach(
-  (t) => registerRenderer(t, (el, ctx) => {
-    const d = distance(el.x1, el.y1, el.x2, el.y2);
-    const cx = d / 2;
-    const letter = t === "meter_v" ? "V" : "A";
-    return rotated(el, /* @__PURE__ */ jsxs8(Fragment, { children: [
-      /* @__PURE__ */ jsx8("path", { d: `M 0 0 L ${cx - 14} 0 M ${cx + 14} 0 L ${d} 0`, fill: "none", stroke: drawColor(el, ctx), strokeWidth: drawStroke(el, ctx) }),
-      /* @__PURE__ */ jsx8("circle", { cx, cy: 0, r: 14, fill: "#f8f9fa", stroke: drawColor(el, ctx), strokeWidth: drawStroke(el, ctx) }),
-      /* @__PURE__ */ jsx8("text", { x: cx, y: 0, textAnchor: "middle", dominantBaseline: "central", fill: drawColor(el, ctx), fontSize: "14", fontWeight: "bold", children: letter })
-    ] }), ctx);
-  })
-);
-registerRenderer("ground", (el, ctx) => /* @__PURE__ */ jsx8("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: /* @__PURE__ */ jsx8("path", { d: "M 0 0 L 0 15 M -12 15 L 12 15 M -8 20 L 8 20 M -4 25 L 4 25", fill: "none", stroke: drawColor(el, ctx), strokeWidth: drawStroke(el, ctx) }) }));
-
-// src/core/renderers/circuitAutoNodes.ts
-var getCircuitAutoNodes = (elements) => {
-  const pointMap = {};
-  elements.forEach((el) => {
-    if (el.type !== "wire") return;
-    const p1 = `${el.x1},${el.y1}`;
-    const p2 = `${el.x2},${el.y2}`;
-    pointMap[p1] = (pointMap[p1] || 0) + 1;
-    pointMap[p2] = (pointMap[p2] || 0) + 1;
-  });
-  return Object.entries(pointMap).filter(([, count]) => count > 2).map(([pt]) => pt.split(",").map(Number));
-};
-
-// src/core/renderers/thermo.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
-var c6 = (el) => el.color || "#0f172a";
-var sw6 = (el) => el.strokeWidth || 2;
-var font4 = (el) => el.fontSize || 18;
-var seededRandom = (seed) => {
-  const x = Math.sin(seed) * 1e4;
-  return x - Math.floor(x);
-};
-var strokeDashFromLineStyle = (el) => {
-  if (el.lineStyle === "dashed") return "6 6";
-  if (el.lineStyle === "dotted") return "2 4";
-  return void 0;
-};
-registerRenderer("pv_axes", (el) => {
-  const minX = Math.min(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const w = Math.max(1, Math.abs(el.x2 - el.x1));
-  const h = Math.max(1, Math.abs(el.y2 - el.y1));
-  const yLabel = String(el.yLabel ?? "P");
-  const xLabel = String(el.xLabel ?? "V");
-  const color = c6(el);
-  const strokeWidth = sw6(el);
-  const fontSize = font4(el);
-  return /* @__PURE__ */ jsxs9("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ jsx9("line", { x1: 0, y1: 0, x2: 0, y2: h, stroke: color, strokeWidth }),
-    /* @__PURE__ */ jsx9("polygon", { points: "0,0 -5,10 5,10", fill: color }),
-    /* @__PURE__ */ jsx9("text", { x: -15, y: 10, fontSize, fill: color, fontWeight: "bold", children: yLabel }),
-    /* @__PURE__ */ jsx9("line", { x1: 0, y1: h, x2: w, y2: h, stroke: color, strokeWidth }),
-    /* @__PURE__ */ jsx9("polygon", { points: `${w},${h} ${w - 10},${h - 5} ${w - 10},${h + 5}`, fill: color }),
-    /* @__PURE__ */ jsx9("text", { x: w - 10, y: h + 20, fontSize, fill: color, fontWeight: "bold", children: xLabel }),
-    /* @__PURE__ */ jsx9("text", { x: -10, y: h + 15, fontSize: 12, fill: color, children: "0" }),
-    el.label ? /* @__PURE__ */ jsx9("text", { x: w / 2, y: -10, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("piston_cylinder", (el) => {
-  const minX = Math.min(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const w = Math.max(1, Math.abs(el.x2 - el.x1));
-  const h = Math.max(1, Math.abs(el.y2 - el.y1));
-  const compression = el.compression ?? 0.5;
-  const pistonY = h * compression;
-  const color = c6(el);
-  const strokeWidth = sw6(el);
-  const particles = [];
-  const numParticles = 40;
-  for (let i = 0; i < numParticles; i++) {
-    const px = seededRandom(Number(el.id) + i) * (w - 10) + 5;
-    const py = pistonY + 10 + seededRandom(Number(el.id) + i * 100) * (h - pistonY - 15);
-    particles.push(/* @__PURE__ */ jsx9("circle", { cx: px, cy: py, r: "2", fill: "#94a3b8" }, i));
-  }
-  return /* @__PURE__ */ jsxs9("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ jsx9(
-      "polyline",
-      {
-        points: `0,0 0,${h} ${w},${h} ${w},0`,
-        fill: "#f8fafc",
-        stroke: color,
-        strokeWidth,
-        strokeLinecap: "square",
-        strokeLinejoin: "miter"
-      }
-    ),
-    particles,
-    /* @__PURE__ */ jsxs9("g", { transform: `translate(0, ${pistonY})`, children: [
-      /* @__PURE__ */ jsx9("rect", { x: "2", y: "0", width: w - 4, height: "12", fill: "#64748b", rx: "2" }),
-      /* @__PURE__ */ jsx9("line", { x1: w / 2, y1: "0", x2: w / 2, y2: "-40", stroke: "#64748b", strokeWidth: "4" }),
-      /* @__PURE__ */ jsx9("line", { x1: w / 2 - 15, y1: "-40", x2: w / 2 + 15, y2: "-40", stroke: "#64748b", strokeWidth: "6", strokeLinecap: "round" }),
-      /* @__PURE__ */ jsx9("line", { x1: w / 2, y1: "-50", x2: w / 2, y2: "-42", stroke: "#ef4444", strokeWidth: "2" }),
-      /* @__PURE__ */ jsx9("polygon", { points: `${w / 2},-42 ${w / 2 - 4},-46 ${w / 2 + 4},-46`, fill: "#ef4444" })
-    ] }),
-    el.showHeat ? /* @__PURE__ */ jsxs9("g", { transform: `translate(${w / 2}, ${h + 15})`, children: [
-      /* @__PURE__ */ jsx9("path", { d: "M-10,0 Q-15,-10 -5,-20 Q0,-10 10,-15 Q5,-5 10,0 Z", fill: "#ef4444", opacity: "0.8" }),
-      /* @__PURE__ */ jsx9("path", { d: "M-5,0 Q-8,-6 0,-12 Q2,-5 5,0 Z", fill: "#f59e0b" }),
-      /* @__PURE__ */ jsx9("text", { x: "25", y: "-5", fontSize: "14", fill: "#ef4444", fontWeight: "bold", children: "Q" })
-    ] }) : null,
-    el.label ? /* @__PURE__ */ jsx9("text", { x: w / 2, y: h + (el.showHeat ? 35 : 20), textAnchor: "middle", fill: color, fontSize: font4(el), children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("heat_engine", (el) => {
-  const minX = Math.min(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const w = Math.max(1, Math.abs(el.x2 - el.x1));
-  const h = Math.max(1, Math.abs(el.y2 - el.y1));
-  const isEngine = el.engineType !== "refrigerator";
-  const r = Math.min(w * 0.3, h * 0.2);
-  const color = c6(el);
-  const strokeWidth = sw6(el);
-  const fontSize = font4(el);
-  return /* @__PURE__ */ jsxs9("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ jsx9("rect", { x: 0, y: 0, width: w, height: h * 0.2, fill: "#ef4444", rx: "4" }),
-    /* @__PURE__ */ jsx9("text", { x: w / 2, y: h * 0.1, fontSize, fill: "#fff", textAnchor: "middle", dominantBaseline: "central", children: "T_H" }),
-    /* @__PURE__ */ jsx9("rect", { x: 0, y: h * 0.8, width: w, height: h * 0.2, fill: "#3b82f6", rx: "4" }),
-    /* @__PURE__ */ jsx9("text", { x: w / 2, y: h * 0.9, fontSize, fill: "#fff", textAnchor: "middle", dominantBaseline: "central", children: "T_C" }),
-    /* @__PURE__ */ jsx9("circle", { cx: w / 2, cy: h / 2, r, fill: "#fff", stroke: color, strokeWidth }),
-    /* @__PURE__ */ jsx9(
-      "text",
-      {
-        x: w / 2,
-        y: h / 2,
-        fontSize: fontSize * 1.2,
-        fill: color,
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        fontWeight: "bold",
-        children: isEngine ? "E" : "R"
-      }
-    ),
-    /* @__PURE__ */ jsxs9("g", { strokeWidth: 2, stroke: color, children: [
-      /* @__PURE__ */ jsx9("line", { x1: w / 2, y1: h * 0.2, x2: w / 2, y2: h * 0.5 - r - 5 }),
-      /* @__PURE__ */ jsx9(
-        "polygon",
-        {
-          points: isEngine ? `${w / 2},${h * 0.5 - r - 2} ${w / 2 - 5},${h * 0.5 - r - 10} ${w / 2 + 5},${h * 0.5 - r - 10}` : `${w / 2},${h * 0.2 + 2} ${w / 2 - 5},${h * 0.2 + 10} ${w / 2 + 5},${h * 0.2 + 10}`,
-          fill: color
-        }
-      ),
-      /* @__PURE__ */ jsx9("text", { x: w / 2 + 10, y: h * 0.35, fontSize: 14, fill: color, dominantBaseline: "central", children: "Q_H" }),
-      /* @__PURE__ */ jsx9("line", { x1: w / 2, y1: h * 0.5 + r + 5, x2: w / 2, y2: h * 0.8 }),
-      /* @__PURE__ */ jsx9(
-        "polygon",
-        {
-          points: isEngine ? `${w / 2},${h * 0.8 - 2} ${w / 2 - 5},${h * 0.8 - 10} ${w / 2 + 5},${h * 0.8 - 10}` : `${w / 2},${h * 0.5 + r + 2} ${w / 2 - 5},${h * 0.5 + r + 10} ${w / 2 + 5},${h * 0.5 + r + 10}`,
-          fill: color
-        }
-      ),
-      /* @__PURE__ */ jsx9("text", { x: w / 2 + 10, y: h * 0.65, fontSize: 14, fill: color, dominantBaseline: "central", children: "Q_C" }),
-      /* @__PURE__ */ jsx9(
-        "line",
-        {
-          x1: isEngine ? w / 2 + r + 5 : w,
-          y1: h / 2,
-          x2: isEngine ? w : w / 2 + r + 5,
-          y2: h / 2
-        }
-      ),
-      /* @__PURE__ */ jsx9(
-        "polygon",
-        {
-          points: isEngine ? `${w},${h / 2} ${w - 8},${h / 2 - 5} ${w - 8},${h / 2 + 5}` : `${w / 2 + r + 5},${h / 2} ${w / 2 + r + 13},${h / 2 - 5} ${w / 2 + r + 13},${h / 2 + 5}`,
-          fill: color
-        }
-      ),
-      /* @__PURE__ */ jsx9("text", { x: w * 0.8, y: h / 2 - 15, fontSize: 14, fill: color, textAnchor: "middle", children: "W" })
-    ] }),
-    el.label ? /* @__PURE__ */ jsx9("text", { x: w / 2, y: h + 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("conduction_rod", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const gradId = `grad-rod-${el.id}`;
-  const color = c6(el);
-  const strokeWidth = sw6(el);
-  const fontSize = font4(el);
-  return /* @__PURE__ */ jsxs9("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx9("defs", { children: /* @__PURE__ */ jsxs9("linearGradient", { id: gradId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-      /* @__PURE__ */ jsx9("stop", { offset: "0%", stopColor: "#ef4444" }),
-      /* @__PURE__ */ jsx9("stop", { offset: "100%", stopColor: "#3b82f6" })
-    ] }) }),
-    /* @__PURE__ */ jsx9("rect", { x: 0, y: -20, width: dist, height: 40, fill: `url(#${gradId})`, stroke: color, strokeWidth, rx: "4" }),
-    /* @__PURE__ */ jsxs9("g", { stroke: "#fff", strokeWidth: "2", opacity: 0.6, children: [
-      /* @__PURE__ */ jsx9("line", { x1: dist * 0.2, y1: 0, x2: dist * 0.4, y2: 0 }),
-      /* @__PURE__ */ jsx9("polygon", { points: `${dist * 0.4},0 ${dist * 0.4 - 6},-4 ${dist * 0.4 - 6},4`, fill: "#fff" }),
-      /* @__PURE__ */ jsx9("line", { x1: dist * 0.6, y1: 0, x2: dist * 0.8, y2: 0 }),
-      /* @__PURE__ */ jsx9("polygon", { points: `${dist * 0.8},0 ${dist * 0.8 - 6},-4 ${dist * 0.8 - 6},4`, fill: "#fff" })
-    ] }),
-    /* @__PURE__ */ jsx9("text", { x: 0, y: -30, fontSize, fill: "#ef4444", textAnchor: "middle", fontWeight: "bold", children: "T_H" }),
-    /* @__PURE__ */ jsx9("text", { x: dist, y: -30, fontSize, fill: "#3b82f6", textAnchor: "middle", fontWeight: "bold", children: "T_C" }),
-    el.label ? /* @__PURE__ */ jsx9("text", { x: dist / 2, y: 35, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("thermo_process", (el) => {
-  const pType = el.processType || "isotherm";
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  let pathD = "";
-  if (pType === "isobaric") pathD = `M 0 0 L ${dx} 0`;
-  else if (pType === "isochoric") pathD = `M 0 0 L 0 ${dy}`;
-  else if (pType === "adiabatic") pathD = `M 0 0 Q ${dx * 0.1} ${dy * 0.9} ${dx} ${dy}`;
-  else pathD = `M 0 0 Q ${dx * 0.2} ${dy * 0.8} ${dx} ${dy}`;
-  let midX = dx / 2;
-  let midY = dy / 2;
-  if (pType === "isotherm" || pType === "adiabatic") {
-    const cx = dx * (pType === "adiabatic" ? 0.1 : 0.2);
-    const cy = dy * (pType === "adiabatic" ? 0.9 : 0.8);
-    midX = 0.25 * 0 + 0.5 * cx + 0.25 * dx;
-    midY = 0.25 * 0 + 0.5 * cy + 0.25 * dy;
-  }
-  const arrowAngle = Math.atan2(dy, dx) * 180 / Math.PI;
-  const dash = strokeDashFromLineStyle(el);
-  const color = c6(el);
-  const strokeWidth = sw6(el);
-  const fontSize = font4(el);
-  return /* @__PURE__ */ jsxs9("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx9("path", { d: pathD, fill: "none", stroke: color, strokeWidth, strokeDasharray: dash }),
-    /* @__PURE__ */ jsx9("g", { transform: `translate(${midX}, ${midY}) rotate(${arrowAngle})`, children: /* @__PURE__ */ jsx9("polygon", { points: "0,0 -8,-5 -8,5", fill: color }) }),
-    el.label ? /* @__PURE__ */ jsx9("text", { x: midX + 15, y: midY - 10, fontSize, fill: color, children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("carnot_cycle", (el) => {
-  const minX = Math.min(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const w = Math.max(1, Math.abs(el.x2 - el.x1));
-  const h = Math.max(1, Math.abs(el.y2 - el.y1));
-  const p1 = { x: w * 0.1, y: h * 0.1 };
-  const p2 = { x: w * 0.6, y: h * 0.3 };
-  const p3 = { x: w * 0.9, y: h * 0.9 };
-  const p4 = { x: w * 0.4, y: h * 0.7 };
-  const iso1 = `M ${p1.x} ${p1.y} Q ${w * 0.3} ${h * 0.15} ${p2.x} ${p2.y}`;
-  const ad1 = `Q ${w * 0.7} ${h * 0.6} ${p3.x} ${p3.y}`;
-  const iso2 = `Q ${w * 0.6} ${h * 0.85} ${p4.x} ${p4.y}`;
-  const ad2 = `Q ${w * 0.2} ${h * 0.4} ${p1.x} ${p1.y}`;
-  const color = c6(el);
-  const strokeWidth = sw6(el);
-  const fontSize = font4(el);
-  return /* @__PURE__ */ jsxs9("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ jsx9("path", { d: `${iso1} ${ad1} ${iso2} ${ad2} Z`, fill: color, fillOpacity: 0.1 }),
-    /* @__PURE__ */ jsx9("path", { d: iso1, fill: "none", stroke: "#ef4444", strokeWidth }),
-    /* @__PURE__ */ jsx9("path", { d: `M ${p2.x} ${p2.y} ${ad1}`, fill: "none", stroke: "#64748b", strokeWidth, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ jsx9("path", { d: `M ${p3.x} ${p3.y} ${iso2}`, fill: "none", stroke: "#3b82f6", strokeWidth }),
-    /* @__PURE__ */ jsx9("path", { d: `M ${p4.x} ${p4.y} ${ad2}`, fill: "none", stroke: "#64748b", strokeWidth, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ jsx9("circle", { cx: p1.x, cy: p1.y, r: "3", fill: "#1e293b" }),
-    /* @__PURE__ */ jsx9("circle", { cx: p2.x, cy: p2.y, r: "3", fill: "#1e293b" }),
-    /* @__PURE__ */ jsx9("circle", { cx: p3.x, cy: p3.y, r: "3", fill: "#1e293b" }),
-    /* @__PURE__ */ jsx9("circle", { cx: p4.x, cy: p4.y, r: "3", fill: "#1e293b" }),
-    /* @__PURE__ */ jsx9("text", { x: w * 0.4, y: h * 0.15, fontSize: "14", fill: "#ef4444", fontWeight: "bold", children: "T_H" }),
-    /* @__PURE__ */ jsx9("text", { x: w * 0.6, y: h * 0.95, fontSize: "14", fill: "#3b82f6", fontWeight: "bold", children: "T_C" }),
-    /* @__PURE__ */ jsx9("text", { x: w / 2, y: h / 2 + 5, fontSize: 16, fill: color, textAnchor: "middle", fontWeight: "bold", children: "W" }),
-    el.label ? /* @__PURE__ */ jsx9("text", { x: w / 2, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("maxwell_boltzmann", (el) => {
-  const minX = Math.min(el.x1, el.x2);
-  const minY = Math.min(el.y1, el.y2);
-  const w = Math.max(1, Math.abs(el.x2 - el.x1));
-  const h = Math.max(1, Math.abs(el.y2 - el.y1));
-  const t1 = el.t1 || 300;
-  const t2 = el.t2 || 600;
-  const strokeWidth = sw6(el);
-  const fontSize = font4(el);
-  const color = c6(el);
-  const buildCurve = (temp, peakHeight, strokeCol, dash) => {
-    let d = `M 0 ${h}`;
-    const k = 1 / temp;
-    const vmp = Math.sqrt(2 / k);
-    const xMax = vmp * 3.5;
-    for (let x = 0; x <= w; x += 2) {
-      const v = x / w * xMax;
-      const rawVal = v * v * Math.exp(-k * v * v);
-      const maxRawVal = vmp * vmp * Math.exp(-1);
-      const y = h - rawVal / maxRawVal * peakHeight;
-      d += ` L ${x} ${y}`;
-    }
-    return /* @__PURE__ */ jsx9("path", { d, fill: "none", stroke: strokeCol, strokeWidth, strokeDasharray: dash, strokeLinejoin: "round" });
-  };
-  return /* @__PURE__ */ jsxs9("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ jsx9("line", { x1: 0, y1: 0, x2: 0, y2: h, stroke: "#1e293b", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx9("line", { x1: 0, y1: h, x2: w, y2: h, stroke: "#1e293b", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx9("text", { x: -25, y: h / 2, fontSize: 14, fill: "#1e293b", transform: `rotate(-90, -25, ${h / 2})`, textAnchor: "middle", children: "N(v)" }),
-    /* @__PURE__ */ jsx9("text", { x: w / 2, y: h + 20, fontSize: 14, fill: "#1e293b", textAnchor: "middle", children: "Speed (v)" }),
-    buildCurve(t1, h * 0.8, "#ef4444"),
-    buildCurve(t2, h * 0.5, "#3b82f6", "4 4"),
-    /* @__PURE__ */ jsx9("rect", { x: w - 70, y: 10, width: 10, height: 10, fill: "#ef4444" }),
-    /* @__PURE__ */ jsxs9("text", { x: w - 55, y: 20, fontSize: 12, fill: "#1e293b", children: [
-      "T\u2081 = ",
-      t1,
-      "K"
-    ] }),
-    /* @__PURE__ */ jsx9("rect", { x: w - 70, y: 30, width: 10, height: 10, fill: "#3b82f6" }),
-    /* @__PURE__ */ jsxs9("text", { x: w - 55, y: 40, fontSize: 12, fill: "#1e293b", children: [
-      "T\u2082 = ",
-      t2,
-      "K"
-    ] }),
-    el.label ? /* @__PURE__ */ jsx9("text", { x: w / 2, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("diatomic_gas", (el) => {
-  const color = c6(el);
-  const strokeWidth = sw6(el);
-  const fontSize = font4(el);
-  const showRot = el.showRotations !== false;
-  return /* @__PURE__ */ jsxs9("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx9("circle", { cx: -15, cy: 0, r: 8, fill: color, stroke: "#fff", strokeWidth: 2 }),
-    /* @__PURE__ */ jsx9("circle", { cx: 15, cy: 0, r: 8, fill: color, stroke: "#fff", strokeWidth: 2 }),
-    /* @__PURE__ */ jsx9("line", { x1: -10, y1: 0, x2: 10, y2: 0, stroke: color, strokeWidth: 4 }),
-    showRot ? /* @__PURE__ */ jsxs9("g", { stroke: "#94a3b8", strokeWidth: 1.5, fill: "none", children: [
-      /* @__PURE__ */ jsx9("path", { d: "M -10 -15 A 15 15 0 0 1 10 -15", strokeDasharray: "2 2" }),
-      /* @__PURE__ */ jsx9("polygon", { points: "10,-15 6,-18 6,-12", fill: "#94a3b8" }),
-      /* @__PURE__ */ jsx9("path", { d: "M -25 0 A 25 10 0 0 1 0 10 A 25 10 0 0 1 25 0", strokeDasharray: "2 2" })
-    ] }) : null,
-    el.label ? /* @__PURE__ */ jsx9("text", { x: 0, y: 25, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("random_walk", (el) => {
-  const steps = el.steps || 5;
-  const dist = Math.hypot(el.x2 - el.x1, el.y2 - el.y1);
-  let d = "M 0 0";
-  let curX = 0;
-  let curY = 0;
-  const points = [/* @__PURE__ */ jsx9("circle", { cx: "0", cy: "0", r: "4", fill: "#22c55e" }, "start")];
-  for (let i = 1; i <= steps; i++) {
-    const angle = seededRandom(Number(el.id) + i * 7) * Math.PI * 2;
-    const stepDist = dist / steps * (0.5 + seededRandom(Number(el.id) + i * 13));
-    curX += Math.cos(angle) * stepDist;
-    curY += Math.sin(angle) * stepDist;
-    d += ` L ${curX} ${curY}`;
-    points.push(/* @__PURE__ */ jsx9("circle", { cx: curX, cy: curY, r: i === steps ? 4 : 2, fill: i === steps ? "#ef4444" : c6(el) }, i));
-  }
-  return /* @__PURE__ */ jsxs9("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx9("path", { d, fill: "none", stroke: c6(el), strokeWidth: sw6(el), strokeLinejoin: "round" }),
-    points,
-    el.label ? /* @__PURE__ */ jsx9("text", { x: dist / 2, y: dist / 2, fontSize: font4(el), fill: c6(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-
-// src/core/renderers/chemistry.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
-var colorOf3 = (el, isSelected) => {
-  if (isSelected) return "#0d9488";
-  return el.color || "#111827";
-};
-var strokeOf3 = (el, isSelected) => {
-  const base = el.strokeWidth || 2;
-  return isSelected ? Math.max(3, base) : base;
-};
-var fontOf3 = (el) => el.fontSize || 16;
-var ringPolygonPoints = (sides, radius, startDeg) => Array.from({ length: sides }).map((_, i) => {
-  const angle = (i * 360 / sides + startDeg) * (Math.PI / 180);
-  return `${radius * Math.cos(angle)},${radius * Math.sin(angle)}`;
-}).join(" ");
-registerRenderer("atom", (el, ctx) => /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-  /* @__PURE__ */ jsx10("rect", { x: "-20", y: "-15", width: "40", height: "30", fill: "white", rx: "6" }),
-  /* @__PURE__ */ jsx10(
-    "text",
-    {
-      x: "0",
-      y: "0",
-      dominantBaseline: "central",
-      textAnchor: "middle",
-      fill: colorOf3(el, ctx.isSelected),
-      fontSize: Math.max(18, fontOf3(el)),
-      fontFamily: "sans-serif",
-      fontWeight: "bold",
-      children: String(el.label || "C")
-    }
-  )
-] }));
-registerRenderer("charge_plus", (el, ctx) => {
-  const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
-  const baseSw = el.strokeWidth || 2;
-  const r = Math.max(12, baseSw * 4);
-  return /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx10("circle", { cx: "0", cy: "0", r, fill: "white", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ jsx10("line", { x1: -r / 2, y1: "0", x2: r / 2, y2: "0", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ jsx10("line", { x1: "0", y1: -r / 2, x2: "0", y2: r / 2, stroke: stroke2, strokeWidth: sw7 }),
-    el.label && /* @__PURE__ */ jsx10(
-      "text",
-      {
-        x: "0",
-        y: r + 18,
-        fontSize: fontOf3(el),
-        fill: stroke2,
-        fontFamily: "sans-serif",
-        fontWeight: "bold",
-        textAnchor: "middle",
-        children: String(el.label)
-      }
-    )
-  ] });
-});
-registerRenderer("charge_minus", (el, ctx) => {
-  const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
-  const baseSw = el.strokeWidth || 2;
-  const r = Math.max(12, baseSw * 4);
-  return /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx10("circle", { cx: "0", cy: "0", r, fill: "white", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ jsx10("line", { x1: -r / 2, y1: "0", x2: r / 2, y2: "0", stroke: stroke2, strokeWidth: sw7 }),
-    el.label && /* @__PURE__ */ jsx10(
-      "text",
-      {
-        x: "0",
-        y: r + 18,
-        fontSize: fontOf3(el),
-        fill: stroke2,
-        fontFamily: "sans-serif",
-        fontWeight: "bold",
-        textAnchor: "middle",
-        children: String(el.label)
-      }
-    )
-  ] });
-});
-registerRenderer("radical", (el, ctx) => /* @__PURE__ */ jsx10("circle", { cx: el.x1, cy: el.y1, r: "3.5", fill: colorOf3(el, ctx.isSelected) }));
-registerRenderer("lone_pair", (el, ctx) => /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-  /* @__PURE__ */ jsx10("circle", { cx: "-4", cy: "0", r: "2.5", fill: colorOf3(el, ctx.isSelected) }),
-  /* @__PURE__ */ jsx10("circle", { cx: "4", cy: "0", r: "2.5", fill: colorOf3(el, ctx.isSelected) })
-] }));
-registerRenderer("benzene", (el, ctx) => {
-  const r = 30;
-  const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
-  return /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ jsx10("polygon", { points: ringPolygonPoints(6, r, -30), fill: "white", stroke: stroke2, strokeWidth: sw7, strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx10("circle", { cx: "0", cy: "0", r: r - 10, fill: "none", stroke: stroke2, strokeWidth: sw7 })
-  ] });
-});
-registerRenderer("cyclohexane", (el, ctx) => /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsx10(
-  "polygon",
-  {
-    points: ringPolygonPoints(6, 30, -30),
-    fill: "white",
-    stroke: colorOf3(el, ctx.isSelected),
-    strokeWidth: strokeOf3(el, ctx.isSelected),
-    strokeLinejoin: "round"
-  }
-) }));
-registerRenderer("cyclopentane", (el, ctx) => /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsx10(
-  "polygon",
-  {
-    points: ringPolygonPoints(5, 30, -90),
-    fill: "white",
-    stroke: colorOf3(el, ctx.isSelected),
-    strokeWidth: strokeOf3(el, ctx.isSelected),
-    strokeLinejoin: "round"
-  }
-) }));
-registerRenderer("cyclobutane", (el, ctx) => /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsx10(
-  "polygon",
-  {
-    points: ringPolygonPoints(4, 30, -45),
-    fill: "white",
-    stroke: colorOf3(el, ctx.isSelected),
-    strokeWidth: strokeOf3(el, ctx.isSelected),
-    strokeLinejoin: "round"
-  }
-) }));
-registerRenderer("cyclopropane", (el, ctx) => /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsx10(
-  "polygon",
-  {
-    points: ringPolygonPoints(3, 30, -90),
-    fill: "white",
-    stroke: colorOf3(el, ctx.isSelected),
-    strokeWidth: strokeOf3(el, ctx.isSelected),
-    strokeLinejoin: "round"
-  }
-) }));
-var drawBond = (el, style, isSelected) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const stroke2 = colorOf3(el, isSelected);
-  const sw7 = strokeOf3(el, isSelected);
-  return /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    style === "single" && /* @__PURE__ */ jsx10("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" }),
-    style === "double" && /* @__PURE__ */ jsxs10(Fragment2, { children: [
-      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "-3.5", x2: d, y2: "-3.5", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" }),
-      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "3.5", x2: d, y2: "3.5", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" })
-    ] }),
-    style === "triple" && /* @__PURE__ */ jsxs10(Fragment2, { children: [
-      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "-6", x2: d, y2: "-6", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" }),
-      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" }),
-      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "6", x2: d, y2: "6", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" })
-    ] }),
-    style === "wedge" && /* @__PURE__ */ jsx10("polygon", { points: `0,0 ${d},-5 ${d},5`, fill: stroke2 }),
-    style === "dash" && /* @__PURE__ */ jsx10("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7 + 1, strokeDasharray: "5 5", strokeLinecap: "square" })
-  ] });
-};
-registerRenderer("single_bond", (el, ctx) => drawBond(el, "single", ctx.isSelected));
-registerRenderer("double_bond", (el, ctx) => drawBond(el, "double", ctx.isSelected));
-registerRenderer("triple_bond", (el, ctx) => drawBond(el, "triple", ctx.isSelected));
-registerRenderer("wedge_bond", (el, ctx) => drawBond(el, "wedge", ctx.isSelected));
-registerRenderer("dash_bond", (el, ctx) => drawBond(el, "dash", ctx.isSelected));
-var lineMid = (el) => ({ x: (el.x1 + el.x2) / 2, y: (el.y1 + el.y2) / 2 });
-registerRenderer("reaction_arrow", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
-  const mid = lineMid(el);
-  return /* @__PURE__ */ jsxs10("g", { children: [
-    /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7 }),
-      /* @__PURE__ */ jsx10("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: stroke2 })
-    ] }),
-    el.label && /* @__PURE__ */ jsx10("text", { x: mid.x, y: mid.y - 18, textAnchor: "middle", fill: "#0f766e", fontSize: "14", fontFamily: "sans-serif", fontWeight: "bold", children: String(el.label) }),
-    el.value && /* @__PURE__ */ jsx10("text", { x: mid.x, y: mid.y + 18, textAnchor: "middle", fill: "#4b5563", fontSize: "13", fontFamily: "sans-serif", children: String(el.value) })
-  ] });
-});
-registerRenderer("equilibrium_arrow", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
-  const mid = lineMid(el);
-  return /* @__PURE__ */ jsxs10("g", { children: [
-    /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "-4", x2: d, y2: "-4", stroke: stroke2, strokeWidth: sw7 }),
-      /* @__PURE__ */ jsx10("polygon", { points: `${d},-4 ${d - 10},-10 ${d - 10},-4`, fill: stroke2 }),
-      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "4", x2: d, y2: "4", stroke: stroke2, strokeWidth: sw7 }),
-      /* @__PURE__ */ jsx10("polygon", { points: `0,4 10,4 10,10`, fill: stroke2 })
-    ] }),
-    el.label && /* @__PURE__ */ jsx10("text", { x: mid.x, y: mid.y - 18, textAnchor: "middle", fill: "#0f766e", fontSize: "14", fontFamily: "sans-serif", fontWeight: "bold", children: String(el.label) }),
-    el.value && /* @__PURE__ */ jsx10("text", { x: mid.x, y: mid.y + 18, textAnchor: "middle", fill: "#4b5563", fontSize: "13", fontFamily: "sans-serif", children: String(el.value) })
-  ] });
-});
-registerRenderer("resonance_arrow", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
-  return /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx10("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ jsx10("polygon", { points: `0,0 12,-6 12,6`, fill: stroke2 }),
-    /* @__PURE__ */ jsx10("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: stroke2 })
-  ] });
-});
-registerRenderer("curved_arrow", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const h = d / 3;
-  const arrowAngle = Math.atan2(h, d / 2) * (180 / Math.PI);
-  const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
-  return /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ jsx10("path", { d: `M 0 0 Q ${d / 2} ${-h} ${d} 0`, fill: "none", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ jsx10("g", { transform: `translate(${d}, 0) rotate(${arrowAngle})`, children: /* @__PURE__ */ jsx10("polygon", { points: "0,0 -12,-6 -12,6", fill: stroke2 }) })
-  ] });
-});
-
-// src/core/renderers/electrostatics.tsx
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
-var stroke = (el, selected) => selected ? "#2563eb" : el.color || "#0f172a";
-var width = (el, selected) => selected ? 2.5 : el.strokeWidth || 2;
-var rotated2 = (el, content, selected) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const a = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const dx = el.x2 - el.x1;
-  const dy = el.y2 - el.y1;
-  const mx = (el.x1 + el.x2) / 2;
-  const my = (el.y1 + el.y2) / 2;
-  let nx = -dy / (d || 1);
-  let ny = dx / (d || 1);
-  if (ny > 0) {
-    nx = -nx;
-    ny = -ny;
-  }
-  const labelDist = 18;
-  const c7 = stroke(el, selected);
-  return /* @__PURE__ */ jsxs11("g", { children: [
-    /* @__PURE__ */ jsx11("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: content }),
-    el.label && /* @__PURE__ */ jsx11("text", { x: mx + nx * labelDist, y: my + ny * labelDist, dominantBaseline: "central", textAnchor: "middle", fill: c7, fontSize: 14, fontFamily: "sans-serif", children: String(el.label) })
-  ] });
-};
-registerRenderer("charge_pos", (el, ctx) => {
-  const c7 = ctx.isSelected ? "#2563eb" : "#ef4444";
-  return /* @__PURE__ */ jsxs11("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ jsx11("circle", { cx: "0", cy: "0", r: "10", fill: "#fecaca", stroke: c7, strokeWidth: width(el, ctx.isSelected) }),
-    /* @__PURE__ */ jsx11("line", { x1: "0", y1: "-4", x2: "0", y2: "4", stroke: c7, strokeWidth: 2 }),
-    /* @__PURE__ */ jsx11("line", { x1: "-4", y1: "0", x2: "4", y2: "0", stroke: c7, strokeWidth: 2 }),
-    el.label && /* @__PURE__ */ jsx11("text", { x: 0, y: -16, textAnchor: "middle", fill: c7, fontSize: el.fontSize || 14, children: String(el.label) })
-  ] });
-});
-registerRenderer("charge_neg", (el, ctx) => {
-  const c7 = ctx.isSelected ? "#2563eb" : "#3b82f6";
-  return /* @__PURE__ */ jsxs11("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ jsx11("circle", { cx: "0", cy: "0", r: "10", fill: "#bfdbfe", stroke: c7, strokeWidth: width(el, ctx.isSelected) }),
-    /* @__PURE__ */ jsx11("line", { x1: "-4", y1: "0", x2: "4", y2: "0", stroke: c7, strokeWidth: 2 }),
-    el.label && /* @__PURE__ */ jsx11("text", { x: 0, y: -16, textAnchor: "middle", fill: c7, fontSize: el.fontSize || 14, children: String(el.label) })
-  ] });
-});
-registerRenderer("dipole", (el, ctx) => {
-  const w = width(el, ctx.isSelected);
-  return /* @__PURE__ */ jsxs11("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ jsx11("line", { x1: el.x1, y1: el.y1, x2: el.x2, y2: el.y2, stroke: "#64748b", strokeWidth: w, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ jsx11("circle", { cx: el.x1, cy: el.y1, r: "8", fill: "#fecaca", stroke: ctx.isSelected ? "#2563eb" : "#ef4444", strokeWidth: w }),
-    /* @__PURE__ */ jsx11("circle", { cx: el.x2, cy: el.y2, r: "8", fill: "#bfdbfe", stroke: ctx.isSelected ? "#2563eb" : "#3b82f6", strokeWidth: w }),
-    el.label && /* @__PURE__ */ jsx11("text", { x: (el.x1 + el.x2) / 2, y: el.y1 - 16, textAnchor: "middle", fill: "#475569", fontSize: 14, children: String(el.label) })
-  ] });
-});
-var plateGlyphs = (d, isPos) => {
-  const n = Math.max(2, Math.floor(d / 25));
-  const glyphs = [];
-  for (let i = 0; i <= n; i++) {
-    const pos = i / n * d;
-    glyphs.push(
-      /* @__PURE__ */ jsx11("g", { transform: `translate(${pos}, 0)`, children: isPos ? /* @__PURE__ */ jsx11(Fragment3, { children: /* @__PURE__ */ jsx11("path", { d: "M-4 0 h8 M0 -4 v8", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round" }) }) : /* @__PURE__ */ jsx11("path", { d: "M-4 0 h8", stroke: "#ffffff", strokeWidth: "2", strokeLinecap: "round" }) }, i)
-    );
-  }
-  return glyphs;
-};
-registerRenderer("charged_plate_pos", (el, ctx) => {
-  const c7 = ctx.isSelected ? "#2563eb" : "#ef4444";
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const a = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const sw7 = Math.max(12, el.strokeWidth * 4 || 8);
-  return /* @__PURE__ */ jsxs11("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ jsx11("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c7, strokeWidth: sw7, strokeLinecap: "round" }),
-    plateGlyphs(d, true)
-  ] });
-});
-registerRenderer("charged_plate_neg", (el, ctx) => {
-  const c7 = ctx.isSelected ? "#2563eb" : "#3b82f6";
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const a = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const sw7 = Math.max(12, el.strokeWidth * 4 || 8);
-  return /* @__PURE__ */ jsxs11("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ jsx11("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c7, strokeWidth: sw7, strokeLinecap: "round" }),
-    plateGlyphs(d, false)
-  ] });
-});
-registerRenderer("gaussian_sphere", (el, ctx) => {
-  const r = Math.max(10, distance(el.x1, el.y1, el.x2, el.y2));
-  const c7 = ctx.isSelected ? "#2563eb" : "#10b981";
-  return /* @__PURE__ */ jsxs11("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ jsx11("circle", { cx: el.x1, cy: el.y1, r, fill: "#d1fae5", fillOpacity: 0.35, stroke: c7, strokeWidth: width(el, ctx.isSelected), strokeDasharray: "5 5" }),
-    el.label && /* @__PURE__ */ jsx11("text", { x: el.x1, y: el.y1 - r - 12, textAnchor: "middle", fill: c7, fontSize: 13, children: String(el.label) })
-  ] });
-});
-registerRenderer("gaussian_cylinder", (el, ctx) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const a = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const r = el.curveHeight ?? 40;
-  const capRx = 15;
-  const c7 = ctx.isSelected ? "#2563eb" : "#10b981";
-  const sw7 = width(el, ctx.isSelected);
-  const dash = "6 6";
-  return /* @__PURE__ */ jsxs11("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ jsx11("line", { x1: el.x1, y1: el.y1, x2: el.x2, y2: el.y2, stroke: "transparent", strokeWidth: Math.max(24, r * 2), strokeLinecap: "round" }),
-    /* @__PURE__ */ jsxs11("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: [
-      /* @__PURE__ */ jsx11("line", { x1: 0, y1: -r, x2: d, y2: -r, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      /* @__PURE__ */ jsx11("line", { x1: 0, y1: r, x2: d, y2: r, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      /* @__PURE__ */ jsx11("ellipse", { cx: 0, cy: 0, rx: capRx, ry: r, fill: c7, fillOpacity: 0.05, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      /* @__PURE__ */ jsx11("ellipse", { cx: d, cy: 0, rx: capRx, ry: r, fill: c7, fillOpacity: 0.05, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      el.label && /* @__PURE__ */ jsx11("text", { x: d / 2, y: -r - 10, textAnchor: "middle", fill: c7, fontSize: el.fontSize || 14, children: String(el.label) })
-    ] })
-  ] });
-});
-registerRenderer(
-  "mirror_plane",
-  (el, ctx) => rotated2(
-    el,
-    /* @__PURE__ */ jsxs11(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("line", { x1: 0, y1: -24, x2: 0, y2: 24, stroke: stroke(el, ctx.isSelected), strokeWidth: width(el, ctx.isSelected) }),
-      /* @__PURE__ */ jsx11("line", { x1: 0, y1: -18, x2: -8, y2: -12, stroke: stroke(el, ctx.isSelected), strokeWidth: 1.5 }),
-      /* @__PURE__ */ jsx11("line", { x1: 0, y1: -6, x2: -8, y2: 0, stroke: stroke(el, ctx.isSelected), strokeWidth: 1.5 }),
-      /* @__PURE__ */ jsx11("line", { x1: 0, y1: 6, x2: -8, y2: 12, stroke: stroke(el, ctx.isSelected), strokeWidth: 1.5 }),
-      /* @__PURE__ */ jsx11("line", { x1: 0, y1: 18, x2: -8, y2: 24, stroke: stroke(el, ctx.isSelected), strokeWidth: 1.5 })
-    ] }),
-    ctx.isSelected
-  )
-);
-registerRenderer("energy_level", (el, ctx) => {
-  const d = Math.max(24, distance(el.x1, el.y1, el.x2, el.y2));
-  const c7 = stroke(el, ctx.isSelected);
-  const energyText = el.energy != null ? String(el.energy) : "";
-  return rotated2(
-    el,
-    /* @__PURE__ */ jsxs11(Fragment3, { children: [
-      /* @__PURE__ */ jsx11("line", { x1: 0, y1: -8, x2: d, y2: -8, stroke: c7, strokeWidth: width(el, ctx.isSelected) }),
-      /* @__PURE__ */ jsx11("line", { x1: 0, y1: 8, x2: d, y2: 8, stroke: c7, strokeWidth: width(el, ctx.isSelected) }),
-      energyText && /* @__PURE__ */ jsx11("text", { x: d / 2, y: 22, textAnchor: "middle", fontSize: 10, fill: "#4b5563", children: energyText })
-    ] }),
-    ctx.isSelected
-  );
-});
-
-// src/core/Renderer.tsx
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
-var UnknownElement = ({ x, y, type }) => /* @__PURE__ */ jsxs12("g", { children: [
-  /* @__PURE__ */ jsx12("rect", { x: x - 20, y: y - 12, width: 40, height: 24, fill: "#fee2e2", stroke: "#ef4444" }),
-  /* @__PURE__ */ jsx12("text", { x, y, textAnchor: "middle", dominantBaseline: "central", fontSize: 10, fill: "#991b1b", children: type })
-] });
-var Renderer = ({
-  elements,
-  selectedId,
-  drawing,
-  viewMode = false,
-  showGrid = true,
-  gridSize = GRID_SIZE,
-  className,
-  svgRef,
-  onBackgroundMouseDown,
-  onBackgroundMouseMove,
-  onBackgroundMouseUp,
-  onBackgroundMouseLeave,
-  onElementMouseDown
-}) => {
-  const autoNodes = useMemo(() => getCircuitAutoNodes(elements), [elements]);
-  return /* @__PURE__ */ jsxs12(
-    "svg",
-    {
-      ref: svgRef,
-      className,
-      onMouseDown: onBackgroundMouseDown,
-      onMouseMove: onBackgroundMouseMove,
-      onMouseUp: onBackgroundMouseUp,
-      onMouseLeave: onBackgroundMouseLeave,
-      children: [
-        !viewMode && showGrid && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-          /* @__PURE__ */ jsx12("defs", { children: /* @__PURE__ */ jsx12("pattern", { id: "svg-engine-grid", width: gridSize, height: gridSize, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx12("path", { d: `M ${gridSize} 0 L 0 0 0 ${gridSize}`, fill: "none", stroke: "#e2e8f0", strokeWidth: "1" }) }) }),
-          /* @__PURE__ */ jsx12("rect", { width: "100%", height: "100%", fill: "url(#svg-engine-grid)", pointerEvents: "none" })
-        ] }),
-        elements.map((el) => {
-          const renderer = getRenderer(String(el.type));
-          const content = renderer ? renderer(el, { isSelected: selectedId === el.id, viewMode }) : /* @__PURE__ */ jsx12(UnknownElement, { x: el.x1, y: el.y1, type: String(el.type) });
-          return /* @__PURE__ */ jsx12("g", { onMouseDown: (e) => onElementMouseDown?.(e, el), cursor: viewMode ? "default" : "move", children: content }, String(el.id));
-        }),
-        autoNodes.map(([nx, ny], idx) => /* @__PURE__ */ jsx12("circle", { cx: nx, cy: ny, r: 4, fill: "#111827", pointerEvents: "none" }, `junction-${idx}`)),
-        drawing && (() => {
-          const renderer = getRenderer(String(drawing.type));
-          if (!renderer) return null;
-          return /* @__PURE__ */ jsx12("g", { opacity: 0.5, children: renderer(drawing, { isGhost: true, viewMode }) });
-        })()
-      ]
-    }
-  );
-};
-
-export {
-  GRID_SIZE,
-  snap,
-  distance,
-  angleDeg,
-  getBounds,
-  getMouseCoords,
-  registerRenderer,
-  getRenderer,
-  hasRenderer,
-  Renderer
-};