@xom11/whiteboard 0.25.0 → 0.28.0

package/dist/{host-L7FMFZUW.mjs → host-4P766V4J.mjs}

@@ -1,19 +1,21 @@
 "use client";
 import { useChordShortcut } from './chunk-HNQLZIEP.mjs';
 import { useToolStateMachine } from './chunk-NVJ7K3DK.mjs';
-import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel, ObjectRow } from './chunk-TB4CL25L.mjs';
-import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-VRHWDZ66.mjs';
+import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel, ObjectRow } from './chunk-OQIQNKPQ.mjs';
+import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-H22OZYTW.mjs';
 import { themeLabel, paletteFor, themeAxis, themeGrid } from './chunk-R5FL6S7L.mjs';
-import { JxgRenderer } from './chunk-AYSFWUPK.mjs';
+import { JxgRenderer } from './chunk-SZDAS7LK.mjs';
 import './chunk-ICR4CVOE.mjs';
-import { nextLabel, useEditorState, listObjects } from './chunk-REIJZDVZ.mjs';
+import { nextLabel, useEditorState, listObjects } from './chunk-ZTQBUKLJ.mjs';
 import './chunk-IHUFOV7L.mjs';
-import { describeDsl, serializeState } from './chunk-VNCCIV6O.mjs';
+import { validateFile, fileToImagePart, describeDsl, serializeState } from './chunk-AJAHD35N.mjs';
+import { handleExtractProblem } from './chunk-T3SOHYB2.mjs';
 import { DEFAULT_VIEW_2D } from './chunk-73Q7ADVL.mjs';
 import './chunk-B4NJJZFR.mjs';
 import { useIsMobile } from './chunk-P2AOIF7S.mjs';
 import { insertStampImage } from './chunk-QGNU34T7.mjs';
 import './chunk-5UTGXHLJ.mjs';
+import { __export } from './chunk-J5LGTIGS.mjs';
 import { forwardRef, useRef, useId, useState, useEffect, useCallback, useImperativeHandle, useSyncExternalStore, useMemo, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
@@ -283,6 +285,104 @@ var Icon = {
     /* @__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" })
+  ] }),
+  // ===== Special shapes =====
+  square: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "14", height: "14", fill: C_FILL, fillOpacity: "0.18", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "5", r: "1.7", fill: C_POINT })
+  ] }),
+  rectangle: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "7", width: "18", height: "10", fill: C_FILL, fillOpacity: "0.18", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "17", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "17", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "7", r: "1.7", fill: C_POINT })
+  ] }),
+  rhombus: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M 12 3 L 21 12 L 12 21 L 3 12 Z", fill: C_FILL, fillOpacity: "0.18", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "12", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "21", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "12", r: "1.7", fill: C_POINT })
+  ] }),
+  parallelogram: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M 5 19 L 21 19 L 19 5 L 3 5 Z", fill: C_FILL, fillOpacity: "0.18", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "5", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "5", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "19", r: "1.7", fill: C_POINT })
+  ] }),
+  isoTrapezoid: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M 3 19 L 21 19 L 17 5 L 7 5 Z", fill: C_FILL, fillOpacity: "0.18", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "19", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "19", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "5", r: "1.7", fill: C_POINT })
+  ] }),
+  isoTriangle: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M 12 4 L 21 20 L 3 20 Z", fill: C_FILL, fillOpacity: "0.18", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "20", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "21", cy: "20", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20", stroke: C_CONSTRUCT, strokeWidth: "0.8", strokeDasharray: "1.5 1.5", opacity: "0.7" })
+  ] }),
+  rightTriangle: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M 4 20 L 20 20 L 4 4 Z", fill: C_FILL, fillOpacity: "0.18", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M 4 17 L 7 17 L 7 20", fill: "none", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "20", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "1.7", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "1.7", fill: C_POINT })
+  ] }),
+  // ===== Nâng cao / kind chưa có icon =====
+  excenter: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 16 L12 5 L19 16 Z", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "20", r: "3", fill: "none", stroke: C_CONSTRUCT, strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "20", r: "1.4", fill: C_CONSTRUCT })
+  ] }),
+  tangencyPoint: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "12", r: "6.5", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("line", { x1: "16.5", y1: "3", x2: "16.5", y2: "21", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "16.5", cy: "12", r: "2.2", fill: C_CONSTRUCT })
+  ] }),
+  secondIntersection: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "12", r: "6.5", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("line", { x1: "2", y1: "8", x2: "22", y2: "16", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6.2", cy: "9.6", r: "1.6", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15.8", cy: "14.4", r: "2.4", fill: C_CONSTRUCT })
+  ] }),
+  arcMidpoint: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 17 A 9 9 0 0 1 20 17", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "17", r: "1.6", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "17", r: "1.6", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8.2", r: "2.4", fill: C_CONSTRUCT })
+  ] }),
+  circleIntersection: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7.6", r: "2", fill: C_CONSTRUCT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16.4", r: "2", fill: C_CONSTRUCT })
+  ] }),
+  tangentPointExt: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "14", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3.5", cy: "12", r: "1.8", fill: C_POINT }),
+    /* @__PURE__ */ jsx("line", { x1: "3.5", y1: "12", x2: "17.5", y2: "7.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("line", { x1: "3.5", y1: "12", x2: "17.5", y2: "16.5", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "17.5", cy: "7.5", r: "1.8", fill: C_CONSTRUCT }),
+    /* @__PURE__ */ jsx("circle", { cx: "17.5", cy: "16.5", r: "1.8", fill: C_CONSTRUCT })
+  ] }),
+  circleCR: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7.5", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.8", fill: C_POINT }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "12", x2: "19.5", y2: "12", stroke: C_CONSTRUCT, strokeWidth: "1.3" })
+  ] }),
+  incircle: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 19 L12 4 L21 19 Z", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "14", r: "4.2", fill: "none", stroke: C_CONSTRUCT, strokeWidth: "1.3" })
+  ] }),
+  excircle: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 9 L14 4 L18 13 Z", stroke: "currentColor", strokeWidth: "1.2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "17", r: "4.6", fill: "none", stroke: C_CONSTRUCT, strokeWidth: "1.3" })
+  ] }),
+  pointOn: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7.5", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "17.3", cy: "6.7", r: "2.4", fill: C_POINT })
   ] })
 };
 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: [
@@ -343,7 +443,83 @@ var TOOLS = [
   { 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"] }
+  { 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"] },
+  // ===== Hình đặc biệt (parametric construction) =====
+  {
+    key: "square",
+    label: "H\xECnh vu\xF4ng",
+    hint: "Click 2 \u0111i\u1EC3m \u2014 c\u1EA1nh \u0111\u1EA7u (3 \u0111\u1EC9nh c\xF2n l\u1EA1i t\u1EF1 suy, vu\xF4ng g\xF3c + b\u1EB1ng c\u1EA1nh)",
+    icon: Icon.square,
+    group: "special",
+    needs: 2,
+    accepts: ["point", "point"]
+  },
+  {
+    key: "rectangle",
+    label: "H\xECnh ch\u1EEF nh\u1EADt",
+    hint: "Click 2 \u0111i\u1EC3m \u0111\xE1y + 1 \u0111i\u1EC3m chi\u1EC1u cao (auto vu\xF4ng g\xF3c t\u1EA1i \u0111\u1EC9nh 2)",
+    icon: Icon.rectangle,
+    group: "special",
+    needs: 3,
+    accepts: ["point", "point", "point"]
+  },
+  {
+    key: "rhombus",
+    label: "H\xECnh thoi",
+    hint: "Click 2 \u0111i\u1EC3m c\u1EA1nh + 1 \u0111i\u1EC3m h\u01B0\u1EDBng (auto b\u1EB1ng \u0111\u1ED9 d\xE0i c\u1EA1nh)",
+    icon: Icon.rhombus,
+    group: "special",
+    needs: 3,
+    accepts: ["point", "point", "point"]
+  },
+  {
+    key: "parallelogram",
+    label: "H\xECnh b\xECnh h\xE0nh",
+    hint: "Click 3 \u0111i\u1EC3m li\xEAn ti\u1EBFp (\u0111\u1EC9nh 4 t\u1EF1 suy)",
+    icon: Icon.parallelogram,
+    group: "special",
+    needs: 3,
+    accepts: ["point", "point", "point"]
+  },
+  {
+    key: "isoTrapezoid",
+    label: "H\xECnh thang c\xE2n",
+    hint: "Click 2 \u0111i\u1EC3m \u0111\xE1y l\u1EDBn + 1 \u0111\u1EC9nh tr\xEAn (\u0111\u1EC9nh 4 ph\u1EA3n chi\u1EBFu qua trung tr\u1EF1c)",
+    icon: Icon.isoTrapezoid,
+    group: "special",
+    needs: 3,
+    accepts: ["point", "point", "point"]
+  },
+  {
+    key: "isoTriangle",
+    label: "Tam gi\xE1c c\xE2n",
+    hint: "Click 2 \u0111i\u1EC3m \u0111\xE1y + 1 \u0111\u1EC9nh (auto tr\xEAn trung tr\u1EF1c)",
+    icon: Icon.isoTriangle,
+    group: "special",
+    needs: 3,
+    accepts: ["point", "point", "point"]
+  },
+  {
+    key: "rightTriangle",
+    label: "Tam gi\xE1c vu\xF4ng",
+    hint: "Click \u0111\u1EC9nh vu\xF4ng + 2 \u0111\u1EA7u c\u1EA1nh (c\u1EA1nh 2 auto vu\xF4ng g\xF3c)",
+    icon: Icon.rightTriangle,
+    group: "special",
+    needs: 3,
+    accepts: ["point", "point", "point"]
+  },
+  // ===== Điểm / đường tròn thông dụng (kind chưa có icon trước v0.27) =====
+  { key: "pointOn", label: "\u0110i\u1EC3m tr\xEAn \u0111\u1ED1i t\u01B0\u1EE3ng", hint: "Click 1 \u0111\u01B0\u1EDDng/\u0111o\u1EA1n/\u0111\u01B0\u1EDDng tr\xF2n c\xF3 s\u1EB5n", icon: Icon.pointOn, group: "point", needs: 1, accepts: ["lineOrCircle"] },
+  { key: "circleCR", label: "\u0110\u01B0\u1EDDng tr\xF2n (t\xE2m + b\xE1n k\xEDnh)", hint: "Click t\xE2m r\u1ED3i nh\u1EADp b\xE1n k\xEDnh", icon: Icon.circleCR, group: "circle", needs: 1, accepts: ["point"] },
+  { key: "incircle", label: "\u0110\u01B0\u1EDDng tr\xF2n n\u1ED9i ti\u1EBFp", hint: "Click 3 \u0111\u1EC9nh tam gi\xE1c", icon: Icon.incircle, group: "circle", needs: 3, accepts: ["point", "point", "point"] },
+  // ===== Nâng cao =====
+  { key: "excenter", label: "T\xE2m \u0111\u01B0\u1EDDng tr\xF2n b\xE0ng ti\u1EBFp", hint: "Click 3 \u0111\u1EC9nh tam gi\xE1c (\u0111\u1EC9nh \u0111\u1EA7u = \u0111\u1EC9nh \u0111\u1ED1i di\u1EC7n)", icon: Icon.excenter, group: "advanced", needs: 3, accepts: ["point", "point", "point"] },
+  { key: "excircle", label: "\u0110\u01B0\u1EDDng tr\xF2n b\xE0ng ti\u1EBFp", hint: "Click 3 \u0111\u1EC9nh tam gi\xE1c (\u0111\u1EC9nh \u0111\u1EA7u = \u0111\u1EC9nh \u0111\u1ED1i di\u1EC7n)", icon: Icon.excircle, group: "advanced", needs: 3, accepts: ["point", "point", "point"] },
+  { key: "tangencyPoint", label: "Ti\u1EBFp \u0111i\u1EC3m (\u0111\u01B0\u1EDDng ti\u1EBFp x\xFAc)", hint: "Click 1 \u0111\u01B0\u1EDDng tr\xF2n + 1 ti\u1EBFp tuy\u1EBFn c\xF3 s\u1EB5n", icon: Icon.tangencyPoint, group: "advanced", needs: 2, accepts: ["circle", "line"] },
+  { key: "secondIntersection", label: "Giao \u0111i\u1EC3m th\u1EE9 hai", hint: "Click 1 \u0111\u01B0\u1EDDng + 1 \u0111\u01B0\u1EDDng tr\xF2n + giao \u0111i\u1EC3m \u0111\xE3 bi\u1EBFt", icon: Icon.secondIntersection, group: "advanced", needs: 3, accepts: ["line", "circle", "point"] },
+  { key: "arcMidpoint", label: "\u0110i\u1EC3m gi\u1EEFa cung", hint: "Click \u0111\u01B0\u1EDDng tr\xF2n \u2192 2 \u0111\u1EA7u cung A,B \u2192 1 \u0111i\u1EC3m ph\xEDa cung KH\xD4NG ch\u1EE9a", icon: Icon.arcMidpoint, group: "advanced", needs: 4, accepts: ["circle", "point", "point", "point"] },
+  { key: "circleIntersection", label: "Giao 2 \u0111\u01B0\u1EDDng tr\xF2n", hint: "Click 2 \u0111\u01B0\u1EDDng tr\xF2n (t\u1EA1o c\u1EA3 2 giao \u0111i\u1EC3m)", icon: Icon.circleIntersection, group: "advanced", needs: 2, accepts: ["circle", "circle"] },
+  { key: "tangentPointExt", label: "Ti\u1EBFp \u0111i\u1EC3m t\u1EEB \u0111i\u1EC3m ngo\xE0i", hint: "Click 1 \u0111i\u1EC3m ngo\xE0i + 1 \u0111\u01B0\u1EDDng tr\xF2n (t\u1EA1o c\u1EA3 2 ti\u1EBFp \u0111i\u1EC3m)", icon: Icon.tangentPointExt, group: "advanced", needs: 2, accepts: ["point", "circle"] }
 ];
 var GROUP_LABELS = {
   move: "C\u01A1 b\u1EA3n",
@@ -355,7 +531,9 @@ var GROUP_LABELS = {
   triangle: "Tam gi\xE1c",
   measure: "\u0110o l\u01B0\u1EDDng",
   edit: "Ch\u1EC9nh s\u1EEDa",
-  transform: "Ph\xE9p bi\u1EBFn h\xECnh"
+  transform: "Ph\xE9p bi\u1EBFn h\xECnh",
+  special: "H\xECnh \u0111\u1EB7c bi\u1EC7t",
+  advanced: "N\xE2ng cao"
 };
 var GROUP_ORDER = [
   "move",
@@ -367,7 +545,9 @@ var GROUP_ORDER = [
   "triangle",
   "measure",
   "edit",
-  "transform"
+  "transform",
+  "special",
+  "advanced"
 ];
 var A_CODE = "A".charCodeAt(0);
 function letterForGroup(g) {
@@ -594,6 +774,20 @@ function handlePolygonTool(ctx, t, toolDef, e, x, y, bestHit) {
   return true;
 }
 
+// src/stamps/geometry-2d/editor/handlers/finalize/lines.ts
+var lines_exports = {};
+__export(lines_exports, {
+  angleBisectorTool: () => angleBisectorTool,
+  lineTool: () => lineTool,
+  parallelTool: () => parallelTool,
+  perpBisectorTool: () => perpBisectorTool,
+  perpendicularTool: () => perpendicularTool,
+  rayTool: () => rayTool,
+  segmentTool: () => segmentTool,
+  tangentTool: () => tangentTool,
+  vectorTool: () => vectorTool
+});
+
 // src/stamps/geometry-2d/editor/handlers/classifyPointVsCircle.ts
 function classifyPointVsCircle(point, circle) {
   if (!point || !circle || !circle.center) return "inside";
@@ -607,7 +801,7 @@ function classifyPointVsCircle(point, circle) {
   return d < r ? "inside" : "outside";
 }
 
-// src/stamps/geometry-2d/editor/handlers/finalizeShape.ts
+// src/stamps/geometry-2d/editor/handlers/finalize/shared.ts
 function findPickIdByKind(ctx, kind) {
   const picks = ctx.pendingRef.current;
   const ids = ctx.pendingIdsRef.current;
@@ -616,362 +810,817 @@ function findPickIdByKind(ctx, kind) {
   }
   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] }) }
-      });
+function readJxgPos(ctx, id) {
+  const j = ctx.jxgFromSceneId(id);
+  if (!j || typeof j.X !== "function") return { x: 0, y: 0 };
+  return { x: j.X(), y: j.Y() };
+}
+function computePerpendicularT(P, T, A, B) {
+  const dx = B.x - A.x, dy = B.y - A.y;
+  const len = Math.hypot(dx, dy);
+  if (len < 1e-12) return 0;
+  const ux = -dy / len, uy = dx / len;
+  return (P.x - T.x) * ux + (P.y - T.y) * uy;
+}
+function computePerpBisectorT(P, A, B) {
+  const Mx = (A.x + B.x) / 2, My = (A.y + B.y) / 2;
+  const dx = B.x - A.x, dy = B.y - A.y;
+  const len = Math.hypot(dx, dy);
+  if (len < 1e-12) return 0;
+  const ux = -dy / len, uy = dx / len;
+  return (P.x - Mx) * ux + (P.y - My) * uy;
+}
+function computeCircleTheta(P, C) {
+  return Math.atan2(P.y - C.y, P.x - C.x);
+}
+
+// src/stamps/geometry-2d/editor/handlers/finalize/lines.ts
+var segmentTool = {
+  key: "segment",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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] }) }
+    });
+  }
+};
+var lineTool = {
+  key: "line",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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] }) }
+    });
+  }
+};
+function finalizePerpParallel(ctx, key) {
+  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 }
+    }) }
+  });
+}
+var perpendicularTool = {
+  key: "perpendicular",
+  finalize(ctx) {
+    finalizePerpParallel(ctx, "perpendicular");
+  }
+};
+var parallelTool = {
+  key: "parallel",
+  finalize(ctx) {
+    finalizePerpParallel(ctx, "parallel");
+  }
+};
+var perpBisectorTool = {
+  key: "perpBisector",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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] }
+      }) }
+    });
+  }
+};
+var angleBisectorTool = {
+  key: "angleBisector",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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;
     }
-    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 }
-        }) }
+    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] }
+      }) }
+    });
+  }
+};
+var tangentTool = {
+  key: "tangent",
+  finalize(ctx) {
+    const throughId = findPickIdByKind(ctx, "point");
+    const circleId = findPickIdByKind(ctx, "circle");
+    if (!throughId || !circleId) return;
+    const picks = ctx.pendingRef.current;
+    const ids = ctx.pendingIdsRef.current;
+    const through = picks[ids.indexOf(throughId)];
+    const circle = picks[ids.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;
     }
-    case "perpBisector": {
-      const id = freshId(ctx, "pb");
+    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: "perpBisector", p1: ids[0], p2: ids[1] }
+          construction: { kind: "tangent", throughPoint: throughId, toCircle: circleId, branch: "on" }
         }) }
       });
       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");
+    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: "angleBisector", p1: ids[0], vertex: ids[1], p2: ids[2] }
+          construction: { kind: "tangent", throughPoint: throughId, toCircle: circleId, branch }
         }) }
       });
-      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;
+  }
+};
+var rayTool = {
+  key: "ray",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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] }) }
+    });
+  }
+};
+var vectorTool = {
+  key: "vector",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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] }) }
+    });
+  }
+};
+
+// src/stamps/geometry-2d/editor/handlers/finalize/circles.ts
+var circles_exports = {};
+__export(circles_exports, {
+  arc3Tool: () => arc3Tool,
+  arcCenterTool: () => arcCenterTool,
+  circle3Tool: () => circle3Tool,
+  circleCenterTool: () => circleCenterTool,
+  excircleTool: () => excircleTool,
+  incircleTool: () => incircleTool,
+  sectorCenterTool: () => sectorCenterTool,
+  semicircleTool: () => semicircleTool
+});
+var circleCenterTool = {
+  key: "circleCenter",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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]
+        })
       }
-      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 }
-          }) }
-        });
+    });
+  }
+};
+var circle3Tool = {
+  key: "circle3",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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] }
+        })
       }
+    });
+  }
+};
+var semicircleTool = {
+  key: "semicircle",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    if (ids[0] === ids[1]) {
+      ctx.toast?.("C\u1EA7n 2 \u0111i\u1EC3m ph\xE2n bi\u1EC7t", { variant: "warning", id: "semicircle-dup" });
       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] }
+        })
       }
-      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] }
-          })
-        }
-      });
+    });
+  }
+};
+var arcCenterTool = {
+  key: "arcCenter",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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;
     }
-    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] }
+        })
       }
-      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] }
-          })
-        }
-      });
+    });
+  }
+};
+var arc3Tool = {
+  key: "arc3",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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;
     }
-    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] }
-          })
-        }
+    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;
     }
-    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, "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] }
+        })
       }
-      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 }
-        }) }
-      });
+    });
+  }
+};
+var sectorCenterTool = {
+  key: "sectorCenter",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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;
     }
-    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;
+    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] }
+        })
+      }
+    });
+  }
+};
+var incircleTool = {
+  key: "incircle",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    const id = freshId(ctx, "ic");
+    const label = ctx.nextLabel("circle");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "circle", label, {
+        construction: { kind: "incircle", p1: ids[0], p2: ids[1], p3: ids[2] }
+      }) }
+    });
+  }
+};
+var excircleTool = {
+  key: "excircle",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    const id = freshId(ctx, "exc");
+    const label = ctx.nextLabel("circle");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "circle", label, {
+        construction: { kind: "excircle", p1: ids[0], p2: ids[1], p3: ids[2], opposite: ids[0] }
+      }) }
+    });
+  }
+};
+
+// src/stamps/geometry-2d/editor/handlers/finalize/points.ts
+var points_exports = {};
+__export(points_exports, {
+  arcMidpointTool: () => arcMidpointTool,
+  centroidTool: () => centroidTool,
+  circleIntersectionTool: () => circleIntersectionTool,
+  circumcenterTool: () => circumcenterTool,
+  excenterTool: () => excenterTool,
+  incenterTool: () => incenterTool,
+  midpointTool: () => midpointTool,
+  orthocenterTool: () => orthocenterTool,
+  perpFootTool: () => perpFootTool,
+  pointOnTool: () => pointOnTool,
+  secondIntersectionTool: () => secondIntersectionTool,
+  tangencyPointTool: () => tangencyPointTool,
+  tangentPointExtTool: () => tangentPointExtTool
+});
+var midpointTool = {
+  key: "midpoint",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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] }
+      }) }
+    });
+  }
+};
+var perpFootTool = {
+  key: "perpFoot",
+  finalize(ctx) {
+    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 }
+      }) }
+    });
+  }
+};
+var centroidTool = {
+  key: "centroid",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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]] }
+      }) }
+    });
+  }
+};
+var circumcenterTool = {
+  key: "circumcenter",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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]] }
+      }) }
+    });
+  }
+};
+var incenterTool = {
+  key: "incenter",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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]] }
+      }) }
+    });
+  }
+};
+var orthocenterTool = {
+  key: "orthocenter",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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]] }
+      }) }
+    });
+  }
+};
+var excenterTool = {
+  key: "excenter",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    const id = freshId(ctx, "ex");
+    const label = ctx.nextLabel("point");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "point", label, {
+        constraint: { kind: "excenter", vertices: [ids[0], ids[1], ids[2]], opposite: ids[0] }
+      }) }
+    });
+  }
+};
+var tangencyPointTool = {
+  key: "tangencyPoint",
+  finalize(ctx) {
+    const circleId = findPickIdByKind(ctx, "circle");
+    const lineId = findPickIdByKind(ctx, "line");
+    if (!circleId || !lineId) return;
+    const id = freshId(ctx, "tp");
+    const label = ctx.nextLabel("point");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "point", label, {
+        constraint: { kind: "tangencyPoint", circle: circleId, onLine: lineId }
+      }) }
+    });
+  }
+};
+var secondIntersectionTool = {
+  key: "secondIntersection",
+  finalize(ctx) {
+    const lineId = findPickIdByKind(ctx, "line");
+    const circleId = findPickIdByKind(ctx, "circle");
+    const otherId = findPickIdByKind(ctx, "point");
+    if (!lineId || !circleId || !otherId) return;
+    const id = freshId(ctx, "X");
+    const label = ctx.nextLabel("point");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "point", label, {
+        constraint: { kind: "secondIntersection", line: lineId, circle: circleId, other: otherId }
+      }) }
+    });
+  }
+};
+var arcMidpointTool = {
+  key: "arcMidpoint",
+  finalize(ctx) {
+    const circleId = findPickIdByKind(ctx, "circle");
+    const picks = ctx.pendingRef.current;
+    const allIds = ctx.pendingIdsRef.current;
+    const ptIds = [];
+    for (let i = 0; i < picks.length; i += 1) {
+      if (objKind(picks[i]) === "point" && allIds[i]) ptIds.push(allIds[i]);
     }
-    case "circumcenter": {
-      const id = freshId(ctx, "o");
+    if (!circleId || ptIds.length < 3) return;
+    const id = freshId(ctx, "M");
+    const label = ctx.nextLabel("point");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "point", label, {
+        constraint: { kind: "arcMidpoint", circle: circleId, a: ptIds[0], b: ptIds[1], notContaining: ptIds[2] }
+      }) }
+    });
+  }
+};
+var circleIntersectionTool = {
+  key: "circleIntersection",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    for (const which of [0, 1]) {
+      const id = freshId(ctx, "X");
       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]] }
+          constraint: { kind: "circleIntersection", c1: ids[0], c2: ids[1], which }
         }) }
       });
-      return;
     }
-    case "incenter": {
-      const id = freshId(ctx, "i");
+  }
+};
+var tangentPointExtTool = {
+  key: "tangentPointExt",
+  finalize(ctx) {
+    const fromId = findPickIdByKind(ctx, "point");
+    const circleId = findPickIdByKind(ctx, "circle");
+    if (!fromId || !circleId) return;
+    for (const which of [0, 1]) {
+      const id = freshId(ctx, "T");
       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]] }
+          constraint: { kind: "tangentPointExt", from: fromId, circle: circleId, which }
         }) }
       });
-      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;
+  }
+};
+var pointOnTool = {
+  key: "pointOn",
+  finalize(ctx, _toolDef, clickXY) {
+    const obj = ctx.pendingRef.current[0];
+    const objId = ctx.pendingIdsRef.current[0];
+    if (!obj || !objId) return;
+    const kind = objKind(obj);
+    const id = freshId(ctx, "p");
+    const label = ctx.nextLabel("point");
+    const px = clickXY?.x ?? 0;
+    const py = clickXY?.y ?? 0;
+    let constraint = null;
+    if (kind === "circle") {
+      const o = obj.center ?? obj.midpoint;
+      const ox = o ? o.X() : 0;
+      const oy = o ? o.Y() : 0;
+      constraint = { kind: "onCircle", circleId: objId, theta: Math.atan2(py - oy, px - ox) };
+    } else if (kind === "line") {
+      const elType = (obj.elType || "").toString().toLowerCase();
+      const p1 = obj.point1;
+      const p2 = obj.point2;
+      let t = 0;
+      if (p1 && p2) {
+        const dx = p2.X() - p1.X();
+        const dy = p2.Y() - p1.Y();
+        const len2 = dx * dx + dy * dy || 1;
+        t = ((px - p1.X()) * dx + (py - p1.Y()) * dy) / len2;
+      }
+      constraint = elType === "segment" ? { kind: "onSegment", segmentId: objId, t } : { kind: "onLine", lineId: objId, t };
     }
-    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]
-        }) }
-      });
+    if (!constraint) return;
+    ctx.store.dispatch({ type: "ADD", payload: { obj: mkSceneObj(id, "point", label, { constraint }) } });
+  }
+};
+
+// src/stamps/geometry-2d/editor/handlers/finalize/polygons.ts
+var polygons_exports = {};
+__export(polygons_exports, {
+  isoTrapezoidTool: () => isoTrapezoidTool,
+  isoTriangleTool: () => isoTriangleTool,
+  parallelogramTool: () => parallelogramTool,
+  rectangleTool: () => rectangleTool,
+  rhombusTool: () => rhombusTool,
+  rightTriangleTool: () => rightTriangleTool,
+  squareTool: () => squareTool
+});
+var squareTool = {
+  key: "square",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    const id = freshId(ctx, "sq");
+    const label = ctx.nextLabel("polygon");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "polygon", label, {
+        construction: { kind: "square", p1: ids[0], p2: ids[1] }
+      }) }
+    });
+  }
+};
+var rectangleTool = {
+  key: "rectangle",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    const [aId, bId, cId] = ids;
+    const P = readJxgPos(ctx, cId);
+    const Aj = readJxgPos(ctx, aId);
+    const Bj = readJxgPos(ctx, bId);
+    const t = computePerpendicularT(P, Bj, Aj, Bj);
+    const polyId = freshId(ctx, "rect");
+    const label = ctx.nextLabel("polygon");
+    ctx.store.dispatch({
+      type: "TRANSACTION",
+      payload: { actions: [
+        { type: "UPDATE_ATTRS", payload: { id: cId, patch: {
+          constraint: { kind: "onPerpendicular", through: bId, perpToA: aId, perpToB: bId, t }
+        } } },
+        { type: "ADD", payload: { obj: mkSceneObj(polyId, "polygon", label, {
+          construction: { kind: "rectangle", p1: aId, p2: bId, p3: cId }
+        }) } }
+      ] }
+    });
+  }
+};
+var rhombusTool = {
+  key: "rhombus",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    const [aId, bId, cId] = ids;
+    const P = readJxgPos(ctx, cId);
+    const Bj = readJxgPos(ctx, bId);
+    const theta = computeCircleTheta(P, Bj);
+    const polyId = freshId(ctx, "rho");
+    const label = ctx.nextLabel("polygon");
+    ctx.store.dispatch({
+      type: "TRANSACTION",
+      payload: { actions: [
+        { type: "UPDATE_ATTRS", payload: { id: cId, patch: {
+          constraint: { kind: "onCircleAroundPoint", center: bId, radiusPoint: aId, theta }
+        } } },
+        { type: "ADD", payload: { obj: mkSceneObj(polyId, "polygon", label, {
+          construction: { kind: "rhombus", p1: aId, p2: bId, p3: cId }
+        }) } }
+      ] }
+    });
+  }
+};
+function finalizePgmTrap(ctx, key) {
+  const ids = ctx.pendingIdsRef.current;
+  const [aId, bId, cId] = ids;
+  const prefix = key === "parallelogram" ? "pgm" : "trap";
+  const polyId = freshId(ctx, prefix);
+  const label = ctx.nextLabel("polygon");
+  ctx.store.dispatch({
+    type: "ADD",
+    payload: { obj: mkSceneObj(polyId, "polygon", label, {
+      construction: { kind: key, p1: aId, p2: bId, p3: cId }
+    }) }
+  });
+}
+var parallelogramTool = {
+  key: "parallelogram",
+  finalize(ctx) {
+    finalizePgmTrap(ctx, "parallelogram");
+  }
+};
+var isoTrapezoidTool = {
+  key: "isoTrapezoid",
+  finalize(ctx) {
+    finalizePgmTrap(ctx, "isoTrapezoid");
+  }
+};
+var isoTriangleTool = {
+  key: "isoTriangle",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    const [b1Id, b2Id, apexId] = ids;
+    const P = readJxgPos(ctx, apexId);
+    const B1 = readJxgPos(ctx, b1Id);
+    const B2 = readJxgPos(ctx, b2Id);
+    const t = computePerpBisectorT(P, B1, B2);
+    const polyId = freshId(ctx, "iso");
+    const label = ctx.nextLabel("polygon");
+    ctx.store.dispatch({
+      type: "TRANSACTION",
+      payload: { actions: [
+        { type: "UPDATE_ATTRS", payload: { id: apexId, patch: {
+          constraint: { kind: "onPerpBisector", p1: b1Id, p2: b2Id, t }
+        } } },
+        { type: "ADD", payload: { obj: mkSceneObj(polyId, "polygon", label, {
+          construction: { kind: "isoTriangle", base1: b1Id, base2: b2Id, apex: apexId }
+        }) } }
+      ] }
+    });
+  }
+};
+var rightTriangleTool = {
+  key: "rightTriangle",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    const [rId, p1Id, p2Id] = ids;
+    const P = readJxgPos(ctx, p2Id);
+    const R = readJxgPos(ctx, rId);
+    const P1 = readJxgPos(ctx, p1Id);
+    const t = computePerpendicularT(P, R, R, P1);
+    const polyId = freshId(ctx, "rtri");
+    const label = ctx.nextLabel("polygon");
+    ctx.store.dispatch({
+      type: "TRANSACTION",
+      payload: { actions: [
+        { type: "UPDATE_ATTRS", payload: { id: p2Id, patch: {
+          constraint: { kind: "onPerpendicular", through: rId, perpToA: rId, perpToB: p1Id, t }
+        } } },
+        { type: "ADD", payload: { obj: mkSceneObj(polyId, "polygon", label, {
+          construction: { kind: "rightTriangle", rightAngle: rId, leg1End: p1Id, leg2End: p2Id }
+        }) } }
+      ] }
+    });
+  }
+};
+
+// src/stamps/geometry-2d/editor/handlers/finalize/measure.ts
+var measure_exports = {};
+__export(measure_exports, {
+  angleTool: () => angleTool,
+  distanceTool: () => distanceTool,
+  intersectTool: () => intersectTool
+});
+var angleTool = {
+  key: "angle",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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]
+      }) }
+    });
+  }
+};
+var distanceTool = {
+  key: "distance",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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] }) }
+    });
+  }
+};
+var intersectTool = {
+  key: "intersect",
+  finalize(ctx) {
+    const ids = ctx.pendingIdsRef.current;
+    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;
     }
-    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] }) }
+    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;
-    }
-    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/handlers/finalize/registry.ts
+var ALL = [
+  ...Object.values(lines_exports),
+  ...Object.values(circles_exports),
+  ...Object.values(points_exports),
+  ...Object.values(polygons_exports),
+  ...Object.values(measure_exports)
+].filter((m) => !!m && typeof m.finalize === "function");
+var TOOL_MODULES = new Map(ALL.map((m) => [m.key, m]));
+
+// src/stamps/geometry-2d/editor/handlers/finalizeShape.ts
+function finalizeShape(ctx, toolDef, clickXY) {
+  TOOL_MODULES.get(toolDef.key)?.finalize(ctx, toolDef, clickXY);
 }
 
 // src/stamps/geometry-2d/editor/transforms.ts
@@ -1013,6 +1662,20 @@ function finalizeTransform(ctx, tool, pendingIds, value) {
     });
     return;
   }
+  if (tool === "circleCR") {
+    const r = Math.abs(value);
+    if (!(r > 0)) {
+      ctx.flashWarn("B\xE1n k\xEDnh ph\u1EA3i > 0");
+      return;
+    }
+    const id = freshId(ctx, "c");
+    const label = ctx.nextLabel("circle");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: { obj: mkSceneObj(id, "circle", label, { center: pendingIds[0], radius: r }) }
+    });
+    return;
+  }
   const sourceId = pendingIds[0];
   const state = ctx.store.getState();
   const source = state.objects[sourceId];
@@ -1206,7 +1869,7 @@ function handleMultiClickTool(ctx, toolDef, e, x, y, hits, bestHit) {
   }
   if (ctx.pendingIdsRef.current.length >= toolDef.needs) {
     const tk = toolDef.key;
-    if (tk === "rotate" || tk === "dilate" || tk === "regularPolygon") {
+    if (tk === "rotate" || tk === "dilate" || tk === "regularPolygon" || tk === "circleCR") {
       const cx = (e.clientX ?? 0) + 8;
       const cy = (e.clientY ?? 0) + 8;
       ctx.pendingTransformRef.current = {
@@ -1222,7 +1885,7 @@ function handleMultiClickTool(ctx, toolDef, e, x, y, hits, bestHit) {
       ctx.clearPending();
       return;
     }
-    finalizeShape(ctx, toolDef);
+    finalizeShape(ctx, toolDef, { x, y });
     ctx.clearPending();
   } else {
     ctx.refreshPreview();
@@ -1756,10 +2419,7 @@ function useAxisGridSync({
 }
 function useEditorShortcuts({
   store,
-  pendingIdsRef,
   selectedSetRef,
-  clearPending,
-  clearSelection,
   deleteSelection
 }) {
   useEffect(() => {
@@ -1781,18 +2441,6 @@ function useEditorShortcuts({
         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();
@@ -1801,7 +2449,7 @@ function useEditorShortcuts({
     };
     window.addEventListener("keydown", onKey, { capture: true });
     return () => window.removeEventListener("keydown", onKey, { capture: true });
-  }, [store, pendingIdsRef, selectedSetRef, clearPending, clearSelection, deleteSelection]);
+  }, [store, selectedSetRef, deleteSelection]);
 }
 function useJxgSceneIdMap({ store, rendererRef }) {
   const jxgIdToSceneRef = useRef(/* @__PURE__ */ new Map());
@@ -2005,10 +2653,7 @@ var MiniBoard2D = forwardRef(function MiniBoard2D2({ onReady, store, selectedToo
   };
   useEditorShortcuts({
     store,
-    pendingIdsRef: toolSM.pendingIdsRef,
     selectedSetRef,
-    clearPending,
-    clearSelection,
     deleteSelection
   });
   useAxisGridSync({ boardRef, axisObjsRef, isDarkRef, showAxis, showGrid });
@@ -2550,7 +3195,8 @@ var MultiPropertiesPopover = (props) => {
 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 }
+  regularPolygon: { aria: "S\u1ED1 c\u1EA1nh \u0111a gi\xE1c \u0111\u1EC1u", label: "S\u1ED1 c\u1EA1nh (n \u2265 3)", step: 1, min: 3 },
+  circleCR: { aria: "B\xE1n k\xEDnh \u0111\u01B0\u1EDDng tr\xF2n", label: "B\xE1n k\xEDnh", step: 0.5, min: 0 }
 };
 var TransformParamPopover = ({ kind, anchor, defaultValue, onConfirm, onCancel, isDark }) => {
   const [value, setValue] = useState(defaultValue);
@@ -2723,19 +3369,44 @@ function useAiFigure(generator, options = {}) {
     hasUnsupported
   };
 }
-var BUILD_EXAMPLES = [
-  "Tam gi\xE1c ABC, d\u1EF1ng trung \u0111i\u1EC3m M c\u1EE7a BC",
-  "Tam gi\xE1c ABC vu\xF4ng t\u1EA1i A, AH l\xE0 \u0111\u01B0\u1EDDng cao xu\u1ED1ng BC",
-  "H\xECnh thoi ABCD, hai \u0111\u01B0\u1EDDng ch\xE9o c\u1EAFt nhau t\u1EA1i O",
-  "T\u1EEB \u0111i\u1EC3m M ngo\xE0i \u0111\u01B0\u1EDDng tr\xF2n (O), k\u1EBB hai ti\u1EBFp tuy\u1EBFn"
-];
-var REFINE_EXAMPLES = [
-  "Th\xEAm trung \u0111i\u1EC3m M c\u1EE7a BC",
-  "D\u1EF1ng \u0111\u01B0\u1EDDng cao AH xu\u1ED1ng BC",
-  "V\u1EBD \u0111\u01B0\u1EDDng tr\xF2n ngo\u1EA1i ti\u1EBFp",
-  "Th\xEAm ti\u1EBFp tuy\u1EBFn t\u1EA1i A"
-];
-function AiFigurePrompt({ generator, onGenerated, currentState }) {
+var PaperclipIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.41 17.41a2 2 0 1 1-2.83-2.83l8.49-8.49" })
+  }
+);
+var ArrowUpIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2.25,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 19V5" }),
+      /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7" })
+    ]
+  }
+);
+var StopIcon = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) });
+function AiFigurePrompt({
+  generator,
+  onGenerated,
+  currentState,
+  extractProblem = handleExtractProblem
+}) {
   const {
     prompt,
     setPrompt,
@@ -2755,18 +3426,96 @@ function AiFigurePrompt({ generator, onGenerated, currentState }) {
       setElapsed(0);
       return;
     }
-    setElapsed(0);
     const id = setInterval(() => setElapsed((s) => s + 1), 1e3);
     return () => clearInterval(id);
   }, [isLoading]);
-  const handleSubmit = useCallback(
-    async (event) => {
-      event.preventDefault();
-      const generated = await submit();
-      if (generated) onGenerated(generated);
+  const [image, setImage] = useState(null);
+  const [ocrLoading, setOcrLoading] = useState(false);
+  const [ocrError, setOcrError] = useState(null);
+  const [ocrWarning, setOcrWarning] = useState(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const fileInputRef = useRef(null);
+  const textareaRef = useRef(null);
+  const imagePreview = image ? `data:${image.mediaType};base64,${image.base64}` : null;
+  useEffect(() => {
+    setOcrError(null);
+    setOcrWarning(null);
+  }, [image]);
+  const handleFile = useCallback(
+    async (file) => {
+      if (isLoading || ocrLoading) return;
+      const v = validateFile(file);
+      if (!v.ok) {
+        setOcrError(v.message);
+        return;
+      }
+      try {
+        const part = await fileToImagePart(file);
+        setImage(part);
+      } catch (e) {
+        setOcrError(e instanceof Error ? e.message : "Kh\xF4ng decode \u0111\u01B0\u1EE3c \u1EA3nh");
+      }
+    },
+    [isLoading, ocrLoading]
+  );
+  const handleFileInput = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (file) void handleFile(file);
+      e.target.value = "";
+    },
+    [handleFile]
+  );
+  const handlePaste = useCallback(
+    (e) => {
+      const item = Array.from(e.clipboardData.items).find(
+        (it) => it.kind === "file" && it.type.startsWith("image/")
+      );
+      if (!item) return;
+      const file = item.getAsFile();
+      if (!file) return;
+      e.preventDefault();
+      void handleFile(file);
+    },
+    [handleFile]
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      const file = Array.from(e.dataTransfer.files).find(
+        (f) => f.type.startsWith("image/")
+      );
+      if (file) void handleFile(file);
     },
-    [onGenerated, submit]
+    [handleFile]
   );
+  const runOcr = useCallback(async () => {
+    if (!image) return;
+    setOcrLoading(true);
+    setOcrError(null);
+    setOcrWarning(null);
+    try {
+      const r = await extractProblem(image);
+      if (r.kind === "success" || r.kind === "low-confidence") {
+        setPrompt(r.text);
+        if (r.kind === "low-confidence") setOcrWarning(r.warning);
+        requestAnimationFrame(() => textareaRef.current?.focus());
+      } else {
+        setOcrError(r.message);
+      }
+    } finally {
+      setOcrLoading(false);
+    }
+  }, [image, setPrompt, extractProblem]);
+  const handleSendClick = useCallback(async () => {
+    if (image && !prompt.trim() && !ocrLoading) {
+      await runOcr();
+      return;
+    }
+    const generated = await submit();
+    if (generated) onGenerated(generated);
+  }, [image, prompt, ocrLoading, runOcr, submit, onGenerated]);
   const handleSwitchToBuild = useCallback(() => {
     if (currentState && currentState.order.length > 0) {
       const ok = window.confirm(
@@ -2776,109 +3525,256 @@ function AiFigurePrompt({ generator, onGenerated, currentState }) {
     }
     setMode("build");
   }, [currentState, setMode]);
-  const primaryLabel = isLoading ? tokens > 0 ? `\u0110ang d\u1EF1ng ${tokens}tok / ${elapsed}s \u2014 Hu\u1EF7` : `\u0110ang d\u1EF1ng... ${elapsed}s \u2014 Hu\u1EF7` : "D\u1EF1ng b\u1EB1ng AI";
   const hasContent = currentState != null && currentState.order.length > 0;
-  const examples = mode === "refine" ? REFINE_EXAMPLES : BUILD_EXAMPLES;
+  const promptEmpty = !prompt.trim();
+  const willOcr = image != null && promptEmpty;
+  const sendDisabled = !image && promptEmpty || ocrLoading || isLoading && !willOcr;
   const refineChipLabel = entityCount.points + entityCount.shapes > 0 ? `Th\xEAm v\xE0o \xB7 ${entityCount.points}\u0111, ${entityCount.shapes}\u0111o\u1EA1n` : "Th\xEAm v\xE0o";
-  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: [
+  const placeholder = willOcr ? "B\u1EA5m g\u1EEDi \u0111\u1EC3 \u0111\u1ECDc \u0111\u1EC1 t\u1EEB \u1EA3nh \u2014 ho\u1EB7c t\u1EF1 g\xF5 \u1EDF \u0111\xE2y\u2026" : mode === "refine" ? "M\xF4 t\u1EA3 ph\u1EA7n c\u1EA7n th\xEAm (vd: trung \u0111i\u1EC3m M c\u1EE7a BC). C\xF3 th\u1EC3 d\xE1n \u1EA3nh \u0111\u1EC1 (Ctrl+V)." : "M\xF4 t\u1EA3 \u0111\u1EC1 b\xE0i c\u1EA7n d\u1EF1ng \u2014 ho\u1EB7c d\xE1n/\u0111\xEDnh \u1EA3nh \u0111\u1EC1 (Ctrl+V).";
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-slate-200 bg-slate-50 px-3 py-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium tracking-wide text-slate-600", children: "D\u1EF1ng h\xECnh b\u1EB1ng AI" }),
+      hasContent && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", role: "tablist", "aria-label": "Ch\u1EBF \u0111\u1ED9 AI", children: [
         /* @__PURE__ */ jsx(
-          "label",
+          "button",
           {
-            htmlFor: "geometry-ai-prompt",
-            className: "mb-1 block text-xs font-medium text-slate-600",
-            children: "D\u1EF1ng h\xECnh b\u1EB1ng AI"
+            type: "button",
+            role: "tab",
+            "aria-selected": mode === "refine",
+            "data-testid": "geometry-ai-mode-refine",
+            onClick: () => setMode("refine"),
+            disabled: isLoading || hasUnsupported,
+            title: hasUnsupported ? "H\xECnh c\xF3 \u0111\u1ED1i t\u01B0\u1EE3ng ngo\xE0i DSL \u2014 ch\u1EC9 d\u1EF1ng m\u1EDBi \u0111\u01B0\u1EE3c" : refineChipLabel,
+            className: `rounded-full px-2.5 py-0.5 text-[11px] transition ${mode === "refine" ? "bg-emerald-600 text-white shadow-sm" : "text-slate-500 hover:text-emerald-700"} ${hasUnsupported ? "cursor-not-allowed opacity-40" : ""}`,
+            children: refineChipLabel
           }
         ),
-        hasContent && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "data-testid": "geometry-ai-mode-refine",
-              onClick: () => setMode("refine"),
-              disabled: isLoading || hasUnsupported,
-              className: `rounded-full border px-2 py-0.5 text-[11px] transition ${mode === "refine" ? "border-emerald-600 bg-emerald-100 text-emerald-800" : "border-slate-300 bg-white text-slate-600 hover:border-emerald-400"} ${hasUnsupported ? "cursor-not-allowed opacity-50" : ""}`,
-              title: hasUnsupported ? "H\xECnh hi\u1EC7n t\u1EA1i c\xF3 \u0111\u1ED1i t\u01B0\u1EE3ng ngo\xE0i DSL \u2014 ch\u1EC9 d\u1EF1ng m\u1EDBi \u0111\u01B0\u1EE3c" : refineChipLabel,
-              children: refineChipLabel
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "data-testid": "geometry-ai-mode-build",
-              onClick: handleSwitchToBuild,
-              disabled: isLoading,
-              className: `rounded-full border px-2 py-0.5 text-[11px] transition ${mode === "build" ? "border-emerald-600 bg-emerald-100 text-emerald-800" : "border-slate-300 bg-white text-slate-600 hover:border-emerald-400"}`,
-              children: "D\u1EF1ng m\u1EDBi"
-            }
-          ),
-          hasUnsupported && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "text-[10px] text-amber-700",
-              "data-testid": "geometry-ai-unsupported-warning",
-              children: "H\xECnh c\xF3 \u0111\u1ED1i t\u01B0\u1EE3ng ngo\xE0i DSL"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": mode === "build",
+            "data-testid": "geometry-ai-mode-build",
+            onClick: handleSwitchToBuild,
+            disabled: isLoading,
+            className: `rounded-full px-2.5 py-0.5 text-[11px] transition ${mode === "build" ? "bg-emerald-600 text-white shadow-sm" : "text-slate-500 hover:text-emerald-700"}`,
+            children: "D\u1EF1ng m\u1EDBi"
+          }
+        )
+      ] })
+    ] }),
+    hasUnsupported && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mb-1.5 text-[10px] text-amber-700",
+        "data-testid": "geometry-ai-unsupported-warning",
+        children: "H\xECnh c\xF3 \u0111\u1ED1i t\u01B0\u1EE3ng ngo\xE0i DSL \u2014 ch\u1EC9 d\u1EF1ng m\u1EDBi \u0111\u01B0\u1EE3c"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onDragOver: (e) => {
+          e.preventDefault();
+          setIsDragOver(true);
+        },
+        onDragLeave: () => setIsDragOver(false),
+        onDrop: handleDrop,
+        onPaste: handlePaste,
+        "aria-label": "Khu v\u1EF1c k\xE9o th\u1EA3 \u1EA3nh",
+        role: "region",
+        className: "group relative flex flex-col rounded-2xl bg-white shadow-sm transition-all duration-150 ring-1 ring-slate-200 focus-within:ring-2 focus-within:ring-emerald-400/70 focus-within:shadow-md " + (isDragOver ? "ring-2 ring-emerald-500 bg-emerald-50/40" : ""),
+        children: [
+          image && imagePreview && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 px-3 pt-2.5", children: /* @__PURE__ */ jsxs("div", { className: "group/chip relative", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imagePreview,
+                alt: "\u1EA2nh \u0111\u1EC1 b\xE0i",
+                className: "max-h-48 max-w-full h-auto w-auto rounded-lg border border-slate-200 shadow-sm"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setImage(null),
+                disabled: ocrLoading || isLoading,
+                "aria-label": "Xo\xE1 \u1EA3nh",
+                className: "absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-slate-900/85 text-[11px] font-medium text-white shadow ring-2 ring-white transition hover:bg-slate-900 disabled:opacity-50",
+                children: "\xD7"
+              }
+            )
+          ] }) }),
           /* @__PURE__ */ jsx(
             "textarea",
             {
+              ref: textareaRef,
               id: "geometry-ai-prompt",
               "aria-label": "\u0110\u1EC1 b\xE0i cho AI",
+              "data-testid": "geometry-ai-textarea",
               value: prompt,
-              onChange: (event) => setPrompt(event.target.value),
+              onChange: (e) => setPrompt(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !sendDisabled) {
+                  e.preventDefault();
+                  void handleSendClick();
+                }
+              },
               disabled: isLoading,
               rows: 2,
-              placeholder: mode === "refine" ? "V\xED d\u1EE5: th\xEAm trung \u0111i\u1EC3m M c\u1EE7a BC" : "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"
+              placeholder,
+              className: "block w-full resize-none rounded-2xl bg-transparent px-3.5 pt-2.5 pb-1 text-sm leading-relaxed text-slate-800 placeholder:text-slate-400 outline-none disabled:opacity-60 field-sizing-content max-h-44"
             }
           ),
-          isLoading ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: cancel,
-              className: "rounded bg-amber-600 px-3 py-2 text-xs font-medium text-white transition hover:bg-amber-700",
-              children: primaryLabel
-            }
-          ) : /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "submit",
-              disabled: !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: primaryLabel
-            }
-          )
-        ] }),
-        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-xs text-red-600", children: error }),
-        !isLoading && !prompt.trim() && !error && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-500", children: "G\u1EE3i \xFD:" }),
-          examples.map((ex) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setPrompt(ex),
-              className: "rounded-full border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-600 transition hover:border-emerald-400 hover:bg-emerald-50 hover:text-emerald-700",
-              children: ex
-            },
-            ex
-          ))
-        ] })
-      ]
-    }
-  );
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-2 pb-2 pt-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => fileInputRef.current?.click(),
+                  disabled: isLoading || ocrLoading,
+                  "aria-label": "\u0110\xEDnh \u1EA3nh \u0111\u1EC1 b\xE0i",
+                  title: "\u0110\xEDnh \u1EA3nh (c\u0169ng c\xF3 th\u1EC3 d\xE1n b\u1EB1ng Ctrl+V ho\u1EB7c k\xE9o th\u1EA3)",
+                  className: "flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-emerald-700 disabled:opacity-40",
+                  children: /* @__PURE__ */ jsx(PaperclipIcon, { className: "h-[18px] w-[18px]" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: "image/png,image/jpeg,image/webp",
+                  className: "sr-only",
+                  onChange: handleFileInput,
+                  disabled: isLoading || ocrLoading,
+                  "aria-label": "Ch\u1ECDn \u1EA3nh \u0111\u1EC1 b\xE0i"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              (isLoading || ocrLoading) && /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] tabular-nums text-slate-500", children: ocrLoading ? "\u0111\u1ECDc \u1EA3nh\u2026" : tokens > 0 ? `${tokens}tok \xB7 ${elapsed}s` : `${elapsed}s` }),
+              isLoading ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: cancel,
+                  "aria-label": "Hu\u1EF7 d\u1EF1ng h\xECnh AI",
+                  "data-testid": "geometry-ai-cancel",
+                  title: `\u0110ang d\u1EF1ng\u2026 ${elapsed}s \u2014 b\u1EA5m \u0111\u1EC3 hu\u1EF7`,
+                  className: "flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-white shadow-sm transition hover:scale-105 hover:bg-amber-600 active:scale-95",
+                  children: /* @__PURE__ */ jsx(StopIcon, { className: "h-3.5 w-3.5" })
+                }
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void handleSendClick(),
+                  disabled: sendDisabled,
+                  "aria-label": willOcr ? "\u0110\u1ECDc \u0111\u1EC1 t\u1EEB \u1EA3nh" : "D\u1EF1ng b\u1EB1ng AI",
+                  title: willOcr ? "\u0110\u1ECDc \u0111\u1EC1 t\u1EEB \u1EA3nh (s\u1EBD \u0111i\u1EC1n v\xE0o \xF4 chat)" : "D\u1EF1ng b\u1EB1ng AI (Ctrl/\u2318+Enter)",
+                  "data-testid": willOcr ? "geometry-ai-ocr" : "geometry-ai-submit",
+                  className: "flex h-8 w-8 items-center justify-center rounded-full bg-emerald-600 text-white shadow-sm transition hover:scale-105 hover:bg-emerald-700 active:scale-95 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:hover:scale-100",
+                  children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-[18px] w-[18px]" })
+                }
+              )
+            ] })
+          ] }),
+          isDragOver && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center rounded-2xl bg-emerald-50/60 text-xs font-medium text-emerald-700", children: "Th\u1EA3 \u1EA3nh v\xE0o \u0111\xE2y" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("p", { className: "mt-1.5 px-1 text-[10px] text-slate-500", children: [
+      "D\xE1n \u1EA3nh (Ctrl+V), k\xE9o th\u1EA3, ho\u1EB7c b\u1EA5m ",
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u{1F4CE}" }),
+      " \u0111\u1EC3 \u0111\xEDnh \u1EA3nh \u0111\u1EC1."
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: error }),
+    ocrError && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: ocrError }),
+    ocrWarning && /* @__PURE__ */ jsx("p", { className: "mt-1 rounded bg-amber-50 px-2 py-1 text-[11px] text-amber-700", children: ocrWarning })
+  ] });
+}
+
+// src/stamps/geometry-2d/draft.ts
+function svgIntrinsicSize(svg) {
+  const w = svg.match(/<svg[^>]*\swidth="([\d.]+)"/);
+  const h = svg.match(/<svg[^>]*\sheight="([\d.]+)"/);
+  if (w && h) return { width: parseFloat(w[1]), height: parseFloat(h[1]) };
+  const vb = svg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
+  if (vb) return { width: parseFloat(vb[1]), height: parseFloat(vb[2]) };
+  return { width: 300, height: 200 };
+}
+function draftFromViewport(svg, appState, seq) {
+  const { width, height } = svgIntrinsicSize(svg);
+  const zoom = appState.zoom?.value ?? 1;
+  const vw = appState.width ?? 800;
+  const vh = appState.height ?? 600;
+  const cx = appState.scrollX + vw / 2 / zoom;
+  const cy = appState.scrollY + vh / 2 / zoom;
+  return { svg, width, height, x: cx - width / 2, y: cy - height / 2, seq };
+}
+function didStateChange(seen, jsonState) {
+  if (seen.last === jsonState) return false;
+  seen.last = jsonState;
+  return true;
+}
+
+// src/stamps/geometry-2d/editor/useGeometryDraftEmit.ts
+function useGeometryDraftEmit({
+  store,
+  handleRef,
+  api,
+  showAxis,
+  showGrid,
+  onGeometryDraft,
+  debounceMs = 350
+}) {
+  const seqRef = useRef(0);
+  const seenRef = useRef({ last: null });
+  const timerRef = useRef(null);
+  const cbRef = useRef(onGeometryDraft);
+  cbRef.current = onGeometryDraft;
+  useEffect(() => {
+    if (!cbRef.current) return;
+    const emit = () => {
+      const h = handleRef.current;
+      if (!h) return;
+      const state = h.getState();
+      if (Object.keys(state.objects).length === 0) {
+        if (seenRef.current.last !== null) {
+          seenRef.current.last = null;
+          cbRef.current?.(null);
+        }
+        return;
+      }
+      const bbox = h.getBbox();
+      const jsonState = serializeBoard(state, { bbox, showAxis, showGrid });
+      if (!didStateChange(seenRef.current, jsonState)) return;
+      void (async () => {
+        try {
+          const svg = await renderGeometrySvgFromState(jsonState);
+          const appState = api?.getAppState?.() ?? { scrollX: 0, scrollY: 0, width: 800, height: 600, zoom: { value: 1 } };
+          seqRef.current += 1;
+          cbRef.current?.(draftFromViewport(svg, appState, seqRef.current));
+        } catch (err) {
+          console.warn("[geometry] draft render failed:", err);
+        }
+      })();
+    };
+    const schedule = () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(emit, debounceMs);
+    };
+    const unsub = store.subscribe(schedule);
+    return () => {
+      unsub();
+      if (timerRef.current) clearTimeout(timerRef.current);
+      cbRef.current?.(null);
+    };
+  }, [store, handleRef, api, showAxis, showGrid, debounceMs]);
 }
 var GeometryEditorPanelInner = forwardRef(
   function GeometryEditorPanelInner2({
@@ -2898,7 +3794,9 @@ var GeometryEditorPanelInner = forwardRef(
     canUndo,
     canRedo,
     onSelectionChange,
-    generateGeometryFigure
+    generateGeometryFigure,
+    api,
+    onGeometryDraft
   }, ref) {
     const { showToast } = useToast();
     const handleRef = useRef(null);
@@ -2911,12 +3809,14 @@ var GeometryEditorPanelInner = forwardRef(
     useEffect(() => {
       onSelectionChangeRef.current = onSelectionChange;
     }, [onSelectionChange]);
+    const onGeometryDraftRef = useRef(onGeometryDraft);
+    useEffect(() => {
+      onGeometryDraftRef.current = onGeometryDraft;
+    }, [onGeometryDraft]);
     useEditorState({ store, onHistoryChange });
-    const currentSceneState = useSyncExternalStore(
-      (cb) => store.subscribe(cb),
-      () => store.getState(),
-      () => store.getState()
-    );
+    useGeometryDraftEmit({ store, handleRef, api, showAxis, showGrid, onGeometryDraft });
+    const snap = () => store.getState();
+    const currentSceneState = useSyncExternalStore((cb) => store.subscribe(cb), snap, snap);
     useEffect(() => {
       const sync = () => setHasContent(Object.keys(store.getState().objects).length > 0);
       sync();
@@ -2926,22 +3826,22 @@ var GeometryEditorPanelInner = forwardRef(
       const h = handleRef.current;
       if (!h) return;
       setReady(true);
-      h.onSelect((snap) => {
-        setPropsPopover(snap);
+      h.onSelect((snap2) => {
+        setPropsPopover(snap2);
         setMultiSelection(null);
-        onSelectionChangeRef.current?.(snap.id);
+        onSelectionChangeRef.current?.(snap2.id);
       });
       h.onTransformParam((info) => setTransformPopover(info));
-      h.onSelectionState((snap) => {
-        if (!snap || snap.ids.length === 0) {
+      h.onSelectionState((snap2) => {
+        if (!snap2 || snap2.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 (snap2.ids.length === 1) {
+          const id = snap2.ids[0];
+          const single = buildObjectSnapshot(store.getState(), id, snap2.anchor);
           if (single) {
             setPropsPopover(single);
             setMultiSelection(null);
@@ -2949,7 +3849,7 @@ var GeometryEditorPanelInner = forwardRef(
           }
           return;
         }
-        setMultiSelection(snap);
+        setMultiSelection(snap2);
         setPropsPopover(null);
         onSelectionChangeRef.current?.(void 0);
       });
@@ -2993,15 +3893,13 @@ var GeometryEditorPanelInner = forwardRef(
         try {
           const svgString = await renderGeometrySvgFromState(jsonState);
           onInsert(jsonState, svgString);
+          onGeometryDraftRef.current?.(null);
         } 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);
@@ -3096,7 +3994,7 @@ var GeometryEditorPanelInner = forwardRef(
                 "button",
                 {
                   type: "button",
-                  onClick: handleInsert,
+                  onClick: performInsert,
                   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",
@@ -3183,12 +4081,12 @@ var GeometryEditorPanelInner = forwardRef(
               onClose: dismissMultiPopover
             }
           ),
-          transformPopover && (transformPopover.tool === "rotate" || transformPopover.tool === "dilate" || transformPopover.tool === "regularPolygon") && /* @__PURE__ */ jsx(
+          transformPopover && (transformPopover.tool === "rotate" || transformPopover.tool === "dilate" || transformPopover.tool === "regularPolygon" || transformPopover.tool === "circleCR") && /* @__PURE__ */ jsx(
             TransformParamPopover,
             {
               kind: transformPopover.tool,
               anchor: transformPopover.anchor,
-              defaultValue: transformPopover.tool === "rotate" ? 90 : transformPopover.tool === "dilate" ? 2 : 6,
+              defaultValue: transformPopover.tool === "rotate" ? 90 : transformPopover.tool === "dilate" ? 2 : transformPopover.tool === "circleCR" ? 3 : 6,
               isDark,
               onConfirm: (v) => {
                 handleRef.current?.confirmTransformParam(v);
@@ -3214,7 +4112,7 @@ var GeometryEditorPanelInner = forwardRef(
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: handleInsert,
+                  onClick: performInsert,
                   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",
@@ -3270,7 +4168,7 @@ function parseInitialState(data) {
   return deserializeBoard(data.jsonState);
 }
 var GeometryStampHost = forwardRef(
-  function GeometryStampHost2({ api, editingElement, onClose, isDark, generateGeometryFigure }, ref) {
+  function GeometryStampHost2({ api, editingElement, onClose, isDark, generateGeometryFigure, onGeometryDraft }, ref) {
     const panelRef = useRef(null);
     const { isMobile } = useIsMobile();
     const [drawerOpen, setDrawerOpen] = useState(false);
@@ -3385,7 +4283,9 @@ var GeometryStampHost = forwardRef(
           canUndo,
           canRedo,
           onSelectionChange: setSelectedObjectId,
-          generateGeometryFigure
+          generateGeometryFigure,
+          api,
+          onGeometryDraft
         }
       )
     ] });
@@ -3393,5 +4293,5 @@ var GeometryStampHost = forwardRef(
 );
 
 export { GeometryStampHost };
-//# sourceMappingURL=host-L7FMFZUW.mjs.map
-//# sourceMappingURL=host-L7FMFZUW.mjs.map
+//# sourceMappingURL=host-4P766V4J.mjs.map
+//# sourceMappingURL=host-4P766V4J.mjs.map