@xom11/whiteboard 0.10.1 → 0.24.0

package/dist/chunk-TOOHCAWP.mjs

@@ -0,0 +1,1167 @@
+"use client";
+import { createEmptyState, listObjects } from './chunk-3KBL77M6.mjs';
+import { createStore, getKind } from './chunk-VRWZILTG.mjs';
+import * as React2 from 'react';
+import React2__default, { createContext, useRef, useReducer, useCallback, useEffect, useMemo, useContext, useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+function CloseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+  ] });
+}
+function LeftPanelShell(props) {
+  const { title, icon, onClose, isDark, tabs, activeTab, onTabChange, testId, children } = props;
+  const showTabs = !!tabs && tabs.length >= 2;
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      role: "complementary",
+      "aria-label": title,
+      "data-testid": testId ?? "left-panel",
+      "data-stamp-area": "true",
+      className: [
+        isDark ? "theme--dark " : "",
+        "absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200"
+      ].join(""),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-slate-800", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-base leading-none", children: icon }),
+            title
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "\u0110\xF3ng",
+              className: "rounded p-1 text-slate-500 transition hover:bg-slate-100 hover:text-slate-800",
+              children: /* @__PURE__ */ jsx(CloseIcon, {})
+            }
+          )
+        ] }),
+        showTabs && /* @__PURE__ */ jsx("div", { role: "tablist", className: "flex gap-1 rounded-md bg-slate-100 p-0.5 mx-3 mt-3", children: tabs.map((t) => /* @__PURE__ */ jsx(
+          TabPill,
+          {
+            active: t.key === activeTab,
+            onClick: () => onTabChange?.(t.key),
+            testId: t.testId,
+            children: t.label
+          },
+          t.key
+        )) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...showTabs ? { role: "tabpanel" } : {},
+            className: "min-h-0 flex-1 overflow-y-auto p-3 space-y-3",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function TabPill(props) {
+  const { active, onClick, testId, children } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": active,
+      onClick,
+      "data-testid": testId,
+      className: [
+        "flex-1 rounded px-2 py-1 text-[11px] font-medium transition",
+        active ? "bg-white text-slate-900 shadow-sm ring-1 ring-slate-200" : "text-slate-500 hover:text-slate-800"
+      ].join(" "),
+      children
+    }
+  );
+}
+function Section(props) {
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx("h4", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: props.label }),
+    props.children
+  ] });
+}
+
+// src/core/scene/ui/kindMeta.ts
+var POINT_COLOR = "#1e40af";
+var CURVE_COLOR = "#0f172a";
+var PLANE_COLOR = "#60a5fa";
+var KIND_UI_META = {
+  // 2D
+  point: { displayName: "\u0110i\u1EC3m", icon: "\xB7", defaultColor: POINT_COLOR },
+  segment: { displayName: "\u0110o\u1EA1n th\u1EB3ng", icon: "\u2014", defaultColor: CURVE_COLOR },
+  line: { displayName: "\u0110\u01B0\u1EDDng th\u1EB3ng", icon: "/", defaultColor: CURVE_COLOR },
+  ray: { displayName: "Tia", icon: "\u2192", defaultColor: CURVE_COLOR },
+  vector: { displayName: "Vector", icon: "\u2197", defaultColor: CURVE_COLOR },
+  circle: { displayName: "\u0110\u01B0\u1EDDng tr\xF2n", icon: "\u25CB", defaultColor: CURVE_COLOR },
+  polygon: { displayName: "\u0110a gi\xE1c", icon: "\u25C7", defaultColor: CURVE_COLOR },
+  intersection: { displayName: "Giao \u0111i\u1EC3m", icon: "\u2715", defaultColor: POINT_COLOR },
+  angle: { displayName: "G\xF3c", icon: "\u2220", defaultColor: "#16a34a" },
+  distance: { displayName: "Kho\u1EA3ng c\xE1ch", icon: "\u2194", defaultColor: "#dc2626" },
+  // 3D
+  point3d: { displayName: "\u0110i\u1EC3m", icon: "\xB7", defaultColor: POINT_COLOR },
+  segment3d: { displayName: "\u0110o\u1EA1n th\u1EB3ng", icon: "\u2014", defaultColor: CURVE_COLOR },
+  line3d: { displayName: "\u0110\u01B0\u1EDDng th\u1EB3ng", icon: "/", defaultColor: CURVE_COLOR },
+  ray3d: { displayName: "Tia", icon: "\u2192", defaultColor: CURVE_COLOR },
+  vector3d: { displayName: "Vector", icon: "\u2197", defaultColor: CURVE_COLOR },
+  plane3d: { displayName: "M\u1EB7t ph\u1EB3ng", icon: "\u25B1", defaultColor: PLANE_COLOR },
+  polygon3d: { displayName: "\u0110a gi\xE1c", icon: "\u25C7", defaultColor: CURVE_COLOR },
+  sphere3d: { displayName: "M\u1EB7t c\u1EA7u", icon: "\u25EF", defaultColor: PLANE_COLOR },
+  polyhedron3d: { displayName: "\u0110a di\u1EC7n", icon: "\u2B22", defaultColor: PLANE_COLOR },
+  cylinder3d: { displayName: "H\xECnh tr\u1EE5", icon: "\u232D", defaultColor: PLANE_COLOR },
+  cone3d: { displayName: "H\xECnh n\xF3n", icon: "\u25B2", defaultColor: PLANE_COLOR },
+  // Graph 2D
+  function2d: { displayName: "H\xE0m s\u1ED1", icon: "\u0192", defaultColor: CURVE_COLOR },
+  parameter: { displayName: "Tham s\u1ED1", icon: "\u03B1", defaultColor: "#7c3aed" },
+  pointOnCurve: { displayName: "\u0110i\u1EC3m tr\xEAn \u0111\u1ED3 th\u1ECB", icon: "\u25C9", defaultColor: POINT_COLOR },
+  tangent2d: { displayName: "Ti\u1EBFp tuy\u1EBFn", icon: "\u2571", defaultColor: CURVE_COLOR },
+  extremum2d: { displayName: "C\u1EF1c tr\u1ECB", icon: "\u2227", defaultColor: POINT_COLOR },
+  root2d: { displayName: "Nghi\u1EC7m", icon: "0", defaultColor: POINT_COLOR },
+  slope2d: { displayName: "H\u1EC7 s\u1ED1 g\xF3c", icon: "\u25B3", defaultColor: "#dc2626" }
+};
+function getKindUiMeta(kind) {
+  return KIND_UI_META[kind] ?? { displayName: kind, icon: "?", defaultColor: "#888888" };
+}
+function ObjectRowMenu(props) {
+  const { locked, onToggleLocked, onRename, onChangeColor, onDelete } = props;
+  const [open, setOpen] = React2.useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Row menu",
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((v) => !v);
+        },
+        className: "rounded px-1.5 text-black",
+        children: "\u22EE"
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "menu",
+        className: "absolute right-0 z-10 mt-1 w-40 rounded-md border border-zinc-200 bg-white py-1 text-xs shadow-lg dark:border-zinc-700 dark:bg-zinc-900",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => {
+            setOpen(false);
+            onRename();
+          }, children: "\u0110\u1ED5i t\xEAn" }),
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => {
+            setOpen(false);
+            onChangeColor();
+          }, children: "\u0110\u1ED5i m\xE0u" }),
+          /* @__PURE__ */ jsx(MenuItem, { onClick: () => {
+            setOpen(false);
+            onToggleLocked();
+          }, children: locked ? "M\u1EDF kho\xE1" : "Kho\xE1" }),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: () => {
+                setOpen(false);
+                onDelete();
+              },
+              className: "text-red-600 dark:text-red-400",
+              children: "Xo\xE1"
+            }
+          )
+        ]
+      }
+    ) : null
+  ] });
+}
+function MenuItem({
+  children,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      onClick,
+      className: `block w-full px-3 py-1 text-left text-black ${className ?? ""}`,
+      children
+    }
+  );
+}
+function formatMeasure(items) {
+  return items.map((it) => `${it.label} = ${it.value.toFixed(2)}`).join(", ");
+}
+function ObjectRow(props) {
+  const { obj, state, selected, onSelect, onToggleVisible, onToggleLocked, onRename, onChangeColor, onDelete } = props;
+  const meta = getKindUiMeta(obj.kind);
+  let title = "";
+  try {
+    title = getKind(obj.kind).describe(obj, state);
+  } catch {
+    title = `${meta.displayName} ${obj.label}`;
+  }
+  let measureText = null;
+  if (selected) {
+    try {
+      const m = getKind(obj.kind).measure?.(obj, state);
+      if (m && m.length > 0) measureText = formatMeasure(m);
+    } catch {
+      measureText = null;
+    }
+  }
+  const color = obj.attrs.color ?? meta.defaultColor;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-testid": `object-row-${obj.id}`,
+      "aria-selected": selected,
+      onClick: () => onSelect(obj.id),
+      className: "flex flex-col border-b border-zinc-100 cursor-pointer dark:border-zinc-800 " + (selected ? "bg-slate-200" : ""),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 text-xs", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Toggle visibility",
+              "aria-pressed": !obj.visible,
+              onClick: (e) => {
+                e.stopPropagation();
+                onToggleVisible(obj.id);
+              },
+              className: "h-4 w-4 shrink-0 rounded-full border-2 transition",
+              style: {
+                backgroundColor: obj.visible ? color : "transparent",
+                borderColor: color
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-black", children: title }),
+          /* @__PURE__ */ jsx(
+            ObjectRowMenu,
+            {
+              locked: obj.locked,
+              onToggleLocked: () => onToggleLocked(obj.id),
+              onRename: () => onRename(obj.id),
+              onChangeColor: () => onChangeColor(obj.id),
+              onDelete: () => onDelete(obj.id)
+            }
+          )
+        ] }),
+        selected && measureText && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": `object-row-detail-${obj.id}`,
+            className: "pl-9 pr-3 pb-1.5 text-[11px] text-black",
+            children: measureText
+          }
+        )
+      ]
+    }
+  );
+}
+function ObjectListPanel(props) {
+  const { store, selectedId, onSelect, renderRow } = props;
+  const subscribe = React2.useCallback(
+    (cb) => store.subscribe(() => cb()),
+    [store]
+  );
+  const state = React2.useSyncExternalStore(subscribe, store.getState, store.getState);
+  const objects = listObjects(state);
+  function handleSelect(id) {
+    onSelect?.(id === selectedId ? null : id);
+  }
+  function handleToggleVisible(id) {
+    const obj = state.objects[id];
+    if (!obj) return;
+    store.dispatch({ type: "UPDATE", payload: { id, patch: { visible: !obj.visible } } });
+  }
+  function handleToggleLocked(id) {
+    const obj = state.objects[id];
+    if (!obj) return;
+    store.dispatch({ type: "UPDATE", payload: { id, patch: { locked: !obj.locked } } });
+  }
+  function handleDelete(id) {
+    store.dispatch({ type: "DELETE", payload: { id } });
+  }
+  function noop() {
+  }
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-testid": "object-list-panel",
+      className: "flex max-h-[calc(100vh-200px)] flex-col overflow-y-auto",
+      children: objects.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-4 text-center text-xs text-zinc-500", children: "Ch\u01B0a c\xF3 \u0111\u1ED1i t\u01B0\u1EE3ng n\xE0o" }) : objects.map((obj) => {
+        const selected = obj.id === selectedId;
+        const onClick = () => handleSelect(obj.id);
+        if (renderRow) {
+          const custom = renderRow(obj, { selected, onClick });
+          if (custom != null) {
+            return /* @__PURE__ */ jsx(React2.Fragment, { children: custom }, obj.id);
+          }
+        }
+        return /* @__PURE__ */ jsx(
+          ObjectRow,
+          {
+            obj,
+            state,
+            selected,
+            onSelect: handleSelect,
+            onToggleVisible: handleToggleVisible,
+            onToggleLocked: handleToggleLocked,
+            onRename: noop,
+            onChangeColor: noop,
+            onDelete: handleDelete
+          },
+          obj.id
+        );
+      })
+    }
+  );
+}
+function UndoIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 10 L8 5 L8 8 L15 8 A5 5 0 0 1 20 13 L20 16" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10 L8 15 L8 12" })
+  ] });
+}
+function RedoIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 10 L16 5 L16 8 L9 8 A5 5 0 0 0 4 13 L4 16" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 10 L16 15 L16 12" })
+  ] });
+}
+function AxisGridSection(props) {
+  const { view, history } = props;
+  if (!view && !history) return null;
+  const sectionLabel = view?.sectionLabel ?? "B\u1ED1 c\u1EE5c";
+  const axisLabel = view?.axisLabel ?? "Tr\u1EE5c";
+  const gridLabel = view?.gridLabel ?? "L\u01B0\u1EDBi";
+  return /* @__PURE__ */ jsx(Section, { label: sectionLabel, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-[11px] text-slate-700", children: [
+    view && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("label", { className: "inline-flex select-none items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: view.showAxis,
+            onChange: (e) => view.onShowAxisChange(e.target.checked),
+            "data-testid": "toggle-axis"
+          }
+        ),
+        axisLabel
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "inline-flex select-none items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: view.showGrid,
+            onChange: (e) => view.onShowGridChange(e.target.checked),
+            "data-testid": "toggle-grid"
+          }
+        ),
+        gridLabel
+      ] })
+    ] }),
+    history && /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: history.onUndo,
+          disabled: !history.canUndo,
+          title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
+          "aria-label": "Ho\xE0n t\xE1c",
+          "data-testid": "undo-btn",
+          className: "inline-flex items-center justify-center rounded p-1 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-transparent",
+          children: /* @__PURE__ */ jsx(UndoIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: history.onRedo,
+          disabled: !history.canRedo,
+          title: "L\xE0m l\u1EA1i (Ctrl/Cmd+Shift+Z)",
+          "aria-label": "L\xE0m l\u1EA1i",
+          "data-testid": "redo-btn",
+          className: "inline-flex items-center justify-center rounded p-1 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-transparent",
+          children: /* @__PURE__ */ jsx(RedoIcon, {})
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/stamps/shared/StampLeftPanel/types.ts
+var TOOLTIP_DELAY_MS = 400;
+
+// src/stamps/shared/StampLeftPanel/useToolHoverTooltip.ts
+function useToolHoverTooltip() {
+  const [hover, setHover] = useState(null);
+  const [portalReady, setPortalReady] = useState(false);
+  const hoverTimerRef = useRef(null);
+  useEffect(() => {
+    setPortalReady(true);
+    return () => {
+      if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+    };
+  }, []);
+  const showHover = useCallback((el, t) => {
+    if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+    hoverTimerRef.current = setTimeout(() => {
+      const r = el.getBoundingClientRect();
+      setHover({ label: t.label, hint: t.hint, x: r.right, y: r.top + r.height / 2 });
+    }, TOOLTIP_DELAY_MS);
+  }, []);
+  const hideHover = useCallback(() => {
+    if (hoverTimerRef.current) {
+      clearTimeout(hoverTimerRef.current);
+      hoverTimerRef.current = null;
+    }
+    setHover(null);
+  }, []);
+  return { hover, portalReady, showHover, hideHover };
+}
+function ToolGrid(props) {
+  const { tools, groupOrder, groupLabels, activeTool, onToolChange, chord } = props;
+  const { hover, portalReady, showHover, hideHover } = useToolHoverTooltip();
+  const grouped = useMemo(() => {
+    var _a;
+    const acc = {};
+    for (const t of tools) {
+      (acc[_a = t.group] ?? (acc[_a] = [])).push(t);
+    }
+    return acc;
+  }, [tools]);
+  const groupKeys = useMemo(
+    () => groupOrder.filter((g) => grouped[g]),
+    [grouped, groupOrder]
+  );
+  const activeGroupTools = chord?.activeGroup ? grouped[chord.activeGroup] ?? null : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    groupKeys.map((group) => {
+      const isChordActive = chord?.activeGroup === group;
+      const dimmed = chord?.activeGroup != null && !isChordActive;
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "data-chord-group": group,
+          "data-chord-active": isChordActive ? "true" : "false",
+          className: [
+            "rounded-md transition",
+            isChordActive ? "bg-emerald-50 ring-1 ring-emerald-400 p-1" : "p-0",
+            dimmed ? "opacity-55" : "opacity-100"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsxs("h4", { className: "mb-1.5 flex items-center justify-between text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: [
+              /* @__PURE__ */ jsx("span", { children: groupLabels[group] }),
+              chord && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-testid": `chord-letter-${group}`,
+                  className: [
+                    "font-mono text-[10px] leading-none transition",
+                    isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
+                  ].join(" "),
+                  children: chord.letterForGroup(group)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1", children: grouped[group].map((t, i) => {
+              const active = activeTool === t.key;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": t.label,
+                  "aria-pressed": active,
+                  "data-tool": t.key,
+                  title: t.label + (t.shortcut ? ` (${t.shortcut})` : ""),
+                  onClick: () => onToolChange(t.key),
+                  onMouseEnter: (e) => showHover(e.currentTarget, t),
+                  onMouseLeave: hideHover,
+                  onFocus: (e) => showHover(e.currentTarget, t),
+                  onBlur: hideHover,
+                  className: [
+                    "relative flex h-10 items-center justify-center rounded-md transition",
+                    active ? "bg-emerald-600 text-white shadow-sm" : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+                  ].join(" "),
+                  children: [
+                    t.icon,
+                    chord && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "data-testid": `chord-num-${t.key}`,
+                        className: [
+                          "pointer-events-none absolute bottom-0 right-0.5 font-mono text-[9px] leading-none transition",
+                          active ? "text-white/70" : isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
+                        ].join(" "),
+                        children: i + 1
+                      }
+                    )
+                  ]
+                },
+                t.key
+              );
+            }) })
+          ]
+        },
+        group
+      );
+    }),
+    chord?.activeGroup && activeGroupTools && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "chord-hint",
+        className: "mt-1 rounded border border-emerald-200 bg-emerald-50/60 px-2 py-1 text-[11px] leading-snug text-slate-600",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-emerald-700", children: chord.letterForGroup(chord.activeGroup) }),
+          /* @__PURE__ */ jsx("span", { className: "mx-1 text-slate-400", children: "\u2192" }),
+          activeGroupTools.map((t, i) => /* @__PURE__ */ jsxs("span", { className: "mr-2 inline-block", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-emerald-700", children: i + 1 }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1", children: t.label })
+          ] }, t.key)),
+          /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "Esc hu\u1EF7" })
+        ]
+      }
+    ),
+    portalReady && hover && typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "tooltip",
+          className: "pointer-events-none fixed w-max max-w-[220px] rounded-md bg-slate-900 px-2 py-1 text-left text-[11px] leading-tight text-white shadow-lg",
+          style: {
+            left: hover.x + 8,
+            top: hover.y,
+            transform: "translate(0, -50%)",
+            zIndex: 2147483600
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "block font-medium", children: hover.label }),
+            hover.hint && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-slate-300", children: hover.hint })
+          ]
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+function StampLeftPanelDesktop(props) {
+  const {
+    title,
+    icon,
+    onClose,
+    isDark,
+    testId,
+    tools,
+    groupOrder,
+    groupLabels,
+    activeTool,
+    onToolChange,
+    view,
+    history,
+    chord,
+    objects,
+    tabs
+  } = props;
+  const [tab, setTab] = useState("tools");
+  const hasObjects = !!objects;
+  useEffect(() => {
+    if (!hasObjects && tab === "objects") setTab("tools");
+  }, [hasObjects, tab]);
+  const tabSpecs = hasObjects ? [
+    { key: "tools", label: tabs?.toolsLabel ?? "\u{1F9F0} C\xF4ng c\u1EE5", testId: "tab-tools" },
+    { key: "objects", label: tabs?.objectsLabel ?? "\u{1F4D0} \u0110\u1ED1i t\u01B0\u1EE3ng", testId: "tab-objects" }
+  ] : void 0;
+  return /* @__PURE__ */ jsx(
+    LeftPanelShell,
+    {
+      title,
+      icon,
+      onClose,
+      isDark,
+      testId: testId ?? "stamp-left-panel",
+      tabs: tabSpecs,
+      activeTab: hasObjects ? tab : void 0,
+      onTabChange: hasObjects ? setTab : void 0,
+      children: !hasObjects || tab === "tools" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(AxisGridSection, { view, history }),
+        /* @__PURE__ */ jsx(
+          ToolGrid,
+          {
+            tools,
+            groupOrder,
+            groupLabels,
+            activeTool,
+            onToolChange,
+            chord
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs("section", { "data-testid": "objects-panel", className: "flex flex-col gap-2", children: [
+        objects.addButtons && objects.addButtons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: objects.addButtons.map((b) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": b.testId,
+            onClick: b.onClick,
+            className: "flex-1 rounded border border-slate-300 bg-slate-50 px-2 py-1 text-[11px] font-medium text-slate-700 transition hover:bg-slate-100",
+            children: b.label
+          },
+          b.label
+        )) }),
+        /* @__PURE__ */ jsx(
+          ObjectListPanel,
+          {
+            store: objects.store,
+            selectedId: objects.selectedObjectId,
+            onSelect: objects.onObjectSelect,
+            renderRow: objects.renderRow
+          }
+        )
+      ] })
+    }
+  );
+}
+function MobileToolDrawer({
+  title,
+  headerIcon,
+  chips,
+  actions,
+  groups,
+  activeTool,
+  onToolSelect,
+  drawerOpen,
+  onDrawerClose,
+  isDark,
+  testId,
+  objectsTab
+}) {
+  const [mobileTab, setMobileTab] = React2__default.useState("tools");
+  const prevOpenRef = React2__default.useRef(drawerOpen);
+  React2__default.useEffect(() => {
+    if (!prevOpenRef.current && drawerOpen) setMobileTab("tools");
+    prevOpenRef.current = drawerOpen;
+  }, [drawerOpen]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    drawerOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "stamp-drawer-backdrop",
+        onPointerDown: onDrawerClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        role: "complementary",
+        "aria-label": title,
+        "aria-hidden": !drawerOpen ? "true" : void 0,
+        "data-testid": testId,
+        "data-stamp-area": "true",
+        "data-mobile-drawer": "true",
+        "data-geo-mobile": "true",
+        "data-drawer-state": drawerOpen ? "open" : "closed",
+        className: [
+          isDark ? "theme--dark " : "",
+          "stamp-drawer-mobile flex flex-col border-r border-slate-200 bg-white shadow-md"
+        ].join(""),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-2 text-base font-semibold text-slate-800", children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700", children: headerIcon }),
+              title
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onDrawerClose,
+                "aria-label": "\u0110\xF3ng ng\u0103n c\xF4ng c\u1EE5",
+                className: "inline-flex h-9 w-9 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-slate-800",
+                children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-2 border-b border-slate-200 bg-white/95 px-3 py-2 backdrop-blur", children: [
+            chips.map((c) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "aria-pressed": c.pressed,
+                "aria-label": c.label,
+                "data-testid": c.testId,
+                onClick: () => c.onToggle(!c.pressed),
+                className: "geo-mobile-chip",
+                children: [
+                  c.icon,
+                  c.label
+                ]
+              },
+              c.label
+            )),
+            actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-1", children: actions.map((a) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: a.onClick,
+                disabled: a.disabled,
+                "aria-label": a.label,
+                title: a.title ?? a.label,
+                "data-testid": a.testId,
+                className: "inline-flex h-9 w-9 items-center justify-center rounded-full text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-transparent",
+                children: a.icon
+              },
+              a.label
+            )) })
+          ] }),
+          objectsTab && /* @__PURE__ */ jsxs("div", { role: "tablist", className: "flex gap-1 rounded-md bg-slate-100 p-0.5 mx-3 mt-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": mobileTab === "tools",
+                onClick: () => setMobileTab("tools"),
+                className: [
+                  "flex-1 rounded px-2 py-1 text-[11px] font-medium transition",
+                  mobileTab === "tools" ? "bg-white text-slate-900 shadow-sm ring-1 ring-slate-200" : "text-slate-500 hover:text-slate-800"
+                ].join(" "),
+                children: "\u{1F9F0} C\xF4ng c\u1EE5"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": mobileTab === "objects",
+                onClick: () => setMobileTab("objects"),
+                className: [
+                  "flex-1 rounded px-2 py-1 text-[11px] font-medium transition",
+                  mobileTab === "objects" ? "bg-white text-slate-900 shadow-sm ring-1 ring-slate-200" : "text-slate-500 hover:text-slate-800"
+                ].join(" "),
+                children: objectsTab.label
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "min-h-0 flex-1 overflow-y-auto",
+              style: { paddingBottom: "calc(0.75rem + env(safe-area-inset-bottom))" },
+              children: objectsTab && mobileTab === "objects" ? /* @__PURE__ */ jsx("div", { className: "px-3 pt-3", children: objectsTab.render() }) : groups.map((g) => /* @__PURE__ */ jsxs("section", { className: "px-3 pt-3 pb-1", children: [
+                /* @__PURE__ */ jsxs("h4", { className: "mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: [
+                  /* @__PURE__ */ jsx("span", { className: "h-1 w-1 rounded-full bg-emerald-500" }),
+                  g.groupLabel
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: g.tools.map((t) => {
+                  const active = activeTool === t.key;
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": t.label,
+                      "aria-pressed": active,
+                      "data-tool": t.key,
+                      onClick: () => {
+                        onToolSelect(t.key);
+                        onDrawerClose();
+                      },
+                      className: [
+                        "flex flex-col items-center justify-center gap-1.5 rounded-2xl px-2 py-3 transition active:scale-95",
+                        active ? "geo-mobile-tool-active" : "bg-slate-50 text-slate-700 hover:bg-slate-100"
+                      ].join(" "),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 items-center justify-center", children: t.icon }),
+                        /* @__PURE__ */ jsx("span", { className: "text-center text-[11px] font-medium leading-tight line-clamp-2", children: t.label })
+                      ]
+                    },
+                    t.key
+                  );
+                }) })
+              ] }, g.group))
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function AxisIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "4", y2: "4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "2 6 4 4 6 6" }),
+    /* @__PURE__ */ jsx("polyline", { points: "18 18 20 20 18 22" })
+  ] });
+}
+function GridIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "1" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "10", x2: "20", y2: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "16", x2: "20", y2: "16" }),
+    /* @__PURE__ */ jsx("line", { x1: "10", y1: "4", x2: "10", y2: "20" }),
+    /* @__PURE__ */ jsx("line", { x1: "16", y1: "4", x2: "16", y2: "20" })
+  ] });
+}
+function UndoIcon2() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 10 L8 5 L8 8 L15 8 A5 5 0 0 1 20 13 L20 16" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10 L8 15 L8 12" })
+  ] });
+}
+function RedoIcon2() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 10 L16 5 L16 8 L9 8 A5 5 0 0 0 4 13 L4 16" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 10 L16 15 L16 12" })
+  ] });
+}
+function StampLeftPanelMobile(props) {
+  const {
+    title,
+    icon,
+    isDark,
+    testId,
+    tools,
+    groupOrder,
+    groupLabels,
+    activeTool,
+    onToolChange,
+    view,
+    history,
+    objects,
+    tabs,
+    drawerOpen,
+    onDrawerClose
+  } = props;
+  const groups = useMemo(() => {
+    const acc = /* @__PURE__ */ new Map();
+    for (const t of tools) {
+      if (!acc.has(t.group)) acc.set(t.group, []);
+      acc.get(t.group).push(t);
+    }
+    return groupOrder.filter((g) => acc.has(g)).map((group) => ({
+      group,
+      groupLabel: groupLabels[group],
+      tools: acc.get(group).map((t) => ({ key: t.key, label: t.label, icon: t.icon }))
+    }));
+  }, [tools, groupOrder, groupLabels]);
+  const chips = view ? [
+    {
+      label: view.axisLabel ?? "Tr\u1EE5c",
+      icon: /* @__PURE__ */ jsx(AxisIcon, {}),
+      pressed: view.showAxis,
+      onToggle: view.onShowAxisChange,
+      testId: "toggle-axis"
+    },
+    {
+      label: view.gridLabel ?? "L\u01B0\u1EDBi",
+      icon: /* @__PURE__ */ jsx(GridIcon, {}),
+      pressed: view.showGrid,
+      onToggle: view.onShowGridChange,
+      testId: "toggle-grid"
+    }
+  ] : [];
+  const actions = history ? [
+    {
+      label: "Ho\xE0n t\xE1c",
+      title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
+      icon: /* @__PURE__ */ jsx(UndoIcon2, {}),
+      onClick: history.onUndo,
+      disabled: !history.canUndo,
+      testId: "undo-btn"
+    },
+    {
+      label: "L\xE0m l\u1EA1i",
+      title: "L\xE0m l\u1EA1i (Ctrl/Cmd+Shift+Z)",
+      icon: /* @__PURE__ */ jsx(RedoIcon2, {}),
+      onClick: history.onRedo,
+      disabled: !history.canRedo,
+      testId: "redo-btn"
+    }
+  ] : [];
+  return /* @__PURE__ */ jsx(
+    MobileToolDrawer,
+    {
+      title,
+      headerIcon: icon,
+      testId: testId ?? "stamp-left-panel",
+      isDark,
+      drawerOpen: !!drawerOpen,
+      onDrawerClose: () => onDrawerClose?.(),
+      chips,
+      actions,
+      groups,
+      activeTool,
+      onToolSelect: onToolChange,
+      objectsTab: objects ? {
+        label: tabs?.objectsLabel ?? "\u{1F4D0} \u0110\u1ED1i t\u01B0\u1EE3ng",
+        render: () => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3", children: [
+          objects.addButtons && objects.addButtons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-1 pt-3", children: objects.addButtons.map((b) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-testid": b.testId,
+              onClick: b.onClick,
+              className: "flex-1 rounded border border-slate-300 bg-slate-50 px-2 py-1 text-[11px] font-medium text-slate-700 transition hover:bg-slate-100",
+              children: b.label
+            },
+            b.label
+          )) }),
+          /* @__PURE__ */ jsx(
+            ObjectListPanel,
+            {
+              store: objects.store,
+              selectedId: objects.selectedObjectId,
+              onSelect: objects.onObjectSelect,
+              renderRow: objects.renderRow
+            }
+          )
+        ] })
+      } : void 0
+    }
+  );
+}
+function StampLeftPanel(props) {
+  if (props.isMobile) return /* @__PURE__ */ jsx(StampLeftPanelMobile, { ...props });
+  return /* @__PURE__ */ jsx(StampLeftPanelDesktop, { ...props });
+}
+function useStampStore(domain, editingElement, parseInitial) {
+  const ref = useRef(null);
+  if (!ref.current) {
+    const initial = editingElement?.customData ? parseInitial(editingElement.customData) ?? createEmptyState(domain) : createEmptyState(domain);
+    ref.current = createStore(initial);
+  }
+  return ref.current;
+}
+
+// src/stamps/shared/StampLeftPanel/constants.ts
+var STAMP_PANEL_DESKTOP = "h-[700px] w-[880px] max-h-[85vh] max-w-[calc(100vw-280px)]";
+var ToastContext = createContext(null);
+function reducer(state, action) {
+  switch (action.type) {
+    case "PUSH": {
+      const next = [...state, action.item];
+      return next.length > action.maxVisible ? next.slice(next.length - action.maxVisible) : next;
+    }
+    case "REPLACE":
+      return state.map((it) => it.id === action.item.id ? action.item : it);
+    case "DISMISS":
+      return state.filter((it) => it.id !== action.id);
+  }
+}
+var autoIdCounter = 0;
+function ToastProvider({ children, maxVisible = 3 }) {
+  const [items, dispatch] = useReducer(reducer, []);
+  const timersRef = useRef(/* @__PURE__ */ new Map());
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const clearTimer = useCallback((id) => {
+    const t = timersRef.current.get(id);
+    if (t) {
+      clearTimeout(t);
+      timersRef.current.delete(id);
+    }
+  }, []);
+  const dismiss = useCallback((id) => {
+    clearTimer(id);
+    dispatch({ type: "DISMISS", id });
+  }, [clearTimer]);
+  const scheduleAutoDismiss = useCallback((id, duration) => {
+    if (duration <= 0) return;
+    const t = setTimeout(() => dismiss(id), duration);
+    timersRef.current.set(id, t);
+  }, [dismiss]);
+  const showToast = useCallback((message, opts = {}) => {
+    const variant = opts.variant ?? "info";
+    const duration = opts.duration ?? 3e3;
+    const id = opts.id ?? `toast-${++autoIdCounter}`;
+    const item = { id, message, variant, duration };
+    const existing = itemsRef.current.find((it) => it.id === id);
+    if (existing) {
+      clearTimer(id);
+      dispatch({ type: "REPLACE", item });
+    } else {
+      dispatch({ type: "PUSH", item, maxVisible });
+    }
+    scheduleAutoDismiss(id, duration);
+  }, [clearTimer, maxVisible, scheduleAutoDismiss]);
+  useEffect(() => () => {
+    timersRef.current.forEach((t) => clearTimeout(t));
+    timersRef.current.clear();
+  }, []);
+  const value = useMemo(() => ({ items, showToast, dismiss }), [items, showToast, dismiss]);
+  return /* @__PURE__ */ jsx(ToastContext.Provider, { value, children });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used inside <ToastProvider>");
+  }
+  return ctx;
+}
+var VARIANT_CLASS = {
+  info: "border-l-sky-500",
+  warning: "border-l-amber-500",
+  error: "border-l-rose-500"
+};
+var VARIANT_ICON = {
+  info: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ] }),
+  warning: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+  ] }),
+  error: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] })
+};
+function Toast({ id, message, variant, onDismiss }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      className: [
+        "pointer-events-auto flex max-w-sm items-start gap-2 rounded-lg border-l-4 bg-white px-3 py-2 text-sm text-slate-800 shadow-md ring-1 ring-black/5",
+        VARIANT_CLASS[variant]
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 text-slate-500", children: VARIANT_ICON[variant] }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 leading-snug", children: message }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "\u0110\xF3ng th\xF4ng b\xE1o",
+            onClick: () => onDismiss(id),
+            className: "-mr-1 ml-1 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-slate-400 hover:bg-slate-100 hover:text-slate-700",
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastHost() {
+  const { items, dismiss } = useToast();
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-live": "polite",
+      className: "pointer-events-none absolute inset-x-0 bottom-3 z-50 flex flex-col items-center gap-2",
+      children: items.map((it) => /* @__PURE__ */ jsx(Toast, { id: it.id, message: it.message, variant: it.variant, onDismiss: dismiss }, it.id))
+    }
+  );
+}
+
+// src/stamps/shared/safeJsx.ts
+var isDev = (() => {
+  try {
+    return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+})();
+function safeJsx(label, fn, fallback) {
+  try {
+    return fn();
+  } catch (err) {
+    if (isDev) {
+      console.warn("[whiteboard:jsxgraph]", label, err);
+    }
+    return fallback;
+  }
+}
+
+// src/stamps/shared/attachJxgWheelZoom.ts
+function attachJxgWheelZoom(target, board, label = "wheelZoom") {
+  const onWheel = (e) => {
+    if (!e.ctrlKey && !e.metaKey) return;
+    e.preventDefault();
+    e.stopPropagation();
+    let cx;
+    let cy;
+    safeJsx(`${label}.coords`, () => {
+      const usr = board.getUsrCoordsOfMouse?.(e);
+      if (Array.isArray(usr) && usr.length >= 2 && Number.isFinite(usr[0]) && Number.isFinite(usr[1])) {
+        cx = usr[0];
+        cy = usr[1];
+      }
+    });
+    if (e.deltaY < 0) safeJsx(`${label}.in`, () => board.zoomIn(cx, cy));
+    else if (e.deltaY > 0) safeJsx(`${label}.out`, () => board.zoomOut(cx, cy));
+  };
+  target.addEventListener("wheel", onWheel, { passive: false });
+  return () => {
+    target.removeEventListener("wheel", onWheel);
+  };
+}
+
+// src/stamps/shared/initJxgBoard.ts
+async function initJxgBoard(target, config) {
+  const label = config.label ?? "JxgBoard";
+  const JXG = (await import('jsxgraph')).default;
+  const {
+    textDisplayInternal = true,
+    disableTextEngines = true,
+    labelDisplayInternal = true,
+    disableElementHighlight = false
+  } = config.defaults ?? {};
+  safeJsx(`${label}.applyOptions`, () => {
+    const opts = JXG.Options;
+    if (!opts) return;
+    if (textDisplayInternal || disableTextEngines) {
+      opts.text = opts.text ?? {};
+      if (textDisplayInternal) opts.text.display = "internal";
+      if (disableTextEngines) {
+        opts.text.useASCIIMathML = false;
+        opts.text.useMathJax = false;
+        opts.text.useKatex = false;
+      }
+    }
+    if (labelDisplayInternal) {
+      opts.label = opts.label ?? {};
+      opts.label.display = "internal";
+    }
+    if (disableElementHighlight) {
+      opts.elements = opts.elements ?? {};
+      opts.elements.highlight = false;
+    }
+    config.extraOptionTweaks?.(opts);
+  });
+  const board = JXG.JSXGraph.initBoard(target, config.boardOptions);
+  const cleanup = () => {
+    safeJsx(`${label}.freeBoard`, () => JXG.JSXGraph.freeBoard(board));
+  };
+  return { JXG, board, cleanup };
+}
+
+export { STAMP_PANEL_DESKTOP, StampLeftPanel, ToastHost, ToastProvider, attachJxgWheelZoom, initJxgBoard, safeJsx, useStampStore, useToast };
+//# sourceMappingURL=chunk-TOOHCAWP.mjs.map
+//# sourceMappingURL=chunk-TOOHCAWP.mjs.map