@codefrydev/svg-engine 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -55,6 +55,13 @@ var getBounds = (x1, y1, x2, y2) => {
     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 };
@@ -63,6 +70,29 @@ var getMouseCoords = (svg, e) => {
     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();
@@ -72,20 +102,227 @@ var registerRenderer = (type, renderer) => {
 var getRenderer = (type) => rendererMap.get(type);
 var hasRenderer = (type) => rendererMap.has(type);
 
-// src/core/renderers/primitives.tsx
+// src/core/renderers/selectionChrome.tsx
 var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "circle",
+      {
+        cx: el.x1,
+        cy: el.y1,
+        r: 5,
+        fill: HANDLE_END,
+        cursor: "grab",
+        onMouseDown: (e) => ctx.onHandlePointerDown(e, "start")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: dPath,
+      fill: "none",
+      stroke: "transparent",
+      strokeWidth,
+      strokeLinecap,
+      strokeLinejoin
+    }
+  );
+}
+function OriginHitPlate({
+  ctx,
+  hitHalfSize,
+  selectionHalfSize,
+  children
+}) {
+  const selHalf = selectionHalfSize ?? hitHalfSize + 10;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    ctx.isSelected && !ctx.viewMode && !ctx.isGhost ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    includeHitFill ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    selectionDashRect(bMinX - pad, bMinY - pad, bMaxX - bMinX + 2 * pad, bMaxY - bMinY + 2 * pad),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "polyline",
+      {
+        points: pts.map((p) => `${p.x},${p.y}`).join(" "),
+        fill: "none",
+        stroke: "#94a3b8",
+        strokeDasharray: "4 4",
+        strokeWidth: 1,
+        pointerEvents: "none"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "circle",
+      {
+        cx: x1,
+        cy: y1,
+        r: 6,
+        fill: BEZIER_ANCHOR,
+        cursor: "grab",
+        onMouseDown: (e) => ctx.onHandlePointerDown(e, "start")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "circle",
+      {
+        cx: x2,
+        cy: y2,
+        r: 6,
+        fill: BEZIER_ANCHOR,
+        cursor: "grab",
+        onMouseDown: (e) => ctx.onHandlePointerDown(e, "end")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var colorOf = (el) => el.color || "#0f172a";
 var strokeOf = (el) => el.strokeWidth || 2;
 var fontOf = (el) => el.fontSize || 16;
-registerRenderer("point", (el) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "0", cy: "0", r: 3, fill: colorOf(el) }),
-  el.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: "8", y: "-8", fontSize: fontOf(el), fill: colorOf(el), children: String(el.label) })
-] }));
-registerRenderer("text", (el) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+registerRenderer("point", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 28, selectionHalfSize: 32, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "0", cy: "0", r: 3, fill: colorOf(el) }),
+  el.label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: "8", y: "-8", fontSize: fontOf(el), fill: colorOf(el), children: String(el.label) }) : null
+] }) }));
+registerRenderer("text", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OriginHitPlate, { ctx, hitHalfSize: Math.max(40, (el.label || el.value || "").length * 4), selectionHalfSize: void 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
   "text",
   {
-    x: el.x1,
-    y: el.y1,
+    x: 0,
+    y: 0,
     dominantBaseline: "central",
     textAnchor: "middle",
     fill: colorOf(el),
@@ -94,24 +331,27 @@ registerRenderer("text", (el) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     fontWeight: el.fontWeight || "normal",
     children: String(el.label || el.value || "")
   }
-));
-var lineLike = (el, arrow = false) => {
+) }) }));
+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__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: colorOf(el), strokeWidth: strokeOf(el), strokeDasharray: dashed, strokeLinecap: "round" }),
-    arrow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: colorOf(el) }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: d / 2, y: -10, fontSize: fontOf(el), fill: colorOf(el), textAnchor: "middle", children: String(el.label) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: colorOf(el), strokeWidth: strokeOf(el), strokeDasharray: dashed, strokeLinecap: "round" }),
+      arrow ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: colorOf(el) }) : null,
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: d / 2, y: -10, fontSize: fontOf(el), fill: colorOf(el), textAnchor: "middle", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 };
-registerRenderer("line", (el) => lineLike(el));
-registerRenderer("dashed", (el) => lineLike({ ...el, lineStyle: "dashed" }));
-registerRenderer("dashed_line", (el) => lineLike({ ...el, lineStyle: "dashed" }));
-registerRenderer("vector", (el) => lineLike(el, true));
-registerRenderer("ray", (el) => lineLike(el, true));
-registerRenderer("wire", (el) => lineLike(el));
-registerRenderer("table_edge", (el) => {
+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);
@@ -123,42 +363,46 @@ registerRenderer("table_edge", (el) => {
   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__ */ (0, import_jsx_runtime.jsx)("line", { x1: x, y1: minY, x2: x - 8, y2: minY + 10, stroke: colorOf(el), strokeWidth: 1 }, `h-${j}`));
+    hashes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: x, y1: minY, x2: x - 8, y2: minY + 10, stroke: colorOf(el), strokeWidth: 1 }, `h-${j}`));
   }
   for (let j = 0; j <= numV; j++) {
     const y = minY + j / numV * h;
-    hashes.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: maxX, y1: y, x2: maxX - 10, y2: y + 8, stroke: colorOf(el), strokeWidth: 1 }, `v-${j}`));
+    hashes.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: maxX, y1: y, x2: maxX - 10, y2: y + 8, stroke: colorOf(el), strokeWidth: 1 }, `v-${j}`));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: `${minX},${minY} ${maxX},${minY} ${maxX},${maxY}`, fill: "none", stroke: colorOf(el), strokeWidth: strokeOf(el) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: `${minX},${minY} ${maxX},${minY} ${maxX},${maxY}`, fill: "none", stroke: colorOf(el), strokeWidth: strokeOf(el) }),
     hashes,
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: minX + w / 2, y: minY - 10, fill: colorOf(el), textAnchor: "middle", fontSize: fontOf(el), children: String(el.label) })
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: minX + w / 2, y: minY - 10, fill: colorOf(el), textAnchor: "middle", fontSize: fontOf(el), children: String(el.label) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BBoxInteractionOverlay, { minX, minY, width: w, height: h, ctx, inset: 12 }),
+    endpointHandles(el, ctx)
   ] });
 });
 
 // src/core/renderers/mechanics.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: el.x1, cy: el.y1, r, fill: c(el), fillOpacity: fo(el), stroke: c(el), strokeWidth: sw(el) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "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`,
@@ -174,11 +418,11 @@ 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__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("path", { d: `M 0 ${-r} L ${d} ${-r} M 0 ${r} L ${d} ${r}`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: d, cy: 0, rx: 10, ry: r, fill: c(el), fillOpacity: fo(el), stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: 0, cy: 0, rx: 10, ry: r, fill: "none", stroke: c(el), strokeWidth: sw(el), strokeDasharray: "2 4" })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("path", { d: `M 0 ${-r} L ${d} ${-r} M 0 ${r} L ${d} ${r}`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: d, cy: 0, rx: 10, ry: r, fill: c(el), fillOpacity: fo(el), stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: 0, cy: 0, rx: 10, ry: r, fill: "none", stroke: c(el), strokeWidth: sw(el), strokeDasharray: "2 4" })
   ] });
 });
 registerRenderer("ladder", (el) => {
@@ -187,11 +431,11 @@ registerRenderer("ladder", (el) => {
   const hw = el.curveHeight ?? 10;
   const rungs = [];
   for (let i = 15; i < d - 10; i += 15) {
-    rungs.push(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: i, y1: -hw, x2: i, y2: hw, stroke: c(el), strokeWidth: Math.max(1, sw(el) - 1) }, i));
+    rungs.push(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: i, y1: -hw, x2: i, y2: hw, stroke: c(el), strokeWidth: Math.max(1, sw(el) - 1) }, i));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: 0, y1: -hw, x2: d, y2: -hw, stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: 0, y1: hw, x2: d, y2: hw, stroke: c(el), strokeWidth: sw(el) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: -hw, x2: d, y2: -hw, stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: hw, x2: d, y2: hw, stroke: c(el), strokeWidth: sw(el) }),
     rungs
   ] });
 });
@@ -204,59 +448,93 @@ registerRenderer("spring", (el) => {
     path += ` L ${i * 12 + 3} 8 L ${i * 12 + 9} -8`;
   }
   path += ` L ${d} 0`;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: path, fill: "none", stroke: c(el), strokeWidth: sw(el), strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: Math.max(4, sw(el)), strokeLinecap: "round" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: `M ${r} 0 A ${r} ${r} 0 0 0 ${-r} 0`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: `${-r},2 ${-r - 6},-10 ${-r + 6},-10`, fill: c(el) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: `M ${r} 0 A ${r} ${r} 0 0 0 ${-r} 0`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: `${-r},2 ${-r - 6},-10 ${-r + 6},-10`, fill: c(el) })
   ] });
 });
-registerRenderer("lens_convex", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const cx = b.minX + b.width / 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx, cy: b.minY + b.height / 2, rx: Math.max(6, b.width / 2), ry: b.height / 2, fill: c(el), fillOpacity: Math.max(0.15, fo(el)), stroke: c(el), strokeWidth: sw(el) });
+registerRenderer("lens_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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: pathD, fill: c(el), fillOpacity: Math.max(0.15, fo(el)), stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: d / 2, y: -arcH - 10, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LocalFatPathHit, { dPath: pathD, strokeWidth: 28, strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChordInteractionOverlay, { el, ctx, padX: 15 + bulgePad, padY: 20 + bulgePad })
+  ] });
 });
-registerRenderer("lens_concave", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const cx = b.minX + b.width / 2;
-  const rx = Math.max(6, b.width / 2);
-  const ry = b.height / 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "path",
-    {
-      d: `M ${cx - rx} ${b.minY} Q ${cx - rx * 0.2} ${b.minY + ry} ${cx - rx} ${b.maxY} M ${cx + rx} ${b.minY} Q ${cx + rx * 0.2} ${b.minY + ry} ${cx + rx} ${b.maxY}`,
-      fill: "none",
-      stroke: c(el),
-      strokeWidth: sw(el)
-    }
-  );
+registerRenderer("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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: pathD, fill: c(el), fillOpacity: Math.max(0.15, fo(el)), stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: d / 2, y: -hw - 10, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LocalFatPathHit, { dPath: pathD, strokeWidth: 28, strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChordInteractionOverlay, { el, ctx, padX: 15 + bulgePad, padY: 20 + bulgePad })
+  ] });
 });
-registerRenderer("mirror_concave", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const ch = el.curveHeight ?? 40;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: `M ${b.minX} ${b.minY} Q ${b.maxX + ch} ${b.minY + b.height / 2} ${b.minX} ${b.maxY}`, fill: "none", stroke: c(el), strokeWidth: sw(el) });
+registerRenderer("mirror_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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: pathD, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: d / 2, y: -15, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LocalFatPathHit, { dPath: pathD, strokeWidth: 28, strokeLinecap: "round" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChordInteractionOverlay, { el, ctx, padX: 15 + bulgePad, padY: 20 + bulgePad })
+  ] });
 });
-registerRenderer("mirror_convex", (el) => {
-  const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const ch = el.curveHeight ?? 40;
-  const midY = b.minY + b.height / 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: `M ${b.minX} ${b.minY} Q ${b.minX - ch} ${midY} ${b.minX} ${b.maxY}`, fill: "none", stroke: c(el), strokeWidth: sw(el) });
+registerRenderer("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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: pathD, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: d / 2, y: -15, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LocalFatPathHit, { dPath: pathD, strokeWidth: 28, strokeLinecap: "round" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("text", { x: d / 2, y: py - 10, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("text", { x: d / 2, y: py - 10, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) })
   ] });
 });
 registerRenderer("slit_single", (el) => {
@@ -265,18 +543,18 @@ registerRenderer("slit_single", (el) => {
   const gap = 16;
   const thick = Math.max(4, sw(el));
   const fs = el.fontSize || 16;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: 0, y1: 0, x2: d / 2 - gap / 2, y2: 0, stroke: c(el), strokeWidth: thick, strokeLinecap: "square" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: d / 2 + gap / 2, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: thick, strokeLinecap: "square" }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: d / 2, y: -14, fontSize: fs, fill: c(el), textAnchor: "middle", children: String(el.label) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: 0, x2: d / 2 - gap / 2, y2: 0, stroke: c(el), strokeWidth: thick, strokeLinecap: "square" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: d / 2 + gap / 2, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: thick, strokeLinecap: "square" }),
+    el.label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: cx - 6, y1: b.minY, x2: cx - 6, y2: b.maxY, stroke: c(el), strokeWidth: sw(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: cx + 6, y1: b.minY, x2: cx + 6, y2: b.maxY, stroke: c(el), strokeWidth: sw(el) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: cx - 6, y1: b.minY, x2: cx - 6, y2: b.maxY, stroke: c(el), strokeWidth: sw(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: cx + 6, y1: b.minY, x2: cx + 6, y2: b.maxY, stroke: c(el), strokeWidth: sw(el) })
   ] });
 });
 registerRenderer("photon", (el) => {
@@ -292,19 +570,19 @@ registerRenderer("photon", (el) => {
     path += `L ${x} ${y} `;
   }
   path += `L ${d} 0`;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: path, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: d / 2, y: -12, textAnchor: "middle", fill: c(el), children: String(el.label) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: path, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+    el.label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "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`,
@@ -317,69 +595,230 @@ registerRenderer("pipe", (el) => {
 });
 registerRenderer("liquid", (el) => {
   const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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" });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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) => {
+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__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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) => {
+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__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: `${mid + 6},0 ${mid - 6},-5 ${mid - 6},5`, fill: c(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: mid, y: -10, textAnchor: "middle", fill: c(el), fontSize: fs, children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: `${mid + 6},0 ${mid - 6},-5 ${mid - 6},5`, fill: c(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: mid, y: -10, textAnchor: "middle", fill: c(el), fontSize: fs, children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("b_field_curve", (el) => {
+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;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "path",
-      {
-        d: `M 0 0 Q ${d / 2} ${-curveHeight * 2} ${d} 0`,
-        fill: "none",
-        stroke: c(el),
-        strokeWidth: sw(el),
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: `${d / 2 + 6},${apexY} ${d / 2 - 6},${apexY - 5} ${d / 2 - 6},${apexY + 5}`, fill: c(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: d / 2, y: apexY - 15, textAnchor: "middle", fill: c(el), fontSize: fs, children: String(el.label) }) : null
+  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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: curvePath, fill: "none", stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: `${d / 2 + 6},${apexY} ${d / 2 - 6},${apexY - 5} ${d / 2 - 6},${apexY + 5}`, fill: c(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: d / 2, y: apexY - 15, textAnchor: "middle", fill: c(el), fontSize: fs, children: String(el.label) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: el.x1, y1: el.y1, x2: el.x1 + 100, y2: el.y1, stroke: c(el), strokeWidth: sw(el) }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: el.x1, y1: el.y1, x2: el.x1, y2: el.y1 - 100, stroke: c(el), strokeWidth: sw(el) }),
-  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: el.x1, y1: el.y1, x2: el.x1 + 70, y2: el.y1 + 50, stroke: c(el), strokeWidth: sw(el) })
+registerRenderer("axes_3d", (el) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: el.x1, y1: el.y1, x2: el.x1 + 100, y2: el.y1, stroke: c(el), strokeWidth: sw(el) }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: el.x1, y1: el.y1, x2: el.x1, y2: el.y1 - 100, stroke: c(el), strokeWidth: sw(el) }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsx)("line", { x1: i * 12, y1: 0, x2: i * 12 - 8, y2: 12, stroke: c(el), strokeWidth: 1.5 }, i));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el) + 0.5, strokeLinecap: "round" }),
+      hatches
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${cx}, ${cy}) rotate(${rot})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: -w / 2, y: -h / 2, width: w, height: h, fill: "#f1f5f9", stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "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__ */ (0, import_jsx_runtime3.jsx)(
+        "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__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${cx}, ${cy}) rotate(${rot})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: -w / 2, y: -h / 2, width: w, height: h - wheelR, fill: "#f1f5f9", stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: -w / 2 + wheelR * 1.5, cy: h / 2 - wheelR, r: wheelR, fill: "#cbd5e1", stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: w / 2 - wheelR * 1.5, cy: h / 2 - wheelR, r: wheelR, fill: "#cbd5e1", stroke: c(el), strokeWidth: sw(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "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__ */ (0, import_jsx_runtime3.jsx)(
+        "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__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r, fill: c(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("text", { x: 0, y: r + 12, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: 14, fontFamily: "sans-serif", children: String(el.value) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r, fill: "#e2e8f0", stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: 0, x2: r, y2: 0, stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r: 3, fill: c(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("text", { x: 0, y: r + 12, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: 14, fontFamily: "sans-serif", children: String(el.value) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
+registerRenderer("com", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 28, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r: 10, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M 0 -10 A 10 10 0 0 1 10 0 L 0 0 Z", fill: c(el) }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 24, selectionHalfSize: 32, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "0,0 -12,20 12,20", fill: "#f8fafc", stroke: c(el), strokeWidth: sw(el), strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: -20, y1: 20, x2: 20, y2: 20, stroke: c(el), strokeWidth: sw(el), strokeLinecap: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r, fill: "#f8fafc", stroke: c(el), strokeWidth: sw(el) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r: 4, fill: c(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(ChordInteractionOverlay, { el, ctx })
+  ] });
+});
 registerRenderer("wedge", (el) => {
   const dx = el.x2 - el.x1;
   const dy = el.y2 - el.y1;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: `0,0 ${dx},0 ${dx},${dy}`, fill: "#f1f5f9", stroke: c(el), strokeWidth: sw(el), strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: `0,0 ${dx},0 ${dx},${dy}`, fill: "#f1f5f9", stroke: c(el), strokeWidth: sw(el), strokeLinejoin: "round" }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "text",
       {
         x: dx * 0.6,
@@ -399,11 +838,11 @@ 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__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: w, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: `0,0 10,-5 10,5`, fill: c(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: `${d},0 ${d - 10},-5 ${d - 10},5`, fill: c(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: d / 2, y: -10, textAnchor: "middle", fill: c(el), fontSize: 18, fontFamily: "serif", fontStyle: "italic", fontWeight: "bold", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: w, strokeDasharray: "4 4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: `0,0 10,-5 10,5`, fill: c(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: `${d},0 ${d - 10},-5 ${d - 10},5`, fill: c(el) }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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) => {
@@ -422,10 +861,10 @@ registerRenderer("arc", (el) => {
   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__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: 0, y1: 0, x2: refLen, y2: 0, stroke: c(el), strokeWidth: 1.5, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: `M ${startX} ${startY} A ${R} ${R} 0 0 ${sweepFlag} ${endX} ${endY}`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: 0, x2: refLen, y2: 0, stroke: c(el), strokeWidth: 1.5, strokeDasharray: "4 4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: `M ${startX} ${startY} A ${R} ${R} 0 0 ${sweepFlag} ${endX} ${endY}`, fill: "none", stroke: c(el), strokeWidth: sw(el) }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "text",
       {
         x: tx,
@@ -446,35 +885,35 @@ registerRenderer("nucleus", (el) => {
   const fs = el.fontSize || 18;
   const stroke2 = c(el);
   const w = sw(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(30)" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(-30)" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(90)" }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: 0, cy: 0, r: 6, fill: "#ef4444" }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("text", { x: 0, y: 36, fontSize: fs, fill: stroke2, textAnchor: "middle", children: String(el.label) })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(30)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(-30)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ellipse", { cx: 0, cy: 0, rx: 24, ry: 8, fill: "none", stroke: stroke2, strokeWidth: w, transform: "rotate(90)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r: 6, fill: "#ef4444" }),
+    el.label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c(el), strokeWidth: sw(el) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime2.jsx)("rect", { x: b.minX, y: b.minY, width: b.width, height: b.height, fill: "none", stroke: c(el), strokeWidth: sw(el) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("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) => {
+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;
@@ -487,21 +926,22 @@ registerRenderer("b_region_in", (el) => {
   for (let px = minX + spacing / 2; px <= maxX; px += spacing) {
     for (let py = minY + spacing / 2; py <= maxY; py += spacing) {
       marks.push(
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${px}, ${py})`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r: markR, fill: "none", stroke: c2(el), strokeWidth: sw2(el) * 0.75 }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime4.jsxs)("g", { transform: `translate(${px}, ${py})`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: 0, cy: 0, r: markR, fill: "none", stroke: c2(el), strokeWidth: sw2(el) * 0.75 }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("text", { x: midX, y: minY - 10, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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) => {
+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;
@@ -514,93 +954,100 @@ registerRenderer("b_region_out", (el) => {
   for (let px = minX + spacing / 2; px <= maxX; px += spacing) {
     for (let py = minY + spacing / 2; py <= maxY; py += spacing) {
       marks.push(
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${px}, ${py})`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r: markR, fill: "none", stroke: c2(el), strokeWidth: sw2(el) * 0.75 }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r: 2, fill: c2(el) })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { transform: `translate(${px}, ${py})`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: 0, cy: 0, r: markR, fill: "none", stroke: c2(el), strokeWidth: sw2(el) * 0.75 }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: 0, cy: 0, r: 2, fill: c2(el) })
         ] }, `${px}-${py}`)
       );
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime3.jsx)("text", { x: midX, y: minY - 10, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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) => {
+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__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c2(el), strokeWidth: sw2(el), strokeDasharray: dashOf(el), strokeLinecap: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: `${mid + 8},0 ${mid - 6},-7 ${mid - 6},7`, fill: c2(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "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
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c2(el), strokeWidth: sw2(el), strokeDasharray: dashOf(el), strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polygon", { points: `${mid + 8},0 ${mid - 6},-7 ${mid - 6},7`, fill: c2(el) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("bar_magnet", (el) => {
+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__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: 0, y: -magW / 2, width: d / 2, height: magW, fill: "#ef4444", stroke: c2(el), strokeWidth: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: d / 2, y: -magW / 2, width: d / 2, height: magW, fill: "#3b82f6", stroke: c2(el), strokeWidth: 1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "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__ */ (0, import_jsx_runtime3.jsx)(
-      "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__ */ (0, import_jsx_runtime3.jsx)(
-      "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
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: 0, y: -magW / 2, width: d / 2, height: magW, fill: "#ef4444", stroke: c2(el), strokeWidth: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: d / 2, y: -magW / 2, width: d / 2, height: magW, fill: "#3b82f6", stroke: c2(el), strokeWidth: 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("coil", (el) => {
+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);
@@ -609,35 +1056,39 @@ registerRenderer("coil", (el) => {
     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__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: dPath, fill: "none", stroke: c2(el), strokeWidth: sw2(el), strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "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
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: dPath, fill: "none", stroke: c2(el), strokeWidth: sw2(el), strokeLinejoin: "round" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "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__ */ (0, import_jsx_runtime4.jsx)(LocalFatPathHit, { dPath, strokeWidth: 24, strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("meter", (el) => {
+registerRenderer("meter", (el, ctx) => {
   const r = Math.max(16, sw2(el) * 5);
   const label = String(el.label || "G");
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r, fill: "white", stroke: c2(el), strokeWidth: sw2(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: 0, y: 0, fontSize: fontSizeOf(el), fill: c2(el), fontWeight: "bold", textAnchor: "middle", dominantBaseline: "central", children: label })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 20, selectionHalfSize: 30, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: 0, cy: 0, r, fill: "white", stroke: c2(el), strokeWidth: sw2(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: 0, y: 0, fontSize: fontSizeOf(el), fill: c2(el), fontWeight: "bold", textAnchor: "middle", dominantBaseline: "central", children: label })
+  ] }) });
 });
-registerRenderer("ac_source", (el) => {
+registerRenderer("ac_source", (el, ctx) => {
   const r = Math.max(16, sw2(el) * 5);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: 0, cy: 0, r, fill: "white", stroke: c2(el), strokeWidth: sw2(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 30, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: 0, cy: 0, r, fill: "white", stroke: c2(el), strokeWidth: sw2(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "path",
       {
         d: `M ${-r * 0.6} 0 Q ${-r * 0.3} ${-r * 0.6} 0 0 T ${r * 0.6} 0`,
@@ -646,28 +1097,30 @@ registerRenderer("ac_source", (el) => {
         strokeWidth: sw2(el) * 0.8
       }
     ),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: 0, y: r + 18, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: 0, y: r + 18, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", children: String(el.label) }) : null
+  ] }) });
 });
-registerRenderer("bezier", (el) => {
+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__ */ (0, import_jsx_runtime3.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: dPath, fill: "none", stroke: "transparent", strokeWidth: 24, strokeLinecap: "round", strokeLinejoin: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: dPath, fill: "none", stroke: c2(el), strokeWidth: sw2(el), strokeDasharray: dashOf(el), strokeLinecap: "round", strokeLinejoin: "round" }),
-    showArrow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { transform: `translate(${labelX}, ${labelY}) rotate(${angleRad * 180 / Math.PI})`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "6,0 -6,-5 -6,5", fill: c2(el) }) }) : null,
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("text", { x: labelX, y: labelY - 14, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: dPath, fill: "none", stroke: "transparent", strokeWidth: 24, strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: dPath, fill: "none", stroke: c2(el), strokeWidth: sw2(el), strokeDasharray: dashOf(el), strokeLinecap: "round", strokeLinejoin: "round" }),
+    showArrow ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", { transform: `translate(${labelX}, ${labelY}) rotate(${angleRad * 180 / Math.PI})`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polygon", { points: "6,0 -6,-5 -6,5", fill: c2(el) }) }) : null,
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: labelX, y: labelY - 14, fontSize: fontSizeOf(el), fill: c2(el), textAnchor: "middle", children: String(el.label) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BezierEditChrome, { x1, y1, x2, y2, cp0, ctx, pts })
   ] });
 });
 
 // src/core/renderers/graph.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var colorOf2 = (el) => el.color || "#0f172a";
 var strokeOf2 = (el) => el.strokeWidth || 2;
 var fontOf2 = (el) => el.fontSize || 16;
@@ -686,68 +1139,70 @@ registerRenderer("axes", (el, ctx) => {
   const midY = (minY + maxY) / 2;
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const 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__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: cx, y1: cy, x2: cx + arm, y2: cy, stroke: c7, strokeWidth: sw7 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polygon", { points: `${cx + arm},${cy} ${cx + arm - 8},${cy - 5} ${cx + arm - 8},${cy + 5}`, fill: c7 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { opacity: op(ctx), transform: `translate(${cx}, ${cy})`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 52, selectionHalfSize: 58, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: arm, y2: 0, stroke: c6, strokeWidth: sw6 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: `${arm},0 ${arm - 8},-5 ${arm - 8},5`, fill: c6 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "text",
         {
-          x: cx + arm + 10,
-          y: cy,
+          x: arm + 10,
+          y: 0,
           dominantBaseline: "central",
           textAnchor: "middle",
-          fill: c7,
+          fill: c6,
           fontSize: fs,
           fontFamily: "serif",
           fontStyle: "italic",
           children: "x"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: cx, y1: cy, x2: cx, y2: cy - arm, stroke: c7, strokeWidth: sw7 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polygon", { points: `${cx},${cy - arm} ${cx - 5},${cy - arm + 8} ${cx + 5},${cy - arm + 8}`, fill: c7 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: -arm, stroke: c6, strokeWidth: sw6 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: `0,${-arm} -5,${-arm + 8} 5,${-arm + 8}`, fill: c6 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "text",
         {
-          x: cx,
-          y: cy - arm - 12,
+          x: 0,
+          y: -arm - 12,
           dominantBaseline: "central",
           textAnchor: "middle",
-          fill: c7,
+          fill: c6,
           fontSize: fs,
           fontFamily: "serif",
           fontStyle: "italic",
           children: "y"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx, cy, r: 2, fill: c7 })
-    ] });
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: 0, cy: 0, r: 2, fill: c6 })
+    ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: midX, y1: minY, x2: midX, y2: maxY, stroke: c7, strokeWidth: sw7, strokeDasharray: dash, opacity: 0.8 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: minX, y1: midY, x2: maxX, y2: midY, stroke: c7, strokeWidth: sw7, strokeDasharray: dash, opacity: 0.8 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polygon", { points: `${maxX},${midY} ${maxX - 10},${midY - 5} ${maxX - 10},${midY + 5}`, fill: c7, opacity: 0.8 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polygon", { points: `${midX},${minY} ${midX - 5},${minY + 10} ${midX + 5},${minY + 10}`, fill: c7, opacity: 0.8 })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: midX, y1: minY, x2: midX, y2: maxY, stroke: c6, strokeWidth: sw6, strokeDasharray: dash, opacity: 0.8 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: minX, y1: midY, x2: maxX, y2: midY, stroke: c6, strokeWidth: sw6, strokeDasharray: dash, opacity: 0.8 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: `${maxX},${midY} ${maxX - 10},${midY - 5} ${maxX - 10},${midY + 5}`, fill: c6, opacity: 0.8 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: `${midX},${minY} ${midX - 5},${minY + 10} ${midX + 5},${minY + 10}`, fill: c6, opacity: 0.8 })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("circle", (el, ctx) => {
   const r = distance(el.x1, el.y1, el.x2, el.y2);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: el.x1, cy: el.y1, r, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash, pointerEvents: "none" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: el.x1, cy: el.y1, r, fill: "transparent", stroke: "transparent", strokeWidth: 20 })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: el.x1, cy: el.y1, r, fill: "none", stroke: c6, strokeWidth: sw6, strokeDasharray: dash, pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("ellipse", (el, ctx) => {
@@ -759,22 +1214,25 @@ registerRenderer("ellipse", (el, ctx) => {
   const midY = (minY + maxY) / 2;
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ellipse", { cx: midX, cy: midY, rx: w / 2, ry: h / 2, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash, pointerEvents: "none" })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ellipse", { cx: midX, cy: midY, rx: w / 2, ry: h / 2, fill: "none", stroke: c6, strokeWidth: sw6, strokeDasharray: dash, pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("rectangle", (el, ctx) => {
   const b = getBounds(el.x1, el.y1, el.x2, el.y2);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: b.minX, y: b.minY, width: b.width, height: b.height, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(
       "rect",
       {
         x: b.minX,
@@ -782,13 +1240,14 @@ registerRenderer("rectangle", (el, ctx) => {
         width: b.width,
         height: b.height,
         fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
+        stroke: c6,
+        strokeWidth: sw6,
         strokeDasharray: dash,
         strokeLinejoin: "round",
         pointerEvents: "none"
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("angle", (el, ctx) => {
@@ -802,8 +1261,8 @@ registerRenderer("angle", (el, ctx) => {
   const maxY = Math.max(y1, y2);
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
   const fs = fontOf2(el);
   const angleRad = Math.atan2(dy, dx);
@@ -820,28 +1279,29 @@ registerRenderer("angle", (el, ctx) => {
   const arcEndX = x1 + arcR * Math.cos(angleRad);
   const arcEndY = y1 + arcR * Math.sin(angleRad);
   const deg = angleRad * 180 / Math.PI;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1, y1, x2: x1 + dx, y2: y1, stroke: c7, strokeWidth: sw7, strokeDasharray: "4 4", opacity: 0.6 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1, y1, x2, y2, stroke: c7, strokeWidth: sw7, strokeLinecap: "round", strokeDasharray: dash }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", { transform: `translate(${x2}, ${y2}) rotate(${deg})`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polygon", { points: "0,0 -12,-6 -12,6", fill: c7 }) }),
-      dist > 20 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1, y1, x2: x1 + dx, y2: y1, stroke: c6, strokeWidth: sw6, strokeDasharray: "4 4", opacity: 0.6 }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1, y1, x2, y2, stroke: c6, strokeWidth: sw6, strokeLinecap: "round", strokeDasharray: dash }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { transform: `translate(${x2}, ${y2}) rotate(${deg})`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "0,0 -12,-6 -12,6", fill: c6 }) }),
+      dist > 20 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "path",
         {
           d: `M ${arcStartX} ${arcStartY} A ${arcR} ${arcR} 0 0 ${sweepFlag} ${arcEndX} ${arcEndY}`,
           fill: "none",
-          stroke: c7,
-          strokeWidth: sw7
+          stroke: c6,
+          strokeWidth: sw6
         }
       ),
-      el.label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      el.label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "text",
         {
           x: x1 + (arcR + 16) * Math.cos(midA),
           y: y1 + (arcR + 16) * Math.sin(midA),
           fontSize: fs,
-          fill: c7,
+          fill: c6,
           fontFamily: "serif",
           fontStyle: "italic",
           dominantBaseline: "central",
@@ -849,7 +1309,8 @@ registerRenderer("angle", (el, ctx) => {
           children: String(el.label)
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("parabola_v", (el, ctx) => {
@@ -861,22 +1322,24 @@ registerRenderer("parabola_v", (el, ctx) => {
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
   const cpY = 2 * el.y1 - el.y2;
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "path",
       {
         d: `M ${minX} ${el.y2} Q ${midX} ${cpY} ${maxX} ${el.y2}`,
         fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
+        stroke: c6,
+        strokeWidth: sw6,
         strokeDasharray: dash,
         pointerEvents: "none"
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("parabola_h", (el, ctx) => {
@@ -888,22 +1351,24 @@ registerRenderer("parabola_h", (el, ctx) => {
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
   const cpX = 2 * el.x1 - el.x2;
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "path",
       {
         d: `M ${el.x2} ${minY} Q ${cpX} ${midY} ${el.x2} ${maxY}`,
         fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
+        stroke: c6,
+        strokeWidth: sw6,
         strokeDasharray: dash,
         pointerEvents: "none"
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("hyperbola", (el, ctx) => {
@@ -915,15 +1380,17 @@ registerRenderer("hyperbola", (el, ctx) => {
   const midY = (minY + maxY) / 2;
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: `M ${minX} ${minY} Q ${midX} ${midY} ${minX} ${maxY}`, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: `M ${maxX} ${minY} Q ${midX} ${midY} ${maxX} ${maxY}`, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: `M ${minX} ${minY} Q ${midX} ${midY} ${minX} ${maxY}`, fill: "none", stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: `M ${maxX} ${minY} Q ${midX} ${midY} ${maxX} ${maxY}`, fill: "none", stroke: c6, strokeWidth: sw6, strokeDasharray: dash })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("modulus", (el, ctx) => {
@@ -934,24 +1401,26 @@ registerRenderer("modulus", (el, ctx) => {
   const midX = (minX + maxX) / 2;
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "polyline",
       {
         points: `${minX},${minY} ${midX},${maxY} ${maxX},${minY}`,
         fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
+        stroke: c6,
+        strokeWidth: sw6,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         strokeDasharray: dash,
         pointerEvents: "none"
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("exponential", (el, ctx) => {
@@ -962,22 +1431,24 @@ registerRenderer("exponential", (el, ctx) => {
   const midX = (minX + maxX) / 2;
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "path",
       {
         d: `M ${minX} ${maxY} Q ${midX + w * 0.2} ${maxY} ${maxX} ${minY}`,
         fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
+        stroke: c6,
+        strokeWidth: sw6,
         strokeDasharray: dash,
         pointerEvents: "none"
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("logarithmic", (el, ctx) => {
@@ -988,22 +1459,24 @@ registerRenderer("logarithmic", (el, ctx) => {
   const midY = (minY + maxY) / 2;
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "path",
       {
         d: `M ${minX} ${maxY} Q ${minX} ${midY - h * 0.2} ${maxX} ${minY}`,
         fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
+        stroke: c6,
+        strokeWidth: sw6,
         strokeDasharray: dash,
         pointerEvents: "none"
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("sine_wave", (el, ctx) => {
@@ -1011,29 +1484,30 @@ registerRenderer("sine_wave", (el, ctx) => {
   const maxX = Math.max(el.x1, el.x2);
   const minY = Math.min(el.y1, el.y2);
   const maxY = Math.max(el.y1, el.y2);
-  const midX = (minX + maxX) / 2;
   const midY = (minY + maxY) / 2;
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
   const s = w / 4;
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "path",
       {
         d: `M ${minX} ${midY} Q ${minX + s / 2} ${minY}, ${minX + s} ${midY} T ${minX + 2 * s} ${midY} T ${minX + 3 * s} ${midY} T ${maxX} ${midY}`,
         fill: "none",
-        stroke: c7,
-        strokeWidth: sw7,
+        stroke: c6,
+        strokeWidth: sw6,
         strokeLinecap: "round",
         strokeLinejoin: "round",
         strokeDasharray: dash,
         pointerEvents: "none"
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("step_function", (el, ctx) => {
@@ -1043,8 +1517,8 @@ registerRenderer("step_function", (el, ctx) => {
   const maxY = Math.max(el.y1, el.y2);
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
   const stepsCount = 4;
   const stepW = w / stepsCount;
@@ -1055,16 +1529,18 @@ registerRenderer("step_function", (el, ctx) => {
     const curY = maxY - i * stepH;
     const nextX = curX + stepW;
     steps.push(
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: curX, y1: curY, x2: nextX, y2: curY, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: curX, cy: curY, r: sw7 * 1.5, fill: c7 }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: nextX, cy: curY, r: sw7 * 1.5, fill: "white", stroke: c7, strokeWidth: sw7 * 0.75 })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: curX, y1: curY, x2: nextX, y2: curY, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: curX, cy: curY, r: sw6 * 1.5, fill: c6 }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: nextX, cy: curY, r: sw6 * 1.5, fill: "white", stroke: c6, strokeWidth: sw6 * 0.75 })
       ] }, i)
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("g", { pointerEvents: "none", children: steps })
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("g", { pointerEvents: "none", children: steps }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("shaded_area", (el, ctx) => {
@@ -1075,37 +1551,40 @@ registerRenderer("shaded_area", (el, ctx) => {
   const midX = (minX + maxX) / 2;
   const w = Math.max(1, maxX - minX);
   const h = Math.max(1, maxY - minY);
-  const c7 = colorOf2(el);
-  const sw7 = strokeOf2(el);
+  const c6 = colorOf2(el);
+  const sw6 = strokeOf2(el);
   const dash = dashOf2(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { opacity: op(ctx), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { pointerEvents: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { opacity: op(ctx), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: minX, y: minY, width: w, height: h, fill: "transparent" }),
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { pointerEvents: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "path",
         {
           d: `M ${minX} ${maxY} L ${minX} ${minY + h * 0.3} Q ${midX} ${minY} ${maxX} ${minY + h * 0.3} L ${maxX} ${maxY} Z`,
-          fill: c7,
+          fill: c6,
           opacity: 0.2
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: `M ${minX} ${minY + h * 0.3} Q ${midX} ${minY} ${maxX} ${minY + h * 0.3}`, fill: "none", stroke: c7, strokeWidth: sw7, strokeDasharray: dash })
-    ] })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 
 // src/core/renderers/waveOscillation.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var c3 = (el) => el.color || "#0f172a";
 var sw3 = (el) => el.strokeWidth || 2;
-var font = (el) => el.fontSize || 18;
-registerRenderer("mass_box", (el) => {
+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 = font(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const fontSize = font2(el);
+  const plate = Math.max(36, size / 2 + 24);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(OriginHitPlate, { ctx, hitHalfSize: plate, selectionHalfSize: plate + 8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "rect",
       {
         x: -size / 2,
@@ -1116,54 +1595,56 @@ registerRenderer("mass_box", (el) => {
         fillOpacity: 0.2,
         stroke: color,
         strokeWidth,
-        rx: 4
+        rx: 4,
+        pointerEvents: "none"
       }
     ),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 0, y: 0, dominantBaseline: "central", textAnchor: "middle", fontSize, fill: color, fontWeight: "bold", children: String(el.label) }) : null
-  ] });
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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) => {
+registerRenderer("tuning_fork", (el, ctx) => {
   const color = c3(el);
   const strokeWidth = sw3(el);
-  const fontSize = font(el);
+  const fontSize = font2(el);
   const w = Math.max(3, strokeWidth);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 38, selectionHalfSize: 46, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "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"
+        strokeLinecap: "round",
+        pointerEvents: "none"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "0", y1: "10", x2: "0", y2: "30", stroke: color, strokeWidth: Math.max(4, strokeWidth), strokeLinecap: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 0, y: 45, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "0", y1: "10", x2: "0", y2: "30", stroke: color, strokeWidth: Math.max(4, strokeWidth), strokeLinecap: "round", pointerEvents: "none" }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 0, y: 45, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
 });
-registerRenderer("speaker", (el) => {
+registerRenderer("speaker", (el, ctx) => {
   const color = c3(el);
-  const fontSize = font(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "-10,-15 5,-25 5,25 -10,15", fill: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { x: "-20", y: "-15", width: "10", height: "30", fill: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M 12 -10 Q 18 0 12 10 M 18 -20 Q 28 0 18 20", fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 0, y: 40, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("wavefronts", (el) => {
+  const fontSize = font2(el);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polygon", { points: "-10,-15 5,-25 5,25 -10,15", fill: color, pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "-20", y: "-15", width: "10", height: "30", fill: color, pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("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 = font(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__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "circle",
         {
           cx,
@@ -1172,23 +1653,25 @@ registerRenderer("wavefronts", (el) => {
           fill: "none",
           stroke: color,
           strokeWidth,
-          opacity: 1 - i / rings * 0.5
+          opacity: 1 - i / rings * 0.5,
+          pointerEvents: "none"
         },
         i
       )
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: 0, cy: 0, r: 4, fill: color }),
+  const extent = rings * 20 + Math.abs(vRatio) * rings * 20 + 30;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(OriginHitPlate, { ctx, hitHalfSize: extent, selectionHalfSize: extent + 10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: 0, r: 4, fill: color, pointerEvents: "none" }),
     circles,
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 0, y: rings * 20 + 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 0, y: rings * 20 + 20, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
 });
-registerRenderer("pendulum", (el) => {
+registerRenderer("pendulum", (el, ctx) => {
   const size = el.size || 15;
   const color = c3(el);
   const strokeWidth = sw3(el);
-  const fontSize = font(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);
@@ -1197,84 +1680,90 @@ registerRenderer("pendulum", (el) => {
   const arcY = Math.cos(theta) * arcR;
   const arcFlag = theta > 0 ? 0 : 1;
   const showF = el.showForces;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: -20, y1: 0, x2: 20, y2: 0, stroke: color, strokeWidth: 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: -15, y1: 0, x2: -10, y2: -5, stroke: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: 5, y2: -5, stroke: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 15, y1: 0, x2: 20, y2: -5, stroke: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(
-      "path",
-      {
-        d: `M 0 ${arcR} A ${arcR} ${arcR} 0 0 ${arcFlag} ${arcX} ${arcY}`,
-        fill: "none",
-        stroke: color,
-        strokeWidth: 1.5
-      }
-    ) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `rotate(${-thetaDeg})`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: l, stroke: color, strokeWidth }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: 0, cy: l, r: size, fill: color, stroke: "#fff", strokeWidth: 2 }),
-      showF ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(0, ${l})`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `rotate(${thetaDeg})`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: 40, stroke: "#ef4444", strokeWidth: 2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "0,45 -4,37 4,37", fill: "#ef4444" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 10, y: 40, fontSize: 12, fill: "#ef4444", children: "F_g" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: -40, stroke: "#3b82f6", strokeWidth: 2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "0,-45 -4,-37 4,-37", fill: "#3b82f6" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 10, y: -35, fontSize: 12, fill: "#3b82f6", children: "T" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: -35 * Math.sin(theta), y2: 0, stroke: "#10b981", strokeWidth: 2 }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "polygon",
-          {
-            points: `${-40 * Math.sin(theta)},0 ${-32 * Math.sin(theta)},-4 ${-32 * Math.sin(theta)},4`,
-            fill: "#10b981"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: -45 * Math.sin(theta), y: -10, fontSize: 12, fill: "#10b981", children: "F_g sin(\u03B8)" })
-      ] }) : null,
-      el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 0, y: l + size + 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: -20, y1: 0, x2: 20, y2: 0, stroke: color, strokeWidth: 2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: -15, y1: 0, x2: -10, y2: -5, stroke: color }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: 5, y2: -5, stroke: color }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 15, y1: 0, x2: 20, y2: -5, stroke: color }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          d: `M 0 ${arcR} A ${arcR} ${arcR} 0 0 ${arcFlag} ${arcX} ${arcY}`,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.5
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `rotate(${-thetaDeg})`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: l, stroke: color, strokeWidth }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: l, r: size, fill: color, stroke: "#fff", strokeWidth: 2 }),
+        showF ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(0, ${l})`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `rotate(${thetaDeg})`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: 40, stroke: "#ef4444", strokeWidth: 2 }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polygon", { points: "0,45 -4,37 4,37", fill: "#ef4444" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 10, y: 40, fontSize: 12, fill: "#ef4444", children: "F_g" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: -40, stroke: "#3b82f6", strokeWidth: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polygon", { points: "0,-45 -4,-37 4,-37", fill: "#3b82f6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 10, y: -35, fontSize: 12, fill: "#3b82f6", children: "T" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: -35 * Math.sin(theta), y2: 0, stroke: "#10b981", strokeWidth: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "polygon",
+            {
+              points: `${-40 * Math.sin(theta)},0 ${-32 * Math.sin(theta)},-4 ${-32 * Math.sin(theta)},4`,
+              fill: "#10b981"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: -45 * Math.sin(theta), y: -10, fontSize: 12, fill: "#10b981", children: "F_g sin(\u03B8)" })
+        ] }) : null,
+        el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 0, y: l + size + 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padX: Math.max(80, l + size + 30), padY: Math.max(80, l + size + 30) })
   ] });
 });
-registerRenderer("phasor", (el) => {
+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 = font(el);
+  const fontSize = font2(el);
   const showProj = el.showProjection;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: 0, cy: 0, r: dist, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: -dist - 10, y1: 0, x2: dist + 10, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: -dist - 10, x2: 0, y2: dist + 10, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: `${dist},0 ${dist - 12},-6 ${dist - 12},6`, fill: color }),
-    showProj ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `rotate(${-angle})`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: dx, y1: dy, x2: dx, y2: 0, stroke: "#ef4444", strokeWidth: 1, strokeDasharray: "4 4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: dx, y1: dy, x2: 0, y2: dy, stroke: "#3b82f6", strokeWidth: 1, strokeDasharray: "4 4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dx, y2: 0, stroke: "#ef4444", strokeWidth: 2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: `${dx},0 ${dx > 0 ? dx - 8 : dx + 8},-4 ${dx > 0 ? dx - 8 : dx + 8},4`, fill: "#ef4444" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: dy, stroke: "#3b82f6", strokeWidth: 2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: `0,${dy} -4,${dy > 0 ? dy - 8 : dy + 8} 4,${dy > 0 ? dy - 8 : dy + 8}`, fill: "#3b82f6" })
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "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__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: 0, r: dist, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: -dist - 10, y1: 0, x2: dist + 10, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: -dist - 10, x2: 0, y2: dist + 10, stroke: color, strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polygon", { points: `${dist},0 ${dist - 12},-6 ${dist - 12},6`, fill: color, pointerEvents: "none" }),
+      showProj ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `rotate(${-angle})`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: dx, y1: dy, x2: dx, y2: 0, stroke: "#ef4444", strokeWidth: 1, strokeDasharray: "4 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: dx, y1: dy, x2: 0, y2: dy, stroke: "#3b82f6", strokeWidth: 1, strokeDasharray: "4 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dx, y2: 0, stroke: "#ef4444", strokeWidth: 2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polygon", { points: `${dx},0 ${dx > 0 ? dx - 8 : dx + 8},-4 ${dx > 0 ? dx - 8 : dx + 8},4`, fill: "#ef4444" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: dy, stroke: "#3b82f6", strokeWidth: 2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polygon", { points: `0,${dy} -4,${dy > 0 ? dy - 8 : dy + 8} 4,${dy > 0 ? dy - 8 : dy + 8}`, fill: "#3b82f6" })
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "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__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist / 2, y: -15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padX: dist + 28, padY: dist + 28 })
   ] });
 });
-registerRenderer("sine_wave", (el) => {
+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;
@@ -1282,19 +1771,23 @@ registerRenderer("sine_wave", (el) => {
   const wl = dist / (loops / 2);
   const color = c3(el);
   const strokeWidth = sw3(el);
-  const fontSize = font(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__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: d, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
   ] });
 });
-registerRenderer("standing_wave", (el) => {
+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;
@@ -1302,7 +1795,7 @@ registerRenderer("standing_wave", (el) => {
   const wl = dist / (loops / 2);
   const color = c3(el);
   const strokeWidth = sw3(el);
-  const fontSize = font(el);
+  const fontSize = font2(el);
   let d1 = "M 0 0";
   let d2 = "M 0 0";
   const step = Math.max(1, dist / 100);
@@ -1311,14 +1804,19 @@ registerRenderer("standing_wave", (el) => {
     d1 += ` L ${i} ${-y}`;
     d2 += ` L ${i} ${y}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: d1, fill: color, fillOpacity: 0.1, stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: d2, fill: "none", stroke: color, strokeWidth, strokeDasharray: "4 4", strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: d1, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: d2, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: d1, fill: color, fillOpacity: 0.1, stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: d2, fill: "none", stroke: color, strokeWidth, strokeDasharray: "4 4", strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
   ] });
 });
-registerRenderer("shm_graph", (el) => {
+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;
@@ -1327,7 +1825,7 @@ registerRenderer("shm_graph", (el) => {
   const gType = el.graphType || "x";
   const color = c3(el);
   const strokeWidth = sw3(el);
-  const fontSize = font(el);
+  const fontSize = font2(el);
   let dX = `M 0 ${-amp}`;
   let dV = "M 0 0";
   let dA = `M 0 ${amp}`;
@@ -1338,16 +1836,28 @@ registerRenderer("shm_graph", (el) => {
     dV += ` L ${i} ${-amp * 0.8 * -Math.sin(phase)}`;
     dA += ` L ${i} ${-amp * 0.6 * -Math.cos(phase)}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: -amp * 1.2, x2: 0, y2: amp * 1.2, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    (gType === "x" || gType === "all") && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: dX, fill: "none", stroke: "#3b82f6", strokeWidth, strokeLinejoin: "round" }),
-    (gType === "v" || gType === "all") && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: dV, fill: "none", stroke: "#ef4444", strokeWidth, strokeLinejoin: "round" }),
-    (gType === "a" || gType === "all") && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: dA, fill: "none", stroke: "#10b981", strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: dX, strokeWidth: 20, strokeLinejoin: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: dX, fill: "none", stroke: "#3b82f6", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" })
+      ] }) : null,
+      gType === "v" || gType === "all" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: dV, strokeWidth: 20, strokeLinejoin: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: dV, fill: "none", stroke: "#ef4444", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" })
+      ] }) : null,
+      gType === "a" || gType === "all" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: dA, strokeWidth: 20, strokeLinejoin: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: dA, fill: "none", stroke: "#10b981", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" })
+      ] }) : null,
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padY: amp * 1.2 + 28 })
   ] });
 });
-registerRenderer("energy_graph", (el) => {
+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;
@@ -1356,7 +1866,7 @@ registerRenderer("energy_graph", (el) => {
   const dom = el.domain || "time";
   const color = c3(el);
   const strokeWidth = sw3(el);
-  const fontSize = font(el);
+  const fontSize = font2(el);
   let dU = "M 0 0";
   let dK = `M 0 ${-amp}`;
   const step = Math.max(1, dist / 100);
@@ -1376,22 +1886,27 @@ registerRenderer("energy_graph", (el) => {
       dK += ` L ${i} ${-(amp - uVal)}`;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: -amp, x2: dist, y2: -amp, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: dU, fill: "none", stroke: "#10b981", strokeWidth, strokeLinejoin: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: dK, fill: "none", stroke: "#ef4444", strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: -amp, x2: dist, y2: -amp, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: dU, strokeWidth: 20, strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: dK, strokeWidth: 20, strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: dU, fill: "none", stroke: "#10b981", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: dK, fill: "none", stroke: "#ef4444", strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
   ] });
 });
-registerRenderer("strobe_shm", (el) => {
+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 = font(el);
+  const fontSize = font2(el);
   const rows = 10;
   const pts = [];
   const circles = [];
@@ -1401,77 +1916,182 @@ registerRenderer("strobe_shm", (el) => {
     const cx = amp * Math.cos(t * 2 * Math.PI * loops);
     const cy = t * dist;
     pts.push(`${cx},${cy}`);
-    circles.push(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx, cy, r: strokeWidth * 2, fill: color }, `c${i}`));
+    circles.push(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx, cy, r: strokeWidth * 2, fill: color, pointerEvents: "none" }, `c${i}`));
     lines.push(
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: -amp - 20, y1: cy, x2: amp + 20, y2: cy, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.3 }, `l${i}`)
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    lines,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: pts.join(" "), fill: "none", stroke: color, strokeWidth: 1, opacity: 0.4 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: dist, stroke: color, strokeWidth: 1, opacity: 0.5 }),
-    circles,
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: 0, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      lines,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: pts.join(" "), fill: "none", stroke: color, strokeWidth: 1, opacity: 0.4, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: dist, stroke: color, strokeWidth: 1, opacity: 0.5, pointerEvents: "none" }),
+      circles,
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 0, y: -15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padX: amp + 35, padY: dist + 35 })
   ] });
 });
-registerRenderer("torsion_pendulum", (el) => {
+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 = font(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ellipse", { cx: dist, cy: 0, rx: 40, ry: 15, fill: color, fillOpacity: 0.2, stroke: color, strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: dist, y1: 0, x2: dist + 40, y2: 0, stroke: color, strokeWidth, strokeDasharray: "2 2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: dist, y1: 0, x2: dist + 30, y2: 20, stroke: "#ef4444", strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: `M ${dist + 20} 0 A 20 7.5 0 0 1 ${dist + 15} 10`, fill: "none", stroke: "#ef4444", strokeWidth: 1.5 }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  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__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: -28, y: -14, width: 56, height: 10, rx: 2, fill: "#e2e8f0", stroke: color, strokeWidth: 1.25, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: -8, y: -4, width: 16, height: 8, rx: 1, fill: "#94a3b8", stroke: color, strokeWidth: 1, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: -22, y1: -9, x2: 22, y2: -9, stroke: "#64748b", strokeWidth: 1, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          d: helixD.join(""),
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1,
+          strokeLinecap: "round",
+          opacity: 0.35,
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "line",
+        {
+          x1: fiberStart,
+          y1: 0,
+          x2: fiberEnd,
+          y2: 0,
+          stroke: "#64748b",
+          strokeWidth: Math.max(1, strokeWidth * 0.45),
+          strokeLinecap: "round",
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "rect",
+        {
+          x: dist - halfT,
+          y: -R,
+          width: 2 * halfT,
+          height: 2 * R,
+          rx: halfT - 0.5,
+          fill: "#f8fafc",
+          stroke: color,
+          strokeWidth,
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "line",
+        {
+          x1: dist - halfT + 1,
+          y1: 0,
+          x2: dist + halfT - 1,
+          y2: 0,
+          stroke: "#cbd5e1",
+          strokeWidth: 1,
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: dist, cy: 0, r: Math.min(5, halfT - 1), fill: "#94a3b8", stroke: color, strokeWidth: 1, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "line",
+        {
+          x1: dist,
+          y1: 0,
+          x2: dist,
+          y2: -(R - 6),
+          stroke: "#94a3b8",
+          strokeWidth: 1.25,
+          strokeDasharray: "3 3",
+          opacity: 0.65,
+          pointerEvents: "none"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("g", { transform: `translate(${dist},0) rotate(${twistDeg})`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("g", { transform: `translate(${dist},0)`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "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__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist, y: R + 22, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padX: pad, padY: pad })
   ] });
 });
-registerRenderer("vane_liquid", (el) => {
+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 = font(el);
+  const fontSize = font2(el);
   const beakerW = Math.max(40, dist * 0.4);
   const beakerH = Math.max(40, dist * 0.5);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: dist, y1: -beakerW * 0.3, x2: dist, y2: beakerW * 0.3, stroke: color, strokeWidth: strokeWidth * 1.5, strokeLinecap: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "path",
-      {
-        d: `M ${dist - beakerH} ${-beakerW / 2} L ${dist + 10} ${-beakerW / 2} L ${dist + 10} ${beakerW / 2} L ${dist - beakerH} ${beakerW / 2}`,
-        fill: "none",
-        stroke: color,
-        strokeWidth: 2,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "rect",
-      {
-        x: dist - beakerH + 2,
-        y: -beakerW / 2 + 2,
-        width: beakerH + 8,
-        height: beakerW - 4,
-        fill: "#38bdf8",
-        fillOpacity: 0.3
-      }
-    ),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: -beakerW / 2 - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: dist, y1: -beakerW * 0.3, x2: dist, y2: beakerW * 0.3, stroke: color, strokeWidth: strokeWidth * 1.5, strokeLinecap: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "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__ */ (0, import_jsx_runtime6.jsx)(
+        "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__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist / 2, y: -beakerW / 2 - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padX: beakerH + 40, padY: beakerW + 40 })
   ] });
 });
-registerRenderer("wave_pulse", (el) => {
+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 = font(el);
+  const fontSize = font2(el);
   const mid = dist / 2;
   const spread = dist / 6;
   let d = "M 0 0";
@@ -1480,13 +2100,17 @@ registerRenderer("wave_pulse", (el) => {
     const y = amp * Math.exp(-Math.pow(i - mid, 2) / (2 * spread * spread));
     d += ` L ${i} ${-y}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, strokeLinecap: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d, fill: color, fillOpacity: 0.1, stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: mid, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, strokeLinecap: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: d, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d, fill: color, fillOpacity: 0.1, stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: mid, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
   ] });
 });
-registerRenderer("damped_wave", (el) => {
+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;
@@ -1494,7 +2118,7 @@ registerRenderer("damped_wave", (el) => {
   const freq = el.frequency || 10;
   const color = c3(el);
   const strokeWidth = sw3(el);
-  const fontSize = font(el);
+  const fontSize = font2(el);
   let d = `M 0 ${-amp}`;
   let env1 = `M 0 ${-amp}`;
   let env2 = `M 0 ${amp}`;
@@ -1506,15 +2130,19 @@ registerRenderer("damped_wave", (el) => {
     env1 += ` L ${i} ${-envY}`;
     env2 += ` L ${i} ${envY}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: env1, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: env2, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: env1, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: env2, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "4 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: d, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist / 2, y: -amp - 15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
   ] });
 });
-registerRenderer("beats_graph", (el) => {
+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;
@@ -1522,7 +2150,7 @@ registerRenderer("beats_graph", (el) => {
   const beatF = el.beatFreq || 2;
   const color = c3(el);
   const strokeWidth = sw3(el);
-  const fontSize = font(el);
+  const fontSize = font2(el);
   let d = "M 0 0";
   let env1 = "M 0 0";
   let env2 = "M 0 0";
@@ -1534,197 +2162,66 @@ registerRenderer("beats_graph", (el) => {
     env1 += ` L ${i} ${-Math.abs(env)}`;
     env2 += ` L ${i} ${Math.abs(env)}`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: env1, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "2 4", opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: env2, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "2 4", opacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: -amp - 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("mach_cone", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const M = el.machNumber || 2;
-  const coneAngle = Math.asin(1 / Math.max(1.01, M));
-  const h = dist;
-  const r = h * Math.tan(coneAngle);
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: h, y2: 0, stroke: color, strokeWidth: 1, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: h, y1: 0, x2: 0, y2: -r, stroke: color, strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: h, y1: 0, x2: 0, y2: r, stroke: color, strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: h, cy: 0, r: 4, fill: color }),
-    [0.2, 0.5, 0.8].map((t) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: h * t, cy: 0, r: (1 - t) * r, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.6 }, t)),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: h / 2, y: r + 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("wall", (el) => {
-  const dist = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const color = c3(el);
-  const strokeWidth = sw3(el);
-  const fontSize = font(el);
-  const hashes = [];
-  const numHashes = Math.max(2, Math.floor(dist / 10));
-  for (let j = 0; j <= numHashes; j++) {
-    const i = j / numHashes * dist;
-    hashes.push(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: i, y1: 0, x2: i - 8, y2: -12, stroke: color, strokeWidth: 1 }, j));
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth }),
-    hashes,
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("text", { x: dist / 2, y: 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-
-// src/core/renderers/mechanical.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var c4 = (el) => el.color || "#0f172a";
-var sw4 = (el) => el.strokeWidth || 2;
-var font2 = (el) => el.fontSize || 18;
-registerRenderer("string", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c4(el), strokeWidth: sw4(el), strokeLinecap: "round" }) });
-});
-registerRenderer("surface", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
-  const hatchCount = Math.max(0, Math.floor(d / 12));
-  const hatches = [];
-  for (let i = 0; i <= hatchCount; i++) {
-    hatches.push(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: i * 12, y1: 0, x2: i * 12 - 8, y2: 12, stroke: c4(el), strokeWidth: 1.5 }, i));
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c4(el), strokeWidth: sw4(el) + 0.5, strokeLinecap: "round" }),
-    hatches
-  ] });
-});
-var rotOf = (el) => el.rotation || 0;
-registerRenderer("block", (el) => {
-  const w = Math.abs(el.x2 - el.x1);
-  const h = Math.abs(el.y2 - el.y1);
-  const cx = (el.x1 + el.x2) / 2;
-  const cy = (el.y1 + el.y2) / 2;
-  const rot = rotOf(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${cx}, ${cy}) rotate(${rot})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: -w / 2, y: -h / 2, width: w, height: h, fill: "#f1f5f9", stroke: c4(el), strokeWidth: sw4(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "text",
-      {
-        x: 0,
-        y: el.value ? -6 : 0,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: c4(el),
-        fontSize: 18,
-        fontFamily: "serif",
-        fontWeight: "bold",
-        children: String(el.label)
-      }
-    ) : null,
-    el.value ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "text",
-      {
-        x: 0,
-        y: el.label ? 10 : 0,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: "#4b5563",
-        fontSize: 14,
-        fontFamily: "sans-serif",
-        children: String(el.value)
-      }
-    ) : null
-  ] });
-});
-registerRenderer("cart", (el) => {
-  const w = Math.abs(el.x2 - el.x1);
-  const h = Math.abs(el.y2 - el.y1);
-  const cx = (el.x1 + el.x2) / 2;
-  const cy = (el.y1 + el.y2) / 2;
-  const rot = rotOf(el);
-  const wheelR = Math.min(w * 0.15, h * 0.25, 12);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${cx}, ${cy}) rotate(${rot})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: -w / 2, y: -h / 2, width: w, height: h - wheelR, fill: "#f1f5f9", stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: -w / 2 + wheelR * 1.5, cy: h / 2 - wheelR, r: wheelR, fill: "#cbd5e1", stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: w / 2 - wheelR * 1.5, cy: h / 2 - wheelR, r: wheelR, fill: "#cbd5e1", stroke: c4(el), strokeWidth: sw4(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "text",
-      {
-        x: 0,
-        y: el.value ? -8 : -2,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: c4(el),
-        fontSize: 18,
-        fontFamily: "serif",
-        fontWeight: "bold",
-        children: String(el.label)
-      }
-    ) : null,
-    el.value ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      "text",
-      {
-        x: 0,
-        y: el.label ? 8 : -2,
-        dominantBaseline: "central",
-        textAnchor: "middle",
-        fill: "#4b5563",
-        fontSize: 14,
-        fontFamily: "sans-serif",
-        children: String(el.value)
-      }
-    ) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: env1, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "2 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: env2, fill: "none", stroke: color, strokeWidth: 1, strokeDasharray: "2 4", opacity: 0.5, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LocalFatPathHit, { dPath: d, strokeWidth: 22, strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d, fill: "none", stroke: color, strokeWidth, strokeLinejoin: "round", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist / 2, y: -amp - 20, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padY: amp + 28 })
   ] });
 });
-registerRenderer("particle", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const r = Math.max(5, d);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: 0, r, fill: c4(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 0, y: -r - 12, dominantBaseline: "central", textAnchor: "middle", fill: c4(el), fontSize: font2(el), fontFamily: "serif", fontWeight: "bold", children: String(el.label) }) : null,
-    el.value ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 0, y: r + 12, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: 14, fontFamily: "sans-serif", children: String(el.value) }) : null
+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__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: h, y2: 0, stroke: color, strokeWidth: 1, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: h, y1: 0, x2: 0, y2: -r, stroke: color, strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: h, y1: 0, x2: 0, y2: r, stroke: color, strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: h, cy: 0, r: 4, fill: color, pointerEvents: "none" }),
+      [0.2, 0.5, 0.8].map((t) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("text", { x: h / 2, y: r + 20, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padY: r + 35 })
   ] });
 });
-registerRenderer("disk", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const r = Math.max(10, d);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: 0, r, fill: "#e2e8f0", stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: r, y2: 0, stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: 0, r: 3, fill: c4(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 0, y: -r - 12, dominantBaseline: "central", textAnchor: "middle", fill: c4(el), fontSize: font2(el), fontFamily: "serif", fontWeight: "bold", children: String(el.label) }) : null,
-    el.value ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 0, y: r + 12, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: 14, fontFamily: "sans-serif", children: String(el.value) }) : null
-  ] });
-});
-registerRenderer("com", (el) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: 0, r: 10, fill: "none", stroke: c4(el), strokeWidth: sw4(el) }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M 0 -10 A 10 10 0 0 1 10 0 L 0 0 Z", fill: c4(el) }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M 0 10 A 10 10 0 0 1 -10 0 L 0 0 Z", fill: c4(el) })
-] }));
-registerRenderer("pivot", (el) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polygon", { points: "0,0 -12,20 12,20", fill: "#f8fafc", stroke: c4(el), strokeWidth: sw4(el), strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: -20, y1: 20, x2: 20, y2: 20, stroke: c4(el), strokeWidth: sw4(el), strokeLinecap: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: 0, r: 3, fill: c4(el) })
-] }));
-registerRenderer("pulley", (el) => {
-  const d = distance(el.x1, el.y1, el.x2, el.y2);
-  const r = Math.max(10, d);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: 0, r, fill: "#f8fafc", stroke: c4(el), strokeWidth: sw4(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: 0, cy: 0, r: 4, fill: c4(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: 0, y: -r - 12, dominantBaseline: "central", textAnchor: "middle", fill: c4(el), fontSize: font2(el), fontFamily: "serif", fontWeight: "bold", children: String(el.label) }) : null
+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__ */ (0, import_jsx_runtime6.jsx)("line", { x1: i, y1: 0, x2: i - 8, y2: -12, stroke: color, strokeWidth: 1, pointerEvents: "none" }, j));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: 0, y1: 0, x2: dist, y2: 0, stroke: color, strokeWidth, pointerEvents: "none" }),
+      hashes,
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("text", { x: dist / 2, y: 20, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChordInteractionOverlay, { el, ctx, padY: 35 })
   ] });
 });
 
 // src/core/renderers/rotation.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var c5 = (el) => el.color || "#0f172a";
-var sw5 = (el) => el.strokeWidth || 2;
+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));
@@ -1740,35 +2237,39 @@ function generateSpringPath(dist, coils, width2 = 20) {
   }
   return d;
 }
-registerRenderer("point_mass", (el) => {
+registerRenderer("point_mass", (el, ctx) => {
   const size = el.size ?? 15;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: size, fill: c5(el), fillOpacity: 0.8, stroke: c5(el), strokeWidth: 2 }),
+  const plate = Math.max(36, size + 22);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(OriginHitPlate, { ctx, hitHalfSize: plate / 2, selectionHalfSize: plate / 2 + 8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: size, fill: c4(el), fillOpacity: 0.8, stroke: c4(el), strokeWidth: 2 }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: size * 0.3, fill: "#fff", fillOpacity: 0.5 }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: size + 15, fontSize: font3(el), fill: c5(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null
-  ] });
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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) => {
+registerRenderer("com_indicator", (el, ctx) => {
   const size = el.size ?? 15;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: size, fill: "none", stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: -size * 1.3, y1: 0, x2: size * 1.3, y2: 0, stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: 0, y1: -size * 1.3, x2: 0, y2: size * 1.3, stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: `M 0 0 L ${size} 0 A ${size} ${size} 0 0 0 0 ${-size} Z`, fill: c5(el), fillOpacity: 0.5 }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: `M 0 0 L ${-size} 0 A ${size} ${size} 0 0 0 0 ${size} Z`, fill: c5(el), fillOpacity: 0.5 }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: size + 15, fontSize: font3(el), fill: c5(el), textAnchor: "middle", fontWeight: "bold", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("pivot", (el) => {
+  const plate = Math.max(40, size * 2 + 12);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(OriginHitPlate, { ctx, hitHalfSize: plate / 2, selectionHalfSize: plate / 2 + 10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: size, fill: "none", stroke: c4(el), strokeWidth: sw4(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: -size * 1.3, y1: 0, x2: size * 1.3, y2: 0, stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: 0, y1: -size * 1.3, x2: 0, y2: size * 1.3, stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("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;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+  const plate = Math.max(44, size * 2 + 24);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(OriginHitPlate, { ctx, hitHalfSize: plate / 2, selectionHalfSize: plate / 2 + 10, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "polygon",
       {
         points: `0,0 ${-size},${size * 1.5} ${size},${size * 1.5}`,
         fill: "none",
-        stroke: c5(el),
-        strokeWidth: sw5(el)
+        stroke: c4(el),
+        strokeWidth: sw4(el),
+        pointerEvents: "none"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1778,12 +2279,13 @@ registerRenderer("pivot", (el) => {
         y1: size * 1.5,
         x2: size * 1.5,
         y2: size * 1.5,
-        stroke: c5(el),
-        strokeWidth: sw5(el) + 1,
-        strokeLinecap: "round"
+        stroke: c4(el),
+        strokeWidth: sw4(el) + 1,
+        strokeLinecap: "round",
+        pointerEvents: "none"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: sw5(el) * 1.5, fill: c5(el) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: sw4(el) * 1.5, fill: c4(el), pointerEvents: "none" }),
     Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "line",
       {
@@ -1791,198 +2293,250 @@ registerRenderer("pivot", (el) => {
         y1: size * 1.5,
         x2: -size + i * size * 0.5 - 5,
         y2: size * 1.5 + 8,
-        stroke: c5(el),
-        strokeWidth: 1
+        stroke: c4(el),
+        strokeWidth: 1,
+        pointerEvents: "none"
       },
       i
     )),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: size * 1.5 + 20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
-  ] });
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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) => {
+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__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: 0, y: 0, width: w, height: h, fill: c5(el), fillOpacity: 0.2, stroke: c5(el), strokeWidth: sw5(el), rx: 2 }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: w / 2, y: h / 2, dominantBaseline: "central", textAnchor: "middle", fontSize: font3(el), fill: c5(el), fontWeight: "bold", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("system_boundary", (el) => {
+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__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: 0, y: 0, width: w, height: h, fill: "none", stroke: c5(el), strokeWidth: sw5(el), strokeDasharray: "8 6", rx: 15 }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: w / 2, y: -10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", fontStyle: "italic", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("rocket", (el) => {
+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 minY = Math.min(el.y1, el.y2);
-  const maxY = Math.max(el.y1, el.y2);
   const w = Math.max(1, maxX - minX);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "path",
-      {
-        d: `M 0 ${-w / 4} L ${dist * 0.7} ${-w / 4} L ${dist} 0 L ${dist * 0.7} ${w / 4} L 0 ${w / 4} Z`,
-        fill: "none",
-        stroke: c5(el),
-        strokeWidth: sw5(el)
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `0,${-w / 4} ${dist * 0.2},${-w / 4} 0,${-w / 2}`, fill: c5(el), fillOpacity: 0.8 }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `0,${w / 4} ${dist * 0.2},${w / 4} 0,${w / 2}`, fill: c5(el), fillOpacity: 0.8 }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: `M 0 ${-w / 6} Q ${-dist * 0.3} 0 0 ${w / 6}`, fill: "#f97316", fillOpacity: 0.8 }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: `M 0 ${-w / 8} Q ${-dist * 0.5} 0 0 ${w / 8}`, fill: "#ef4444", fillOpacity: 0.6 }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: dist / 2, y: -w / 2 - 10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "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__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `0,${-w / 4} ${dist * 0.2},${-w / 4} 0,${-w / 2}`, fill: c4(el), fillOpacity: 0.8, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `0,${w / 4} ${dist * 0.2},${w / 4} 0,${w / 2}`, fill: c4(el), fillOpacity: 0.8, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: `M 0 ${-w / 6} Q ${-dist * 0.3} 0 0 ${w / 6}`, fill: "#f97316", fillOpacity: 0.8, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: `M 0 ${-w / 8} Q ${-dist * 0.5} 0 0 ${w / 8}`, fill: "#ef4444", fillOpacity: 0.6, pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: dist / 2, y: -w / 2 - 10, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("dashed_path", (el) => {
+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__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c5(el), strokeWidth: sw5(el), strokeLinecap: "round", strokeDasharray: "8 6" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: d / 2, y: -10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("text", { x: d / 2, y: -10, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("uniform_rod", (el) => {
+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 = sw5(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: 0, y: -strokeWidth / 2, width: dist, height: strokeWidth, fill: c5(el), rx: strokeWidth / 4 }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: dist / 2, cy: 0, r: Math.max(2, strokeWidth / 4), fill: "#fff" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: dist / 2, y: -strokeWidth / 2 - 10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
+  const strokeWidth = sw4(el);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: 0, y: -strokeWidth / 2, width: dist, height: strokeWidth, fill: c4(el), rx: strokeWidth / 4, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: dist / 2, cy: 0, r: Math.max(2, strokeWidth / 4), fill: "#fff", pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: dist / 2, y: -strokeWidth / 2 - 10, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("solid_disk", (el) => {
+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__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius, fill: c5(el), fillOpacity: 0.4, stroke: c5(el), strokeWidth: sw5(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius, fill: c4(el), fillOpacity: 0.4, stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("hoop_ring", (el) => {
+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__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius, fill: "none", stroke: c5(el), strokeWidth: Math.max(4, sw5(el) * 2) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius, fill: "none", stroke: c4(el), strokeWidth: Math.max(4, sw4(el) * 2), pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("rolling_body", (el) => {
+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__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius, fill: c5(el), fillOpacity: 0.1, stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: -radius, y1: 0, x2: radius, y2: 0, stroke: c5(el), strokeWidth: 1, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: 0, y1: -radius, x2: 0, y2: radius, stroke: c5(el), strokeWidth: 1, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: 3, fill: c5(el) }),
-    el.showVelocity ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: 0, y1: 0, x2: radius * 1.5, y2: 0, stroke: "#ef4444", strokeWidth: 2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `${radius * 1.5},0 ${radius * 1.5 - 8},-4 ${radius * 1.5 - 8},4`, fill: "#ef4444" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: radius * 1.5 + 10, y: 5, fill: "#ef4444", fontSize: 14, fontStyle: "italic", children: "v" })
-    ] }) : null,
-    el.showOmega ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(0, ${-radius * 1.2})`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `${radius * 0.4},0 ${radius * 0.4 - 4},-6 ${radius * 0.4 + 4},-6`, fill: "#10b981" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: -10, fill: "#10b981", fontSize: 14, fontStyle: "italic", textAnchor: "middle", children: "\u03C9" })
-    ] }) : null,
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius, fill: c4(el), fillOpacity: 0.1, stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: -radius, y1: 0, x2: radius, y2: 0, stroke: c4(el), strokeWidth: 1, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: 0, y1: -radius, x2: 0, y2: radius, stroke: c4(el), strokeWidth: 1, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: 3, fill: c4(el), pointerEvents: "none" }),
+      el.showVelocity ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { pointerEvents: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: 0, y1: 0, x2: radius * 1.5, y2: 0, stroke: "#ef4444", strokeWidth: 2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `${radius * 1.5},0 ${radius * 1.5 - 8},-4 ${radius * 1.5 - 8},4`, fill: "#ef4444" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: radius * 1.5 + 10, y: 5, fill: "#ef4444", fontSize: 14, fontStyle: "italic", children: "v" })
+      ] }) : null,
+      el.showOmega ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(0, ${-radius * 1.2})`, pointerEvents: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `${radius * 0.4},0 ${radius * 0.4 - 4},-6 ${radius * 0.4 + 4},-6`, fill: "#10b981" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: -10, fill: "#10b981", fontSize: 14, fontStyle: "italic", textAnchor: "middle", children: "\u03C9" })
+      ] }) : null,
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: radius + 20, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("inclined_wedge", (el) => {
+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__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "polygon",
       {
         points: `${x1},${y1} ${x1},${y2} ${x2},${y2}`,
-        fill: c5(el),
+        fill: c4(el),
         fillOpacity: 0.1,
-        stroke: c5(el),
-        strokeWidth: sw5(el),
-        strokeLinejoin: "round"
+        stroke: c4(el),
+        strokeWidth: sw4(el),
+        strokeLinejoin: "round",
+        pointerEvents: "none"
       }
     ),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: (x1 + x2) / 2, y: y2 - 10, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null,
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(
       "path",
       {
         d: `M ${x2 > x1 ? x2 - 20 : x2 + 20} ${y2} A 20 20 0 0 ${x2 > x1 ? 0 : 1} ${x2 > x1 ? x2 - 20 * Math.cos(angle * Math.PI / 180) : x2 + 20 * Math.cos(angle * Math.PI / 180)} ${y2 - 20 * Math.sin(Math.abs(angle) * Math.PI / 180)}`,
         fill: "none",
-        stroke: c5(el),
-        strokeWidth: 1
+        stroke: c4(el),
+        strokeWidth: 1,
+        pointerEvents: "none"
       }
-    ) : null
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BBoxInteractionOverlay, { minX: triMinX, minY: triMinY, width: triW, height: triH, ctx }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("pulley", (el) => {
+registerRenderer("pulley", (el, ctx) => {
   const dx = el.x2 - el.x1;
   const dy = el.y2 - el.y1;
   const radius = Math.hypot(dx, dy);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: `M 0 0 L 0 ${-radius * 1.5}`, fill: "none", stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: -radius * 0.8, y1: -radius * 1.5, x2: radius * 0.8, y2: -radius * 1.5, stroke: c5(el), strokeWidth: sw5(el) }),
-    Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "line",
-      {
-        x1: -radius * 0.8 + i * radius * 0.4,
-        y1: -radius * 1.5,
-        x2: -radius * 0.8 + i * radius * 0.4 + 5,
-        y2: -radius * 1.5 - 5,
-        stroke: c5(el),
-        strokeWidth: 1
-      },
-      i
-    )),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius, fill: "#fff", stroke: c5(el), strokeWidth: sw5(el) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius * 0.8, fill: "none", stroke: c5(el), strokeWidth: 1, opacity: 0.3 }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: 3, fill: c5(el) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: -radius * 1.5 - 15, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: `M 0 0 L 0 ${-radius * 1.5}`, fill: "none", stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(
+        "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__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius, fill: "#fff", stroke: c4(el), strokeWidth: sw4(el), pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: radius * 0.8, fill: "none", stroke: c4(el), strokeWidth: 1, opacity: 0.3, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 0, cy: 0, r: 3, fill: c4(el), pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 0, y: -radius * 1.5 - 15, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("curve_arrow", (el) => {
+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);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: `M 0 0 Q ${dist / 2} ${-dist * 0.5} ${dist} 0`, fill: "none", stroke: c5(el), strokeWidth: sw5(el), strokeLinecap: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `${dist},0 ${dist - 8},-6 ${dist - 4},-1`, fill: c5(el), transform: `rotate(20 ${dist} 0)` }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: dist / 2, y: -dist * 0.3, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
+  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__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: curvePath, fill: "none", stroke: c4(el), strokeWidth: sw4(el), strokeLinecap: "round", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LocalFatPathHit, { dPath: curvePath, strokeWidth: 24, strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `${dist},0 ${dist - 8},-6 ${dist - 4},-1`, fill: c4(el), transform: `rotate(20 ${dist} 0)`, pointerEvents: "none" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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) => {
+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);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "path",
-      {
-        d: generateSpringPath(dist, el.coils),
-        fill: "none",
-        stroke: c5(el),
-        strokeWidth: sw5(el),
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: dist / 2, y: -20, fontSize: font3(el), fill: c5(el), textAnchor: "middle", children: String(el.label) }) : null
+  const pathD = generateSpringPath(dist, el.coils);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LocalFatPathHit, { dPath: pathD, strokeWidth: 26, strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          d: pathD,
+          fill: "none",
+          stroke: c4(el),
+          strokeWidth: sw4(el),
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          pointerEvents: "none"
+        }
+      ),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: dist / 2, y: -20, fontSize: font3(el), fill: c4(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 
@@ -1991,18 +2545,6 @@ var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsxs)("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "line",
-    {
-      x1: el.x1,
-      y1: el.y1,
-      x2: el.x2,
-      y2: el.y2,
-      stroke: "transparent",
-      strokeWidth: 20,
-      strokeLinecap: "round"
-    }
-  ),
   /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "line",
     {
@@ -2015,7 +2557,8 @@ registerRenderer("wire", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime8.js
       strokeLinecap: "round",
       pointerEvents: "none"
     }
-  )
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChordInteractionOverlay, { el, ctx, hitWidth: 20 })
 ] }));
 var rotated = (el, inner, ctx) => {
   const d = distance(el.x1, el.y1, el.x2, el.y2);
@@ -2032,10 +2575,37 @@ var rotated = (el, inner, ctx) => {
   }
   const labelDist = 20;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: el.x1, y1: el.y1, x2: el.x2, y2: el.y2, stroke: "transparent", strokeWidth: 20 }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("g", { children: inner }) }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: mx + nx * labelDist, y: my + ny * labelDist, dominantBaseline: "central", textAnchor: "middle", fill: drawColor(el, ctx), fontSize: "16", fontFamily: "serif", fontWeight: "bold", children: String(el.label) }),
-    el.value && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: mx - nx * labelDist, y: my - ny * labelDist, dominantBaseline: "central", textAnchor: "middle", fill: "#4b5563", fontSize: "14", fontFamily: "sans-serif", children: String(el.value) })
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "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__ */ (0, import_jsx_runtime8.jsx)(
+      "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__ */ (0, import_jsx_runtime8.jsx)(ChordInteractionOverlay, { el, ctx, hitWidth: 20 })
   ] });
 };
 registerRenderer("resistor", (el, ctx) => {
@@ -2079,7 +2649,7 @@ registerRenderer("battery", (el, ctx) => {
     ] }), ctx);
   })
 );
-registerRenderer("ground", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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) }) }));
+registerRenderer("ground", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(OriginHitPlate, { ctx, hitHalfSize: 28, selectionHalfSize: 34, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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) => {
@@ -2096,8 +2666,8 @@ var getCircuitAutoNodes = (elements) => {
 
 // src/core/renderers/thermo.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var c6 = (el) => el.color || "#0f172a";
-var sw6 = (el) => el.strokeWidth || 2;
+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;
@@ -2108,36 +2678,40 @@ var strokeDashFromLineStyle = (el) => {
   if (el.lineStyle === "dotted") return "2 4";
   return void 0;
 };
-registerRenderer("pv_axes", (el) => {
+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 = c6(el);
-  const strokeWidth = sw6(el);
+  const color = c5(el);
+  const strokeWidth = sw5(el);
   const fontSize = font4(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: h, stroke: color, strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "0,0 -5,10 5,10", fill: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: -15, y: 10, fontSize, fill: color, fontWeight: "bold", children: yLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: 0, y1: h, x2: w, y2: h, stroke: color, strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: `${w},${h} ${w - 10},${h - 5} ${w - 10},${h + 5}`, fill: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w - 10, y: h + 20, fontSize, fill: color, fontWeight: "bold", children: xLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: -10, y: h + 15, fontSize: 12, fill: color, children: "0" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: -10, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("piston_cylinder", (el) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: h, stroke: color, strokeWidth }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "0,0 -5,10 5,10", fill: color }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: -15, y: 10, fontSize, fill: color, fontWeight: "bold", children: yLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: 0, y1: h, x2: w, y2: h, stroke: color, strokeWidth }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: `${w},${h} ${w - 10},${h - 5} ${w - 10},${h + 5}`, fill: color }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w - 10, y: h + 20, fontSize, fill: color, fontWeight: "bold", children: xLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: -10, y: h + 15, fontSize: 12, fill: color, children: "0" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: -10, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BBoxInteractionOverlay, { minX, minY, width: w, height: h, ctx }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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 = c6(el);
-  const strokeWidth = sw6(el);
+  const color = c5(el);
+  const strokeWidth = sw5(el);
   const particles = [];
   const numParticles = 40;
   for (let i = 0; i < numParticles; i++) {
@@ -2145,136 +2719,144 @@ registerRenderer("piston_cylinder", (el) => {
     const py = pistonY + 10 + seededRandom(Number(el.id) + i * 100) * (h - pistonY - 15);
     particles.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: px, cy: py, r: "2", fill: "#94a3b8" }, i));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "polyline",
-      {
-        points: `0,0 0,${h} ${w},${h} ${w},0`,
-        fill: "#f8fafc",
-        stroke: color,
-        strokeWidth,
-        strokeLinecap: "square",
-        strokeLinejoin: "miter"
-      }
-    ),
-    particles,
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(0, ${pistonY})`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "2", y: "0", width: w - 4, height: "12", fill: "#64748b", rx: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2, y1: "0", x2: w / 2, y2: "-40", stroke: "#64748b", strokeWidth: "4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2 - 15, y1: "-40", x2: w / 2 + 15, y2: "-40", stroke: "#64748b", strokeWidth: "6", strokeLinecap: "round" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2, y1: "-50", x2: w / 2, y2: "-42", stroke: "#ef4444", strokeWidth: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: `${w / 2},-42 ${w / 2 - 4},-46 ${w / 2 + 4},-46`, fill: "#ef4444" })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "polyline",
+        {
+          points: `0,0 0,${h} ${w},${h} ${w},0`,
+          fill: "#f8fafc",
+          stroke: color,
+          strokeWidth,
+          strokeLinecap: "square",
+          strokeLinejoin: "miter",
+          pointerEvents: "none"
+        }
+      ),
+      particles,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(0, ${pistonY})`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "2", y: "0", width: w - 4, height: "12", fill: "#64748b", rx: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2, y1: "0", x2: w / 2, y2: "-40", stroke: "#64748b", strokeWidth: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2 - 15, y1: "-40", x2: w / 2 + 15, y2: "-40", stroke: "#64748b", strokeWidth: "6", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2, y1: "-50", x2: w / 2, y2: "-42", stroke: "#ef4444", strokeWidth: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: `${w / 2},-42 ${w / 2 - 4},-46 ${w / 2 + 4},-46`, fill: "#ef4444" })
+      ] }),
+      el.showHeat ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${w / 2}, ${h + 15})`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M-5,0 Q-8,-6 0,-12 Q2,-5 5,0 Z", fill: "#f59e0b" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: "25", y: "-5", fontSize: "14", fill: "#ef4444", fontWeight: "bold", children: "Q" })
+      ] }) : null,
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h + (el.showHeat ? 35 : 20), textAnchor: "middle", fill: color, fontSize: font4(el), pointerEvents: "none", children: String(el.label) }) : null
     ] }),
-    el.showHeat ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${w / 2}, ${h + 15})`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M-5,0 Q-8,-6 0,-12 Q2,-5 5,0 Z", fill: "#f59e0b" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: "25", y: "-5", fontSize: "14", fill: "#ef4444", fontWeight: "bold", children: "Q" })
-    ] }) : null,
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h + (el.showHeat ? 35 : 20), textAnchor: "middle", fill: color, fontSize: font4(el), children: String(el.label) }) : null
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("heat_engine", (el) => {
+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 = c6(el);
-  const strokeWidth = sw6(el);
+  const color = c5(el);
+  const strokeWidth = sw5(el);
   const fontSize = font4(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: 0, y: 0, width: w, height: h * 0.2, fill: "#ef4444", rx: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h * 0.1, fontSize, fill: "#fff", textAnchor: "middle", dominantBaseline: "central", children: "T_H" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: 0, y: h * 0.8, width: w, height: h * 0.2, fill: "#3b82f6", rx: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h * 0.9, fontSize, fill: "#fff", textAnchor: "middle", dominantBaseline: "central", children: "T_C" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: w / 2, cy: h / 2, r, fill: "#fff", stroke: color, strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "text",
-      {
-        x: w / 2,
-        y: h / 2,
-        fontSize: fontSize * 1.2,
-        fill: color,
-        textAnchor: "middle",
-        dominantBaseline: "central",
-        fontWeight: "bold",
-        children: isEngine ? "E" : "R"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { strokeWidth: 2, stroke: color, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2, y1: h * 0.2, x2: w / 2, y2: h * 0.5 - r - 5 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "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__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2 + 10, y: h * 0.35, fontSize: 14, fill: color, dominantBaseline: "central", children: "Q_H" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2, y1: h * 0.5 + r + 5, x2: w / 2, y2: h * 0.8 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "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__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2 + 10, y: h * 0.65, fontSize: 14, fill: color, dominantBaseline: "central", children: "Q_C" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "line",
-        {
-          x1: isEngine ? w / 2 + r + 5 : w,
-          y1: h / 2,
-          x2: isEngine ? w : w / 2 + r + 5,
-          y2: h / 2
-        }
-      ),
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: 0, y: 0, width: w, height: h * 0.2, fill: "#ef4444", rx: "4", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h * 0.1, fontSize, fill: "#fff", textAnchor: "middle", dominantBaseline: "central", children: "T_H" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: 0, y: h * 0.8, width: w, height: h * 0.2, fill: "#3b82f6", rx: "4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h * 0.9, fontSize, fill: "#fff", textAnchor: "middle", dominantBaseline: "central", children: "T_C" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: w / 2, cy: h / 2, r, fill: "#fff", stroke: color, strokeWidth }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        "polygon",
+        "text",
         {
-          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
+          x: w / 2,
+          y: h / 2,
+          fontSize: fontSize * 1.2,
+          fill: color,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          fontWeight: "bold",
+          children: isEngine ? "E" : "R"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w * 0.8, y: h / 2 - 15, fontSize: 14, fill: color, textAnchor: "middle", children: "W" })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { strokeWidth: 2, stroke: color, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2, y1: h * 0.2, x2: w / 2, y2: h * 0.5 - r - 5 }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "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__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2 + 10, y: h * 0.35, fontSize: 14, fill: color, dominantBaseline: "central", children: "Q_H" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: w / 2, y1: h * 0.5 + r + 5, x2: w / 2, y2: h * 0.8 }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "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__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2 + 10, y: h * 0.65, fontSize: 14, fill: color, dominantBaseline: "central", children: "Q_C" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "line",
+          {
+            x1: isEngine ? w / 2 + r + 5 : w,
+            y1: h / 2,
+            x2: isEngine ? w : w / 2 + r + 5,
+            y2: h / 2
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "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__ */ (0, import_jsx_runtime9.jsx)("text", { x: w * 0.8, y: h / 2 - 15, fontSize: 14, fill: color, textAnchor: "middle", children: "W" })
+      ] }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h + 20, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
     ] }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h + 20, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+    bboxInsetSelectionChrome(minX, minY, w, h, ctx),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("conduction_rod", (el) => {
+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 = c6(el);
-  const strokeWidth = sw6(el);
+  const color = c5(el);
+  const strokeWidth = sw5(el);
   const fontSize = font4(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("linearGradient", { id: gradId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0%", stopColor: "#ef4444" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "100%", stopColor: "#3b82f6" })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: 0, y: -20, width: dist, height: 40, fill: `url(#${gradId})`, stroke: color, strokeWidth, rx: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { stroke: "#fff", strokeWidth: "2", opacity: 0.6, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: dist * 0.2, y1: 0, x2: dist * 0.4, y2: 0 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: `${dist * 0.4},0 ${dist * 0.4 - 6},-4 ${dist * 0.4 - 6},4`, fill: "#fff" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: dist * 0.6, y1: 0, x2: dist * 0.8, y2: 0 }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: `${dist * 0.8},0 ${dist * 0.8 - 6},-4 ${dist * 0.8 - 6},4`, fill: "#fff" })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("linearGradient", { id: gradId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0%", stopColor: "#ef4444" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "100%", stopColor: "#3b82f6" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: 0, y: -20, width: dist, height: 40, fill: `url(#${gradId})`, stroke: color, strokeWidth, rx: "4", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { stroke: "#fff", strokeWidth: "2", opacity: 0.6, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: dist * 0.2, y1: 0, x2: dist * 0.4, y2: 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: `${dist * 0.4},0 ${dist * 0.4 - 6},-4 ${dist * 0.4 - 6},4`, fill: "#fff" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: dist * 0.6, y1: 0, x2: dist * 0.8, y2: 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: `${dist * 0.8},0 ${dist * 0.8 - 6},-4 ${dist * 0.8 - 6},4`, fill: "#fff" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: 0, y: -30, fontSize, fill: "#ef4444", textAnchor: "middle", fontWeight: "bold", children: "T_H" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: dist, y: -30, fontSize, fill: "#3b82f6", textAnchor: "middle", fontWeight: "bold", children: "T_C" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: dist / 2, y: 35, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: 0, y: -30, fontSize, fill: "#ef4444", textAnchor: "middle", fontWeight: "bold", children: "T_H" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: dist, y: -30, fontSize, fill: "#3b82f6", textAnchor: "middle", fontWeight: "bold", children: "T_C" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: dist / 2, y: 35, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChordInteractionOverlay, { el, ctx, padY: 48 })
   ] });
 });
-registerRenderer("thermo_process", (el) => {
+registerRenderer("thermo_process", (el, ctx) => {
   const pType = el.processType || "isotherm";
   const dx = el.x2 - el.x1;
   const dy = el.y2 - el.y1;
-  let pathD = "";
-  if (pType === "isobaric") pathD = `M 0 0 L ${dx} 0`;
-  else if (pType === "isochoric") pathD = `M 0 0 L 0 ${dy}`;
-  else if (pType === "adiabatic") pathD = `M 0 0 Q ${dx * 0.1} ${dy * 0.9} ${dx} ${dy}`;
-  else pathD = `M 0 0 Q ${dx * 0.2} ${dy * 0.8} ${dx} ${dy}`;
+  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") {
@@ -2285,16 +2867,20 @@ registerRenderer("thermo_process", (el) => {
   }
   const arrowAngle = Math.atan2(dy, dx) * 180 / Math.PI;
   const dash = strokeDashFromLineStyle(el);
-  const color = c6(el);
-  const strokeWidth = sw6(el);
+  const color = c5(el);
+  const strokeWidth = sw5(el);
   const fontSize = font4(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: pathD, fill: "none", stroke: color, strokeWidth, strokeDasharray: dash }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("g", { transform: `translate(${midX}, ${midY}) rotate(${arrowAngle})`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "0,0 -8,-5 -8,5", fill: color }) }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: midX + 15, y: midY - 10, fontSize, fill: color, children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LocalFatPathHit, { dPath: pathD, strokeWidth: 22, strokeLinejoin: "round", strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: pathD, fill: "none", stroke: color, strokeWidth, strokeDasharray: dash, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("g", { transform: `translate(${midX}, ${midY}) rotate(${arrowAngle})`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "0,0 -8,-5 -8,5", fill: color, pointerEvents: "none" }) }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: midX + 15, y: midY - 10, fontSize, fill: color, pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("carnot_cycle", (el) => {
+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));
@@ -2307,35 +2893,39 @@ registerRenderer("carnot_cycle", (el) => {
   const ad1 = `Q ${w * 0.7} ${h * 0.6} ${p3.x} ${p3.y}`;
   const iso2 = `Q ${w * 0.6} ${h * 0.85} ${p4.x} ${p4.y}`;
   const ad2 = `Q ${w * 0.2} ${h * 0.4} ${p1.x} ${p1.y}`;
-  const color = c6(el);
-  const strokeWidth = sw6(el);
+  const color = c5(el);
+  const strokeWidth = sw5(el);
   const fontSize = font4(el);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: `${iso1} ${ad1} ${iso2} ${ad2} Z`, fill: color, fillOpacity: 0.1 }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: iso1, fill: "none", stroke: "#ef4444", strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: `M ${p2.x} ${p2.y} ${ad1}`, fill: "none", stroke: "#64748b", strokeWidth, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: `M ${p3.x} ${p3.y} ${iso2}`, fill: "none", stroke: "#3b82f6", strokeWidth }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: `M ${p4.x} ${p4.y} ${ad2}`, fill: "none", stroke: "#64748b", strokeWidth, strokeDasharray: "4 4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: p1.x, cy: p1.y, r: "3", fill: "#1e293b" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: p2.x, cy: p2.y, r: "3", fill: "#1e293b" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: p3.x, cy: p3.y, r: "3", fill: "#1e293b" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: p4.x, cy: p4.y, r: "3", fill: "#1e293b" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w * 0.4, y: h * 0.15, fontSize: "14", fill: "#ef4444", fontWeight: "bold", children: "T_H" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w * 0.6, y: h * 0.95, fontSize: "14", fill: "#3b82f6", fontWeight: "bold", children: "T_C" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h / 2 + 5, fontSize: 16, fill: color, textAnchor: "middle", fontWeight: "bold", children: "W" }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
-});
-registerRenderer("maxwell_boltzmann", (el) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: `${iso1} ${ad1} ${iso2} ${ad2} Z`, fill: color, fillOpacity: 0.1, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: iso1, fill: "none", stroke: "#ef4444", strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: `M ${p2.x} ${p2.y} ${ad1}`, fill: "none", stroke: "#64748b", strokeWidth, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: `M ${p3.x} ${p3.y} ${iso2}`, fill: "none", stroke: "#3b82f6", strokeWidth, pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: `M ${p4.x} ${p4.y} ${ad2}`, fill: "none", stroke: "#64748b", strokeWidth, strokeDasharray: "4 4", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: p1.x, cy: p1.y, r: "3", fill: "#1e293b", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: p2.x, cy: p2.y, r: "3", fill: "#1e293b", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: p3.x, cy: p3.y, r: "3", fill: "#1e293b", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: p4.x, cy: p4.y, r: "3", fill: "#1e293b", pointerEvents: "none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w * 0.4, y: h * 0.15, fontSize: "14", fill: "#ef4444", fontWeight: "bold", children: "T_H" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w * 0.6, y: h * 0.95, fontSize: "14", fill: "#3b82f6", fontWeight: "bold", children: "T_C" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: h / 2 + 5, fontSize: 16, fill: color, textAnchor: "middle", fontWeight: "bold", children: "W" }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)(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 = sw6(el);
+  const strokeWidth = sw5(el);
   const fontSize = font4(el);
-  const color = c6(el);
+  const color = c5(el);
   const buildCurve = (temp, peakHeight, strokeCol, dash) => {
     let d = `M 0 ${h}`;
     const k = 1 / temp;
@@ -2348,66 +2938,75 @@ registerRenderer("maxwell_boltzmann", (el) => {
       const y = h - rawVal / maxRawVal * peakHeight;
       d += ` L ${x} ${y}`;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d, fill: "none", stroke: strokeCol, strokeWidth, strokeDasharray: dash, strokeLinejoin: "round" });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d, fill: "none", stroke: strokeCol, strokeWidth, strokeDasharray: dash, strokeLinejoin: "round", pointerEvents: "none" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: h, stroke: "#1e293b", strokeWidth: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: 0, y1: h, x2: w, y2: h, stroke: "#1e293b", strokeWidth: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: -25, y: h / 2, fontSize: 14, fill: "#1e293b", transform: `rotate(-90, -25, ${h / 2})`, textAnchor: "middle", children: "N(v)" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("rect", { x: w - 70, y: 10, width: 10, height: 10, fill: "#ef4444" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("text", { x: w - 55, y: 20, fontSize: 12, fill: "#1e293b", children: [
-      "T\u2081 = ",
-      t1,
-      "K"
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${minX}, ${minY})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: 0, y1: 0, x2: 0, y2: h, stroke: "#1e293b", strokeWidth: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: 0, y1: h, x2: w, y2: h, stroke: "#1e293b", strokeWidth: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: -25, y: h / 2, fontSize: 14, fill: "#1e293b", transform: `rotate(-90, -25, ${h / 2})`, textAnchor: "middle", children: "N(v)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("rect", { x: w - 70, y: 10, width: 10, height: 10, fill: "#ef4444" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("text", { x: w - 55, y: 20, fontSize: 12, fill: "#1e293b", children: [
+        "T\u2081 = ",
+        t1,
+        "K"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: w - 70, y: 30, width: 10, height: 10, fill: "#3b82f6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("text", { x: w - 55, y: 40, fontSize: 12, fill: "#1e293b", children: [
+        "T\u2082 = ",
+        t2,
+        "K"
+      ] }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: -15, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: w - 70, y: 30, width: 10, height: 10, fill: "#3b82f6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("text", { x: w - 55, y: 40, fontSize: 12, fill: "#1e293b", children: [
-      "T\u2082 = ",
-      t2,
-      "K"
-    ] }),
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: w / 2, y: -15, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BBoxInteractionOverlay, { minX, minY, width: w, height: h, ctx }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer("diatomic_gas", (el) => {
-  const color = c6(el);
-  const strokeWidth = sw6(el);
+registerRenderer("diatomic_gas", (el, ctx) => {
+  const color = c5(el);
   const fontSize = font4(el);
   const showRot = el.showRotations !== false;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: -15, cy: 0, r: 8, fill: color, stroke: "#fff", strokeWidth: 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: 15, cy: 0, r: 8, fill: color, stroke: "#fff", strokeWidth: 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: -10, y1: 0, x2: 10, y2: 0, stroke: color, strokeWidth: 4 }),
-    showRot ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { stroke: "#94a3b8", strokeWidth: 1.5, fill: "none", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 38, selectionHalfSize: 46, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: -15, cy: 0, r: 8, fill: color, stroke: "#fff", strokeWidth: 2, pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: 15, cy: 0, r: 8, fill: color, stroke: "#fff", strokeWidth: 2, pointerEvents: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: -10, y1: 0, x2: 10, y2: 0, stroke: color, strokeWidth: 4, pointerEvents: "none" }),
+    showRot ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { stroke: "#94a3b8", strokeWidth: 1.5, fill: "none", pointerEvents: "none", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M -10 -15 A 15 15 0 0 1 10 -15", strokeDasharray: "2 2" }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polygon", { points: "10,-15 6,-18 6,-12", fill: "#94a3b8" }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("text", { x: 0, y: 25, fontSize, fill: color, textAnchor: "middle", children: String(el.label) }) : null
-  ] });
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: 0, y: 25, fontSize, fill: color, textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+  ] }) });
 });
-registerRenderer("random_walk", (el) => {
+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__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "0", cy: "0", r: "4", fill: "#22c55e" }, "start")];
+  const points = [/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: curX, cy: curY, r: i === steps ? 4 : 2, fill: i === steps ? "#ef4444" : c6(el) }, i));
+    points.push(
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: curX, cy: curY, r: i === steps ? 4 : 2, fill: i === steps ? "#ef4444" : c5(el), pointerEvents: "none" }, i)
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d, fill: "none", stroke: c6(el), strokeWidth: sw6(el), strokeLinejoin: "round" }),
-    points,
-    el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: dist / 2, y: dist / 2, fontSize: font4(el), fill: c6(el), textAnchor: "middle", children: String(el.label) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LocalFatPathHit, { dPath: d, strokeWidth: 20, strokeLinejoin: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d, fill: "none", stroke: c5(el), strokeWidth: sw5(el), strokeLinejoin: "round", pointerEvents: "none" }),
+      points,
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: dist / 2, y: dist / 2, fontSize: font4(el), fill: c5(el), textAnchor: "middle", pointerEvents: "none", children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChordInteractionOverlay, { el, ctx, padX: Math.max(40, dist), padY: Math.max(40, dist) })
   ] });
 });
 
@@ -2426,7 +3025,7 @@ var ringPolygonPoints = (sides, radius, startDeg) => Array.from({ length: sides
   const angle = (i * 360 / sides + startDeg) * (Math.PI / 180);
   return `${radius * Math.cos(angle)},${radius * Math.sin(angle)}`;
 }).join(" ");
-registerRenderer("atom", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+registerRenderer("atom", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 30, children: [
   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { x: "-20", y: "-15", width: "40", height: "30", fill: "white", rx: "6" }),
   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "text",
@@ -2442,17 +3041,18 @@ registerRenderer("atom", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.j
       children: String(el.label || "C")
     }
   )
-] }));
+] }) }));
 registerRenderer("charge_plus", (el, ctx) => {
   const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
+  const sw6 = strokeOf3(el, ctx.isSelected);
   const baseSw = el.strokeWidth || 2;
   const r = Math.max(12, baseSw * 4);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "0", cy: "0", r, fill: "white", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: -r / 2, y1: "0", x2: r / 2, y2: "0", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: -r / 2, x2: "0", y2: r / 2, stroke: stroke2, strokeWidth: sw7 }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const plate = Math.max(28, r + (el.label ? 26 : 8));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(OriginHitPlate, { ctx, hitHalfSize: plate, selectionHalfSize: plate + 10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "0", cy: "0", r, fill: "white", stroke: stroke2, strokeWidth: sw6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: -r / 2, y1: "0", x2: r / 2, y2: "0", stroke: stroke2, strokeWidth: sw6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: -r / 2, x2: "0", y2: r / 2, stroke: stroke2, strokeWidth: sw6 }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "text",
       {
         x: "0",
@@ -2464,18 +3064,19 @@ registerRenderer("charge_plus", (el, ctx) => {
         textAnchor: "middle",
         children: String(el.label)
       }
-    )
-  ] });
+    ) : null
+  ] }) });
 });
 registerRenderer("charge_minus", (el, ctx) => {
   const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
+  const sw6 = strokeOf3(el, ctx.isSelected);
   const baseSw = el.strokeWidth || 2;
   const r = Math.max(12, baseSw * 4);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "0", cy: "0", r, fill: "white", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: -r / 2, y1: "0", x2: r / 2, y2: "0", stroke: stroke2, strokeWidth: sw7 }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const plate = Math.max(28, r + (el.label ? 26 : 8));
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(OriginHitPlate, { ctx, hitHalfSize: plate, selectionHalfSize: plate + 10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "0", cy: "0", r, fill: "white", stroke: stroke2, strokeWidth: sw6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: -r / 2, y1: "0", x2: r / 2, y2: "0", stroke: stroke2, strokeWidth: sw6 }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "text",
       {
         x: "0",
@@ -2487,24 +3088,24 @@ registerRenderer("charge_minus", (el, ctx) => {
         textAnchor: "middle",
         children: String(el.label)
       }
-    )
-  ] });
+    ) : null
+  ] }) });
 });
-registerRenderer("radical", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: el.x1, cy: el.y1, r: "3.5", fill: colorOf3(el, ctx.isSelected) }));
-registerRenderer("lone_pair", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
+registerRenderer("radical", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OriginHitPlate, { ctx, hitHalfSize: 14, selectionHalfSize: 22, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "0", cy: "0", r: "3.5", fill: colorOf3(el, ctx.isSelected) }) }) }));
+registerRenderer("lone_pair", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 16, selectionHalfSize: 24, children: [
   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "-4", cy: "0", r: "2.5", fill: colorOf3(el, ctx.isSelected) }),
   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "4", cy: "0", r: "2.5", fill: colorOf3(el, ctx.isSelected) })
-] }));
+] }) }));
 registerRenderer("benzene", (el, ctx) => {
   const r = 30;
   const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: ringPolygonPoints(6, r, -30), fill: "white", stroke: stroke2, strokeWidth: sw7, strokeLinejoin: "round" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "0", cy: "0", r: r - 10, fill: "none", stroke: stroke2, strokeWidth: sw7 })
-  ] });
+  const sw6 = strokeOf3(el, ctx.isSelected);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: ringPolygonPoints(6, r, -30), fill: "white", stroke: stroke2, strokeWidth: sw6, strokeLinejoin: "round" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "0", cy: "0", r: r - 10, fill: "none", stroke: stroke2, strokeWidth: sw6 })
+  ] }) });
 });
-registerRenderer("cyclohexane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+registerRenderer("cyclohexane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "polygon",
   {
     points: ringPolygonPoints(6, 30, -30),
@@ -2513,8 +3114,8 @@ registerRenderer("cyclohexane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runt
     strokeWidth: strokeOf3(el, ctx.isSelected),
     strokeLinejoin: "round"
   }
-) }));
-registerRenderer("cyclopentane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+) }) }));
+registerRenderer("cyclopentane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "polygon",
   {
     points: ringPolygonPoints(5, 30, -90),
@@ -2523,8 +3124,8 @@ registerRenderer("cyclopentane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_run
     strokeWidth: strokeOf3(el, ctx.isSelected),
     strokeLinejoin: "round"
   }
-) }));
-registerRenderer("cyclobutane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+) }) }));
+registerRenderer("cyclobutane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "polygon",
   {
     points: ringPolygonPoints(4, 30, -45),
@@ -2533,8 +3134,8 @@ registerRenderer("cyclobutane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runt
     strokeWidth: strokeOf3(el, ctx.isSelected),
     strokeLinejoin: "round"
   }
-) }));
-registerRenderer("cyclopropane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+) }) }));
+registerRenderer("cyclopropane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(OriginHitPlate, { ctx, hitHalfSize: 36, selectionHalfSize: 44, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
   "polygon",
   {
     points: ringPolygonPoints(3, 30, -90),
@@ -2543,74 +3144,94 @@ registerRenderer("cyclopropane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_run
     strokeWidth: strokeOf3(el, ctx.isSelected),
     strokeLinejoin: "round"
   }
-) }));
+) }) }));
 var drawBond = (el, style, isSelected) => {
   const d = distance(el.x1, el.y1, el.x2, el.y2);
   const angle = angleDeg(el.x1, el.y1, el.x2, el.y2);
   const stroke2 = colorOf3(el, isSelected);
-  const sw7 = strokeOf3(el, isSelected);
+  const sw6 = strokeOf3(el, isSelected);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    style === "single" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" }),
+    style === "single" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" }),
     style === "double" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "-3.5", x2: d, y2: "-3.5", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "3.5", x2: d, y2: "3.5", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "-3.5", x2: d, y2: "-3.5", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "3.5", x2: d, y2: "3.5", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" })
     ] }),
     style === "triple" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "-6", x2: d, y2: "-6", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "6", x2: d, y2: "6", stroke: stroke2, strokeWidth: sw7, strokeLinecap: "round" })
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "-6", x2: d, y2: "-6", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "6", x2: d, y2: "6", stroke: stroke2, strokeWidth: sw6, strokeLinecap: "round" })
     ] }),
     style === "wedge" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: `0,0 ${d},-5 ${d},5`, fill: stroke2 }),
-    style === "dash" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7 + 1, strokeDasharray: "5 5", strokeLinecap: "square" })
+    style === "dash" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw6 + 1, strokeDasharray: "5 5", strokeLinecap: "square" })
   ] });
 };
-registerRenderer("single_bond", (el, ctx) => drawBond(el, "single", ctx.isSelected));
-registerRenderer("double_bond", (el, ctx) => drawBond(el, "double", ctx.isSelected));
-registerRenderer("triple_bond", (el, ctx) => drawBond(el, "triple", ctx.isSelected));
-registerRenderer("wedge_bond", (el, ctx) => drawBond(el, "wedge", ctx.isSelected));
-registerRenderer("dash_bond", (el, ctx) => drawBond(el, "dash", ctx.isSelected));
+registerRenderer("single_bond", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
+  drawBond(el, "single", ctx.isSelected),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChordInteractionOverlay, { el, ctx })
+] }));
+registerRenderer("double_bond", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
+  drawBond(el, "double", ctx.isSelected),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChordInteractionOverlay, { el, ctx })
+] }));
+registerRenderer("triple_bond", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
+  drawBond(el, "triple", ctx.isSelected),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChordInteractionOverlay, { el, ctx })
+] }));
+registerRenderer("wedge_bond", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
+  drawBond(el, "wedge", ctx.isSelected),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChordInteractionOverlay, { el, ctx })
+] }));
+registerRenderer("dash_bond", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
+  drawBond(el, "dash", ctx.isSelected),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(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 sw7 = strokeOf3(el, ctx.isSelected);
+  const sw6 = strokeOf3(el, ctx.isSelected);
   const mid = lineMid(el);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7 }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw6 }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: stroke2 })
     ] }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("text", { x: mid.x, y: mid.y - 18, textAnchor: "middle", fill: "#0f766e", fontSize: "14", fontFamily: "sans-serif", fontWeight: "bold", children: String(el.label) }),
-    el.value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("text", { x: mid.x, y: mid.y + 18, textAnchor: "middle", fill: "#4b5563", fontSize: "13", fontFamily: "sans-serif", children: String(el.value) })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChordInteractionOverlay, { el, ctx }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)("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 sw7 = strokeOf3(el, ctx.isSelected);
+  const sw6 = strokeOf3(el, ctx.isSelected);
   const mid = lineMid(el);
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "-4", x2: d, y2: "-4", stroke: stroke2, strokeWidth: sw7 }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "-4", x2: d, y2: "-4", stroke: stroke2, strokeWidth: sw6 }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: `${d},-4 ${d - 10},-10 ${d - 10},-4`, fill: stroke2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "4", x2: d, y2: "4", stroke: stroke2, strokeWidth: sw7 }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "4", x2: d, y2: "4", stroke: stroke2, strokeWidth: sw6 }),
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: `0,4 10,4 10,10`, fill: stroke2 })
     ] }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("text", { x: mid.x, y: mid.y - 18, textAnchor: "middle", fill: "#0f766e", fontSize: "14", fontFamily: "sans-serif", fontWeight: "bold", children: String(el.label) }),
-    el.value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("text", { x: mid.x, y: mid.y + 18, textAnchor: "middle", fill: "#4b5563", fontSize: "13", fontFamily: "sans-serif", children: String(el.value) })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChordInteractionOverlay, { el, ctx }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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__ */ (0, import_jsx_runtime10.jsx)("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 sw7 = strokeOf3(el, ctx.isSelected);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: `0,0 12,-6 12,6`, fill: stroke2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: stroke2 })
+  const sw6 = strokeOf3(el, ctx.isSelected);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("line", { x1: "0", y1: "0", x2: d, y2: "0", stroke: stroke2, strokeWidth: sw6 }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: `0,0 12,-6 12,6`, fill: stroke2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: `${d},0 ${d - 12},-6 ${d - 12},6`, fill: stroke2 })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("curved_arrow", (el, ctx) => {
@@ -2619,10 +3240,17 @@ registerRenderer("curved_arrow", (el, ctx) => {
   const h = d / 3;
   const arrowAngle = Math.atan2(h, d / 2) * (180 / Math.PI);
   const stroke2 = colorOf3(el, ctx.isSelected);
-  const sw7 = strokeOf3(el, ctx.isSelected);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: `M 0 0 Q ${d / 2} ${-h} ${d} 0`, fill: "none", stroke: stroke2, strokeWidth: sw7 }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${d}, 0) rotate(${arrowAngle})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("polygon", { points: "0,0 -12,-6 -12,6", fill: stroke2 }) })
+  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__ */ (0, import_jsx_runtime10.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${angle})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: curvePath, fill: "none", stroke: stroke2, strokeWidth: sw6 }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LocalFatPathHit, { dPath: curvePath, strokeWidth: 24, strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("g", { transform: `translate(${d}, 0) rotate(${arrowAngle})`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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)
   ] });
 });
 
@@ -2644,28 +3272,28 @@ var rotated2 = (el, content, selected) => {
     ny = -ny;
   }
   const labelDist = 18;
-  const c7 = stroke(el, selected);
+  const c6 = stroke(el, selected);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: content }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: mx + nx * labelDist, y: my + ny * labelDist, dominantBaseline: "central", textAnchor: "middle", fill: c7, fontSize: 14, fontFamily: "sans-serif", children: String(el.label) })
+    el.label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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 c7 = ctx.isSelected ? "#2563eb" : "#ef4444";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "0", cy: "0", r: "10", fill: "#fecaca", stroke: c7, strokeWidth: width(el, ctx.isSelected) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "0", y1: "-4", x2: "0", y2: "4", stroke: c7, strokeWidth: 2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "-4", y1: "0", x2: "4", y2: "0", stroke: c7, strokeWidth: 2 }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: 0, y: -16, textAnchor: "middle", fill: c7, fontSize: el.fontSize || 14, children: String(el.label) })
-  ] });
+  const c6 = ctx.isSelected ? "#2563eb" : "#ef4444";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 28, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "0", cy: "0", r: "10", fill: "#fecaca", stroke: c6, strokeWidth: width(el, ctx.isSelected) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "0", y1: "-4", x2: "0", y2: "4", stroke: c6, strokeWidth: 2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "-4", y1: "0", x2: "4", y2: "0", stroke: c6, strokeWidth: 2 }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: 0, y: -16, textAnchor: "middle", fill: c6, fontSize: el.fontSize || 14, children: String(el.label) }) : null
+  ] }) });
 });
 registerRenderer("charge_neg", (el, ctx) => {
-  const c7 = ctx.isSelected ? "#2563eb" : "#3b82f6";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "0", cy: "0", r: "10", fill: "#bfdbfe", stroke: c7, strokeWidth: width(el, ctx.isSelected) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "-4", y1: "0", x2: "4", y2: "0", stroke: c7, strokeWidth: 2 }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: 0, y: -16, textAnchor: "middle", fill: c7, fontSize: el.fontSize || 14, children: String(el.label) })
-  ] });
+  const c6 = ctx.isSelected ? "#2563eb" : "#3b82f6";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("g", { transform: `translate(${el.x1}, ${el.y1})`, opacity: ctx?.isGhost ? 0.5 : 1, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(OriginHitPlate, { ctx, hitHalfSize: 22, selectionHalfSize: 28, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: "0", cy: "0", r: "10", fill: "#bfdbfe", stroke: c6, strokeWidth: width(el, ctx.isSelected) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "-4", y1: "0", x2: "4", y2: "0", stroke: c6, strokeWidth: 2 }),
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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);
@@ -2673,7 +3301,8 @@ registerRenderer("dipole", (el, ctx) => {
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: el.x1, y1: el.y1, x2: el.x2, y2: el.y2, stroke: "#64748b", strokeWidth: w, strokeDasharray: "4 4" }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: el.x1, cy: el.y1, r: "8", fill: "#fecaca", stroke: ctx.isSelected ? "#2563eb" : "#ef4444", strokeWidth: w }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: el.x2, cy: el.y2, r: "8", fill: "#bfdbfe", stroke: ctx.isSelected ? "#2563eb" : "#3b82f6", strokeWidth: w }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: (el.x1 + el.x2) / 2, y: el.y1 - 16, textAnchor: "middle", fill: "#475569", fontSize: 14, children: String(el.label) })
+    el.label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: (el.x1 + el.x2) / 2, y: el.y1 - 16, textAnchor: "middle", fill: "#475569", fontSize: 14, children: String(el.label) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 var plateGlyphs = (d, isPos) => {
@@ -2688,31 +3317,38 @@ var plateGlyphs = (d, isPos) => {
   return glyphs;
 };
 registerRenderer("charged_plate_pos", (el, ctx) => {
-  const c7 = ctx.isSelected ? "#2563eb" : "#ef4444";
+  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 sw7 = Math.max(12, el.strokeWidth * 4 || 8);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c7, strokeWidth: sw7, strokeLinecap: "round" }),
-    plateGlyphs(d, true)
+  const sw6 = Math.max(12, el.strokeWidth * 4 || 8);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c6, strokeWidth: sw6, strokeLinecap: "round" }),
+      plateGlyphs(d, true)
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("charged_plate_neg", (el, ctx) => {
-  const c7 = ctx.isSelected ? "#2563eb" : "#3b82f6";
+  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 sw7 = Math.max(12, el.strokeWidth * 4 || 8);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c7, strokeWidth: sw7, strokeLinecap: "round" }),
-    plateGlyphs(d, false)
+  const sw6 = Math.max(12, el.strokeWidth * 4 || 8);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: 0, x2: d, y2: 0, stroke: c6, strokeWidth: sw6, strokeLinecap: "round" }),
+      plateGlyphs(d, false)
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("gaussian_sphere", (el, ctx) => {
   const r = Math.max(10, distance(el.x1, el.y1, el.x2, el.y2));
-  const c7 = ctx.isSelected ? "#2563eb" : "#10b981";
+  const c6 = ctx.isSelected ? "#2563eb" : "#10b981";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: el.x1, cy: el.y1, r, fill: "#d1fae5", fillOpacity: 0.35, stroke: c7, strokeWidth: width(el, ctx.isSelected), strokeDasharray: "5 5" }),
-    el.label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: el.x1, y: el.y1 - r - 12, textAnchor: "middle", fill: c7, fontSize: 13, children: String(el.label) })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsx)("text", { x: el.x1, y: el.y1 - r - 12, textAnchor: "middle", fill: c6, fontSize: 13, children: String(el.label) }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
 registerRenderer("gaussian_cylinder", (el, ctx) => {
@@ -2720,23 +3356,22 @@ registerRenderer("gaussian_cylinder", (el, ctx) => {
   const a = angleDeg(el.x1, el.y1, el.x2, el.y2);
   const r = el.curveHeight ?? 40;
   const capRx = 15;
-  const c7 = ctx.isSelected ? "#2563eb" : "#10b981";
-  const sw7 = width(el, ctx.isSelected);
+  const c6 = ctx.isSelected ? "#2563eb" : "#10b981";
+  const sw6 = width(el, ctx.isSelected);
   const dash = "6 6";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { opacity: ctx?.isGhost ? 0.5 : 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: el.x1, y1: el.y1, x2: el.x2, y2: el.y2, stroke: "transparent", strokeWidth: Math.max(24, r * 2), strokeLinecap: "round" }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${el.x1}, ${el.y1}) rotate(${a})`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: -r, x2: d, y2: -r, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: r, x2: d, y2: r, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ellipse", { cx: 0, cy: 0, rx: capRx, ry: r, fill: c7, fillOpacity: 0.05, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ellipse", { cx: d, cy: 0, rx: capRx, ry: r, fill: c7, fillOpacity: 0.05, stroke: c7, strokeWidth: sw7, strokeDasharray: dash }),
-      el.label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: d / 2, y: -r - 10, textAnchor: "middle", fill: c7, fontSize: el.fontSize || 14, children: String(el.label) })
-    ] })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: -r, x2: d, y2: -r, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: r, x2: d, y2: r, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ellipse", { cx: 0, cy: 0, rx: capRx, ry: r, fill: c6, fillOpacity: 0.05, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ellipse", { cx: d, cy: 0, rx: capRx, ry: r, fill: c6, fillOpacity: 0.05, stroke: c6, strokeWidth: sw6, strokeDasharray: dash }),
+      el.label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: d / 2, y: -r - 10, textAnchor: "middle", fill: c6, fontSize: el.fontSize || 14, children: String(el.label) }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChordInteractionOverlay, { el, ctx })
   ] });
 });
-registerRenderer(
-  "mirror_plane",
-  (el, ctx) => rotated2(
+registerRenderer("mirror_plane", (el, ctx) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { children: [
+  rotated2(
     el,
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: -24, x2: 0, y2: 24, stroke: stroke(el, ctx.isSelected), strokeWidth: width(el, ctx.isSelected) }),
@@ -2746,21 +3381,25 @@ registerRenderer(
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: 18, x2: -8, y2: 24, stroke: stroke(el, ctx.isSelected), strokeWidth: 1.5 })
     ] }),
     ctx.isSelected
-  )
-);
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChordInteractionOverlay, { el, ctx })
+] }));
 registerRenderer("energy_level", (el, ctx) => {
   const d = Math.max(24, distance(el.x1, el.y1, el.x2, el.y2));
-  const c7 = stroke(el, ctx.isSelected);
+  const c6 = stroke(el, ctx.isSelected);
   const energyText = el.energy != null ? String(el.energy) : "";
-  return rotated2(
-    el,
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: -8, x2: d, y2: -8, stroke: c7, strokeWidth: width(el, ctx.isSelected) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: 8, x2: d, y2: 8, stroke: c7, strokeWidth: width(el, ctx.isSelected) }),
-      energyText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: d / 2, y: 22, textAnchor: "middle", fontSize: 10, fill: "#4b5563", children: energyText })
-    ] }),
-    ctx.isSelected
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { children: [
+    rotated2(
+      el,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: -8, x2: d, y2: -8, stroke: c6, strokeWidth: width(el, ctx.isSelected) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: 0, y1: 8, x2: d, y2: 8, stroke: c6, strokeWidth: width(el, ctx.isSelected) }),
+        energyText ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: d / 2, y: 22, textAnchor: "middle", fontSize: 10, fill: "#4b5563", children: energyText }) : null
+      ] }),
+      ctx.isSelected
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChordInteractionOverlay, { el, ctx })
+  ] });
 });
 
 // src/core/Renderer.tsx
@@ -2782,7 +3421,8 @@ var Renderer = ({
   onBackgroundMouseMove,
   onBackgroundMouseUp,
   onBackgroundMouseLeave,
-  onElementMouseDown
+  onElementMouseDown,
+  onHandlePointerDown
 }) => {
   const autoNodes = (0, import_react.useMemo)(() => getCircuitAutoNodes(elements), [elements]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -2801,14 +3441,19 @@ var Renderer = ({
         ] }),
         elements.map((el) => {
           const renderer = getRenderer(String(el.type));
-          const content = renderer ? renderer(el, { isSelected: selectedId === el.id, viewMode }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UnknownElement, { x: el.x1, y: el.y1, type: 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__ */ (0, import_jsx_runtime12.jsx)(UnknownElement, { x: el.x1, y: el.y1, type: String(el.type) });
           return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("g", { onMouseDown: (e) => onElementMouseDown?.(e, el), cursor: viewMode ? "default" : "move", children: content }, String(el.id));
         }),
         autoNodes.map(([nx, ny], idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("g", { opacity: 0.5, children: renderer(drawing, { isGhost: true, viewMode }) });
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("g", { opacity: 0.5, children: renderer(drawing, { isGhost: true, viewMode, onHandlePointerDown: void 0 }) });
         })()
       ]
     }