@codefrydev/svg-engine 0.1.0 → 0.1.2

package/dist/editor.js

@@ -2,13 +2,64 @@ import {
   Renderer,
   getMouseCoords,
   snap
-} from "./chunk-KRCGD3CL.js";
+} from "./chunk-VCDC4W3X.js";
 
 // src/editor/Editor.tsx
 import { forwardRef, useEffect as useEffect2, useImperativeHandle, useMemo as useMemo2, useState as useState2 } from "react";
 
 // src/editor/hooks/useDrawing.ts
 import { useEffect, useMemo, useRef, useState } from "react";
+var MIN_DRAW_DISTANCE = 10;
+var snapshotOriginal = (element) => {
+  const base = {
+    x1: element.x1,
+    y1: element.y1,
+    x2: element.x2,
+    y2: element.y2
+  };
+  const raw = element.cps;
+  if (raw?.length) {
+    return { ...base, cps: raw.map((p) => ({ x: p.x, y: p.y })) };
+  }
+  return base;
+};
+var applyDragDelta = (prev, draggingId, dx, dy, orig) => {
+  const str = String(draggingId);
+  if (str.endsWith("-start")) {
+    const rawId = str.slice(0, -"-start".length);
+    return prev.map(
+      (el) => String(el.id) === rawId ? { ...el, x1: orig.x1 + dx, y1: orig.y1 + dy } : el
+    );
+  }
+  if (str.endsWith("-end")) {
+    const rawId = str.slice(0, -"-end".length);
+    return prev.map(
+      (el) => String(el.id) === rawId ? { ...el, x2: orig.x2 + dx, y2: orig.y2 + dy } : el
+    );
+  }
+  const cpMatch = str.match(/^(.*)-cp-(\d+)$/);
+  if (cpMatch && orig.cps) {
+    const rawId = cpMatch[1];
+    const cpIndex = Number(cpMatch[2]);
+    return prev.map((el) => {
+      if (String(el.id) !== rawId) return el;
+      const newCps = orig.cps.map(
+        (p, i) => i === cpIndex ? { x: p.x + dx, y: p.y + dy } : { ...p }
+      );
+      return { ...el, cps: newCps };
+    });
+  }
+  return prev.map(
+    (el) => el.id === draggingId || String(el.id) === str ? {
+      ...el,
+      x1: orig.x1 + dx,
+      y1: orig.y1 + dy,
+      x2: orig.x2 + dx,
+      y2: orig.y2 + dy,
+      ...orig.cps ? { cps: orig.cps.map((p) => ({ x: p.x + dx, y: p.y + dy })) } : {}
+    } : el
+  );
+};
 var waveOscillationDefaults = (tool) => {
   let defaultColor = "#0f172a";
   if (["spring", "sine_wave", "wavefronts", "shm_graph"].includes(tool)) defaultColor = "#3b82f6";
@@ -74,10 +125,10 @@ var toolCreateDefaults = (tool, presetKey) => {
     case "ray":
     case "photon":
       if (presetKey === "graph") return { color: "#0f172a", strokeWidth: 2 };
-      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2 };
+      if (presetKey === "mechanics") return { color: "#0f172a", strokeWidth: 2 };
       if (presetKey === "rotation") return { color: "#ef4444", strokeWidth: 2 };
-      if (presetKey === "optical" && (tool === "ray" || tool === "photon")) return { color: "#ef4444", strokeWidth: 2 };
-      if (presetKey === "optical") return { color: "#0f172a", strokeWidth: 2 };
+      if (presetKey === "light" && (tool === "ray" || tool === "photon")) return { color: "#ef4444", strokeWidth: 2 };
+      if (presetKey === "light") return { color: "#0f172a", strokeWidth: 2 };
       return { color: "#ef4444", strokeWidth: 2 };
     case "lens_convex":
     case "lens_concave":
@@ -92,7 +143,7 @@ var toolCreateDefaults = (tool, presetKey) => {
     case "slit_single":
       return { color: "#0f172a", strokeWidth: 4 };
     case "nucleus":
-      if (presetKey === "optical") return { color: "#3b82f6", strokeWidth: 2, fontSize: 18 };
+      if (presetKey === "light") return { color: "#3b82f6", strokeWidth: 2, fontSize: 18 };
       return { color: "#0f172a", strokeWidth: 2, fontSize: 18 };
     case "energy_level":
       return { color: "#0f172a", strokeWidth: 2, label: "n=1", energy: "-13.6 eV" };
@@ -100,13 +151,13 @@ var toolCreateDefaults = (tool, presetKey) => {
       return { color: "#0f172a", strokeWidth: 2, lineStyle: "dashed" };
     case "point":
       if (presetKey === "graph") return { color: "#0f172a", strokeWidth: 2, fontSize: 16, label: "P" };
-      if (presetKey === "light" || presetKey === "optical") return { color: "#0f172a", strokeWidth: 2, fontSize: 18, label: "P" };
+      if (presetKey === "light") return { color: "#0f172a", strokeWidth: 2, fontSize: 18, label: "P" };
       if (presetKey === "thermo") return { color: "#0f172a", strokeWidth: 2, fontSize: 18, label: "P" };
       return {};
     case "text":
       if (presetKey === "graph") return { color: "#0f172a", strokeWidth: 2, fontSize: 18, label: "Label" };
-      if (presetKey === "light" || presetKey === "optical") return { color: "#0f172a", strokeWidth: 2, fontSize: 18, label: "Text" };
-      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2, fontSize: 20, label: "Label" };
+      if (presetKey === "light") return { color: "#0f172a", strokeWidth: 2, fontSize: 18, label: "Text" };
+      if (presetKey === "mechanics") return { color: "#0f172a", strokeWidth: 2, fontSize: 20, label: "Label" };
       if (presetKey === "rotation") return { color: "#1e293b", strokeWidth: 2, fontSize: 20, label: "Label" };
       if (presetKey === "thermo") return { color: "#1e293b", strokeWidth: 2, fontSize: 18, label: "Equation/Label" };
       return {};
@@ -141,15 +192,15 @@ var toolCreateDefaults = (tool, presetKey) => {
       return {};
     case "spring":
       if (presetKey === "rotation") return { color: "#0f172a", strokeWidth: 2, coils: 6, lineStyle: "solid" };
-      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2 };
+      if (presetKey === "mechanics") return { color: "#0f172a", strokeWidth: 2 };
       return {};
     case "pivot":
       if (presetKey === "rotation") return { color: "#64748b", strokeWidth: 2, size: 20, fontSize: 18 };
-      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2 };
+      if (presetKey === "mechanics") return { color: "#0f172a", strokeWidth: 2 };
       return {};
     case "pulley":
       if (presetKey === "rotation") return { color: "#64748b", strokeWidth: 2, fontSize: 18 };
-      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2 };
+      if (presetKey === "mechanics") return { color: "#0f172a", strokeWidth: 2 };
       return {};
     case "point_mass":
       return { color: "#ef4444", strokeWidth: 2, size: 15, fontSize: 18 };
@@ -248,18 +299,18 @@ var toolCreateDefaults = (tool, presetKey) => {
     case "disk":
     case "particle":
     case "com":
-      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2 };
+      if (presetKey === "mechanics") return { color: "#0f172a", strokeWidth: 2 };
       return {};
     case "block":
     case "cart":
-      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2, rotation: 0 };
+      if (presetKey === "mechanics") return { color: "#0f172a", strokeWidth: 2, rotation: 0 };
       return {};
     default:
       return {};
   }
 };
-var useDrawing = (initialElements2, presetKey) => {
-  const [elements, setElements] = useState(initialElements2);
+var useDrawing = (initialElements, presetKey) => {
+  const [elements, setElements] = useState(initialElements);
   const [tool, setTool] = useState("select");
   const [drawing, setDrawing] = useState(null);
   const [selectedId, setSelectedId] = useState(null);
@@ -272,10 +323,17 @@ var useDrawing = (initialElements2, presetKey) => {
   const dragStart = useRef({ x: 0, y: 0 });
   const originalPos = useRef(null);
   useEffect(() => {
-    setElements(initialElements2);
-  }, [initialElements2]);
+    setElements(initialElements);
+    setSelectedId(null);
+    setShowProperties(false);
+    setDrawing(null);
+  }, [initialElements]);
   useEffect(() => {
     const handleKeyDown = (e) => {
+      const tgt = e.target;
+      if (tgt && (tgt.tagName === "INPUT" || tgt.tagName === "TEXTAREA" || tgt.isContentEditable)) {
+        return;
+      }
       if ((e.key === "Delete" || e.key === "Backspace") && selectedId) {
         setElements((prev) => prev.filter((el) => el.id !== selectedId));
         setSelectedId(null);
@@ -284,6 +342,7 @@ var useDrawing = (initialElements2, presetKey) => {
       if (e.key === "Escape") {
         setDrawing(null);
         setTool("select");
+        setShowProperties(false);
       }
     };
     window.addEventListener("keydown", handleKeyDown);
@@ -301,18 +360,61 @@ var useDrawing = (initialElements2, presetKey) => {
     setSelectedId(element.id);
     setDraggingId(element.id);
     dragStart.current = m;
-    originalPos.current = { x1: element.x1, y1: element.y1, x2: element.x2, y2: element.y2 };
+    originalPos.current = snapshotOriginal(element);
+  };
+  const onHandlePointerDown = (e, element, kind, cpIndex) => {
+    if (tool !== "select") return;
+    e.stopPropagation();
+    if (!svgRef.current) return;
+    const m = getMouseCoords(svgRef.current, e);
+    setSelectedId(element.id);
+    dragStart.current = m;
+    if (kind === "start") {
+      setDraggingId(`${element.id}-start`);
+      originalPos.current = {
+        x1: element.x1,
+        y1: element.y1,
+        x2: element.x2,
+        y2: element.y2
+      };
+      return;
+    }
+    if (kind === "end") {
+      setDraggingId(`${element.id}-end`);
+      originalPos.current = {
+        x1: element.x1,
+        y1: element.y1,
+        x2: element.x2,
+        y2: element.y2
+      };
+      return;
+    }
+    if (kind === "cp" && cpIndex !== void 0) {
+      const raw = element.cps;
+      const cps = raw?.length && raw.length > 0 ? raw.map((p) => ({ x: p.x, y: p.y })) : [{ x: (element.x1 + element.x2) / 2, y: Math.min(element.y1, element.y2) - 50 }];
+      setDraggingId(`${element.id}-cp-${cpIndex}`);
+      originalPos.current = {
+        x1: element.x1,
+        y1: element.y1,
+        x2: element.x2,
+        y2: element.y2,
+        cps
+      };
+    }
   };
   const handleMouseDown = (e) => {
     if (!svgRef.current) return;
     if (tool === "select") {
-      setSelectedId(null);
+      if (e.target === svgRef.current) {
+        setSelectedId(null);
+        setShowProperties(false);
+      }
       return;
     }
     const p = getMouseCoords(svgRef.current, e);
     const x = snap(p.x);
     const y = snap(p.y);
-    const mechanicsSingle = (presetKey === "mechanics" || presetKey === "mechanical") && ["pivot", "com", "axes"].includes(tool);
+    const mechanicsSingle = presetKey === "mechanics" && ["pivot", "com", "axes"].includes(tool);
     const rotationSingle = presetKey === "rotation" && ["point_mass", "com_indicator", "pivot"].includes(tool);
     const waveOscSingle = presetKey === "waveOscillation" && ["tuning_fork", "speaker", "wavefronts", "mass_box"].includes(tool);
     const single = mechanicsSingle || rotationSingle || waveOscSingle || [
@@ -354,7 +456,7 @@ var useDrawing = (initialElements2, presetKey) => {
       return;
     }
     const defaults = toolCreateDefaults(tool, presetKey);
-    const rotationExtra = (presetKey === "mechanics" || presetKey === "mechanical") && (tool === "block" || tool === "cart") ? { rotation: defaults.rotation ?? 0 } : {};
+    const rotationExtra = presetKey === "mechanics" && (tool === "block" || tool === "cart") ? { rotation: defaults.rotation ?? 0 } : {};
     setDrawing({
       ...defaults,
       ...rotationExtra,
@@ -370,32 +472,24 @@ var useDrawing = (initialElements2, presetKey) => {
   const handleMouseMove = (e) => {
     if (!svgRef.current) return;
     const p = getMouseCoords(svgRef.current, e);
-    if (draggingId && originalPos.current) {
+    if (draggingId != null && originalPos.current) {
       const dx = snap(p.x - dragStart.current.x);
       const dy = snap(p.y - dragStart.current.y);
-      setElements(
-        (prev) => prev.map(
-          (el) => el.id === draggingId ? {
-            ...el,
-            x1: originalPos.current.x1 + dx,
-            y1: originalPos.current.y1 + dy,
-            x2: originalPos.current.x2 + dx,
-            y2: originalPos.current.y2 + dy
-          } : el
-        )
-      );
+      const orig = originalPos.current;
+      setElements((prev) => applyDragDelta(prev, draggingId, dx, dy, orig));
       return;
     }
     if (!drawing) return;
     setDrawing({ ...drawing, x2: snap(p.x), y2: snap(p.y) });
   };
   const handleMouseUp = () => {
-    if (draggingId) {
+    if (draggingId != null) {
       setDraggingId(null);
+      originalPos.current = null;
       return;
     }
     if (!drawing) return;
-    if (drawing.x1 === drawing.x2 && drawing.y1 === drawing.y2) {
+    if (Math.abs(drawing.x1 - drawing.x2) <= MIN_DRAW_DISTANCE && Math.abs(drawing.y1 - drawing.y2) <= MIN_DRAW_DISTANCE) {
       setDrawing(null);
       setTool("select");
       return;
@@ -428,6 +522,7 @@ var useDrawing = (initialElements2, presetKey) => {
     selectedElement,
     svgRef,
     onElementMouseDown,
+    onHandlePointerDown,
     handleMouseDown,
     handleMouseMove,
     handleMouseUp
@@ -605,9 +700,10 @@ var Icons = {
     /* @__PURE__ */ jsx("line", { x1: "8", y1: "16", x2: "16", y2: "16", stroke: "currentColor", strokeWidth: "2" })
   ] }),
   torsion_pendulum: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "16", stroke: "currentColor", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "16", rx: "8", ry: "3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "1" })
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "2", width: "14", height: "4", rx: "1", fill: "currentColor", opacity: "0.35" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "6", x2: "12", y2: "15", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "8", y: "15", width: "8", height: "6", rx: "2", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "14", y2: "13", stroke: "currentColor", strokeWidth: "1.2" })
   ] }),
   standing_wave: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("path", { d: "M 2 12 Q 7 2 12 12 T 22 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -730,7 +826,16 @@ var Icons = {
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3", fill: "#ef4444" })
   ] }),
   orbit: /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "8", ry: "4.5", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
-  resistor: /* @__PURE__ */ jsx("path", { d: "M 2 12 L 6 12 L 8 6 L 12 18 L 16 6 L 18 12 L 22 12", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+  resistor: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M 2 12 L 6 12 L 8 6 L 12 18 L 16 6 L 18 12 L 22 12",
+      fill: "none",
+      stroke: "#b45309",
+      strokeWidth: "2.2",
+      strokeLinejoin: "round"
+    }
+  ),
   capacitor: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "9", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
     /* @__PURE__ */ jsx("line", { x1: "9", y1: "6", x2: "9", y2: "18", stroke: "currentColor", strokeWidth: "2.2" }),
@@ -740,22 +845,24 @@ var Icons = {
   inductor: /* @__PURE__ */ jsx("path", { d: "M 3 12 C 5 8, 7 8, 9 12 C 11 8, 13 8, 15 12 C 17 8, 19 8, 21 12", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
   diode: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "8", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx("polygon", { points: "8,7 8,17 14,12", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "8,7 8,17 14,12", fill: "#fcd34d", fillOpacity: "0.85", stroke: "currentColor", strokeWidth: "2" }),
     /* @__PURE__ */ jsx("line", { x1: "15.5", y1: "7", x2: "15.5", y2: "17", stroke: "currentColor", strokeWidth: "2" }),
     /* @__PURE__ */ jsx("line", { x1: "15.5", y1: "12", x2: "21", y2: "12", stroke: "currentColor", strokeWidth: "2" })
   ] }),
   battery: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("path", { d: "M 2 12 L 10 12 M 10 4 L 10 20 M 14 8 L 14 16 M 14 12 L 22 12", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx("line", { x1: "14", y1: "8", x2: "14", y2: "16", stroke: "currentColor", strokeWidth: "4" })
+    /* @__PURE__ */ jsx("path", { d: "M 2 12 L 7 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("rect", { x: "7", y: "4", width: "5", height: "16", rx: "0.5", fill: "#dc2626", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ jsx("rect", { x: "12", y: "7", width: "5", height: "10", rx: "0.5", fill: "#2563eb", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ jsx("path", { d: "M 17 12 L 22 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
   ] }),
   ground: /* @__PURE__ */ jsx("path", { d: "M 12 4 L 12 12 M 6 12 L 18 12 M 8 16 L 16 16 M 10 20 L 14 20", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
   meter_v: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx("text", { x: "12", y: "15", fontSize: "8", textAnchor: "middle", fill: "currentColor", children: "V" })
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "#e0f2fe", stroke: "#0369a1", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("text", { x: "12", y: "15", fontSize: "9", textAnchor: "middle", fill: "#0369a1", fontWeight: "bold", children: "V" })
   ] }),
   meter_a: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx("text", { x: "12", y: "15", fontSize: "8", textAnchor: "middle", fill: "currentColor", children: "A" })
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "#fef3c7", stroke: "#b45309", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("text", { x: "12", y: "15", fontSize: "9", textAnchor: "middle", fill: "#b45309", fontWeight: "bold", children: "A" })
   ] }),
   piston_cylinder: /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("path", { d: "M 4 4 L 4 20 L 20 20 L 20 4", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
@@ -837,7 +944,7 @@ var Icons = {
   lens_convex: /* @__PURE__ */ jsx(
     "path",
     {
-      d: "M 12 2 Q 18 12 12 22 Q 6 12 12 2 Z",
+      d: "M 4 12 Q 12 4 20 12 Q 12 20 4 12 Z",
       fill: "#38bdf8",
       fillOpacity: "0.4",
       stroke: "currentColor",
@@ -847,7 +954,7 @@ var Icons = {
   lens_concave: /* @__PURE__ */ jsx(
     "path",
     {
-      d: "M 8 2 L 16 2 Q 12 12 16 22 L 8 22 Q 12 12 8 2 Z",
+      d: "M 4 8 L 4 16 Q 12 14 20 16 L 20 8 Q 12 10 4 8 Z",
       fill: "#38bdf8",
       fillOpacity: "0.4",
       stroke: "currentColor",
@@ -855,16 +962,16 @@ var Icons = {
     }
   ),
   mirror_concave: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("path", { d: "M 16 2 Q 8 12 16 22", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx("line", { x1: "11", y1: "6", x2: "6", y2: "8", stroke: "currentColor" }),
-    /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "3", y2: "12", stroke: "currentColor" }),
-    /* @__PURE__ */ jsx("line", { x1: "11", y1: "18", x2: "6", y2: "16", stroke: "currentColor" })
+    /* @__PURE__ */ jsx("path", { d: "M 4 12 Q 12 18 20 12", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "14", x2: "5", y2: "17", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "9", y2: "18", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "14", x2: "13", y2: "17", stroke: "currentColor" })
   ] }),
   mirror_convex: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("path", { d: "M 8 4 Q 16 12 8 20", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx("line", { x1: "13", y1: "6", x2: "18", y2: "8", stroke: "currentColor" }),
-    /* @__PURE__ */ jsx("line", { x1: "16", y1: "12", x2: "21", y2: "12", stroke: "currentColor" }),
-    /* @__PURE__ */ jsx("line", { x1: "13", y1: "18", x2: "18", y2: "16", stroke: "currentColor" })
+    /* @__PURE__ */ jsx("path", { d: "M 4 12 Q 12 6 20 12", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "10", x2: "5", y2: "7", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "9", y2: "6", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "10", x2: "13", y2: "7", stroke: "currentColor" })
   ] }),
   prism: /* @__PURE__ */ jsx("polygon", { points: "12,4 2,20 22,20", fill: "#38bdf8", fillOpacity: "0.4", stroke: "currentColor", strokeWidth: "2" }),
   glass_slab: /* @__PURE__ */ jsx("rect", { x: "4", y: "6", width: "16", height: "12", fill: "#38bdf8", fillOpacity: "0.4", stroke: "currentColor", strokeWidth: "2" }),
@@ -1004,22 +1111,303 @@ var Icons = {
   ] })
 };
 
+// src/editor/toolbarToolTheme.ts
+var tones = {
+  teal: {
+    idle: "text-teal-600 border-transparent hover:bg-teal-50 hover:border-teal-200",
+    active: "bg-teal-50 text-teal-700 border-teal-200 shadow-sm ring-1 ring-teal-100"
+  },
+  indigo: {
+    idle: "text-indigo-600 border-transparent hover:bg-indigo-50 hover:border-indigo-200",
+    active: "bg-indigo-50 text-indigo-700 border-indigo-200 shadow-sm ring-1 ring-indigo-100"
+  },
+  violet: {
+    idle: "text-violet-600 border-transparent hover:bg-violet-50 hover:border-violet-200",
+    active: "bg-violet-50 text-violet-700 border-violet-200 shadow-sm ring-1 ring-violet-100"
+  },
+  purple: {
+    idle: "text-purple-600 border-transparent hover:bg-purple-50 hover:border-purple-200",
+    active: "bg-purple-50 text-purple-700 border-purple-200 shadow-sm ring-1 ring-purple-100"
+  },
+  amber: {
+    idle: "text-amber-600 border-transparent hover:bg-amber-50 hover:border-amber-200",
+    active: "bg-amber-50 text-amber-700 border-amber-200 shadow-sm ring-1 ring-amber-100"
+  },
+  orange: {
+    idle: "text-orange-600 border-transparent hover:bg-orange-50 hover:border-orange-200",
+    active: "bg-orange-50 text-orange-700 border-orange-200 shadow-sm ring-1 ring-orange-100"
+  },
+  rose: {
+    idle: "text-rose-600 border-transparent hover:bg-rose-50 hover:border-rose-200",
+    active: "bg-rose-50 text-rose-700 border-rose-200 shadow-sm ring-1 ring-rose-100"
+  },
+  sky: {
+    idle: "text-sky-600 border-transparent hover:bg-sky-50 hover:border-sky-200",
+    active: "bg-sky-50 text-sky-700 border-sky-200 shadow-sm ring-1 ring-sky-100"
+  },
+  cyan: {
+    idle: "text-cyan-600 border-transparent hover:bg-cyan-50 hover:border-cyan-200",
+    active: "bg-cyan-50 text-cyan-700 border-cyan-200 shadow-sm ring-1 ring-cyan-100"
+  },
+  fuchsia: {
+    idle: "text-fuchsia-600 border-transparent hover:bg-fuchsia-50 hover:border-fuchsia-200",
+    active: "bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200 shadow-sm ring-1 ring-fuchsia-100"
+  },
+  emerald: {
+    idle: "text-emerald-600 border-transparent hover:bg-emerald-50 hover:border-emerald-200",
+    active: "bg-emerald-50 text-emerald-700 border-emerald-200 shadow-sm ring-1 ring-emerald-100"
+  },
+  lime: {
+    idle: "text-lime-600 border-transparent hover:bg-lime-50 hover:border-lime-200",
+    active: "bg-lime-50 text-lime-700 border-lime-200 shadow-sm ring-1 ring-lime-100"
+  },
+  green: {
+    idle: "text-green-600 border-transparent hover:bg-green-50 hover:border-green-200",
+    active: "bg-green-50 text-green-700 border-green-200 shadow-sm ring-1 ring-green-100"
+  },
+  blue: {
+    idle: "text-blue-600 border-transparent hover:bg-blue-50 hover:border-blue-200",
+    active: "bg-blue-50 text-blue-700 border-blue-200 shadow-sm ring-1 ring-blue-100"
+  },
+  pink: {
+    idle: "text-pink-600 border-transparent hover:bg-pink-50 hover:border-pink-200",
+    active: "bg-pink-50 text-pink-700 border-pink-200 shadow-sm ring-1 ring-pink-100"
+  },
+  slate: {
+    idle: "text-slate-600 border-transparent hover:bg-slate-100 hover:border-slate-200",
+    active: "bg-slate-100 text-slate-800 border-slate-300 shadow-sm ring-1 ring-slate-200"
+  },
+  red: {
+    idle: "text-red-600 border-transparent hover:bg-red-50 hover:border-red-200",
+    active: "bg-red-50 text-red-700 border-red-200 shadow-sm ring-1 ring-red-100"
+  },
+  yellow: {
+    idle: "text-yellow-600 border-transparent hover:bg-yellow-50 hover:border-yellow-200",
+    active: "bg-yellow-50 text-yellow-800 border-yellow-200 shadow-sm ring-1 ring-yellow-100"
+  },
+  stone: {
+    idle: "text-stone-600 border-transparent hover:bg-stone-50 hover:border-stone-200",
+    active: "bg-stone-50 text-stone-800 border-stone-200 shadow-sm ring-1 ring-stone-100"
+  }
+};
+var bondCycle = ["indigo", "violet", "purple", "amber", "orange"];
+var arrowCycle = ["rose", "sky", "cyan", "fuchsia"];
+var fallbackCycle = [
+  "indigo",
+  "sky",
+  "violet",
+  "emerald",
+  "rose",
+  "amber",
+  "cyan",
+  "fuchsia",
+  "lime",
+  "orange",
+  "blue",
+  "pink"
+];
+function hashId(id) {
+  let h = 2166136261;
+  for (let i = 0; i < id.length; i++) {
+    h ^= id.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return Math.abs(h);
+}
+var curated = {
+  select: "teal",
+  single_bond: "indigo",
+  double_bond: "violet",
+  triple_bond: "purple",
+  wedge_bond: "amber",
+  dash_bond: "orange",
+  curved_arrow: "rose",
+  reaction_arrow: "sky",
+  equilibrium_arrow: "cyan",
+  resonance_arrow: "fuchsia",
+  benzene: "emerald",
+  cyclohexane: "lime",
+  cyclopentane: "green",
+  cyclobutane: "teal",
+  cyclopropane: "cyan",
+  atom: "indigo",
+  charge_plus: "rose",
+  charge_minus: "sky",
+  charge_pos: "rose",
+  charge_neg: "sky",
+  radical: "orange",
+  lone_pair: "violet",
+  text: "slate",
+  point: "blue",
+  line: "indigo",
+  string: "indigo",
+  dashed: "stone",
+  dashed_line: "stone",
+  vector: "sky",
+  ray: "amber",
+  axes: "slate",
+  axes_3d: "slate",
+  angle: "violet",
+  arc: "violet",
+  curve_arrow: "fuchsia",
+  wire: "slate",
+  resistor: "amber",
+  capacitor: "blue",
+  inductor: "violet",
+  diode: "purple",
+  battery: "green",
+  meter_v: "cyan",
+  meter_a: "cyan",
+  meter: "cyan",
+  ground: "stone",
+  ac_source: "orange",
+  spring: "lime",
+  block: "amber",
+  wedge: "amber",
+  cart: "orange",
+  particle: "blue",
+  disk: "violet",
+  rod: "stone",
+  pulley: "slate",
+  pivot: "red",
+  com: "pink",
+  surface: "stone",
+  dimension: "cyan",
+  point_mass: "blue",
+  block_mass: "amber",
+  com_indicator: "pink",
+  system_boundary: "fuchsia",
+  dashed_path: "stone",
+  rocket: "orange",
+  uniform_rod: "lime",
+  solid_disk: "violet",
+  hoop_ring: "purple",
+  rolling_body: "rose",
+  inclined_wedge: "amber",
+  rectangle: "indigo",
+  circle: "blue",
+  ellipse: "violet",
+  parabola_v: "emerald",
+  parabola_h: "emerald",
+  hyperbola: "purple",
+  modulus: "orange",
+  step_function: "stone",
+  shaded_area: "cyan",
+  exponential: "green",
+  logarithmic: "teal",
+  sine_wave: "sky",
+  standing_wave: "cyan",
+  wave_pulse: "blue",
+  shm_graph: "violet",
+  energy_graph: "amber",
+  strobe_shm: "fuchsia",
+  wall: "slate",
+  speaker: "orange",
+  tuning_fork: "amber",
+  wavefronts: "sky",
+  mach_cone: "purple",
+  beats_graph: "pink",
+  mass_box: "amber",
+  pendulum: "indigo",
+  torsion_pendulum: "violet",
+  vane_liquid: "cyan",
+  phasor: "fuchsia",
+  damped_wave: "rose",
+  dipole: "fuchsia",
+  charged_plate_pos: "rose",
+  charged_plate_neg: "sky",
+  gaussian_sphere: "stone",
+  gaussian_cylinder: "slate",
+  lens_convex: "amber",
+  lens_concave: "orange",
+  mirror_plane: "sky",
+  mirror_concave: "cyan",
+  mirror_convex: "teal",
+  prism: "violet",
+  glass_slab: "blue",
+  photon: "yellow",
+  slit_double: "pink",
+  slit_single: "rose",
+  energy_level: "emerald",
+  nucleus: "orange",
+  b_field_line: "blue",
+  b_field_curve: "indigo",
+  bezier: "violet",
+  pole_piece: "amber",
+  b_region_in: "sky",
+  b_region_out: "cyan",
+  current_wire: "orange",
+  bar_magnet: "red",
+  coil: "purple",
+  piston_cylinder: "sky",
+  heat_engine: "orange",
+  conduction_rod: "amber",
+  pv_axes: "indigo",
+  thermo_process: "violet",
+  carnot_cycle: "fuchsia",
+  maxwell_boltzmann: "emerald",
+  diatomic_gas: "lime",
+  random_walk: "stone"
+};
+var circuitIds = /* @__PURE__ */ new Set([
+  "wire",
+  "resistor",
+  "capacitor",
+  "inductor",
+  "diode",
+  "battery",
+  "meter_v",
+  "meter_a",
+  "meter",
+  "ground",
+  "ac_source"
+]);
+function resolveToneKey(toolId) {
+  const c = curated[toolId];
+  if (c) return c;
+  if (toolId.endsWith("_bond")) {
+    return bondCycle[hashId(toolId) % bondCycle.length];
+  }
+  if (toolId.endsWith("_arrow")) {
+    return arrowCycle[hashId(toolId) % arrowCycle.length];
+  }
+  const low = toolId.toLowerCase();
+  if (low.includes("charge") && (low.includes("pos") || low.includes("plus") || low.includes("_p") || low.endsWith("pos"))) {
+    return "rose";
+  }
+  if (low.includes("charge") && (low.includes("neg") || low.includes("minus"))) {
+    return "sky";
+  }
+  if (toolId.startsWith("meter_")) return "violet";
+  if (circuitIds.has(toolId)) {
+    const circuitCycle = ["slate", "amber", "blue", "violet", "green"];
+    return circuitCycle[hashId(toolId) % circuitCycle.length];
+  }
+  if (low.includes("lens") || low.includes("mirror") || low === "ray" || low.includes("photon")) {
+    const opticsCycle = ["amber", "sky", "cyan", "violet", "yellow"];
+    return opticsCycle[hashId(toolId) % opticsCycle.length];
+  }
+  return fallbackCycle[hashId(toolId) % fallbackCycle.length];
+}
+function getToolbarToolClasses(toolId, selected) {
+  const key = resolveToneKey(toolId);
+  return selected ? tones[key].active : tones[key].idle;
+}
+
 // src/editor/Toolbar.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Toolbar = ({ categories, tool, onSelect }) => {
-  const isChemistryCategory = (name) => ["chemistry", "arrows", "rings", "symbols"].includes(name.toLowerCase());
   return /* @__PURE__ */ jsx2("aside", { className: "w-[108px] border-r border-slate-200 bg-gradient-to-b from-slate-50 to-white flex flex-col items-center py-3 gap-4 overflow-y-auto shrink-0", children: categories.map((category) => /* @__PURE__ */ jsxs2("section", { className: "flex flex-col items-center w-full px-2", children: [
     /* @__PURE__ */ jsx2("div", { className: "text-[10px] font-semibold uppercase tracking-[0.20em] text-slate-400 mb-2 w-full text-center border-b border-slate-200 pb-1.5", children: category.name }),
     /* @__PURE__ */ jsx2("div", { className: "flex flex-col gap-1.5 w-full items-center", children: category.tools.map((t) => {
-      const chemistryTone = isChemistryCategory(category.name);
-      const activeClass = chemistryTone ? "bg-teal-50 text-teal-700 border-teal-200 shadow-sm ring-1 ring-teal-100" : "bg-blue-50 text-blue-700 border-blue-200 shadow-sm ring-1 ring-blue-100";
+      const toneClasses = getToolbarToolClasses(t.id, tool === t.id);
       return /* @__PURE__ */ jsxs2(
         "button",
         {
           type: "button",
           onClick: () => onSelect(t.id),
           title: t.name,
-          className: `p-2 rounded-xl border flex flex-col items-center gap-1 transition-all w-full ${tool === t.id ? activeClass : "text-slate-600 border-transparent hover:bg-slate-100 hover:border-slate-200"}`,
+          className: `p-2 rounded-xl border flex flex-col items-center gap-1 transition-all w-full ${toneClasses}`,
           children: [
             /* @__PURE__ */ jsx2("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", children: Icons[t.id] ?? Icons.line }),
             /* @__PURE__ */ jsx2("span", { className: "text-[11px] font-medium tracking-tight leading-tight text-center", children: t.name })
@@ -1034,6 +1422,7 @@ var Toolbar = ({ categories, tool, onSelect }) => {
 // src/editor/PropertiesPanel.tsx
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var needsCurveHeight = (t) => ["gaussian_cylinder", "lens_convex", "lens_concave", "mirror_concave", "mirror_convex", "b_field_curve"].includes(t);
+var opticsCurveHeightAuto = (t) => ["lens_convex", "lens_concave", "mirror_concave", "mirror_convex"].includes(t);
 var needsFontSize = (t) => ["text", "point", "charge_pos", "charge_neg", "point_mass", "com_indicator", "diatomic_gas", "mass_box"].includes(t);
 var needsRotationSize = (t) => ["point_mass", "com_indicator", "pivot"].includes(t);
 var needsWaveOscSize = (t) => ["pendulum", "mass_box"].includes(t);
@@ -1118,13 +1507,32 @@ var PropertiesPanel = ({ element, onChange, onDelete, onClose }) => {
           ] }),
           needsCurveHeight(String(element.type)) && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
             /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: element.type === "gaussian_cylinder" ? "Cylinder half-height (curveHeight)" : "Curve height" }),
-            /* @__PURE__ */ jsx3(
+            opticsCurveHeightAuto(String(element.type)) ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  placeholder: "Auto",
+                  value: element.curveHeight === void 0 || element.curveHeight === null ? "" : Number(element.curveHeight),
+                  onChange: (e) => {
+                    const raw = e.target.value;
+                    if (raw === "") onChange("curveHeight", void 0);
+                    else {
+                      const n = Number(raw);
+                      onChange("curveHeight", Number.isFinite(n) ? n : void 0);
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3("p", { className: "text-[11px] text-slate-500 leading-snug", children: "Empty = auto (scales with chord length: lenses ~15% / 4% sagitta, mirrors ~20%)." })
+            ] }) : /* @__PURE__ */ jsx3(
               "input",
               {
                 type: "number",
                 className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
                 value: Number(
-                  element.curveHeight ?? (element.type === "b_field_curve" ? 50 : element.type === "gaussian_cylinder" || element.type === "mirror_concave" || element.type === "mirror_convex" ? 40 : 20)
+                  element.curveHeight ?? (element.type === "b_field_curve" ? 50 : element.type === "gaussian_cylinder" ? 40 : 20)
                 ),
                 onChange: (e) => onChange("curveHeight", Number(e.target.value))
               }
@@ -1620,8 +2028,8 @@ var JsonModal = ({ open, jsonText, setJsonText, onClose, onLoad }) => {
 };
 
 // src/editor/presets/mechanics.ts
-var mechanics = {
-  name: "Mechanics",
+var classicIncline = {
+  name: "Classic incline FBD",
   elements: [
     { id: 1, type: "wedge", x1: 100, y1: 400, x2: 500, y2: 100, label: "M", value: "", color: "#0f172a", strokeWidth: 2 },
     { id: 2, type: "block", x1: 220, y1: 260, x2: 300, y2: 300, label: "m", value: "", color: "#0f172a", strokeWidth: 2, rotation: -37 },
@@ -1633,7 +2041,60 @@ var mechanics = {
     { id: 8, type: "dashed", x1: 260, y1: 280, x2: 340, y2: 220, label: "", value: "", color: "#0f172a", strokeWidth: 2 },
     { id: 9, type: "dimension", x1: 100, y1: 440, x2: 500, y2: 440, label: "L", value: "", color: "#0f172a", strokeWidth: 2 },
     { id: 10, type: "axes", x1: 60, y1: 100, x2: 60, y2: 100, label: "", value: "", color: "#0f172a", strokeWidth: 2 }
-  ],
+  ]
+};
+var rigidBodiesShowcase = {
+  name: "Rigid bodies & fluids showcase",
+  elements: [
+    { id: 1, type: "text", x1: 200, y1: 40, x2: 200, y2: 40, label: "3D rigid bodies (moment of inertia)", color: "#64748b", fontSize: 18 },
+    { id: 2, type: "cylinder", x1: 60, y1: 140, x2: 220, y2: 180, color: "#38bdf8", strokeWidth: 2, fillOpacity: 0.4, curveHeight: 30, label: "M, R" },
+    { id: 3, type: "line", x1: 20, y1: 160, x2: 280, y2: 160, color: "#94a3b8", strokeWidth: 2, lineStyle: "dashed" },
+    { id: 4, type: "arc_arrow", x1: 260, y1: 160, x2: 300, y2: 160, color: "#0f172a", strokeWidth: 2, label: "\u03C9" },
+    { id: 5, type: "text", x1: 140, y1: 240, x2: 140, y2: 240, label: "I = MR\xB2/2", color: "#0f172a", fontSize: 16 },
+    { id: 6, type: "slab", x1: 340, y1: 120, x2: 500, y2: 180, color: "#38bdf8", strokeWidth: 2, fillOpacity: 0.4, curveHeight: 30, label: "M" },
+    { id: 7, type: "line", x1: 420, y1: 60, x2: 420, y2: 260, color: "#94a3b8", strokeWidth: 2, lineStyle: "dashed", label: "z" },
+    { id: 8, type: "arc_arrow", x1: 420, y1: 80, x2: 460, y2: 80, color: "#0f172a", strokeWidth: 2 },
+    { id: 9, type: "text", x1: 420, y1: 240, x2: 420, y2: 240, label: "I = M(l\xB2+b\xB2)/12", color: "#0f172a", fontSize: 16 },
+    { id: 10, type: "text", x1: 700, y1: 40, x2: 700, y2: 40, label: "Fluids & gravitation", color: "#64748b", fontSize: 18 },
+    { id: 11, type: "pipe", x1: 600, y1: 80, x2: 800, y2: 140, color: "#3b82f6", strokeWidth: 2, fillOpacity: 0.2, curveHeight: 20 },
+    { id: 12, type: "vector", x1: 620, y1: 110, x2: 680, y2: 110, color: "#0f172a", strokeWidth: 2, label: "v\u2081" },
+    { id: 13, type: "vector", x1: 720, y1: 110, x2: 780, y2: 110, color: "#0f172a", strokeWidth: 2, label: "v\u2082" },
+    { id: 14, type: "shell", x1: 700, y1: 240, x2: 760, y2: 240, color: "#8b5cf6", strokeWidth: 2, fillOpacity: 0.3, curveHeight: 15, label: "M" },
+    { id: 15, type: "point", x1: 700, y1: 240, x2: 700, y2: 240, color: "#0f172a", strokeWidth: 2, label: "O" },
+    { id: 16, type: "point", x1: 820, y1: 240, x2: 820, y2: 240, color: "#0f172a", strokeWidth: 2, label: "m" },
+    { id: 17, type: "vector", x1: 820, y1: 240, x2: 780, y2: 240, color: "#ef4444", strokeWidth: 2, label: "F" },
+    { id: 18, type: "text", x1: 220, y1: 320, x2: 220, y2: 320, label: "Ladders & pulleys", color: "#64748b", fontSize: 18 },
+    { id: 19, type: "table_edge", x1: 40, y1: 420, x2: 240, y2: 560, color: "#475569", strokeWidth: 2 },
+    { id: 20, type: "block", x1: 100, y1: 380, x2: 160, y2: 420, color: "#38bdf8", strokeWidth: 2, fillOpacity: 0.4, label: "m\u2081" },
+    { id: 21, type: "pulley", x1: 240, y1: 420, x2: 260, y2: 420, color: "#0f172a", strokeWidth: 2, fillOpacity: 0.2 },
+    { id: 22, type: "block", x1: 240, y1: 480, x2: 280, y2: 540, color: "#38bdf8", strokeWidth: 2, fillOpacity: 0.4, label: "m\u2082" },
+    { id: 23, type: "line", x1: 160, y1: 400, x2: 240, y2: 400, color: "#0f172a", strokeWidth: 2 },
+    { id: 24, type: "line", x1: 260, y1: 420, x2: 260, y2: 480, color: "#0f172a", strokeWidth: 2 },
+    { id: 25, type: "table_edge", x1: 400, y1: 360, x2: 560, y2: 560, color: "#475569", strokeWidth: 2 },
+    { id: 26, type: "ladder", x1: 460, y1: 560, x2: 560, y2: 420, color: "#f59e0b", strokeWidth: 2, curveHeight: 12 },
+    { id: 27, type: "vector", x1: 460, y1: 560, x2: 460, y2: 500, color: "#10b981", strokeWidth: 2, label: "N\u2081" },
+    { id: 28, type: "vector", x1: 560, y1: 420, x2: 500, y2: 420, color: "#10b981", strokeWidth: 2, label: "N\u2082" },
+    { id: 29, type: "vector", x1: 510, y1: 490, x2: 510, y2: 540, color: "#ef4444", strokeWidth: 2, label: "Mg" }
+  ]
+};
+var verticalSpringMass = {
+  name: "Vertical spring\u2013mass",
+  elements: [
+    { id: 1, type: "text", x1: 380, y1: 40, x2: 380, y2: 40, label: "Equilibrium along a vertical spring", color: "#64748b", fontSize: 18 },
+    { id: 2, type: "line", x1: 260, y1: 100, x2: 500, y2: 100, color: "#475569", strokeWidth: 3, label: "Ceiling" },
+    { id: 3, type: "spring", x1: 380, y1: 100, x2: 380, y2: 220, color: "#2563eb", strokeWidth: 2, coils: 8 },
+    { id: 4, type: "block", x1: 340, y1: 220, x2: 420, y2: 280, color: "#38bdf8", strokeWidth: 2, fillOpacity: 0.35, label: "m" },
+    { id: 5, type: "vector", x1: 380, y1: 280, x2: 380, y2: 380, color: "#ef4444", strokeWidth: 2.5, label: "mg" },
+    { id: 6, type: "vector", x1: 380, y1: 250, x2: 380, y2: 150, color: "#10b981", strokeWidth: 2.5, label: "F_s" },
+    { id: 7, type: "dashed", x1: 380, y1: 280, x2: 460, y2: 280, color: "#94a3b8", strokeWidth: 1.5, label: "x = 0" },
+    { id: 8, type: "text", x1: 480, y1: 260, x2: 480, y2: 260, label: "mg = kx\u2080", color: "#0f172a", fontSize: 16 }
+  ]
+};
+var mechanicsExamples = [classicIncline, rigidBodiesShowcase, verticalSpringMass];
+var mechanics = {
+  name: "Mechanics",
+  elements: mechanicsExamples[0].elements,
+  examples: mechanicsExamples,
   toolCategories: [
     {
       name: "Sketch and forces",
@@ -1673,24 +2134,59 @@ var mechanics = {
 };
 
 // src/editor/presets/circuit.ts
+var wheatstoneBridge = {
+  name: "Wheatstone bridge",
+  elements: [
+    { id: 1, type: "resistor", x1: 200, y1: 300, x2: 400, y2: 200, label: "R1", value: "60\u03A9", color: "#b45309", strokeWidth: 2.5 },
+    { id: 2, type: "resistor", x1: 200, y1: 300, x2: 400, y2: 400, label: "R3", value: "300\u03A9", color: "#b45309", strokeWidth: 2.5 },
+    { id: 3, type: "resistor", x1: 400, y1: 200, x2: 600, y2: 300, label: "R2", value: "100\u03A9", color: "#b45309", strokeWidth: 2.5 },
+    { id: 4, type: "resistor", x1: 400, y1: 400, x2: 600, y2: 300, label: "R4", value: "500\u03A9", color: "#b45309", strokeWidth: 2.5 },
+    { id: 5, type: "battery", x1: 400, y1: 400, x2: 400, y2: 200, label: "50V", value: "", color: "#1d4ed8", strokeWidth: 2.5 },
+    { id: 6, type: "wire", x1: 200, y1: 300, x2: 200, y2: 100, label: "", value: "", color: "#334155", strokeWidth: 3 },
+    { id: 7, type: "wire", x1: 200, y1: 100, x2: 340, y2: 100, label: "", value: "", color: "#334155", strokeWidth: 3 },
+    { id: 8, type: "meter_v", x1: 340, y1: 100, x2: 460, y2: 100, label: "", value: "", color: "#0369a1", strokeWidth: 2.5 },
+    { id: 9, type: "wire", x1: 460, y1: 100, x2: 600, y2: 100, label: "", value: "", color: "#334155", strokeWidth: 3 },
+    { id: 10, type: "wire", x1: 600, y1: 100, x2: 600, y2: 300, label: "", value: "", color: "#334155", strokeWidth: 3 },
+    { id: 11, type: "text", x1: 180, y1: 300, x2: 180, y2: 300, label: "S", value: "", fontFamily: "sans-serif", fontWeight: "bold", fontSize: 18, color: "#0f172a" },
+    { id: 12, type: "text", x1: 400, y1: 180, x2: 400, y2: 180, label: "P", value: "", fontFamily: "sans-serif", fontWeight: "bold", fontSize: 18, color: "#0f172a" },
+    { id: 13, type: "text", x1: 400, y1: 420, x2: 400, y2: 420, label: "Q", value: "", fontFamily: "sans-serif", fontWeight: "bold", fontSize: 18, color: "#0f172a" },
+    { id: 14, type: "text", x1: 620, y1: 300, x2: 620, y2: 300, label: "T", value: "", fontFamily: "sans-serif", fontWeight: "bold", fontSize: 18, color: "#0f172a" }
+  ]
+};
+var seriesRC = {
+  name: "Series RC (charging)",
+  elements: [
+    { id: 1, type: "text", x1: 320, y1: 40, x2: 320, y2: 40, label: "Single-loop RC after switch closes", color: "#475569", fontSize: 16 },
+    { id: 2, type: "battery", x1: 120, y1: 360, x2: 120, y2: 220, label: "\u03B5", value: "12 V", color: "#1d4ed8", strokeWidth: 2.5 },
+    { id: 3, type: "wire", x1: 120, y1: 220, x2: 220, y2: 220, color: "#334155", strokeWidth: 3 },
+    { id: 4, type: "resistor", x1: 220, y1: 220, x2: 380, y2: 220, label: "R", value: "2.2 k\u03A9", color: "#b45309", strokeWidth: 2.5 },
+    { id: 5, type: "wire", x1: 380, y1: 220, x2: 480, y2: 220, color: "#334155", strokeWidth: 3 },
+    { id: 6, type: "capacitor", x1: 480, y1: 220, x2: 620, y2: 220, label: "C", value: "47 \u03BCF", color: "#0f172a", strokeWidth: 2.5 },
+    { id: 7, type: "wire", x1: 620, y1: 220, x2: 620, y2: 360, color: "#334155", strokeWidth: 3 },
+    { id: 8, type: "wire", x1: 620, y1: 360, x2: 120, y2: 360, color: "#334155", strokeWidth: 3 },
+    { id: 9, type: "text", x1: 360, y1: 120, x2: 360, y2: 120, label: "\u03C4 = RC", color: "#0f172a", fontSize: 18 }
+  ]
+};
+var parallelResistors = {
+  name: "Parallel resistors",
+  elements: [
+    { id: 1, type: "text", x1: 300, y1: 40, x2: 300, y2: 40, label: "Same voltage across each branch", color: "#475569", fontSize: 16 },
+    { id: 2, type: "battery", x1: 120, y1: 380, x2: 120, y2: 120, label: "V", value: "9 V", color: "#1d4ed8", strokeWidth: 2.5 },
+    { id: 3, type: "wire", x1: 120, y1: 120, x2: 520, y2: 120, color: "#334155", strokeWidth: 3 },
+    { id: 4, type: "resistor", x1: 260, y1: 120, x2: 260, y2: 300, label: "R\u2081", value: "300 \u03A9", color: "#b45309", strokeWidth: 2.5 },
+    { id: 5, type: "resistor", x1: 400, y1: 120, x2: 400, y2: 300, label: "R\u2082", value: "600 \u03A9", color: "#b45309", strokeWidth: 2.5 },
+    { id: 6, type: "wire", x1: 260, y1: 300, x2: 400, y2: 300, color: "#334155", strokeWidth: 3 },
+    { id: 7, type: "wire", x1: 260, y1: 300, x2: 220, y2: 300, color: "#334155", strokeWidth: 3 },
+    { id: 8, type: "meter_a", x1: 220, y1: 300, x2: 120, y2: 300, label: "I", value: "", color: "#b45309", strokeWidth: 2.5 },
+    { id: 9, type: "wire", x1: 120, y1: 300, x2: 120, y2: 380, color: "#334155", strokeWidth: 3 },
+    { id: 10, type: "text", x1: 280, y1: 340, x2: 280, y2: 340, label: "1/R_eq = 1/R\u2081 + 1/R\u2082", color: "#0f172a", fontSize: 15 }
+  ]
+};
+var circuitExamples = [wheatstoneBridge, seriesRC, parallelResistors];
 var circuit = {
   name: "Circuit",
-  elements: [
-    { id: 1, type: "resistor", x1: 200, y1: 300, x2: 400, y2: 200, label: "R1", value: "60\u03A9" },
-    { id: 2, type: "resistor", x1: 200, y1: 300, x2: 400, y2: 400, label: "R3", value: "300\u03A9" },
-    { id: 3, type: "resistor", x1: 400, y1: 200, x2: 600, y2: 300, label: "R2", value: "100\u03A9" },
-    { id: 4, type: "resistor", x1: 400, y1: 400, x2: 600, y2: 300, label: "R4", value: "500\u03A9" },
-    { id: 5, type: "battery", x1: 400, y1: 400, x2: 400, y2: 200, label: "50V", value: "" },
-    { id: 6, type: "wire", x1: 200, y1: 300, x2: 200, y2: 100, label: "", value: "" },
-    { id: 7, type: "wire", x1: 200, y1: 100, x2: 340, y2: 100, label: "", value: "" },
-    { id: 8, type: "meter_v", x1: 340, y1: 100, x2: 460, y2: 100, label: "", value: "" },
-    { id: 9, type: "wire", x1: 460, y1: 100, x2: 600, y2: 100, label: "", value: "" },
-    { id: 10, type: "wire", x1: 600, y1: 100, x2: 600, y2: 300, label: "", value: "" },
-    { id: 11, type: "text", x1: 180, y1: 300, x2: 180, y2: 300, label: "S", value: "", fontFamily: "sans-serif", fontWeight: "bold", fontSize: 18 },
-    { id: 12, type: "text", x1: 400, y1: 180, x2: 400, y2: 180, label: "P", value: "", fontFamily: "sans-serif", fontWeight: "bold", fontSize: 18 },
-    { id: 13, type: "text", x1: 400, y1: 420, x2: 400, y2: 420, label: "Q", value: "", fontFamily: "sans-serif", fontWeight: "bold", fontSize: 18 },
-    { id: 14, type: "text", x1: 620, y1: 300, x2: 620, y2: 300, label: "T", value: "", fontFamily: "sans-serif", fontWeight: "bold", fontSize: 18 }
-  ],
+  elements: circuitExamples[0].elements,
+  examples: circuitExamples,
   toolCategories: [
     {
       name: "Circuit",
@@ -1712,91 +2208,130 @@ var circuit = {
 };
 
 // src/editor/presets/thermo.ts
-var thermo = {
-  name: "Thermodynamics",
+var pistonAndGas = {
+  name: "Piston, heat & first law",
   elements: [
-    { id: 101, type: "text", x1: 50, y1: 40, x2: 50, y2: 40, label: "1. First Law (Piston/Cylinder)", fontSize: 20, color: "#1e293b" },
+    { id: 1, type: "text", x1: 120, y1: 40, x2: 120, y2: 40, label: "Gas in a cylinder (work, heat, \u0394U)", color: "#475569", fontSize: 18 },
     {
-      id: 1,
+      id: 2,
       type: "piston_cylinder",
-      x1: 80,
-      y1: 100,
-      x2: 240,
-      y2: 260,
-      compression: 0.6,
+      x1: 120,
+      y1: 120,
+      x2: 320,
+      y2: 320,
+      compression: 0.55,
       showHeat: true,
       color: "#0ea5e9",
       strokeWidth: 2,
-      label: "Gas Expansion"
+      label: "Expansion stroke"
     },
-    { id: 102, type: "text", x1: 380, y1: 40, x2: 380, y2: 40, label: "2. Heat Engine & 2nd Law", fontSize: 20, color: "#1e293b" },
+    {
+      id: 3,
+      type: "thermo_process",
+      x1: 400,
+      y1: 200,
+      x2: 560,
+      y2: 120,
+      processType: "isobaric",
+      color: "#f59e0b",
+      strokeWidth: 2,
+      label: "Isobaric leg"
+    },
+    { id: 4, type: "text", x1: 400, y1: 280, x2: 400, y2: 280, label: "Q = \u0394U + W", color: "#0f172a", fontSize: 18 }
+  ]
+};
+var engineAndPV = {
+  name: "Heat engine & P\u2013V cycle",
+  elements: [
+    { id: 1, type: "text", x1: 80, y1: 40, x2: 80, y2: 40, label: "Carnot engine between two reservoirs", color: "#475569", fontSize: 18 },
     {
       id: 2,
       type: "heat_engine",
-      x1: 440,
-      y1: 80,
-      x2: 540,
-      y2: 260,
+      x1: 120,
+      y1: 100,
+      x2: 260,
+      y2: 300,
       engineType: "engine",
-      efficiency: 0.4,
+      efficiency: 0.35,
       color: "#10b981",
       strokeWidth: 2,
-      label: "Carnot Engine"
+      label: "\u03B7 < 1"
     },
-    { id: 103, type: "text", x1: 700, y1: 40, x2: 700, y2: 40, label: "3. P-V Diagrams", fontSize: 20, color: "#1e293b" },
     {
       id: 3,
       type: "pv_axes",
-      x1: 720,
-      y1: 260,
-      x2: 920,
-      y2: 80,
+      x1: 360,
+      y1: 300,
+      x2: 620,
+      y2: 100,
       color: "#1e293b",
       strokeWidth: 2,
-      label: "P vs V",
+      label: "State space",
       xLabel: "V",
       yLabel: "P"
     },
-    { id: 4, type: "carnot_cycle", x1: 760, y1: 120, x2: 880, y2: 220, color: "#ec4899", strokeWidth: 2 },
-    { id: 104, type: "text", x1: 50, y1: 340, x2: 50, y2: 340, label: "4. Kinetic Theory & Speeds", fontSize: 20, color: "#1e293b" },
+    { id: 4, type: "carnot_cycle", x1: 400, y1: 140, x2: 560, y2: 240, color: "#ec4899", strokeWidth: 2 },
+    { id: 5, type: "text", x1: 640, y1: 180, x2: 640, y2: 180, label: "Isotherms + adiabats", color: "#64748b", fontSize: 15 }
+  ]
+};
+var kineticTheory = {
+  name: "Kinetic theory & conduction",
+  elements: [
+    { id: 1, type: "text", x1: 80, y1: 40, x2: 80, y2: 40, label: "Speed distribution & thermal transport", color: "#475569", fontSize: 18 },
     {
-      id: 5,
+      id: 2,
       type: "maxwell_boltzmann",
       x1: 80,
-      y1: 520,
-      x2: 320,
-      y2: 380,
+      y1: 320,
+      x2: 340,
+      y2: 160,
       t1: 300,
       t2: 600,
       color: "#8b5cf6",
       strokeWidth: 2,
-      label: "f(v) vs v"
+      label: "f(v) at T\u2081, T\u2082"
     },
     {
-      id: 6,
+      id: 3,
       type: "diatomic_gas",
-      x1: 400,
-      y1: 440,
-      x2: 500,
-      y2: 440,
+      x1: 420,
+      y1: 220,
+      x2: 520,
+      y2: 220,
       color: "#f59e0b",
       strokeWidth: 2,
-      label: "Diatomic (5 DOF)",
+      label: "5 DOF (trans + rot)",
       showRotations: true
     },
-    { id: 105, type: "text", x1: 700, y1: 340, x2: 700, y2: 340, label: "5. Thermal Conduction", fontSize: 20, color: "#1e293b" },
     {
-      id: 7,
+      id: 4,
       type: "conduction_rod",
-      x1: 700,
-      y1: 420,
-      x2: 900,
-      y2: 460,
+      x1: 420,
+      y1: 320,
+      x2: 720,
+      y2: 360,
       color: "#3b82f6",
       strokeWidth: 2,
-      label: "L, k, A"
+      label: "Q\u0307 = kA\u0394T/L"
+    },
+    {
+      id: 5,
+      type: "random_walk",
+      x1: 600,
+      y1: 120,
+      x2: 720,
+      y2: 80,
+      color: "#64748b",
+      strokeWidth: 2,
+      label: "Diffusion"
     }
-  ],
+  ]
+};
+var thermoExamples = [pistonAndGas, engineAndPV, kineticTheory];
+var thermo = {
+  name: "Thermodynamics",
+  elements: thermoExamples[0].elements,
+  examples: thermoExamples,
   toolCategories: [
     {
       name: "Basics",
@@ -1834,81 +2369,55 @@ var thermo = {
   ]
 };
 
-// src/editor/presets/optical.ts
-var optical = {
-  name: "Optical",
+// src/editor/presets/magnetism.ts
+var electromagnetGap = {
+  name: "Electromagnet & uniform gap",
   elements: [
-    { id: 1, type: "line", x1: 50, y1: 300, x2: 750, y2: 300, lineStyle: "dashed", color: "#94a3b8", strokeWidth: 2 },
-    { id: 2, type: "lens_convex", x1: 400, y1: 150, x2: 400, y2: 450, color: "#38bdf8", strokeWidth: 2 },
-    { id: 3, type: "point", x1: 250, y1: 300, x2: 250, y2: 300, label: "2F\u2081", color: "#64748b" },
-    { id: 4, type: "point", x1: 325, y1: 300, x2: 325, y2: 300, label: "F\u2081", color: "#64748b" },
-    { id: 5, type: "point", x1: 475, y1: 300, x2: 475, y2: 300, label: "F\u2082", color: "#64748b" },
-    { id: 6, type: "point", x1: 550, y1: 300, x2: 550, y2: 300, label: "2F\u2082", color: "#64748b" },
-    { id: 7, type: "vector", x1: 250, y1: 300, x2: 250, y2: 200, label: "O", color: "#10b981", strokeWidth: 3 },
-    { id: 8, type: "ray", x1: 250, y1: 200, x2: 400, y2: 200, color: "#ef4444", strokeWidth: 2 },
-    { id: 9, type: "ray", x1: 400, y1: 200, x2: 625, y2: 500, color: "#ef4444", strokeWidth: 2 },
-    { id: 10, type: "ray", x1: 250, y1: 200, x2: 625, y2: 450, color: "#ef4444", strokeWidth: 2 },
-    { id: 11, type: "vector", x1: 550, y1: 300, x2: 550, y2: 400, label: "I", color: "#f59e0b", strokeWidth: 3, lineStyle: "dashed" },
-    { id: 12, type: "nucleus", x1: 120, y1: 500, x2: 120, y2: 500, label: "Atom", color: "#3b82f6", strokeWidth: 2 },
-    { id: 13, type: "photon", x1: 160, y1: 500, x2: 280, y2: 460, label: "\u03B3", color: "#8b5cf6", strokeWidth: 2 },
-    { id: 14, type: "slit_double", x1: 600, y1: 460, x2: 600, y2: 580, color: "#0f172a", strokeWidth: 4 },
-    { id: 15, type: "photon", x1: 510, y1: 520, x2: 590, y2: 520, label: "\u03BB", color: "#eab308", strokeWidth: 2 }
-  ],
-  toolCategories: [
-    {
-      name: "Basics",
-      tools: [
-        { id: "select", name: "Select/Move" },
-        { id: "point", name: "Point/Node" },
-        { id: "line", name: "Solid Line" },
-        { id: "vector", name: "Vector/Object" },
-        { id: "text", name: "Text Label" }
-      ]
-    },
-    {
-      name: "Optics",
-      tools: [
-        { id: "ray", name: "Light Ray" },
-        { id: "lens_convex", name: "Convex Lens" },
-        { id: "lens_concave", name: "Concave Lens" },
-        { id: "mirror_plane", name: "Plane Mirror" },
-        { id: "mirror_concave", name: "Concave Mirror" },
-        { id: "mirror_convex", name: "Convex Mirror" },
-        { id: "prism", name: "Glass Prism" },
-        { id: "glass_slab", name: "Glass Slab" }
-      ]
-    },
-    {
-      name: "Modern Physics",
-      tools: [
-        { id: "photon", name: "Photon (Wavy)" },
-        { id: "slit_double", name: "Double Slit" },
-        { id: "slit_single", name: "Single Slit" },
-        { id: "energy_level", name: "Energy Level" },
-        { id: "nucleus", name: "Atom/Nucleus" }
-      ]
-    }
+    { id: 1, type: "text", x1: 280, y1: 36, x2: 280, y2: 36, label: "Iron pole pieces + straight B in the gap", color: "#475569", fontSize: 16 },
+    { id: 2, type: "pole_piece", x1: 100, y1: 80, x2: 200, y2: 300, label: "N", color: "#0f172a", strokeWidth: 2 },
+    { id: 3, type: "pole_piece", x1: 500, y1: 80, x2: 600, y2: 300, label: "S", color: "#0f172a", strokeWidth: 2 },
+    { id: 4, type: "b_field_line", x1: 200, y1: 120, x2: 500, y2: 120, label: "", color: "#10b981", strokeWidth: 2 },
+    { id: 5, type: "b_field_line", x1: 200, y1: 190, x2: 500, y2: 190, label: "B", color: "#10b981", strokeWidth: 2, fontSize: 18 },
+    { id: 6, type: "b_field_line", x1: 200, y1: 260, x2: 500, y2: 260, label: "", color: "#10b981", strokeWidth: 2 },
+    { id: 7, type: "b_field_curve", x1: 280, y1: 80, x2: 420, y2: 80, curveHeight: 50, label: "", color: "#10b981", strokeWidth: 2 },
+    { id: 8, type: "b_field_curve", x1: 250, y1: 80, x2: 450, y2: 80, curveHeight: 110, label: "", color: "#10b981", strokeWidth: 2 },
+    { id: 9, type: "axes_3d", x1: 200, y1: 540, x2: 300, y2: 540, label: "", color: "#64748b", strokeWidth: 2, fontSize: 16 },
+    { id: 10, type: "line", x1: 200, y1: 540, x2: 200, y2: 400, label: "", color: "#0ea5e9", strokeWidth: 3 },
+    { id: 11, type: "line", x1: 200, y1: 400, x2: 320, y2: 400, label: "i", color: "#0ea5e9", strokeWidth: 3, fontSize: 16 },
+    { id: 12, type: "line", x1: 320, y1: 400, x2: 320, y2: 540, label: "", color: "#0ea5e9", strokeWidth: 3 },
+    { id: 13, type: "line", x1: 320, y1: 540, x2: 200, y2: 540, label: "", color: "#0ea5e9", strokeWidth: 3 },
+    { id: 14, type: "vector", x1: 200, y1: 540, x2: 320, y2: 620, label: "B", color: "#10b981", strokeWidth: 2.5, fontSize: 18 }
   ]
 };
-
-// src/editor/presets/magnetism.ts
+var barMagnetField = {
+  name: "Bar magnet & field lines",
+  elements: [
+    { id: 1, type: "text", x1: 260, y1: 36, x2: 260, y2: 36, label: "Dipole field outside the magnet", color: "#475569", fontSize: 16 },
+    { id: 2, type: "bar_magnet", x1: 200, y1: 260, x2: 520, y2: 260, label: "Permanent magnet", color: "#0f172a", strokeWidth: 2 },
+    { id: 3, type: "b_field_curve", x1: 220, y1: 120, x2: 480, y2: 120, curveHeight: 80, color: "#10b981", strokeWidth: 2 },
+    { id: 4, type: "b_field_curve", x1: 200, y1: 400, x2: 500, y2: 400, curveHeight: -90, color: "#10b981", strokeWidth: 2 },
+    { id: 5, type: "b_field_line", x1: 360, y1: 140, x2: 360, y2: 220, color: "#10b981", strokeWidth: 2 },
+    { id: 6, type: "b_field_line", x1: 360, y1: 300, x2: 360, y2: 380, color: "#10b981", strokeWidth: 2 },
+    { id: 7, type: "text", x1: 600, y1: 240, x2: 600, y2: 240, label: "N \u2192 S outside", color: "#0f172a", fontSize: 15 }
+  ]
+};
+var longStraightWire = {
+  name: "Long straight wire (Amp\xE8re)",
+  elements: [
+    { id: 1, type: "text", x1: 240, y1: 36, x2: 240, y2: 36, label: "Current into page \u2297 \u2014 circular B around the wire", color: "#475569", fontSize: 15 },
+    { id: 2, type: "current_wire", x1: 400, y1: 120, x2: 400, y2: 420, label: "I", color: "#dc2626", strokeWidth: 3 },
+    { id: 3, type: "b_field_curve", x1: 520, y1: 200, x2: 280, y2: 200, curveHeight: 120, color: "#10b981", strokeWidth: 2 },
+    { id: 4, type: "b_field_curve", x1: 540, y1: 280, x2: 260, y2: 280, curveHeight: 140, color: "#10b981", strokeWidth: 2 },
+    { id: 5, type: "b_field_curve", x1: 500, y1: 360, x2: 300, y2: 360, curveHeight: 100, color: "#10b981", strokeWidth: 2 },
+    { id: 6, type: "b_region_in", x1: 360, y1: 240, x2: 440, y2: 320, color: "#6366f1", strokeWidth: 1.5 },
+    { id: 7, type: "text", x1: 400, y1: 460, x2: 400, y2: 460, label: "\u222E B\xB7dl = \u03BC\u2080I", color: "#0f172a", fontSize: 17 }
+  ]
+};
+var magnetismExamples = [electromagnetGap, barMagnetField, longStraightWire];
 var magnetism = {
   name: "Magnetism",
-  elements: [
-    { id: 1, type: "pole_piece", x1: 100, y1: 80, x2: 200, y2: 300, label: "N", color: "#0f172a", strokeWidth: 2 },
-    { id: 2, type: "pole_piece", x1: 500, y1: 80, x2: 600, y2: 300, label: "S", color: "#0f172a", strokeWidth: 2 },
-    { id: 3, type: "b_field_line", x1: 200, y1: 120, x2: 500, y2: 120, label: "", color: "#10b981", strokeWidth: 2 },
-    { id: 4, type: "b_field_line", x1: 200, y1: 190, x2: 500, y2: 190, label: "B", color: "#10b981", strokeWidth: 2, fontSize: 18 },
-    { id: 5, type: "b_field_line", x1: 200, y1: 260, x2: 500, y2: 260, label: "", color: "#10b981", strokeWidth: 2 },
-    { id: 6, type: "b_field_curve", x1: 280, y1: 80, x2: 420, y2: 80, curveHeight: 50, label: "", color: "#10b981", strokeWidth: 2 },
-    { id: 7, type: "b_field_curve", x1: 250, y1: 80, x2: 450, y2: 80, curveHeight: 110, label: "", color: "#10b981", strokeWidth: 2 },
-    { id: 8, type: "axes_3d", x1: 200, y1: 540, x2: 300, y2: 540, label: "", color: "#64748b", strokeWidth: 2, fontSize: 16 },
-    { id: 9, type: "line", x1: 200, y1: 540, x2: 200, y2: 400, label: "", color: "#0ea5e9", strokeWidth: 3 },
-    { id: 10, type: "line", x1: 200, y1: 400, x2: 320, y2: 400, label: "i", color: "#0ea5e9", strokeWidth: 3, fontSize: 16 },
-    { id: 11, type: "line", x1: 320, y1: 400, x2: 320, y2: 540, label: "", color: "#0ea5e9", strokeWidth: 3 },
-    { id: 12, type: "line", x1: 320, y1: 540, x2: 200, y2: 540, label: "", color: "#0ea5e9", strokeWidth: 3 },
-    { id: 13, type: "vector", x1: 200, y1: 540, x2: 320, y2: 620, label: "B", color: "#10b981", strokeWidth: 2.5, fontSize: 18 }
-  ],
+  elements: magnetismExamples[0].elements,
+  examples: magnetismExamples,
   toolCategories: [
     {
       name: "Basics",
@@ -1958,10 +2467,10 @@ var magnetism = {
   ]
 };
 
-// src/editor/presets/lightTopics.ts
-var LIGHT_TOPICS = [
+// src/editor/presets/light.ts
+var lightExamples = [
   {
-    name: "Ch 34: Lens Combination (JEE Classic)",
+    name: "Lens combination",
     elements: [
       { id: 1, type: "line", x1: 50, y1: 300, x2: 850, y2: 300, lineStyle: "dashed", color: "#94a3b8", strokeWidth: 2 },
       { id: 2, type: "lens_convex", x1: 300, y1: 150, x2: 300, y2: 450, color: "#38bdf8", strokeWidth: 2, label: "f\u2081 = +30cm" },
@@ -1974,11 +2483,11 @@ var LIGHT_TOPICS = [
       { id: 9, type: "ray", x1: 500, y1: 334, x2: 800, y2: 334, color: "#ef4444", strokeWidth: 2 },
       { id: 10, type: "line", x1: 500, y1: 266, x2: 600, y2: 300, lineStyle: "dashed", color: "#ef4444", strokeWidth: 2 },
       { id: 11, type: "line", x1: 500, y1: 334, x2: 600, y2: 300, lineStyle: "dashed", color: "#ef4444", strokeWidth: 2 },
-      { id: 12, type: "point", x1: 600, y1: 300, x2: 600, y2: 300, label: "Virtual Object", color: "#64748b" }
+      { id: 12, type: "point", x1: 600, y1: 300, x2: 600, y2: 300, label: "Virtual object", color: "#64748b" }
     ]
   },
   {
-    name: "Ch 34: Concave Mirror (Real Image)",
+    name: "Concave mirror (real image)",
     elements: [
       { id: 1, type: "line", x1: 50, y1: 300, x2: 700, y2: 300, lineStyle: "dashed", color: "#94a3b8", strokeWidth: 2 },
       { id: 2, type: "mirror_concave", x1: 600, y1: 150, x2: 600, y2: 450, curveHeight: 40, color: "#0f172a", strokeWidth: 2 },
@@ -1994,28 +2503,28 @@ var LIGHT_TOPICS = [
     ]
   },
   {
-    name: "Ch 34: Apparent Depth (Refraction)",
+    name: "Apparent depth (refraction)",
     elements: [
       { id: 1, type: "glass_slab", x1: 50, y1: 300, x2: 850, y2: 600, color: "#38bdf8", label: "Water (\u03BC = 4/3)", strokeWidth: 2 },
-      { id: 2, type: "point", x1: 450, y1: 500, x2: 450, y2: 500, label: "Real Object", color: "#0f172a" },
+      { id: 2, type: "point", x1: 450, y1: 500, x2: 450, y2: 500, label: "Real object", color: "#0f172a" },
       { id: 3, type: "ray", x1: 450, y1: 500, x2: 450, y2: 300, color: "#ef4444", strokeWidth: 2 },
       { id: 4, type: "ray", x1: 450, y1: 300, x2: 450, y2: 100, color: "#ef4444", strokeWidth: 2 },
       { id: 5, type: "ray", x1: 450, y1: 500, x2: 550, y2: 300, color: "#ef4444", strokeWidth: 2 },
       { id: 6, type: "ray", x1: 550, y1: 300, x2: 700, y2: 150, color: "#ef4444", strokeWidth: 2 },
       { id: 7, type: "line", x1: 550, y1: 300, x2: 450, y2: 400, lineStyle: "dashed", color: "#ef4444", strokeWidth: 2 },
-      { id: 8, type: "point", x1: 450, y1: 400, x2: 450, y2: 400, label: "Virtual Image", color: "#f59e0b" },
+      { id: 8, type: "point", x1: 450, y1: 400, x2: 450, y2: 400, label: "Virtual image", color: "#f59e0b" },
       { id: 9, type: "line", x1: 550, y1: 200, x2: 550, y2: 400, lineStyle: "dashed", color: "#94a3b8", strokeWidth: 1 }
     ]
   },
   {
-    name: "Ch 35: Young's Double Slit (YDSE)",
+    name: "Double-slit interference",
     elements: [
       { id: 1, type: "slit_double", x1: 200, y1: 200, x2: 200, y2: 400, color: "#0f172a", strokeWidth: 4 },
       { id: 2, type: "line", x1: 700, y1: 100, x2: 700, y2: 500, color: "#0f172a", strokeWidth: 4, label: "Screen" },
       { id: 3, type: "line", x1: 200, y1: 300, x2: 700, y2: 300, lineStyle: "dashed", color: "#94a3b8", strokeWidth: 2 },
       { id: 4, type: "point", x1: 200, y1: 250, x2: 200, y2: 250, label: "S\u2081", color: "#0f172a" },
       { id: 5, type: "point", x1: 200, y1: 350, x2: 200, y2: 350, label: "S\u2082", color: "#0f172a" },
-      { id: 6, type: "point", x1: 700, y1: 150, x2: 700, y2: 150, label: "P (Maxima/Minima)", color: "#0f172a" },
+      { id: 6, type: "point", x1: 700, y1: 150, x2: 700, y2: 150, label: "P (max/min)", color: "#0f172a" },
       { id: 7, type: "photon", x1: 200, y1: 250, x2: 700, y2: 150, color: "#eab308", strokeWidth: 2 },
       { id: 8, type: "photon", x1: 200, y1: 350, x2: 700, y2: 150, color: "#eab308", strokeWidth: 2 },
       { id: 9, type: "line", x1: 200, y1: 250, x2: 240, y2: 340, lineStyle: "dashed", color: "#ef4444", strokeWidth: 2 },
@@ -2026,7 +2535,7 @@ var LIGHT_TOPICS = [
     ]
   },
   {
-    name: "Ch 36: Single Slit Diffraction",
+    name: "Single-slit diffraction",
     elements: [
       { id: 1, type: "slit_single", x1: 300, y1: 200, x2: 300, y2: 400, color: "#0f172a", strokeWidth: 5, label: "Width a" },
       { id: 2, type: "line", x1: 700, y1: 100, x2: 700, y2: 500, color: "#0f172a", strokeWidth: 4 },
@@ -2037,89 +2546,77 @@ var LIGHT_TOPICS = [
       { id: 7, type: "ray", x1: 300, y1: 380, x2: 700, y2: 300, color: "#ef4444", strokeWidth: 2 },
       { id: 8, type: "ray", x1: 300, y1: 220, x2: 700, y2: 150, color: "#3b82f6", strokeWidth: 2 },
       { id: 9, type: "ray", x1: 300, y1: 380, x2: 700, y2: 150, color: "#3b82f6", strokeWidth: 2 },
-      { id: 10, type: "point", x1: 700, y1: 300, x2: 700, y2: 300, label: "Central Max", color: "#ef4444" },
-      { id: 11, type: "point", x1: 700, y1: 150, x2: 700, y2: 150, label: "1st Min (a sin \u03B8 = \u03BB)", color: "#3b82f6" }
+      { id: 10, type: "point", x1: 700, y1: 300, x2: 700, y2: 300, label: "Central max", color: "#ef4444" },
+      { id: 11, type: "point", x1: 700, y1: 150, x2: 700, y2: 150, label: "1st min (a sin \u03B8 = \u03BB)", color: "#3b82f6" }
     ]
   }
 ];
-
-// src/editor/presets/light.ts
 var light = {
-  name: "Light",
-  elements: LIGHT_TOPICS[0].elements,
+  name: "Light & optics",
+  elements: lightExamples[0].elements,
+  examples: lightExamples,
   toolCategories: [
     {
       name: "Basics",
       tools: [
         { id: "select", name: "Select/Move" },
         { id: "point", name: "Point/Node" },
-        { id: "line", name: "Solid Line" },
+        { id: "line", name: "Solid line" },
         { id: "vector", name: "Vector/Object" },
-        { id: "text", name: "Text Label" }
+        { id: "text", name: "Text label" }
       ]
     },
     {
       name: "Optics",
       tools: [
-        { id: "ray", name: "Light Ray" },
-        { id: "lens_convex", name: "Convex Lens" },
-        { id: "lens_concave", name: "Concave Lens" },
-        { id: "mirror_plane", name: "Plane Mirror" },
-        { id: "mirror_concave", name: "Concave Mirror" },
-        { id: "mirror_convex", name: "Convex Mirror" },
-        { id: "prism", name: "Glass Prism" },
-        { id: "glass_slab", name: "Glass Slab" }
+        { id: "ray", name: "Light ray" },
+        { id: "lens_convex", name: "Convex lens" },
+        { id: "lens_concave", name: "Concave lens" },
+        { id: "mirror_plane", name: "Plane mirror" },
+        { id: "mirror_concave", name: "Concave mirror" },
+        { id: "mirror_convex", name: "Convex mirror" },
+        { id: "prism", name: "Glass prism" },
+        { id: "glass_slab", name: "Glass slab" }
       ]
     },
     {
-      name: "Modern Physics",
+      name: "Modern physics",
       tools: [
-        { id: "photon", name: "Photon (Wavy)" },
-        { id: "slit_double", name: "Double Slit" },
-        { id: "slit_single", name: "Single Slit" },
-        { id: "energy_level", name: "Energy Level" },
+        { id: "photon", name: "Photon (wavy)" },
+        { id: "slit_double", name: "Double slit" },
+        { id: "slit_single", name: "Single slit" },
+        { id: "energy_level", name: "Energy level" },
         { id: "nucleus", name: "Atom/Nucleus" }
       ]
     }
   ]
 };
 
-// src/editor/presets/waves.ts
-var waves = {
-  name: "Waves",
-  elements: [
-    { id: 1, type: "line", x1: 100, y1: 300, x2: 800, y2: 300, color: "#64748b", strokeWidth: 2 },
-    { id: 2, type: "slit_double", x1: 200, y1: 200, x2: 200, y2: 400, color: "#0f172a", strokeWidth: 4 },
-    { id: 3, type: "photon", x1: 200, y1: 250, x2: 700, y2: 150, color: "#eab308", strokeWidth: 2 }
-  ],
-  toolCategories: [{ name: "Waves", tools: [{ id: "select", name: "Select" }, { id: "line", name: "Axis" }, { id: "slit_double", name: "Double Slit" }, { id: "photon", name: "Wave Ray" }, { id: "text", name: "Text" }] }]
-};
-
 // src/editor/presets/waveOscillation.ts
-var waveOscillation = {
-  name: "Oscillations & Waves",
+var shmKinematics = {
+  name: "SHM kinematics",
   elements: [
-    { id: 101, type: "text", x1: 50, y1: 40, x2: 50, y2: 40, label: "1. SHM Kinematics & Freeze-Frames", fontSize: 20, color: "#1e293b" },
+    { id: 1, type: "text", x1: 120, y1: 36, x2: 120, y2: 36, label: "Motion along x vs time graphs (x, v, a)", color: "#475569", fontSize: 17 },
     {
-      id: 1,
+      id: 2,
       type: "strobe_shm",
       x1: 120,
-      y1: 80,
+      y1: 100,
       x2: 120,
-      y2: 280,
+      y2: 300,
       amplitude: 60,
       loops: 1,
       color: "#f59e0b",
       strokeWidth: 2,
-      label: "Motion"
+      label: "Mass on spring"
     },
     {
-      id: 2,
+      id: 3,
       type: "shm_graph",
       x1: 260,
-      y1: 180,
+      y1: 200,
       x2: 460,
-      y2: 180,
+      y2: 200,
       amplitude: 60,
       loops: 1,
       graphType: "all",
@@ -2127,14 +2624,20 @@ var waveOscillation = {
       strokeWidth: 2,
       label: "x(t), v(t), a(t)"
     },
-    { id: 102, type: "text", x1: 540, y1: 40, x2: 540, y2: 40, label: "2. Oscillators & Projections", fontSize: 20, color: "#1e293b" },
+    { id: 4, type: "text", x1: 520, y1: 200, x2: 520, y2: 200, label: "\u03C9\xB2 = k/m", color: "#0f172a", fontSize: 16 }
+  ]
+};
+var pendulumAndPhasor = {
+  name: "Pendulum & phasor",
+  elements: [
+    { id: 1, type: "text", x1: 140, y1: 36, x2: 140, y2: 36, label: "Small oscillations + rotating phasor picture", color: "#475569", fontSize: 17 },
     {
-      id: 3,
+      id: 2,
       type: "pendulum",
-      x1: 600,
-      y1: 80,
-      x2: 660,
-      y2: 220,
+      x1: 200,
+      y1: 100,
+      x2: 260,
+      y2: 240,
       label: "m",
       color: "#0ea5e9",
       strokeWidth: 2,
@@ -2142,56 +2645,105 @@ var waveOscillation = {
       showForces: true
     },
     {
-      id: 4,
+      id: 3,
       type: "phasor",
-      x1: 800,
-      y1: 150,
-      x2: 860,
+      x1: 420,
+      y1: 170,
+      x2: 500,
       y2: 90,
       label: "\u03C9t",
       color: "#8b5cf6",
       strokeWidth: 2,
       showProjection: true
     },
-    { id: 103, type: "text", x1: 50, y1: 340, x2: 50, y2: 340, label: "3. Energy & Damped Systems", fontSize: 20, color: "#1e293b" },
+    {
+      id: 4,
+      type: "spring",
+      x1: 620,
+      y1: 120,
+      x2: 620,
+      y2: 240,
+      color: "#3b82f6",
+      strokeWidth: 2,
+      coils: 7
+    },
     {
       id: 5,
+      type: "mass_box",
+      x1: 600,
+      y1: 240,
+      x2: 640,
+      y2: 280,
+      color: "#ef4444",
+      strokeWidth: 2,
+      label: "m"
+    },
+    { id: 6, type: "text", x1: 620, y1: 320, x2: 620, y2: 320, label: "Same \u03C9 for linear & torsional SHM", color: "#64748b", fontSize: 14 }
+  ]
+};
+var dampingAndEnergy = {
+  name: "Damping & energy",
+  elements: [
+    { id: 1, type: "text", x1: 120, y1: 36, x2: 120, y2: 36, label: "Lossy oscillator: energy swap + torsion mode", color: "#475569", fontSize: 17 },
+    {
+      id: 2,
       type: "energy_graph",
-      x1: 80,
-      y1: 460,
-      x2: 280,
-      y2: 460,
+      x1: 100,
+      y1: 280,
+      x2: 300,
+      y2: 280,
       amplitude: 80,
       domain: "time",
       color: "#1e293b",
       strokeWidth: 2,
-      label: "U(t) & K(t)"
+      label: "U(t), K(t)"
     },
     {
-      id: 6,
+      id: 3,
       type: "vane_liquid",
-      x1: 400,
-      y1: 380,
-      x2: 480,
-      y2: 380,
+      x1: 380,
+      y1: 200,
+      x2: 460,
+      y2: 200,
       color: "#64748b",
       strokeWidth: 2,
-      label: "Damping (b)"
+      label: "Drag \u221D v"
+    },
+    { id: 4, type: "spring", x1: 420, y1: 80, x2: 420, y2: 200, color: "#3b82f6", strokeWidth: 2, coils: 6 },
+    {
+      id: 5,
+      type: "damped_wave",
+      x1: 520,
+      y1: 240,
+      x2: 720,
+      y2: 240,
+      amplitude: 45,
+      damping: 0.02,
+      frequency: 12,
+      color: "#ec4899",
+      strokeWidth: 2,
+      label: "x(t) envelope"
     },
-    { id: 7, type: "spring", x1: 440, y1: 260, x2: 440, y2: 380, color: "#3b82f6", strokeWidth: 2, coils: 6 },
-    { id: 104, type: "text", x1: 440, y1: 240, x2: 440, y2: 240, label: "Rigid Support", fontSize: 14, color: "#64748b" },
     {
-      id: 8,
+      id: 6,
       type: "torsion_pendulum",
-      x1: 640,
-      y1: 320,
-      x2: 640,
-      y2: 480,
+      x1: 320,
+      y1: 380,
+      x2: 320,
+      y2: 520,
       color: "#ec4899",
       strokeWidth: 2,
-      label: "Torsion Pendulum"
+      size: 44,
+      rotation: 22,
+      label: "Disk + fiber"
     }
-  ],
+  ]
+};
+var waveExamples = [shmKinematics, pendulumAndPhasor, dampingAndEnergy];
+var waveOscillation = {
+  name: "Oscillations & Waves",
+  elements: waveExamples[0].elements,
+  examples: waveExamples,
   toolCategories: [
     {
       name: "Basics",
@@ -2241,47 +2793,63 @@ var waveOscillation = {
 };
 
 // src/editor/presets/rotation.ts
-var rotation = {
-  name: "Rotation",
+var collisionCom = {
+  name: "Collision & center of mass",
   elements: [
-    { id: 101, type: "text", x1: 60, y1: 40, x2: 60, y2: 40, label: "1. Center of Mass & 2D Collision", fontSize: 20, color: "#1e293b" },
-    { id: 1, type: "point_mass", x1: 80, y1: 140, x2: 80, y2: 140, size: 25, color: "#ef4444", label: "m\u2081" },
-    { id: 2, type: "vector", x1: 80, y1: 140, x2: 180, y2: 140, color: "#ef4444", label: "u\u2081", strokeWidth: 2 },
-    { id: 3, type: "point_mass", x1: 240, y1: 100, x2: 240, y2: 100, size: 15, color: "#3b82f6", label: "m\u2082" },
-    { id: 4, type: "dashed_path", x1: 180, y1: 140, x2: 320, y2: 80, color: "#ef4444", strokeWidth: 1.5 },
-    { id: 5, type: "dashed_path", x1: 240, y1: 100, x2: 340, y2: 180, color: "#3b82f6", strokeWidth: 1.5 },
-    { id: 6, type: "com_indicator", x1: 160, y1: 120, x2: 160, y2: 120, color: "#10b981", size: 15, label: "COM" },
-    { id: 7, type: "system_boundary", x1: 40, y1: 60, x2: 360, y2: 220, color: "#94a3b8", strokeWidth: 1.5 },
-    { id: 102, type: "text", x1: 560, y1: 40, x2: 560, y2: 40, label: "2. Rigid Body Rotation & Torque", fontSize: 20, color: "#1e293b" },
-    { id: 8, type: "pivot", x1: 480, y1: 140, x2: 480, y2: 140, color: "#64748b", size: 25 },
-    { id: 9, type: "uniform_rod", x1: 480, y1: 140, x2: 740, y2: 180, color: "#f59e0b", strokeWidth: 12, label: "L, M" },
-    { id: 10, type: "vector", x1: 740, y1: 180, x2: 740, y2: 260, color: "#ef4444", label: "mg", strokeWidth: 2 },
-    { id: 11, type: "curve_arrow", x1: 480, y1: 140, x2: 540, y2: 200, color: "#8b5cf6", strokeWidth: 2, label: "\u03B1" },
-    { id: 103, type: "text", x1: 60, y1: 300, x2: 60, y2: 300, label: "3. Rolling on Inclined Plane", fontSize: 20, color: "#1e293b" },
-    { id: 12, type: "inclined_wedge", x1: 60, y1: 360, x2: 360, y2: 520, color: "#64748b", strokeWidth: 2, label: "\u03B8" },
-    {
-      id: 13,
+    { id: 1, type: "text", x1: 120, y1: 36, x2: 120, y2: 36, label: "Two bodies before/after contact \u2014 COM frame", color: "#475569", fontSize: 17 },
+    { id: 2, type: "point_mass", x1: 80, y1: 140, x2: 80, y2: 140, size: 25, color: "#ef4444", label: "m\u2081" },
+    { id: 3, type: "vector", x1: 80, y1: 140, x2: 180, y2: 140, color: "#ef4444", label: "u\u2081", strokeWidth: 2 },
+    { id: 4, type: "point_mass", x1: 240, y1: 100, x2: 240, y2: 100, size: 15, color: "#3b82f6", label: "m\u2082" },
+    { id: 5, type: "dashed_path", x1: 180, y1: 140, x2: 320, y2: 80, color: "#ef4444", strokeWidth: 1.5 },
+    { id: 6, type: "dashed_path", x1: 240, y1: 100, x2: 340, y2: 180, color: "#3b82f6", strokeWidth: 1.5 },
+    { id: 7, type: "com_indicator", x1: 160, y1: 120, x2: 160, y2: 120, color: "#10b981", size: 15, label: "COM" },
+    { id: 8, type: "system_boundary", x1: 40, y1: 60, x2: 360, y2: 220, color: "#94a3b8", strokeWidth: 1.5 }
+  ]
+};
+var rigidRodTorque = {
+  name: "Rigid rod & torque",
+  elements: [
+    { id: 1, type: "text", x1: 140, y1: 36, x2: 140, y2: 36, label: "Hinged rod: weight, pivot reaction, angular accel", color: "#475569", fontSize: 17 },
+    { id: 2, type: "pivot", x1: 120, y1: 160, x2: 120, y2: 160, color: "#64748b", size: 25 },
+    { id: 3, type: "uniform_rod", x1: 120, y1: 160, x2: 420, y2: 200, color: "#f59e0b", strokeWidth: 12, label: "L, M" },
+    { id: 4, type: "vector", x1: 420, y1: 200, x2: 420, y2: 300, color: "#ef4444", label: "mg", strokeWidth: 2 },
+    { id: 5, type: "curve_arrow", x1: 120, y1: 160, x2: 200, y2: 240, color: "#8b5cf6", strokeWidth: 2, label: "\u03B1" },
+    { id: 6, type: "text", x1: 480, y1: 200, x2: 480, y2: 200, label: "\u03C4 = I\u03B1 about pivot", color: "#0f172a", fontSize: 15 }
+  ]
+};
+var rollingPulleyRocket = {
+  name: "Rolling, pulleys & rocket",
+  elements: [
+    { id: 1, type: "text", x1: 100, y1: 36, x2: 100, y2: 36, label: "Rolling on incline \xB7 Atwood \xB7 variable-mass rocket", color: "#475569", fontSize: 16 },
+    { id: 2, type: "inclined_wedge", x1: 60, y1: 200, x2: 360, y2: 360, color: "#64748b", strokeWidth: 2, label: "\u03B8" },
+    {
+      id: 3,
       type: "rolling_body",
       x1: 160,
-      y1: 390,
+      y1: 230,
       x2: 200,
-      y2: 390,
+      y2: 230,
       color: "#3b82f6",
       strokeWidth: 2,
       label: "M, R",
       showVelocity: true,
       showOmega: true
     },
-    { id: 14, type: "vector", x1: 160, y1: 410, x2: 110, y2: 385, color: "#ef4444", label: "f_s", strokeWidth: 2 },
-    { id: 104, type: "text", x1: 560, y1: 300, x2: 560, y2: 300, label: "4. Systems & Angular Momentum", fontSize: 20, color: "#1e293b" },
-    { id: 15, type: "rocket", x1: 500, y1: 500, x2: 500, y2: 380, color: "#3b82f6", strokeWidth: 2, label: "v(t)" },
-    { id: 16, type: "vector", x1: 500, y1: 500, x2: 500, y2: 560, color: "#f97316", strokeWidth: 2, label: "u_rel dm/dt" },
-    { id: 17, type: "pulley", x1: 720, y1: 360, x2: 760, y2: 360, color: "#64748b", strokeWidth: 2 },
-    { id: 18, type: "block_mass", x1: 660, y1: 460, x2: 700, y2: 500, color: "#0ea5e9", label: "m\u2081" },
-    { id: 19, type: "block_mass", x1: 740, y1: 400, x2: 780, y2: 440, color: "#0ea5e9", label: "m\u2082" },
-    { id: 20, type: "line", x1: 680, y1: 460, x2: 680, y2: 360, color: "#1e293b", strokeWidth: 1.5 },
-    { id: 21, type: "line", x1: 760, y1: 400, x2: 760, y2: 360, color: "#1e293b", strokeWidth: 1.5 }
-  ],
+    { id: 4, type: "vector", x1: 160, y1: 250, x2: 110, y2: 225, color: "#ef4444", label: "f_s", strokeWidth: 2 },
+    { id: 5, type: "pulley", x1: 420, y1: 200, x2: 460, y2: 200, color: "#64748b", strokeWidth: 2 },
+    { id: 6, type: "block_mass", x1: 360, y1: 300, x2: 400, y2: 340, color: "#0ea5e9", label: "m\u2081" },
+    { id: 7, type: "block_mass", x1: 500, y1: 240, x2: 540, y2: 280, color: "#0ea5e9", label: "m\u2082" },
+    { id: 8, type: "line", x1: 380, y1: 300, x2: 380, y2: 200, color: "#1e293b", strokeWidth: 1.5 },
+    { id: 9, type: "line", x1: 520, y1: 260, x2: 520, y2: 200, color: "#1e293b", strokeWidth: 1.5 },
+    { id: 10, type: "rocket", x1: 620, y1: 340, x2: 620, y2: 220, color: "#3b82f6", strokeWidth: 2, label: "v(t)" },
+    { id: 11, type: "vector", x1: 620, y1: 340, x2: 620, y2: 400, color: "#f97316", strokeWidth: 2, label: "u_rel dm/dt" }
+  ]
+};
+var rotationExamples = [collisionCom, rigidRodTorque, rollingPulleyRocket];
+var rotation = {
+  name: "Rotation",
+  elements: rotationExamples[0].elements,
+  examples: rotationExamples,
   toolCategories: [
     {
       name: "Basics",
@@ -2326,57 +2894,83 @@ var rotation = {
 };
 
 // src/editor/presets/graph.ts
-var initialElements = [
-  { id: 1, type: "capacitor", x1: 260, y1: 200, x2: 460, y2: 200, label: "C = 10\u03BCF", color: "#0f172a", strokeWidth: 3, fontSize: 18 },
-  { id: 2, type: "line", x1: 260, y1: 200, x2: 260, y2: 400, color: "#0f172a", strokeWidth: 2 },
-  { id: 3, type: "line", x1: 460, y1: 200, x2: 460, y2: 400, color: "#0f172a", strokeWidth: 2 },
-  { id: 4, type: "capacitor", x1: 260, y1: 400, x2: 460, y2: 400, label: "V = 12V", color: "#0f172a", strokeWidth: 3, fontSize: 18 },
-  { id: 5, type: "ground", x1: 460, y1: 400, x2: 460, y2: 460, label: "", color: "#0f172a", strokeWidth: 2 },
-  { id: 6, type: "charge_plus", x1: 340, y1: 180, x2: 340, y2: 180, label: "+Q", color: "#ef4444", strokeWidth: 2, fontSize: 16 },
-  { id: 7, type: "charge_minus", x1: 380, y1: 180, x2: 380, y2: 180, label: "-Q", color: "#3b82f6", strokeWidth: 2, fontSize: 16 },
-  {
-    id: 8,
-    type: "vector",
-    x1: 345,
-    y1: 190,
-    x2: 375,
-    y2: 190,
-    label: "",
-    color: "#ef4444",
-    strokeWidth: 1.5,
-    lineStyle: "dashed"
-  },
-  {
-    id: 9,
-    type: "vector",
-    x1: 345,
-    y1: 210,
-    x2: 375,
-    y2: 210,
-    label: "",
-    color: "#ef4444",
-    strokeWidth: 1.5,
-    lineStyle: "dashed"
-  },
-  { id: 10, type: "charge_plus", x1: 600, y1: 300, x2: 600, y2: 300, label: "+q", color: "#ef4444", strokeWidth: 2, fontSize: 18 },
-  { id: 11, type: "charge_minus", x1: 800, y1: 300, x2: 800, y2: 300, label: "-q", color: "#3b82f6", strokeWidth: 2, fontSize: 18 },
-  { id: 12, type: "vector", x1: 620, y1: 300, x2: 780, y2: 300, label: "E", color: "#94a3b8", strokeWidth: 2, fontSize: 18 },
-  {
-    id: 13,
-    type: "circle",
-    x1: 600,
-    y1: 300,
-    x2: 660,
-    y2: 300,
-    label: "",
-    color: "#ef4444",
-    strokeWidth: 1.5,
-    lineStyle: "dashed"
-  }
-];
+var chargesAndRC = {
+  name: "Charges, capacitor & field",
+  elements: [
+    { id: 1, type: "text", x1: 320, y1: 24, x2: 320, y2: 24, label: "RC branch + point charges in an external E", color: "#475569", fontSize: 16 },
+    { id: 2, type: "capacitor", x1: 260, y1: 200, x2: 460, y2: 200, label: "C = 10\u03BCF", color: "#0f172a", strokeWidth: 3, fontSize: 18 },
+    { id: 3, type: "line", x1: 260, y1: 200, x2: 260, y2: 400, color: "#0f172a", strokeWidth: 2 },
+    { id: 4, type: "line", x1: 460, y1: 200, x2: 460, y2: 400, color: "#0f172a", strokeWidth: 2 },
+    { id: 5, type: "capacitor", x1: 260, y1: 400, x2: 460, y2: 400, label: "V = 12V", color: "#0f172a", strokeWidth: 3, fontSize: 18 },
+    { id: 6, type: "ground", x1: 460, y1: 400, x2: 460, y2: 460, label: "", color: "#0f172a", strokeWidth: 2 },
+    { id: 7, type: "charge_plus", x1: 340, y1: 180, x2: 340, y2: 180, label: "+Q", color: "#ef4444", strokeWidth: 2, fontSize: 16 },
+    { id: 8, type: "charge_minus", x1: 380, y1: 180, x2: 380, y2: 180, label: "-Q", color: "#3b82f6", strokeWidth: 2, fontSize: 16 },
+    {
+      id: 9,
+      type: "vector",
+      x1: 345,
+      y1: 190,
+      x2: 375,
+      y2: 190,
+      label: "",
+      color: "#ef4444",
+      strokeWidth: 1.5,
+      lineStyle: "dashed"
+    },
+    {
+      id: 10,
+      type: "vector",
+      x1: 345,
+      y1: 210,
+      x2: 375,
+      y2: 210,
+      label: "",
+      color: "#ef4444",
+      strokeWidth: 1.5,
+      lineStyle: "dashed"
+    },
+    { id: 11, type: "charge_plus", x1: 600, y1: 300, x2: 600, y2: 300, label: "+q", color: "#ef4444", strokeWidth: 2, fontSize: 18 },
+    { id: 12, type: "charge_minus", x1: 800, y1: 300, x2: 800, y2: 300, label: "-q", color: "#3b82f6", strokeWidth: 2, fontSize: 18 },
+    { id: 13, type: "vector", x1: 620, y1: 300, x2: 780, y2: 300, label: "E", color: "#94a3b8", strokeWidth: 2, fontSize: 18 },
+    {
+      id: 14,
+      type: "circle",
+      x1: 600,
+      y1: 300,
+      x2: 660,
+      y2: 300,
+      label: "",
+      color: "#ef4444",
+      strokeWidth: 1.5,
+      lineStyle: "dashed"
+    }
+  ]
+};
+var coordinateClassics = {
+  name: "Coordinate plane: parabola & sine",
+  elements: [
+    { id: 1, type: "text", x1: 280, y1: 24, x2: 280, y2: 24, label: "Standard graphs in x\u2013y", color: "#475569", fontSize: 16 },
+    { id: 2, type: "axes", x1: 120, y1: 380, x2: 520, y2: 80, color: "#0f172a", strokeWidth: 2 },
+    { id: 3, type: "parabola_v", x1: 200, y1: 200, x2: 440, y2: 340, color: "#2563eb", strokeWidth: 2.5, label: "y \u221D x\xB2" },
+    { id: 4, type: "sine_wave", x1: 140, y1: 260, x2: 500, y2: 260, color: "#db2777", strokeWidth: 2.5, label: "sin x", amplitude: 40, loops: 2 },
+    { id: 5, type: "text", x1: 560, y1: 120, x2: 560, y2: 120, label: "Use axes bbox for domain", color: "#64748b", fontSize: 14 }
+  ]
+};
+var hyperbolaAndModulus = {
+  name: "Hyperbola & modulus",
+  elements: [
+    { id: 1, type: "text", x1: 260, y1: 24, x2: 260, y2: 24, label: "Rational-style curves & piecewise linear", color: "#475569", fontSize: 16 },
+    { id: 2, type: "axes", x1: 100, y1: 400, x2: 540, y2: 60, color: "#0f172a", strokeWidth: 2 },
+    { id: 3, type: "hyperbola", x1: 320, y1: 100, x2: 480, y2: 360, color: "#7c3aed", strokeWidth: 2.5, label: "xy = const" },
+    { id: 4, type: "modulus", x1: 160, y1: 320, x2: 280, y2: 180, color: "#ea580c", strokeWidth: 2.5, label: "|x - a|" },
+    { id: 5, type: "text", x1: 560, y1: 280, x2: 560, y2: 280, label: "Asymptotes & kinks", color: "#64748b", fontSize: 14 }
+  ]
+};
+var graphExamples = [chargesAndRC, coordinateClassics, hyperbolaAndModulus];
 var graph = {
   name: "Graph",
-  elements: initialElements,
+  elements: graphExamples[0].elements,
+  examples: graphExamples,
   toolCategories: [
     {
       name: "Basic",
@@ -2430,30 +3024,50 @@ var graph = {
 };
 
 // src/editor/presets/electrostatics.ts
+var pointChargeGauss = {
+  name: "Point charge & Gaussian sphere",
+  elements: [
+    { id: 1, type: "text", x1: 160, y1: 36, x2: 160, y2: 36, label: "Spherical symmetry: E \u221D 1/r\xB2 outside", color: "#475569", fontSize: 16 },
+    { id: 2, type: "charge_pos", x1: 160, y1: 180, x2: 160, y2: 180, label: "+q", color: "#ef4444", strokeWidth: 2, fontSize: 18 },
+    { id: 3, type: "gaussian_sphere", x1: 160, y1: 180, x2: 280, y2: 180, color: "#10b981", strokeWidth: 2, label: "Gaussian surface" },
+    { id: 4, type: "vector", x1: 160, y1: 180, x2: 300, y2: 180, color: "#ef4444", strokeWidth: 2, label: "E" },
+    { id: 5, type: "vector", x1: 160, y1: 180, x2: 160, y2: 60, color: "#ef4444", strokeWidth: 2 },
+    { id: 6, type: "vector", x1: 160, y1: 180, x2: 40, y2: 180, color: "#ef4444", strokeWidth: 2 },
+    { id: 7, type: "vector", x1: 160, y1: 180, x2: 160, y2: 300, color: "#ef4444", strokeWidth: 2 },
+    { id: 8, type: "text", x1: 160, y1: 340, x2: 160, y2: 340, label: "\u222E E\xB7dA = Q/\u03B5\u2080", color: "#0f172a", fontSize: 17 }
+  ]
+};
+var lineChargeCylinder = {
+  name: "Line charge & Gaussian cylinder",
+  elements: [
+    { id: 1, type: "text", x1: 500, y1: 36, x2: 500, y2: 36, label: "Infinite line \u03BB \u2014 use a coaxial cylinder", color: "#475569", fontSize: 15 },
+    { id: 2, type: "charged_plate_pos", x1: 480, y1: 80, x2: 480, y2: 360, color: "#ef4444", strokeWidth: 2, label: "+\u03BB" },
+    { id: 3, type: "gaussian_cylinder", x1: 480, y1: 140, x2: 480, y2: 300, color: "#10b981", strokeWidth: 2, curveHeight: 60, label: "Coaxial S" },
+    { id: 4, type: "vector", x1: 480, y1: 210, x2: 600, y2: 210, color: "#ef4444", strokeWidth: 2, label: "E" },
+    { id: 5, type: "vector", x1: 480, y1: 210, x2: 360, y2: 210, color: "#ef4444", strokeWidth: 2 },
+    { id: 6, type: "text", x1: 480, y1: 400, x2: 480, y2: 400, label: "E = \u03BB / (2\u03C0\u03B5\u2080r)", color: "#0f172a", fontSize: 16 }
+  ]
+};
+var platesAndDipole = {
+  name: "Parallel plates & dipole",
+  elements: [
+    { id: 1, type: "text", x1: 720, y1: 36, x2: 720, y2: 36, label: "Uniform field + torque on p in E", color: "#475569", fontSize: 15 },
+    { id: 2, type: "charged_plate_pos", x1: 600, y1: 100, x2: 820, y2: 100, color: "#ef4444", strokeWidth: 2 },
+    { id: 3, type: "charged_plate_neg", x1: 600, y1: 300, x2: 820, y2: 300, color: "#3b82f6", strokeWidth: 2 },
+    { id: 4, type: "vector", x1: 640, y1: 100, x2: 640, y2: 300, color: "#ef4444", strokeWidth: 2 },
+    { id: 5, type: "vector", x1: 700, y1: 100, x2: 700, y2: 300, color: "#ef4444", strokeWidth: 2 },
+    { id: 6, type: "vector", x1: 780, y1: 100, x2: 780, y2: 300, color: "#ef4444", strokeWidth: 2, label: "E" },
+    { id: 7, type: "text", x1: 720, y1: 340, x2: 720, y2: 340, label: "\u0394V = E d (parallel)", color: "#0f172a", fontSize: 15 },
+    { id: 8, type: "dipole", x1: 120, y1: 480, x2: 280, y2: 480, color: "#64748b", strokeWidth: 2, label: "p" },
+    { id: 9, type: "vector", x1: 120, y1: 480, x2: 280, y2: 480, color: "#f59e0b", strokeWidth: 2, label: "p" },
+    { id: 10, type: "text", x1: 320, y1: 480, x2: 320, y2: 480, label: "\u03C4 = p \xD7 E", color: "#0f172a", fontSize: 16 }
+  ]
+};
+var electrostaticsExamples = [pointChargeGauss, lineChargeCylinder, platesAndDipole];
 var electrostatics = {
   name: "Electrostatics",
-  elements: [
-    { id: 1, type: "charge_pos", x1: 160, y1: 160, x2: 160, y2: 160, label: "+q", color: "#ef4444", strokeWidth: 2, fontSize: 18 },
-    { id: 2, type: "gaussian_sphere", x1: 160, y1: 160, x2: 260, y2: 160, color: "#10b981", strokeWidth: 2, label: "Gaussian Sphere" },
-    { id: 3, type: "vector", x1: 160, y1: 160, x2: 280, y2: 160, color: "#ef4444", strokeWidth: 2, label: "E" },
-    { id: 4, type: "vector", x1: 160, y1: 160, x2: 160, y2: 40, color: "#ef4444", strokeWidth: 2 },
-    { id: 5, type: "vector", x1: 160, y1: 160, x2: 40, y2: 160, color: "#ef4444", strokeWidth: 2 },
-    { id: 6, type: "vector", x1: 160, y1: 160, x2: 160, y2: 280, color: "#ef4444", strokeWidth: 2 },
-    { id: 7, type: "text", x1: 160, y1: 320, x2: 160, y2: 320, label: "Point Charge Field", color: "#334155", fontSize: 18 },
-    { id: 8, type: "charged_plate_pos", x1: 500, y1: 60, x2: 500, y2: 360, color: "#ef4444", strokeWidth: 2, label: "+\u03BB (Line Charge)" },
-    { id: 9, type: "gaussian_cylinder", x1: 500, y1: 120, x2: 500, y2: 300, color: "#10b981", strokeWidth: 2, curveHeight: 60, label: "Gaussian Cylinder" },
-    { id: 10, type: "vector", x1: 500, y1: 210, x2: 620, y2: 210, color: "#ef4444", strokeWidth: 2, label: "E" },
-    { id: 11, type: "vector", x1: 500, y1: 210, x2: 380, y2: 210, color: "#ef4444", strokeWidth: 2 },
-    { id: 12, type: "text", x1: 500, y1: 400, x2: 500, y2: 400, label: "Cylindrical Symmetry", color: "#334155", fontSize: 18 },
-    { id: 13, type: "charged_plate_pos", x1: 760, y1: 100, x2: 960, y2: 100, color: "#ef4444", strokeWidth: 2 },
-    { id: 14, type: "charged_plate_neg", x1: 760, y1: 300, x2: 960, y2: 300, color: "#3b82f6", strokeWidth: 2 },
-    { id: 15, type: "vector", x1: 800, y1: 100, x2: 800, y2: 300, color: "#ef4444", strokeWidth: 2 },
-    { id: 16, type: "vector", x1: 860, y1: 100, x2: 860, y2: 300, color: "#ef4444", strokeWidth: 2, label: "Uniform E-Field" },
-    { id: 17, type: "vector", x1: 920, y1: 100, x2: 920, y2: 300, color: "#ef4444", strokeWidth: 2 },
-    { id: 18, type: "text", x1: 860, y1: 340, x2: 860, y2: 340, label: "Parallel Plates", color: "#334155", fontSize: 18 },
-    { id: 19, type: "dipole", x1: 100, y1: 500, x2: 260, y2: 500, color: "#64748b", strokeWidth: 2, label: "Electric Dipole (p)" },
-    { id: 20, type: "vector", x1: 100, y1: 500, x2: 260, y2: 500, color: "#f59e0b", strokeWidth: 2, label: "p" }
-  ],
+  elements: electrostaticsExamples[0].elements,
+  examples: electrostaticsExamples,
   toolCategories: [
     {
       name: "Basics",
@@ -2498,21 +3112,51 @@ var electrostatics = {
 };
 
 // src/editor/presets/chemistry.ts
+var aromaticHalogenation = {
+  name: "Aromatic halogenation",
+  elements: [
+    { id: 1, type: "text", x1: 420, y1: 40, x2: 420, y2: 40, label: "Lewis acid catalyzed chlorination (schematic)", color: "#64748b", fontSize: 15 },
+    { id: 2, type: "benzene", x1: 150, y1: 210, x2: 150, y2: 210, label: "", value: "" },
+    { id: 3, type: "text", x1: 240, y1: 210, x2: 240, y2: 210, label: "+", value: "" },
+    { id: 4, type: "atom", x1: 285, y1: 210, x2: 285, y2: 210, label: "Cl", value: "" },
+    { id: 5, type: "single_bond", x1: 300, y1: 210, x2: 330, y2: 210, label: "", value: "" },
+    { id: 6, type: "atom", x1: 345, y1: 210, x2: 345, y2: 210, label: "Cl", value: "" },
+    { id: 7, type: "reaction_arrow", x1: 400, y1: 210, x2: 520, y2: 210, label: "FeCl\u2083", value: "cat." },
+    { id: 8, type: "benzene", x1: 600, y1: 210, x2: 600, y2: 210, label: "", value: "" },
+    { id: 9, type: "single_bond", x1: 600, y1: 180, x2: 600, y2: 120, label: "", value: "" },
+    { id: 10, type: "atom", x1: 600, y1: 105, x2: 600, y2: 105, label: "Cl", value: "" },
+    { id: 11, type: "text", x1: 690, y1: 210, x2: 690, y2: 210, label: "+", value: "" },
+    { id: 12, type: "atom", x1: 750, y1: 210, x2: 750, y2: 210, label: "HCl", value: "" }
+  ]
+};
+var ringEquilibrium = {
+  name: "Ring conformers",
+  elements: [
+    { id: 1, type: "text", x1: 400, y1: 50, x2: 400, y2: 50, label: "Six-membered ring: two low-energy chairs", color: "#64748b", fontSize: 15 },
+    { id: 2, type: "cyclohexane", x1: 220, y1: 240, x2: 220, y2: 240, label: "", value: "" },
+    { id: 3, type: "equilibrium_arrow", x1: 300, y1: 240, x2: 420, y2: 240, label: "", value: "" },
+    { id: 4, type: "cyclohexane", x1: 520, y1: 240, x2: 520, y2: 240, label: "", value: "" },
+    { id: 5, type: "text", x1: 400, y1: 360, x2: 400, y2: 360, label: "Flip interconverts axial / equatorial substituents", color: "#334155", fontSize: 14 },
+    { id: 6, type: "wedge_bond", x1: 220, y1: 200, x2: 200, y2: 170, label: "", value: "" },
+    { id: 7, type: "atom", x1: 188, y1: 158, x2: 188, y2: 158, label: "R", value: "" }
+  ]
+};
+var resonanceStructures = {
+  name: "Benzene resonance",
+  elements: [
+    { id: 1, type: "text", x1: 400, y1: 50, x2: 400, y2: 50, label: "\u03C0 system: two major Kekul\xE9 contributors", color: "#64748b", fontSize: 15 },
+    { id: 2, type: "benzene", x1: 200, y1: 220, x2: 200, y2: 220, label: "", value: "" },
+    { id: 3, type: "resonance_arrow", x1: 280, y1: 220, x2: 360, y2: 220, label: "", value: "" },
+    { id: 4, type: "benzene", x1: 440, y1: 220, x2: 440, y2: 220, label: "", value: "" },
+    { id: 5, type: "double_bond", x1: 440, y1: 200, x2: 470, y2: 180, label: "", value: "" },
+    { id: 6, type: "text", x1: 400, y1: 340, x2: 400, y2: 340, label: "Real molecule = hybrid (D\u2086h symmetry)", color: "#334155", fontSize: 14 }
+  ]
+};
+var chemistryExamples = [aromaticHalogenation, ringEquilibrium, resonanceStructures];
 var chemistry = {
   name: "Chemistry",
-  elements: [
-    { id: 1, type: "benzene", x1: 150, y1: 210, x2: 150, y2: 210, label: "", value: "" },
-    { id: 2, type: "text", x1: 240, y1: 210, x2: 240, y2: 210, label: "+", value: "" },
-    { id: 3, type: "atom", x1: 285, y1: 210, x2: 285, y2: 210, label: "Cl", value: "" },
-    { id: 4, type: "single_bond", x1: 300, y1: 210, x2: 330, y2: 210, label: "", value: "" },
-    { id: 5, type: "atom", x1: 345, y1: 210, x2: 345, y2: 210, label: "Cl", value: "" },
-    { id: 6, type: "reaction_arrow", x1: 400, y1: 210, x2: 520, y2: 210, label: "FeCl3", value: "Dark" },
-    { id: 7, type: "benzene", x1: 600, y1: 210, x2: 600, y2: 210, label: "", value: "" },
-    { id: 8, type: "single_bond", x1: 600, y1: 180, x2: 600, y2: 120, label: "", value: "" },
-    { id: 9, type: "atom", x1: 600, y1: 105, x2: 600, y2: 105, label: "Cl", value: "" },
-    { id: 10, type: "text", x1: 690, y1: 210, x2: 690, y2: 210, label: "+", value: "" },
-    { id: 11, type: "atom", x1: 750, y1: 210, x2: 750, y2: 210, label: "HCl", value: "" }
-  ],
+  elements: chemistryExamples[0].elements,
+  examples: chemistryExamples,
   toolCategories: [
     {
       name: "Chemistry",
@@ -2558,39 +3202,25 @@ var chemistry = {
   ]
 };
 
-// src/editor/presets/mechanical.ts
-var mechanical = {
-  name: "Mechanical",
-  elements: [
-    { id: 1, type: "wedge", x1: 100, y1: 400, x2: 500, y2: 100, label: "M" },
-    { id: 2, type: "block", x1: 220, y1: 260, x2: 300, y2: 300, label: "m" },
-    { id: 3, type: "arc", x1: 100, y1: 400, x2: 260, y2: 280, label: "\u03B8" }
-  ],
-  toolCategories: [{ name: "Mechanical", tools: [{ id: "select", name: "Select" }, { id: "wedge", name: "Wedge" }, { id: "block", name: "Block" }, { id: "vector", name: "Vector" }, { id: "arc", name: "Arc" }, { id: "dashed", name: "Dashed" }, { id: "dimension", name: "Dimension" }, { id: "axes", name: "Axes" }] }]
-};
-
 // src/editor/presets/index.ts
 var presets = {
   mechanics,
   circuit,
   thermo,
-  optical,
   magnetism,
   light,
-  waves,
   waveOscillation,
   rotation,
   graph,
   electrostatics,
-  chemistry,
-  mechanical
+  chemistry
 };
 
 // src/editor/Editor.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultPreset = presets.mechanics;
 var Editor = forwardRef(function Editor2({
-  initialElements: initialElements2,
+  initialElements,
   toolCategories,
   preset,
   enablePresetSwitch = true,
@@ -2603,6 +3233,7 @@ var Editor = forwardRef(function Editor2({
   onExport
 }, ref) {
   const [selectedPreset, setSelectedPreset] = useState2(preset ?? "mechanics");
+  const [exampleIndex, setExampleIndex] = useState2(0);
   const isPresetExternallyControlled = preset !== void 0 && typeof onPresetChange === "function";
   useEffect2(() => {
     if (isPresetExternallyControlled && preset) {
@@ -2611,23 +3242,21 @@ var Editor = forwardRef(function Editor2({
   }, [preset, isPresetExternallyControlled]);
   const activePresetKey = isPresetExternallyControlled ? preset ?? selectedPreset : selectedPreset;
   const activePreset = presets[activePresetKey] ?? defaultPreset;
-  const [lightTopicIndex, setLightTopicIndex] = useState2(0);
   useEffect2(() => {
-    setLightTopicIndex(0);
+    setExampleIndex(0);
   }, [activePresetKey]);
   const resolvedInitialElements = useMemo2(() => {
-    if (initialElements2 != null) return initialElements2;
-    if (activePresetKey === "light") return LIGHT_TOPICS[lightTopicIndex].elements;
-    return activePreset.elements;
-  }, [initialElements2, activePresetKey, lightTopicIndex, activePreset.elements]);
+    if (initialElements != null) return initialElements;
+    const source = activePreset.examples?.[exampleIndex]?.elements ?? activePreset.elements;
+    return source.slice();
+  }, [initialElements, activePreset, exampleIndex]);
   const state = useDrawing(resolvedInitialElements, activePresetKey);
-  const showLightTopicPicker = activePresetKey === "light" && initialElements2 == null;
   useEffect2(() => {
     onChange?.(state.elements);
   }, [state.elements, onChange]);
   useEffect2(() => {
     if (typeof viewMode === "boolean") state.setIsViewMode(viewMode);
-  }, [viewMode, state]);
+  }, [viewMode, state.setIsViewMode]);
   useEffect2(() => {
     if (!state.selectedId) {
       state.setShowProperties(false);
@@ -2642,6 +3271,7 @@ var Editor = forwardRef(function Editor2({
       clear: () => state.setElements([])
     }),
     [state.elements, state.setElements]
+    // eslint-disable-line react-hooks/exhaustive-deps
   );
   const displayTitle = documentTitle ?? `${activePreset.name} Editor`;
   const handleCopyJson = () => {
@@ -2652,7 +3282,17 @@ var Editor = forwardRef(function Editor2({
     }
   };
   const updateSelected = (key, value) => {
-    state.setElements((els) => els.map((el) => el.id === state.selectedId ? { ...el, [key]: value } : el));
+    state.setElements(
+      (els) => els.map((el) => {
+        if (el.id !== state.selectedId) return el;
+        if (value === void 0) {
+          const copy = { ...el };
+          delete copy[key];
+          return copy;
+        }
+        return { ...el, [key]: value };
+      })
+    );
   };
   const deleteSelected = () => {
     if (!state.selectedId) return;
@@ -2684,24 +3324,18 @@ var Editor = forwardRef(function Editor2({
           ),
           /* @__PURE__ */ jsx5("span", { className: "pointer-events-none absolute inset-y-0 right-2 flex items-center text-slate-500 text-xs", children: "\u25BC" })
         ] }),
-        showLightTopicPicker && /* @__PURE__ */ jsxs5("div", { className: "relative shrink-0 max-w-[min(100%,280px)]", children: [
+        initialElements == null && activePreset.examples && activePreset.examples.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "relative shrink-0 max-w-[min(280px,46vw)]", children: [
           /* @__PURE__ */ jsx5(
             "select",
             {
-              value: lightTopicIndex,
-              onChange: (e) => {
-                const idx = Number(e.target.value);
-                setLightTopicIndex(idx);
-                state.setSelectedId(null);
-                state.setShowProperties(false);
-              },
-              className: "w-full appearance-none text-xs md:text-sm pl-3 pr-8 py-2 rounded-full border border-slate-200 bg-sky-50 text-slate-800 shadow-sm hover:bg-sky-100 focus:outline-none focus:ring-2 focus:ring-sky-200 truncate",
-              title: "Load JEE/NEET topic scene",
-              "aria-label": "Light syllabus topic",
-              children: LIGHT_TOPICS.map((t, i) => /* @__PURE__ */ jsx5("option", { value: i, children: t.name }, t.name))
+              value: exampleIndex,
+              onChange: (e) => setExampleIndex(Number(e.target.value)),
+              className: "appearance-none w-full text-xs md:text-sm pl-3 pr-8 py-2 rounded-full border border-violet-200 bg-violet-50/90 text-violet-900 shadow-sm hover:bg-violet-100 focus:outline-none focus:ring-2 focus:ring-violet-200 truncate",
+              title: "Load example scene",
+              children: activePreset.examples.map((ex, i) => /* @__PURE__ */ jsx5("option", { value: i, children: ex.name }, ex.name))
             }
           ),
-          /* @__PURE__ */ jsx5("span", { className: "pointer-events-none absolute inset-y-0 right-2 flex items-center text-slate-500 text-xs", children: "\u25BC" })
+          /* @__PURE__ */ jsx5("span", { className: "pointer-events-none absolute inset-y-0 right-2 flex items-center text-violet-600 text-xs", children: "\u25BC" })
         ] }),
         !hideDocumentTitle && /* @__PURE__ */ jsx5("h1", { className: "text-lg md:text-2xl font-semibold tracking-tight text-slate-800 truncate min-w-0", children: displayTitle })
       ] }),
@@ -2789,7 +3423,8 @@ var Editor = forwardRef(function Editor2({
             onBackgroundMouseMove: state.isViewMode ? void 0 : state.handleMouseMove,
             onBackgroundMouseUp: state.isViewMode ? void 0 : state.handleMouseUp,
             onBackgroundMouseLeave: state.isViewMode ? void 0 : state.handleMouseUp,
-            onElementMouseDown: state.onElementMouseDown
+            onElementMouseDown: state.onElementMouseDown,
+            onHandlePointerDown: state.isViewMode ? void 0 : state.onHandlePointerDown
           }
         ),
         state.showProperties && state.selectedId && !state.isViewMode && /* @__PURE__ */ jsx5(