@xom11/whiteboard 0.11.0 → 0.24.1

package/dist/host-DOAYVL35.mjs

@@ -0,0 +1,3199 @@
+"use client";
+import { useToolStateMachine } from './chunk-NVJ7K3DK.mjs';
+import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-MFOGFFIL.mjs';
+import { JxgRenderer } from './chunk-BKSXPNPQ.mjs';
+import { useChordShortcut } from './chunk-HNQLZIEP.mjs';
+import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel } from './chunk-4D5CSIJO.mjs';
+import { themeLabel, paletteFor, themeAxis, themeGrid } from './chunk-R5FL6S7L.mjs';
+import './chunk-ICR4CVOE.mjs';
+import { DEFAULT_VIEW_2D, nextLabel, useEditorState, listObjects } from './chunk-6V4SH4JJ.mjs';
+import './chunk-ZBJBQKJ2.mjs';
+import { useIsMobile } from './chunk-P2AOIF7S.mjs';
+import { insertStampImage } from './chunk-QGNU34T7.mjs';
+import './chunk-5UTGXHLJ.mjs';
+import { forwardRef, useRef, useId, useState, useEffect, useCallback, useImperativeHandle, useLayoutEffect, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+var C_POINT = "#2563eb";
+var C_CONSTRUCT = "#dc2626";
+var C_FILL = "#f59e0b";
+var C_ARC = "#059669";
+var Icon = {
+  // ===== Basic =====
+  cursor: /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5 3 L5 18 L9.5 14 L12 20 L14 19.2 L11.5 13.5 L17.5 13.5 Z",
+      fill: "currentColor",
+      fillOpacity: "0.12",
+      stroke: "currentColor",
+      strokeWidth: "1.4",
+      strokeLinejoin: "round"
+    }
+  ) }),
+  select: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinejoin: "round", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("rect", { x: "2.5", y: "2.5", width: "14", height: "14", rx: "0.5", stroke: "currentColor", strokeWidth: "1.4", strokeDasharray: "2 1.8" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 10 L21 14.5 L14.5 16 L12.5 22 Z", fill: "currentColor", fillOpacity: "0.5", stroke: "currentColor", strokeWidth: "1.2" })
+  ] }),
+  // ===== Point =====
+  point: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "9.5", cy: "14", r: "3.2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("text", { x: "13.5", y: "10.5", fontSize: "9.5", fontFamily: "serif", fontStyle: "italic", fontWeight: "600", fill: C_POINT, children: "A" })
+  ] }),
+  midpoint: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "12", r: "1.8", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "12", r: "1.8", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.6", fill: C_CONSTRUCT })
+  ] }),
+  perpFoot: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "17", x2: "22", y2: "17", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "5", x2: "9", y2: "17", stroke: C_CONSTRUCT, strokeWidth: "1.4", strokeDasharray: "2.5 2" }),
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "13.5", width: "3.5", height: "3.5", fill: "none", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "5", r: "2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "17", r: "2.4", fill: C_CONSTRUCT })
+  ] }),
+  intersect: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 5 L21 19", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 5 L3 19", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.6", fill: C_CONSTRUCT })
+  ] }),
+  // ===== Line =====
+  segment: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "18", x2: "19", y2: "6", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "18", r: "2.2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "6", r: "2.2", fill: C_POINT })
+  ] }),
+  line: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "21", x2: "22", y2: "3", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "15.5", r: "1.9", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "15.5", cy: "8.5", r: "1.9", fill: C_POINT })
+  ] }),
+  ray: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "19", x2: "22", y2: "2", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "19", r: "2.2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.7", fill: C_POINT })
+  ] }),
+  vector: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "19", x2: "18", y2: "6" }),
+    /* @__PURE__ */ jsx("polyline", { points: "13,5 19,5 19,11" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "19", r: "2", fill: C_POINT, stroke: "none" })
+  ] }),
+  // ===== Construct =====
+  perpendicular: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "17", x2: "22", y2: "17", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "17", stroke: C_CONSTRUCT, strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "12", y: "13.5", width: "3.5", height: "3.5", fill: "none", stroke: "currentColor", strokeWidth: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "17", r: "1.8", fill: C_POINT })
+  ] }),
+  parallel: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "9", x2: "22", y2: "6", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "19", x2: "22", y2: "16", stroke: C_CONSTRUCT, strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "17.5", r: "1.9", fill: C_POINT })
+  ] }),
+  perpBisector: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "16", x2: "20", y2: "16", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "22", stroke: C_CONSTRUCT, strokeWidth: "1.4", strokeDasharray: "2.5 2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "16", r: "2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "16", r: "2", fill: C_POINT })
+  ] }),
+  bisector: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "22", y2: "20", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "22", y2: "4", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "23", y2: "11", stroke: C_CONSTRUCT, strokeWidth: "1.4", strokeDasharray: "2.5 2" })
+  ] }),
+  // ===== Polygon =====
+  polygon: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "6,5 18,6 22,14 13,21 4,16", fill: C_FILL, fillOpacity: "0.28", stroke: C_FILL, strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "5", r: "1.5", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "6", r: "1.5", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "22", cy: "14", r: "1.5", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "13", cy: "21", r: "1.5", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "16", r: "1.5", fill: C_POINT })
+  ] }),
+  regularPolygon: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "12,3 20.5,8 20.5,16 12,21 3.5,16 3.5,8", fill: C_FILL, fillOpacity: "0.28", stroke: C_FILL, strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "3", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "20.5", cy: "8", r: "1.7", fill: C_POINT })
+  ] }),
+  // ===== Circle =====
+  circleCenter: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "13", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "13", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "13", r: "1.7", fill: C_POINT })
+  ] }),
+  semicircle: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M 4 16 A 8 8 0 0 1 20 16", stroke: C_ARC, strokeWidth: "1.6", fill: "none" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "16", x2: "20", y2: "16", stroke: "currentColor", strokeWidth: "1.2", strokeDasharray: "2 1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "16", r: "1.9", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "16", r: "1.9", fill: C_POINT })
+  ] }),
+  arcCenter: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M 6 6 A 9 9 0 0 1 18 18", stroke: C_ARC, strokeWidth: "1.7", fill: "none" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "6", y2: "6", stroke: "currentColor", strokeWidth: "1", strokeDasharray: "1.5 1.5", opacity: "0.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "18", y2: "18", stroke: "currentColor", strokeWidth: "1", strokeDasharray: "1.5 1.5", opacity: "0.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "1.4", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "1.4", fill: C_POINT })
+  ] }),
+  arc3: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M 4 17 A 8 8 0 0 1 20 17", stroke: C_ARC, strokeWidth: "1.8", fill: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "17", r: "1.9", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "9", r: "1.9", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "17", r: "1.9", fill: C_POINT })
+  ] }),
+  sectorCenter: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 12 12 L 5 7 A 8.6 8.6 0 0 1 19 7 Z",
+        fill: C_FILL,
+        fillOpacity: "0.25",
+        stroke: C_ARC,
+        strokeWidth: "1.6"
+      }
+    ),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "5", y2: "7", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "19", y2: "7", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.8", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "7", r: "1.4", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "7", r: "1.4", fill: C_POINT })
+  ] }),
+  circle3: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "16", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "16", r: "1.7", fill: C_POINT })
+  ] }),
+  tangent: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "13", r: "5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "4", x2: "14.5", y2: "15.2", stroke: C_CONSTRUCT, strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "4", x2: "8.3", y2: "8.3", stroke: C_CONSTRUCT, strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "4", r: "1.9", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "14.5", cy: "15.2", r: "1.4", fill: C_CONSTRUCT }),
+    /* @__PURE__ */ jsx("circle", { cx: "8.3", cy: "8.3", r: "1.4", fill: C_CONSTRUCT })
+  ] }),
+  // ===== Triangle centers =====
+  centroid: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "4,20 20,20 12,4", fill: C_FILL, fillOpacity: "0.18", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.5 1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "16", y2: "12", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.5 1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "20", x2: "8", y2: "12", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.5 1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "20", r: "1.5", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "1.5", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "1.5", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "14.67", r: "2.4", fill: C_CONSTRUCT })
+  ] }),
+  circumcenter: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("polygon", { points: "12,3 21,16 3,16", fill: "none", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "3", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "16", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "16", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: C_CONSTRUCT })
+  ] }),
+  incenter: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "3,20 21,20 12,4", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "14", r: "4.5", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "20", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "20", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "14", r: "2.2", fill: C_CONSTRUCT })
+  ] }),
+  orthocenter: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "3,20 21,20 8,5", fill: "none", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "5", x2: "8", y2: "20", stroke: C_CONSTRUCT, strokeWidth: "1.2", strokeDasharray: "2 1.6" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "20", x2: "14.5", y2: "11.5", stroke: C_CONSTRUCT, strokeWidth: "1.2", strokeDasharray: "2 1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "20", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "20", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "14.5", r: "2.4", fill: C_CONSTRUCT })
+  ] }),
+  // ===== Measure =====
+  angle: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "22", y2: "20", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "22", y2: "6", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 20 A 10 10 0 0 0 11 13.4", stroke: C_ARC, strokeWidth: "1.6", fill: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "20", r: "1.7", fill: C_POINT })
+  ] }),
+  distance: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "16", x2: "19", y2: "16", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "16", r: "2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "16", r: "2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("text", { x: "8.5", y: "11", fontSize: "7", fontFamily: "serif", fontStyle: "italic", fontWeight: "600", fill: "currentColor", children: "cm" })
+  ] }),
+  area: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "4,10 14,3.5 21,12 16,21 5,18", fill: C_FILL, fillOpacity: "0.32", stroke: C_FILL, strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("text", { x: "1.5", y: "8", fontSize: "6.5", fontFamily: "serif", fontStyle: "italic", fontWeight: "600", fill: "currentColor", children: "cm\xB2" })
+  ] }),
+  // ===== Edit =====
+  toggleLabel: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("text", { x: "1.5", y: "19", fontSize: "15", fontFamily: "serif", fontWeight: "700", fill: "currentColor", children: "A" }),
+    /* @__PURE__ */ jsx("text", { x: "12", y: "19", fontSize: "15", fontFamily: "serif", fontWeight: "700", fill: "currentColor", fillOpacity: "0.35", children: "A" })
+  ] }),
+  toggleVisible: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "12", r: "3.2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "17", cy: "12", r: "3.2", fill: "none", stroke: C_POINT, strokeWidth: "1.6" })
+  ] }),
+  trash: (
+    // Eraser hình bình hành — GeoGebra dùng eraser, không phải trash bin.
+    /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinejoin: "round", strokeLinecap: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: "M14.5 3 L21 9.5 L11.5 19 L4 19 L4 11.5 Z", fill: "currentColor", fillOpacity: "0.14", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsx("line", { x1: "9.5", y1: "8", x2: "16", y2: "14.5", stroke: "currentColor", strokeWidth: "1.4" })
+    ] })
+  ),
+  // ===== Transform =====
+  // Style chung: BLUE = input (điểm gốc / tâm), RED = output (ảnh sau biến hình).
+  // Mảnh, ít chi tiết — focus vào quan hệ điểm gốc ↔ ảnh.
+  translate: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "7", y1: "21", x2: "12.5", y2: "16.25", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "11.94,17.85 12.5,16.25 10.83,16.57", stroke: "currentColor", strokeWidth: "1.4", fill: "none" }),
+    /* @__PURE__ */ jsx("line", { x1: "7", y1: "15", x2: "18", y2: "5.5", stroke: "#94a3b8", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("polyline", { points: "15.54,5.97 18,5.5 17.18,7.86", stroke: "#94a3b8", strokeWidth: "1.4", fill: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "15", r: "2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "5.5", r: "2", fill: C_CONSTRUCT })
+  ] }),
+  rotate: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "20", y2: "6", stroke: "currentColor", strokeWidth: "1", opacity: "0.55" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "18", x2: "4", y2: "9", stroke: "currentColor", strokeWidth: "1", opacity: "0.55" }),
+    /* @__PURE__ */ jsx("path", { d: "M 14.22 14.67 A 4 4 0 0 0 9.34 15.01", stroke: "currentColor", strokeWidth: "1.2", fill: "none" }),
+    /* @__PURE__ */ jsx("text", { x: "10", y: "14", fontSize: "7", fontFamily: "serif", fontStyle: "italic", fontWeight: "700", fill: "currentColor", children: "\u03B1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "18", r: "2.4", fill: C_POINT, stroke: "#fff", strokeWidth: "0.8" }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "6", r: "1.9", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "9", r: "1.9", fill: C_CONSTRUCT })
+  ] }),
+  reflectLine: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "21", y2: "3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "11", r: "2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "13", cy: "19", r: "2", fill: C_CONSTRUCT })
+  ] }),
+  reflectPoint: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "4", stroke: "currentColor", strokeWidth: "0.9", strokeDasharray: "1.5 1.5", opacity: "0.45" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "19", r: "1.9", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.6", fill: C_POINT, stroke: "#fff", strokeWidth: "0.8" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "5", r: "1.9", fill: C_CONSTRUCT })
+  ] }),
+  dilate: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "20", x2: "21", y2: "4", stroke: "currentColor", strokeWidth: "0.9", strokeDasharray: "1.5 1.5", opacity: "0.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "19", r: "2.2", fill: C_POINT, stroke: "#fff", strokeWidth: "0.8" }),
+    /* @__PURE__ */ jsx("circle", { cx: "8", cy: "15.5", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "5.7", r: "1.9", fill: C_CONSTRUCT }),
+    /* @__PURE__ */ jsx("text", { x: "10.5", y: "10.5", fontSize: "8", fontFamily: "serif", fontStyle: "italic", fontWeight: "700", fill: "currentColor", children: "k" })
+  ] })
+};
+var GeometryIconHeader = /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("polygon", { points: "4,20 20,20 12,5" }),
+  /* @__PURE__ */ jsx("circle", { cx: "4", cy: "20", r: "1.5", fill: "currentColor", stroke: "none" }),
+  /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "1.5", fill: "currentColor", stroke: "none" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" })
+] });
+function UndoIcon() {
+  return /* @__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("polyline", { points: "3 7 3 13 9 13" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
+  ] });
+}
+function RedoIcon() {
+  return /* @__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("polyline", { points: "21 7 21 13 15 13" }),
+    /* @__PURE__ */ jsx("path", { d: "M20.49 13a9 9 0 1 1-2.12-9.36L21 7" })
+  ] });
+}
+
+// src/stamps/geometry-2d/editor/tools.tsx
+var TOOLS = [
+  { key: "move", label: "Di chuy\u1EC3n", hint: "K\xE9o \u0111i\u1EC3m ho\u1EB7c xoay n\u1EC1n", icon: Icon.cursor, group: "move", needs: 0 },
+  { key: "select", label: "Ch\u1ECDn", hint: "Click \u0111\u1EC3 ch\u1ECDn 1 / Shift+click \u0111\u1EC3 b\u1ECF th\xEAm / K\xE9o n\u1EC1n \u0111\u1EC3 khoanh v\xF9ng / DEL \u0111\u1EC3 xo\xE1", icon: Icon.select, group: "move", needs: 0 },
+  { key: "point", label: "\u0110i\u1EC3m m\u1EDBi", hint: "Click \u0111\u1EC3 th\xEAm \u0111i\u1EC3m", icon: Icon.point, group: "point", needs: 1 },
+  { key: "midpoint", label: "Trung \u0111i\u1EC3m", hint: "Click 2 \u0111i\u1EC3m c\xF3 s\u1EB5n", icon: Icon.midpoint, group: "point", needs: 2, accepts: ["point", "point"] },
+  { key: "perpFoot", label: "Ch\xE2n \u0111\u01B0\u1EDDng vu\xF4ng g\xF3c", hint: "Click 1 \u0111i\u1EC3m + 1 \u0111\u01B0\u1EDDng c\xF3 s\u1EB5n", icon: Icon.perpFoot, group: "point", needs: 2, accepts: ["point", "line"] },
+  { key: "intersect", label: "Giao \u0111i\u1EC3m c\u1EE7a 2 \u0111\u1ED1i t\u01B0\u1EE3ng", hint: "Click 2 \u0111\u01B0\u1EDDng/\u0111\u01B0\u1EDDng tr\xF2n c\xF3 s\u1EB5n", icon: Icon.intersect, group: "point", needs: 2, accepts: ["lineOrCircle", "lineOrCircle"] },
+  { key: "segment", label: "\u0110o\u1EA1n th\u1EB3ng", hint: "Click 2 \u0111i\u1EC3m", icon: Icon.segment, group: "line", needs: 2 },
+  { key: "line", label: "\u0110\u01B0\u1EDDng th\u1EB3ng qua 2 \u0111i\u1EC3m", hint: "Click 2 \u0111i\u1EC3m", icon: Icon.line, group: "line", needs: 2 },
+  { key: "ray", label: "Tia qua 2 \u0111i\u1EC3m", hint: "Click 2 \u0111i\u1EC3m", icon: Icon.ray, group: "line", needs: 2 },
+  { key: "vector", label: "Vector", hint: "Click 2 \u0111i\u1EC3m", icon: Icon.vector, group: "line", needs: 2 },
+  { key: "perpendicular", label: "\u0110\u01B0\u1EDDng vu\xF4ng g\xF3c", hint: "Click 1 \u0111i\u1EC3m + 1 \u0111\u01B0\u1EDDng c\xF3 s\u1EB5n", icon: Icon.perpendicular, group: "construct", needs: 2, accepts: ["point", "line"] },
+  { key: "parallel", label: "\u0110\u01B0\u1EDDng song song", hint: "Click 1 \u0111i\u1EC3m + 1 \u0111\u01B0\u1EDDng c\xF3 s\u1EB5n", icon: Icon.parallel, group: "construct", needs: 2, accepts: ["point", "line"] },
+  { key: "perpBisector", label: "\u0110\u01B0\u1EDDng trung tr\u1EF1c", hint: "Click 2 \u0111i\u1EC3m c\xF3 s\u1EB5n", icon: Icon.perpBisector, group: "construct", needs: 2, accepts: ["point", "point"] },
+  { key: "angleBisector", label: "\u0110\u01B0\u1EDDng ph\xE2n gi\xE1c", hint: "Click 3 \u0111i\u1EC3m (\u0111\u1EC9nh \u1EDF gi\u1EEFa) ho\u1EB7c 2 \u0111\u01B0\u1EDDng/\u0111o\u1EA1n (s\u1EBD t\u1EA1o 2 tia ph\xE2n gi\xE1c)", icon: Icon.bisector, group: "construct", needs: 3, accepts: ["pointOrLine", "pointOrLine", "pointOrLine"] },
+  { key: "polygon", label: "\u0110a gi\xE1c", hint: "Click c\xE1c \u0111i\u1EC3m, click l\u1EA1i \u0111i\u1EC3m \u0111\u1EA7u \u0111\u1EC3 \u0111\xF3ng", icon: Icon.polygon, group: "polygon", needs: -1 },
+  { key: "regularPolygon", label: "\u0110a gi\xE1c \u0111\u1EC1u", hint: "Click 2 \u0111i\u1EC3m r\u1ED3i nh\u1EADp s\u1ED1 c\u1EA1nh", icon: Icon.regularPolygon, group: "polygon", needs: 2, accepts: ["point", "point"] },
+  { key: "circleCenter", label: "\u0110\u01B0\u1EDDng tr\xF2n (t\xE2m + \u0111i\u1EC3m)", hint: "Click t\xE2m r\u1ED3i 1 \u0111i\u1EC3m tr\xEAn \u0111\u01B0\u1EDDng tr\xF2n", icon: Icon.circleCenter, group: "circle", needs: 2 },
+  { key: "semicircle", label: "N\u1EEDa \u0111\u01B0\u1EDDng tr\xF2n (\u0111\u01B0\u1EDDng k\xEDnh)", hint: "Click 2 \u0111i\u1EC3m \u2014 b\xE1n nguy\u1EC7t qua \u0111\u01B0\u1EDDng k\xEDnh", icon: Icon.semicircle, group: "circle", needs: 2 },
+  { key: "arcCenter", label: "Cung tr\xF2n (t\xE2m + 2 \u0111i\u1EC3m)", hint: "Click t\xE2m O \u2192 A \u2192 B (cung t\u1EEB A \u0111\u1EBFn B)", icon: Icon.arcCenter, group: "circle", needs: 3 },
+  { key: "arc3", label: "Cung tr\xF2n qua 3 \u0111i\u1EC3m", hint: "Click 3 \u0111i\u1EC3m tr\xEAn cung", icon: Icon.arc3, group: "circle", needs: 3 },
+  { key: "sectorCenter", label: "H\xECnh qu\u1EA1t (t\xE2m + 2 \u0111i\u1EC3m)", hint: "Click t\xE2m O \u2192 A \u2192 B (qu\u1EA1t OAB)", icon: Icon.sectorCenter, group: "circle", needs: 3 },
+  { key: "circle3", label: "\u0110\u01B0\u1EDDng tr\xF2n qua 3 \u0111i\u1EC3m", hint: "Click 3 \u0111i\u1EC3m", icon: Icon.circle3, group: "circle", needs: 3 },
+  { key: "tangent", label: "Ti\u1EBFp tuy\u1EBFn", hint: "Click 1 \u0111i\u1EC3m + 1 \u0111\u01B0\u1EDDng tr\xF2n c\xF3 s\u1EB5n", icon: Icon.tangent, group: "circle", needs: 2, accepts: ["point", "circle"] },
+  { key: "centroid", label: "Tr\u1ECDng t\xE2m tam gi\xE1c", hint: "Click 3 \u0111\u1EC9nh tam gi\xE1c", icon: Icon.centroid, group: "triangle", needs: 3, accepts: ["point", "point", "point"] },
+  { key: "circumcenter", label: "T\xE2m \u0111\u01B0\u1EDDng tr\xF2n ngo\u1EA1i ti\u1EBFp", hint: "Click 3 \u0111\u1EC9nh tam gi\xE1c", icon: Icon.circumcenter, group: "triangle", needs: 3, accepts: ["point", "point", "point"] },
+  { key: "incenter", label: "T\xE2m \u0111\u01B0\u1EDDng tr\xF2n n\u1ED9i ti\u1EBFp", hint: "Click 3 \u0111\u1EC9nh tam gi\xE1c", icon: Icon.incenter, group: "triangle", needs: 3, accepts: ["point", "point", "point"] },
+  { key: "orthocenter", label: "Tr\u1EF1c t\xE2m tam gi\xE1c", hint: "Click 3 \u0111\u1EC9nh tam gi\xE1c", icon: Icon.orthocenter, group: "triangle", needs: 3, accepts: ["point", "point", "point"] },
+  { key: "angle", label: "G\xF3c", hint: "Click 3 \u0111i\u1EC3m c\xF3 s\u1EB5n (\u0111\u1EC9nh \u1EDF gi\u1EEFa)", icon: Icon.angle, group: "measure", needs: 3, accepts: ["point", "point", "point"] },
+  { key: "distance", label: "Kho\u1EA3ng c\xE1ch", hint: "Click 2 \u0111i\u1EC3m c\xF3 s\u1EB5n", icon: Icon.distance, group: "measure", needs: 2, accepts: ["point", "point"] },
+  { key: "area", label: "Di\u1EC7n t\xEDch", hint: "Click c\xE1c \u0111\u1EC9nh, click l\u1EA1i \u0111i\u1EC3m \u0111\u1EA7u \u0111\u1EC3 \u0111\xF3ng", icon: Icon.area, group: "measure", needs: -1 },
+  { key: "toggleLabel", label: "Hi\u1EC7n/\u1EA9n t\xEAn", hint: "Click v\xE0o \u0111\u1ED1i t\u01B0\u1EE3ng", icon: Icon.toggleLabel, group: "edit", needs: 1, accepts: ["any"] },
+  { key: "toggleVisible", label: "Hi\u1EC7n/\u1EA9n \u0111\u1ED1i t\u01B0\u1EE3ng", hint: "Click v\xE0o \u0111\u1ED1i t\u01B0\u1EE3ng", icon: Icon.toggleVisible, group: "edit", needs: 1, accepts: ["any"] },
+  { key: "delete", label: "Xo\xE1", hint: "Click v\xE0o \u0111\u1ED1i t\u01B0\u1EE3ng", icon: Icon.trash, group: "edit", needs: 1, accepts: ["any"] },
+  { key: "translate", label: "Ph\xE9p t\u1ECBnh ti\u1EBFn", hint: "Click object \u2192 2 \u0111i\u1EC3m t\u1EA1o vector", icon: Icon.translate, group: "transform", needs: 3, accepts: ["any", "point", "point"] },
+  { key: "rotate", label: "Quay \u0111\u1ED1i t\u01B0\u1EE3ng", hint: "Click object \u2192 t\xE2m quay \u2192 nh\u1EADp g\xF3c", icon: Icon.rotate, group: "transform", needs: 2, accepts: ["any", "point"] },
+  { key: "reflectLine", label: "\u0110\u1ED1i x\u1EE9ng qua \u0111\u01B0\u1EDDng th\u1EB3ng", hint: "Click object \u2192 \u0111\u01B0\u1EDDng th\u1EB3ng", icon: Icon.reflectLine, group: "transform", needs: 2, accepts: ["any", "line"] },
+  { key: "reflectPoint", label: "\u0110\u1ED1i x\u1EE9ng qua \u0111i\u1EC3m", hint: "Click object \u2192 t\xE2m \u0111\u1ED1i x\u1EE9ng", icon: Icon.reflectPoint, group: "transform", needs: 2, accepts: ["any", "point"] },
+  { key: "dilate", label: "Ph\xE9p v\u1ECB t\u1EF1", hint: "Click object \u2192 t\xE2m \u2192 nh\u1EADp t\u1EF7 s\u1ED1 k", icon: Icon.dilate, group: "transform", needs: 2, accepts: ["any", "point"] }
+];
+var GROUP_LABELS = {
+  move: "C\u01A1 b\u1EA3n",
+  point: "\u0110i\u1EC3m",
+  line: "\u0110\u01B0\u1EDDng",
+  construct: "D\u1EF1ng h\xECnh",
+  polygon: "\u0110a gi\xE1c",
+  circle: "\u0110\u01B0\u1EDDng tr\xF2n",
+  triangle: "Tam gi\xE1c",
+  measure: "\u0110o l\u01B0\u1EDDng",
+  edit: "Ch\u1EC9nh s\u1EEDa",
+  transform: "Ph\xE9p bi\u1EBFn h\xECnh"
+};
+var GROUP_ORDER = [
+  "move",
+  "point",
+  "line",
+  "construct",
+  "polygon",
+  "circle",
+  "triangle",
+  "measure",
+  "edit",
+  "transform"
+];
+var A_CODE = "A".charCodeAt(0);
+function letterForGroup(g) {
+  const idx = GROUP_ORDER.indexOf(g);
+  return idx >= 0 ? String.fromCharCode(A_CODE + idx) : "";
+}
+function objKind(obj) {
+  if (!obj) return "other";
+  const ec = typeof obj.elementClass === "number" ? obj.elementClass : null;
+  if (ec === 1) return "point";
+  if (ec === 2) return "line";
+  if (ec === 3) return "circle";
+  const e = (obj.elType || obj.type || "").toString().toLowerCase();
+  if (e === "point" || e === "glider" || e === "midpoint" || e === "intersection" || e === "otherintersection" || e === "reflection" || e === "mirrorpoint" || e === "mirrorelement" || e === "orthogonalprojection" || e === "parallelpoint") return "point";
+  if (e === "line" || e === "segment" || e === "arrow" || e === "axis" || e === "normal" || e === "parallel" || e === "perpendicular" || e === "tangent" || e === "bisector" || e === "perpendicularsegment") return "line";
+  if (e === "circle" || e === "circumcircle") return "circle";
+  return "other";
+}
+
+// src/stamps/geometry-2d/editor/handlers/pointerDown/move.ts
+function handleMoveTool(ctx, e) {
+  const sc = ctx.screenCoordsOf(e);
+  if (!sc) return;
+  const [sx, sy] = sc;
+  ctx.moveDownRef.current = { sx, sy };
+  const cx = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
+  const cy = e.clientY ?? e.touches?.[0]?.clientY ?? 0;
+  ctx.lastClickClientRef.current = { x: cx, y: cy };
+  const hits = ctx.objectsAt(e).map(ctx.promoteLabel).filter((o) => o !== ctx.axisObjsRef.current.x && o !== ctx.axisObjsRef.current.y).filter((o) => ctx.jxgIdToSceneId(o) != null);
+  const obj = hits.find((o) => objKind(o) === "point") ?? ctx.findNearestPointJxg(e, 12) ?? hits[0];
+  if (obj) {
+    const sid = ctx.jxgIdToSceneId(obj);
+    if (sid) {
+      const shift = !!(e.shiftKey || e.altKey);
+      ctx.toggleSelect(sid, shift);
+    }
+    return;
+  }
+  if (!(e.shiftKey || e.altKey)) ctx.clearSelection();
+}
+
+// src/stamps/geometry-2d/editor/handlers/pointerDown/select.ts
+function handleSelectTool(ctx, e) {
+  const sc = ctx.screenCoordsOf(e);
+  if (!sc) return;
+  const [sx, sy] = sc;
+  const cx = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
+  const cy = e.clientY ?? e.touches?.[0]?.clientY ?? 0;
+  ctx.lastClickClientRef.current = { x: cx, y: cy };
+  const hits = ctx.objectsAt(e).map(ctx.promoteLabel).filter((o) => o !== ctx.axisObjsRef.current.x && o !== ctx.axisObjsRef.current.y).filter((o) => ctx.jxgIdToSceneId(o) != null);
+  const obj = hits.find((o) => objKind(o) === "point") ?? ctx.findNearestPointJxg(e, 12) ?? hits[0];
+  if (obj) {
+    const sid = ctx.jxgIdToSceneId(obj);
+    if (sid) {
+      const shift = !!(e.shiftKey || e.altKey);
+      ctx.toggleSelect(sid, shift);
+    }
+    ctx.moveDownRef.current = { sx, sy };
+    ctx.marqueeRef.current = null;
+    return;
+  }
+  ctx.marqueeRef.current = { startSx: sx, startSy: sy };
+  if (!(e.shiftKey || e.altKey)) ctx.clearSelection();
+}
+
+// src/stamps/geometry-2d/editor/handlers/utils.ts
+function freshId(ctx, prefix) {
+  const counter = ctx.store.getState().counter;
+  let n = counter + 1;
+  let id = `${prefix}_${n}`;
+  const objs = ctx.store.getState().objects;
+  while (id in objs) {
+    n += 1;
+    id = `${prefix}_${n}`;
+  }
+  return id;
+}
+function mkSceneObj(id, kind, label, attrs) {
+  return {
+    id,
+    kind,
+    label,
+    visible: true,
+    locked: false,
+    layer: "default",
+    schemaVersion: 1,
+    attrs
+  };
+}
+function dispatchAddFreePoint(ctx, x, y) {
+  const id = freshId(ctx, "p");
+  const label = ctx.nextLabel("point");
+  const obj = mkSceneObj(id, "point", label, { constraint: { kind: "free", x, y } });
+  ctx.store.dispatch({ type: "ADD", payload: { obj } });
+  return id;
+}
+function dispatchAddIntersection(ctx, attrs) {
+  const id = freshId(ctx, "X");
+  const label = ctx.nextLabel("intersection");
+  const obj = mkSceneObj(id, "intersection", label, attrs);
+  ctx.store.dispatch({ type: "ADD", payload: { obj } });
+  return id;
+}
+
+// src/stamps/geometry-2d/editor/handlers/pointerDown/point.ts
+function handlePointTool(ctx, _e, x, y, hits) {
+  const curves = hits.filter((o) => objKind(o) === "line" || objKind(o) === "circle");
+  if (curves.length >= 2) {
+    const a = curves[0];
+    const b = curves[1];
+    const aId = ctx.jxgIdToSceneId(a);
+    const bId = ctx.jxgIdToSceneId(b);
+    if (aId && bId) {
+      try {
+        const aKind = objKind(a);
+        const bKind = objKind(b);
+        if (aKind === "line" && bKind === "line") {
+          dispatchAddIntersection(ctx, { kind: "lineLine", ref1: aId, ref2: bId });
+          return;
+        }
+        const tmp0 = ctx.boardRef.current.create("intersection", [a, b, 0], { visible: false, withLabel: false });
+        const tmp1 = ctx.boardRef.current.create("intersection", [a, b, 1], { visible: false, withLabel: false });
+        const d0 = Math.hypot((tmp0.X?.() ?? 0) - x, (tmp0.Y?.() ?? 0) - y);
+        const d1 = Math.hypot((tmp1.X?.() ?? 0) - x, (tmp1.Y?.() ?? 0) - y);
+        safeJsx("handlers.removeObject(intersect.tmp0)", () => ctx.boardRef.current.removeObject(tmp0));
+        safeJsx("handlers.removeObject(intersect.tmp1)", () => ctx.boardRef.current.removeObject(tmp1));
+        const branch = d0 <= d1 ? 0 : 1;
+        const isLineCircle = aKind === "line" && bKind === "circle" || aKind === "circle" && bKind === "line";
+        if (isLineCircle) {
+          dispatchAddIntersection(ctx, { kind: "lineCircle", ref1: aId, ref2: bId, branch });
+        } else {
+          dispatchAddIntersection(ctx, { kind: "circleCircle", ref1: aId, ref2: bId, branch });
+        }
+        return;
+      } catch {
+      }
+    }
+  }
+  dispatchAddFreePoint(ctx, x, y);
+}
+
+// src/stamps/geometry-2d/editor/handlers/pointerDown/singleTarget.ts
+function handleSingleTargetTool(ctx, t, toolDef, e, bestHit) {
+  if (!(toolDef.needs === 1 && toolDef.accepts)) return false;
+  const hit = bestHit ?? ctx.findNearestPointJxg(e, 12);
+  if (!hit) {
+    ctx.flashWarn("Click v\xE0o m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng \u0111\u1EC3 \xE1p d\u1EE5ng");
+    return true;
+  }
+  const sid = ctx.jxgIdToSceneId(hit);
+  if (!sid) return true;
+  if (t === "delete") {
+    ctx.store.dispatch({ type: "DELETE", payload: { id: sid } });
+    return true;
+  }
+  if (t === "toggleLabel") {
+    const obj = ctx.store.getState().objects[sid];
+    if (!obj) return true;
+    const cur = obj.attrs.showLabel;
+    const next = !(cur ?? false);
+    ctx.store.dispatch({ type: "UPDATE_ATTRS", payload: { id: sid, patch: { showLabel: next } } });
+    return true;
+  }
+  if (t === "toggleVisible") {
+    const obj = ctx.store.getState().objects[sid];
+    if (!obj) return true;
+    ctx.store.dispatch({ type: "UPDATE", payload: { id: sid, patch: { visible: !obj.visible } } });
+    return true;
+  }
+  return true;
+}
+
+// src/stamps/geometry-2d/editor/handlers/pointerDown/polygon.ts
+function handlePolygonTool(ctx, t, toolDef, e, x, y, bestHit) {
+  if (toolDef.needs !== -1) return false;
+  const snappedPoint = bestHit && objKind(bestHit) === "point" ? bestHit : ctx.findNearestPointJxg(e, 12);
+  const snappedId = snappedPoint ? ctx.jxgIdToSceneId(snappedPoint) : null;
+  if (ctx.pendingIdsRef.current.length >= 3 && snappedId && snappedId === ctx.pendingIdsRef.current[0]) {
+    ctx.clearPreviewSegs();
+    const vertices = ctx.pendingIdsRef.current.slice();
+    const isArea = t === "area";
+    const id = freshId(ctx, isArea ? "area" : "poly");
+    const label = ctx.nextLabel("polygon");
+    const attrs = { vertices };
+    if (isArea) {
+      attrs.showValue = true;
+      attrs.fillOpacity = 0.18;
+      attrs.color = "#1d4ed8";
+    }
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "polygon", label, attrs) }
+    });
+    ctx.clearPending();
+    return true;
+  }
+  if (snappedId && ctx.pendingIdsRef.current.includes(snappedId)) {
+    ctx.flashWarn("\u0110\u1EC9nh n\xE0y \u0111\xE3 c\xF3 \u2014 click \u0111i\u1EC3m kh\xE1c ho\u1EB7c click l\u1EA1i \u0111i\u1EC3m \u0111\u1EA7u \u0111\u1EC3 \u0111\xF3ng");
+    return true;
+  }
+  let pickId = snappedId;
+  let pickJxg = snappedPoint;
+  if (!pickId) {
+    pickId = dispatchAddFreePoint(ctx, x, y);
+    pickJxg = ctx.jxgFromSceneId(pickId);
+  }
+  if (ctx.pendingRef.current.length > 0 && ctx.boardRef.current && pickJxg) {
+    const prev = ctx.pendingRef.current[ctx.pendingRef.current.length - 1];
+    safeJsx("handlers.createPreviewSegment", () => {
+      const seg = ctx.boardRef.current.create("segment", [prev, pickJxg], {
+        strokeColor: "#3b82f6",
+        strokeWidth: 1.5,
+        strokeOpacity: 0.75,
+        fixed: true,
+        highlight: false,
+        withLabel: false
+      });
+      ctx.previewSegRef.current.push(seg);
+    });
+  }
+  if (pickJxg) ctx.pendingRef.current.push(pickJxg);
+  if (pickId) ctx.pendingIdsRef.current.push(pickId);
+  ctx.setPendingCount(ctx.pendingIdsRef.current.length);
+  return true;
+}
+
+// src/stamps/geometry-2d/editor/handlers/classifyPointVsCircle.ts
+function classifyPointVsCircle(point, circle) {
+  if (!point || !circle || !circle.center) return "inside";
+  const dx = point.X() - circle.center.X();
+  const dy = point.Y() - circle.center.Y();
+  const d = Math.hypot(dx, dy);
+  const r = typeof circle.Radius === "function" ? circle.Radius() : Number(circle.radius);
+  if (!Number.isFinite(d) || !Number.isFinite(r)) return "inside";
+  const eps = Math.max(1e-9, 1e-6 * r);
+  if (Math.abs(d - r) <= eps) return "on";
+  return d < r ? "inside" : "outside";
+}
+
+// src/stamps/geometry-2d/editor/handlers/finalizeShape.ts
+function findPickIdByKind(ctx, kind) {
+  const picks = ctx.pendingRef.current;
+  const ids = ctx.pendingIdsRef.current;
+  for (let i = 0; i < picks.length; i += 1) {
+    if (objKind(picks[i]) === kind && ids[i]) return ids[i];
+  }
+  return null;
+}
+function finalizeShape(ctx, toolDef) {
+  const ids = ctx.pendingIdsRef.current;
+  const key = toolDef.key;
+  switch (key) {
+    case "segment": {
+      const id = freshId(ctx, "s");
+      const label = ctx.nextLabel("segment");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "segment", label, { p1: ids[0], p2: ids[1] }) }
+      });
+      return;
+    }
+    case "line": {
+      const id = freshId(ctx, "l");
+      const label = ctx.nextLabel("line");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "line", label, { p1: ids[0], p2: ids[1] }) }
+      });
+      return;
+    }
+    case "perpendicular":
+    case "parallel": {
+      const throughPoint = findPickIdByKind(ctx, "point");
+      const toLine = findPickIdByKind(ctx, "line");
+      if (!throughPoint || !toLine) return;
+      const id = freshId(ctx, key === "perpendicular" ? "perp" : "par");
+      const label = ctx.nextLabel("line");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "line", label, {
+          construction: { kind: key, throughPoint, toLine }
+        }) }
+      });
+      return;
+    }
+    case "perpBisector": {
+      const id = freshId(ctx, "pb");
+      const label = ctx.nextLabel("line");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "line", label, {
+          construction: { kind: "perpBisector", p1: ids[0], p2: ids[1] }
+        }) }
+      });
+      return;
+    }
+    case "angleBisector": {
+      const picks = ctx.pendingRef.current;
+      if (picks.length === 2 && objKind(picks[0]) === "line" && objKind(picks[1]) === "line") {
+        for (const branch of [0, 1]) {
+          const id2 = freshId(ctx, "ab");
+          const label2 = ctx.nextLabel("line");
+          ctx.store.dispatch({
+            type: "ADD",
+            payload: { obj: mkSceneObj(id2, "line", label2, {
+              construction: { kind: "angleBisectorLines", line1: ids[0], line2: ids[1], branch }
+            }) }
+          });
+        }
+        return;
+      }
+      const id = freshId(ctx, "ab");
+      const label = ctx.nextLabel("line");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "line", label, {
+          construction: { kind: "angleBisector", p1: ids[0], vertex: ids[1], p2: ids[2] }
+        }) }
+      });
+      return;
+    }
+    case "tangent": {
+      const throughId = findPickIdByKind(ctx, "point");
+      const circleId = findPickIdByKind(ctx, "circle");
+      if (!throughId || !circleId) return;
+      const picks = ctx.pendingRef.current;
+      const ids2 = ctx.pendingIdsRef.current;
+      const through = picks[ids2.indexOf(throughId)];
+      const circle = picks[ids2.indexOf(circleId)];
+      const pos = classifyPointVsCircle(through, circle);
+      if (pos === "inside") {
+        ctx.toast?.("\u0110i\u1EC3m n\u1EB1m trong \u0111\u01B0\u1EDDng tr\xF2n \u2014 kh\xF4ng c\xF3 ti\u1EBFp tuy\u1EBFn", {
+          variant: "warning",
+          id: "tangent-invalid-inside"
+        });
+        return;
+      }
+      if (pos === "on") {
+        const id = freshId(ctx, "t");
+        const label = ctx.nextLabel("line");
+        ctx.store.dispatch({
+          type: "ADD",
+          payload: { obj: mkSceneObj(id, "line", label, {
+            construction: { kind: "tangent", throughPoint: throughId, toCircle: circleId, branch: "on" }
+          }) }
+        });
+        return;
+      }
+      for (const branch of [0, 1]) {
+        const id = freshId(ctx, "t");
+        const label = ctx.nextLabel("line");
+        ctx.store.dispatch({
+          type: "ADD",
+          payload: { obj: mkSceneObj(id, "line", label, {
+            construction: { kind: "tangent", throughPoint: throughId, toCircle: circleId, branch }
+          }) }
+        });
+      }
+      return;
+    }
+    case "ray": {
+      const id = freshId(ctx, "r");
+      const label = ctx.nextLabel("ray");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "ray", label, { origin: ids[0], through: ids[1] }) }
+      });
+      return;
+    }
+    case "vector": {
+      const id = freshId(ctx, "v");
+      const label = ctx.nextLabel("vector");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "vector", label, { from: ids[0], to: ids[1] }) }
+      });
+      return;
+    }
+    case "circleCenter": {
+      const id = freshId(ctx, "c");
+      const label = ctx.nextLabel("circle");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: {
+          obj: mkSceneObj(id, "circle", label, {
+            center: ids[0],
+            surfacePoint: ids[1]
+          })
+        }
+      });
+      return;
+    }
+    case "circle3": {
+      const id = freshId(ctx, "cc");
+      const label = ctx.nextLabel("circle");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: {
+          obj: mkSceneObj(id, "circle", label, {
+            construction: { kind: "circumscribed", p1: ids[0], p2: ids[1], p3: ids[2] }
+          })
+        }
+      });
+      return;
+    }
+    case "semicircle": {
+      if (ids[0] === ids[1]) {
+        ctx.toast?.("C\u1EA7n 2 \u0111i\u1EC3m ph\xE2n bi\u1EC7t", { variant: "warning", id: "semicircle-dup" });
+        return;
+      }
+      const id = freshId(ctx, "arc");
+      const label = ctx.nextLabel("arc");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: {
+          obj: mkSceneObj(id, "arc", label, {
+            construction: { kind: "semicircle", p1: ids[0], p2: ids[1] }
+          })
+        }
+      });
+      return;
+    }
+    case "arcCenter": {
+      if (ids[0] === ids[1] || ids[0] === ids[2] || ids[1] === ids[2]) {
+        ctx.toast?.("C\u1EA7n 3 \u0111i\u1EC3m ph\xE2n bi\u1EC7t", { variant: "warning", id: "arc-center-dup" });
+        return;
+      }
+      const id = freshId(ctx, "arc");
+      const label = ctx.nextLabel("arc");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: {
+          obj: mkSceneObj(id, "arc", label, {
+            construction: { kind: "byCenter", center: ids[0], p1: ids[1], p2: ids[2] }
+          })
+        }
+      });
+      return;
+    }
+    case "arc3": {
+      if (ids[0] === ids[1] || ids[0] === ids[2] || ids[1] === ids[2]) {
+        ctx.toast?.("C\u1EA7n 3 \u0111i\u1EC3m ph\xE2n bi\u1EC7t", { variant: "warning", id: "arc3-dup" });
+        return;
+      }
+      const picks = ctx.pendingRef.current;
+      const ax = picks[0].X(), ay = picks[0].Y();
+      const bx = picks[1].X(), by = picks[1].Y();
+      const cx = picks[2].X(), cy = picks[2].Y();
+      const cross = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);
+      if (Math.abs(cross) < 1e-6) {
+        ctx.toast?.("Kh\xF4ng v\u1EBD \u0111\u01B0\u1EE3c cung qua 3 \u0111i\u1EC3m th\u1EB3ng h\xE0ng", {
+          variant: "warning",
+          id: "arc3-collinear"
+        });
+        return;
+      }
+      const id = freshId(ctx, "arc");
+      const label = ctx.nextLabel("arc");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: {
+          obj: mkSceneObj(id, "arc", label, {
+            construction: { kind: "by3Points", p1: ids[0], p2: ids[1], p3: ids[2] }
+          })
+        }
+      });
+      return;
+    }
+    case "sectorCenter": {
+      if (ids[0] === ids[1] || ids[0] === ids[2] || ids[1] === ids[2]) {
+        ctx.toast?.("C\u1EA7n 3 \u0111i\u1EC3m ph\xE2n bi\u1EC7t", { variant: "warning", id: "sector-center-dup" });
+        return;
+      }
+      const id = freshId(ctx, "sec");
+      const label = ctx.nextLabel("sector");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: {
+          obj: mkSceneObj(id, "sector", label, {
+            construction: { kind: "byCenter", center: ids[0], p1: ids[1], p2: ids[2] }
+          })
+        }
+      });
+      return;
+    }
+    case "midpoint": {
+      const id = freshId(ctx, "mp");
+      const label = ctx.nextLabel("point");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "point", label, {
+          constraint: { kind: "midpoint", p1: ids[0], p2: ids[1] }
+        }) }
+      });
+      return;
+    }
+    case "perpFoot": {
+      const fromPoint = findPickIdByKind(ctx, "point");
+      const onLine = findPickIdByKind(ctx, "line");
+      if (!fromPoint || !onLine) return;
+      const id = freshId(ctx, "pf");
+      const label = ctx.nextLabel("point");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "point", label, {
+          constraint: { kind: "perpFoot", from: fromPoint, onLine }
+        }) }
+      });
+      return;
+    }
+    case "centroid": {
+      const id = freshId(ctx, "g");
+      const label = ctx.nextLabel("point");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "point", label, {
+          constraint: { kind: "centroid", vertices: [ids[0], ids[1], ids[2]] }
+        }) }
+      });
+      return;
+    }
+    case "circumcenter": {
+      const id = freshId(ctx, "o");
+      const label = ctx.nextLabel("point");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "point", label, {
+          constraint: { kind: "circumcenter", vertices: [ids[0], ids[1], ids[2]] }
+        }) }
+      });
+      return;
+    }
+    case "incenter": {
+      const id = freshId(ctx, "i");
+      const label = ctx.nextLabel("point");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "point", label, {
+          constraint: { kind: "incenter", vertices: [ids[0], ids[1], ids[2]] }
+        }) }
+      });
+      return;
+    }
+    case "orthocenter": {
+      const id = freshId(ctx, "h");
+      const label = ctx.nextLabel("point");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "point", label, {
+          constraint: { kind: "orthocenter", vertices: [ids[0], ids[1], ids[2]] }
+        }) }
+      });
+      return;
+    }
+    case "angle": {
+      const id = freshId(ctx, "ang");
+      const label = ctx.nextLabel("angle");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "angle", label, {
+          p1: ids[0],
+          vertex: ids[1],
+          p2: ids[2]
+        }) }
+      });
+      return;
+    }
+    case "distance": {
+      const id = freshId(ctx, "d");
+      const label = ctx.nextLabel("distance");
+      ctx.store.dispatch({
+        type: "ADD",
+        payload: { obj: mkSceneObj(id, "distance", label, { p1: ids[0], p2: ids[1] }) }
+      });
+      return;
+    }
+    case "intersect": {
+      const picks = ctx.pendingRef.current;
+      const pendIds = ctx.pendingIdsRef.current;
+      const aIdx = pendIds.indexOf(ids[0]);
+      const bIdx = pendIds.indexOf(ids[1]);
+      if (aIdx < 0 || bIdx < 0) return;
+      const aKind = objKind(picks[aIdx]);
+      const bKind = objKind(picks[bIdx]);
+      if (aKind === "line" && bKind === "line") {
+        dispatchAddIntersection(ctx, { kind: "lineLine", ref1: ids[0], ref2: ids[1] });
+        return;
+      }
+      const isLineCircle = aKind === "line" && bKind === "circle" || aKind === "circle" && bKind === "line";
+      const isCircleCircle = aKind === "circle" && bKind === "circle";
+      if (!isLineCircle && !isCircleCircle) return;
+      for (const branch of [0, 1]) {
+        dispatchAddIntersection(ctx, {
+          kind: isLineCircle ? "lineCircle" : "circleCircle",
+          ref1: ids[0],
+          ref2: ids[1],
+          branch
+        });
+      }
+      return;
+    }
+    default:
+      return;
+  }
+}
+
+// src/stamps/geometry-2d/editor/transforms.ts
+function getDefiningPoints(obj, _state) {
+  if (obj.kind === "point" || obj.kind === "intersection") return [obj.id];
+  if (obj.kind === "segment" || obj.kind === "line") {
+    const a = obj.attrs;
+    return [a.p1, a.p2];
+  }
+  if (obj.kind === "ray") {
+    const a = obj.attrs;
+    return [a.origin, a.through];
+  }
+  if (obj.kind === "vector") {
+    const a = obj.attrs;
+    return [a.from, a.to];
+  }
+  if (obj.kind === "circle") {
+    const a = obj.attrs;
+    return [a.center, a.surfacePoint];
+  }
+  if (obj.kind === "polygon") {
+    return [...obj.attrs.vertices];
+  }
+  return [];
+}
+
+// src/stamps/geometry-2d/editor/handlers/transform.ts
+function finalizeTransform(ctx, tool, pendingIds, value) {
+  if (tool === "regularPolygon") {
+    const n = Math.max(3, Math.round(value));
+    const id = freshId(ctx, "rpoly");
+    const label = ctx.nextLabel("polygon");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "polygon", label, {
+        construction: { kind: "regular", p1: pendingIds[0], p2: pendingIds[1], n }
+      }) }
+    });
+    return;
+  }
+  const sourceId = pendingIds[0];
+  const state = ctx.store.getState();
+  const source = state.objects[sourceId];
+  if (!source) {
+    ctx.flashWarn("\u0110\u1ED1i t\u01B0\u1EE3ng ngu\u1ED3n kh\xF4ng c\xF2n");
+    return;
+  }
+  const defining = getDefiningPoints(source);
+  if (defining.length === 0) {
+    ctx.flashWarn("Kh\xF4ng th\u1EC3 bi\u1EBFn \u0111\u1ED5i \u0111\u1ED1i t\u01B0\u1EE3ng n\xE0y");
+    return;
+  }
+  let transformDef = null;
+  if (tool === "translate") {
+    const a = ctx.jxgFromSceneId(pendingIds[1]);
+    const b = ctx.jxgFromSceneId(pendingIds[2]);
+    if (!a || !b || typeof a.X !== "function" || typeof b.X !== "function") {
+      ctx.flashWarn("Kh\xF4ng \u0111\u1ECDc \u0111\u01B0\u1EE3c to\u1EA1 \u0111\u1ED9 vector");
+      return;
+    }
+    transformDef = { kind: "translate", dx: b.X() - a.X(), dy: b.Y() - a.Y() };
+  } else if (tool === "rotate") {
+    transformDef = { kind: "rotate", angleRad: value * Math.PI / 180, center: pendingIds[1] };
+  } else if (tool === "reflectLine") {
+    transformDef = { kind: "reflectLine", line: pendingIds[1] };
+  } else if (tool === "reflectPoint") {
+    transformDef = { kind: "reflectPoint", center: pendingIds[1] };
+  } else if (tool === "dilate") {
+    transformDef = { kind: "dilate", k: value, center: pendingIds[1] };
+  }
+  if (!transformDef) return;
+  const newPointIds = [];
+  for (const defId of defining) {
+    const newId = freshId(ctx, "p");
+    const newLabel = ctx.nextLabel("point");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(newId, "point", newLabel, {
+        constraint: { kind: "transformed", source: defId, transform: transformDef },
+        color: "#0ea5e9"
+      }) }
+    });
+    newPointIds.push(newId);
+  }
+  recreateFromTransformedPoints(ctx, source, newPointIds);
+}
+function recreateFromTransformedPoints(ctx, source, pointIds) {
+  const k = source.kind;
+  if (k === "point" || k === "intersection") return;
+  if (k === "segment" && pointIds.length === 2) {
+    const id = freshId(ctx, "s");
+    const label = ctx.nextLabel("segment");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "segment", label, { p1: pointIds[0], p2: pointIds[1], color: "#0ea5e9" }) }
+    });
+    return;
+  }
+  if (k === "line" && pointIds.length === 2) {
+    const id = freshId(ctx, "l");
+    const label = ctx.nextLabel("line");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "line", label, { p1: pointIds[0], p2: pointIds[1], color: "#0ea5e9" }) }
+    });
+    return;
+  }
+  if (k === "ray" && pointIds.length === 2) {
+    const id = freshId(ctx, "r");
+    const label = ctx.nextLabel("ray");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "ray", label, { origin: pointIds[0], through: pointIds[1], color: "#0ea5e9" }) }
+    });
+    return;
+  }
+  if (k === "vector" && pointIds.length === 2) {
+    const id = freshId(ctx, "v");
+    const label = ctx.nextLabel("vector");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "vector", label, { from: pointIds[0], to: pointIds[1], color: "#0ea5e9" }) }
+    });
+    return;
+  }
+  if (k === "circle" && pointIds.length === 2) {
+    const id = freshId(ctx, "c");
+    const label = ctx.nextLabel("circle");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "circle", label, { center: pointIds[0], surfacePoint: pointIds[1], color: "#0ea5e9" }) }
+    });
+    return;
+  }
+  if (k === "polygon" && pointIds.length >= 3) {
+    const id = freshId(ctx, "poly");
+    const label = ctx.nextLabel("polygon");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "polygon", label, { vertices: pointIds, color: "#0ea5e9" }) }
+    });
+    return;
+  }
+}
+
+// src/stamps/geometry-2d/editor/handlers/pointerDown/multiClick.ts
+function handleMultiClickTool(ctx, toolDef, e, x, y, hits, bestHit) {
+  let pick = null;
+  let pickId = null;
+  if (toolDef.accepts) {
+    const usedKinds = ctx.pendingRef.current.map((p) => objKind(p));
+    const remaining = [...toolDef.accepts];
+    for (const u of usedKinds) {
+      if (u === "other") continue;
+      let i = remaining.indexOf(u);
+      if (i < 0 && (u === "line" || u === "circle")) i = remaining.indexOf("lineOrCircle");
+      if (i < 0 && (u === "point" || u === "line")) i = remaining.indexOf("pointOrLine");
+      if (i >= 0) remaining.splice(i, 1);
+    }
+    const strictPoint = hits.find((o) => objKind(o) === "point") ?? null;
+    const lineHit = hits.find((o) => objKind(o) === "line") ?? null;
+    const circleHit = hits.find((o) => objKind(o) === "circle") ?? null;
+    if (remaining.includes("point") && strictPoint) pick = strictPoint;
+    else if (remaining.includes("line") && lineHit) pick = lineHit;
+    else if (remaining.includes("circle") && circleHit) pick = circleHit;
+    else if (remaining.includes("lineOrCircle") && (lineHit || circleHit)) {
+      pick = lineHit ?? circleHit;
+    } else if (remaining.includes("pointOrLine") && (strictPoint || lineHit)) {
+      pick = strictPoint ?? lineHit;
+    } else if (remaining.includes("any") && (strictPoint || lineHit || circleHit)) {
+      pick = strictPoint ?? lineHit ?? circleHit;
+    } else if (remaining.includes("point") || remaining.includes("pointOrLine")) {
+      const near = ctx.findNearestPointJxg(e, 12);
+      if (near) {
+        pick = near;
+      } else {
+        if (toolDef.key === "angleBisector" && ctx.pendingRef.current.length > 0 && objKind(ctx.pendingRef.current[0]) === "line") {
+          ctx.flashWarn("\u0110\xE3 ch\u1ECDn \u0111\u01B0\u1EDDng \u2014 click th\xEAm 1 \u0111\u01B0\u1EDDng/\u0111o\u1EA1n n\u1EEFa \u0111\u1EC3 t\u1EA1o 2 tia ph\xE2n gi\xE1c");
+          return;
+        }
+        pickId = dispatchAddFreePoint(ctx, x, y);
+        pick = ctx.jxgFromSceneId(pickId);
+      }
+    }
+    if (!pick) {
+      const needs = remaining.map(
+        (k) => k === "point" ? "m\u1ED9t \u0111i\u1EC3m" : k === "line" ? "m\u1ED9t \u0111\u01B0\u1EDDng/\u0111o\u1EA1n" : k === "circle" ? "m\u1ED9t \u0111\u01B0\u1EDDng tr\xF2n" : k === "lineOrCircle" ? "m\u1ED9t \u0111\u01B0\u1EDDng ho\u1EB7c \u0111\u01B0\u1EDDng tr\xF2n" : k === "pointOrLine" ? "m\u1ED9t \u0111i\u1EC3m ho\u1EB7c \u0111\u01B0\u1EDDng/\u0111o\u1EA1n" : "m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng"
+      );
+      ctx.flashWarn(`C\xF2n c\u1EA7n click v\xE0o ${needs.join(" + ")} c\xF3 s\u1EB5n`);
+      return;
+    }
+    if (ctx.pendingRef.current.includes(pick)) {
+      ctx.flashWarn("\u0110\xE3 ch\u1ECDn \u0111\u1ED1i t\u01B0\u1EE3ng n\xE0y \u2014 ch\u1ECDn \u0111\u1ED1i t\u01B0\u1EE3ng kh\xE1c");
+      return;
+    }
+    if (toolDef.key === "angleBisector" && ctx.pendingRef.current.length > 0) {
+      const firstKind = objKind(ctx.pendingRef.current[0]);
+      const newKind = objKind(pick);
+      if (firstKind === "line" && newKind !== "line") {
+        ctx.flashWarn("\u0110\xE3 ch\u1ECDn \u0111\u01B0\u1EDDng \u2014 ch\u1EC9 click th\xEAm 1 \u0111\u01B0\u1EDDng/\u0111o\u1EA1n n\u1EEFa");
+        return;
+      }
+      if (firstKind === "point" && newKind !== "point") {
+        ctx.flashWarn("\u0110\xE3 ch\u1ECDn \u0111i\u1EC3m \u2014 click th\xEAm \u0111i\u1EC3m (\u0111\u1EC9nh \u1EDF gi\u1EEFa)");
+        return;
+      }
+    }
+    if (!pickId) pickId = ctx.jxgIdToSceneId(pick);
+  } else {
+    const snapped = bestHit && objKind(bestHit) === "point" ? bestHit : ctx.findNearestPointJxg(e, 12);
+    if (snapped && ctx.pendingRef.current.includes(snapped)) {
+      ctx.flashWarn("\u0110\xE3 ch\u1ECDn \u0111i\u1EC3m n\xE0y \u2014 ch\u1ECDn \u0111i\u1EC3m kh\xE1c ho\u1EB7c click ch\u1ED7 tr\u1ED1ng");
+      return;
+    }
+    if (snapped) {
+      pick = snapped;
+      pickId = ctx.jxgIdToSceneId(snapped);
+    } else {
+      pickId = dispatchAddFreePoint(ctx, x, y);
+      pick = ctx.jxgFromSceneId(pickId);
+    }
+  }
+  if (!pick) return;
+  ctx.pendingRef.current.push(pick);
+  if (pickId) ctx.pendingIdsRef.current.push(pickId);
+  ctx.setPendingCount(ctx.pendingIdsRef.current.length);
+  if (toolDef.key === "angleBisector" && ctx.pendingIdsRef.current.length === 2 && objKind(ctx.pendingRef.current[0]) === "line") {
+    finalizeShape(ctx, toolDef);
+    ctx.clearPending();
+    return;
+  }
+  if (ctx.pendingIdsRef.current.length >= toolDef.needs) {
+    const tk = toolDef.key;
+    if (tk === "rotate" || tk === "dilate" || tk === "regularPolygon") {
+      const cx = (e.clientX ?? 0) + 8;
+      const cy = (e.clientY ?? 0) + 8;
+      ctx.pendingTransformRef.current = {
+        tool: tk,
+        pendingIds: ctx.pendingIdsRef.current.slice(),
+        anchorScreen: { x: cx, y: cy }
+      };
+      ctx.emitTransform({ tool: tk, anchor: { x: cx, y: cy } });
+      return;
+    }
+    if (tk === "translate" || tk === "reflectLine" || tk === "reflectPoint") {
+      finalizeTransform(ctx, tk, ctx.pendingIdsRef.current.slice(), 0);
+      ctx.clearPending();
+      return;
+    }
+    finalizeShape(ctx, toolDef);
+    ctx.clearPending();
+  } else {
+    ctx.refreshPreview();
+  }
+}
+
+// src/stamps/geometry-2d/editor/handlers/pointerDown/index.ts
+function handleDown(ctx, e) {
+  if (!ctx.boardRef.current) return;
+  const t = ctx.toolRef.current;
+  if (t === "move") return handleMoveTool(ctx, e);
+  if (t === "select") return handleSelectTool(ctx, e);
+  const toolDef = TOOLS.find((td) => td.key === t);
+  if (!toolDef) return;
+  const coords = ctx.boardRef.current.getUsrCoordsOfMouse(e);
+  const x = coords[0], y = coords[1];
+  const hits = ctx.objectsAt(e).map(ctx.promoteLabel).filter((o) => o !== ctx.axisObjsRef.current.x && o !== ctx.axisObjsRef.current.y).filter((o) => ctx.jxgIdToSceneId(o) != null);
+  const bestHit = hits.find((o) => objKind(o) === "point") ?? hits[0] ?? null;
+  if (t === "point") return handlePointTool(ctx, e, x, y, hits);
+  if (handleSingleTargetTool(ctx, t, toolDef, e, bestHit)) return;
+  if (handlePolygonTool(ctx, t, toolDef, e, x, y, bestHit)) return;
+  handleMultiClickTool(ctx, toolDef, e, x, y, hits, bestHit);
+}
+
+// src/stamps/geometry-2d/editor/handlers/pointerMove.ts
+function handleMove(ctx, e) {
+  if (ctx.toolRef.current === "select" && ctx.marqueeRef.current) {
+    const sc = ctx.screenCoordsOf(e);
+    if (sc && ctx.boardRef.current) {
+      const [sx, sy] = sc;
+      const { startSx, startSy } = ctx.marqueeRef.current;
+      const b = ctx.boardRef.current;
+      const ux1 = b.screenCoords2userCoords?.([Math.min(startSx, sx), Math.min(startSy, sy)]) ?? null;
+      const ux2 = b.screenCoords2userCoords?.([Math.max(startSx, sx), Math.max(startSy, sy)]) ?? null;
+      const toUsr = (px, py) => {
+        const ox = b.origin?.scrCoords?.[1] ?? 0;
+        const oy = b.origin?.scrCoords?.[2] ?? 0;
+        const ux = (px - ox) / b.unitX;
+        const uy = (oy - py) / b.unitY;
+        return [ux, uy];
+      };
+      const [x1u, y1u] = ux1 && ux1.length >= 2 ? [ux1[0], ux1[1]] : toUsr(Math.min(startSx, sx), Math.min(startSy, sy));
+      const [x2u, y2u] = ux2 && ux2.length >= 2 ? [ux2[0], ux2[1]] : toUsr(Math.max(startSx, sx), Math.max(startSy, sy));
+      const rect = ctx.marqueeRef.current.rect;
+      if (rect) {
+        safeJsx("handlers.removeObject(marquee.prevRect)", () => ctx.boardRef.current.removeObject(rect));
+      }
+      safeJsx("handlers.createMarqueePolygon", () => {
+        ctx.marqueeRef.current.rect = ctx.boardRef.current.create("polygon", [
+          [x1u, y1u],
+          [x2u, y1u],
+          [x2u, y2u],
+          [x1u, y2u]
+        ], {
+          fillColor: "#06b6d4",
+          fillOpacity: 0.08,
+          borders: { strokeColor: "#06b6d4", strokeWidth: 1, dash: 2 },
+          vertices: { visible: false },
+          fixed: true,
+          highlight: false,
+          withLabel: false
+        });
+      });
+    }
+    return;
+  }
+  const ph = ctx.phantomRef.current;
+  if (!ph || !ctx.boardRef.current) return;
+  if (ctx.previewRafRef.current != null) return;
+  ctx.previewRafRef.current = requestAnimationFrame(() => {
+    ctx.previewRafRef.current = null;
+    if (!ctx.boardRef.current || !ctx.phantomRef.current) return;
+    safeJsx("handlers.phantomMove", () => {
+      const coords = ctx.boardRef.current.getUsrCoordsOfMouse(e);
+      const JXG = ctx.jxgRef.current;
+      if (!JXG) return;
+      ctx.phantomRef.current.setPositionDirectly(JXG.COORDS_BY_USER, [coords[0], coords[1]]);
+      ctx.boardRef.current.update();
+    });
+  });
+}
+
+// src/stamps/geometry-2d/editor/handlers/pointerUp.ts
+function handleUp(ctx, e) {
+  const t = ctx.toolRef.current;
+  if (t === "select") {
+    const mq = ctx.marqueeRef.current;
+    ctx.marqueeRef.current = null;
+    ctx.moveDownRef.current = null;
+    if (!mq) return;
+    const sc2 = ctx.screenCoordsOf(e);
+    if (!sc2) return;
+    const [ex, ey] = sc2;
+    if (mq.rect) {
+      safeJsx("handlers.removeObject(marquee.rect)", () => ctx.boardRef.current?.removeObject(mq.rect));
+    }
+    if (Math.hypot(ex - mq.startSx, ey - mq.startSy) < 4) return;
+    const x1 = Math.min(mq.startSx, ex), x2 = Math.max(mq.startSx, ex);
+    const y1 = Math.min(mq.startSy, ey), y2 = Math.max(mq.startSy, ey);
+    const board = ctx.boardRef.current;
+    if (!board) return;
+    const list = board.objectsList || [];
+    for (const o of list) {
+      if (o === ctx.axisObjsRef.current.x || o === ctx.axisObjsRef.current.y) continue;
+      const kind = objKind(o);
+      if (kind === "point") {
+        const pc = o.coords?.scrCoords;
+        if (!pc) continue;
+        if (pc[1] >= x1 && pc[1] <= x2 && pc[2] >= y1 && pc[2] <= y2) {
+          const sid = ctx.jxgIdToSceneId(o);
+          if (sid && !ctx.selectedSetRef.current.has(sid)) {
+            ctx.selectedSetRef.current.add(sid);
+          }
+        }
+      } else if (kind === "line" || kind === "circle") {
+        const defs = [o.point1, o.point2, o.center, o.midpoint, o.point3].filter(Boolean);
+        const anyInside = defs.some((p) => {
+          const pc = p?.coords?.scrCoords;
+          return pc && pc[1] >= x1 && pc[1] <= x2 && pc[2] >= y1 && pc[2] <= y2;
+        });
+        if (anyInside) {
+          const sid = ctx.jxgIdToSceneId(o);
+          if (sid && !ctx.selectedSetRef.current.has(sid)) {
+            ctx.selectedSetRef.current.add(sid);
+          }
+        }
+      }
+    }
+    ctx.setSelectionTick((tt) => tt + 1);
+    safeJsx("handlers.board.update(marquee)", () => board.update());
+    return;
+  }
+  if (t !== "move") return;
+  const start = ctx.moveDownRef.current;
+  ctx.moveDownRef.current = null;
+  if (!start) return;
+  const sc = ctx.screenCoordsOf(e);
+  if (!sc) return;
+  const [sx, sy] = sc;
+  const moved = Math.hypot(sx - start.sx, sy - start.sy);
+  if (moved > 4) return;
+  const hits = ctx.objectsAt(e).map(ctx.promoteLabel).filter((o) => o !== ctx.axisObjsRef.current.x && o !== ctx.axisObjsRef.current.y).filter((o) => ctx.jxgIdToSceneId(o) != null);
+  const best = hits.find((o) => objKind(o) === "point") ?? ctx.findNearestPointJxg(e, 12) ?? hits[0] ?? null;
+  if (!best) {
+    ctx.lastMoveClickRef.current = { id: null, time: 0 };
+    return;
+  }
+  const bestId = ctx.jxgIdToSceneId(best);
+  const now = Date.now();
+  const isDouble = bestId !== null && ctx.lastMoveClickRef.current.id === bestId && now - ctx.lastMoveClickRef.current.time < 400;
+  ctx.lastMoveClickRef.current = { id: bestId, time: now };
+  if (!isDouble) return;
+  const cx = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
+  const cy = e.clientY ?? e.touches?.[0]?.clientY ?? 0;
+  if (!bestId) return;
+  ctx.emitSelect({ id: bestId, anchorScreen: { x: cx + 8, y: cy + 8 } });
+}
+
+// src/stamps/geometry-2d/editor/hitTest.ts
+function findNearestPoint(state, pointCoord, x, y, tolPx, excludeIds = /* @__PURE__ */ new Set()) {
+  let best = null;
+  let bestDistSq = tolPx * tolPx;
+  for (const obj of listObjects(state)) {
+    if (obj.kind !== "point" && obj.kind !== "intersection") continue;
+    if (excludeIds.has(obj.id)) continue;
+    const coord = pointCoord(obj.id);
+    if (!coord) continue;
+    const dx = coord[0] - x;
+    const dy = coord[1] - y;
+    const d2 = dx * dx + dy * dy;
+    if (d2 < bestDistSq) {
+      bestDistSq = d2;
+      best = obj;
+    }
+  }
+  return best;
+}
+function screenCoordsOf(board, container, evt) {
+  if (!board) return null;
+  try {
+    const mp = board.getMousePosition ? board.getMousePosition(evt) : null;
+    if (mp && mp.length >= 2) return [mp[0], mp[1]];
+  } catch {
+  }
+  if (container) {
+    const rect = container.getBoundingClientRect();
+    const cx = evt.clientX ?? evt.touches?.[0]?.clientX ?? 0;
+    const cy = evt.clientY ?? evt.touches?.[0]?.clientY ?? 0;
+    return [cx - rect.left, cy - rect.top];
+  }
+  return null;
+}
+function objectsAt(board, container, evt, excludes) {
+  const sc = screenCoordsOf(board, container, evt);
+  if (!board || !sc) return [];
+  const [sx, sy] = sc;
+  const excludeSet = /* @__PURE__ */ new Set();
+  for (const e of excludes) if (e) excludeSet.add(e);
+  const out = [];
+  safeJsx("hitTest.objectsAt", () => {
+    for (const o of board.objectsList || []) {
+      if (excludeSet.has(o)) continue;
+      if (o && typeof o.hasPoint === "function" && o.hasPoint(sx, sy)) out.push(o);
+    }
+  });
+  return out;
+}
+function findNearestJxgPoint(board, container, state, jxgFromSceneId2, evt, tolPx = 12) {
+  const sc = screenCoordsOf(board, container, evt);
+  if (!board || !sc) return null;
+  const [sx, sy] = sc;
+  const pointCoord = (id) => {
+    const j = jxgFromSceneId2(id);
+    const sc2 = j?.coords?.scrCoords;
+    return sc2 ? [sc2[1], sc2[2]] : null;
+  };
+  const result = findNearestPoint(state, pointCoord, sx, sy, tolPx);
+  return result ? jxgFromSceneId2(result.id) : null;
+}
+function promoteToLabelOwner(board, o) {
+  if (!o) return o;
+  const t = (o.elType || o.type || "").toString().toLowerCase();
+  if (t !== "text" || !board) return o;
+  const promoted = safeJsx("hitTest.promoteToLabelOwner", () => {
+    for (const c of board.objectsList || []) {
+      if (c.label === o) return c;
+    }
+    return null;
+  }, null);
+  return promoted ?? o;
+}
+
+// src/stamps/geometry-2d/editor/snapshot.ts
+function buildObjectSnapshot(state, id, anchorScreen) {
+  const obj = state.objects[id];
+  if (!obj) return null;
+  const k = obj.kind;
+  if (k !== "point" && k !== "line" && k !== "circle" && k !== "segment" && k !== "ray" && k !== "vector") {
+    return null;
+  }
+  const a = obj.attrs;
+  const jKind = k === "point" ? "point" : k === "circle" ? "circle" : "line";
+  return {
+    id,
+    kind: jKind,
+    name: obj.label,
+    color: a.color ?? "#0f172a",
+    width: a.width ?? 2,
+    dash: a.dash ?? 0,
+    face: a.face ?? "o",
+    showLabel: a.showLabel ?? true,
+    showValue: a.showValue ?? false,
+    screenCoords: anchorScreen
+  };
+}
+
+// src/stamps/geometry-2d/editor/preview.ts
+var PREVIEW_STYLE = {
+  strokeColor: "#3b82f6",
+  strokeWidth: 1.5,
+  strokeOpacity: 0.65,
+  dash: 2,
+  fixed: true,
+  highlight: false,
+  withLabel: false
+};
+var CIRCLE_PREVIEW_STYLE = {
+  ...PREVIEW_STYLE,
+  fillColor: "none",
+  fillOpacity: 0
+};
+function buildPreviewShape(board, toolDef, picks, phantom) {
+  if (!board) return null;
+  return safeJsx("preview.buildPreviewShape", () => {
+    switch (toolDef.key) {
+      case "segment":
+      case "midpoint":
+      case "distance":
+        return board.create("segment", [picks[0], phantom], PREVIEW_STYLE);
+      case "line":
+        return board.create("line", [picks[0], phantom], PREVIEW_STYLE);
+      case "ray":
+        return board.create("line", [picks[0], phantom], {
+          ...PREVIEW_STYLE,
+          straightFirst: false,
+          straightLast: true
+        });
+      case "vector":
+        return board.create("arrow", [picks[0], phantom], PREVIEW_STYLE);
+      case "circleCenter":
+        return board.create("circle", [picks[0], phantom], CIRCLE_PREVIEW_STYLE);
+      case "circle3":
+        if (picks.length === 1) return board.create("circle", [picks[0], phantom], CIRCLE_PREVIEW_STYLE);
+        if (picks.length === 2) {
+          return board.create("circumcircle", [picks[0], picks[1], phantom], CIRCLE_PREVIEW_STYLE);
+        }
+        return null;
+      case "angle":
+        if (picks.length === 1) return board.create("segment", [picks[0], phantom], PREVIEW_STYLE);
+        if (picks.length === 2) {
+          return board.create("angle", [picks[0], picks[1], phantom], {
+            ...PREVIEW_STYLE,
+            radius: 1,
+            fillColor: "#22c55e",
+            fillOpacity: 0.15
+          });
+        }
+        return null;
+      case "perpBisector":
+        return board.create("segment", [picks[0], phantom], PREVIEW_STYLE);
+      case "angleBisector":
+        if (picks.length === 1) return board.create("segment", [picks[0], phantom], PREVIEW_STYLE);
+        if (picks.length === 2) return board.create("bisector", [picks[0], picks[1], phantom], PREVIEW_STYLE);
+        return null;
+      case "perpendicular":
+      case "parallel":
+      case "tangent": {
+        if (picks.length !== 1) return null;
+        const k = objKind(picks[0]);
+        if (k === "line" && toolDef.key !== "tangent") {
+          return board.create(toolDef.key, [picks[0], phantom], PREVIEW_STYLE);
+        }
+        if (k === "circle" && toolDef.key === "tangent") {
+          const glider = board.create("glider", [phantom.X(), phantom.Y(), picks[0]], {
+            visible: false,
+            withLabel: false
+          });
+          return board.create("tangent", [glider], PREVIEW_STYLE);
+        }
+        return null;
+      }
+      default:
+        return null;
+    }
+  }, null);
+}
+function createPhantomPoint(board) {
+  if (!board) return null;
+  return safeJsx("preview.createPhantomPoint", () => board.create("point", [0, 0], {
+    visible: false,
+    fixed: true,
+    withLabel: false,
+    name: ""
+  }), null);
+}
+
+// src/stamps/geometry-2d/editor/previewActions.ts
+function clearPreviewSegs(board, previewSegRef) {
+  if (!board) return;
+  for (const s of previewSegRef.current) {
+    safeJsx("previewActions.removePreviewSeg", () => board.removeObject(s));
+  }
+  previewSegRef.current = [];
+}
+function removePhantom(board, refs) {
+  if (!board) return;
+  if (refs.previewShapeRef.current) {
+    safeJsx("previewActions.removePreviewShape", () => board.removeObject(refs.previewShapeRef.current));
+    refs.previewShapeRef.current = null;
+  }
+  if (refs.phantomRef.current) {
+    safeJsx("previewActions.removePhantom", () => board.removeObject(refs.phantomRef.current));
+    refs.phantomRef.current = null;
+  }
+}
+function refreshPreviewShape(board, toolSM, refs) {
+  if (!board) return;
+  if (refs.previewShapeRef.current) {
+    safeJsx("previewActions.removePreviewShape", () => board.removeObject(refs.previewShapeRef.current));
+    refs.previewShapeRef.current = null;
+  }
+  const t = toolSM.toolRef.current;
+  const toolDef = TOOLS.find((td) => td.key === t);
+  if (!toolDef) return;
+  const picks = refs.pendingRef.current;
+  if (picks.length === 0 || toolDef.needs <= 0) return;
+  if (picks.length >= toolDef.needs) return;
+  if (!refs.phantomRef.current) {
+    refs.phantomRef.current = createPhantomPoint(board);
+    if (!refs.phantomRef.current) return;
+  }
+  refs.previewShapeRef.current = buildPreviewShape(board, toolDef, picks, refs.phantomRef.current);
+}
+
+// src/stamps/geometry-2d/editor/attrMapping.ts
+function applyMutatePatch(store, id, patch) {
+  if (patch.remove) {
+    store.dispatch({ type: "DELETE", payload: { id } });
+    return;
+  }
+  if (!patch.attrs) return;
+  const { name, withLabel, strokeColor, fillColor, strokeWidth, ...rest } = patch.attrs;
+  if (typeof name === "string") {
+    store.dispatch({ type: "UPDATE", payload: { id, patch: { label: name } } });
+  }
+  const mapped = { ...rest };
+  if (strokeColor !== void 0 && mapped.color === void 0) mapped.color = strokeColor;
+  if (fillColor !== void 0 && mapped.color === void 0) mapped.color = fillColor;
+  if (strokeWidth !== void 0 && mapped.width === void 0) mapped.width = strokeWidth;
+  if (withLabel !== void 0 && mapped.showLabel === void 0) mapped.showLabel = withLabel;
+  if (Object.keys(mapped).length > 0) {
+    store.dispatch({ type: "UPDATE_ATTRS", payload: { id, patch: mapped } });
+  }
+}
+
+// src/stamps/geometry-2d/editor/buildHandle.ts
+function buildMiniBoardHandle(d) {
+  return {
+    getContainer: () => d.containerRef.current,
+    getBbox: () => d.boardRef.current?.getBoundingBox() ?? [-10, 10, 10, -10],
+    getState: () => d.store.getState(),
+    getStore: () => d.store,
+    highlight: (id) => {
+      d.rendererRef.current?.highlight(id);
+    },
+    snapshotObject: (id, anchorScreen) => buildObjectSnapshot(d.store.getState(), id, anchorScreen),
+    mutateObject: (id, patch) => applyMutatePatch(d.store, id, patch),
+    getAllPointNames: () => listObjects(d.store.getState()).filter((o) => o.kind === "point" || o.kind === "intersection").map((o) => o.label),
+    onSelect: (cb) => {
+      d.selectSubsRef.current.add(cb);
+      return () => {
+        d.selectSubsRef.current.delete(cb);
+      };
+    },
+    onTransformParam: (cb) => {
+      d.transformSubsRef.current.add(cb);
+      return () => {
+        d.transformSubsRef.current.delete(cb);
+      };
+    },
+    onSelectionState: (cb) => {
+      d.selectionStateSubsRef.current.add(cb);
+      return () => {
+        d.selectionStateSubsRef.current.delete(cb);
+      };
+    },
+    confirmTransformParam: (value) => {
+      const info = d.pendingTransformRef.current;
+      if (info && d.ctxRef.current) {
+        safeJsx(
+          "buildHandle.finalizeTransform",
+          () => finalizeTransform(d.ctxRef.current, info.tool, info.pendingIds, value)
+        );
+      }
+      d.pendingTransformRef.current = null;
+      d.emitTransform(null);
+      d.clearPending();
+    },
+    cancelTransformParam: () => {
+      d.pendingTransformRef.current = null;
+      d.emitTransform(null);
+      d.clearPending();
+    },
+    getSelectionSize: () => d.selectedSetRef.current.size,
+    clearSelection: d.clearSelection,
+    deleteSelection: d.deleteSelection
+  };
+}
+
+// src/stamps/geometry-2d/editor/idResolvers.ts
+function jxgFromSceneId(renderer, id) {
+  if (!renderer) return null;
+  const elements = renderer.elements;
+  if (!elements) return null;
+  const m = /^(.+):border:(\d+)$/.exec(id);
+  if (m) {
+    const poly = elements.get(m[1]);
+    const idx = parseInt(m[2], 10);
+    const borders = poly?.borders;
+    if (Array.isArray(borders) && borders[idx]) return borders[idx];
+    return null;
+  }
+  return elements.get(id) ?? null;
+}
+function jxgIdToSceneId(renderer, idMap, jxgObj) {
+  if (!jxgObj?.id) return null;
+  const direct = idMap.get(String(jxgObj.id));
+  if (direct) return direct;
+  if (!renderer) return null;
+  const elements = renderer.elements;
+  if (!elements) return null;
+  for (const [sid, el] of elements) {
+    if (el === jxgObj) return sid;
+    const borders = el?.borders;
+    if (Array.isArray(borders)) {
+      const idx = borders.indexOf(jxgObj);
+      if (idx >= 0) return `${sid}:border:${idx}`;
+    }
+  }
+  return null;
+}
+function useAxisGridSync({
+  boardRef,
+  axisObjsRef,
+  isDarkRef,
+  showAxis,
+  showGrid
+}) {
+  useEffect(() => {
+    const b = boardRef.current;
+    if (!b) return;
+    safeJsx("useAxisGridSync.toggleAxis", () => {
+      if (axisObjsRef.current.x) {
+        safeJsx("useAxisGridSync.removeAxisX", () => b.removeObject(axisObjsRef.current.x));
+        axisObjsRef.current.x = void 0;
+      }
+      if (axisObjsRef.current.y) {
+        safeJsx("useAxisGridSync.removeAxisY", () => b.removeObject(axisObjsRef.current.y));
+        axisObjsRef.current.y = void 0;
+      }
+      if (showAxis) {
+        axisObjsRef.current.x = b.create("axis", [[0, 0], [1, 0]], { strokeColor: themeAxis(isDarkRef.current), name: "", withLabel: false });
+        axisObjsRef.current.y = b.create("axis", [[0, 0], [0, 1]], { strokeColor: themeAxis(isDarkRef.current), name: "", withLabel: false });
+      }
+      b.update();
+    });
+  }, [showAxis]);
+  useEffect(() => {
+    const b = boardRef.current;
+    if (!b) return;
+    safeJsx("useAxisGridSync.toggleGrid", () => {
+      for (const o of Object.values(b.objects || {})) {
+        if (o && (o.elType === "grid" || o.type === "grid" || o.visProp && o.visProp.type === "grid")) {
+          safeJsx("useAxisGridSync.removeGrid", () => b.removeObject(o));
+        }
+      }
+      if (showGrid) b.create("grid", [], { strokeColor: themeGrid(isDarkRef.current), strokeOpacity: 1 });
+      b.update();
+    });
+  }, [showGrid]);
+}
+function useEditorShortcuts({
+  store,
+  pendingIdsRef,
+  selectedSetRef,
+  clearPending,
+  clearSelection,
+  deleteSelection
+}) {
+  useEffect(() => {
+    const onKey = (e) => {
+      const ae = document.activeElement;
+      const inField = !!(ae && (ae.tagName === "INPUT" || ae.tagName === "TEXTAREA" || ae.isContentEditable));
+      const lk = e.key.toLowerCase();
+      if ((e.metaKey || e.ctrlKey) && lk === "z" && !e.shiftKey) {
+        if (inField) return;
+        e.preventDefault();
+        e.stopPropagation();
+        store.undo();
+        return;
+      }
+      if ((e.metaKey || e.ctrlKey) && (lk === "z" && e.shiftKey || lk === "y" && !e.shiftKey)) {
+        if (inField) return;
+        e.preventDefault();
+        e.stopPropagation();
+        store.redo();
+        return;
+      }
+      if (e.key === "Escape" && !inField) {
+        if (pendingIdsRef.current.length > 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          clearPending();
+        }
+        if (selectedSetRef.current.size > 0) {
+          e.preventDefault();
+          e.stopPropagation();
+          clearSelection();
+        }
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && !inField && selectedSetRef.current.size > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        deleteSelection();
+      }
+    };
+    window.addEventListener("keydown", onKey, { capture: true });
+    return () => window.removeEventListener("keydown", onKey, { capture: true });
+  }, [store, pendingIdsRef, selectedSetRef, clearPending, clearSelection, deleteSelection]);
+}
+function useJxgSceneIdMap({ store, rendererRef }) {
+  const jxgIdToSceneRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const rebuild = () => {
+      const r = rendererRef.current;
+      if (!r) return;
+      const elements = r.elements;
+      const next = /* @__PURE__ */ new Map();
+      if (elements) {
+        for (const [sid, jxg] of elements) {
+          const jid = jxg?.id;
+          if (jid) next.set(String(jid), sid);
+        }
+      }
+      jxgIdToSceneRef.current = next;
+    };
+    rebuild();
+    return store.subscribe(() => rebuild());
+  }, [store, rendererRef]);
+  return { jxgIdToSceneRef };
+}
+var MiniBoard2D = forwardRef(function MiniBoard2D2({ onReady, store, selectedTool, showAxis, showGrid, isDark, toast }, ref) {
+  const isDarkRef = useRef(!!isDark);
+  isDarkRef.current = !!isDark;
+  const containerId = useId().replace(/:/g, "_") + "_jxgmini";
+  const containerRef = useRef(null);
+  const boardRef = useRef(null);
+  const jxgRef = useRef(null);
+  const rendererRef = useRef(null);
+  const axisObjsRef = useRef({});
+  const toolSM = useToolStateMachine(selectedTool);
+  const initialMeta = store.getState().meta;
+  const initialView = initialMeta.domain === "2d" ? initialMeta.view : DEFAULT_VIEW_2D;
+  const showAxisRef = useRef(showAxis);
+  showAxisRef.current = showAxis;
+  const showGridRef = useRef(showGrid);
+  showGridRef.current = showGrid;
+  const selectedSetRef = useRef(/* @__PURE__ */ new Set());
+  const [selectionTick, setSelectionTick] = useState(0);
+  useEffect(() => {
+    const ids = [...selectedSetRef.current];
+    rendererRef.current?.highlight(ids);
+    const anchor = lastClickClientRef.current ?? { x: 0, y: 0 };
+    const snap = ids.length === 0 ? null : { ids, anchor: { x: anchor.x + 8, y: anchor.y + 8 } };
+    selectionStateSubsRef.current.forEach(
+      (cb) => safeJsx("MiniBoard.emitSelectionState.cb", () => cb(snap))
+    );
+  }, [selectionTick]);
+  const pendingRef = useRef([]);
+  const previewSegRef = useRef([]);
+  const phantomRef = useRef(null);
+  const previewShapeRef = useRef(null);
+  const previewRafRef = useRef(null);
+  const marqueeRef = useRef(null);
+  const moveDownRef = useRef(null);
+  const lastMoveClickRef = useRef({ id: null, time: 0 });
+  const lastClickClientRef = useRef(null);
+  const pendingTransformRef = useRef(null);
+  const selectSubsRef = useRef(/* @__PURE__ */ new Set());
+  const transformSubsRef = useRef(/* @__PURE__ */ new Set());
+  const selectionStateSubsRef = useRef(/* @__PURE__ */ new Set());
+  const { jxgIdToSceneRef } = useJxgSceneIdMap({ store, rendererRef });
+  const jxgFromSceneId2 = useCallback(
+    (id) => jxgFromSceneId(rendererRef.current, id),
+    []
+  );
+  const jxgIdToSceneId2 = useCallback(
+    (jxgObj) => jxgIdToSceneId(rendererRef.current, jxgIdToSceneRef.current, jxgObj),
+    [jxgIdToSceneRef]
+  );
+  const screenCoordsOf2 = useCallback(
+    (evt) => screenCoordsOf(boardRef.current, containerRef.current, evt),
+    []
+  );
+  const objectsAt2 = useCallback(
+    (evt) => objectsAt(boardRef.current, containerRef.current, evt, [
+      phantomRef.current,
+      previewShapeRef.current,
+      ...previewSegRef.current
+    ]),
+    []
+  );
+  const findNearestPointJxg = useCallback(
+    (evt, tolPx = 12) => findNearestJxgPoint(boardRef.current, containerRef.current, store.getState(), jxgFromSceneId2, evt, tolPx),
+    [jxgFromSceneId2, store]
+  );
+  const promoteLabel = useCallback(
+    (o) => promoteToLabelOwner(boardRef.current, o),
+    []
+  );
+  const toggleSelect = useCallback((id, additive) => {
+    if (!additive) {
+      selectedSetRef.current.clear();
+      selectedSetRef.current.add(id);
+    } else if (selectedSetRef.current.has(id)) selectedSetRef.current.delete(id);
+    else selectedSetRef.current.add(id);
+    rendererRef.current?.highlight([...selectedSetRef.current]);
+    setSelectionTick((t) => t + 1);
+  }, []);
+  const clearSelection = useCallback(() => {
+    selectedSetRef.current.clear();
+    rendererRef.current?.highlight(null);
+    setSelectionTick((t) => t + 1);
+  }, []);
+  const deleteSelection = useCallback(() => {
+    if (selectedSetRef.current.size === 0) return;
+    store.transaction((dispatch) => {
+      for (const id of selectedSetRef.current) dispatch({ type: "DELETE", payload: { id } });
+    });
+    selectedSetRef.current.clear();
+    rendererRef.current?.highlight(null);
+    setSelectionTick((t) => t + 1);
+  }, [store]);
+  const clearPreviewSegs2 = useCallback(
+    () => clearPreviewSegs(boardRef.current, previewSegRef),
+    []
+  );
+  const removePhantom2 = useCallback(
+    () => removePhantom(boardRef.current, { previewShapeRef, phantomRef }),
+    []
+  );
+  const clearPending = useCallback(() => {
+    removePhantom2();
+    clearPreviewSegs2();
+    pendingRef.current = [];
+    toolSM.clearPending();
+  }, [clearPreviewSegs2, removePhantom2, toolSM]);
+  const refreshPreview = useCallback(
+    () => refreshPreviewShape(boardRef.current, toolSM, {
+      phantomRef,
+      previewShapeRef,
+      pendingRef
+    }),
+    [toolSM]
+  );
+  const [, setWarn] = useState(null);
+  const warnTimerRef = useRef(null);
+  const flashWarn = useCallback((msg) => {
+    if (warnTimerRef.current) clearTimeout(warnTimerRef.current);
+    setWarn(msg);
+    warnTimerRef.current = setTimeout(() => setWarn(null), 1800);
+  }, []);
+  useEffect(() => () => {
+    if (warnTimerRef.current) clearTimeout(warnTimerRef.current);
+  }, []);
+  const nextLabelFor = useCallback(
+    (kind) => nextLabel(store.getState(), kind),
+    [store]
+  );
+  const buildSnapshot = useCallback(
+    (id, anchorScreen) => buildObjectSnapshot(store.getState(), id, anchorScreen),
+    [store]
+  );
+  const emitSelect = useCallback((info) => {
+    const snap = buildSnapshot(info.id, info.anchorScreen);
+    if (!snap) return;
+    selectSubsRef.current.forEach((cb) => safeJsx("MiniBoard.emitSelect.cb", () => cb(snap)));
+  }, [buildSnapshot]);
+  const emitTransform = useCallback((info) => {
+    transformSubsRef.current.forEach((cb) => safeJsx("MiniBoard.emitTransform.cb", () => cb(info)));
+  }, []);
+  const ctxRef = useRef(null);
+  ctxRef.current = {
+    boardRef,
+    toolRef: toolSM.toolRef,
+    pendingRef,
+    pendingIdsRef: toolSM.pendingIdsRef,
+    previewSegRef,
+    axisObjsRef,
+    selectedSetRef,
+    marqueeRef,
+    moveDownRef,
+    lastMoveClickRef,
+    lastClickClientRef,
+    pendingTransformRef,
+    phantomRef,
+    previewShapeRef,
+    previewRafRef,
+    jxgRef,
+    store,
+    jxgIdToSceneId: jxgIdToSceneId2,
+    jxgFromSceneId: jxgFromSceneId2,
+    screenCoordsOf: screenCoordsOf2,
+    objectsAt: objectsAt2,
+    promoteLabel,
+    findNearestPointJxg,
+    toggleSelect,
+    clearSelection,
+    nextLabel: nextLabelFor,
+    clearPending,
+    clearPreviewSegs: clearPreviewSegs2,
+    refreshPreview,
+    flashWarn,
+    toast,
+    emitTransform,
+    emitSelect,
+    setPendingCount: () => {
+    },
+    setSelectionTick: (fn) => setSelectionTick(fn)
+  };
+  useEditorShortcuts({
+    store,
+    pendingIdsRef: toolSM.pendingIdsRef,
+    selectedSetRef,
+    clearPending,
+    clearSelection,
+    deleteSelection
+  });
+  useAxisGridSync({ boardRef, axisObjsRef, isDarkRef, showAxis, showGrid });
+  const handleToolChange = useCallback((t) => {
+    clearPending();
+    toolSM.setTool(t);
+    const b = boardRef.current;
+    if (b) safeJsx("MiniBoard.setPanForTool", () => {
+      if (b.attr?.pan) b.attr.pan.enabled = t !== "select";
+    });
+  }, [clearPending, toolSM]);
+  useEffect(() => {
+    if (toolSM.toolRef.current !== selectedTool) handleToolChange(selectedTool);
+  }, [selectedTool]);
+  useEffect(() => {
+    if (typeof window === "undefined" || !containerRef.current) return;
+    let cancelled = false;
+    let wheelCleanup = null;
+    let freeBoard = null;
+    void (async () => {
+      const { JXG, board, cleanup } = await initJxgBoard(containerId, {
+        label: "MiniBoard.2d",
+        defaults: { disableElementHighlight: true },
+        boardOptions: {
+          boundingbox: initialView.bbox,
+          axis: false,
+          grid: false,
+          showCopyright: false,
+          showNavigation: true,
+          keepAspectRatio: true,
+          pan: { enabled: true, needShift: false },
+          zoom: { wheel: false },
+          precision: { hasPoint: 8, mouse: 4, touch: 16 }
+        },
+        extraOptionTweaks: (opts) => {
+          if (opts.label) opts.label.strokeColor = themeLabel(isDarkRef.current);
+          if (opts.text) opts.text.strokeColor = themeLabel(isDarkRef.current);
+        }
+      });
+      if (cancelled || !containerRef.current) {
+        cleanup();
+        return;
+      }
+      jxgRef.current = JXG;
+      boardRef.current = board;
+      freeBoard = cleanup;
+      rendererRef.current = new JxgRenderer(store, board, {
+        theme: paletteFor(isDarkRef.current)
+      });
+      if (containerRef.current) {
+        wheelCleanup = attachJxgWheelZoom(containerRef.current, board, "MiniBoard.2d");
+      }
+      if (showAxisRef.current) safeJsx("MiniBoard.initAxes", () => {
+        axisObjsRef.current.x = board.create("axis", [[0, 0], [1, 0]], { strokeColor: themeAxis(isDarkRef.current), name: "", withLabel: false });
+        axisObjsRef.current.y = board.create("axis", [[0, 0], [0, 1]], { strokeColor: themeAxis(isDarkRef.current), name: "", withLabel: false });
+      });
+      if (showGridRef.current) safeJsx(
+        "MiniBoard.initGrid",
+        () => board.create("grid", [], { strokeColor: themeGrid(isDarkRef.current), strokeOpacity: 1 })
+      );
+      const fire = (h) => (e) => {
+        if (ctxRef.current) h(ctxRef.current, e);
+      };
+      board.on("down", fire(handleDown));
+      board.on("up", fire(handleUp));
+      board.on("move", fire(handleMove));
+      board.on("move", (e) => {
+        const container = containerRef.current;
+        if (!container) return;
+        const hits = objectsAt(boardRef.current, container, e, [
+          phantomRef.current,
+          previewShapeRef.current,
+          ...previewSegRef.current
+        ]);
+        container.style.cursor = hits.length > 0 ? "pointer" : "";
+      });
+      onReady?.();
+    })();
+    return () => {
+      cancelled = true;
+      if (wheelCleanup) {
+        wheelCleanup();
+        wheelCleanup = null;
+      }
+      if (previewRafRef.current != null) {
+        cancelAnimationFrame(previewRafRef.current);
+        previewRafRef.current = null;
+      }
+      rendererRef.current?.dispose();
+      rendererRef.current = null;
+      if (freeBoard) {
+        freeBoard();
+        freeBoard = null;
+      }
+      boardRef.current = null;
+    };
+  }, [containerId]);
+  useImperativeHandle(
+    ref,
+    () => buildMiniBoardHandle({
+      containerRef,
+      boardRef,
+      rendererRef,
+      selectSubsRef,
+      transformSubsRef,
+      selectionStateSubsRef,
+      selectedSetRef,
+      pendingTransformRef,
+      ctxRef,
+      store,
+      clearPending,
+      clearSelection,
+      deleteSelection,
+      emitTransform
+    }),
+    [store, clearSelection, deleteSelection, clearPending, emitTransform]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      id: containerId,
+      "data-testid": "jxgmini-container",
+      className: "h-full min-h-0 bg-white",
+      style: { touchAction: "none" }
+    }
+  );
+});
+
+// src/stamps/shared/excalidrawPalette.ts
+var STROKE_PALETTE = [
+  "#1e1e1e",
+  // black
+  "#e03131",
+  // red
+  "#e8590c",
+  // orange
+  "#f08c00",
+  // yellow
+  "#2f9e44",
+  // green
+  "#1971c2",
+  // blue
+  "#9c36b5",
+  // grape
+  "#868e96"
+  // gray
+];
+var DASH_OPTIONS = [
+  { value: 0, label: "N\xE9t li\u1EC1n" },
+  { value: 2, label: "N\xE9t \u0111\u1EE9t" },
+  { value: 1, label: "N\xE9t ch\u1EA5m" }
+];
+var WIDTH_OPTIONS = [1, 2, 3];
+var FACE_OPTIONS = [
+  { value: "o", symbol: "\u25CF" },
+  { value: "circle", symbol: "\u25EF" },
+  { value: "cross", symbol: "\u2715" },
+  { value: "plus", symbol: "\u271A" }
+];
+var SUB_DIGITS = ["\u2080", "\u2081", "\u2082", "\u2083", "\u2084", "\u2085", "\u2086", "\u2087", "\u2088", "\u2089"];
+var SUB_SET = new Set(SUB_DIGITS);
+function toSubscript(n) {
+  return String(n).split("").map((d) => SUB_DIGITS[+d] ?? d).join("");
+}
+function stripTrailingSubscript(s) {
+  let i = s.length;
+  while (i > 0 && SUB_SET.has(s[i - 1])) i--;
+  return s.slice(0, i);
+}
+function disambiguateName(name, existing) {
+  if (!name) return name;
+  if (!existing.has(name)) return name;
+  const base = stripTrailingSubscript(name) || name;
+  for (let n = 2; n < 1e3; n++) {
+    const candidate = base + toSubscript(n);
+    if (!existing.has(candidate)) return candidate;
+  }
+  return name;
+}
+var Icons = {
+  color: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M19 11 L11 3 L3 11 L11 19 Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 11 L21 16 a2 2 0 1 1 -4 0 Z", fill: "currentColor", stroke: "none" })
+  ] }),
+  style: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5", fill: "currentColor" }) }),
+  size: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9", strokeWidth: "1" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "13", x2: "20", y2: "13", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "17", x2: "20", y2: "17", strokeWidth: "3.2" })
+  ] }),
+  name: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: [
+    /* @__PURE__ */ jsx("text", { x: "2", y: "17", fontSize: "14", fontFamily: "serif", fontWeight: "700", children: "A" }),
+    /* @__PURE__ */ jsx("text", { x: "12", y: "17", fontSize: "11", fontFamily: "serif", fontWeight: "700", children: "a" })
+  ] }),
+  trash: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "3,6 5,6 21,6" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 6 l-1 14 a 2 2 0 0 1 -2 2 H 8 a 2 2 0 0 1 -2 -2 l-1 -14" }),
+    /* @__PURE__ */ jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+    /* @__PURE__ */ jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
+  ] })
+};
+var PropertiesPopover = (props) => {
+  const { anchor, onClose, onMutate, isDark, getAllNames } = props;
+  const rootRef = useRef(null);
+  const [section, setSection] = useState(null);
+  const { isMobile } = useIsMobile();
+  const [clamped, setClamped] = useState(null);
+  useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    const margin = 8;
+    if (isMobile) {
+      const rect2 = rootRef.current?.getBoundingClientRect();
+      const w2 = rect2?.width ?? 280;
+      const left2 = Math.max(margin, (window.innerWidth - w2) / 2);
+      const top2 = window.innerHeight - (rect2?.height ?? 80) - margin - 12;
+      setClamped({ left: left2, top: Math.max(margin, top2) });
+      return;
+    }
+    const rect = rootRef.current?.getBoundingClientRect();
+    const w = rect?.width ?? 280;
+    const h = rect?.height ?? 80;
+    const left = Math.max(margin, Math.min(anchor.x, window.innerWidth - w - margin));
+    const top = Math.max(margin, Math.min(anchor.y, window.innerHeight - h - margin));
+    setClamped({ left, top });
+  }, [anchor.x, anchor.y, isMobile, section]);
+  const initialName = props.kind === "point" ? props.currentName : props.kind === "line" || props.kind === "circle" ? props.currentName : "";
+  const [name, setName] = useState(initialName);
+  useEffect(() => {
+    setName(initialName);
+  }, [initialName]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    const onPointerDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointerDown, { capture: true });
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointerDown, { capture: true });
+    };
+  }, [onClose]);
+  const pickColor = (c) => {
+    onMutate({ attrs: { strokeColor: c, fillColor: props.kind === "circle" ? "none" : c, color: c } });
+  };
+  const pickDash = (d) => onMutate({ attrs: { dash: d } });
+  const pickWidth = (w) => onMutate({ attrs: { strokeWidth: w } });
+  const pickFace = (f) => onMutate({ attrs: { face: f } });
+  const currentName = props.kind === "point" || props.kind === "line" || props.kind === "circle" ? props.currentName : "";
+  const commitName = () => {
+    const trimmed = name.trim();
+    if (trimmed === currentName) return;
+    let final = trimmed;
+    if (trimmed) {
+      const others = new Set((getAllNames?.() ?? []).filter((n) => n !== currentName));
+      final = disambiguateName(trimmed, others);
+    }
+    if (final !== name) setName(final);
+    onMutate({ attrs: { name: final } });
+  };
+  const toggleShowLabel = (next) => onMutate({ attrs: { withLabel: next } });
+  const toggleShowValue = (next) => onMutate({ valueLabel: next });
+  const doDelete = () => {
+    onMutate({ remove: true });
+    onClose();
+  };
+  const toggleSection = (s) => setSection((cur) => cur === s ? null : s);
+  const currentColor = props.currentColor;
+  const currentDash = props.currentDash;
+  const currentWidth = props.currentWidth;
+  const colorIndicatorTint = useMemo(() => currentColor, [currentColor]);
+  if (typeof document === "undefined") return null;
+  const PillBtn = ({ id, label, icon, active, onClick, indicatorColor }) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-section": id,
+      "data-pill-btn": id,
+      "aria-label": label,
+      "aria-pressed": !!active,
+      onClick,
+      className: `relative flex h-8 w-8 items-center justify-center rounded-md transition ${active ? "bg-slate-200 text-slate-900" : "text-slate-700 hover:bg-slate-100"}`,
+      children: [
+        icon,
+        indicatorColor && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "absolute bottom-0.5 left-1/2 -translate-x-1/2 h-1 w-4 rounded-full",
+            style: { background: indicatorColor }
+          }
+        )
+      ]
+    }
+  );
+  const pos = clamped ?? { left: anchor.x, top: anchor.y };
+  const node = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-stamp-area": "true",
+      className: `${isDark ? "theme--dark " : ""}fixed z-[2147483600] flex flex-col gap-1.5`,
+      style: { left: pos.left, top: pos.top },
+      role: "dialog",
+      "aria-label": "Thu\u1ED9c t\xEDnh \u0111\u1ED1i t\u01B0\u1EE3ng",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-full border border-slate-300 bg-white px-1.5 py-1 shadow-lg ring-1 ring-black/5", children: [
+          /* @__PURE__ */ jsx(PillBtn, { id: "color", label: "M\xE0u", icon: Icons.color, active: section === "color", onClick: () => toggleSection("color"), indicatorColor: colorIndicatorTint }),
+          /* @__PURE__ */ jsx(PillBtn, { id: "style", label: "Ki\u1EC3u", icon: Icons.style, active: section === "style", onClick: () => toggleSection("style") }),
+          /* @__PURE__ */ jsx(PillBtn, { id: "size", label: "\u0110\u1ED9 d\xE0y", icon: Icons.size, active: section === "size", onClick: () => toggleSection("size") }),
+          /* @__PURE__ */ jsx(PillBtn, { id: "name", label: "T\xEAn", icon: Icons.name, active: section === "name", onClick: () => toggleSection("name") }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-0.5 h-5 w-px bg-slate-200" }),
+          /* @__PURE__ */ jsx(PillBtn, { id: "delete", label: "Xo\xE1", icon: Icons.trash, onClick: doDelete })
+        ] }),
+        section && /* @__PURE__ */ jsxs("div", { className: "w-[220px] rounded-lg border border-slate-300 bg-white p-3 shadow-2xl ring-1 ring-black/5", children: [
+          section === "color" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-slate-500", children: "M\xE0u" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: STROKE_PALETTE.map((c) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": `M\xE0u ${c}`,
+                onClick: () => pickColor(c),
+                className: `h-6 w-6 rounded border ${currentColor === c ? "border-emerald-500 ring-2 ring-emerald-300" : "border-slate-200"}`,
+                style: { background: c }
+              },
+              c
+            )) })
+          ] }),
+          section === "style" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-slate-500", children: "Ki\u1EC3u" }),
+            props.kind === "point" ? /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: FACE_OPTIONS.map((f) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": `H\xECnh ${f.value}`,
+                onClick: () => pickFace(f.value),
+                className: `h-7 w-7 rounded border text-sm ${props.currentFace === f.value ? "border-emerald-500 bg-emerald-50" : "border-slate-300 bg-white"}`,
+                children: f.symbol
+              },
+              f.value
+            )) }) : /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: DASH_OPTIONS.map((d) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": `Ki\u1EC3u ${d.label.toLowerCase()}`,
+                onClick: () => pickDash(d.value),
+                className: `flex-1 rounded border px-1 py-1 text-[11px] ${currentDash === d.value ? "border-emerald-500 bg-emerald-50" : "border-slate-300 bg-white"}`,
+                children: d.label
+              },
+              d.value
+            )) })
+          ] }),
+          section === "size" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-slate-500", children: "\u0110\u1ED9 d\xE0y" }),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: WIDTH_OPTIONS.map((w) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": `\u0110\u1ED9 d\xE0y ${w}`,
+                onClick: () => pickWidth(w),
+                className: `flex-1 rounded border py-1 ${currentWidth === w ? "border-emerald-500 bg-emerald-50" : "border-slate-300 bg-white"}`,
+                children: /* @__PURE__ */ jsx("span", { className: "inline-block rounded bg-slate-800", style: { width: 30, height: w } })
+              },
+              w
+            )) })
+          ] }),
+          section === "name" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-slate-500", children: "T\xEAn" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  value: name,
+                  onChange: (e) => setName(e.target.value),
+                  onBlur: commitName,
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      commitName();
+                    }
+                  },
+                  autoFocus: true,
+                  placeholder: props.kind === "point" ? "A, B, \u2026" : props.kind === "line" ? "a, b, f, \u2026" : "O, c, \u2026",
+                  className: "rounded border border-slate-300 bg-white px-2 py-1 text-sm text-slate-800"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-400", children: "Tr\xF9ng t\xEAn s\u1EBD t\u1EF1 th\xEAm ch\u1EC9 s\u1ED1 (B \u2192 B\u2082)" })
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 text-[12px] text-slate-700", children: [
+              /* @__PURE__ */ jsx("span", { children: "Hi\u1EC3n th\u1ECB t\xEAn" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: props.currentShowLabel !== false,
+                  onChange: (e) => toggleShowLabel(e.target.checked),
+                  "aria-label": "Hi\u1EC3n th\u1ECB t\xEAn"
+                }
+              )
+            ] }),
+            (props.kind === "line" || props.kind === "circle") && /* @__PURE__ */ jsxs("label", { className: "flex items-center justify-between gap-2 text-[12px] text-slate-700", children: [
+              /* @__PURE__ */ jsx("span", { children: "Hi\u1EC3n th\u1ECB gi\xE1 tr\u1ECB" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: !!props.currentShowValue,
+                  onChange: (e) => toggleShowValue(e.target.checked),
+                  "aria-label": "Hi\u1EC3n th\u1ECB gi\xE1 tr\u1ECB"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+  return createPortal(node, document.body);
+};
+var Icons2 = {
+  color: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M19 11 L11 3 L3 11 L11 19 Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 11 L21 16 a2 2 0 1 1 -4 0 Z", fill: "currentColor", stroke: "none" })
+  ] }),
+  trash: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "3,6 5,6 21,6" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 6 l-1 14 a 2 2 0 0 1 -2 2 H 8 a 2 2 0 0 1 -2 -2 l-1 -14" }),
+    /* @__PURE__ */ jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+    /* @__PURE__ */ jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
+  ] })
+};
+var MultiPropertiesPopover = (props) => {
+  const { anchor, count, isDark, onColor, onDelete, onClose } = props;
+  const rootRef = useRef(null);
+  const [section, setSection] = useState(null);
+  const { isMobile } = useIsMobile();
+  const [clamped, setClamped] = useState(null);
+  useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    const margin = 8;
+    if (isMobile) {
+      const rect2 = rootRef.current?.getBoundingClientRect();
+      const w2 = rect2?.width ?? 220;
+      const left2 = Math.max(margin, (window.innerWidth - w2) / 2);
+      const top2 = window.innerHeight - (rect2?.height ?? 80) - margin - 12;
+      setClamped({ left: left2, top: Math.max(margin, top2) });
+      return;
+    }
+    const rect = rootRef.current?.getBoundingClientRect();
+    const w = rect?.width ?? 220;
+    const h = rect?.height ?? 80;
+    const left = Math.max(margin, Math.min(anchor.x, window.innerWidth - w - margin));
+    const top = Math.max(margin, Math.min(anchor.y, window.innerHeight - h - margin));
+    setClamped({ left, top });
+  }, [anchor.x, anchor.y, isMobile, section]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    const onPointerDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointerDown, { capture: true });
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointerDown, { capture: true });
+    };
+  }, [onClose]);
+  const toggleSection = (s) => setSection((cur) => cur === s ? null : s);
+  const doDelete = () => {
+    onDelete();
+    onClose();
+  };
+  if (typeof document === "undefined") return null;
+  const PillBtn = ({ id, label, icon, active, onClick }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-section": id,
+      "data-pill-btn": id,
+      "aria-label": label,
+      "aria-pressed": !!active,
+      onClick,
+      className: `relative flex h-8 w-8 items-center justify-center rounded-md transition ${active ? "bg-slate-200 text-slate-900" : "text-slate-700 hover:bg-slate-100"}`,
+      children: icon
+    }
+  );
+  const pos = clamped ?? { left: anchor.x, top: anchor.y };
+  const node = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-stamp-area": "true",
+      "data-testid": "multi-properties-popover",
+      className: `${isDark ? "theme--dark " : ""}fixed z-[2147483600] flex flex-col gap-1.5`,
+      style: { left: pos.left, top: pos.top },
+      role: "dialog",
+      "aria-label": `Thu\u1ED9c t\xEDnh (${count} \u0111\u1ED1i t\u01B0\u1EE3ng)`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 rounded-full border border-slate-300 bg-white px-1.5 py-1 shadow-lg ring-1 ring-black/5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "px-1 text-[11px] font-medium text-slate-500", children: [
+            count,
+            " \u0111\xE3 ch\u1ECDn"
+          ] }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-0.5 h-5 w-px bg-slate-200" }),
+          /* @__PURE__ */ jsx(PillBtn, { id: "color", label: "\u0110\u1ED5i m\xE0u", icon: Icons2.color, active: section === "color", onClick: () => toggleSection("color") }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-0.5 h-5 w-px bg-slate-200" }),
+          /* @__PURE__ */ jsx(PillBtn, { id: "delete", label: "Xo\xE1 t\u1EA5t c\u1EA3", icon: Icons2.trash, onClick: doDelete })
+        ] }),
+        section === "color" && /* @__PURE__ */ jsx("div", { className: "w-[220px] rounded-lg border border-slate-300 bg-white p-3 shadow-2xl ring-1 ring-black/5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-[11px] font-medium text-slate-500", children: [
+            "M\xE0u (\xE1p cho ",
+            count,
+            " \u0111\u1ED1i t\u01B0\u1EE3ng)"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: STROKE_PALETTE.map((c) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": `M\xE0u ${c}`,
+              onClick: () => onColor(c),
+              className: "h-6 w-6 rounded border border-slate-200",
+              style: { background: c }
+            },
+            c
+          )) })
+        ] }) })
+      ]
+    }
+  );
+  return createPortal(node, document.body);
+};
+var LABELS = {
+  rotate: { aria: "G\xF3c quay", label: "G\xF3c (\xB0)", step: 15 },
+  dilate: { aria: "T\u1EF7 s\u1ED1 k", label: "T\u1EF7 s\u1ED1 k", step: 0.5 },
+  regularPolygon: { aria: "S\u1ED1 c\u1EA1nh \u0111a gi\xE1c \u0111\u1EC1u", label: "S\u1ED1 c\u1EA1nh (n \u2265 3)", step: 1, min: 3 }
+};
+var TransformParamPopover = ({ kind, anchor, defaultValue, onConfirm, onCancel, isDark }) => {
+  const [value, setValue] = useState(defaultValue);
+  const inputRef = useRef(null);
+  const meta = LABELS[kind];
+  useEffect(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+  const submit = () => {
+    let v = Number.isFinite(value) ? value : defaultValue;
+    if (kind === "regularPolygon") {
+      v = Math.max(3, Math.round(v));
+    }
+    onConfirm(v);
+  };
+  if (typeof document === "undefined") return null;
+  const node = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-stamp-area": "true",
+      className: `${isDark ? "theme--dark " : ""}fixed z-[2147483600] flex flex-col gap-2 rounded-lg border border-slate-300 bg-white p-3 shadow-2xl ring-1 ring-black/5`,
+      style: { left: anchor.x, top: anchor.y, minWidth: 180 },
+      role: "dialog",
+      "aria-label": meta.aria,
+      children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-slate-700", children: meta.label }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "number",
+            value,
+            step: meta.step,
+            min: meta.min,
+            onChange: (e) => setValue(parseFloat(e.target.value)),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                submit();
+              } else if (e.key === "Escape") {
+                e.preventDefault();
+                onCancel();
+              }
+            },
+            className: "rounded border border-slate-300 bg-white px-2 py-1 text-sm text-slate-800"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onCancel,
+              className: "rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-700 hover:bg-slate-100",
+              children: "Hu\u1EF7"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: submit,
+              className: "rounded bg-emerald-600 px-2 py-1 text-xs font-medium text-white hover:bg-emerald-700",
+              children: "\xC1p d\u1EE5ng"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return createPortal(node, document.body);
+};
+function useAiFigure(generator) {
+  const [prompt, setPrompt] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const abortRef = useRef(null);
+  const requestIdRef = useRef(0);
+  useEffect(() => () => abortRef.current?.abort(), []);
+  const submit = useCallback(async () => {
+    const problem = prompt.trim();
+    if (!problem) {
+      setError("Nh\u1EADp \u0111\u1EC1 b\xE0i c\u1EA7n d\u1EF1ng h\xECnh.");
+      return null;
+    }
+    if (!generator) {
+      setError("T\xEDnh n\u0103ng d\u1EF1ng h\xECnh AI ch\u01B0a \u0111\u01B0\u1EE3c c\u1EA5u h\xECnh.");
+      return null;
+    }
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    const requestId = ++requestIdRef.current;
+    abortRef.current = controller;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const generated = await generator(problem, { signal: controller.signal });
+      if (controller.signal.aborted || requestId !== requestIdRef.current) return null;
+      if (!generated.ok) {
+        setError(generated.message);
+        return null;
+      }
+      return generated.state;
+    } catch (caught) {
+      if (controller.signal.aborted || caught instanceof DOMException && caught.name === "AbortError") {
+        return null;
+      }
+      if (requestId === requestIdRef.current) {
+        setError(caught instanceof Error && caught.message ? caught.message : "Kh\xF4ng th\u1EC3 d\u1EF1ng h\xECnh b\u1EB1ng AI.");
+      }
+      return null;
+    } finally {
+      if (requestId === requestIdRef.current) {
+        abortRef.current = null;
+        setIsLoading(false);
+      }
+    }
+  }, [generator, prompt]);
+  return { prompt, setPrompt, isLoading, error, submit };
+}
+function AiFigurePrompt({ generator, onGenerated }) {
+  const {
+    prompt,
+    setPrompt,
+    isLoading,
+    error,
+    submit
+  } = useAiFigure(generator);
+  const handleSubmit = useCallback(async (event) => {
+    event.preventDefault();
+    const generated = await submit();
+    if (generated) onGenerated(generated);
+  }, [onGenerated, submit]);
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      "data-testid": "geometry-ai-form",
+      onSubmit: (event) => {
+        void handleSubmit(event);
+      },
+      className: "border-b border-slate-200 bg-slate-50 px-3 py-2",
+      children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "geometry-ai-prompt", className: "mb-1 block text-xs font-medium text-slate-600", children: "D\u1EF1ng h\xECnh b\u1EB1ng AI" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: "geometry-ai-prompt",
+              "aria-label": "\u0110\u1EC1 b\xE0i cho AI",
+              value: prompt,
+              onChange: (event) => setPrompt(event.target.value),
+              disabled: isLoading,
+              rows: 2,
+              placeholder: "V\xED d\u1EE5: Cho tam gi\xE1c ABC, d\u1EF1ng \u0111\u01B0\u1EDDng cao AH.",
+              className: "min-h-12 flex-1 resize-none rounded border border-slate-300 bg-white px-2 py-1.5 text-xs text-slate-800 outline-none focus:border-emerald-500 disabled:opacity-60"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: isLoading || !prompt.trim(),
+              className: "rounded bg-emerald-600 px-3 py-2 text-xs font-medium text-white transition hover:bg-emerald-700 disabled:opacity-50",
+              children: isLoading ? "\u0110ang d\u1EF1ng..." : "D\u1EF1ng b\u1EB1ng AI"
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-xs text-red-600", children: error })
+      ]
+    }
+  );
+}
+var GeometryEditorPanelInner = forwardRef(
+  function GeometryEditorPanelInner2({
+    store,
+    onInsert,
+    onClose,
+    withLeftPanel = false,
+    selectedTool,
+    showAxis,
+    showGrid,
+    onHistoryChange,
+    isDark,
+    isMobile = false,
+    onOpenDrawer,
+    onUndo,
+    onRedo,
+    canUndo,
+    canRedo,
+    onSelectionChange,
+    generateGeometryFigure
+  }, ref) {
+    const { showToast } = useToast();
+    const handleRef = useRef(null);
+    const [ready, setReady] = useState(false);
+    const [hasContent, setHasContent] = useState(false);
+    const [propsPopover, setPropsPopover] = useState(null);
+    const [multiSelection, setMultiSelection] = useState(null);
+    const [transformPopover, setTransformPopover] = useState(null);
+    const onSelectionChangeRef = useRef(onSelectionChange);
+    useEffect(() => {
+      onSelectionChangeRef.current = onSelectionChange;
+    }, [onSelectionChange]);
+    useEditorState({ store, onHistoryChange });
+    useEffect(() => {
+      const sync = () => setHasContent(Object.keys(store.getState().objects).length > 0);
+      sync();
+      return store.subscribe(sync);
+    }, [store]);
+    const handleReady = useCallback(() => {
+      const h = handleRef.current;
+      if (!h) return;
+      setReady(true);
+      h.onSelect((snap) => {
+        setPropsPopover(snap);
+        setMultiSelection(null);
+        onSelectionChangeRef.current?.(snap.id);
+      });
+      h.onTransformParam((info) => setTransformPopover(info));
+      h.onSelectionState((snap) => {
+        if (!snap || snap.ids.length === 0) {
+          setPropsPopover(null);
+          setMultiSelection(null);
+          onSelectionChangeRef.current?.(void 0);
+          return;
+        }
+        if (snap.ids.length === 1) {
+          const id = snap.ids[0];
+          const single = buildObjectSnapshot(store.getState(), id, snap.anchor);
+          if (single) {
+            setPropsPopover(single);
+            setMultiSelection(null);
+            onSelectionChangeRef.current?.(id);
+          }
+          return;
+        }
+        setMultiSelection(snap);
+        setPropsPopover(null);
+        onSelectionChangeRef.current?.(void 0);
+      });
+    }, [store]);
+    const dismissPropsPopover = useCallback(() => {
+      setPropsPopover(null);
+      onSelectionChangeRef.current?.(void 0);
+    }, []);
+    const dismissMultiPopover = useCallback(() => {
+      setMultiSelection(null);
+      handleRef.current?.clearSelection();
+      onSelectionChangeRef.current?.(void 0);
+    }, []);
+    const applyMultiColor = useCallback((color) => {
+      const ids = multiSelection?.ids ?? [];
+      const h = handleRef.current;
+      if (!h) return;
+      for (const id of ids) {
+        h.mutateObject(id, { attrs: { strokeColor: color, color } });
+      }
+    }, [multiSelection]);
+    const applyMultiDelete = useCallback(() => {
+      const ids = multiSelection?.ids ?? [];
+      const h = handleRef.current;
+      if (!h) return;
+      for (const id of ids) {
+        h.mutateObject(id, { remove: true });
+      }
+      h.clearSelection();
+      setMultiSelection(null);
+      onSelectionChangeRef.current?.(void 0);
+    }, [multiSelection]);
+    const performInsert = useCallback(() => {
+      if (!handleRef.current) return false;
+      const h = handleRef.current;
+      const state = h.getState();
+      if (Object.keys(state.objects).length === 0) return false;
+      const bbox = h.getBbox();
+      const jsonState = serializeBoard(state, { bbox, showAxis, showGrid });
+      void (async () => {
+        try {
+          const svgString = await renderGeometrySvgFromState(jsonState);
+          onInsert(jsonState, svgString);
+        } catch (err) {
+          console.error("Geometry insert failed:", err);
+        }
+      })();
+      return true;
+    }, [onInsert, showAxis, showGrid]);
+    const handleInsert = useCallback(() => {
+      performInsert();
+    }, [performInsert]);
+    const loadAiFigure = useCallback((generated) => {
+      handleRef.current?.clearSelection();
+      setPropsPopover(null);
+      setMultiSelection(null);
+      setTransformPopover(null);
+      onSelectionChangeRef.current?.(void 0);
+      const current = store.getState();
+      store.dispatch({
+        type: "LOAD",
+        payload: { state: { ...generated, meta: current.meta } }
+      });
+    }, [store]);
+    useImperativeHandle(ref, () => ({
+      insert: performInsert,
+      hasContent: () => Object.keys(handleRef.current?.getState().objects ?? {}).length > 0,
+      selectObject: (id) => handleRef.current?.highlight(id)
+    }), [performInsert]);
+    const wrapperStyle = isMobile ? { position: "fixed", inset: 0, zIndex: 40 } : {
+      position: "absolute",
+      top: "50%",
+      left: withLeftPanel ? "calc(50% + 120px)" : "50%",
+      transform: "translate(-50%, -50%)",
+      zIndex: 40
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "D\u1EF1ng h\xECnh h\u1ECDc",
+        "data-testid": "geometry-editor-panel",
+        "data-stamp-area": "true",
+        "data-mobile-editor": isMobile ? "true" : void 0,
+        style: wrapperStyle,
+        className: [
+          isDark ? "theme--dark " : "",
+          "relative flex flex-col overflow-hidden bg-white",
+          isMobile ? "h-full w-full" : `${STAMP_PANEL_DESKTOP} rounded-lg border border-slate-300 shadow-2xl ring-1 ring-black/5`
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-2 border-b border-slate-200 bg-gradient-to-r from-emerald-600 to-teal-600 px-3 py-2 text-white", children: [
+            isMobile && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onOpenDrawer,
+                "aria-label": "M\u1EDF ng\u0103n c\xF4ng c\u1EE5",
+                className: "-ml-1 inline-flex h-10 w-10 items-center justify-center rounded transition hover:bg-white/15",
+                children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+                  /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+                  /* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs("h3", { className: "flex flex-1 items-center gap-2 text-sm font-semibold", children: [
+              /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("polygon", { points: "3,18 12,3 21,18" }),
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "3", r: "1.5", fill: "currentColor" }),
+                /* @__PURE__ */ jsx("circle", { cx: "3", cy: "18", r: "1.5", fill: "currentColor" }),
+                /* @__PURE__ */ jsx("circle", { cx: "21", cy: "18", r: "1.5", fill: "currentColor" })
+              ] }),
+              "D\u1EF1ng h\xECnh h\u1ECDc"
+            ] }),
+            isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onUndo,
+                  disabled: !canUndo,
+                  "aria-label": "Ho\xE0n t\xE1c",
+                  title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
+                  "data-testid": "undo-btn-mobile",
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded transition hover:bg-white/15 disabled:opacity-40",
+                  children: /* @__PURE__ */ jsx(UndoIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onRedo,
+                  disabled: !canRedo,
+                  "aria-label": "L\xE0m l\u1EA1i",
+                  title: "L\xE0m l\u1EA1i (Ctrl/Cmd+Shift+Z)",
+                  "data-testid": "redo-btn-mobile",
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded transition hover:bg-white/15 disabled:opacity-40",
+                  children: /* @__PURE__ */ jsx(RedoIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleInsert,
+                  disabled: !ready || !hasContent,
+                  title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
+                  "data-testid": "geometry-insert-btn-mobile",
+                  className: "rounded bg-white/15 px-3 py-1.5 text-xs font-semibold transition hover:bg-white/25 disabled:opacity-50",
+                  children: "Ch\xE8n"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("button", { onClick: onClose, "aria-label": "\u0110\xF3ng", className: "inline-flex h-9 w-9 items-center justify-center rounded transition hover:bg-white/15", children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", 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" })
+            ] }) })
+          ] }),
+          generateGeometryFigure && /* @__PURE__ */ jsx(AiFigurePrompt, { generator: generateGeometryFigure, onGenerated: loadAiFigure }),
+          /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+            MiniBoard2D,
+            {
+              ref: handleRef,
+              store,
+              selectedTool,
+              showAxis,
+              showGrid,
+              onReady: handleReady,
+              isDark,
+              toast: showToast
+            }
+          ) }) }),
+          propsPopover && (propsPopover.kind === "point" ? /* @__PURE__ */ jsx(
+            PropertiesPopover,
+            {
+              kind: "point",
+              anchor: propsPopover.screenCoords,
+              isDark,
+              currentName: propsPopover.name,
+              currentColor: propsPopover.color,
+              currentDash: propsPopover.dash,
+              currentWidth: propsPopover.width,
+              currentFace: propsPopover.face,
+              currentShowLabel: propsPopover.showLabel,
+              getAllNames: () => handleRef.current?.getAllPointNames() ?? [],
+              onClose: dismissPropsPopover,
+              onMutate: (patch) => {
+                handleRef.current?.mutateObject(propsPopover.id, patch);
+                if (patch.remove) dismissPropsPopover();
+                if (typeof patch.valueLabel === "boolean" || patch.attrs) {
+                  setPropsPopover((cur) => cur ? { ...cur, showValue: patch.valueLabel ?? cur.showValue } : cur);
+                }
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            PropertiesPopover,
+            {
+              kind: propsPopover.kind,
+              anchor: propsPopover.screenCoords,
+              isDark,
+              currentName: propsPopover.name,
+              currentColor: propsPopover.color,
+              currentDash: propsPopover.dash,
+              currentWidth: propsPopover.width,
+              currentShowLabel: propsPopover.showLabel,
+              currentShowValue: propsPopover.showValue,
+              getAllNames: () => handleRef.current?.getAllPointNames() ?? [],
+              onClose: dismissPropsPopover,
+              onMutate: (patch) => {
+                handleRef.current?.mutateObject(propsPopover.id, patch);
+                if (patch.remove) dismissPropsPopover();
+                if (typeof patch.valueLabel === "boolean") {
+                  setPropsPopover((cur) => cur ? { ...cur, showValue: patch.valueLabel ?? cur.showValue } : cur);
+                }
+                if (patch.attrs && "withLabel" in patch.attrs) {
+                  setPropsPopover((cur) => cur ? { ...cur, showLabel: !!patch.attrs?.withLabel } : cur);
+                }
+              }
+            }
+          )),
+          multiSelection && multiSelection.ids.length > 1 && /* @__PURE__ */ jsx(
+            MultiPropertiesPopover,
+            {
+              anchor: multiSelection.anchor,
+              count: multiSelection.ids.length,
+              isDark,
+              onColor: applyMultiColor,
+              onDelete: applyMultiDelete,
+              onClose: dismissMultiPopover
+            }
+          ),
+          transformPopover && (transformPopover.tool === "rotate" || transformPopover.tool === "dilate" || transformPopover.tool === "regularPolygon") && /* @__PURE__ */ jsx(
+            TransformParamPopover,
+            {
+              kind: transformPopover.tool,
+              anchor: transformPopover.anchor,
+              defaultValue: transformPopover.tool === "rotate" ? 90 : transformPopover.tool === "dilate" ? 2 : 6,
+              isDark,
+              onConfirm: (v) => {
+                handleRef.current?.confirmTransformParam(v);
+                setTransformPopover(null);
+              },
+              onCancel: () => {
+                handleRef.current?.cancelTransformParam();
+                setTransformPopover(null);
+              }
+            }
+          ),
+          !isMobile && /* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-between border-t border-slate-200 bg-slate-50 px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500", children: "Ch\u1ECDn c\xF4ng c\u1EE5 b\xEAn tr\xE1i, click tr\xEAn b\u1EA3ng \u0111\u1EC3 d\u1EF1ng h\xECnh." }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "rounded border border-slate-300 bg-white px-3 py-1 text-xs font-medium text-slate-700 transition hover:bg-slate-100",
+                  children: "Hu\u1EF7"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleInsert,
+                  disabled: !ready || !hasContent,
+                  title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
+                  "data-testid": "geometry-insert-btn",
+                  className: "rounded bg-emerald-600 px-3 py-1 text-xs font-medium text-white transition hover:bg-emerald-700 disabled:opacity-50",
+                  children: "Ch\xE8n"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ToastHost, {})
+        ]
+      }
+    );
+  }
+);
+var GeometryEditorPanel = forwardRef(
+  function GeometryEditorPanel2(props, ref) {
+    return /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(GeometryEditorPanelInner, { ...props, ref }) });
+  }
+);
+function parseInitialState(data) {
+  if (!isGeometryCustomData(data)) return null;
+  return deserializeBoard(data.jsonState);
+}
+var GeometryStampHost = forwardRef(
+  function GeometryStampHost2({ api, editingElement, onClose, isDark, generateGeometryFigure }, ref) {
+    const panelRef = useRef(null);
+    const { isMobile } = useIsMobile();
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const sceneStore = useStampStore("2d", editingElement, parseInitialState);
+    const initialMeta = sceneStore.getState().meta;
+    const initialView = initialMeta.domain === "2d" ? initialMeta.view : DEFAULT_VIEW_2D;
+    const [selectedTool, setSelectedTool] = useState("move");
+    const [showAxis, setShowAxis] = useState(initialView.showAxis);
+    const [showGrid, setShowGrid] = useState(initialView.showGrid);
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const [selectedObjectId, setSelectedObjectId] = useState(void 0);
+    const handleHistoryChange = useCallback((u, r) => {
+      setCanUndo(u);
+      setCanRedo(r);
+    }, []);
+    const handleUndo = useCallback(() => sceneStore.undo(), [sceneStore]);
+    const handleRedo = useCallback(() => sceneStore.redo(), [sceneStore]);
+    const { chordGroup } = useChordShortcut({
+      groupOrder: GROUP_ORDER,
+      tools: TOOLS,
+      onSelect: (key) => setSelectedTool(key),
+      enabled: !isMobile
+    });
+    const handleInsert = useCallback(
+      async (jsonState, svgString) => {
+        if (!api) return;
+        try {
+          await insertStampImage(api, {
+            svgString,
+            makeCustomData: () => ({
+              kind: "geometry",
+              version: 1,
+              jsonState
+            }),
+            editingElementId: editingElement?.id ?? null
+          });
+        } catch (err) {
+          console.error("Geometry insert failed:", err);
+        }
+        onClose();
+      },
+      [api, editingElement?.id, onClose]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        tryInsert: () => panelRef.current?.insert() ?? false,
+        hasContent: () => panelRef.current?.hasContent() ?? false
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        StampLeftPanel,
+        {
+          title: "H\xECnh h\u1ECDc",
+          icon: GeometryIconHeader,
+          onClose,
+          isDark,
+          testId: "stamp-left-panel",
+          tools: TOOLS,
+          groupOrder: GROUP_ORDER,
+          groupLabels: GROUP_LABELS,
+          activeTool: selectedTool,
+          onToolChange: setSelectedTool,
+          view: {
+            showAxis,
+            showGrid,
+            onShowAxisChange: setShowAxis,
+            onShowGridChange: setShowGrid
+          },
+          history: {
+            onUndo: handleUndo,
+            canUndo,
+            onRedo: handleRedo,
+            canRedo
+          },
+          chord: { activeGroup: chordGroup, letterForGroup },
+          objects: {
+            store: sceneStore,
+            selectedObjectId,
+            onObjectSelect: (id) => {
+              setSelectedObjectId(id ?? void 0);
+              panelRef.current?.selectObject(id);
+            }
+          },
+          isMobile,
+          drawerOpen,
+          onDrawerClose: () => setDrawerOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        GeometryEditorPanel,
+        {
+          ref: panelRef,
+          store: sceneStore,
+          onInsert: handleInsert,
+          onClose,
+          selectedTool,
+          showAxis,
+          showGrid,
+          onHistoryChange: handleHistoryChange,
+          withLeftPanel: !isMobile,
+          isDark,
+          isMobile,
+          onOpenDrawer: () => setDrawerOpen(true),
+          onUndo: handleUndo,
+          onRedo: handleRedo,
+          canUndo,
+          canRedo,
+          onSelectionChange: setSelectedObjectId,
+          generateGeometryFigure
+        }
+      )
+    ] });
+  }
+);
+
+export { GeometryStampHost };
+//# sourceMappingURL=host-DOAYVL35.mjs.map
+//# sourceMappingURL=host-DOAYVL35.mjs.map