@codefrydev/svg-engine 0.1.0

package/dist/editor.js

@@ -0,0 +1,3060 @@
+import {
+  Renderer,
+  getMouseCoords,
+  snap
+} from "./chunk-KRCGD3CL.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 waveOscillationDefaults = (tool) => {
+  let defaultColor = "#0f172a";
+  if (["spring", "sine_wave", "wavefronts", "shm_graph"].includes(tool)) defaultColor = "#3b82f6";
+  if (["standing_wave", "wave_pulse", "torsion_pendulum"].includes(tool)) defaultColor = "#ec4899";
+  if (["pendulum", "phasor"].includes(tool)) defaultColor = "#8b5cf6";
+  if (["wall", "vane_liquid"].includes(tool)) defaultColor = "#64748b";
+  if (tool === "mass_box") defaultColor = "#ef4444";
+  const base = { color: defaultColor, strokeWidth: 2, fontSize: 18 };
+  switch (tool) {
+    case "standing_wave":
+    case "sine_wave":
+      return { ...base, amplitude: 40, loops: 2 };
+    case "damped_wave":
+      return { ...base, amplitude: 50, damping: 0.015, frequency: 10 };
+    case "shm_graph":
+      return { ...base, amplitude: 40, loops: 1, graphType: "all" };
+    case "energy_graph":
+      return { ...base, amplitude: 50, loops: 1, domain: "time" };
+    case "strobe_shm":
+      return { ...base, amplitude: 40, loops: 1 };
+    case "beats_graph":
+      return { ...base, amplitude: 30, frequency: 15, beatFreq: 2 };
+    case "wavefronts":
+      return { ...base, velocityRatio: 0.5, rings: 5 };
+    case "mach_cone":
+      return { ...base, machNumber: 2 };
+    case "mass_box":
+      return { ...base, size: 30 };
+    case "pendulum":
+      return { ...base, size: 15, showForces: false };
+    case "phasor":
+      return { ...base, showProjection: false };
+    case "spring":
+      return { ...base, coils: 8 };
+    case "text":
+      return { ...base, label: "Equation/Label" };
+    default:
+      return base;
+  }
+};
+var toolCreateDefaults = (tool, presetKey) => {
+  if (presetKey === "waveOscillation") return waveOscillationDefaults(tool);
+  switch (tool) {
+    case "charge_pos":
+      return { color: "#ef4444", strokeWidth: 2, fontSize: 18 };
+    case "charge_neg":
+      return { color: "#3b82f6", strokeWidth: 2, fontSize: 18 };
+    case "charge_plus":
+      return { color: "#ef4444", strokeWidth: 2, fontSize: 16 };
+    case "charge_minus":
+      return { color: "#3b82f6", strokeWidth: 2, fontSize: 16 };
+    case "dipole":
+      return { color: "#64748b", strokeWidth: 2 };
+    case "charged_plate_pos":
+      return { color: "#ef4444", strokeWidth: 2 };
+    case "charged_plate_neg":
+      return { color: "#3b82f6", strokeWidth: 2 };
+    case "gaussian_sphere":
+      return { color: "#10b981", strokeWidth: 2 };
+    case "gaussian_cylinder":
+      return { color: "#10b981", strokeWidth: 2, curveHeight: 40 };
+    case "vector":
+    case "ray":
+    case "photon":
+      if (presetKey === "graph") return { color: "#0f172a", strokeWidth: 2 };
+      if (presetKey === "mechanics" || presetKey === "mechanical") 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 };
+      return { color: "#ef4444", strokeWidth: 2 };
+    case "lens_convex":
+    case "lens_concave":
+    case "prism":
+    case "glass_slab":
+      return { color: "#38bdf8", strokeWidth: 2 };
+    case "mirror_plane":
+    case "mirror_concave":
+    case "mirror_convex":
+      return { color: "#0f172a", strokeWidth: 2 };
+    case "slit_double":
+    case "slit_single":
+      return { color: "#0f172a", strokeWidth: 4 };
+    case "nucleus":
+      if (presetKey === "optical") 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" };
+    case "dashed_line":
+      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 === "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 === "rotation") return { color: "#1e293b", strokeWidth: 2, fontSize: 20, label: "Label" };
+      if (presetKey === "thermo") return { color: "#1e293b", strokeWidth: 2, fontSize: 18, label: "Equation/Label" };
+      return {};
+    case "b_field_line":
+    case "b_field_curve":
+      if (presetKey === "magnetism") return { color: "#10b981", strokeWidth: 2 };
+      return {};
+    case "pole_piece":
+      if (presetKey === "magnetism") return { color: "#0f172a", strokeWidth: 2, label: "N" };
+      return {};
+    case "b_region_in":
+    case "b_region_out":
+      if (presetKey === "magnetism") return { color: "#94a3b8", strokeWidth: 2 };
+      return {};
+    case "current_wire":
+      if (presetKey === "magnetism") return { color: "#ef4444", strokeWidth: 2, label: "I" };
+      return {};
+    case "bar_magnet":
+      if (presetKey === "magnetism") return { color: "#0f172a", strokeWidth: 2, label: "" };
+      return {};
+    case "coil":
+      if (presetKey === "magnetism") return { color: "#0f172a", strokeWidth: 2 };
+      return {};
+    case "bezier":
+      if (presetKey === "magnetism") return { color: "#0f172a", strokeWidth: 2 };
+      return {};
+    case "meter":
+      if (presetKey === "magnetism") return { color: "#0f172a", strokeWidth: 2, fontSize: 24, label: "G" };
+      return {};
+    case "ac_source":
+      if (presetKey === "magnetism") return { color: "#0f172a", strokeWidth: 2, fontSize: 18, label: "V_rms" };
+      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 };
+      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 };
+      return {};
+    case "pulley":
+      if (presetKey === "rotation") return { color: "#64748b", strokeWidth: 2, fontSize: 18 };
+      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2 };
+      return {};
+    case "point_mass":
+      return { color: "#ef4444", strokeWidth: 2, size: 15, fontSize: 18 };
+    case "block_mass":
+      return { color: "#3b82f6", strokeWidth: 2, fontSize: 18 };
+    case "com_indicator":
+      return { color: "#10b981", strokeWidth: 2, size: 15, fontSize: 18 };
+    case "system_boundary":
+    case "dashed_path":
+      return { color: "#94a3b8", strokeWidth: presetKey === "rotation" ? 1.5 : 2, fontSize: 18 };
+    case "rocket":
+      return { color: "#ef4444", strokeWidth: 2, fontSize: 18 };
+    case "uniform_rod":
+      return { color: "#f59e0b", strokeWidth: 10, fontSize: 18 };
+    case "solid_disk":
+    case "hoop_ring":
+      return { color: "#3b82f6", strokeWidth: 2, fontSize: 18 };
+    case "rolling_body":
+      return { color: "#3b82f6", strokeWidth: 2, fontSize: 18, showVelocity: true, showOmega: true };
+    case "inclined_wedge":
+      return { color: "#64748b", strokeWidth: 2, fontSize: 18 };
+    case "curve_arrow":
+      return { color: "#10b981", strokeWidth: 2, fontSize: 18 };
+    case "line":
+      if (presetKey === "rotation") return { color: "#1e293b", strokeWidth: 1.5 };
+      if (presetKey === "thermo") return { color: "#1e293b", strokeWidth: 2, lineStyle: "solid" };
+      return {};
+    case "piston_cylinder":
+      if (presetKey !== "thermo") return {};
+      return {
+        color: "#1e293b",
+        strokeWidth: 2,
+        fontSize: 18,
+        compression: 0.5,
+        showHeat: false,
+        lineStyle: "solid"
+      };
+    case "heat_engine":
+      if (presetKey !== "thermo") return {};
+      return {
+        color: "#10b981",
+        strokeWidth: 2,
+        fontSize: 18,
+        engineType: "engine",
+        efficiency: 0.4,
+        lineStyle: "solid"
+      };
+    case "conduction_rod":
+      if (presetKey !== "thermo") return {};
+      return { color: "#3b82f6", strokeWidth: 2, fontSize: 18, lineStyle: "solid" };
+    case "pv_axes":
+      if (presetKey !== "thermo") return {};
+      return {
+        color: "#1e293b",
+        strokeWidth: 2,
+        fontSize: 18,
+        xLabel: "V",
+        yLabel: "P",
+        lineStyle: "solid"
+      };
+    case "thermo_process":
+      if (presetKey !== "thermo") return {};
+      return {
+        color: "#ec4899",
+        strokeWidth: 2,
+        fontSize: 18,
+        processType: "isotherm",
+        lineStyle: "solid"
+      };
+    case "carnot_cycle":
+      if (presetKey !== "thermo") return {};
+      return { color: "#ec4899", strokeWidth: 2, fontSize: 18, lineStyle: "solid" };
+    case "maxwell_boltzmann":
+      if (presetKey !== "thermo") return {};
+      return {
+        color: "#1e293b",
+        strokeWidth: 2,
+        fontSize: 18,
+        t1: 300,
+        t2: 600,
+        lineStyle: "solid"
+      };
+    case "diatomic_gas":
+      return { color: "#f59e0b", strokeWidth: 2, fontSize: 18, showRotations: true };
+    case "random_walk":
+      if (presetKey !== "thermo") return {};
+      return { color: "#8b5cf6", strokeWidth: 2, fontSize: 18, steps: 5, lineStyle: "solid" };
+    case "string":
+    case "surface":
+    case "dashed":
+    case "dimension":
+    case "rod":
+    case "arc":
+    case "wedge":
+    case "axes":
+    case "disk":
+    case "particle":
+    case "com":
+      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2 };
+      return {};
+    case "block":
+    case "cart":
+      if (presetKey === "mechanics" || presetKey === "mechanical") return { color: "#0f172a", strokeWidth: 2, rotation: 0 };
+      return {};
+    default:
+      return {};
+  }
+};
+var useDrawing = (initialElements2, presetKey) => {
+  const [elements, setElements] = useState(initialElements2);
+  const [tool, setTool] = useState("select");
+  const [drawing, setDrawing] = useState(null);
+  const [selectedId, setSelectedId] = useState(null);
+  const [isViewMode, setIsViewMode] = useState(false);
+  const [showJsonModal, setShowJsonModal] = useState(false);
+  const [jsonText, setJsonText] = useState("");
+  const [showProperties, setShowProperties] = useState(false);
+  const [draggingId, setDraggingId] = useState(null);
+  const svgRef = useRef(null);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const originalPos = useRef(null);
+  useEffect(() => {
+    setElements(initialElements2);
+  }, [initialElements2]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.key === "Delete" || e.key === "Backspace") && selectedId) {
+        setElements((prev) => prev.filter((el) => el.id !== selectedId));
+        setSelectedId(null);
+        setShowProperties(false);
+      }
+      if (e.key === "Escape") {
+        setDrawing(null);
+        setTool("select");
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedId]);
+  const selectedElement = useMemo(
+    () => elements.find((e) => e.id === selectedId) || null,
+    [elements, selectedId]
+  );
+  const onElementMouseDown = (e, element) => {
+    if (tool !== "select") return;
+    e.stopPropagation();
+    if (!svgRef.current) return;
+    const m = getMouseCoords(svgRef.current, e);
+    setSelectedId(element.id);
+    setDraggingId(element.id);
+    dragStart.current = m;
+    originalPos.current = { x1: element.x1, y1: element.y1, x2: element.x2, y2: element.y2 };
+  };
+  const handleMouseDown = (e) => {
+    if (!svgRef.current) return;
+    if (tool === "select") {
+      setSelectedId(null);
+      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 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 || [
+      "point",
+      "text",
+      "diatomic_gas",
+      "benzene",
+      "cyclohexane",
+      "cyclopentane",
+      "cyclobutane",
+      "cyclopropane",
+      "atom",
+      "charge_plus",
+      "charge_minus",
+      "charge_pos",
+      "charge_neg",
+      "radical",
+      "lone_pair",
+      "nucleus",
+      "meter",
+      "ac_source"
+    ].includes(tool);
+    if (single) {
+      const defaults2 = toolCreateDefaults(tool, presetKey);
+      const defaultLabel = tool === "text" ? "Text" : tool === "atom" ? "C" : tool === "charge_pos" ? "+q" : tool === "charge_neg" ? "-q" : tool === "charge_plus" ? "+q" : tool === "charge_minus" ? "-q" : tool === "meter" ? "G" : tool === "ac_source" ? "V_rms" : "";
+      const el = {
+        id: Date.now(),
+        type: tool,
+        x1: x,
+        y1: y,
+        x2: x,
+        y2: y,
+        ...defaults2,
+        label: typeof defaults2.label === "string" ? defaults2.label : defaultLabel
+      };
+      setElements((prev) => [...prev, el]);
+      setSelectedId(el.id);
+      setTool("select");
+      return;
+    }
+    const defaults = toolCreateDefaults(tool, presetKey);
+    const rotationExtra = (presetKey === "mechanics" || presetKey === "mechanical") && (tool === "block" || tool === "cart") ? { rotation: defaults.rotation ?? 0 } : {};
+    setDrawing({
+      ...defaults,
+      ...rotationExtra,
+      id: Date.now(),
+      type: tool,
+      x1: x,
+      y1: y,
+      x2: x,
+      y2: y,
+      label: typeof defaults.label === "string" ? defaults.label : ""
+    });
+  };
+  const handleMouseMove = (e) => {
+    if (!svgRef.current) return;
+    const p = getMouseCoords(svgRef.current, e);
+    if (draggingId && 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
+        )
+      );
+      return;
+    }
+    if (!drawing) return;
+    setDrawing({ ...drawing, x2: snap(p.x), y2: snap(p.y) });
+  };
+  const handleMouseUp = () => {
+    if (draggingId) {
+      setDraggingId(null);
+      return;
+    }
+    if (!drawing) return;
+    if (drawing.x1 === drawing.x2 && drawing.y1 === drawing.y2) {
+      setDrawing(null);
+      setTool("select");
+      return;
+    }
+    const finalized = drawing.type === "bezier" ? {
+      ...drawing,
+      cps: [{ x: (drawing.x1 + drawing.x2) / 2, y: Math.min(drawing.y1, drawing.y2) - 60 }]
+    } : drawing;
+    setElements((prev) => [...prev, finalized]);
+    setSelectedId(drawing.id);
+    setDrawing(null);
+    setTool("select");
+  };
+  return {
+    elements,
+    setElements,
+    tool,
+    setTool,
+    drawing,
+    selectedId,
+    setSelectedId,
+    isViewMode,
+    setIsViewMode,
+    showJsonModal,
+    setShowJsonModal,
+    jsonText,
+    setJsonText,
+    showProperties,
+    setShowProperties,
+    selectedElement,
+    svgRef,
+    onElementMouseDown,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp
+  };
+};
+
+// src/editor/icons.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Icons = {
+  select: /* @__PURE__ */ jsx("path", { d: "M 8 4 L 16 12 L 11 13 L 9 18 L 6 17 L 8 12 L 4 11 Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.5" }),
+  point: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3", fill: "currentColor" }),
+  line: /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "4", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  string: /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
+  vector: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "18", y2: "6", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("polygon", { points: "14,4 20,4 20,10", fill: "none", stroke: "currentColor", strokeWidth: "2.5" })
+  ] }),
+  ray: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "10,8 16,12 10,16", fill: "currentColor" })
+  ] }),
+  wire: /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12", stroke: "currentColor", strokeWidth: "2.8", strokeLinecap: "round" }),
+  text: /* @__PURE__ */ jsx("text", { x: "12", y: "18", fontSize: "18", textAnchor: "middle", fill: "currentColor", fontWeight: "bold", fontFamily: "serif", children: "T" }),
+  block: /* @__PURE__ */ jsx("rect", { x: "5", y: "6", width: "14", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2", rx: "1" }),
+  wedge: /* @__PURE__ */ jsx("polygon", { points: "2,20 22,20 22,6", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+  pulley: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "6", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "10", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "10", x2: "6", y2: "20", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "10", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  point_mass: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "currentColor", stroke: "currentColor", strokeWidth: "2" }),
+  block_mass: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2", rx: "1" }),
+  com_indicator: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 12 12 L 17 7 A 7 7 0 0 1 17 17 Z M 12 12 L 7 17 A 7 7 0 0 1 7 7 Z", fill: "currentColor", opacity: "0.3" })
+  ] }),
+  system_boundary: /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeDasharray: "3 2", rx: "4" }),
+  rocket: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 2 L16 8 L16 16 L20 20 L4 20 L8 16 L8 8 Z", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 20 Q12 24 16 20", fill: "currentColor" })
+  ] }),
+  dashed_path: /* @__PURE__ */ jsx("path", { d: "M 4 20 Q 8 8 20 4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "4 3" }),
+  uniform_rod: /* @__PURE__ */ jsx("rect", { x: "3", y: "10", width: "18", height: "4", fill: "currentColor", rx: "2", opacity: "0.8" }),
+  solid_disk: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", opacity: "0.5", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "currentColor" })
+  ] }),
+  hoop_ring: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", fill: "none", stroke: "currentColor", strokeWidth: "2.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "currentColor" })
+  ] }),
+  rolling_body: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "20", y2: "12", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("polygon", { points: "18,10 22,12 18,14", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M 16 6 A 8 8 0 0 1 20 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("polygon", { points: "19,11 22,9 18,8", fill: "currentColor" })
+  ] }),
+  inclined_wedge: /* @__PURE__ */ jsx("polygon", { points: "4,20 20,20 4,8", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+  curve_arrow: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M 6 18 A 9 9 0 0 1 18 6", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "16,5 20,4 19,8", fill: "currentColor" })
+  ] }),
+  ladder: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "7", y1: "4", x2: "4", y2: "20", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "17", y1: "4", x2: "14", y2: "20", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "8", x2: "16", y2: "8", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "15", y2: "12", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("line", { x1: "4.5", y1: "16", x2: "14.5", y2: "16", stroke: "currentColor", strokeWidth: "1.6" })
+  ] }),
+  spring: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M 2 12 L 5 12 L 7 6 L 11 18 L 15 6 L 19 18 L 21 12 L 22 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinejoin: "bevel"
+    }
+  ),
+  arc: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M 22 12 A 10 10 0 0 0 12 2 L 12 12 Z",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinejoin: "round"
+    }
+  ),
+  arc_arrow: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M 4 16 A 8 8 0 0 1 18 8", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("polygon", { points: "17,5 21,9 15,10", fill: "currentColor" })
+  ] }),
+  dashed: /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "4,4" }),
+  surface: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M 4 10 L 20 10 M 6 10 L 2 16 M 12 10 L 8 16 M 18 10 L 14 16 M 24 10 L 20 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2"
+    }
+  ),
+  dimension: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12", stroke: "currentColor", strokeWidth: "1.5", strokeDasharray: "2 2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "4,12 8,9 8,15", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("polygon", { points: "20,12 16,9 16,15", fill: "currentColor" })
+  ] }),
+  axes: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "18", x2: "6", y2: "6", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "6,4 3,9 9,9", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "18", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "20,18 15,15 15,21", fill: "currentColor" })
+  ] }),
+  cart: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M 4 8 L 20 8 L 20 14 L 4 14 Z M 8 18 A 2 2 0 1 0 8 14 A 2 2 0 1 0 8 18 M 16 18 A 2 2 0 1 0 16 14 A 2 2 0 1 0 16 18",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2"
+    }
+  ),
+  disk: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" })
+  ] }),
+  com: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 12 4 A 8 8 0 0 1 20 12 L 12 12 Z M 12 20 A 8 8 0 0 1 4 12 L 12 12 Z", fill: "currentColor" })
+  ] }),
+  particle: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }),
+  pivot: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("polygon", { points: "12,6 6,18 18,18", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6", r: "2", fill: "currentColor" })
+  ] }),
+  dashed_line: /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "4", stroke: "currentColor", strokeWidth: "2.5", strokeDasharray: "4 4", strokeLinecap: "round" }),
+  angle: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "16", y2: "4", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 14 20 A 10 10 0 0 0 10 12", fill: "none", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  rectangle: /* @__PURE__ */ jsx("rect", { x: "4", y: "6", width: "16", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+  circle: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2.5" }),
+  ellipse: /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "5", fill: "none", stroke: "currentColor", strokeWidth: "2.5" }),
+  parabola_v: /* @__PURE__ */ jsx("path", { d: "M 4 4 Q 12 24 20 4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  parabola_h: /* @__PURE__ */ jsx("path", { d: "M 20 4 Q 0 12 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  hyperbola: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M 6 2 Q 12 12 6 22", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 18 2 Q 12 12 18 22", fill: "none", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  sine_wave: /* @__PURE__ */ jsx("path", { d: "M 2 12 Q 7 2 12 12 T 22 12", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  mass_box: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+  pendulum: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "18", y2: "16", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "2", x2: "18", y2: "2", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  phasor: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "18", y2: "6", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "15,5 19,5 19,9", fill: "currentColor" })
+  ] }),
+  damped_wave: /* @__PURE__ */ jsx("path", { d: "M 2 12 Q 5 2 8 12 T 14 12 T 18 12 T 22 12", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+  vane_liquid: /* @__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" }),
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "10", width: "16", height: "10", fill: "currentColor", opacity: "0.35" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "16", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__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" })
+  ] }),
+  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" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 2 12 Q 7 22 12 12 T 22 12",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeDasharray: "2 2"
+      }
+    )
+  ] }),
+  wave_pulse: /* @__PURE__ */ jsx("path", { d: "M 2 16 L 8 16 Q 12 4 16 16 L 22 16", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+  shm_graph: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12", stroke: "currentColor", strokeWidth: "1", opacity: "0.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M 2 12 Q 7 2 12 12 T 22 12", fill: "none", stroke: "#3b82f6", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 2 12 Q 7 22 12 12 T 22 12",
+        fill: "none",
+        stroke: "#ef4444",
+        strokeWidth: "2",
+        strokeDasharray: "2 2"
+      }
+    )
+  ] }),
+  energy_graph: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "20", x2: "22", y2: "20", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 4 6 Q 12 24 20 6", fill: "none", stroke: "#ef4444", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 4 20 Q 12 2 20 20", fill: "none", stroke: "#10b981", strokeWidth: "2" })
+  ] }),
+  strobe_shm: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "12", r: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "20", r: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "4", x2: "18", y2: "4", stroke: "currentColor", strokeWidth: "0.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "12", x2: "18", y2: "12", stroke: "currentColor", strokeWidth: "0.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "20", x2: "18", y2: "20", stroke: "currentColor", strokeWidth: "0.5" })
+  ] }),
+  wall: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "4", x2: "16", y2: "0", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "10", x2: "16", y2: "6", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "16", y2: "12", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "22", x2: "16", y2: "18", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  tuning_fork: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M 8 4 L 8 14 Q 12 20 16 14 L 16 4", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12", y2: "24", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  speaker: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("polygon", { points: "8,8 14,4 14,20 8,16", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "8", width: "4", height: "8", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { d: "M 18 8 Q 20 12 18 16 M 21 5 Q 24 12 21 19", fill: "none", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  wavefronts: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "12", r: "4", fill: "none", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "12", r: "8", fill: "none", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "12", fill: "none", stroke: "currentColor" })
+  ] }),
+  mach_cone: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "12", r: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "4", x2: "18", y2: "12", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "20", x2: "18", y2: "12", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  beats_graph: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M 2 12 Q 4 6 6 12 Q 8 18 10 12 Q 12 8 14 12 Q 16 16 18 12 Q 20 10 22 12",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5"
+    }
+  ),
+  step_function: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M2 18 L8 18 M8 12 L14 12 M14 6 L20 6", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "2", cy: "18", r: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "18", r: "2", fill: "none", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "12", r: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "14", cy: "12", r: "2", fill: "none", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "14", cy: "6", r: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "6", r: "2", fill: "none", stroke: "currentColor" })
+  ] }),
+  shaded_area: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 20 L4 10 Q12 2 20 10 L20 20 Z", fill: "currentColor", opacity: "0.3" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 10 Q12 2 20 10", fill: "none", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  modulus: /* @__PURE__ */ jsx("polyline", { points: "4,4 12,20 20,4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  exponential: /* @__PURE__ */ jsx("path", { d: "M4 20 Q14 20 20 4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  logarithmic: /* @__PURE__ */ jsx("path", { d: "M4 20 Q4 10 20 4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  axes_3d: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "16", x2: "8", y2: "2", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "16", x2: "22", y2: "16", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "16", x2: "2", y2: "22", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  rod: /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12", stroke: "currentColor", strokeWidth: "6", strokeLinecap: "round" }),
+  hinge: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3.5", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "currentColor" })
+  ] }),
+  slit_double: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "8", stroke: "currentColor", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "11", x2: "12", y2: "13", stroke: "currentColor", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "22", stroke: "currentColor", strokeWidth: "3" })
+  ] }),
+  slit_single: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "9", stroke: "currentColor", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "22", stroke: "currentColor", strokeWidth: "3" })
+  ] }),
+  photon: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M 2 12 Q 5 6 8 12 T 14 12 T 20 12", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "18,8 22,12 18,16", fill: "currentColor" })
+  ] }),
+  nucleus: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", fill: "none", stroke: "currentColor", transform: "rotate(45 12 12)" }),
+    /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "4", fill: "none", stroke: "currentColor", transform: "rotate(-45 12 12)" }),
+    /* @__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" }),
+  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" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "6", x2: "15", y2: "18", stroke: "currentColor", strokeWidth: "2.2" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "12", x2: "21", y2: "12", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  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("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" })
+  ] }),
+  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" })
+  ] }),
+  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" })
+  ] }),
+  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" }),
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "10", width: "14", height: "4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "16", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "17", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "14", r: "1", fill: "currentColor" })
+  ] }),
+  heat_engine: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "6", y: "2", width: "12", height: "4", fill: "#ef4444" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("rect", { x: "6", y: "18", width: "12", height: "4", fill: "#3b82f6" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "6", x2: "12", y2: "8", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "18", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "12", x2: "20", y2: "12", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  conduction_rod: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "thermo-conduction-icon-grad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#ef4444" }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3b82f6" })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "2",
+        y: "8",
+        width: "20",
+        height: "8",
+        fill: "url(#thermo-conduction-icon-grad)",
+        stroke: "currentColor",
+        strokeWidth: "1"
+      }
+    )
+  ] }),
+  pv_axes: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "4", x2: "4", y2: "20", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "4,2 2,6 6,6", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("polygon", { points: "22,20 18,18 18,22", fill: "currentColor" })
+  ] }),
+  thermo_process: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M 4 4 Q 8 16 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "12,12 8,10 10,14", fill: "currentColor" })
+  ] }),
+  carnot_cycle: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M 6 6 Q 12 8 16 12 Q 14 16 10 18 Q 6 14 6 6",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2"
+    }
+  ),
+  maxwell_boltzmann: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "20", x2: "22", y2: "20", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 2 20 Q 8 4 12 12 T 22 20", fill: "none", stroke: "#ef4444", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 2 20 Q 6 10 10 16 T 22 20",
+        fill: "none",
+        stroke: "#3b82f6",
+        strokeWidth: "2",
+        strokeDasharray: "2 2"
+      }
+    )
+  ] }),
+  diatomic_gas: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "12", r: "4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "12", r: "4", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "10", y1: "12", x2: "14", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 8 6 A 6 6 0 0 1 16 6", fill: "none", stroke: "currentColor", strokeWidth: "1" })
+  ] }),
+  random_walk: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("polyline", { points: "2,18 8,12 14,16 20,6", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "2", cy: "18", r: "1.5", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "6", r: "1.5", fill: "currentColor" })
+  ] }),
+  lens_convex: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M 12 2 Q 18 12 12 22 Q 6 12 12 2 Z",
+      fill: "#38bdf8",
+      fillOpacity: "0.4",
+      stroke: "currentColor",
+      strokeWidth: "2"
+    }
+  ),
+  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",
+      fill: "#38bdf8",
+      fillOpacity: "0.4",
+      stroke: "currentColor",
+      strokeWidth: "2"
+    }
+  ),
+  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" })
+  ] }),
+  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" })
+  ] }),
+  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" }),
+  pole_piece: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "2", width: "16", height: "20", fill: "#93c5fd", fillOpacity: "0.4", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("text", { x: "12", y: "16", fontSize: "12", textAnchor: "middle", fill: "currentColor", fontWeight: "bold", children: "N" })
+  ] }),
+  b_field_line: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "10,8 16,12 10,16", fill: "currentColor" })
+  ] }),
+  b_field_curve: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M 4 20 Q 12 2 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polygon", { points: "10,8 14,11 10,14", fill: "currentColor", transform: "rotate(30 12 11)" })
+  ] }),
+  bezier: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M 4 20 Q 4 4 20 4", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "4", y2: "4", stroke: "currentColor", strokeWidth: "1", strokeDasharray: "2 2" }),
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "4", x2: "4", y2: "4", stroke: "currentColor", strokeWidth: "1", strokeDasharray: "2 2" })
+  ] }),
+  current_wire: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("polygon", { points: "15,8 20,12 15,16", fill: "currentColor" })
+  ] }),
+  b_region_in: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "2 2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 8 8 L 16 16 M 16 8 L 8 16", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  b_region_out: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "2 2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" })
+  ] }),
+  bar_magnet: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "8", width: "20", height: "8", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "16", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("text", { x: "7", y: "15", fontSize: "7", fill: "currentColor", fontWeight: "bold", children: "N" }),
+    /* @__PURE__ */ jsx("text", { x: "17", y: "15", fontSize: "7", fill: "currentColor", fontWeight: "bold", children: "S" })
+  ] }),
+  coil: /* @__PURE__ */ jsx("path", { d: "M2 12 C 5 -2, 10 26, 12 12 C 14 -2, 19 26, 22 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinejoin: "round" }),
+  meter: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("text", { x: "12", y: "16", fontSize: "10", fontWeight: "bold", textAnchor: "middle", fill: "currentColor", children: "G" })
+  ] }),
+  ac_source: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 7 12 Q 9.5 8 12 12 T 17 12", fill: "none", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  single_bond: /* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "6", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+  double_bond: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "15", x2: "17", y2: "3", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("line", { x1: "7", y1: "21", x2: "21", y2: "9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
+  ] }),
+  triple_bond: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "16", y2: "0", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "16", x2: "19", y2: "4", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "20", x2: "22", y2: "8", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  wedge_bond: /* @__PURE__ */ jsx("polygon", { points: "4,18 20,4 22,8", fill: "currentColor" }),
+  dash_bond: /* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "6", stroke: "currentColor", strokeWidth: "2.5", strokeDasharray: "3 3" }),
+  benzene: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("polygon", { points: "12,2 20.6,7 20.6,17 12,22 3.4,17 3.4,7", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5", fill: "none", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  cyclohexane: /* @__PURE__ */ jsx("polygon", { points: "12,2 20.6,7 20.6,17 12,22 3.4,17 3.4,7", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+  cyclopentane: /* @__PURE__ */ jsx("polygon", { points: "12,2 22,9.5 18,21 6,21 2,9.5", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+  cyclobutane: /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "14", height: "14", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+  cyclopropane: /* @__PURE__ */ jsx("polygon", { points: "12,4 22,18 2,18", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+  reaction_arrow: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "20", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polyline", { points: "14,6 22,12 14,18", fill: "none", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  equilibrium_arrow: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "9", x2: "20", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("polyline", { points: "14,4 20,9", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "22", y2: "15", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("polyline", { points: "10,20 4,15", fill: "none", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  curved_arrow: /* @__PURE__ */ jsx("path", { d: "M 4 18 Q 12 4 20 18 L 16 16 M 20 18 L 22 14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  resonance_arrow: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polyline", { points: "8,6 2,12 8,18", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("polyline", { points: "16,6 22,12 16,18", fill: "none", stroke: "currentColor", strokeWidth: "2" })
+  ] }),
+  atom: /* @__PURE__ */ jsx("text", { x: "12", y: "18", fontSize: "18", textAnchor: "middle", fill: "currentColor", fontWeight: "bold", fontFamily: "sans-serif", children: "C" }),
+  charge_plus: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "16", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  charge_minus: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: "currentColor", strokeWidth: "1.5" })
+  ] }),
+  radical: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.5", fill: "currentColor" }),
+  lone_pair: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "12", r: "2", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "16", cy: "12", r: "2", fill: "currentColor" })
+  ] }),
+  charge_pos: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "#fecaca", stroke: "#ef4444", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 8v8M8 12h8", stroke: "#ef4444", strokeWidth: "2", strokeLinecap: "round" })
+  ] }),
+  charge_neg: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", fill: "#bfdbfe", stroke: "#3b82f6", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 12h8", stroke: "#3b82f6", strokeWidth: "2", strokeLinecap: "round" })
+  ] }),
+  dipole: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "4", fill: "#fecaca", stroke: "#ef4444" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "4", fill: "#bfdbfe", stroke: "#3b82f6" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "12", x2: "15", y2: "12", stroke: "currentColor", strokeDasharray: "2 2" })
+  ] }),
+  charged_plate_pos: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22", stroke: "#ef4444", strokeWidth: "6" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 6h6M12 3v6 M9 12h6M12 9v6 M9 18h6M12 15v6", stroke: "#fff", strokeWidth: "1" })
+  ] }),
+  charged_plate_neg: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22", stroke: "#3b82f6", strokeWidth: "6" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 6h6 M9 12h6 M9 18h6", stroke: "#fff", strokeWidth: "1" })
+  ] }),
+  gaussian_sphere: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", fill: "#d1fae5", fillOpacity: "0.4", stroke: "#10b981", strokeWidth: "2", strokeDasharray: "3 3" }),
+  gaussian_cylinder: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "4", rx: "7", ry: "2", fill: "none", stroke: "#10b981", strokeWidth: "1.5", strokeDasharray: "2 2" }),
+    /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "20", rx: "7", ry: "2", fill: "none", stroke: "#10b981", strokeWidth: "1.5", strokeDasharray: "2 2" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 4v16M19 4v16", stroke: "#10b981", strokeWidth: "1.5", strokeDasharray: "2 2" })
+  ] }),
+  mirror_plane: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "6", x2: "6", y2: "10", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "6", y2: "16", stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "6", y2: "22", stroke: "currentColor" })
+  ] }),
+  energy_level: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "8", x2: "20", y2: "8", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "16", x2: "20", y2: "16", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("text", { x: "12", y: "13", fontSize: "6", fill: "currentColor", textAnchor: "middle", children: "n" })
+  ] })
+};
+
+// 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";
+      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"}`,
+          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 })
+          ]
+        },
+        t.id
+      );
+    }) })
+  ] }, category.name)) });
+};
+
+// 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 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);
+var needsWaveAmplitude = (t) => [
+  "sine_wave",
+  "standing_wave",
+  "wave_pulse",
+  "damped_wave",
+  "beats_graph",
+  "shm_graph",
+  "energy_graph",
+  "strobe_shm"
+].includes(t);
+var needsWaveLoops = (t) => ["sine_wave", "standing_wave", "shm_graph", "energy_graph", "strobe_shm"].includes(t);
+var needsRollingFlags = (t) => t === "rolling_body";
+var needsCoils = (t) => t === "spring";
+var needsRotation = (t) => ["block", "cart"].includes(t);
+var PropertiesPanel = ({ element, onChange, onDelete, onClose }) => {
+  if (!element) return null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      id: "svg-engine-properties-panel",
+      role: "region",
+      "aria-label": "Element properties",
+      className: "absolute right-6 top-6 w-80 bg-white/95 backdrop-blur rounded-xl shadow-2xl border border-slate-200 flex flex-col p-5 z-30 max-h-[80vh] overflow-y-auto",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center border-b border-slate-100 pb-3 mb-4 sticky top-0 bg-white z-10", children: [
+          /* @__PURE__ */ jsx3("h3", { className: "text-[11px] font-semibold text-blue-700 uppercase tracking-[0.18em]", children: "Properties" }),
+          /* @__PURE__ */ jsx3("button", { type: "button", onClick: onClose, className: "text-slate-400 hover:text-slate-800", children: "\u2715" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+              value: String(element.label || ""),
+              onChange: (e) => onChange("label", e.target.value),
+              placeholder: "Label"
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+              value: String(element.value || ""),
+              onChange: (e) => onChange("value", e.target.value),
+              placeholder: "Value"
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-3", children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "color",
+                value: String(element.color || "#0f172a"),
+                onChange: (e) => onChange("color", e.target.value),
+                className: "h-10 w-full rounded-lg border border-slate-200"
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                className: "px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.strokeWidth || 2),
+                onChange: (e) => onChange("strokeWidth", Number(e.target.value))
+              }
+            )
+          ] }),
+          needsRotation(String(element.type)) && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Rotation (degrees)" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.rotation ?? 0),
+                onChange: (e) => onChange("rotation", Number(e.target.value))
+              }
+            )
+          ] }),
+          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(
+              "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)
+                ),
+                onChange: (e) => onChange("curveHeight", Number(e.target.value))
+              }
+            )
+          ] }),
+          String(element.type) === "bezier" && /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-sm text-slate-700", children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "checkbox",
+                checked: Boolean(element.showArrow),
+                onChange: (e) => onChange("showArrow", e.target.checked)
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Show arrow on curve" })
+          ] }),
+          String(element.type) === "energy_level" && /* @__PURE__ */ jsx3(
+            "input",
+            {
+              className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+              value: String(element.energy ?? ""),
+              onChange: (e) => onChange("energy", e.target.value),
+              placeholder: "Energy (e.g. -13.6 eV)"
+            }
+          ),
+          needsFontSize(String(element.type)) && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Font size" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.fontSize ?? 16),
+                onChange: (e) => onChange("fontSize", Number(e.target.value))
+              }
+            )
+          ] }),
+          needsRotationSize(String(element.type)) && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Size (radius / pivot scale)" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.size ?? 15),
+                onChange: (e) => onChange("size", Number(e.target.value))
+              }
+            )
+          ] }),
+          needsWaveOscSize(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 === "mass_box" ? "Block size" : "Bob radius" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.size ?? (element.type === "mass_box" ? 30 : 15)),
+                onChange: (e) => onChange("size", Number(e.target.value))
+              }
+            )
+          ] }),
+          needsRollingFlags(String(element.type)) && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2 text-sm text-slate-700", children: [
+            /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: Boolean(element.showVelocity),
+                  onChange: (e) => onChange("showVelocity", e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Show velocity (v)" })
+            ] }),
+            /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: Boolean(element.showOmega),
+                  onChange: (e) => onChange("showOmega", e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Show angular velocity (\u03C9)" })
+            ] })
+          ] }),
+          needsCoils(String(element.type)) && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Coils" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.coils ?? 6),
+                onChange: (e) => onChange("coils", Number(e.target.value))
+              }
+            )
+          ] }),
+          String(element.type) === "piston_cylinder" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Compression (0.1\u20130.9)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "range",
+                  min: 0.1,
+                  max: 0.9,
+                  step: 0.05,
+                  className: "w-full",
+                  value: Number(element.compression ?? 0.5),
+                  onChange: (e) => onChange("compression", Number(e.target.value))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-sm text-slate-700", children: [
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: Boolean(element.showHeat),
+                  onChange: (e) => onChange("showHeat", e.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Show heat source (Q)" })
+            ] })
+          ] }),
+          String(element.type) === "heat_engine" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Machine type" }),
+              /* @__PURE__ */ jsxs3(
+                "select",
+                {
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white",
+                  value: String(element.engineType ?? "engine"),
+                  onChange: (e) => onChange("engineType", e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx3("option", { value: "engine", children: "Heat engine" }),
+                    /* @__PURE__ */ jsx3("option", { value: "refrigerator", children: "Refrigerator / pump" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Efficiency (display)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  min: 0,
+                  max: 1,
+                  step: 0.05,
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: Number(element.efficiency ?? 0.4),
+                  onChange: (e) => onChange("efficiency", Number(e.target.value))
+                }
+              )
+            ] })
+          ] }),
+          String(element.type) === "thermo_process" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Process type" }),
+              /* @__PURE__ */ jsxs3(
+                "select",
+                {
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white",
+                  value: String(element.processType ?? "isotherm"),
+                  onChange: (e) => onChange("processType", e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx3("option", { value: "isotherm", children: "Isothermal" }),
+                    /* @__PURE__ */ jsx3("option", { value: "adiabatic", children: "Adiabatic" }),
+                    /* @__PURE__ */ jsx3("option", { value: "isobaric", children: "Isobaric" }),
+                    /* @__PURE__ */ jsx3("option", { value: "isochoric", children: "Isochoric" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Line style" }),
+              /* @__PURE__ */ jsxs3(
+                "select",
+                {
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white",
+                  value: String(element.lineStyle ?? "solid"),
+                  onChange: (e) => onChange("lineStyle", e.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx3("option", { value: "solid", children: "Solid" }),
+                    /* @__PURE__ */ jsx3("option", { value: "dashed", children: "Dashed" }),
+                    /* @__PURE__ */ jsx3("option", { value: "dotted", children: "Dotted" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          String(element.type) === "pv_axes" && /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-3", children: [
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "X label (V)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: String(element.xLabel ?? "V"),
+                  onChange: (e) => onChange("xLabel", e.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Y label (P)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: String(element.yLabel ?? "P"),
+                  onChange: (e) => onChange("yLabel", e.target.value)
+                }
+              )
+            ] })
+          ] }),
+          String(element.type) === "maxwell_boltzmann" && /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-3", children: [
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "T\u2081 (K)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: Number(element.t1 ?? 300),
+                  onChange: (e) => onChange("t1", Number(e.target.value))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "T\u2082 (K)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: Number(element.t2 ?? 600),
+                  onChange: (e) => onChange("t2", Number(e.target.value))
+                }
+              )
+            ] })
+          ] }),
+          String(element.type) === "diatomic_gas" && /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-sm text-slate-700", children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "checkbox",
+                checked: element.showRotations !== false,
+                onChange: (e) => onChange("showRotations", e.target.checked)
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Show rotation DOF" })
+          ] }),
+          String(element.type) === "random_walk" && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Steps" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                min: 2,
+                max: 30,
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.steps ?? 5),
+                onChange: (e) => onChange("steps", Number(e.target.value))
+              }
+            )
+          ] }),
+          needsWaveAmplitude(String(element.type)) && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Amplitude" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 200,
+                step: 1,
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.amplitude ?? 40),
+                onChange: (e) => onChange("amplitude", Number(e.target.value))
+              }
+            )
+          ] }),
+          needsWaveLoops(String(element.type)) && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Loops / waves (n)" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                min: 0.5,
+                max: 20,
+                step: 0.5,
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.loops ?? 2),
+                onChange: (e) => onChange("loops", Number(e.target.value))
+              }
+            )
+          ] }),
+          String(element.type) === "shm_graph" && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Graph function" }),
+            /* @__PURE__ */ jsxs3(
+              "select",
+              {
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white",
+                value: String(element.graphType ?? "x"),
+                onChange: (e) => onChange("graphType", e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx3("option", { value: "x", children: "Position x(t)" }),
+                  /* @__PURE__ */ jsx3("option", { value: "v", children: "Velocity v(t)" }),
+                  /* @__PURE__ */ jsx3("option", { value: "a", children: "Acceleration a(t)" }),
+                  /* @__PURE__ */ jsx3("option", { value: "all", children: "Compare all three" })
+                ]
+              }
+            )
+          ] }),
+          String(element.type) === "energy_graph" && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Domain" }),
+            /* @__PURE__ */ jsxs3(
+              "select",
+              {
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm bg-white",
+                value: String(element.domain ?? "time"),
+                onChange: (e) => onChange("domain", e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx3("option", { value: "time", children: "Versus time (t)" }),
+                  /* @__PURE__ */ jsx3("option", { value: "position", children: "Versus position (x)" })
+                ]
+              }
+            )
+          ] }),
+          String(element.type) === "pendulum" && /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-sm text-slate-700", children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "checkbox",
+                checked: Boolean(element.showForces),
+                onChange: (e) => onChange("showForces", e.target.checked)
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Show force vectors" })
+          ] }),
+          String(element.type) === "phasor" && /* @__PURE__ */ jsxs3("label", { className: "flex items-center gap-2 text-sm text-slate-700", children: [
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "checkbox",
+                checked: Boolean(element.showProjection),
+                onChange: (e) => onChange("showProjection", e.target.checked)
+              }
+            ),
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Show axis projections" })
+          ] }),
+          String(element.type) === "damped_wave" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Damping (b/2m)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  min: 0,
+                  max: 0.1,
+                  step: 5e-3,
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: Number(element.damping ?? 0.015),
+                  onChange: (e) => onChange("damping", Number(e.target.value))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Angular frequency (\u03C9)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  min: 1,
+                  max: 50,
+                  step: 1,
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: Number(element.frequency ?? 10),
+                  onChange: (e) => onChange("frequency", Number(e.target.value))
+                }
+              )
+            ] })
+          ] }),
+          String(element.type) === "beats_graph" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Carrier frequency (avg f)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  min: 5,
+                  max: 50,
+                  step: 1,
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: Number(element.frequency ?? 15),
+                  onChange: (e) => onChange("frequency", Number(e.target.value))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Beat frequency (\u0394f)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  min: 0.1,
+                  max: 10,
+                  step: 0.1,
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: Number(element.beatFreq ?? 2),
+                  onChange: (e) => onChange("beatFreq", Number(e.target.value))
+                }
+              )
+            ] })
+          ] }),
+          String(element.type) === "wavefronts" && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Velocity ratio (v_s / v)" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  min: 0,
+                  max: 0.9,
+                  step: 0.1,
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: Number(element.velocityRatio ?? 0.5),
+                  onChange: (e) => onChange("velocityRatio", Number(e.target.value))
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Rings" }),
+              /* @__PURE__ */ jsx3(
+                "input",
+                {
+                  type: "number",
+                  min: 1,
+                  max: 20,
+                  step: 1,
+                  className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                  value: Number(element.rings ?? 5),
+                  onChange: (e) => onChange("rings", Number(e.target.value))
+                }
+              )
+            ] })
+          ] }),
+          String(element.type) === "mach_cone" && /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium text-slate-600", children: "Mach number (M)" }),
+            /* @__PURE__ */ jsx3(
+              "input",
+              {
+                type: "number",
+                min: 1.05,
+                max: 5,
+                step: 0.1,
+                className: "w-full px-3 py-2 border border-slate-300 rounded-lg text-sm",
+                value: Number(element.machNumber ?? 2),
+                onChange: (e) => onChange("machNumber", Number(e.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              onClick: onDelete,
+              className: "w-full py-2 bg-red-50 text-red-600 hover:bg-red-100 rounded-lg text-sm font-semibold transition",
+              children: "Delete Element"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+// src/editor/JsonModal.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var JsonModal = ({ open, jsonText, setJsonText, onClose, onLoad }) => {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx4("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", children: /* @__PURE__ */ jsxs4("div", { className: "bg-white rounded-lg shadow-xl w-full max-w-2xl flex flex-col max-h-full", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "px-6 py-4 border-b flex justify-between items-center", children: [
+      /* @__PURE__ */ jsx4("h2", { className: "text-lg font-bold text-gray-800", children: "Diagram Data (JSON)" }),
+      /* @__PURE__ */ jsx4("button", { onClick: onClose, className: "text-gray-500 hover:text-gray-800 font-bold", children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "p-6 flex-1 overflow-hidden flex flex-col gap-4", children: /* @__PURE__ */ jsx4("textarea", { value: jsonText, onChange: (e) => setJsonText(e.target.value), className: "w-full flex-1 min-h-[300px] p-4 font-mono text-sm border border-gray-300 rounded-md", spellCheck: "false" }) }),
+    /* @__PURE__ */ jsxs4("div", { className: "px-6 py-4 border-t bg-gray-50 flex justify-end gap-3", children: [
+      /* @__PURE__ */ jsx4("button", { onClick: onClose, className: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 rounded-md transition", children: "Cancel" }),
+      /* @__PURE__ */ jsx4("button", { onClick: onLoad, className: "px-4 py-2 text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 rounded-md transition shadow-sm", children: "Load Diagram" })
+    ] })
+  ] }) });
+};
+
+// src/editor/presets/mechanics.ts
+var mechanics = {
+  name: "Mechanics",
+  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 },
+    { id: 3, type: "vector", x1: 260, y1: 280, x2: 260, y2: 400, label: "mg", value: "", color: "#0f172a", strokeWidth: 2 },
+    { id: 4, type: "vector", x1: 260, y1: 280, x2: 212, y2: 216, label: "N", value: "", color: "#0f172a", strokeWidth: 2 },
+    { id: 5, type: "vector", x1: 260, y1: 280, x2: 180, y2: 340, label: "f", value: "", color: "#0f172a", strokeWidth: 2 },
+    { id: 6, type: "arc", x1: 100, y1: 400, x2: 260, y2: 280, label: "\u03B8", value: "", color: "#0f172a", strokeWidth: 2 },
+    { id: 7, type: "dashed", x1: 260, y1: 280, x2: 308, y2: 344, label: "", value: "", color: "#0f172a", strokeWidth: 2 },
+    { 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 }
+  ],
+  toolCategories: [
+    {
+      name: "Sketch and forces",
+      tools: [
+        { id: "select", name: "Select" },
+        { id: "string", name: "String / Line" },
+        { id: "spring", name: "Spring" },
+        { id: "vector", name: "Force Vector" },
+        { id: "dashed", name: "Dashed Line" },
+        { id: "dimension", name: "Dimension" },
+        { id: "surface", name: "Rigid Surface" }
+      ]
+    },
+    {
+      name: "Rigid bodies",
+      tools: [
+        { id: "wedge", name: "Wedge / Incline" },
+        { id: "axes", name: "Axes / Frame" },
+        { id: "block", name: "Mass / Block" },
+        { id: "cart", name: "Cart / Vehicle" },
+        { id: "particle", name: "Point Mass" },
+        { id: "disk", name: "Disk / Sphere" },
+        { id: "rod", name: "Rod / Beam" },
+        { id: "pulley", name: "Pulley" }
+      ]
+    },
+    {
+      name: "Points and labels",
+      tools: [
+        { id: "pivot", name: "Pivot / Hinge" },
+        { id: "com", name: "Center of Mass" },
+        { id: "arc", name: "Angle / Arc" },
+        { id: "text", name: "Label" }
+      ]
+    }
+  ]
+};
+
+// src/editor/presets/circuit.ts
+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 }
+  ],
+  toolCategories: [
+    {
+      name: "Circuit",
+      tools: [
+        { id: "select", name: "Select / Move" },
+        { id: "wire", name: "Wire" },
+        { id: "resistor", name: "Resistor" },
+        { id: "capacitor", name: "Capacitor" },
+        { id: "inductor", name: "Inductor" },
+        { id: "diode", name: "Diode" },
+        { id: "battery", name: "Battery" },
+        { id: "meter_v", name: "Voltmeter" },
+        { id: "meter_a", name: "Ammeter" },
+        { id: "ground", name: "Ground" },
+        { id: "text", name: "Text Label" }
+      ]
+    }
+  ]
+};
+
+// src/editor/presets/thermo.ts
+var thermo = {
+  name: "Thermodynamics",
+  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: "piston_cylinder",
+      x1: 80,
+      y1: 100,
+      x2: 240,
+      y2: 260,
+      compression: 0.6,
+      showHeat: true,
+      color: "#0ea5e9",
+      strokeWidth: 2,
+      label: "Gas Expansion"
+    },
+    { id: 102, type: "text", x1: 380, y1: 40, x2: 380, y2: 40, label: "2. Heat Engine & 2nd Law", fontSize: 20, color: "#1e293b" },
+    {
+      id: 2,
+      type: "heat_engine",
+      x1: 440,
+      y1: 80,
+      x2: 540,
+      y2: 260,
+      engineType: "engine",
+      efficiency: 0.4,
+      color: "#10b981",
+      strokeWidth: 2,
+      label: "Carnot Engine"
+    },
+    { 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,
+      color: "#1e293b",
+      strokeWidth: 2,
+      label: "P vs V",
+      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: 5,
+      type: "maxwell_boltzmann",
+      x1: 80,
+      y1: 520,
+      x2: 320,
+      y2: 380,
+      t1: 300,
+      t2: 600,
+      color: "#8b5cf6",
+      strokeWidth: 2,
+      label: "f(v) vs v"
+    },
+    {
+      id: 6,
+      type: "diatomic_gas",
+      x1: 400,
+      y1: 440,
+      x2: 500,
+      y2: 440,
+      color: "#f59e0b",
+      strokeWidth: 2,
+      label: "Diatomic (5 DOF)",
+      showRotations: true
+    },
+    { id: 105, type: "text", x1: 700, y1: 340, x2: 700, y2: 340, label: "5. Thermal Conduction", fontSize: 20, color: "#1e293b" },
+    {
+      id: 7,
+      type: "conduction_rod",
+      x1: 700,
+      y1: 420,
+      x2: 900,
+      y2: 460,
+      color: "#3b82f6",
+      strokeWidth: 2,
+      label: "L, k, A"
+    }
+  ],
+  toolCategories: [
+    {
+      name: "Basics",
+      tools: [
+        { id: "select", name: "Select" },
+        { id: "point", name: "Node / Label" },
+        { id: "line", name: "Line / Axis" },
+        { id: "text", name: "Text Box" }
+      ]
+    },
+    {
+      name: "Systems",
+      tools: [
+        { id: "piston_cylinder", name: "Piston & Gas" },
+        { id: "heat_engine", name: "Heat Engine" },
+        { id: "conduction_rod", name: "Thermal Rod" }
+      ]
+    },
+    {
+      name: "PV Diagrams",
+      tools: [
+        { id: "pv_axes", name: "P-V Axes" },
+        { id: "thermo_process", name: "Thermodynamic Path" },
+        { id: "carnot_cycle", name: "Carnot Cycle" }
+      ]
+    },
+    {
+      name: "KTG",
+      tools: [
+        { id: "maxwell_boltzmann", name: "Maxwell Dist." },
+        { id: "diatomic_gas", name: "Diatomic DOF" },
+        { id: "random_walk", name: "Random Walk" }
+      ]
+    }
+  ]
+};
+
+// src/editor/presets/optical.ts
+var optical = {
+  name: "Optical",
+  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" }
+      ]
+    }
+  ]
+};
+
+// src/editor/presets/magnetism.ts
+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 }
+  ],
+  toolCategories: [
+    {
+      name: "Basics",
+      tools: [
+        { id: "select", name: "Select/Move" },
+        { id: "point", name: "Point/Node" },
+        { id: "line", name: "Solid Line" },
+        { id: "vector", name: "Vector/Force" },
+        { id: "text", name: "Text Label" }
+      ]
+    },
+    {
+      name: "Magnetism",
+      tools: [
+        { id: "axes_3d", name: "3D Axes (x,y,z)" },
+        { id: "angle", name: "Angle/Arc" },
+        { id: "b_field_line", name: "B-Line (Straight)" },
+        { id: "b_field_curve", name: "B-Line (Curved)" },
+        { id: "bezier", name: "Bezier Curve" },
+        { id: "pole_piece", name: "Pole Piece (N/S)" },
+        { id: "b_region_in", name: "B-Field (IN)" },
+        { id: "b_region_out", name: "B-Field (OUT)" },
+        { id: "current_wire", name: "Wire (with I)" }
+      ]
+    },
+    {
+      name: "Magnets & circuits",
+      tools: [
+        { id: "bar_magnet", name: "Bar Magnet" },
+        { id: "coil", name: "Coil/Inductor" },
+        { id: "charge_plus", name: "+ Charge" },
+        { id: "charge_minus", name: "- Charge" },
+        { id: "resistor", name: "Resistor" },
+        { id: "capacitor", name: "Capacitor" },
+        { id: "ac_source", name: "AC Source" },
+        { id: "meter", name: "Galvano/Meter" },
+        { id: "ground", name: "Ground" }
+      ]
+    },
+    {
+      name: "Drawing",
+      tools: [
+        { id: "circle", name: "Circle/Loop" },
+        { id: "axes", name: "2D Axes" }
+      ]
+    }
+  ]
+};
+
+// src/editor/presets/lightTopics.ts
+var LIGHT_TOPICS = [
+  {
+    name: "Ch 34: Lens Combination (JEE Classic)",
+    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" },
+      { id: 3, type: "lens_concave", x1: 500, y1: 150, x2: 500, y2: 450, color: "#38bdf8", strokeWidth: 2, label: "f\u2082 = -10cm" },
+      { id: 4, type: "ray", x1: 50, y1: 200, x2: 300, y2: 200, color: "#ef4444", strokeWidth: 2 },
+      { id: 5, type: "ray", x1: 50, y1: 400, x2: 300, y2: 400, color: "#ef4444", strokeWidth: 2 },
+      { id: 6, type: "ray", x1: 300, y1: 200, x2: 500, y2: 266, color: "#ef4444", strokeWidth: 2 },
+      { id: 7, type: "ray", x1: 300, y1: 400, x2: 500, y2: 334, color: "#ef4444", strokeWidth: 2 },
+      { id: 8, type: "ray", x1: 500, y1: 266, x2: 800, y2: 266, color: "#ef4444", strokeWidth: 2 },
+      { 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" }
+    ]
+  },
+  {
+    name: "Ch 34: 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 },
+      { id: 3, type: "point", x1: 400, y1: 300, x2: 400, y2: 300, label: "C", color: "#64748b" },
+      { id: 4, type: "point", x1: 500, y1: 300, x2: 500, y2: 300, label: "F", color: "#64748b" },
+      { id: 5, type: "vector", x1: 300, y1: 300, x2: 300, y2: 200, label: "O", color: "#10b981", strokeWidth: 3 },
+      { id: 6, type: "ray", x1: 300, y1: 200, x2: 600, y2: 200, color: "#ef4444", strokeWidth: 2 },
+      { id: 7, type: "ray", x1: 600, y1: 200, x2: 400, y2: 400, color: "#ef4444", strokeWidth: 2 },
+      { id: 8, type: "ray", x1: 300, y1: 200, x2: 400, y2: 300, color: "#3b82f6", strokeWidth: 2 },
+      { id: 9, type: "ray", x1: 400, y1: 300, x2: 600, y2: 500, color: "#3b82f6", strokeWidth: 2 },
+      { id: 10, type: "ray", x1: 600, y1: 500, x2: 450, y2: 350, color: "#3b82f6", strokeWidth: 2 },
+      { id: 11, type: "vector", x1: 450, y1: 300, x2: 450, y2: 350, label: "I", color: "#f59e0b", strokeWidth: 3 }
+    ]
+  },
+  {
+    name: "Ch 34: 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: 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: 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)",
+    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: 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 },
+      { id: 10, type: "text", x1: 250, y1: 370, x2: 250, y2: 370, label: "\u0394x = d sin \u03B8", color: "#ef4444", fontSize: 18 },
+      { id: 11, type: "text", x1: 450, y1: 280, x2: 450, y2: 280, label: "D", color: "#64748b", fontSize: 20 },
+      { id: 12, type: "line", x1: 720, y1: 300, x2: 720, y2: 150, lineStyle: "solid", color: "#64748b", strokeWidth: 2 },
+      { id: 13, type: "text", x1: 740, y1: 225, x2: 740, y2: 225, label: "y", color: "#64748b", fontSize: 18 }
+    ]
+  },
+  {
+    name: "Ch 36: 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 },
+      { id: 3, type: "line", x1: 100, y1: 300, x2: 700, y2: 300, lineStyle: "dashed", color: "#94a3b8", strokeWidth: 2 },
+      { id: 4, type: "photon", x1: 100, y1: 220, x2: 300, y2: 220, color: "#8b5cf6", strokeWidth: 2 },
+      { id: 5, type: "photon", x1: 100, y1: 380, x2: 300, y2: 380, color: "#8b5cf6", strokeWidth: 2 },
+      { id: 6, type: "ray", x1: 300, y1: 220, x2: 700, y2: 300, color: "#ef4444", strokeWidth: 2 },
+      { 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" }
+    ]
+  }
+];
+
+// src/editor/presets/light.ts
+var light = {
+  name: "Light",
+  elements: LIGHT_TOPICS[0].elements,
+  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" }
+      ]
+    }
+  ]
+};
+
+// 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",
+  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: "strobe_shm",
+      x1: 120,
+      y1: 80,
+      x2: 120,
+      y2: 280,
+      amplitude: 60,
+      loops: 1,
+      color: "#f59e0b",
+      strokeWidth: 2,
+      label: "Motion"
+    },
+    {
+      id: 2,
+      type: "shm_graph",
+      x1: 260,
+      y1: 180,
+      x2: 460,
+      y2: 180,
+      amplitude: 60,
+      loops: 1,
+      graphType: "all",
+      color: "#1e293b",
+      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: 3,
+      type: "pendulum",
+      x1: 600,
+      y1: 80,
+      x2: 660,
+      y2: 220,
+      label: "m",
+      color: "#0ea5e9",
+      strokeWidth: 2,
+      size: 15,
+      showForces: true
+    },
+    {
+      id: 4,
+      type: "phasor",
+      x1: 800,
+      y1: 150,
+      x2: 860,
+      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: 5,
+      type: "energy_graph",
+      x1: 80,
+      y1: 460,
+      x2: 280,
+      y2: 460,
+      amplitude: 80,
+      domain: "time",
+      color: "#1e293b",
+      strokeWidth: 2,
+      label: "U(t) & K(t)"
+    },
+    {
+      id: 6,
+      type: "vane_liquid",
+      x1: 400,
+      y1: 380,
+      x2: 480,
+      y2: 380,
+      color: "#64748b",
+      strokeWidth: 2,
+      label: "Damping (b)"
+    },
+    { 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,
+      type: "torsion_pendulum",
+      x1: 640,
+      y1: 320,
+      x2: 640,
+      y2: 480,
+      color: "#ec4899",
+      strokeWidth: 2,
+      label: "Torsion Pendulum"
+    }
+  ],
+  toolCategories: [
+    {
+      name: "Basics",
+      tools: [
+        { id: "select", name: "Select" },
+        { id: "point", name: "Point/Node" },
+        { id: "line", name: "Line / Axis" },
+        { id: "vector", name: "Vector" },
+        { id: "text", name: "Text Label" }
+      ]
+    },
+    {
+      name: "Oscillations",
+      tools: [
+        { id: "spring", name: "Spring" },
+        { id: "mass_box", name: "Mass Block" },
+        { id: "pendulum", name: "Pendulum" },
+        { id: "torsion_pendulum", name: "Torsion Pendulum" },
+        { id: "vane_liquid", name: "Damping Vane" },
+        { id: "phasor", name: "Phasor" },
+        { id: "damped_wave", name: "Damped SHM" }
+      ]
+    },
+    {
+      name: "Graphs & Waves",
+      tools: [
+        { id: "sine_wave", name: "Sine Wave" },
+        { id: "standing_wave", name: "Standing Wave" },
+        { id: "wave_pulse", name: "Wave Pulse" },
+        { id: "shm_graph", name: "SHM Kinematics" },
+        { id: "energy_graph", name: "Energy (U/K)" },
+        { id: "strobe_shm", name: "Strobe Motion" },
+        { id: "wall", name: "Rigid Boundary" }
+      ]
+    },
+    {
+      name: "Sound & Gases",
+      tools: [
+        { id: "speaker", name: "Speaker" },
+        { id: "tuning_fork", name: "Tuning Fork" },
+        { id: "wavefronts", name: "Wavefronts" },
+        { id: "mach_cone", name: "Mach Cone" },
+        { id: "beats_graph", name: "Beats Envelope" }
+      ]
+    }
+  ]
+};
+
+// src/editor/presets/rotation.ts
+var rotation = {
+  name: "Rotation",
+  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,
+      type: "rolling_body",
+      x1: 160,
+      y1: 390,
+      x2: 200,
+      y2: 390,
+      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 }
+  ],
+  toolCategories: [
+    {
+      name: "Basics",
+      tools: [
+        { id: "select", name: "Select" },
+        { id: "line", name: "Line / Axis" },
+        { id: "vector", name: "Vector" },
+        { id: "text", name: "Text Label" }
+      ]
+    },
+    {
+      name: "Mass & Momentum",
+      tools: [
+        { id: "point_mass", name: "Point Mass" },
+        { id: "block_mass", name: "Block/Mass" },
+        { id: "com_indicator", name: "Center of Mass" },
+        { id: "system_boundary", name: "System Bound" },
+        { id: "dashed_path", name: "Trajectory" },
+        { id: "rocket", name: "Rocket (Varying)" }
+      ]
+    },
+    {
+      name: "Rigid Bodies",
+      tools: [
+        { id: "uniform_rod", name: "Uniform Rod" },
+        { id: "solid_disk", name: "Solid Disk/Sphere" },
+        { id: "hoop_ring", name: "Hoop/Ring" },
+        { id: "rolling_body", name: "Rolling Object" }
+      ]
+    },
+    {
+      name: "Mechanics",
+      tools: [
+        { id: "pivot", name: "Pivot / Hinge" },
+        { id: "inclined_wedge", name: "Inclined Plane" },
+        { id: "pulley", name: "Pulley System" },
+        { id: "spring", name: "Spring" },
+        { id: "curve_arrow", name: "Angular Vector (\u03C9/\u03C4)" }
+      ]
+    }
+  ]
+};
+
+// 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 graph = {
+  name: "Graph",
+  elements: initialElements,
+  toolCategories: [
+    {
+      name: "Basic",
+      tools: [
+        { id: "select", name: "Select/Move" },
+        { id: "point", name: "Point/Node" },
+        { id: "line", name: "Solid Line" },
+        { id: "dashed_line", name: "Dashed Line" },
+        { id: "vector", name: "Vector/Arrow" },
+        { id: "angle", name: "Angle/Vector" },
+        { id: "axes", name: "X-Y Axes" },
+        { id: "text", name: "Text Label" }
+      ]
+    },
+    {
+      name: "Physics",
+      tools: [
+        { id: "charge_plus", name: "+ Charge" },
+        { id: "charge_minus", name: "- Charge" },
+        { id: "capacitor", name: "Capacitor" },
+        { id: "ground", name: "Ground" }
+      ]
+    },
+    {
+      name: "Shapes",
+      tools: [
+        { id: "rectangle", name: "Rectangle" },
+        { id: "circle", name: "Circle" },
+        { id: "ellipse", name: "Ellipse" }
+      ]
+    },
+    {
+      name: "Curves",
+      tools: [
+        { id: "parabola_v", name: "Parabola (V)" },
+        { id: "parabola_h", name: "Parabola (H)" },
+        { id: "hyperbola", name: "Hyperbola" },
+        { id: "modulus", name: "Modulus |x|" },
+        { id: "step_function", name: "Step [x]" },
+        { id: "shaded_area", name: "Area Graph" },
+        { id: "exponential", name: "Exponential" },
+        { id: "logarithmic", name: "Logarithmic" },
+        { id: "sine_wave", name: "Sine Wave" }
+      ]
+    },
+    {
+      name: "Mechanical",
+      tools: [{ id: "spring", name: "Spring" }]
+    }
+  ]
+};
+
+// src/editor/presets/electrostatics.ts
+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" }
+  ],
+  toolCategories: [
+    {
+      name: "Basics",
+      tools: [
+        { id: "select", name: "Select/Move" },
+        { id: "point", name: "Point" },
+        { id: "line", name: "Line" },
+        { id: "vector", name: "Vector" },
+        { id: "text", name: "Text Label" }
+      ]
+    },
+    {
+      name: "Electrostatics",
+      tools: [
+        { id: "charge_pos", name: "+ Charge" },
+        { id: "charge_neg", name: "- Charge" },
+        { id: "dipole", name: "Dipole" },
+        { id: "charged_plate_pos", name: "+ Plate" },
+        { id: "charged_plate_neg", name: "- Plate" },
+        { id: "gaussian_sphere", name: "Gauss Sphere" },
+        { id: "gaussian_cylinder", name: "Gauss Cyl" }
+      ]
+    },
+    {
+      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" }
+      ]
+    },
+    {
+      name: "Modern Phys",
+      tools: [
+        { id: "photon", name: "Photon" },
+        { id: "slit_double", name: "Double Slit" },
+        { id: "energy_level", name: "Energy Lvl" }
+      ]
+    }
+  ]
+};
+
+// src/editor/presets/chemistry.ts
+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: "" }
+  ],
+  toolCategories: [
+    {
+      name: "Chemistry",
+      tools: [
+        { id: "select", name: "Select/Move" },
+        { id: "single_bond", name: "Single Bond" },
+        { id: "double_bond", name: "Double Bond" },
+        { id: "triple_bond", name: "Triple Bond" },
+        { id: "wedge_bond", name: "Wedge (Up)" },
+        { id: "dash_bond", name: "Dash (Down)" }
+      ]
+    },
+    {
+      name: "Arrows",
+      tools: [
+        { id: "curved_arrow", name: "Mechanism" },
+        { id: "reaction_arrow", name: "Reaction" },
+        { id: "equilibrium_arrow", name: "Equilibrium" },
+        { id: "resonance_arrow", name: "Resonance" }
+      ]
+    },
+    {
+      name: "Rings",
+      tools: [
+        { id: "benzene", name: "Benzene" },
+        { id: "cyclohexane", name: "Cyclohexane" },
+        { id: "cyclopentane", name: "Cyclopentane" },
+        { id: "cyclobutane", name: "Cyclobutane" },
+        { id: "cyclopropane", name: "Cyclopropane" }
+      ]
+    },
+    {
+      name: "Symbols",
+      tools: [
+        { id: "atom", name: "Atom/Group" },
+        { id: "charge_plus", name: "Pos. Charge" },
+        { id: "charge_minus", name: "Neg. Charge" },
+        { id: "radical", name: "Radical" },
+        { id: "lone_pair", name: "Lone Pair" },
+        { id: "text", name: "Plain Text" }
+      ]
+    }
+  ]
+};
+
+// 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
+};
+
+// 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,
+  toolCategories,
+  preset,
+  enablePresetSwitch = true,
+  onPresetChange,
+  onChange,
+  viewMode,
+  embedded = false,
+  documentTitle,
+  hideDocumentTitle = false,
+  onExport
+}, ref) {
+  const [selectedPreset, setSelectedPreset] = useState2(preset ?? "mechanics");
+  const isPresetExternallyControlled = preset !== void 0 && typeof onPresetChange === "function";
+  useEffect2(() => {
+    if (isPresetExternallyControlled && preset) {
+      setSelectedPreset(preset);
+    }
+  }, [preset, isPresetExternallyControlled]);
+  const activePresetKey = isPresetExternallyControlled ? preset ?? selectedPreset : selectedPreset;
+  const activePreset = presets[activePresetKey] ?? defaultPreset;
+  const [lightTopicIndex, setLightTopicIndex] = useState2(0);
+  useEffect2(() => {
+    setLightTopicIndex(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]);
+  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]);
+  useEffect2(() => {
+    if (!state.selectedId) {
+      state.setShowProperties(false);
+    }
+  }, [state.selectedId, state.setShowProperties]);
+  const categories = toolCategories ?? activePreset.toolCategories;
+  useImperativeHandle(
+    ref,
+    () => ({
+      getData: () => state.elements,
+      setData: (els) => state.setElements(els),
+      clear: () => state.setElements([])
+    }),
+    [state.elements, state.setElements]
+  );
+  const displayTitle = documentTitle ?? `${activePreset.name} Editor`;
+  const handleCopyJson = () => {
+    const json = JSON.stringify(state.elements, null, 2);
+    onExport?.({ elements: state.elements, json });
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+      void navigator.clipboard.writeText(json);
+    }
+  };
+  const updateSelected = (key, value) => {
+    state.setElements((els) => els.map((el) => el.id === state.selectedId ? { ...el, [key]: value } : el));
+  };
+  const deleteSelected = () => {
+    if (!state.selectedId) return;
+    state.setElements((els) => els.filter((el) => el.id !== state.selectedId));
+    state.setSelectedId(null);
+    state.setShowProperties(false);
+  };
+  const rootClass = embedded ? "flex flex-col h-full min-h-0 w-full bg-white text-gray-900 font-sans" : "flex flex-col h-screen w-full bg-white text-gray-900 font-sans";
+  const headerButtonBase = "text-xs md:text-sm px-2.5 md:px-3.5 py-2 rounded-lg font-medium transition border border-transparent";
+  return /* @__PURE__ */ jsxs5("div", { className: rootClass, children: [
+    /* @__PURE__ */ jsxs5("header", { className: "border-b border-slate-200 bg-white/95 backdrop-blur flex items-center justify-between px-3 md:px-6 py-2 shadow-sm z-20 shrink-0 gap-2 min-w-0", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 md:gap-3 min-w-0", children: [
+        enablePresetSwitch && /* @__PURE__ */ jsxs5("div", { className: "relative shrink-0", children: [
+          /* @__PURE__ */ jsx5(
+            "select",
+            {
+              value: activePresetKey,
+              onChange: (e) => {
+                const next = e.target.value;
+                if (!isPresetExternallyControlled) {
+                  setSelectedPreset(next);
+                }
+                onPresetChange?.(next);
+              },
+              className: "appearance-none text-xs md:text-sm pl-3 pr-8 py-2 rounded-full border border-slate-200 bg-slate-50 text-slate-700 shadow-sm hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-200",
+              title: "Switch preset",
+              children: Object.keys(presets).map((key) => /* @__PURE__ */ jsx5("option", { value: key, children: presets[key].name }, key))
+            }
+          ),
+          /* @__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: [
+          /* @__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))
+            }
+          ),
+          /* @__PURE__ */ jsx5("span", { className: "pointer-events-none absolute inset-y-0 right-2 flex items-center text-slate-500 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 })
+      ] }),
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: `flex gap-1.5 md:gap-3 items-center flex-wrap justify-end ${hideDocumentTitle ? "ml-auto w-full" : "ml-auto"}`,
+          children: [
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: handleCopyJson,
+                className: `${headerButtonBase} text-slate-700 hover:bg-emerald-50 hover:text-emerald-700`,
+                children: "Copy JSON"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  state.setJsonText(JSON.stringify(state.elements, null, 2));
+                  state.setShowJsonModal(true);
+                },
+                className: `${headerButtonBase} text-slate-700 hover:bg-blue-50 hover:text-blue-700`,
+                children: "Export/Import"
+              }
+            ),
+            state.selectedId != null && !state.isViewMode && /* @__PURE__ */ jsxs5(
+              "button",
+              {
+                type: "button",
+                onClick: () => state.setShowProperties((open) => !open),
+                className: `${headerButtonBase} inline-flex items-center gap-1.5 ${state.showProperties ? "bg-violet-100 text-violet-800 border-violet-200" : "text-slate-700 hover:bg-violet-50 hover:text-violet-800"}`,
+                title: state.showProperties ? "Hide properties" : "Edit properties",
+                "aria-expanded": state.showProperties,
+                "aria-controls": "svg-engine-properties-panel",
+                children: [
+                  /* @__PURE__ */ jsx5("svg", { className: "w-4 h-4 shrink-0", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx5(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx5("span", { className: "hidden sm:inline", children: "Properties" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  state.setIsViewMode(!state.isViewMode);
+                  state.setSelectedId(null);
+                  state.setTool("select");
+                },
+                className: `${headerButtonBase} ${state.isViewMode ? "bg-blue-100 text-blue-800 border-blue-200" : "text-slate-700 hover:bg-blue-50 hover:text-blue-700"}`,
+                children: state.isViewMode ? "Exit Preview" : "Preview Mode"
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-1 overflow-hidden min-h-0", children: [
+      !state.isViewMode && /* @__PURE__ */ jsx5(Toolbar, { categories, tool: state.tool, onSelect: (id) => {
+        state.setTool(id);
+        state.setSelectedId(null);
+      } }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex-1 relative overflow-hidden bg-slate-50 min-h-0", children: [
+        /* @__PURE__ */ jsx5(
+          Renderer,
+          {
+            svgRef: state.svgRef,
+            className: "w-full h-full",
+            elements: state.elements,
+            drawing: state.drawing,
+            selectedId: state.selectedId,
+            viewMode: state.isViewMode,
+            onBackgroundMouseDown: state.isViewMode ? void 0 : state.handleMouseDown,
+            onBackgroundMouseMove: state.isViewMode ? void 0 : state.handleMouseMove,
+            onBackgroundMouseUp: state.isViewMode ? void 0 : state.handleMouseUp,
+            onBackgroundMouseLeave: state.isViewMode ? void 0 : state.handleMouseUp,
+            onElementMouseDown: state.onElementMouseDown
+          }
+        ),
+        state.showProperties && state.selectedId && !state.isViewMode && /* @__PURE__ */ jsx5(
+          PropertiesPanel,
+          {
+            element: state.selectedElement,
+            onChange: updateSelected,
+            onDelete: deleteSelected,
+            onClose: () => state.setShowProperties(false)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx5(
+      JsonModal,
+      {
+        open: state.showJsonModal,
+        jsonText: state.jsonText,
+        setJsonText: state.setJsonText,
+        onClose: () => state.setShowJsonModal(false),
+        onLoad: () => {
+          try {
+            state.setElements(JSON.parse(state.jsonText));
+            state.setShowJsonModal(false);
+          } catch {
+            alert("Invalid JSON format");
+          }
+        }
+      }
+    )
+  ] });
+});
+
+// src/editor/EditorWindow.tsx
+import { forwardRef as forwardRef2, useCallback, useImperativeHandle as useImperativeHandle2, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var positionStyle = (p) => {
+  const pad = 16;
+  switch (p) {
+    case "top-left":
+      return { top: pad, left: pad };
+    case "top-right":
+      return { top: pad, right: pad };
+    case "bottom-left":
+      return { bottom: pad, left: pad };
+    case "bottom-right":
+      return { bottom: pad, right: pad };
+    case "center":
+      return { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+    default:
+      return { top: pad, right: pad };
+  }
+};
+var EditorWindow = forwardRef2(function EditorWindow2({
+  mode = "floating",
+  title = "Diagram editor",
+  startMinimized = false,
+  position = "top-right",
+  width = "min(960px, 92vw)",
+  height = "min(640px, 78vh)",
+  onChange,
+  onExport,
+  onShellMinimize,
+  onShellMaximize,
+  onShellClose,
+  documentTitle,
+  ...editorProps
+}, ref) {
+  const editorRef = useRef2(null);
+  const [minimized, setMinimized] = useState3(startMinimized);
+  const [maximized, setMaximized] = useState3(false);
+  const [closed, setClosed] = useState3(false);
+  const [dragOffset, setDragOffset] = useState3({ x: 0, y: 0 });
+  const dragRef = useRef2(null);
+  const shellRef = useRef2(null);
+  useImperativeHandle2(
+    ref,
+    () => ({
+      getData: () => editorRef.current?.getData() ?? [],
+      setData: (els) => editorRef.current?.setData(els),
+      clear: () => editorRef.current?.clear(),
+      minimize: () => {
+        setMinimized(true);
+        setMaximized(false);
+      },
+      maximize: () => {
+        setMinimized(false);
+        setMaximized(true);
+      },
+      restore: () => {
+        setMinimized(false);
+        setMaximized(false);
+      },
+      close: () => setClosed(true),
+      open: () => setClosed(false)
+    }),
+    []
+  );
+  const handleExport = useCallback(
+    (payload) => {
+      onExport?.(payload);
+    },
+    [onExport]
+  );
+  const onHeaderPointerDown = (e) => {
+    if (mode !== "floating" || maximized) return;
+    e.preventDefault();
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      ox: dragOffset.x,
+      oy: dragOffset.y
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onHeaderPointerMove = (e) => {
+    if (!dragRef.current || mode !== "floating" || maximized) return;
+    const dx = e.clientX - dragRef.current.startX;
+    const dy = e.clientY - dragRef.current.startY;
+    setDragOffset({
+      x: dragRef.current.ox + dx,
+      y: dragRef.current.oy + dy
+    });
+  };
+  const onHeaderPointerUp = (e) => {
+    dragRef.current = null;
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+  const floatingShellStyle = useMemo3(() => {
+    if (mode !== "floating") return {};
+    const transform = position === "center" ? `translate(calc(-50% + ${dragOffset.x}px), calc(-50% + ${dragOffset.y}px))` : `translate(${dragOffset.x}px, ${dragOffset.y}px)`;
+    const base = {
+      position: "fixed",
+      zIndex: 9999,
+      display: closed ? "none" : "flex",
+      flexDirection: "column",
+      background: "#fff",
+      borderRadius: "12px",
+      boxShadow: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+      border: "1px solid #e2e8f0",
+      overflow: "hidden",
+      transform
+    };
+    if (maximized) {
+      return {
+        ...base,
+        inset: 16,
+        width: "auto",
+        height: "auto",
+        maxWidth: "none",
+        maxHeight: "none",
+        transform: `translate(${dragOffset.x}px, ${dragOffset.y}px)`
+      };
+    }
+    const minimizedH = minimized ? "auto" : void 0;
+    return {
+      ...base,
+      ...positionStyle(position),
+      width,
+      height: minimized ? minimizedH : height,
+      maxHeight: minimized ? "none" : "90vh",
+      maxWidth: "96vw"
+    };
+  }, [mode, closed, maximized, minimized, position, width, height, dragOffset]);
+  if (mode === "inline") {
+    return /* @__PURE__ */ jsx6("div", { className: "flex flex-col bg-white rounded-lg border border-gray-200 overflow-hidden", style: { width, height }, children: /* @__PURE__ */ jsx6(
+      Editor,
+      {
+        ref: editorRef,
+        ...editorProps,
+        embedded: true,
+        documentTitle: documentTitle ?? title,
+        onChange,
+        onExport: handleExport
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs6("div", { ref: shellRef, style: floatingShellStyle, className: "font-sans text-gray-900", children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: "h-11 shrink-0 flex items-center justify-between px-3 border-b border-gray-100 bg-slate-50 cursor-grab active:cursor-grabbing select-none",
+        onPointerDown: onHeaderPointerDown,
+        onPointerMove: onHeaderPointerMove,
+        onPointerUp: onHeaderPointerUp,
+        onPointerCancel: onHeaderPointerUp,
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: "text-sm font-semibold text-slate-800 truncate pr-2", children: title }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 shrink-0", children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "p-1.5 rounded hover:bg-slate-200 text-slate-600",
+                title: minimized ? "Expand" : "Minimize",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setMinimized((m) => !m);
+                  if (!minimized) setMaximized(false);
+                  onShellMinimize?.();
+                },
+                children: minimized ? "\u25A2" : "\u2212"
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "p-1.5 rounded hover:bg-slate-200 text-slate-600",
+                title: maximized ? "Restore" : "Maximize",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setMaximized((m) => !m);
+                  if (!maximized) setMinimized(false);
+                  onShellMaximize?.();
+                },
+                children: "\u25A1"
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "p-1.5 rounded hover:bg-red-100 text-red-600",
+                title: "Close",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setClosed(true);
+                  onShellClose?.();
+                },
+                children: "\xD7"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: "flex-1 min-h-0 overflow-hidden flex flex-col",
+        style: minimized ? { maxHeight: 0, opacity: 0, overflow: "hidden", pointerEvents: "none" } : void 0,
+        "aria-hidden": minimized,
+        children: /* @__PURE__ */ jsx6(
+          Editor,
+          {
+            ref: editorRef,
+            ...editorProps,
+            embedded: true,
+            hideDocumentTitle: true,
+            documentTitle,
+            onChange,
+            onExport: handleExport
+          }
+        )
+      }
+    ),
+    minimized && /* @__PURE__ */ jsx6("div", { className: "px-3 py-2 text-xs text-slate-500 border-t border-gray-100 bg-white", children: "Editor minimized \u2014 click \u25A2 on the bar to expand." })
+  ] });
+});
+export {
+  Editor,
+  EditorWindow,
+  presets
+};