@codefrydev/svg-engine 0.1.0 → 0.1.2

package/dist/chunk-VCDC4W3X.js

@@ -0,0 +1,3439 @@
+// 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 OPTICS_CHORD_EPS = 1;
+function opticsEffectiveChord(x1, y1, x2, y2) {
+  const d = distance(x1, y1, x2, y2);
+  if (d >= OPTICS_CHORD_EPS) return d;
+  const b = getBounds(x1, y1, x2, y2);
+  return Math.max(12, b.width, b.height);
+}
+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
+  };
+};
+function quadraticChordWorldBounds(x1, y1, x2, y2, curveHeight, pad = 18) {
+  const d = distance(x1, y1, x2, y2);
+  const angleRad = Math.atan2(y2 - y1, x2 - x1);
+  const lx = d / 2;
+  const ly = -curveHeight * 2;
+  const apexX = x1 + lx * Math.cos(angleRad) - ly * Math.sin(angleRad);
+  const apexY = y1 + lx * Math.sin(angleRad) + ly * Math.cos(angleRad);
+  const xs = [x1, x2, apexX];
+  const ys = [y1, y2, apexY];
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  const maxX = Math.max(...xs);
+  const maxY = Math.max(...ys);
+  return paddedBounds(minX, minY, maxX, maxY, pad);
+}
+function paddedBounds(minX, minY, maxX, maxY, pad) {
+  return {
+    x: minX - pad,
+    y: minY - pad,
+    width: maxX - minX + 2 * pad,
+    height: maxY - minY + 2 * pad
+  };
+}
+
+// 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/selectionChrome.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SELECTION_STROKE = "#2563eb";
+var HANDLE_END = "#ef4444";
+var BEZIER_ANCHOR = "#10b981";
+var BEZIER_CP = "#3b82f6";
+function selectionDashRect(x, y, width2, height) {
+  return /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x,
+      y,
+      width: width2,
+      height,
+      fill: "none",
+      stroke: SELECTION_STROKE,
+      strokeWidth: 1,
+      strokeDasharray: "4 4",
+      pointerEvents: "none"
+    }
+  );
+}
+function chordBoundsDashRect(el, padX = 15, padY = 20) {
+  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
+  return selectionDashRect(b.minX - padX, b.minY - padY, b.width + 2 * padX, b.height + 2 * padY);
+}
+function worldChordHitLine(el, strokeWidth = 24) {
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      x1: el.x1,
+      y1: el.y1,
+      x2: el.x2,
+      y2: el.y2,
+      stroke: "transparent",
+      strokeWidth,
+      strokeLinecap: "round"
+    }
+  );
+}
+function endpointHandles(el, ctx) {
+  if (!ctx.isSelected || ctx.viewMode || ctx.isGhost || !ctx.onHandlePointerDown) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: el.x1,
+        cy: el.y1,
+        r: 5,
+        fill: HANDLE_END,
+        cursor: "grab",
+        onMouseDown: (e) => ctx.onHandlePointerDown(e, "start")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: el.x2,
+        cy: el.y2,
+        r: 5,
+        fill: HANDLE_END,
+        cursor: "grab",
+        onMouseDown: (e) => ctx.onHandlePointerDown(e, "end")
+      }
+    )
+  ] });
+}
+function ChordInteractionOverlay({
+  el,
+  ctx,
+  padX = 15,
+  padY = 20,
+  hitWidth = 24
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    worldChordHitLine(el, hitWidth),
+    ctx.isSelected && !ctx.viewMode && !ctx.isGhost ? chordBoundsDashRect(el, padX, padY) : null,
+    endpointHandles(el, ctx)
+  ] });
+}
+function LocalFatPathHit({
+  dPath,
+  strokeWidth = 24,
+  strokeLinecap = "round",
+  strokeLinejoin
+}) {
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: dPath,
+      fill: "none",
+      stroke: "transparent",
+      strokeWidth,
+      strokeLinecap,
+      strokeLinejoin
+    }
+  );
+}
+function OriginHitPlate({
+  ctx,
+  hitHalfSize,
+  selectionHalfSize,
+  children
+}) {
+  const selHalf = selectionHalfSize ?? hitHalfSize + 10;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ctx.isSelected && !ctx.viewMode && !ctx.isGhost ? /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: -selHalf,
+        y: -selHalf,
+        width: 2 * selHalf,
+        height: 2 * selHalf,
+        fill: "none",
+        stroke: SELECTION_STROKE,
+        strokeWidth: 1,
+        strokeDasharray: "4 4",
+        pointerEvents: "none"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("rect", { x: -hitHalfSize, y: -hitHalfSize, width: 2 * hitHalfSize, height: 2 * hitHalfSize, fill: "transparent" }),
+    children
+  ] });
+}
+function bboxInsetSelectionChrome(minX, minY, width2, height, ctx, inset = 10) {
+  if (!ctx.isSelected || ctx.viewMode || ctx.isGhost) return null;
+  return selectionDashRect(minX - inset, minY - inset, width2 + 2 * inset, height + 2 * inset);
+}
+function BBoxInteractionOverlay({
+  minX,
+  minY,
+  width: width2,
+  height,
+  ctx,
+  inset = 10,
+  includeHitFill = true
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    includeHitFill ? /* @__PURE__ */ jsx("rect", { x: minX, y: minY, width: width2, height, fill: "transparent" }) : null,
+    bboxInsetSelectionChrome(minX, minY, width2, height, ctx, inset)
+  ] });
+}
+function BezierEditChrome({
+  x1,
+  y1,
+  x2,
+  y2,
+  cp0,
+  ctx,
+  pts,
+  pad = 10
+}) {
+  const show = ctx.isSelected && !ctx.viewMode && !ctx.isGhost && ctx.onHandlePointerDown;
+  if (!show) return null;
+  const bMinX = Math.min(...pts.map((p) => p.x));
+  const bMaxX = Math.max(...pts.map((p) => p.x));
+  const bMinY = Math.min(...pts.map((p) => p.y));
+  const bMaxY = Math.max(...pts.map((p) => p.y));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectionDashRect(bMinX - pad, bMinY - pad, bMaxX - bMinX + 2 * pad, bMaxY - bMinY + 2 * pad),
+    /* @__PURE__ */ jsx(
+      "polyline",
+      {
+        points: pts.map((p) => `${p.x},${p.y}`).join(" "),
+        fill: "none",
+        stroke: "#94a3b8",
+        strokeDasharray: "4 4",
+        strokeWidth: 1,
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: x1,
+        cy: y1,
+        r: 6,
+        fill: BEZIER_ANCHOR,
+        cursor: "grab",
+        onMouseDown: (e) => ctx.onHandlePointerDown(e, "start")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: x2,
+        cy: y2,
+        r: 6,
+        fill: BEZIER_ANCHOR,
+        cursor: "grab",
+        onMouseDown: (e) => ctx.onHandlePointerDown(e, "end")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: cp0.x,
+        cy: cp0.y,
+        r: 6,
+        fill: BEZIER_CP,
+        cursor: "grab",
+        onMouseDown: (e) => ctx.onHandlePointerDown(e, "cp", 0)
+      }
+    )
+  ] });
+}
+
+// src/core/renderers/primitives.tsx
+import { jsx as jsx2, jsxs as jsxs2 } 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, ctx) => /* @__PURE__ */ jsx2("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs2(OriginHitPlate, { ctx, hitHalfSize: 28, selectionHalfSize: 32, children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "0", cy: "0", r: 3, fill: colorOf(el) }),
+  el.label ? /* @__PURE__ */ jsx2("text", { x: "8", y: "-8", fontSize: fontOf(el), fill: colorOf(el), children: String(el.label) }) : null
+] }) }));
+registerRenderer("text", (el, ctx) => /* @__PURE__ */ jsx2("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsx2(OriginHitPlate, { ctx, hitHalfSize: Math.max(40, (el.label || el.value || "").length * 4), selectionHalfSize: void 0, children: /* @__PURE__ */ jsx2(
+  "text",
+  {
+    x: 0,
+    y: 0,
+    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, ctx, 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__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsxs2("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx2("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: colorOf(el), strokeWidth: strokeOf(el), strokeDasharray: dashed, strokeLinecap: "round" }),
+      arrow ? /* @__PURE__ */ jsx2("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: colorOf(el) }) : null,
+      el.label ? /* @__PURE__ */ jsx2("text", { x: d / 2, y: -10, fontSize: fontOf(el), fill: colorOf(el), textAnchor: "middle", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx2(ChordInteractionOverlay, { el, ctx })
+  ] });
+};
+registerRenderer("line", (el, ctx) => lineLike(el, ctx));
+registerRenderer("dashed", (el, ctx) => lineLike({ ...el, lineStyle: "dashed" }, ctx));
+registerRenderer("dashed_line", (el, ctx) => lineLike({ ...el, lineStyle: "dashed" }, ctx));
+registerRenderer("vector", (el, ctx) => lineLike(el, ctx, true));
+registerRenderer("ray", (el, ctx) => lineLike(el, ctx, true));
+registerRenderer("wire", (el, ctx) => lineLike(el, ctx));
+registerRenderer("table_edge", (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 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__ */ jsx2("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__ */ jsx2("line", { x1: maxX, y1: y, x2: maxX - 10, y2: y + 8, stroke: colorOf(el), strokeWidth: 1 }, `v-${j}`));
+  }
+  return /* @__PURE__ */ jsxs2("g", { children: [
+    /* @__PURE__ */ jsx2("polyline", { points: `${minX},${minY} ${maxX},${minY} ${maxX},${maxY}`, fill: "none", stroke: colorOf(el), strokeWidth: strokeOf(el) }),
+    hashes,
+    el.label ? /* @__PURE__ */ jsx2("text", { x: minX + w / 2, y: minY - 10, fill: colorOf(el), textAnchor: "middle", fontSize: fontOf(el), children: String(el.label) }) : null,
+    /* @__PURE__ */ jsx2(BBoxInteractionOverlay, { minX, minY, width: w, height: h, ctx, inset: 12 }),
+    endpointHandles(el, ctx)
+  ] });
+});
+
+// src/core/renderers/mechanics.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var c = (el) => el.color || "#0f172a";
+var sw = (el) => el.strokeWidth || 2;
+var fo = (el) => el.fillOpacity ?? 0.2;
+var font = (el) => el.fontSize || 18;
+var rotOf = (el) => el.rotation || 0;
+registerRenderer("slab", (el) => {
+  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
+  const depth = el.curveHeight ?? 20;
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3("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__ */ jsx3("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__ */ jsx3(
+    "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__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("path", { d: `M 0 ${-r} L ${d} ${-r} M 0 ${r} L ${d} ${r}`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ jsx3("ellipse", { cx: d, cy: 0, rx: 10, ry: r, fill: c(el), fillOpacity: fo(el), stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ jsx3("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__ */ jsx3("line", { x1: i, y1: -hw, x2: i, y2: hw, stroke: c(el), strokeWidth: Math.max(1, sw(el) - 1) }, i));
+  }
+  return /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ jsx3("line", { x1: 0, y1: -hw, x2: d, y2: -hw, stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ jsx3("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__ */ jsx3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ jsx3("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__ */ jsx3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ jsx3("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__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+    /* @__PURE__ */ jsx3("path", { d: `M ${r} 0 A ${r} ${r} 0 0 0 ${-r} 0`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ jsx3("polygon", { points: `${-r},2 ${-r - 6},-10 ${-r + 6},-10`, fill: c(el) })
+  ] });
+});
+registerRenderer("lens_convex", (el, ctx) => {
+  const d = opticsEffectiveChord(el.x1, el.y1, el.x2, el.y2);
+  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
+  const arcH = el.curveHeight !== void 0 ? Number(el.curveHeight) : d * 0.15;
+  const fs = el.fontSize || 16;
+  const pathD = `M 0 0 Q ${d / 2} ${-arcH * 2} ${d} 0 Q ${d / 2} ${arcH * 2} 0 0 Z`;
+  const bulgePad = Math.ceil(2 * arcH) + Math.ceil(fs + 14);
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx3("path", { d: pathD, fill: c(el), fillOpacity: Math.max(0.15, fo(el)), stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ jsx3("text", { x: d / 2, y: -arcH - 10, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) }) : null,
+      /* @__PURE__ */ jsx3(LocalFatPathHit, { dPath: pathD, strokeWidth: 28, strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx, padX: 15 + bulgePad, padY: 20 + bulgePad })
+  ] });
+});
+registerRenderer("lens_concave", (el, ctx) => {
+  const d = opticsEffectiveChord(el.x1, el.y1, el.x2, el.y2);
+  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
+  const bow = el.curveHeight !== void 0 ? Number(el.curveHeight) : Math.max(10, d * 0.04);
+  const hw = Math.max(15, d * 0.05);
+  const fs = el.fontSize || 16;
+  const pathD = `M 0 ${-hw} L 0 ${hw} Q ${d / 2} ${hw - bow * 2} ${d} ${hw} L ${d} ${-hw} Q ${d / 2} ${-hw + bow * 2} 0 ${-hw} Z`;
+  const bulgePad = Math.ceil(hw + 2 * bow) + Math.ceil(fs + 14);
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx3("path", { d: pathD, fill: c(el), fillOpacity: Math.max(0.15, fo(el)), stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ jsx3("text", { x: d / 2, y: -hw - 10, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) }) : null,
+      /* @__PURE__ */ jsx3(LocalFatPathHit, { dPath: pathD, strokeWidth: 28, strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx, padX: 15 + bulgePad, padY: 20 + bulgePad })
+  ] });
+});
+registerRenderer("mirror_concave", (el, ctx) => {
+  const d = opticsEffectiveChord(el.x1, el.y1, el.x2, el.y2);
+  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
+  const arcH = el.curveHeight !== void 0 ? Number(el.curveHeight) : d * 0.2;
+  const fs = el.fontSize || 16;
+  const pathD = `M 0 0 Q ${d / 2} ${arcH * 2} ${d} 0`;
+  const bulgePad = Math.ceil(2 * arcH) + 24;
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx3("path", { d: pathD, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ jsx3("text", { x: d / 2, y: -15, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) }) : null,
+      /* @__PURE__ */ jsx3(LocalFatPathHit, { dPath: pathD, strokeWidth: 28, strokeLinecap: "round" })
+    ] }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx, padX: 15 + bulgePad, padY: 20 + bulgePad })
+  ] });
+});
+registerRenderer("mirror_convex", (el, ctx) => {
+  const d = opticsEffectiveChord(el.x1, el.y1, el.x2, el.y2);
+  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
+  const arcH = el.curveHeight !== void 0 ? Number(el.curveHeight) : d * 0.2;
+  const fs = el.fontSize || 16;
+  const pathD = `M 0 0 Q ${d / 2} ${-arcH * 2} ${d} 0`;
+  const bulgePad = Math.ceil(2 * arcH) + 24;
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx3("path", { d: pathD, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ jsx3("text", { x: d / 2, y: -15, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) }) : null,
+      /* @__PURE__ */ jsx3(LocalFatPathHit, { dPath: pathD, strokeWidth: 28, strokeLinecap: "round" })
+    ] }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx, padX: 15 + bulgePad, padY: 20 + bulgePad })
+  ] });
+});
+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__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ jsx3("line", { x1: 0, y1: 0, x2: d / 2 - gap / 2, y2: 0, stroke: c(el), strokeWidth: thick, strokeLinecap: "square" }),
+    /* @__PURE__ */ jsx3("line", { x1: d / 2 + gap / 2, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: thick, strokeLinecap: "square" }),
+    el.label && /* @__PURE__ */ jsx3("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__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsx3("line", { x1: cx - 6, y1: b.minY, x2: cx - 6, y2: b.maxY, stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ jsx3("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__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ jsx3("path", { d: path, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+    el.label && /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3(
+    "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__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3("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, ctx) => {
+  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__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsx3("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__ */ jsx3("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 }),
+    bboxInsetSelectionChrome(b.minX, b.minY, b.width, b.height, ctx)
+  ] });
+});
+registerRenderer("b_field_line", (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 fs = el.fontSize || 18;
+  const mid = d / 2;
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx3("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx3("polygon", { points: `${mid + 6},0 ${mid - 6},-5 ${mid - 6},5`, fill: c(el) }),
+      el.label ? /* @__PURE__ */ jsx3("text", { x: mid, y: -10, textAnchor: "middle", fill: c(el), fontSize: fs, children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("b_field_curve", (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 curveHeight = el.curveHeight !== void 0 ? el.curveHeight : d * 0.4;
+  const fs = el.fontSize || 18;
+  const apexY = -curveHeight;
+  const bb = quadraticChordWorldBounds(el.x1, el.y1, el.x2, el.y2, curveHeight);
+  const curvePath = `M 0 0 Q ${d / 2} ${-curveHeight * 2} ${d} 0`;
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx3("path", { d: curvePath, fill: "none", stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx3("polygon", { points: `${d / 2 + 6},${apexY} ${d / 2 - 6},${apexY - 5} ${d / 2 - 6},${apexY + 5}`, fill: c(el) }),
+      el.label ? /* @__PURE__ */ jsx3("text", { x: d / 2, y: apexY - 15, textAnchor: "middle", fill: c(el), fontSize: fs, children: String(el.label) }) : null,
+      /* @__PURE__ */ jsx3(LocalFatPathHit, { dPath: curvePath, strokeWidth: 24, strokeLinecap: "round" })
+    ] }),
+    ctx.isSelected && !ctx.viewMode && !ctx.isGhost ? selectionDashRect(bb.x, bb.y, bb.width, bb.height) : null,
+    endpointHandles(el, ctx)
+  ] });
+});
+registerRenderer("axes_3d", (el) => /* @__PURE__ */ jsxs3("g", { children: [
+  /* @__PURE__ */ jsx3("line", { x1: el.x1, y1: el.y1, x2: el.x1 + 100, y2: el.y1, stroke: c(el), strokeWidth: sw(el) }),
+  /* @__PURE__ */ jsx3("line", { x1: el.x1, y1: el.y1, x2: el.x1, y2: el.y1 - 100, stroke: c(el), strokeWidth: sw(el) }),
+  /* @__PURE__ */ jsx3("line", { x1: el.x1, y1: el.y1, x2: el.x1 + 70, y2: el.y1 + 50, stroke: c(el), strokeWidth: sw(el) })
+] }));
+registerRenderer("string", (el, ctx) => {
+  const d = distance(el.x1, el.y1, el.x2, el.y2);
+  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsx3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ jsx3("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }) }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("surface", (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 hatchCount = Math.max(0, Math.floor(d / 12));
+  const hatches = [];
+  for (let i = 0; i <= hatchCount; i++) {
+    hatches.push(/* @__PURE__ */ jsx3("line", { x1: i * 12, y1: 0, x2: i * 12 - 8, y2: 12, stroke: c(el), strokeWidth: 1.5 }, i));
+  }
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx3("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el) + 0.5, strokeLinecap: "round" }),
+      hatches
+    ] }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("block", (el, ctx) => {
+  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 b = getBounds(el.x1, el.y1, el.x2, el.y2);
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${cx}, ${cy}) rotate(${rot})`, children: [
+      /* @__PURE__ */ jsx3("rect", { x: -w / 2, y: -h / 2, width: w, height: h, fill: "#f1f5f9", stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ jsx3(
+        "text",
+        {
+          x: 0,
+          y: el.value ? -6 : 0,
+          dominantBaseline: "central",
+          textAnchor: "middle",
+          fill: c(el),
+          fontSize: 18,
+          fontFamily: "serif",
+          fontWeight: "bold",
+          children: String(el.label)
+        }
+      ) : null,
+      el.value ? /* @__PURE__ */ jsx3(
+        "text",
+        {
+          x: 0,
+          y: el.label ? 10 : 0,
+          dominantBaseline: "central",
+          textAnchor: "middle",
+          fill: "#4b5563",
+          fontSize: 14,
+          fontFamily: "sans-serif",
+          children: String(el.value)
+        }
+      ) : null
+    ] }),
+    bboxInsetSelectionChrome(b.minX, b.minY, b.width, b.height, ctx),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("cart", (el, ctx) => {
+  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);
+  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${cx}, ${cy}) rotate(${rot})`, children: [
+      /* @__PURE__ */ jsx3("rect", { x: -w / 2, y: -h / 2, width: w, height: h - wheelR, fill: "#f1f5f9", stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ jsx3("circle", { cx: -w / 2 + wheelR * 1.5, cy: h / 2 - wheelR, r: wheelR, fill: "#cbd5e1", stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ jsx3("circle", { cx: w / 2 - wheelR * 1.5, cy: h / 2 - wheelR, r: wheelR, fill: "#cbd5e1", stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ jsx3(
+        "text",
+        {
+          x: 0,
+          y: el.value ? -8 : -2,
+          dominantBaseline: "central",
+          textAnchor: "middle",
+          fill: c(el),
+          fontSize: 18,
+          fontFamily: "serif",
+          fontWeight: "bold",
+          children: String(el.label)
+        }
+      ) : null,
+      el.value ? /* @__PURE__ */ jsx3(
+        "text",
+        {
+          x: 0,
+          y: el.label ? 8 : -2,
+          dominantBaseline: "central",
+          textAnchor: "middle",
+          fill: "#4b5563",
+          fontSize: 14,
+          fontFamily: "sans-serif",
+          children: String(el.value)
+        }
+      ) : null
+    ] }),
+    bboxInsetSelectionChrome(b.minX, b.minY, b.width, b.height, ctx),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("particle", (el, ctx) => {
+  const d = distance(el.x1, el.y1, el.x2, el.y2);
+  const r = Math.max(5, d);
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r, fill: c(el) }),
+      el.label ? /* @__PURE__ */ jsx3("text", { x: 0, y: -r - 12, dominantBaseline: "central", textAnchor: "middle", fill: c(el), fontSize: font(el), fontFamily: "serif", fontWeight: "bold", children: String(el.label) }) : null,
+      el.value ? /* @__PURE__ */ jsx3("text", { x: 0, y: r + 12, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: 14, fontFamily: "sans-serif", children: String(el.value) }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("disk", (el, ctx) => {
+  const d = distance(el.x1, el.y1, el.x2, el.y2);
+  const r = Math.max(10, d);
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r, fill: "#e2e8f0", stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ jsx3("line", { x1: 0, y1: 0, x2: r, y2: 0, stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r: 3, fill: c(el) }),
+      el.label ? /* @__PURE__ */ jsx3("text", { x: 0, y: -r - 12, dominantBaseline: "central", textAnchor: "middle", fill: c(el), fontSize: font(el), fontFamily: "serif", fontWeight: "bold", children: String(el.label) }) : null,
+      el.value ? /* @__PURE__ */ jsx3("text", { x: 0, y: r + 12, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: 14, fontFamily: "sans-serif", children: String(el.value) }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("com", (el, ctx) => /* @__PURE__ */ jsx3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs3(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 28, children: [
+  /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r: 10, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+  /* @__PURE__ */ jsx3("path", { d: "M 0 -10 A 10 10 0 0 1 10 0 L 0 0 Z", fill: c(el) }),
+  /* @__PURE__ */ jsx3("path", { d: "M 0 10 A 10 10 0 0 1 -10 0 L 0 0 Z", fill: c(el) })
+] }) }));
+registerRenderer("pivot", (el, ctx) => /* @__PURE__ */ jsx3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs3(OriginHitPlate, { ctx, hitHalfSize: 24, selectionHalfSize: 32, children: [
+  /* @__PURE__ */ jsx3("polygon", { points: "0,0 -12,20 12,20", fill: "#f8fafc", stroke: c(el), strokeWidth: sw(el), strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx3("line", { x1: -20, y1: 20, x2: 20, y2: 20, stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r: 3, fill: c(el) })
+] }) }));
+registerRenderer("pulley", (el, ctx) => {
+  const d = distance(el.x1, el.y1, el.x2, el.y2);
+  const r = Math.max(10, d);
+  return /* @__PURE__ */ jsxs3("g", { children: [
+    /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r, fill: "#f8fafc", stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r: 4, fill: c(el) }),
+      el.label ? /* @__PURE__ */ jsx3("text", { x: 0, y: -r - 12, dominantBaseline: "central", textAnchor: "middle", fill: c(el), fontSize: font(el), fontFamily: "serif", fontWeight: "bold", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("wedge", (el) => {
+  const dx = el.x2 - el.x1;
+  const dy = el.y2 - el.y1;
+  return /* @__PURE__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+    /* @__PURE__ */ jsx3("polygon", { points: `0,0 ${dx},0 ${dx},${dy}`, fill: "#f1f5f9", stroke: c(el), strokeWidth: sw(el), strokeLinejoin: "round" }),
+    el.label ? /* @__PURE__ */ jsx3(
+      "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__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ jsx3("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: w, strokeDasharray: "4 4" }),
+    /* @__PURE__ */ jsx3("polygon", { points: `0,0 10,-5 10,5`, fill: c(el) }),
+    /* @__PURE__ */ jsx3("polygon", { points: `${d},0 ${d - 10},-5 ${d - 10},5`, fill: c(el) }),
+    el.label ? /* @__PURE__ */ jsx3("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__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+    /* @__PURE__ */ jsx3("line", { x1: 0, y1: 0, x2: refLen, y2: 0, stroke: c(el), strokeWidth: 1.5, strokeDasharray: "4 4" }),
+    /* @__PURE__ */ jsx3("path", { d: `M ${startX} ${startY} A ${R} ${R} 0 0 ${sweepFlag} ${endX} ${endY}`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+    el.label ? /* @__PURE__ */ jsx3(
+      "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__ */ jsxs3("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+    /* @__PURE__ */ jsx3("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(30)" }),
+    /* @__PURE__ */ jsx3("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(-30)" }),
+    /* @__PURE__ */ jsx3("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(90)" }),
+    /* @__PURE__ */ jsx3("circle", { cx: 0, cy: 0, r: 6, fill: "#ef4444" }),
+    el.label && /* @__PURE__ */ jsx3("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__ */ jsx3("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ jsx3("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__ */ jsx3("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 jsx4, jsxs as jsxs4 } 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, ctx) => {
+  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__ */ jsxs4("g", { transform: `translate(${px}, ${py})`, children: [
+          /* @__PURE__ */ jsx4("circle", { cx: 0, cy: 0, r: markR, fill: "none", stroke: c2(el), strokeWidth: sw2(el) * 0.75 }),
+          /* @__PURE__ */ jsx4("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__ */ jsx4("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__ */ jsxs4("g", { children: [
+    /* @__PURE__ */ jsx4("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__ */ jsx4("text", { x: midX, y: minY - 10, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null,
+    bboxInsetSelectionChrome(minX, minY, b.width, b.height, ctx)
+  ] });
+});
+registerRenderer("b_region_out", (el, ctx) => {
+  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__ */ jsxs4("g", { transform: `translate(${px}, ${py})`, children: [
+          /* @__PURE__ */ jsx4("circle", { cx: 0, cy: 0, r: markR, fill: "none", stroke: c2(el), strokeWidth: sw2(el) * 0.75 }),
+          /* @__PURE__ */ jsx4("circle", { cx: 0, cy: 0, r: 2, fill: c2(el) })
+        ] }, `${px}-${py}`)
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxs4("g", { children: [
+    /* @__PURE__ */ jsx4("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__ */ jsx4("text", { x: midX, y: minY - 10, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null,
+    bboxInsetSelectionChrome(minX, minY, b.width, b.height, ctx)
+  ] });
+});
+registerRenderer("current_wire", (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 mid = d / 2;
+  const flip = angle > 90 || angle <= -90;
+  return /* @__PURE__ */ jsxs4("g", { children: [
+    /* @__PURE__ */ jsxs4("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx4("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c2(el), strokeWidth: sw2(el), strokeDasharray: dashOf(el), strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx4("polygon", { points: `${mid + 8},0 ${mid - 6},-7 ${mid - 6},7`, fill: c2(el) }),
+      el.label ? /* @__PURE__ */ jsx4(
+        "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
+    ] }),
+    /* @__PURE__ */ jsx4(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("bar_magnet", (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 magW = Math.max(20, sw2(el) * 10);
+  const flipLabel = angle > 90 || angle <= -90;
+  return /* @__PURE__ */ jsxs4("g", { children: [
+    /* @__PURE__ */ jsxs4("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx4("rect", { x: 0, y: -magW / 2, width: d / 2, height: magW, fill: "#ef4444", stroke: c2(el), strokeWidth: 1 }),
+      /* @__PURE__ */ jsx4("rect", { x: d / 2, y: -magW / 2, width: d / 2, height: magW, fill: "#3b82f6", stroke: c2(el), strokeWidth: 1 }),
+      /* @__PURE__ */ jsx4(
+        "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__ */ jsx4(
+        "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__ */ jsx4(
+        "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
+    ] }),
+    /* @__PURE__ */ jsx4(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("coil", (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 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__ */ jsxs4("g", { children: [
+    /* @__PURE__ */ jsxs4("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx4("path", { d: dPath, fill: "none", stroke: c2(el), strokeWidth: sw2(el), strokeLinejoin: "round" }),
+      el.label ? /* @__PURE__ */ jsx4(
+        "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,
+      /* @__PURE__ */ jsx4(LocalFatPathHit, { dPath, strokeWidth: 24, strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ jsx4(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("meter", (el, ctx) => {
+  const r = Math.max(16, sw2(el) * 5);
+  const label = String(el.label || "G");
+  return /* @__PURE__ */ jsx4("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs4(OriginHitPlate, { ctx, hitHalfSize: 20, selectionHalfSize: 30, children: [
+    /* @__PURE__ */ jsx4("circle", { cx: 0, cy: 0, r, fill: "white", stroke: c2(el), strokeWidth: sw2(el) }),
+    /* @__PURE__ */ jsx4("text", { x: 0, y: 0, fontSize: fontSizeOf(el), fill: c2(el), fontWeight: "bold", textAnchor: "middle", dominantBaseline: "central", children: label })
+  ] }) });
+});
+registerRenderer("ac_source", (el, ctx) => {
+  const r = Math.max(16, sw2(el) * 5);
+  return /* @__PURE__ */ jsx4("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs4(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 30, children: [
+    /* @__PURE__ */ jsx4("circle", { cx: 0, cy: 0, r, fill: "white", stroke: c2(el), strokeWidth: sw2(el) }),
+    /* @__PURE__ */ jsx4(
+      "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__ */ jsx4("text", { x: 0, y: r + 18, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("bezier", (el, ctx) => {
+  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 pts = [{ x: x1, y: y1 }, cp0, { x: x2, y: 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__ */ jsxs4("g", { children: [
+    /* @__PURE__ */ jsx4("path", { d: dPath, fill: "none", stroke: "transparent", strokeWidth: 24, strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx4("path", { d: dPath, fill: "none", stroke: c2(el), strokeWidth: sw2(el), strokeDasharray: dashOf(el), strokeLinecap: "round", strokeLinejoin: "round" }),
+    showArrow ? /* @__PURE__ */ jsx4("g", { transform: `translate(${labelX}, ${labelY}) rotate(${angleRad * 180 / Math.PI})`, children: /* @__PURE__ */ jsx4("polygon", { points: "6,0 -6,-5 -6,5", fill: c2(el) }) }) : null,
+    el.label ? /* @__PURE__ */ jsx4("text", { x: labelX, y: labelY - 14, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", children: String(el.label) }) : null,
+    /* @__PURE__ */ jsx4(BezierEditChrome, { x1, y1, x2, y2, cp0, ctx, pts })
+  ] });
+});
+
+// src/core/renderers/graph.tsx
+import { jsx as jsx5, jsxs as jsxs5 } 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 c6 = colorOf2(el);
+  const sw6 = 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__ */ jsx5("g", { opacity: op(ctx), transform: `translate(${cx}, ${cy})`, children: /* @__PURE__ */ jsxs5(OriginHitPlate, { ctx, hitHalfSize: 52, selectionHalfSize: 58, children: [
+      /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: arm, y2: 0, stroke: c6, strokeWidth: sw6 }),
+      /* @__PURE__ */ jsx5("polygon", { points: `${arm},0 ${arm - 8},-5 ${arm - 8},5`, fill: c6 }),
+      /* @__PURE__ */ jsx5(
+        "text",
+        {
+          x: arm + 10,
+          y: 0,
+          dominantBaseline: "central",
+          textAnchor: "middle",
+          fill: c6,
+          fontSize: fs,
+          fontFamily: "serif",
+          fontStyle: "italic",
+          children: "x"
+        }
+      ),
+      /* @__PURE__ */ jsx5("line", { x1: 0, y1: 0, x2: 0, y2: -arm, stroke: c6, strokeWidth: sw6 }),
+      /* @__PURE__ */ jsx5("polygon", { points: `0,${-arm} -5,${-arm + 8} 5,${-arm + 8}`, fill: c6 }),
+      /* @__PURE__ */ jsx5(
+        "text",
+        {
+          x: 0,
+          y: -arm - 12,
+          dominantBaseline: "central",
+          textAnchor: "middle",
+          fill: c6,
+          fontSize: fs,
+          fontFamily: "serif",
+          fontStyle: "italic",
+          children: "y"
+        }
+      ),
+      /* @__PURE__ */ jsx5("circle", { cx: 0, cy: 0, r: 2, fill: c6 })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx5("line", { x1: midX, y1: minY, x2: midX, y2: maxY, stroke: c6, strokeWidth: sw6, strokeDasharray: dash, opacity: 0.8 }),
+      /* @__PURE__ */ jsx5("line", { x1: minX, y1: midY, x2: maxX, y2: midY, stroke: c6, strokeWidth: sw6, strokeDasharray: dash, opacity: 0.8 }),
+      /* @__PURE__ */ jsx5("polygon", { points: `${maxX},${midY} ${maxX - 10},${midY - 5} ${maxX - 10},${midY + 5}`, fill: c6, opacity: 0.8 }),
+      /* @__PURE__ */ jsx5("polygon", { points: `${midX},${minY} ${midX - 5},${minY + 10} ${midX + 5},${minY + 10}`, fill: c6, opacity: 0.8 })
+    ] }),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("circle", (el, ctx) => {
+  const r = distance(el.x1, el.y1, el.x2, el.y2);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("circle", { cx: el.x1, cy: el.y1, r, fill: "none", stroke: c6, strokeWidth: sw6, strokeDasharray: dash, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx5("ellipse", { cx: midX, cy: midY, rx: w / 2, ry: h / 2, fill: "none", stroke: c6, strokeWidth: sw6, strokeDasharray: dash, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("rectangle", (el, ctx) => {
+  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: b.minX, y: b.minY, width: b.width, height: b.height, fill: "transparent" }),
+    bboxInsetSelectionChrome(b.minX, b.minY, b.width, b.height, ctx),
+    /* @__PURE__ */ jsx5(
+      "rect",
+      {
+        x: b.minX,
+        y: b.minY,
+        width: b.width,
+        height: b.height,
+        fill: "none",
+        stroke: c6,
+        strokeWidth: sw6,
+        strokeDasharray: dash,
+        strokeLinejoin: "round",
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = 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__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx5("line", { x1, y1, x2: x1 + dx, y2: y1, stroke: c6, strokeWidth: sw6, strokeDasharray: "4 4", opacity: 0.6 }),
+      /* @__PURE__ */ jsx5("line", { x1, y1, x2, y2, stroke: c6, strokeWidth: sw6, strokeLinecap: "round", strokeDasharray: dash }),
+      /* @__PURE__ */ jsx5("g", { transform: `translate(${x2}, ${y2}) rotate(${deg})`, children: /* @__PURE__ */ jsx5("polygon", { points: "0,0 -12,-6 -12,6", fill: c6 }) }),
+      dist > 20 && /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: `M ${arcStartX} ${arcStartY} A ${arcR} ${arcR} 0 0 ${sweepFlag} ${arcEndX} ${arcEndY}`,
+          fill: "none",
+          stroke: c6,
+          strokeWidth: sw6
+        }
+      ),
+      el.label && /* @__PURE__ */ jsx5(
+        "text",
+        {
+          x: x1 + (arcR + 16) * Math.cos(midA),
+          y: y1 + (arcR + 16) * Math.sin(midA),
+          fontSize: fs,
+          fill: c6,
+          fontFamily: "serif",
+          fontStyle: "italic",
+          dominantBaseline: "central",
+          textAnchor: "middle",
+          children: String(el.label)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: `M ${minX} ${el.y2} Q ${midX} ${cpY} ${maxX} ${el.y2}`,
+        fill: "none",
+        stroke: c6,
+        strokeWidth: sw6,
+        strokeDasharray: dash,
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: `M ${el.x2} ${minY} Q ${cpX} ${midY} ${el.x2} ${maxY}`,
+        fill: "none",
+        stroke: c6,
+        strokeWidth: sw6,
+        strokeDasharray: dash,
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx5("path", { d: `M ${minX} ${minY} Q ${midX} ${midY} ${minX} ${maxY}`, fill: "none", stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      /* @__PURE__ */ jsx5("path", { d: `M ${maxX} ${minY} Q ${midX} ${midY} ${maxX} ${maxY}`, fill: "none", stroke: c6, strokeWidth: sw6, strokeDasharray: dash })
+    ] }),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx5(
+      "polyline",
+      {
+        points: `${minX},${minY} ${midX},${maxY} ${maxX},${minY}`,
+        fill: "none",
+        stroke: c6,
+        strokeWidth: sw6,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: dash,
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: `M ${minX} ${maxY} Q ${midX + w * 0.2} ${maxY} ${maxX} ${minY}`,
+        fill: "none",
+        stroke: c6,
+        strokeWidth: sw6,
+        strokeDasharray: dash,
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx5(
+      "path",
+      {
+        d: `M ${minX} ${maxY} Q ${minX} ${midY - h * 0.2} ${maxX} ${minY}`,
+        fill: "none",
+        stroke: c6,
+        strokeWidth: sw6,
+        strokeDasharray: dash,
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 midY = (minY + maxY) / 2;
+  const w = Math.max(1, maxX - minX);
+  const h = Math.max(1, maxY - minY);
+  const s = w / 4;
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx5(
+      "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: c6,
+        strokeWidth: sw6,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: dash,
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = 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__ */ jsxs5("g", { children: [
+        /* @__PURE__ */ jsx5("line", { x1: curX, y1: curY, x2: nextX, y2: curY, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+        /* @__PURE__ */ jsx5("circle", { cx: curX, cy: curY, r: sw6 * 1.5, fill: c6 }),
+        /* @__PURE__ */ jsx5("circle", { cx: nextX, cy: curY, r: sw6 * 1.5, fill: "white", stroke: c6, strokeWidth: sw6 * 0.75 })
+      ] }, i)
+    );
+  }
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx5("g", { pointerEvents: "none", children: steps }),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
+  const dash = dashOf2(el);
+  return /* @__PURE__ */ jsxs5("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ jsx5("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsxs5("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ jsx5(
+        "path",
+        {
+          d: `M ${minX} ${maxY} L ${minX} ${minY + h * 0.3} Q ${midX} ${minY} ${maxX} ${minY + h * 0.3} L ${maxX} ${maxY} Z`,
+          fill: c6,
+          opacity: 0.2
+        }
+      ),
+      /* @__PURE__ */ jsx5("path", { d: `M ${minX} ${minY + h * 0.3} Q ${midX} ${minY} ${maxX} ${minY + h * 0.3}`, fill: "none", stroke: c6, strokeWidth: sw6, strokeDasharray: dash })
+    ] }),
+    /* @__PURE__ */ jsx5(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+
+// src/core/renderers/waveOscillation.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var c3 = (el) => el.color || "#0f172a";
+var sw3 = (el) => el.strokeWidth || 2;
+var font2 = (el) => el.fontSize || 18;
+registerRenderer("mass_box", (el, ctx) => {
+  const size = el.size || 30;
+  const color = c3(el);
+  const strokeWidth = sw3(el);
+  const fontSize = font2(el);
+  const plate = Math.max(36, size / 2 + 24);
+  return /* @__PURE__ */ jsx6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs6(OriginHitPlate, { ctx, hitHalfSize: plate, selectionHalfSize: plate + 8, children: [
+    /* @__PURE__ */ jsx6(
+      "rect",
+      {
+        x: -size / 2,
+        y: -size / 2,
+        width: size,
+        height: size,
+        fill: color,
+        fillOpacity: 0.2,
+        stroke: color,
+        strokeWidth,
+        rx: 4,
+        pointerEvents: "none"
+      }
+    ),
+    el.label ? /* @__PURE__ */ jsx6("text", { x: 0, y: 0, dominantBaseline: "central", textAnchor: "middle", fontSize, fill: color, fontWeight: "bold", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("tuning_fork", (el, ctx) => {
+  const color = c3(el);
+  const strokeWidth = sw3(el);
+  const fontSize = font2(el);
+  const w = Math.max(3, strokeWidth);
+  return /* @__PURE__ */ jsx6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs6(OriginHitPlate, { ctx, hitHalfSize: 38, selectionHalfSize: 46, children: [
+    /* @__PURE__ */ jsx6(
+      "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",
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx6("line", { x1: "0", y1: "10", x2: "0", y2: "30", stroke: color, strokeWidth: Math.max(4, strokeWidth), strokeLinecap: "round", pointerEvents: "none" }),
+    el.label ? /* @__PURE__ */ jsx6("text", { x: 0, y: 45, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("speaker", (el, ctx) => {
+  const color = c3(el);
+  const fontSize = font2(el);
+  return /* @__PURE__ */ jsx6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs6(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, children: [
+    /* @__PURE__ */ jsx6("polygon", { points: "-10,-15 5,-25 5,25 -10,15", fill: color, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx6("rect", { x: "-20", y: "-15", width: "10", height: "30", fill: color, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx6("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", pointerEvents: "none" }),
+    el.label ? /* @__PURE__ */ jsx6("text", { x: 0, y: 40, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("wavefronts", (el, ctx) => {
+  const rings = el.rings || 5;
+  const vRatio = el.velocityRatio ?? 0;
+  const color = c3(el);
+  const strokeWidth = sw3(el);
+  const fontSize = font2(el);
+  const circles = [];
+  for (let i = 1; i <= rings; i++) {
+    const r = i * 20;
+    const cx = vRatio * r;
+    circles.push(
+      /* @__PURE__ */ jsx6(
+        "circle",
+        {
+          cx,
+          cy: 0,
+          r,
+          fill: "none",
+          stroke: color,
+          strokeWidth,
+          opacity: 1 - i / rings * 0.5,
+          pointerEvents: "none"
+        },
+        i
+      )
+    );
+  }
+  const extent = rings * 20 + Math.abs(vRatio) * rings * 20 + 30;
+  return /* @__PURE__ */ jsx6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs6(OriginHitPlate, { ctx, hitHalfSize: extent, selectionHalfSize: extent + 10, children: [
+    /* @__PURE__ */ jsx6("circle", { cx: 0, cy: 0, r: 4, fill: color, pointerEvents: "none" }),
+    circles,
+    el.label ? /* @__PURE__ */ jsx6("text", { x: 0, y: rings * 20 + 20, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("pendulum", (el, ctx) => {
+  const size = el.size || 15;
+  const color = c3(el);
+  const strokeWidth = sw3(el);
+  const fontSize = font2(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__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: -20, y1: 0, x2: 20, y2: 0, stroke: color, strokeWidth: 2 }),
+      /* @__PURE__ */ jsx6("line", { x1: -15, y1: 0, x2: -10, y2: -5, stroke: color }),
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: 5, y2: -5, stroke: color }),
+      /* @__PURE__ */ jsx6("line", { x1: 15, y1: 0, x2: 20, y2: -5, stroke: color }),
+      /* @__PURE__ */ jsx6("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__ */ jsx6(
+        "path",
+        {
+          d: `M 0 ${arcR} A ${arcR} ${arcR} 0 0 ${arcFlag} ${arcX} ${arcY}`,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.5
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs6("g", { transform: `rotate(${-thetaDeg})`, children: [
+        /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: 0, y2: l, stroke: color, strokeWidth }),
+        /* @__PURE__ */ jsx6("circle", { cx: 0, cy: l, r: size, fill: color, stroke: "#fff", strokeWidth: 2 }),
+        showF ? /* @__PURE__ */ jsxs6("g", { transform: `translate(0, ${l})`, children: [
+          /* @__PURE__ */ jsxs6("g", { transform: `rotate(${thetaDeg})`, children: [
+            /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: 0, y2: 40, stroke: "#ef4444", strokeWidth: 2 }),
+            /* @__PURE__ */ jsx6("polygon", { points: "0,45 -4,37 4,37", fill: "#ef4444" }),
+            /* @__PURE__ */ jsx6("text", { x: 10, y: 40, fontSize: 12, fill: "#ef4444", children: "F_g" })
+          ] }),
+          /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: 0, y2: -40, stroke: "#3b82f6", strokeWidth: 2 }),
+          /* @__PURE__ */ jsx6("polygon", { points: "0,-45 -4,-37 4,-37", fill: "#3b82f6" }),
+          /* @__PURE__ */ jsx6("text", { x: 10, y: -35, fontSize: 12, fill: "#3b82f6", children: "T" }),
+          /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: -35 * Math.sin(theta), y2: 0, stroke: "#10b981", strokeWidth: 2 }),
+          /* @__PURE__ */ jsx6(
+            "polygon",
+            {
+              points: `${-40 * Math.sin(theta)},0 ${-32 * Math.sin(theta)},-4 ${-32 * Math.sin(theta)},4`,
+              fill: "#10b981"
+            }
+          ),
+          /* @__PURE__ */ jsx6("text", { x: -45 * Math.sin(theta), y: -10, fontSize: 12, fill: "#10b981", children: "F_g sin(\u03B8)" })
+        ] }) : null,
+        el.label ? /* @__PURE__ */ jsx6("text", { x: 0, y: l + size + 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padX: Math.max(80, l + size + 30), padY: Math.max(80, l + size + 30) })
+  ] });
+});
+registerRenderer("phasor", (el, ctx) => {
+  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 = font2(el);
+  const showProj = el.showProjection;
+  return /* @__PURE__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("circle", { cx: 0, cy: 0, r: dist, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: -dist - 10, y1: 0, x2: dist + 10, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: -dist - 10, x2: 0, y2: dist + 10, stroke: color, strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("polygon", { points: `${dist},0 ${dist - 12},-6 ${dist - 12},6`, fill: color, pointerEvents: "none" }),
+      showProj ? /* @__PURE__ */ jsxs6("g", { transform: `rotate(${-angle})`, children: [
+        /* @__PURE__ */ jsx6("line", { x1: dx, y1: dy, x2: dx, y2: 0, stroke: "#ef4444", strokeWidth: 1, strokeDasharray: "4 4" }),
+        /* @__PURE__ */ jsx6("line", { x1: dx, y1: dy, x2: 0, y2: dy, stroke: "#3b82f6", strokeWidth: 1, strokeDasharray: "4 4" }),
+        /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dx, y2: 0, stroke: "#ef4444", strokeWidth: 2 }),
+        /* @__PURE__ */ jsx6("polygon", { points: `${dx},0 ${dx > 0 ? dx - 8 : dx + 8},-4 ${dx > 0 ? dx - 8 : dx + 8},4`, fill: "#ef4444" }),
+        /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: 0, y2: dy, stroke: "#3b82f6", strokeWidth: 2 }),
+        /* @__PURE__ */ jsx6("polygon", { points: `0,${dy} -4,${dy > 0 ? dy - 8 : dy + 8} 4,${dy > 0 ? dy - 8 : dy + 8}`, fill: "#3b82f6" })
+      ] }) : null,
+      /* @__PURE__ */ jsx6(
+        "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__ */ jsx6("text", { x: dist / 2, y: -15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padX: dist + 28, padY: dist + 28 })
+  ] });
+});
+registerRenderer("sine_wave", (el, ctx) => {
+  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 = font2(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__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: d, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx6("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx6("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
+  ] });
+});
+registerRenderer("standing_wave", (el, ctx) => {
+  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 = font2(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__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: d1, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: d2, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx6("path", { d: d1, fill: color, fillOpacity: 0.1, stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("path", { d: d2, fill: "none", stroke: color, strokeWidth, strokeDasharray: "4 4", strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx6("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
+  ] });
+});
+registerRenderer("shm_graph", (el, ctx) => {
+  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 = font2(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__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: -amp * 1.2, x2: 0, y2: amp * 1.2, stroke: color, strokeWidth: 1, opacity: 0.5, pointerEvents: "none" }),
+      gType === "x" || gType === "all" ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: dX, strokeWidth: 20, strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx6("path", { d: dX, fill: "none", stroke: "#3b82f6", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" })
+      ] }) : null,
+      gType === "v" || gType === "all" ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: dV, strokeWidth: 20, strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx6("path", { d: dV, fill: "none", stroke: "#ef4444", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" })
+      ] }) : null,
+      gType === "a" || gType === "all" ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: dA, strokeWidth: 20, strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx6("path", { d: dA, fill: "none", stroke: "#10b981", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" })
+      ] }) : null,
+      el.label ? /* @__PURE__ */ jsx6("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padY: amp * 1.2 + 28 })
+  ] });
+});
+registerRenderer("energy_graph", (el, ctx) => {
+  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 = font2(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__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: -amp, x2: dist, y2: -amp, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: dU, strokeWidth: 20, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: dK, strokeWidth: 20, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx6("path", { d: dU, fill: "none", stroke: "#10b981", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("path", { d: dK, fill: "none", stroke: "#ef4444", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx6("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
+  ] });
+});
+registerRenderer("strobe_shm", (el, ctx) => {
+  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 = font2(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__ */ jsx6("circle", { cx, cy, r: strokeWidth * 2, fill: color, pointerEvents: "none" }, `c${i}`));
+    lines.push(
+      /* @__PURE__ */ jsx6("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__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      lines,
+      /* @__PURE__ */ jsx6("polyline", { points: pts.join(" "), fill: "none", stroke: color, strokeWidth: 1, opacity: 0.4, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: 0, y2: dist, stroke: color, strokeWidth: 1, opacity: 0.5, pointerEvents: "none" }),
+      circles,
+      el.label ? /* @__PURE__ */ jsx6("text", { x: 0, y: -15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padX: amp + 35, padY: dist + 35 })
+  ] });
+});
+registerRenderer("torsion_pendulum", (el, ctx) => {
+  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 = font2(el);
+  const R = Math.max(18, Math.min(58, el.size || 26 + dist * 0.2));
+  const halfT = Math.max(5, Math.min(11, R * 0.14));
+  const twistDeg = Math.max(-45, Math.min(45, el.rotation ?? 16));
+  const tw = twistDeg * Math.PI / 180;
+  const rArc = Math.min(14, R * 0.35);
+  const arcX2 = rArc * Math.sin(tw);
+  const arcY2 = -rArc * Math.cos(tw);
+  const fiberStart = 4;
+  const fiberEnd = Math.max(fiberStart + 8, dist - halfT);
+  const helixD = [];
+  const helAmp = Math.min(2.8, halfT * 0.35);
+  const helSteps = 24;
+  for (let i = 0; i <= helSteps; i++) {
+    const u = i / helSteps;
+    const x = fiberStart + u * (fiberEnd - fiberStart);
+    const y = helAmp * Math.sin(u * Math.PI * 5);
+    helixD.push(i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`);
+  }
+  const pad = Math.max(R + halfT + 28, dist * 0.35 + 40);
+  return /* @__PURE__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("rect", { x: -28, y: -14, width: 56, height: 10, rx: 2, fill: "#e2e8f0", stroke: color, strokeWidth: 1.25, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("rect", { x: -8, y: -4, width: 16, height: 8, rx: 1, fill: "#94a3b8", stroke: color, strokeWidth: 1, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: -22, y1: -9, x2: 22, y2: -9, stroke: "#64748b", strokeWidth: 1, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6(
+        "path",
+        {
+          d: helixD.join(""),
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1,
+          strokeLinecap: "round",
+          opacity: 0.35,
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "line",
+        {
+          x1: fiberStart,
+          y1: 0,
+          x2: fiberEnd,
+          y2: 0,
+          stroke: "#64748b",
+          strokeWidth: Math.max(1, strokeWidth * 0.45),
+          strokeLinecap: "round",
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "rect",
+        {
+          x: dist - halfT,
+          y: -R,
+          width: 2 * halfT,
+          height: 2 * R,
+          rx: halfT - 0.5,
+          fill: "#f8fafc",
+          stroke: color,
+          strokeWidth,
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "line",
+        {
+          x1: dist - halfT + 1,
+          y1: 0,
+          x2: dist + halfT - 1,
+          y2: 0,
+          stroke: "#cbd5e1",
+          strokeWidth: 1,
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx6("circle", { cx: dist, cy: 0, r: Math.min(5, halfT - 1), fill: "#94a3b8", stroke: color, strokeWidth: 1, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6(
+        "line",
+        {
+          x1: dist,
+          y1: 0,
+          x2: dist,
+          y2: -(R - 6),
+          stroke: "#94a3b8",
+          strokeWidth: 1.25,
+          strokeDasharray: "3 3",
+          opacity: 0.65,
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx6("g", { transform: `translate(${dist},0) rotate(${twistDeg})`, children: /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: 0, y2: -(R - 5), stroke: "#dc2626", strokeWidth: Math.max(1.5, strokeWidth * 0.75), strokeLinecap: "round", pointerEvents: "none" }) }),
+      Math.abs(twistDeg) >= 2 ? /* @__PURE__ */ jsx6("g", { transform: `translate(${dist},0)`, children: /* @__PURE__ */ jsx6(
+        "path",
+        {
+          d: `M 0 ${-rArc} A ${rArc} ${rArc} 0 0 ${twistDeg >= 0 ? 1 : 0} ${arcX2} ${arcY2}`,
+          fill: "none",
+          stroke: "#dc2626",
+          strokeWidth: 1.25,
+          pointerEvents: "none"
+        }
+      ) }) : null,
+      el.label ? /* @__PURE__ */ jsx6("text", { x: dist, y: R + 22, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padX: pad, padY: pad })
+  ] });
+});
+registerRenderer("vane_liquid", (el, ctx) => {
+  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 = font2(el);
+  const beakerW = Math.max(40, dist * 0.4);
+  const beakerH = Math.max(40, dist * 0.5);
+  return /* @__PURE__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: dist, y1: -beakerW * 0.3, x2: dist, y2: beakerW * 0.3, stroke: color, strokeWidth: strokeWidth * 1.5, strokeLinecap: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6(
+        "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",
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        "rect",
+        {
+          x: dist - beakerH + 2,
+          y: -beakerW / 2 + 2,
+          width: beakerH + 8,
+          height: beakerW - 4,
+          fill: "#38bdf8",
+          fillOpacity: 0.3,
+          pointerEvents: "none"
+        }
+      ),
+      el.label ? /* @__PURE__ */ jsx6("text", { x: dist / 2, y: -beakerW / 2 - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padX: beakerH + 40, padY: beakerW + 40 })
+  ] });
+});
+registerRenderer("wave_pulse", (el, ctx) => {
+  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 = font2(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__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, strokeLinecap: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: d, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx6("path", { d, fill: color, fillOpacity: 0.1, stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx6("text", { x: mid, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
+  ] });
+});
+registerRenderer("damped_wave", (el, ctx) => {
+  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 = font2(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__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("path", { d: env1, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("path", { d: env2, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: d, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx6("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx6("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
+  ] });
+});
+registerRenderer("beats_graph", (el, ctx) => {
+  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 = font2(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__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("path", { d: env1, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "2 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("path", { d: env2, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "2 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6(LocalFatPathHit, { dPath: d, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx6("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx6("text", { x: dist / 2, y: -amp - 20, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
+  ] });
+});
+registerRenderer("mach_cone", (el, ctx) => {
+  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 = font2(el);
+  return /* @__PURE__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: h, y2: 0, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: h, y1: 0, x2: 0, y2: -r, stroke: color, strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("line", { x1: h, y1: 0, x2: 0, y2: r, stroke: color, strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx6("circle", { cx: h, cy: 0, r: 4, fill: color, pointerEvents: "none" }),
+      [0.2, 0.5, 0.8].map((t) => /* @__PURE__ */ jsx6("circle", { cx: h * t, cy: 0, r: (1 - t) * r, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.6, pointerEvents: "none" }, t)),
+      el.label ? /* @__PURE__ */ jsx6("text", { x: h / 2, y: r + 20, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padY: r + 35 })
+  ] });
+});
+registerRenderer("wall", (el, ctx) => {
+  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 = font2(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__ */ jsx6("line", { x1: i, y1: 0, x2: i - 8, y2: -12, stroke: color, strokeWidth: 1, pointerEvents: "none" }, j));
+  }
+  return /* @__PURE__ */ jsxs6("g", { children: [
+    /* @__PURE__ */ jsxs6("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx6("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, pointerEvents: "none" }),
+      hashes,
+      el.label ? /* @__PURE__ */ jsx6("text", { x: dist / 2, y: 20, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx6(ChordInteractionOverlay, { el, ctx, padY: 35 })
+  ] });
+});
+
+// src/core/renderers/rotation.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var c4 = (el) => el.color || "#0f172a";
+var sw4 = (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, ctx) => {
+  const size = el.size ?? 15;
+  const plate = Math.max(36, size + 22);
+  return /* @__PURE__ */ jsx7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs7(OriginHitPlate, { ctx, hitHalfSize: plate / 2, selectionHalfSize: plate / 2 + 8, children: [
+    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: size, fill: c4(el), fillOpacity: 0.8, stroke: c4(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: c4(el), textAnchor: "middle", fontWeight: "bold", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("com_indicator", (el, ctx) => {
+  const size = el.size ?? 15;
+  const plate = Math.max(40, size * 2 + 12);
+  return /* @__PURE__ */ jsx7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs7(OriginHitPlate, { ctx, hitHalfSize: plate / 2, selectionHalfSize: plate / 2 + 10, children: [
+    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: size, fill: "none", stroke: c4(el), strokeWidth: sw4(el) }),
+    /* @__PURE__ */ jsx7("line", { x1: -size * 1.3, y1: 0, x2: size * 1.3, y2: 0, stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+    /* @__PURE__ */ jsx7("line", { x1: 0, y1: -size * 1.3, x2: 0, y2: size * 1.3, stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+    /* @__PURE__ */ jsx7("path", { d: `M 0 0 L ${size} 0 A ${size} ${size} 0 0 0 0 ${-size} Z`, fill: c4(el), fillOpacity: 0.5, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx7("path", { d: `M 0 0 L ${-size} 0 A ${size} ${size} 0 0 0 0 ${size} Z`, fill: c4(el), fillOpacity: 0.5, pointerEvents: "none" }),
+    el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: size + 15, fontSize: font3(el), fill: c4(el), textAnchor: "middle", fontWeight: "bold", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("pivot", (el, ctx) => {
+  const size = el.size ?? 20;
+  const plate = Math.max(44, size * 2 + 24);
+  return /* @__PURE__ */ jsx7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs7(OriginHitPlate, { ctx, hitHalfSize: plate / 2, selectionHalfSize: plate / 2 + 10, children: [
+    /* @__PURE__ */ jsx7(
+      "polygon",
+      {
+        points: `0,0 ${-size},${size * 1.5} ${size},${size * 1.5}`,
+        fill: "none",
+        stroke: c4(el),
+        strokeWidth: sw4(el),
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "line",
+      {
+        x1: -size * 1.5,
+        y1: size * 1.5,
+        x2: size * 1.5,
+        y2: size * 1.5,
+        stroke: c4(el),
+        strokeWidth: sw4(el) + 1,
+        strokeLinecap: "round",
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: sw4(el) * 1.5, fill: c4(el), pointerEvents: "none" }),
+    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: c4(el),
+        strokeWidth: 1,
+        pointerEvents: "none"
+      },
+      i
+    )),
+    el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: size * 1.5 + 20, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("block_mass", (el, ctx) => {
+  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", { children: [
+    /* @__PURE__ */ jsxs7("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ jsx7("rect", { x: 0, y: 0, width: w, height: h, fill: c4(el), fillOpacity: 0.2, stroke: c4(el), strokeWidth: sw4(el), rx: 2 }),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: w / 2, y: h / 2, dominantBaseline: "central", textAnchor: "middle", fontSize: font3(el), fill: c4(el), fontWeight: "bold", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("system_boundary", (el, ctx) => {
+  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", { children: [
+    /* @__PURE__ */ jsxs7("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ jsx7("rect", { x: 0, y: 0, width: w, height: h, fill: "none", stroke: c4(el), strokeWidth: sw4(el), strokeDasharray: "8 6", rx: 15 }),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: w / 2, y: -10, fontSize: font3(el), fill: c4(el), textAnchor: "middle", fontStyle: "italic", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("rocket", (el, ctx) => {
+  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 w = Math.max(1, maxX - minX);
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__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: c4(el),
+          strokeWidth: sw4(el),
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ jsx7("polygon", { points: `0,${-w / 4} ${dist * 0.2},${-w / 4} 0,${-w / 2}`, fill: c4(el), fillOpacity: 0.8, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("polygon", { points: `0,${w / 4} ${dist * 0.2},${w / 4} 0,${w / 2}`, fill: c4(el), fillOpacity: 0.8, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("path", { d: `M 0 ${-w / 6} Q ${-dist * 0.3} 0 0 ${w / 6}`, fill: "#f97316", fillOpacity: 0.8, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("path", { d: `M 0 ${-w / 8} Q ${-dist * 0.5} 0 0 ${w / 8}`, fill: "#ef4444", fillOpacity: 0.6, pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: dist / 2, y: -w / 2 - 10, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("dashed_path", (el, ctx) => {
+  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", { children: [
+    /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx7("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c4(el), strokeWidth: sw4(el), strokeLinecap: "round", strokeDasharray: "8 6", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: d / 2, y: -10, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("uniform_rod", (el, ctx) => {
+  const dist = distance(el.x1, el.y1, el.x2, el.y2);
+  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
+  const strokeWidth = sw4(el);
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__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: c4(el), rx: strokeWidth / 4, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("circle", { cx: dist / 2, cy: 0, r: Math.max(2, strokeWidth / 4), fill: "#fff", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: dist / 2, y: -strokeWidth / 2 - 10, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("solid_disk", (el, ctx) => {
+  const dx = el.x2 - el.x1;
+  const dy = el.y2 - el.y1;
+  const radius = Math.hypot(dx, dy);
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius, fill: c4(el), fillOpacity: 0.4, stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("hoop_ring", (el, ctx) => {
+  const dx = el.x2 - el.x1;
+  const dy = el.y2 - el.y1;
+  const radius = Math.hypot(dx, dy);
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius, fill: "none", stroke: c4(el), strokeWidth: Math.max(4, sw4(el) * 2), pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("rolling_body", (el, ctx) => {
+  const dx = el.x2 - el.x1;
+  const dy = el.y2 - el.y1;
+  const radius = Math.hypot(dx, dy);
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius, fill: c4(el), fillOpacity: 0.1, stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("line", { x1: -radius, y1: 0, x2: radius, y2: 0, stroke: c4(el), strokeWidth: 1, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("line", { x1: 0, y1: -radius, x2: 0, y2: radius, stroke: c4(el), strokeWidth: 1, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: 3, fill: c4(el), pointerEvents: "none" }),
+      el.showVelocity ? /* @__PURE__ */ jsxs7("g", { pointerEvents: "none", 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})`, pointerEvents: "none", 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: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("inclined_wedge", (el, ctx) => {
+  const { x1, y1, x2, y2 } = el;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+  const b = getBounds(x1, y1, x2, y2);
+  const triMinX = Math.min(x1, x2);
+  const triMinY = Math.min(y1, y2);
+  const triW = b.width;
+  const triH = b.height;
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__PURE__ */ jsx7(
+      "polygon",
+      {
+        points: `${x1},${y1} ${x1},${y2} ${x2},${y2}`,
+        fill: c4(el),
+        fillOpacity: 0.1,
+        stroke: c4(el),
+        strokeWidth: sw4(el),
+        strokeLinejoin: "round",
+        pointerEvents: "none"
+      }
+    ),
+    el.label ? /* @__PURE__ */ jsx7("text", { x: (x1 + x2) / 2, y: y2 - 10, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", 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: c4(el),
+        strokeWidth: 1,
+        pointerEvents: "none"
+      }
+    ) : null,
+    /* @__PURE__ */ jsx7(BBoxInteractionOverlay, { minX: triMinX, minY: triMinY, width: triW, height: triH, ctx }),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("pulley", (el, ctx) => {
+  const dx = el.x2 - el.x1;
+  const dy = el.y2 - el.y1;
+  const radius = Math.hypot(dx, dy);
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__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: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("line", { x1: -radius * 0.8, y1: -radius * 1.5, x2: radius * 0.8, y2: -radius * 1.5, stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+      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: c4(el),
+          strokeWidth: 1,
+          pointerEvents: "none"
+        },
+        i
+      )),
+      /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius, fill: "#fff", stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: radius * 0.8, fill: "none", stroke: c4(el), strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7("circle", { cx: 0, cy: 0, r: 3, fill: c4(el), pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: 0, y: -radius * 1.5 - 15, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("curve_arrow", (el, ctx) => {
+  const dist = distance(el.x1, el.y1, el.x2, el.y2);
+  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
+  const curvePath = `M 0 0 Q ${dist / 2} ${-dist * 0.5} ${dist} 0`;
+  const bb = quadraticChordWorldBounds(el.x1, el.y1, el.x2, el.y2, dist / 4);
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx7("path", { d: curvePath, fill: "none", stroke: c4(el), strokeWidth: sw4(el), strokeLinecap: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx7(LocalFatPathHit, { dPath: curvePath, strokeWidth: 24, strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx7("polygon", { points: `${dist},0 ${dist - 8},-6 ${dist - 4},-1`, fill: c4(el), transform: `rotate(20 ${dist} 0)`, pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: dist / 2, y: -dist * 0.3, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    ctx.isSelected && !ctx.viewMode && !ctx.isGhost ? selectionDashRect(bb.x, bb.y, bb.width, bb.height) : null,
+    endpointHandles(el, ctx)
+  ] });
+});
+registerRenderer("spring", (el, ctx) => {
+  const dist = distance(el.x1, el.y1, el.x2, el.y2);
+  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
+  const pathD = generateSpringPath(dist, el.coils);
+  return /* @__PURE__ */ jsxs7("g", { children: [
+    /* @__PURE__ */ jsxs7("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx7(LocalFatPathHit, { dPath: pathD, strokeWidth: 26, strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx7(
+        "path",
+        {
+          d: pathD,
+          fill: "none",
+          stroke: c4(el),
+          strokeWidth: sw4(el),
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          pointerEvents: "none"
+        }
+      ),
+      el.label ? /* @__PURE__ */ jsx7("text", { x: dist / 2, y: -20, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx7(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+
+// src/core/renderers/circuit.tsx
+import { Fragment as Fragment3, 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: drawColor(el, ctx),
+      strokeWidth: drawStroke(el, ctx),
+      strokeLinecap: "round",
+      pointerEvents: "none"
+    }
+  ),
+  /* @__PURE__ */ jsx8(ChordInteractionOverlay, { el, ctx, hitWidth: 20 })
+] }));
+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("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",
+        pointerEvents: "none",
+        children: String(el.label)
+      }
+    ) : null,
+    el.value ? /* @__PURE__ */ jsx8(
+      "text",
+      {
+        x: mx - nx * labelDist,
+        y: my - ny * labelDist,
+        dominantBaseline: "central",
+        textAnchor: "middle",
+        fill: "#4b5563",
+        fontSize: "14",
+        fontFamily: "sans-serif",
+        pointerEvents: "none",
+        children: String(el.value)
+      }
+    ) : null,
+    /* @__PURE__ */ jsx8(ChordInteractionOverlay, { el, ctx, hitWidth: 20 })
+  ] });
+};
+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(Fragment3, { 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(Fragment3, { 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(OriginHitPlate, { ctx, hitHalfSize: 28, selectionHalfSize: 34, 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 c5 = (el) => el.color || "#0f172a";
+var sw5 = (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, ctx) => {
+  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 = c5(el);
+  const strokeWidth = sw5(el);
+  const fontSize = font4(el);
+  return /* @__PURE__ */ jsxs9("g", { children: [
+    /* @__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", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx9(BBoxInteractionOverlay, { minX, minY, width: w, height: h, ctx }),
+    /* @__PURE__ */ jsx9(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("piston_cylinder", (el, ctx) => {
+  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 = c5(el);
+  const strokeWidth = sw5(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", { children: [
+    /* @__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",
+          pointerEvents: "none"
+        }
+      ),
+      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), pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx9(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("heat_engine", (el, ctx) => {
+  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 = c5(el);
+  const strokeWidth = sw5(el);
+  const fontSize = font4(el);
+  return /* @__PURE__ */ jsxs9("g", { children: [
+    /* @__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", pointerEvents: "none" }),
+      /* @__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", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx9(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("conduction_rod", (el, ctx) => {
+  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 = c5(el);
+  const strokeWidth = sw5(el);
+  const fontSize = font4(el);
+  return /* @__PURE__ */ jsxs9("g", { children: [
+    /* @__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", pointerEvents: "none" }),
+      /* @__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", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx9(ChordInteractionOverlay, { el, ctx, padY: 48 })
+  ] });
+});
+registerRenderer("thermo_process", (el, ctx) => {
+  const pType = el.processType || "isotherm";
+  const dx = el.x2 - el.x1;
+  const dy = el.y2 - el.y1;
+  const pathD = pType === "isobaric" ? `M 0 0 L ${dx} 0` : pType === "isochoric" ? `M 0 0 L 0 ${dy}` : pType === "adiabatic" ? `M 0 0 Q ${dx * 0.1} ${dy * 0.9} ${dx} ${dy}` : `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 = c5(el);
+  const strokeWidth = sw5(el);
+  const fontSize = font4(el);
+  return /* @__PURE__ */ jsxs9("g", { children: [
+    /* @__PURE__ */ jsxs9("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ jsx9(LocalFatPathHit, { dPath: pathD, strokeWidth: 22, strokeLinejoin: "round", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx9("path", { d: pathD, fill: "none", stroke: color, strokeWidth, strokeDasharray: dash, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx9("g", { transform: `translate(${midX}, ${midY}) rotate(${arrowAngle})`, children: /* @__PURE__ */ jsx9("polygon", { points: "0,0 -8,-5 -8,5", fill: color, pointerEvents: "none" }) }),
+      el.label ? /* @__PURE__ */ jsx9("text", { x: midX + 15, y: midY - 10, fontSize, fill: color, pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx9(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("carnot_cycle", (el, ctx) => {
+  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 = c5(el);
+  const strokeWidth = sw5(el);
+  const fontSize = font4(el);
+  return /* @__PURE__ */ jsxs9("g", { children: [
+    /* @__PURE__ */ jsxs9("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ jsx9("path", { d: `${iso1} ${ad1} ${iso2} ${ad2} Z`, fill: color, fillOpacity: 0.1, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx9("path", { d: iso1, fill: "none", stroke: "#ef4444", strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx9("path", { d: `M ${p2.x} ${p2.y} ${ad1}`, fill: "none", stroke: "#64748b", strokeWidth, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx9("path", { d: `M ${p3.x} ${p3.y} ${iso2}`, fill: "none", stroke: "#3b82f6", strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ jsx9("path", { d: `M ${p4.x} ${p4.y} ${ad2}`, fill: "none", stroke: "#64748b", strokeWidth, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx9("circle", { cx: p1.x, cy: p1.y, r: "3", fill: "#1e293b", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx9("circle", { cx: p2.x, cy: p2.y, r: "3", fill: "#1e293b", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx9("circle", { cx: p3.x, cy: p3.y, r: "3", fill: "#1e293b", pointerEvents: "none" }),
+      /* @__PURE__ */ jsx9("circle", { cx: p4.x, cy: p4.y, r: "3", fill: "#1e293b", pointerEvents: "none" }),
+      /* @__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", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ jsx9(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("maxwell_boltzmann", (el, ctx) => {
+  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 = sw5(el);
+  const fontSize = font4(el);
+  const color = c5(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", pointerEvents: "none" });
+  };
+  return /* @__PURE__ */ jsxs9("g", { children: [
+    /* @__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", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx9(BBoxInteractionOverlay, { minX, minY, width: w, height: h, ctx }),
+    /* @__PURE__ */ jsx9(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("diatomic_gas", (el, ctx) => {
+  const color = c5(el);
+  const fontSize = font4(el);
+  const showRot = el.showRotations !== false;
+  return /* @__PURE__ */ jsx9("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs9(OriginHitPlate, { ctx, hitHalfSize: 38, selectionHalfSize: 46, children: [
+    /* @__PURE__ */ jsx9("circle", { cx: -15, cy: 0, r: 8, fill: color, stroke: "#fff", strokeWidth: 2, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx9("circle", { cx: 15, cy: 0, r: 8, fill: color, stroke: "#fff", strokeWidth: 2, pointerEvents: "none" }),
+    /* @__PURE__ */ jsx9("line", { x1: -10, y1: 0, x2: 10, y2: 0, stroke: color, strokeWidth: 4, pointerEvents: "none" }),
+    showRot ? /* @__PURE__ */ jsxs9("g", { stroke: "#94a3b8", strokeWidth: 1.5, fill: "none", pointerEvents: "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", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("random_walk", (el, ctx) => {
+  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", pointerEvents: "none" }, "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" : c5(el), pointerEvents: "none" }, i)
+    );
+  }
+  return /* @__PURE__ */ jsxs9("g", { children: [
+    /* @__PURE__ */ jsxs9("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ jsx9(LocalFatPathHit, { dPath: d, strokeWidth: 20, strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx9("path", { d, fill: "none", stroke: c5(el), strokeWidth: sw5(el), strokeLinejoin: "round", pointerEvents: "none" }),
+      points,
+      el.label ? /* @__PURE__ */ jsx9("text", { x: dist / 2, y: dist / 2, fontSize: font4(el), fill: c5(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx9(ChordInteractionOverlay, { el, ctx, padX: Math.max(40, dist), padY: Math.max(40, dist) })
+  ] });
+});
+
+// src/core/renderers/chemistry.tsx
+import { Fragment as Fragment4, 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__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs10(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 30, 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 sw6 = strokeOf3(el, ctx.isSelected);
+  const baseSw = el.strokeWidth || 2;
+  const r = Math.max(12, baseSw * 4);
+  const plate = Math.max(28, r + (el.label ? 26 : 8));
+  return /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs10(OriginHitPlate, { ctx, hitHalfSize: plate, selectionHalfSize: plate + 10, children: [
+    /* @__PURE__ */ jsx10("circle", { cx: "0", cy: "0", r, fill: "white", stroke: stroke2, strokeWidth: sw6 }),
+    /* @__PURE__ */ jsx10("line", { x1: -r / 2, y1: "0", x2: r / 2, y2: "0", stroke: stroke2, strokeWidth: sw6 }),
+    /* @__PURE__ */ jsx10("line", { x1: "0", y1: -r / 2, x2: "0", y2: r / 2, stroke: stroke2, strokeWidth: sw6 }),
+    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)
+      }
+    ) : null
+  ] }) });
+});
+registerRenderer("charge_minus", (el, ctx) => {
+  const stroke2 = colorOf3(el, ctx.isSelected);
+  const sw6 = strokeOf3(el, ctx.isSelected);
+  const baseSw = el.strokeWidth || 2;
+  const r = Math.max(12, baseSw * 4);
+  const plate = Math.max(28, r + (el.label ? 26 : 8));
+  return /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs10(OriginHitPlate, { ctx, hitHalfSize: plate, selectionHalfSize: plate + 10, children: [
+    /* @__PURE__ */ jsx10("circle", { cx: "0", cy: "0", r, fill: "white", stroke: stroke2, strokeWidth: sw6 }),
+    /* @__PURE__ */ jsx10("line", { x1: -r / 2, y1: "0", x2: r / 2, y2: "0", stroke: stroke2, strokeWidth: sw6 }),
+    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)
+      }
+    ) : null
+  ] }) });
+});
+registerRenderer("radical", (el, ctx) => /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsx10(OriginHitPlate, { ctx, hitHalfSize: 14, selectionHalfSize: 22, children: /* @__PURE__ */ jsx10("circle", { cx: "0", cy: "0", r: "3.5", fill: colorOf3(el, ctx.isSelected) }) }) }));
+registerRenderer("lone_pair", (el, ctx) => /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs10(OriginHitPlate, { ctx, hitHalfSize: 16, selectionHalfSize: 24, 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 sw6 = strokeOf3(el, ctx.isSelected);
+  return /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsxs10(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, children: [
+    /* @__PURE__ */ jsx10("polygon", { points: ringPolygonPoints(6, r, -30), fill: "white", stroke: stroke2, strokeWidth: sw6, strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx10("circle", { cx: "0", cy: "0", r: r - 10, fill: "none", stroke: stroke2, strokeWidth: sw6 })
+  ] }) });
+});
+registerRenderer("cyclohexane", (el, ctx) => /* @__PURE__ */ jsx10("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ jsx10(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, 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(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, 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(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, 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(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, 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 sw6 = 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: sw6, strokeLinecap: "round" }),
+    style === "double" && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "-3.5", x2: d, y2: "-3.5", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "3.5", x2: d, y2: "3.5", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" })
+    ] }),
+    style === "triple" && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "-6", x2: d, y2: "-6", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx10("line", { x1: "0", y1: "6", x2: d, y2: "6", stroke: stroke2, strokeWidth: sw6, 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: sw6 + 1, strokeDasharray: "5 5", strokeLinecap: "square" })
+  ] });
+};
+registerRenderer("single_bond", (el, ctx) => /* @__PURE__ */ jsxs10("g", { children: [
+  drawBond(el, "single", ctx.isSelected),
+  /* @__PURE__ */ jsx10(ChordInteractionOverlay, { el, ctx })
+] }));
+registerRenderer("double_bond", (el, ctx) => /* @__PURE__ */ jsxs10("g", { children: [
+  drawBond(el, "double", ctx.isSelected),
+  /* @__PURE__ */ jsx10(ChordInteractionOverlay, { el, ctx })
+] }));
+registerRenderer("triple_bond", (el, ctx) => /* @__PURE__ */ jsxs10("g", { children: [
+  drawBond(el, "triple", ctx.isSelected),
+  /* @__PURE__ */ jsx10(ChordInteractionOverlay, { el, ctx })
+] }));
+registerRenderer("wedge_bond", (el, ctx) => /* @__PURE__ */ jsxs10("g", { children: [
+  drawBond(el, "wedge", ctx.isSelected),
+  /* @__PURE__ */ jsx10(ChordInteractionOverlay, { el, ctx })
+] }));
+registerRenderer("dash_bond", (el, ctx) => /* @__PURE__ */ jsxs10("g", { children: [
+  drawBond(el, "dash", ctx.isSelected),
+  /* @__PURE__ */ jsx10(ChordInteractionOverlay, { el, ctx })
+] }));
+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 sw6 = 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: sw6 }),
+      /* @__PURE__ */ jsx10("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: stroke2 })
+    ] }),
+    /* @__PURE__ */ jsx10(ChordInteractionOverlay, { el, ctx }),
+    el.label ? /* @__PURE__ */ jsx10("text", { x: mid.x, y: mid.y - 18, textAnchor: "middle", fill: "#0f766e", fontSize: "14", fontFamily: "sans-serif", fontWeight: "bold", pointerEvents: "none", children: String(el.label) }) : null,
+    el.value ? /* @__PURE__ */ jsx10("text", { x: mid.x, y: mid.y + 18, textAnchor: "middle", fill: "#4b5563", fontSize: "13", fontFamily: "sans-serif", pointerEvents: "none", children: String(el.value) }) : null
+  ] });
+});
+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 sw6 = 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: sw6 }),
+      /* @__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: sw6 }),
+      /* @__PURE__ */ jsx10("polygon", { points: `0,4 10,4 10,10`, fill: stroke2 })
+    ] }),
+    /* @__PURE__ */ jsx10(ChordInteractionOverlay, { el, ctx }),
+    el.label ? /* @__PURE__ */ jsx10("text", { x: mid.x, y: mid.y - 18, textAnchor: "middle", fill: "#0f766e", fontSize: "14", fontFamily: "sans-serif", fontWeight: "bold", pointerEvents: "none", children: String(el.label) }) : null,
+    el.value ? /* @__PURE__ */ jsx10("text", { x: mid.x, y: mid.y + 18, textAnchor: "middle", fill: "#4b5563", fontSize: "13", fontFamily: "sans-serif", pointerEvents: "none", children: String(el.value) }) : null
+  ] });
+});
+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 sw6 = strokeOf3(el, ctx.isSelected);
+  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: sw6 }),
+      /* @__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 })
+    ] }),
+    /* @__PURE__ */ jsx10(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 sw6 = strokeOf3(el, ctx.isSelected);
+  const curvePath = `M 0 0 Q ${d / 2} ${-h} ${d} 0`;
+  const bb = quadraticChordWorldBounds(el.x1, el.y1, el.x2, el.y2, h / 2);
+  return /* @__PURE__ */ jsxs10("g", { children: [
+    /* @__PURE__ */ jsxs10("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ jsx10("path", { d: curvePath, fill: "none", stroke: stroke2, strokeWidth: sw6 }),
+      /* @__PURE__ */ jsx10(LocalFatPathHit, { dPath: curvePath, strokeWidth: 24, strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx10("g", { transform: `translate(${d}, 0) rotate(${arrowAngle})`, children: /* @__PURE__ */ jsx10("polygon", { points: "0,0 -12,-6 -12,6", fill: stroke2 }) })
+    ] }),
+    ctx.isSelected && !ctx.viewMode && !ctx.isGhost ? selectionDashRect(bb.x, bb.y, bb.width, bb.height) : null,
+    endpointHandles(el, ctx)
+  ] });
+});
+
+// src/core/renderers/electrostatics.tsx
+import { Fragment as Fragment5, 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 c6 = 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: c6, fontSize: 14, fontFamily: "sans-serif", children: String(el.label) })
+  ] });
+};
+registerRenderer("charge_pos", (el, ctx) => {
+  const c6 = ctx.isSelected ? "#2563eb" : "#ef4444";
+  return /* @__PURE__ */ jsx11("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: /* @__PURE__ */ jsxs11(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 28, children: [
+    /* @__PURE__ */ jsx11("circle", { cx: "0", cy: "0", r: "10", fill: "#fecaca", stroke: c6, strokeWidth: width(el, ctx.isSelected) }),
+    /* @__PURE__ */ jsx11("line", { x1: "0", y1: "-4", x2: "0", y2: "4", stroke: c6, strokeWidth: 2 }),
+    /* @__PURE__ */ jsx11("line", { x1: "-4", y1: "0", x2: "4", y2: "0", stroke: c6, strokeWidth: 2 }),
+    el.label ? /* @__PURE__ */ jsx11("text", { x: 0, y: -16, textAnchor: "middle", fill: c6, fontSize: el.fontSize || 14, children: String(el.label) }) : null
+  ] }) });
+});
+registerRenderer("charge_neg", (el, ctx) => {
+  const c6 = ctx.isSelected ? "#2563eb" : "#3b82f6";
+  return /* @__PURE__ */ jsx11("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: /* @__PURE__ */ jsxs11(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 28, children: [
+    /* @__PURE__ */ jsx11("circle", { cx: "0", cy: "0", r: "10", fill: "#bfdbfe", stroke: c6, strokeWidth: width(el, ctx.isSelected) }),
+    /* @__PURE__ */ jsx11("line", { x1: "-4", y1: "0", x2: "4", y2: "0", stroke: c6, strokeWidth: 2 }),
+    el.label ? /* @__PURE__ */ jsx11("text", { x: 0, y: -16, textAnchor: "middle", fill: c6, fontSize: el.fontSize || 14, children: String(el.label) }) : null
+  ] }) });
+});
+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) }) : null,
+    /* @__PURE__ */ jsx11(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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(Fragment5, { 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 c6 = 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 sw6 = Math.max(12, el.strokeWidth * 4 || 8);
+  return /* @__PURE__ */ jsxs11("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
+    /* @__PURE__ */ jsxs11("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: [
+      /* @__PURE__ */ jsx11("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c6, strokeWidth: sw6, strokeLinecap: "round" }),
+      plateGlyphs(d, true)
+    ] }),
+    /* @__PURE__ */ jsx11(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("charged_plate_neg", (el, ctx) => {
+  const c6 = 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 sw6 = Math.max(12, el.strokeWidth * 4 || 8);
+  return /* @__PURE__ */ jsxs11("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
+    /* @__PURE__ */ jsxs11("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: [
+      /* @__PURE__ */ jsx11("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c6, strokeWidth: sw6, strokeLinecap: "round" }),
+      plateGlyphs(d, false)
+    ] }),
+    /* @__PURE__ */ jsx11(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("gaussian_sphere", (el, ctx) => {
+  const r = Math.max(10, distance(el.x1, el.y1, el.x2, el.y2));
+  const c6 = 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: c6, strokeWidth: width(el, ctx.isSelected), strokeDasharray: "5 5" }),
+    el.label ? /* @__PURE__ */ jsx11("text", { x: el.x1, y: el.y1 - r - 12, textAnchor: "middle", fill: c6, fontSize: 13, children: String(el.label) }) : null,
+    /* @__PURE__ */ jsx11(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+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 c6 = ctx.isSelected ? "#2563eb" : "#10b981";
+  const sw6 = width(el, ctx.isSelected);
+  const dash = "6 6";
+  return /* @__PURE__ */ jsxs11("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
+    /* @__PURE__ */ jsxs11("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: [
+      /* @__PURE__ */ jsx11("line", { x1: 0, y1: -r, x2: d, y2: -r, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      /* @__PURE__ */ jsx11("line", { x1: 0, y1: r, x2: d, y2: r, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      /* @__PURE__ */ jsx11("ellipse", { cx: 0, cy: 0, rx: capRx, ry: r, fill: c6, fillOpacity: 0.05, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      /* @__PURE__ */ jsx11("ellipse", { cx: d, cy: 0, rx: capRx, ry: r, fill: c6, fillOpacity: 0.05, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      el.label ? /* @__PURE__ */ jsx11("text", { x: d / 2, y: -r - 10, textAnchor: "middle", fill: c6, fontSize: el.fontSize || 14, children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ jsx11(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("mirror_plane", (el, ctx) => /* @__PURE__ */ jsxs11("g", { children: [
+  rotated2(
+    el,
+    /* @__PURE__ */ jsxs11(Fragment5, { 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
+  ),
+  /* @__PURE__ */ jsx11(ChordInteractionOverlay, { el, ctx })
+] }));
+registerRenderer("energy_level", (el, ctx) => {
+  const d = Math.max(24, distance(el.x1, el.y1, el.x2, el.y2));
+  const c6 = stroke(el, ctx.isSelected);
+  const energyText = el.energy != null ? String(el.energy) : "";
+  return /* @__PURE__ */ jsxs11("g", { children: [
+    rotated2(
+      el,
+      /* @__PURE__ */ jsxs11(Fragment5, { children: [
+        /* @__PURE__ */ jsx11("line", { x1: 0, y1: -8, x2: d, y2: -8, stroke: c6, strokeWidth: width(el, ctx.isSelected) }),
+        /* @__PURE__ */ jsx11("line", { x1: 0, y1: 8, x2: d, y2: 8, stroke: c6, strokeWidth: width(el, ctx.isSelected) }),
+        energyText ? /* @__PURE__ */ jsx11("text", { x: d / 2, y: 22, textAnchor: "middle", fontSize: 10, fill: "#4b5563", children: energyText }) : null
+      ] }),
+      ctx.isSelected
+    ),
+    /* @__PURE__ */ jsx11(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+
+// src/core/Renderer.tsx
+import { Fragment as Fragment6, 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,
+  onHandlePointerDown
+}) => {
+  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(Fragment6, { 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 ctx = {
+            isSelected: selectedId === el.id,
+            viewMode,
+            onHandlePointerDown: !viewMode && onHandlePointerDown ? (e, kind, cpIndex) => onHandlePointerDown(e, el, kind, cpIndex) : void 0
+          };
+          const content = renderer ? renderer(el, ctx) : /* @__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, onHandlePointerDown: void 0 }) });
+        })()
+      ]
+    }
+  );
+};
+
+export {
+  GRID_SIZE,
+  snap,
+  distance,
+  angleDeg,
+  getBounds,
+  getMouseCoords,
+  registerRenderer,
+  getRenderer,
+  hasRenderer,
+  Renderer
+};