@xom11/whiteboard 0.25.0 → 0.27.0

package/dist/graph-2d.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var immer = require('immer');
-var React = require('react');
+var React5 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 
@@ -24,7 +24,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -466,10 +466,87 @@ var init_JxgRenderer = __esm({
           const el = def22.render(obj, this.ctx());
           this.elements.set(obj.id, el);
           this.attachFreePointDragSync(obj, el);
+          this.attachGliderDragSync(obj, el);
         } catch (err) {
           console.warn(`[scene/render/2d] kh\xF4ng render \u0111\u01B0\u1EE3c ${obj.kind} id="${obj.id}":`, err);
         }
       }
+      /**
+       * Sync vị trí glider của 3 constraint mới (onPerpendicular / onPerpBisector /
+       * onCircleAroundPoint) — kéo → recompute t/theta dựa trên ref points + vị trí
+       * glider hiện tại → UPDATE_ATTRS. Không đụng onLine/onSegment/onCircle hiện
+       * tại (giữ behavior cũ).
+       */
+      attachGliderDragSync(obj, el) {
+        if (obj.kind !== "point") return;
+        const c = obj.attrs.constraint;
+        if (!c) return;
+        if (c.kind !== "onPerpendicular" && c.kind !== "onPerpBisector" && c.kind !== "onCircleAroundPoint") {
+          return;
+        }
+        const point = el;
+        if (typeof point.on !== "function") return;
+        const sceneId = obj.id;
+        point.on("up", () => {
+          if (this.disposed) return;
+          const cur = this.store.getState().objects[sceneId];
+          if (!cur) return;
+          const curC = cur.attrs.constraint;
+          if (!curC) return;
+          if (typeof point.X !== "function" || typeof point.Y !== "function") return;
+          const x = point.X();
+          const y = point.Y();
+          if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+          if (curC.kind === "onPerpendicular") {
+            const T = this.elements.get(curC.through);
+            const A = this.elements.get(curC.perpToA);
+            const B = this.elements.get(curC.perpToB);
+            if (!T || !A || !B) return;
+            const dx = B.X() - A.X();
+            const dy = B.Y() - A.Y();
+            const len = Math.hypot(dx, dy) || 1;
+            const ux = -dy / len;
+            const uy = dx / len;
+            const newT = (x - T.X()) * ux + (y - T.Y()) * uy;
+            if (Math.abs(newT - curC.t) < 1e-9) return;
+            this.store.dispatch({
+              type: "UPDATE_ATTRS",
+              payload: { id: sceneId, patch: { constraint: { ...curC, t: newT } } }
+            });
+            return;
+          }
+          if (curC.kind === "onPerpBisector") {
+            const A = this.elements.get(curC.p1);
+            const B = this.elements.get(curC.p2);
+            if (!A || !B) return;
+            const Mx = (A.X() + B.X()) / 2;
+            const My = (A.Y() + B.Y()) / 2;
+            const dx = B.X() - A.X();
+            const dy = B.Y() - A.Y();
+            const len = Math.hypot(dx, dy) || 1;
+            const ux = -dy / len;
+            const uy = dx / len;
+            const newT = (x - Mx) * ux + (y - My) * uy;
+            if (Math.abs(newT - curC.t) < 1e-9) return;
+            this.store.dispatch({
+              type: "UPDATE_ATTRS",
+              payload: { id: sceneId, patch: { constraint: { ...curC, t: newT } } }
+            });
+            return;
+          }
+          if (curC.kind === "onCircleAroundPoint") {
+            const C = this.elements.get(curC.center);
+            if (!C) return;
+            const newTheta = Math.atan2(y - C.Y(), x - C.X());
+            if (Math.abs(newTheta - curC.theta) < 1e-9) return;
+            this.store.dispatch({
+              type: "UPDATE_ATTRS",
+              payload: { id: sceneId, patch: { constraint: { ...curC, theta: newTheta } } }
+            });
+            return;
+          }
+        });
+      }
       /**
        * Đồng bộ toạ độ live của free point về scene.constraint khi user kéo bằng
        * tay (Move tool / mobile drag). JSXGraph mutate obj.X()/Y() ngay nhưng
@@ -951,9 +1028,9 @@ var init_selectors = __esm({
 });
 function useEditorState(opts) {
   const { store, initialState, onHistoryChange, bindKeyboardShortcuts = true } = opts;
-  const onHistoryChangeRef = React__namespace.useRef(onHistoryChange);
+  const onHistoryChangeRef = React5__namespace.useRef(onHistoryChange);
   onHistoryChangeRef.current = onHistoryChange;
-  React__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     if (initialState?.state) {
       const loaded = initialState.state;
       store.withoutHistory(() => {
@@ -961,14 +1038,14 @@ function useEditorState(opts) {
       });
     }
   }, []);
-  React__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     onHistoryChangeRef.current?.(store.canUndo(), store.canRedo());
     const unsub = store.subscribe(() => {
       onHistoryChangeRef.current?.(store.canUndo(), store.canRedo());
     });
     return unsub;
   }, [store]);
-  React__namespace.useEffect(() => {
+  React5__namespace.useEffect(() => {
     if (!bindKeyboardShortcuts) return;
     const onKey = (e) => {
       const ae = document.activeElement;
@@ -1554,6 +1631,31 @@ function constraintRefs2D(c) {
       return [c.vertices[0], c.vertices[1], c.vertices[2]];
     case "orthocenter":
       return [c.vertices[0], c.vertices[1], c.vertices[2]];
+    case "onPerpendicular":
+      return [c.through, c.perpToA, c.perpToB];
+    case "onPerpBisector":
+      return [c.p1, c.p2];
+    case "onCircleAroundPoint":
+      return [c.center, c.radiusPoint];
+    case "tangentPointExt":
+      return [c.from, c.circle];
+    case "circleIntersection":
+      return [c.c1, c.c2];
+    case "circleSecondIntersection":
+      return [c.c1, c.c2, c.exclude];
+    case "secondIntersection":
+      return [c.line, c.circle, c.other];
+    case "tangencyPoint":
+      return [c.circle, c.onLine];
+    case "arcMidpoint":
+      return [c.circle, c.a, c.b, c.notContaining];
+    case "pointAtDistance": {
+      const d = c.distance;
+      const extra = d.kind === "circleRadius" ? [d.circle] : d.kind === "segmentLength" ? [d.p1, d.p2] : [];
+      return [c.from, c.through, ...extra];
+    }
+    case "excenter":
+      return [c.vertices[0], c.vertices[1], c.vertices[2]];
     default:
       return [];
   }
@@ -1563,7 +1665,412 @@ var init_d_constraint2 = __esm({
   }
 });
 
-// src/core/scene/kinds/point.ts
+// src/core/scene/kinds/point-constraints/_types.ts
+function definePointConstraint(m) {
+  return m;
+}
+var init_types3 = __esm({
+  "src/core/scene/kinds/point-constraints/_types.ts"() {
+  }
+});
+
+// src/core/scene/kinds/point-constraints/free.ts
+var freeConstraint;
+var init_free = __esm({
+  "src/core/scene/kinds/point-constraints/free.ts"() {
+    init_types3();
+    freeConstraint = definePointConstraint({
+      kind: "free",
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        return board.create("point", [c.x, c.y], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onAxis.ts
+var onAxisConstraint;
+var init_onAxis = __esm({
+  "src/core/scene/kinds/point-constraints/onAxis.ts"() {
+    init_types3();
+    onAxisConstraint = definePointConstraint({
+      kind: "onAxis",
+      describe: (obj, _state, c) => `${obj.label} tr\xEAn tr\u1EE5c ${c.axis}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const coords = c.axis === "x" ? [c.t, 0] : [0, c.t];
+        return board.create("point", coords, opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/midpoint.ts
+var midpointConstraint;
+var init_midpoint = __esm({
+  "src/core/scene/kinds/point-constraints/midpoint.ts"() {
+    init_types3();
+    midpointConstraint = definePointConstraint({
+      kind: "midpoint",
+      describe: (obj, state, c) => {
+        const l1 = state?.objects[c.p1]?.label ?? c.p1;
+        const l2 = state?.objects[c.p2]?.label ?? c.p2;
+        return `${obj.label} = trung \u0111i\u1EC3m ${l1}${l2}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const p1 = ctx.resolveRef(c.p1);
+        const p2 = ctx.resolveRef(c.p2);
+        return board.create("midpoint", [p1, p2], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/perpFoot.ts
+var perpFootConstraint;
+var init_perpFoot = __esm({
+  "src/core/scene/kinds/point-constraints/perpFoot.ts"() {
+    init_types3();
+    perpFootConstraint = definePointConstraint({
+      kind: "perpFoot",
+      validate: (c) => {
+        if (!c.from || !c.onLine) {
+          throw new Error("point.perpFoot: from v\xE0 onLine b\u1EAFt bu\u1ED9c");
+        }
+      },
+      describe: (obj, state, c) => {
+        const fromLabel = state?.objects[c.from]?.label ?? c.from;
+        const lineLabel = state?.objects[c.onLine]?.label ?? c.onLine;
+        return `${obj.label} = ch\xE2n \u27C2 t\u1EEB ${fromLabel} xu\u1ED1ng ${lineLabel}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const from = ctx.resolveRef(c.from);
+        const onLine = ctx.resolveRef(c.onLine);
+        return board.create("perpendicularpoint", [onLine, from], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/circumcenter.ts
+var circumcenterConstraint;
+var init_circumcenter = __esm({
+  "src/core/scene/kinds/point-constraints/circumcenter.ts"() {
+    init_types3();
+    circumcenterConstraint = definePointConstraint({
+      kind: "circumcenter",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.circumcenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.circumcenter: 3 vertex id ph\u1EA3i non-empty");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return `${obj.label} = t\xE2m ngo\u1EA1i ti\u1EBFp \u0394${labels}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        return board.create("circumcenter", [a, b, c3], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/incenter.ts
+var incenterConstraint;
+var init_incenter = __esm({
+  "src/core/scene/kinds/point-constraints/incenter.ts"() {
+    init_types3();
+    incenterConstraint = definePointConstraint({
+      kind: "incenter",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.incenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.incenter: 3 vertex id ph\u1EA3i non-empty");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return `${obj.label} = t\xE2m n\u1ED9i ti\u1EBFp \u0394${labels}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        return board.create("incenter", [a, b, c3], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onLine.ts
+var onLineConstraint;
+var init_onLine = __esm({
+  "src/core/scene/kinds/point-constraints/onLine.ts"() {
+    init_types3();
+    onLineConstraint = definePointConstraint({
+      kind: "onLine",
+      describe: (obj, state, c) => `${obj.label} tr\xEAn \u0111\u01B0\u1EDDng ${state?.objects[c.lineId]?.label ?? c.lineId}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const line = ctx.resolveRef(c.lineId);
+        const p1 = line.point1;
+        const p2 = line.point2;
+        const sx = p1 && p2 ? p1.X() + c.t * (p2.X() - p1.X()) : c.t;
+        const sy = p1 && p2 ? p1.Y() + c.t * (p2.Y() - p1.Y()) : c.t;
+        return board.create("glider", [sx, sy, line], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onSegment.ts
+var onSegmentConstraint;
+var init_onSegment = __esm({
+  "src/core/scene/kinds/point-constraints/onSegment.ts"() {
+    init_types3();
+    onSegmentConstraint = definePointConstraint({
+      kind: "onSegment",
+      describe: (obj, state, c) => `${obj.label} tr\xEAn \u0111o\u1EA1n ${state?.objects[c.segmentId]?.label ?? c.segmentId}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const seg = ctx.resolveRef(c.segmentId);
+        const p1 = seg.point1;
+        const p2 = seg.point2;
+        const sx = p1 && p2 ? p1.X() + c.t * (p2.X() - p1.X()) : c.t;
+        const sy = p1 && p2 ? p1.Y() + c.t * (p2.Y() - p1.Y()) : c.t;
+        return board.create("glider", [sx, sy, seg], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onCircle.ts
+var onCircleConstraint;
+var init_onCircle = __esm({
+  "src/core/scene/kinds/point-constraints/onCircle.ts"() {
+    init_types3();
+    onCircleConstraint = definePointConstraint({
+      kind: "onCircle",
+      describe: (obj, state, c) => `${obj.label} tr\xEAn \u0111\u01B0\u1EDDng tr\xF2n ${state?.objects[c.circleId]?.label ?? c.circleId}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const circle = ctx.resolveRef(c.circleId);
+        const O = circle.center ?? circle.midpoint;
+        const ox = O ? O.X() : 0;
+        const oy = O ? O.Y() : 0;
+        return board.create("glider", [ox + Math.cos(c.theta), oy + Math.sin(c.theta), circle], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onPolygon.ts
+var onPolygonConstraint;
+var init_onPolygon = __esm({
+  "src/core/scene/kinds/point-constraints/onPolygon.ts"() {
+    init_types3();
+    onPolygonConstraint = definePointConstraint({
+      kind: "onPolygon",
+      describe: (obj, state, c) => `${obj.label} tr\xEAn \u0111a gi\xE1c ${state?.objects[c.polygonId]?.label ?? c.polygonId}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const poly = ctx.resolveRef(c.polygonId);
+        return board.create("glider", [c.u, c.v, poly], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/centroid.ts
+var centroidConstraint;
+var init_centroid = __esm({
+  "src/core/scene/kinds/point-constraints/centroid.ts"() {
+    init_types3();
+    centroidConstraint = definePointConstraint({
+      kind: "centroid",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.centroid: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.centroid: 3 vertex id ph\u1EA3i non-empty");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return `${obj.label} = tr\u1ECDng t\xE2m \u0394${labels}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        return board.create("point", [
+          () => (a.X() + b.X() + c3.X()) / 3,
+          () => (a.Y() + b.Y() + c3.Y()) / 3
+        ], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/pointConstructions.ts
+function dist(p, q) {
+  return Math.hypot(p[0] - q[0], p[1] - q[1]);
+}
+function sideOf(a, b, p) {
+  return (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
+}
+function arcMidpoint(center, radius, a, b, notContaining) {
+  const mcx = (a[0] + b[0]) / 2;
+  const mcy = (a[1] + b[1]) / 2;
+  let ux = mcx - center[0];
+  let uy = mcy - center[1];
+  let len = Math.hypot(ux, uy);
+  if (len < 1e-9) {
+    ux = -(b[1] - a[1]);
+    uy = b[0] - a[0];
+    len = Math.hypot(ux, uy) || 1;
+  }
+  ux /= len;
+  uy /= len;
+  const cand1 = [center[0] + radius * ux, center[1] + radius * uy];
+  const cand2 = [center[0] - radius * ux, center[1] - radius * uy];
+  const sN = sideOf(a, b, notContaining);
+  if (Math.abs(sN) < 1e-9) {
+    return dist(cand1, notContaining) >= dist(cand2, notContaining) ? cand1 : cand2;
+  }
+  const s1 = sideOf(a, b, cand1);
+  return s1 * sN < 0 ? cand1 : cand2;
+}
+function excenter(vertices, oppositeIndex) {
+  const [A, B, C] = vertices;
+  const a = dist(B, C);
+  const b = dist(C, A);
+  const c = dist(A, B);
+  const w = [a, b, c];
+  w[oppositeIndex] = -w[oppositeIndex];
+  const sum = w[0] + w[1] + w[2];
+  if (Math.abs(sum) < 1e-9) return A;
+  return [
+    (w[0] * A[0] + w[1] * B[0] + w[2] * C[0]) / sum,
+    (w[0] * A[1] + w[1] * B[1] + w[2] * C[1]) / sum
+  ];
+}
+function pointAtDistanceCoord(from, through, d) {
+  const dx = through[0] - from[0];
+  const dy = through[1] - from[1];
+  const len = Math.hypot(dx, dy) || 1;
+  return [through[0] + d * dx / len, through[1] + d * dy / len];
+}
+function radicalAxisFoot(o1, r1, o2, r2) {
+  const dx = o2[0] - o1[0], dy = o2[1] - o1[1];
+  const d2 = dx * dx + dy * dy;
+  if (d2 < 1e-12) return o1;
+  const t = (d2 + r1 * r1 - r2 * r2) / (2 * d2);
+  return [o1[0] + t * dx, o1[1] + t * dy];
+}
+var init_pointConstructions = __esm({
+  "src/core/scene/kinds/pointConstructions.ts"() {
+  }
+});
+
+// src/core/scene/kinds/point-constraints/arcMidpoint.ts
+var arcMidpointConstraint;
+var init_arcMidpoint = __esm({
+  "src/core/scene/kinds/point-constraints/arcMidpoint.ts"() {
+    init_pointConstructions();
+    init_types3();
+    arcMidpointConstraint = definePointConstraint({
+      kind: "arcMidpoint",
+      validate: (c) => {
+        if (!c.circle || !c.a || !c.b || !c.notContaining) {
+          throw new Error("point.arcMidpoint: circle, a, b, notContaining b\u1EAFt bu\u1ED9c");
+        }
+      },
+      describe: (obj, state, c) => {
+        const al = state?.objects[c.a]?.label ?? c.a;
+        const bl = state?.objects[c.b]?.label ?? c.b;
+        const nl = state?.objects[c.notContaining]?.label ?? c.notContaining;
+        return `${obj.label} = trung \u0111i\u1EC3m cung ${al}${bl} (kh\xF4ng ch\u1EE9a ${nl})`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const circle = ctx.resolveRef(c.circle);
+        const A = ctx.resolveRef(c.a);
+        const B = ctx.resolveRef(c.b);
+        const N = ctx.resolveRef(c.notContaining);
+        const O = circle?.center ?? circle?.midpoint ?? circle;
+        const am = () => arcMidpoint(
+          [O.X(), O.Y()],
+          circle.Radius(),
+          [A.X(), A.Y()],
+          [B.X(), B.Y()],
+          [N.X(), N.Y()]
+        );
+        return board.create("point", [() => am()[0], () => am()[1]], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/excenter.ts
+var excenterConstraint;
+var init_excenter = __esm({
+  "src/core/scene/kinds/point-constraints/excenter.ts"() {
+    init_pointConstructions();
+    init_types3();
+    excenterConstraint = definePointConstraint({
+      kind: "excenter",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.excenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.opposite) throw new Error("point.excenter: opposite b\u1EAFt bu\u1ED9c");
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.excenter: 3 vertex id ph\u1EA3i non-empty");
+        }
+        if (!c.vertices.includes(c.opposite)) {
+          throw new Error("point.excenter: opposite ph\u1EA3i l\xE0 m\u1ED9t trong vertices");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        const opp = state?.objects[c.opposite]?.label ?? c.opposite;
+        return `${obj.label} = t\xE2m b\xE0ng ti\u1EBFp \u0394${labels} \u0111\u1ED1i di\u1EC7n ${opp}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        const oppIdx = c.vertices.indexOf(c.opposite);
+        const idx = oppIdx < 0 ? 0 : oppIdx;
+        const ex = () => excenter(
+          [[a.X(), a.Y()], [b.X(), b.Y()], [c3.X(), c3.Y()]],
+          idx
+        );
+        return board.create("point", [() => ex()[0], () => ex()[1]], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/shared.ts
 function buildJxgTransforms(board, ctx, t) {
   switch (t.kind) {
     case "translate":
@@ -1590,11 +2097,392 @@ function buildJxgTransforms(board, ctx, t) {
     }
   }
 }
+function makeDistanceFn(ctx, d) {
+  const scale = d.scale ?? 1;
+  const offset = d.offset ?? 0;
+  if (d.kind === "literal") {
+    const v = d.value;
+    return () => scale * v + offset;
+  }
+  if (d.kind === "segmentLength") {
+    const p = ctx.resolveRef(d.p1);
+    const q = ctx.resolveRef(d.p2);
+    return () => scale * Math.hypot(p.X() - q.X(), p.Y() - q.Y()) + offset;
+  }
+  const circle = ctx.resolveRef(d.circle);
+  return () => scale * circle.Radius() + offset;
+}
+function buildPointOpts(obj) {
+  return {
+    name: obj.label,
+    withLabel: obj.attrs.showLabel ?? true,
+    visible: obj.visible,
+    fixed: obj.locked,
+    strokeColor: obj.attrs.color ?? "#1e40af",
+    fillColor: obj.attrs.color ?? "#1e40af",
+    face: obj.attrs.face ?? "o",
+    size: obj.attrs.size ?? 4
+  };
+}
+var init_shared = __esm({
+  "src/core/scene/kinds/point-constraints/shared.ts"() {
+  }
+});
+
+// src/core/scene/kinds/point-constraints/pointAtDistance.ts
+var pointAtDistanceConstraint;
+var init_pointAtDistance = __esm({
+  "src/core/scene/kinds/point-constraints/pointAtDistance.ts"() {
+    init_pointConstructions();
+    init_types3();
+    init_shared();
+    pointAtDistanceConstraint = definePointConstraint({
+      kind: "pointAtDistance",
+      describe: (obj, state, c) => {
+        const fromL = state?.objects[c.from]?.label ?? c.from;
+        const thrL = state?.objects[c.through]?.label ?? c.through;
+        const d = c.distance;
+        const dLabel = d.kind === "literal" ? `${d.value}` : d.kind === "segmentLength" ? `${state?.objects[d.p1]?.label ?? d.p1}${state?.objects[d.p2]?.label ?? d.p2}` : `b\xE1n k\xEDnh (${state?.objects[d.circle]?.label ?? d.circle})`;
+        return `${obj.label} = tr\xEAn tia ${fromL}${thrL} k\xE9o d\xE0i, c\xE1ch ${thrL} kho\u1EA3ng ${dLabel}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const A = ctx.resolveRef(c.from);
+        const B = ctx.resolveRef(c.through);
+        const dFn = makeDistanceFn(ctx, c.distance);
+        const pc = () => pointAtDistanceCoord([A.X(), A.Y()], [B.X(), B.Y()], dFn());
+        return board.create("point", [() => pc()[0], () => pc()[1]], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/circleIntersection.ts
+var circleIntersectionConstraint;
+var init_circleIntersection = __esm({
+  "src/core/scene/kinds/point-constraints/circleIntersection.ts"() {
+    init_types3();
+    circleIntersectionConstraint = definePointConstraint({
+      kind: "circleIntersection",
+      // Không có describe-arm riêng trong point.ts → giữ fallback `Điểm ${label}`.
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const k1 = ctx.resolveRef(c.c1);
+        const k2 = ctx.resolveRef(c.c2);
+        return board.create("intersection", [k1, k2, c.which], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/circleSecondIntersection.ts
+var circleSecondIntersectionConstraint;
+var init_circleSecondIntersection = __esm({
+  "src/core/scene/kinds/point-constraints/circleSecondIntersection.ts"() {
+    init_types3();
+    circleSecondIntersectionConstraint = definePointConstraint({
+      kind: "circleSecondIntersection",
+      // Không có describe-arm riêng trong point.ts → giữ fallback `Điểm ${label}`.
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const k1 = ctx.resolveRef(c.c1);
+        const k2 = ctx.resolveRef(c.c2);
+        const ex = ctx.resolveRef(c.exclude);
+        return board.create("otherintersection", [k1, k2, ex], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/secondIntersection.ts
+var secondIntersectionConstraint;
+var init_secondIntersection = __esm({
+  "src/core/scene/kinds/point-constraints/secondIntersection.ts"() {
+    init_types3();
+    secondIntersectionConstraint = definePointConstraint({
+      kind: "secondIntersection",
+      // Không có describe-arm riêng trong point.ts → giữ fallback `Điểm ${label}`.
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const line = ctx.resolveRef(c.line);
+        const circle = ctx.resolveRef(c.circle);
+        const other = ctx.resolveRef(c.other);
+        return board.create("otherintersection", [circle, line, other], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/tangencyPoint.ts
+var tangencyPointConstraint;
+var init_tangencyPoint = __esm({
+  "src/core/scene/kinds/point-constraints/tangencyPoint.ts"() {
+    init_types3();
+    tangencyPointConstraint = definePointConstraint({
+      kind: "tangencyPoint",
+      // Không có describe-arm riêng trong point.ts → giữ fallback `Điểm ${label}`.
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const circle = ctx.resolveRef(c.circle);
+        const line = ctx.resolveRef(c.onLine);
+        const O = circle?.center ?? circle?.midpoint ?? circle;
+        return board.create("perpendicularpoint", [line, O], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/transformed.ts
+var transformedConstraint;
+var init_transformed = __esm({
+  "src/core/scene/kinds/point-constraints/transformed.ts"() {
+    init_types3();
+    init_shared();
+    transformedConstraint = definePointConstraint({
+      kind: "transformed",
+      describe: (obj, state, c) => {
+        const t = c.transform;
+        const labelRef = (id) => state?.objects[id]?.label ?? id;
+        const op = t.kind === "translate" ? `t\u1ECBnh ti\u1EBFn (${t.dx.toFixed(2)}, ${t.dy.toFixed(2)})` : t.kind === "rotate" ? `quay ${(t.angleRad * 180 / Math.PI).toFixed(0)}\xB0 quanh ${labelRef(t.center)}` : t.kind === "reflectLine" ? `\u0111\u1ED1i x\u1EE9ng qua ${labelRef(t.line)}` : t.kind === "reflectPoint" ? `\u0111\u1ED1i x\u1EE9ng qua \u0111i\u1EC3m ${labelRef(t.center)}` : t.kind === "dilate" ? `v\u1ECB t\u1EF1 k=${t.k} quanh ${labelRef(t.center)}` : "";
+        return `${obj.label} = \u1EA3nh c\u1EE7a ${labelRef(c.source)} (${op})`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const src = ctx.resolveRef(c.source);
+        const transforms = buildJxgTransforms(board, ctx, c.transform);
+        const parent = transforms.length === 1 ? transforms[0] : transforms;
+        const pt = board.create("point", [src, parent], opts);
+        pt._helpers = transforms;
+        return pt;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/orthocenter.ts
+var orthocenterConstraint;
+var init_orthocenter = __esm({
+  "src/core/scene/kinds/point-constraints/orthocenter.ts"() {
+    init_types3();
+    orthocenterConstraint = definePointConstraint({
+      kind: "orthocenter",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.orthocenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.orthocenter: 3 vertex id ph\u1EA3i non-empty");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return `${obj.label} = tr\u1EF1c t\xE2m \u0394${labels}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const lineBC = board.create("line", [b, c3], hide);
+        const altA = board.create("perpendicular", [lineBC, a], hide);
+        const lineAC = board.create("line", [a, c3], hide);
+        const altB = board.create("perpendicular", [lineAC, b], hide);
+        const ortho = board.create("intersection", [altA, altB, 0], opts);
+        ortho._helpers = [lineBC, altA, lineAC, altB];
+        return ortho;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onPerpendicular.ts
+var onPerpendicularConstraint;
+var init_onPerpendicular = __esm({
+  "src/core/scene/kinds/point-constraints/onPerpendicular.ts"() {
+    init_types3();
+    onPerpendicularConstraint = definePointConstraint({
+      kind: "onPerpendicular",
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const T = ctx.resolveRef(c.through);
+        const A = ctx.resolveRef(c.perpToA);
+        const B = ctx.resolveRef(c.perpToB);
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const refLine = board.create("line", [A, B], hide);
+        const perpLine = board.create("perpendicular", [refLine, T], hide);
+        const dx = B.X() - A.X();
+        const dy = B.Y() - A.Y();
+        const len = Math.hypot(dx, dy) || 1;
+        const ux = -dy / len;
+        const uy = dx / len;
+        const x0 = T.X() + c.t * ux;
+        const y0 = T.Y() + c.t * uy;
+        const gl = board.create("glider", [x0, y0, perpLine], opts);
+        gl._helpers = [refLine, perpLine];
+        return gl;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onPerpBisector.ts
+var onPerpBisectorConstraint;
+var init_onPerpBisector = __esm({
+  "src/core/scene/kinds/point-constraints/onPerpBisector.ts"() {
+    init_types3();
+    onPerpBisectorConstraint = definePointConstraint({
+      kind: "onPerpBisector",
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const A = ctx.resolveRef(c.p1);
+        const B = ctx.resolveRef(c.p2);
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const refLine = board.create("line", [A, B], hide);
+        const mid = board.create("midpoint", [A, B], hide);
+        const bisLine = board.create("perpendicular", [refLine, mid], hide);
+        const Mx = (A.X() + B.X()) / 2;
+        const My = (A.Y() + B.Y()) / 2;
+        const dx = B.X() - A.X();
+        const dy = B.Y() - A.Y();
+        const len = Math.hypot(dx, dy) || 1;
+        const ux = -dy / len;
+        const uy = dx / len;
+        const x0 = Mx + c.t * ux;
+        const y0 = My + c.t * uy;
+        const gl = board.create("glider", [x0, y0, bisLine], opts);
+        gl._helpers = [refLine, mid, bisLine];
+        return gl;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onCircleAroundPoint.ts
+var onCircleAroundPointConstraint;
+var init_onCircleAroundPoint = __esm({
+  "src/core/scene/kinds/point-constraints/onCircleAroundPoint.ts"() {
+    init_types3();
+    onCircleAroundPointConstraint = definePointConstraint({
+      kind: "onCircleAroundPoint",
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const C = ctx.resolveRef(c.center);
+        const R = ctx.resolveRef(c.radiusPoint);
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const auxCircle = board.create("circle", [C, R], hide);
+        const r = Math.hypot(R.X() - C.X(), R.Y() - C.Y());
+        const x0 = C.X() + r * Math.cos(c.theta);
+        const y0 = C.Y() + r * Math.sin(c.theta);
+        const gl = board.create("glider", [x0, y0, auxCircle], opts);
+        gl._helpers = [auxCircle];
+        return gl;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/tangentPointExt.ts
+var tangentPointExtConstraint;
+var init_tangentPointExt = __esm({
+  "src/core/scene/kinds/point-constraints/tangentPointExt.ts"() {
+    init_types3();
+    tangentPointExtConstraint = definePointConstraint({
+      kind: "tangentPointExt",
+      describe: (obj, state, c) => {
+        const fromLabel = state?.objects[c.from]?.label ?? c.from;
+        const circleLabel = state?.objects[c.circle]?.label ?? c.circle;
+        return `${obj.label} = ti\u1EBFp \u0111i\u1EC3m c\u1EE7a (${circleLabel}) v\u1EDBi ti\u1EBFp tuy\u1EBFn t\u1EEB ${fromLabel}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const P = ctx.resolveRef(c.from);
+        const K = ctx.resolveRef(c.circle);
+        const O = K.center ?? K.midpoint;
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const mid = board.create("midpoint", [P, O], hide);
+        const thales = board.create("circle", [mid, P], hide);
+        const inter = board.create("intersection", [thales, K, c.which], opts);
+        inter._helpers = [mid, thales];
+        return inter;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/registry.ts
+var ALL, POINT_CONSTRAINTS;
+var init_registry2 = __esm({
+  "src/core/scene/kinds/point-constraints/registry.ts"() {
+    init_free();
+    init_onAxis();
+    init_midpoint();
+    init_perpFoot();
+    init_circumcenter();
+    init_incenter();
+    init_onLine();
+    init_onSegment();
+    init_onCircle();
+    init_onPolygon();
+    init_centroid();
+    init_arcMidpoint();
+    init_excenter();
+    init_pointAtDistance();
+    init_circleIntersection();
+    init_circleSecondIntersection();
+    init_secondIntersection();
+    init_tangencyPoint();
+    init_transformed();
+    init_orthocenter();
+    init_onPerpendicular();
+    init_onPerpBisector();
+    init_onCircleAroundPoint();
+    init_tangentPointExt();
+    ALL = [
+      freeConstraint,
+      onAxisConstraint,
+      midpointConstraint,
+      perpFootConstraint,
+      circumcenterConstraint,
+      incenterConstraint,
+      onLineConstraint,
+      onSegmentConstraint,
+      onCircleConstraint,
+      onPolygonConstraint,
+      centroidConstraint,
+      arcMidpointConstraint,
+      excenterConstraint,
+      pointAtDistanceConstraint,
+      circleIntersectionConstraint,
+      circleSecondIntersectionConstraint,
+      secondIntersectionConstraint,
+      tangencyPointConstraint,
+      transformedConstraint,
+      orthocenterConstraint,
+      onPerpendicularConstraint,
+      onPerpBisectorConstraint,
+      onCircleAroundPointConstraint,
+      tangentPointExtConstraint
+    ];
+    POINT_CONSTRAINTS = new Map(ALL.map((m) => [m.kind, m]));
+  }
+});
+
+// src/core/scene/kinds/point.ts
 var def3;
 var init_point = __esm({
   "src/core/scene/kinds/point.ts"() {
     init_registry();
     init_d_constraint2();
+    init_registry2();
+    init_shared();
     def3 = {
       type: "point",
       schemaVersion: 1,
@@ -1604,43 +2492,7 @@ var init_point = __esm({
           throw new Error("point: constraint required");
         }
         const c = a.constraint;
-        if (c.kind === "perpFoot") {
-          if (!c.from || !c.onLine) {
-            throw new Error("point.perpFoot: from v\xE0 onLine b\u1EAFt bu\u1ED9c");
-          }
-        }
-        if (c.kind === "circumcenter") {
-          if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
-            throw new Error("point.circumcenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
-          }
-          if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
-            throw new Error("point.circumcenter: 3 vertex id ph\u1EA3i non-empty");
-          }
-        }
-        if (c.kind === "incenter") {
-          if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
-            throw new Error("point.incenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
-          }
-          if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
-            throw new Error("point.incenter: 3 vertex id ph\u1EA3i non-empty");
-          }
-        }
-        if (c.kind === "centroid") {
-          if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
-            throw new Error("point.centroid: vertices ph\u1EA3i l\xE0 tuple 3 id");
-          }
-          if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
-            throw new Error("point.centroid: 3 vertex id ph\u1EA3i non-empty");
-          }
-        }
-        if (c.kind === "orthocenter") {
-          if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
-            throw new Error("point.orthocenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
-          }
-          if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
-            throw new Error("point.orthocenter: 3 vertex id ph\u1EA3i non-empty");
-          }
-        }
+        POINT_CONSTRAINTS.get(c.kind)?.validate?.(c);
       },
       dependsOn: (a) => constraintRefs2D(a.constraint),
       measure: (obj) => {
@@ -1655,132 +2507,16 @@ var init_point = __esm({
       },
       describe: (obj, state) => {
         const c = obj.attrs.constraint;
-        if (c.kind === "free") return `\u0110i\u1EC3m ${obj.label}`;
-        if (c.kind === "onAxis") return `${obj.label} tr\xEAn tr\u1EE5c ${c.axis}`;
-        if (c.kind === "onLine") return `${obj.label} tr\xEAn \u0111\u01B0\u1EDDng ${state?.objects[c.lineId]?.label ?? c.lineId}`;
-        if (c.kind === "onSegment") return `${obj.label} tr\xEAn \u0111o\u1EA1n ${state?.objects[c.segmentId]?.label ?? c.segmentId}`;
-        if (c.kind === "onCircle") return `${obj.label} tr\xEAn \u0111\u01B0\u1EDDng tr\xF2n ${state?.objects[c.circleId]?.label ?? c.circleId}`;
-        if (c.kind === "onPolygon") return `${obj.label} tr\xEAn \u0111a gi\xE1c ${state?.objects[c.polygonId]?.label ?? c.polygonId}`;
-        if (c.kind === "midpoint") {
-          const l1 = state?.objects[c.p1]?.label ?? c.p1;
-          const l2 = state?.objects[c.p2]?.label ?? c.p2;
-          return `${obj.label} = trung \u0111i\u1EC3m ${l1}${l2}`;
-        }
-        if (c.kind === "transformed") {
-          const t = c.transform;
-          const labelRef = (id) => state?.objects[id]?.label ?? id;
-          const op = t.kind === "translate" ? `t\u1ECBnh ti\u1EBFn (${t.dx.toFixed(2)}, ${t.dy.toFixed(2)})` : t.kind === "rotate" ? `quay ${(t.angleRad * 180 / Math.PI).toFixed(0)}\xB0 quanh ${labelRef(t.center)}` : t.kind === "reflectLine" ? `\u0111\u1ED1i x\u1EE9ng qua ${labelRef(t.line)}` : t.kind === "reflectPoint" ? `\u0111\u1ED1i x\u1EE9ng qua \u0111i\u1EC3m ${labelRef(t.center)}` : t.kind === "dilate" ? `v\u1ECB t\u1EF1 k=${t.k} quanh ${labelRef(t.center)}` : "";
-          return `${obj.label} = \u1EA3nh c\u1EE7a ${labelRef(c.source)} (${op})`;
-        }
-        if (c.kind === "perpFoot") {
-          const fromLabel = state?.objects[c.from]?.label ?? c.from;
-          const lineLabel = state?.objects[c.onLine]?.label ?? c.onLine;
-          return `${obj.label} = ch\xE2n \u27C2 t\u1EEB ${fromLabel} xu\u1ED1ng ${lineLabel}`;
-        }
-        if (c.kind === "circumcenter") {
-          const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
-          return `${obj.label} = t\xE2m ngo\u1EA1i ti\u1EBFp \u0394${labels}`;
-        }
-        if (c.kind === "incenter") {
-          const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
-          return `${obj.label} = t\xE2m n\u1ED9i ti\u1EBFp \u0394${labels}`;
-        }
-        if (c.kind === "centroid") {
-          const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
-          return `${obj.label} = tr\u1ECDng t\xE2m \u0394${labels}`;
-        }
-        if (c.kind === "orthocenter") {
-          const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
-          return `${obj.label} = tr\u1EF1c t\xE2m \u0394${labels}`;
-        }
+        const mod = POINT_CONSTRAINTS.get(c.kind);
+        if (mod) return mod.describe(obj, state, c);
         return `\u0110i\u1EC3m ${obj.label}`;
       },
       render: (obj, ctx) => {
         const board = ctx.jxg;
         const c = obj.attrs.constraint;
-        const opts = {
-          name: obj.label,
-          withLabel: obj.attrs.showLabel ?? true,
-          visible: obj.visible,
-          fixed: obj.locked,
-          strokeColor: obj.attrs.color ?? "#1e40af",
-          fillColor: obj.attrs.color ?? "#1e40af",
-          face: obj.attrs.face ?? "o",
-          size: obj.attrs.size ?? 4
-        };
-        if (c.kind === "free") return board.create("point", [c.x, c.y], opts);
-        if (c.kind === "onAxis") {
-          const coords = c.axis === "x" ? [c.t, 0] : [0, c.t];
-          return board.create("point", coords, opts);
-        }
-        if (c.kind === "onLine") {
-          const line = ctx.resolveRef(c.lineId);
-          return board.create("glider", [c.t, c.t, line], opts);
-        }
-        if (c.kind === "onSegment") {
-          const seg = ctx.resolveRef(c.segmentId);
-          return board.create("glider", [c.t, c.t, seg], opts);
-        }
-        if (c.kind === "onCircle") {
-          const circle = ctx.resolveRef(c.circleId);
-          return board.create("glider", [Math.cos(c.theta), Math.sin(c.theta), circle], opts);
-        }
-        if (c.kind === "onPolygon") {
-          const poly = ctx.resolveRef(c.polygonId);
-          return board.create("glider", [c.u, c.v, poly], opts);
-        }
-        if (c.kind === "midpoint") {
-          const p1 = ctx.resolveRef(c.p1);
-          const p2 = ctx.resolveRef(c.p2);
-          return board.create("midpoint", [p1, p2], opts);
-        }
-        if (c.kind === "transformed") {
-          const src = ctx.resolveRef(c.source);
-          const transforms = buildJxgTransforms(board, ctx, c.transform);
-          const parent = transforms.length === 1 ? transforms[0] : transforms;
-          const pt = board.create("point", [src, parent], opts);
-          pt._helpers = transforms;
-          return pt;
-        }
-        if (c.kind === "perpFoot") {
-          const from = ctx.resolveRef(c.from);
-          const onLine = ctx.resolveRef(c.onLine);
-          return board.create("perpendicularpoint", [onLine, from], opts);
-        }
-        if (c.kind === "circumcenter") {
-          const a = ctx.resolveRef(c.vertices[0]);
-          const b = ctx.resolveRef(c.vertices[1]);
-          const c3 = ctx.resolveRef(c.vertices[2]);
-          return board.create("circumcenter", [a, b, c3], opts);
-        }
-        if (c.kind === "incenter") {
-          const a = ctx.resolveRef(c.vertices[0]);
-          const b = ctx.resolveRef(c.vertices[1]);
-          const c3 = ctx.resolveRef(c.vertices[2]);
-          return board.create("incenter", [a, b, c3], opts);
-        }
-        if (c.kind === "centroid") {
-          const a = ctx.resolveRef(c.vertices[0]);
-          const b = ctx.resolveRef(c.vertices[1]);
-          const c3 = ctx.resolveRef(c.vertices[2]);
-          return board.create("point", [
-            () => (a.X() + b.X() + c3.X()) / 3,
-            () => (a.Y() + b.Y() + c3.Y()) / 3
-          ], opts);
-        }
-        if (c.kind === "orthocenter") {
-          const a = ctx.resolveRef(c.vertices[0]);
-          const b = ctx.resolveRef(c.vertices[1]);
-          const c3 = ctx.resolveRef(c.vertices[2]);
-          const hide = { visible: false, withLabel: false, fixed: true, name: "" };
-          const lineBC = board.create("line", [b, c3], hide);
-          const altA = board.create("perpendicular", [lineBC, a], hide);
-          const lineAC = board.create("line", [a, c3], hide);
-          const altB = board.create("perpendicular", [lineAC, b], hide);
-          const ortho = board.create("intersection", [altA, altB, 0], opts);
-          ortho._helpers = [lineBC, altA, lineAC, altB];
-          return ortho;
-        }
+        const opts = buildPointOpts(obj);
+        const mod = POINT_CONSTRAINTS.get(c.kind);
+        if (mod) return mod.render(obj, ctx, c, opts);
         return board.create("point", [0, 0], opts);
       },
       /**
@@ -1889,6 +2625,10 @@ function constructionRefs(c) {
       return [c.p1, c.vertex, c.p2];
     case "angleBisectorLines":
       return [stripBorderSuffix(c.line1), stripBorderSuffix(c.line2)];
+    case "lineThrough":
+      return [...c.points];
+    case "radicalAxis":
+      return [c.circle1, c.circle2];
     case "tangent":
       return [c.throughPoint, c.toCircle];
   }
@@ -1898,6 +2638,7 @@ var init_line = __esm({
   "src/core/scene/kinds/line.ts"() {
     init_registry();
     init_labelOf();
+    init_pointConstructions();
     def5 = {
       type: "line",
       schemaVersion: 1,
@@ -1922,6 +2663,10 @@ var init_line = __esm({
             return `${obj.label}: ph\xE2n gi\xE1c g\xF3c ${L(c.p1)}${L(c.vertex)}${L(c.p2)}`;
           case "angleBisectorLines":
             return `${obj.label}: ph\xE2n gi\xE1c ${L(c.line1)} & ${L(c.line2)} (${c.branch === 0 ? "1" : "2"})`;
+          case "lineThrough":
+            return `${obj.label}: \u0111\u01B0\u1EDDng qua ${c.points.map(L).join("")}`;
+          case "radicalAxis":
+            return `${obj.label}: tr\u1EE5c \u0111\u1EB3ng ph\u01B0\u01A1ng ${L(c.circle1)} & ${L(c.circle2)}`;
           case "tangent":
             return `${obj.label}: ti\u1EBFp tuy\u1EBFn ${L(c.toCircle)} qua ${L(c.throughPoint)}`;
         }
@@ -2002,6 +2747,47 @@ var init_line = __esm({
             selected._helpers = [other];
             return selected;
           }
+          case "lineThrough": {
+            const pts = c.points.map((id) => ctx.resolveRef(id));
+            let bi = 0, bj = 1, best = -1;
+            for (let i = 0; i < pts.length; i++) {
+              for (let j = i + 1; j < pts.length; j++) {
+                const dx = pts[i].X() - pts[j].X();
+                const dy = pts[i].Y() - pts[j].Y();
+                const d = dx * dx + dy * dy;
+                if (d > best) {
+                  best = d;
+                  bi = i;
+                  bj = j;
+                }
+              }
+            }
+            return board.create("line", [pts[bi], pts[bj]], {
+              ...baseOpts,
+              straightFirst: true,
+              straightLast: true
+            });
+          }
+          case "radicalAxis": {
+            const k1 = ctx.resolveRef(c.circle1);
+            const k2 = ctx.resolveRef(c.circle2);
+            const o1 = () => [k1.center.X(), k1.center.Y()];
+            const o2 = () => [k2.center.X(), k2.center.Y()];
+            const foot = () => radicalAxisFoot(o1(), k1.Radius(), o2(), k2.Radius());
+            const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+            const f1 = board.create("point", [() => foot()[0], () => foot()[1]], hide);
+            const f2 = board.create("point", [
+              () => foot()[0] - (o2()[1] - o1()[1]),
+              () => foot()[1] + (o2()[0] - o1()[0])
+            ], hide);
+            const line = board.create("line", [f1, f2], {
+              ...baseOpts,
+              straightFirst: true,
+              straightLast: true
+            });
+            line._helpers = [f1, f2];
+            return line;
+          }
           case "tangent": {
             const through = ctx.resolveRef(c.throughPoint);
             const toCircle = ctx.resolveRef(c.toCircle);
@@ -2120,10 +2906,29 @@ var init_vector = __esm({
 });
 
 // src/core/scene/kinds/circle.ts
+function asConstruction(a) {
+  if (a.construction) return a.construction;
+  const raw = a;
+  if (raw.kind === "incircle" && raw.vertices) {
+    return {
+      kind: "incircle",
+      p1: raw.vertices[0],
+      p2: raw.vertices[1],
+      p3: raw.vertices[2]
+    };
+  }
+  return void 0;
+}
 function constructionRefs2(c) {
   switch (c.kind) {
     case "circumscribed":
       return [c.p1, c.p2, c.p3];
+    case "incircle":
+      return [c.p1, c.p2, c.p3];
+    case "excircle":
+      return [c.p1, c.p2, c.p3];
+    case "diameter":
+      return [c.p1, c.p2];
   }
 }
 var def8;
@@ -2131,19 +2936,33 @@ var init_circle = __esm({
   "src/core/scene/kinds/circle.ts"() {
     init_registry();
     init_labelOf();
+    init_pointConstructions();
     def8 = {
       type: "circle",
       schemaVersion: 1,
       migrate: {},
       validate: (a) => {
-        if (a?.construction) return;
+        if (asConstruction(a)) return;
+        if (typeof a?.radius === "number") {
+          if (!a.center) throw new Error("circle: center b\u1EAFt bu\u1ED9c khi d\xF9ng radius");
+          if (!(a.radius > 0)) throw new Error("circle: radius ph\u1EA3i > 0");
+          return;
+        }
         if (!a?.center || !a?.surfacePoint) {
-          throw new Error("circle: center v\xE0 surfacePoint b\u1EAFt bu\u1ED9c (ho\u1EB7c construction)");
+          throw new Error("circle: center v\xE0 surfacePoint b\u1EAFt bu\u1ED9c (ho\u1EB7c construction / radius)");
         }
       },
-      dependsOn: (a) => a.construction ? constructionRefs2(a.construction) : [a.center, a.surfacePoint],
+      dependsOn: (a) => {
+        const c = asConstruction(a);
+        if (c) return constructionRefs2(c);
+        if (typeof a.radius === "number") return [a.center];
+        return [a.center, a.surfacePoint];
+      },
       measure: (obj, state) => {
-        if (obj.attrs.construction) return null;
+        if (asConstruction(obj.attrs)) return null;
+        if (typeof obj.attrs.radius === "number") {
+          return [{ label: "r", value: obj.attrs.radius }];
+        }
         const center = obj.attrs.center ? state.objects[obj.attrs.center] : void 0;
         const surface = obj.attrs.surfacePoint ? state.objects[obj.attrs.surfacePoint] : void 0;
         if (!center || !surface) return null;
@@ -2156,10 +2975,22 @@ var init_circle = __esm({
       },
       describe: (obj, state) => {
         const L = (id) => labelOf(id, state);
-        const c = obj.attrs.construction;
+        const c = asConstruction(obj.attrs);
         if (c?.kind === "circumscribed") {
           return `\u0110\u01B0\u1EDDng tr\xF2n \u0111i qua ${L(c.p1)}${L(c.p2)}${L(c.p3)}`;
         }
+        if (c?.kind === "incircle") {
+          return `\u0110\u01B0\u1EDDng tr\xF2n n\u1ED9i ti\u1EBFp \u0394${L(c.p1)}${L(c.p2)}${L(c.p3)}`;
+        }
+        if (c?.kind === "excircle") {
+          return `\u0110\u01B0\u1EDDng tr\xF2n b\xE0ng ti\u1EBFp \u0394${L(c.p1)}${L(c.p2)}${L(c.p3)} \u0111\u1ED1i di\u1EC7n ${L(c.opposite)}`;
+        }
+        if (c?.kind === "diameter") {
+          return `\u0110\u01B0\u1EDDng tr\xF2n \u0111\u01B0\u1EDDng k\xEDnh ${L(c.p1)}${L(c.p2)}`;
+        }
+        if (typeof obj.attrs.radius === "number") {
+          return `\u0110\u01B0\u1EDDng tr\xF2n t\xE2m ${L(obj.attrs.center)} b\xE1n k\xEDnh ${obj.attrs.radius}`;
+        }
         return `\u0110\u01B0\u1EDDng tr\xF2n t\xE2m ${L(obj.attrs.center)} b\xE1n k\xEDnh ${L(obj.attrs.center)}${L(obj.attrs.surfacePoint)}`;
       },
       render: (obj, ctx) => {
@@ -2174,13 +3005,66 @@ var init_circle = __esm({
           visible: obj.visible,
           fixed: obj.locked
         };
-        const c = obj.attrs.construction;
+        const c = asConstruction(obj.attrs);
         if (c?.kind === "circumscribed") {
           const p1 = ctx.resolveRef(c.p1);
           const p2 = ctx.resolveRef(c.p2);
           const p3 = ctx.resolveRef(c.p3);
           return board.create("circumcircle", [p1, p2, p3], baseOpts);
         }
+        if (c?.kind === "incircle") {
+          const p1 = ctx.resolveRef(c.p1);
+          const p2 = ctx.resolveRef(c.p2);
+          const p3 = ctx.resolveRef(c.p3);
+          const center2 = board.create("incenter", [p1, p2, p3], {
+            visible: obj.visible,
+            withLabel: true,
+            fixed: true,
+            name: obj.label
+          });
+          const circ = board.create("incircle", [p1, p2, p3], baseOpts);
+          circ.center = circ.center ?? center2;
+          circ._helpers = [center2];
+          return circ;
+        }
+        if (c?.kind === "excircle") {
+          const P = [ctx.resolveRef(c.p1), ctx.resolveRef(c.p2), ctx.resolveRef(c.p3)];
+          const ids = [c.p1, c.p2, c.p3];
+          const oppIdx = Math.max(0, ids.indexOf(c.opposite));
+          const verts = () => [
+            [P[0].X(), P[0].Y()],
+            [P[1].X(), P[1].Y()],
+            [P[2].X(), P[2].Y()]
+          ];
+          const ctr = () => excenter(verts(), oppIdx);
+          const radius = () => {
+            const I = ctr();
+            const others = [0, 1, 2].filter((i) => i !== oppIdx);
+            const v = verts();
+            const a = v[others[0]];
+            const b = v[others[1]];
+            const dx = b[0] - a[0];
+            const dy = b[1] - a[1];
+            const len = Math.hypot(dx, dy) || 1;
+            return Math.abs((I[0] - a[0]) * dy - (I[1] - a[1]) * dx) / len;
+          };
+          const center2 = board.create("point", [() => ctr()[0], () => ctr()[1]], { visible: false, withLabel: false, fixed: true, name: "" });
+          const circ = board.create("circle", [center2, () => radius()], baseOpts);
+          circ._helpers = [center2];
+          return circ;
+        }
+        if (c?.kind === "diameter") {
+          const p1 = ctx.resolveRef(c.p1);
+          const p2 = ctx.resolveRef(c.p2);
+          const center2 = board.create("midpoint", [p1, p2], { visible: false, withLabel: false, fixed: true, name: "" });
+          const circ = board.create("circle", [center2, p2], baseOpts);
+          circ._helpers = [center2];
+          return circ;
+        }
+        if (typeof obj.attrs.radius === "number") {
+          const center2 = ctx.resolveRef(obj.attrs.center);
+          return board.create("circle", [center2, obj.attrs.radius], baseOpts);
+        }
         const center = ctx.resolveRef(obj.attrs.center);
         const surface = ctx.resolveRef(obj.attrs.surfacePoint);
         return board.create("circle", [center, surface], baseOpts);
@@ -2340,6 +3224,26 @@ function regularVertexLabels(p1Label, p2Label, n) {
   }
   return `${p1Label}${p2Label}\u2026`;
 }
+function specialShapeName(kind) {
+  switch (kind) {
+    case "square":
+      return "H\xECnh vu\xF4ng";
+    case "rectangle":
+      return "H\xECnh ch\u1EEF nh\u1EADt";
+    case "rhombus":
+      return "H\xECnh thoi";
+    case "parallelogram":
+      return "H\xECnh b\xECnh h\xE0nh";
+    case "isoTrapezoid":
+      return "H\xECnh thang c\xE2n";
+    case "isoTriangle":
+      return "Tam gi\xE1c c\xE2n";
+    case "rightTriangle":
+      return "Tam gi\xE1c vu\xF4ng";
+    case "regular":
+      return "";
+  }
+}
 var def11;
 var init_polygon = __esm({
   "src/core/scene/kinds/polygon.ts"() {
@@ -2351,13 +3255,27 @@ var init_polygon = __esm({
       migrate: {},
       validate: (a) => {
         if (a?.construction) {
-          if (a.construction.kind === "regular") {
-            if (!a.construction.p1 || !a.construction.p2) {
-              throw new Error("polygon (regular): p1 v\xE0 p2 b\u1EAFt bu\u1ED9c");
-            }
-            if (!Number.isFinite(a.construction.n) || a.construction.n < 3) {
-              throw new Error("polygon (regular): n \u2265 3");
-            }
+          const c = a.construction;
+          if (c.kind === "regular") {
+            if (!c.p1 || !c.p2) throw new Error("polygon (regular): p1 v\xE0 p2 b\u1EAFt bu\u1ED9c");
+            if (!Number.isFinite(c.n) || c.n < 3) throw new Error("polygon (regular): n \u2265 3");
+            return;
+          }
+          if (c.kind === "square") {
+            if (!c.p1 || !c.p2) throw new Error("polygon (square): p1 v\xE0 p2 b\u1EAFt bu\u1ED9c");
+            return;
+          }
+          if (c.kind === "rectangle" || c.kind === "rhombus" || c.kind === "parallelogram" || c.kind === "isoTrapezoid") {
+            if (!c.p1 || !c.p2 || !c.p3) throw new Error(`polygon (${c.kind}): p1, p2, p3 b\u1EAFt bu\u1ED9c`);
+            return;
+          }
+          if (c.kind === "isoTriangle") {
+            if (!c.base1 || !c.base2 || !c.apex) throw new Error("polygon (isoTriangle): base1, base2, apex b\u1EAFt bu\u1ED9c");
+            return;
+          }
+          if (c.kind === "rightTriangle") {
+            if (!c.rightAngle || !c.leg1End || !c.leg2End) throw new Error("polygon (rightTriangle): rightAngle, leg1End, leg2End b\u1EAFt bu\u1ED9c");
+            return;
           }
           return;
         }
@@ -2366,14 +3284,51 @@ var init_polygon = __esm({
         }
       },
       dependsOn: (a) => {
-        if (a.construction?.kind === "regular") return [a.construction.p1, a.construction.p2];
-        return [...a.vertices ?? []];
+        const c = a.construction;
+        if (!c) return [...a.vertices ?? []];
+        switch (c.kind) {
+          case "regular":
+            return [c.p1, c.p2];
+          case "square":
+            return [c.p1, c.p2];
+          case "rectangle":
+          case "rhombus":
+          case "parallelogram":
+          case "isoTrapezoid":
+            return [c.p1, c.p2, c.p3];
+          case "isoTriangle":
+            return [c.base1, c.base2, c.apex];
+          case "rightTriangle":
+            return [c.rightAngle, c.leg1End, c.leg2End];
+        }
       },
       describe: (obj, state) => {
-        if (obj.attrs.construction?.kind === "regular") {
-          const c = obj.attrs.construction;
-          const labels = regularVertexLabels(labelOf(c.p1, state), labelOf(c.p2, state), c.n);
-          return `${regularPolygonName(c.n)} ${labels}`;
+        const c = obj.attrs.construction;
+        if (c) {
+          if (c.kind === "regular") {
+            const labels2 = regularVertexLabels(labelOf(c.p1, state), labelOf(c.p2, state), c.n);
+            return `${regularPolygonName(c.n)} ${labels2}`;
+          }
+          const name = specialShapeName(c.kind);
+          let labels = [];
+          switch (c.kind) {
+            case "square":
+              labels = [labelOf(c.p1, state), labelOf(c.p2, state)];
+              break;
+            case "rectangle":
+            case "rhombus":
+            case "parallelogram":
+            case "isoTrapezoid":
+              labels = [labelOf(c.p1, state), labelOf(c.p2, state), labelOf(c.p3, state)];
+              break;
+            case "isoTriangle":
+              labels = [labelOf(c.apex, state), labelOf(c.base1, state), labelOf(c.base2, state)];
+              break;
+            case "rightTriangle":
+              labels = [labelOf(c.rightAngle, state), labelOf(c.leg1End, state), labelOf(c.leg2End, state)];
+              break;
+          }
+          return `${name} ${labels.join("")}`;
         }
         return `\u0110a gi\xE1c ${(obj.attrs.vertices ?? []).map((id) => labelOf(id, state)).join("")}`;
       },
@@ -2381,22 +3336,85 @@ var init_polygon = __esm({
         const board = ctx.jxg;
         const label = obj.label;
         const showValue = obj.attrs.showValue ?? false;
-        if (obj.attrs.construction?.kind === "regular") {
-          const c = obj.attrs.construction;
-          const p1 = ctx.resolveRef(c.p1);
-          const p2 = ctx.resolveRef(c.p2);
-          return board.create("regularpolygon", [p1, p2, c.n], {
-            name: label,
-            withLabel: obj.attrs.showLabel ?? false,
-            borders: {
-              strokeColor: obj.attrs.color ?? "#0f172a",
-              strokeWidth: obj.attrs.width ?? 2
-            },
-            fillColor: obj.attrs.color ?? "#60a5fa",
-            fillOpacity: obj.attrs.fillOpacity ?? 0.15,
-            visible: obj.visible,
-            fixed: obj.locked
+        const cons = obj.attrs.construction;
+        const commonAttrs = {
+          name: label,
+          withLabel: obj.attrs.showLabel ?? false,
+          borders: {
+            strokeColor: obj.attrs.color ?? "#0f172a",
+            strokeWidth: obj.attrs.width ?? 2
+          },
+          fillColor: obj.attrs.color ?? "#60a5fa",
+          fillOpacity: obj.attrs.fillOpacity ?? 0.15,
+          visible: obj.visible,
+          fixed: obj.locked
+        };
+        if (cons?.kind === "regular") {
+          const p1 = ctx.resolveRef(cons.p1);
+          const p2 = ctx.resolveRef(cons.p2);
+          return board.create("regularpolygon", [p1, p2, cons.n], commonAttrs);
+        }
+        if (cons?.kind === "square") {
+          const p1 = ctx.resolveRef(cons.p1);
+          const p2 = ctx.resolveRef(cons.p2);
+          return board.create("regularpolygon", [p1, p2, 4], commonAttrs);
+        }
+        if (cons?.kind === "rectangle" || cons?.kind === "rhombus" || cons?.kind === "parallelogram") {
+          const A = ctx.resolveRef(cons.p1);
+          const B = ctx.resolveRef(cons.p2);
+          const C = ctx.resolveRef(cons.p3);
+          const D = board.create(
+            "point",
+            [() => A.X() + C.X() - B.X(), () => A.Y() + C.Y() - B.Y()],
+            { visible: false, withLabel: false, fixed: true, name: "" }
+          );
+          const poly2 = board.create("polygon", [A, B, C, D], commonAttrs);
+          poly2._helpers = [D];
+          return poly2;
+        }
+        if (cons?.kind === "isoTrapezoid") {
+          const A = ctx.resolveRef(cons.p1);
+          const B = ctx.resolveRef(cons.p2);
+          const C = ctx.resolveRef(cons.p3);
+          const Dx = () => {
+            const Mx = (A.X() + B.X()) / 2;
+            const My = (A.Y() + B.Y()) / 2;
+            const ux = B.X() - A.X();
+            const uy = B.Y() - A.Y();
+            const len2 = ux * ux + uy * uy || 1;
+            const proj = ((C.X() - Mx) * ux + (C.Y() - My) * uy) / len2;
+            return C.X() - 2 * proj * ux;
+          };
+          const Dy = () => {
+            const Mx = (A.X() + B.X()) / 2;
+            const My = (A.Y() + B.Y()) / 2;
+            const ux = B.X() - A.X();
+            const uy = B.Y() - A.Y();
+            const len2 = ux * ux + uy * uy || 1;
+            const proj = ((C.X() - Mx) * ux + (C.Y() - My) * uy) / len2;
+            return C.Y() - 2 * proj * uy;
+          };
+          const D = board.create("point", [Dx, Dy], {
+            visible: false,
+            withLabel: false,
+            fixed: true,
+            name: ""
           });
+          const poly2 = board.create("polygon", [A, B, C, D], commonAttrs);
+          poly2._helpers = [D];
+          return poly2;
+        }
+        if (cons?.kind === "isoTriangle") {
+          const Apex = ctx.resolveRef(cons.apex);
+          const B1 = ctx.resolveRef(cons.base1);
+          const B2 = ctx.resolveRef(cons.base2);
+          return board.create("polygon", [Apex, B1, B2], commonAttrs);
+        }
+        if (cons?.kind === "rightTriangle") {
+          const R = ctx.resolveRef(cons.rightAngle);
+          const P = ctx.resolveRef(cons.leg1End);
+          const Q = ctx.resolveRef(cons.leg2End);
+          return board.create("polygon", [R, P, Q], commonAttrs);
         }
         const verts = (obj.attrs.vertices ?? []).map((id) => ctx.resolveRef(id));
         const poly = board.create("polygon", verts, {
@@ -3324,21 +4342,21 @@ var init_handlers = __esm({
   }
 });
 function useToolStateMachine(initial) {
-  const [tool, setToolState] = React.useState(initial);
-  const [pendingIds, setPendingIds] = React.useState([]);
-  const toolRef = React.useRef(initial);
-  const pendingIdsRef = React.useRef([]);
-  const setTool = React.useCallback((t) => {
+  const [tool, setToolState] = React5.useState(initial);
+  const [pendingIds, setPendingIds] = React5.useState([]);
+  const toolRef = React5.useRef(initial);
+  const pendingIdsRef = React5.useRef([]);
+  const setTool = React5.useCallback((t) => {
     toolRef.current = t;
     pendingIdsRef.current = [];
     setToolState(t);
     setPendingIds([]);
   }, []);
-  const pushPending = React.useCallback((id) => {
+  const pushPending = React5.useCallback((id) => {
     pendingIdsRef.current = [...pendingIdsRef.current, id];
     setPendingIds(pendingIdsRef.current);
   }, []);
-  const clearPending = React.useCallback(() => {
+  const clearPending = React5.useCallback(() => {
     pendingIdsRef.current = [];
     setPendingIds([]);
   }, []);
@@ -3507,24 +4525,24 @@ var init_MiniBoard = __esm({
     init_safeJsx();
     init_attachJxgWheelZoom();
     init_initJxgBoard();
-    MiniBoard = React__namespace.default.forwardRef(
+    MiniBoard = React5__namespace.default.forwardRef(
       function MiniBoard2({ store, selectedTool, showAxis, showGrid, isDark, onReady, onSelectionChange: _onSelectionChange }, ref) {
-        const isDarkRef = React.useRef(!!isDark);
+        const isDarkRef = React5.useRef(!!isDark);
         isDarkRef.current = !!isDark;
-        const containerId = React.useId().replace(/:/g, "_") + "_graph_jxg";
-        const containerRef = React.useRef(null);
-        const boardRef = React.useRef(null);
-        const jxgRef = React.useRef(null);
-        const rendererRef = React.useRef(null);
+        const containerId = React5.useId().replace(/:/g, "_") + "_graph_jxg";
+        const containerRef = React5.useRef(null);
+        const boardRef = React5.useRef(null);
+        const jxgRef = React5.useRef(null);
+        const rendererRef = React5.useRef(null);
         const toolSM = useToolStateMachine(selectedTool);
-        const showAxisRef = React.useRef(showAxis);
+        const showAxisRef = React5.useRef(showAxis);
         showAxisRef.current = showAxis;
-        const showGridRef = React.useRef(showGrid);
+        const showGridRef = React5.useRef(showGrid);
         showGridRef.current = showGrid;
-        React.useEffect(() => {
+        React5.useEffect(() => {
           if (toolSM.toolRef.current !== selectedTool) toolSM.setTool(selectedTool);
         }, [selectedTool]);
-        React.useEffect(() => {
+        React5.useEffect(() => {
           if (typeof window === "undefined" || !containerRef.current) return;
           let cancelled = false;
           let wheelCleanup = null;
@@ -3610,7 +4628,7 @@ var init_MiniBoard = __esm({
             boardRef.current = null;
           };
         }, [containerId]);
-        React.useImperativeHandle(
+        React5.useImperativeHandle(
           ref,
           () => ({
             getState: () => store.getState(),
@@ -3656,27 +4674,27 @@ function reducer(state, action) {
   }
 }
 function ToastProvider({ children, maxVisible = 3 }) {
-  const [items, dispatch] = React.useReducer(reducer, []);
-  const timersRef = React.useRef(/* @__PURE__ */ new Map());
-  const itemsRef = React.useRef(items);
+  const [items, dispatch] = React5.useReducer(reducer, []);
+  const timersRef = React5.useRef(/* @__PURE__ */ new Map());
+  const itemsRef = React5.useRef(items);
   itemsRef.current = items;
-  const clearTimer = React.useCallback((id) => {
+  const clearTimer = React5.useCallback((id) => {
     const t = timersRef.current.get(id);
     if (t) {
       clearTimeout(t);
       timersRef.current.delete(id);
     }
   }, []);
-  const dismiss = React.useCallback((id) => {
+  const dismiss = React5.useCallback((id) => {
     clearTimer(id);
     dispatch({ type: "DISMISS", id });
   }, [clearTimer]);
-  const scheduleAutoDismiss = React.useCallback((id, duration) => {
+  const scheduleAutoDismiss = React5.useCallback((id, duration) => {
     if (duration <= 0) return;
     const t = setTimeout(() => dismiss(id), duration);
     timersRef.current.set(id, t);
   }, [dismiss]);
-  const showToast = React.useCallback((message, opts = {}) => {
+  const showToast = React5.useCallback((message, opts = {}) => {
     const variant = opts.variant ?? "info";
     const duration = opts.duration ?? 3e3;
     const id = opts.id ?? `toast-${++autoIdCounter}`;
@@ -3690,17 +4708,17 @@ function ToastProvider({ children, maxVisible = 3 }) {
     }
     scheduleAutoDismiss(id, duration);
   }, [clearTimer, maxVisible, scheduleAutoDismiss]);
-  React.useEffect(() => () => {
+  React5.useEffect(() => () => {
     timersRef.current.forEach((t) => clearTimeout(t));
     timersRef.current.clear();
   }, []);
-  const value = React.useMemo(() => ({ items, showToast, dismiss }), [items, showToast, dismiss]);
+  const value = React5.useMemo(() => ({ items, showToast, dismiss }), [items, showToast, dismiss]);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Provider, { value, children });
 }
 var ToastContext, autoIdCounter;
 var init_ToastProvider = __esm({
   "src/stamps/shared/Toast/ToastProvider.tsx"() {
-    ToastContext = React.createContext(null);
+    ToastContext = React5.createContext(null);
     autoIdCounter = 0;
   }
 });
@@ -3758,7 +4776,7 @@ var init_Toast = __esm({
   }
 });
 function useToast() {
-  const ctx = React.useContext(ToastContext);
+  const ctx = React5.useContext(ToastContext);
   if (!ctx) {
     throw new Error("useToast must be used inside <ToastProvider>");
   }
@@ -3803,7 +4821,7 @@ var init_EditorPanel = __esm({
     init_scene();
     init_constants();
     init_Toast2();
-    GraphEditorPanelInner = React.forwardRef(
+    GraphEditorPanelInner = React5.forwardRef(
       function GraphEditorPanel({
         store,
         onInsert,
@@ -3822,23 +4840,23 @@ var init_EditorPanel = __esm({
         canUndo,
         canRedo
       }, ref) {
-        const miniRef = React.useRef(null);
-        const [ready, setReady] = React.useState(false);
-        const [hasContent, setHasContent] = React.useState(false);
-        const onSelectionChangeRef = React.useRef(onSelectionChange);
-        React.useEffect(() => {
+        const miniRef = React5.useRef(null);
+        const [ready, setReady] = React5.useState(false);
+        const [hasContent, setHasContent] = React5.useState(false);
+        const onSelectionChangeRef = React5.useRef(onSelectionChange);
+        React5.useEffect(() => {
           onSelectionChangeRef.current = onSelectionChange;
         }, [onSelectionChange]);
         useEditorState({ store, onHistoryChange });
-        React.useEffect(() => {
+        React5.useEffect(() => {
           const sync = () => setHasContent(Object.keys(store.getState().objects).length > 0);
           sync();
           return store.subscribe(sync);
         }, [store]);
-        const handleReady = React.useCallback(() => {
+        const handleReady = React5.useCallback(() => {
           setReady(true);
         }, []);
-        const performInsert = React.useCallback(() => {
+        const performInsert = React5.useCallback(() => {
           const h = miniRef.current;
           if (!h) return false;
           const state = h.getState();
@@ -3856,7 +4874,7 @@ var init_EditorPanel = __esm({
           })();
           return true;
         }, [isDark, onInsert]);
-        React.useImperativeHandle(ref, () => ({
+        React5.useImperativeHandle(ref, () => ({
           insert: performInsert,
           hasContent: () => Object.keys(miniRef.current?.getState().objects ?? {}).length > 0,
           getStore: () => miniRef.current?.getStore() ?? null,
@@ -4014,13 +5032,27 @@ var init_EditorPanel = __esm({
         );
       }
     );
-    GraphEditorPanel2 = React.forwardRef(
+    GraphEditorPanel2 = React5.forwardRef(
       function GraphEditorPanel3(props, ref) {
         return /* @__PURE__ */ jsxRuntime.jsx(ToastProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(GraphEditorPanelInner, { ...props, ref }) });
       }
     );
   }
 });
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function readStoredWidth(key, fallback, min, max) {
+  if (!key || typeof window === "undefined") return fallback;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return fallback;
+    const n = parseInt(raw, 10);
+    if (Number.isFinite(n)) return clamp(n, min, max);
+  } catch {
+  }
+  return fallback;
+}
 function CloseIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
@@ -4028,8 +5060,64 @@ function CloseIcon() {
   ] });
 }
 function LeftPanelShell(props) {
-  const { title, icon, onClose, isDark, tabs, activeTab, onTabChange, testId, children } = props;
+  const {
+    title,
+    icon,
+    onClose,
+    isDark,
+    tabs,
+    activeTab,
+    onTabChange,
+    testId,
+    resizable,
+    widthStorageKey,
+    defaultWidth,
+    minWidth,
+    maxWidth,
+    children
+  } = props;
   const showTabs = !!tabs && tabs.length >= 2;
+  const min = minWidth ?? FALLBACK_MIN_WIDTH;
+  const max = maxWidth ?? FALLBACK_MAX_WIDTH;
+  const initial = clamp(defaultWidth ?? FALLBACK_DEFAULT_WIDTH, min, max);
+  const [width, setWidth] = React5__namespace.useState(
+    () => resizable ? readStoredWidth(widthStorageKey, initial, min, max) : initial
+  );
+  const widthRef = React5__namespace.useRef(width);
+  widthRef.current = width;
+  React5__namespace.useEffect(() => {
+    if (!resizable || !widthStorageKey || typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(widthStorageKey, String(width));
+    } catch {
+    }
+  }, [resizable, widthStorageKey, width]);
+  const onResizeStart = React5__namespace.useCallback(
+    (e) => {
+      if (!resizable) return;
+      e.preventDefault();
+      const startX = e.clientX;
+      const startW = widthRef.current;
+      const onMove = (ev) => {
+        setWidth(clamp(startW + (ev.clientX - startX), min, max));
+      };
+      const onUp = () => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+      document.body.style.cursor = "ew-resize";
+      document.body.style.userSelect = "none";
+    },
+    [resizable, min, max]
+  );
+  const onResizeDoubleClick = React5__namespace.useCallback(() => {
+    if (!resizable) return;
+    setWidth(initial);
+  }, [resizable, initial]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
@@ -4037,10 +5125,12 @@ function LeftPanelShell(props) {
       "aria-label": title,
       "data-testid": testId ?? "left-panel",
       "data-stamp-area": "true",
+      style: resizable ? { width: `${width}px` } : void 0,
       className: [
         isDark ? "theme--dark " : "",
-        "absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200"
-      ].join(""),
+        "absolute left-0 top-0 z-30 flex h-full flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200",
+        resizable ? "" : "w-60"
+      ].join(" "),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-slate-800", children: [
@@ -4075,6 +5165,20 @@ function LeftPanelShell(props) {
             className: "min-h-0 flex-1 overflow-y-auto p-3 space-y-3",
             children
           }
+        ),
+        resizable && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": "K\xE9o \u0111\u1EC3 \u0111\u1ED5i r\u1ED9ng panel",
+            "data-testid": "left-panel-resizer",
+            onMouseDown: onResizeStart,
+            onDoubleClick: onResizeDoubleClick,
+            className: "group absolute right-0 top-0 z-40 h-full w-1.5 -mr-0.5 cursor-ew-resize select-none",
+            title: "K\xE9o \u0111\u1EC3 \u0111\u1ED5i r\u1ED9ng (double-click \u0111\u1EC3 reset)",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-px bg-slate-200 transition group-hover:bg-emerald-400 group-hover:w-0.5 group-active:bg-emerald-500 group-active:w-0.5" })
+          }
         )
       ]
     }
@@ -4104,9 +5208,13 @@ function Section(props) {
     props.children
   ] });
 }
+var FALLBACK_DEFAULT_WIDTH, FALLBACK_MIN_WIDTH, FALLBACK_MAX_WIDTH;
 var init_LeftPanelShell = __esm({
   "src/core/scene/ui/LeftPanelShell.tsx"() {
     "use client";
+    FALLBACK_DEFAULT_WIDTH = 240;
+    FALLBACK_MIN_WIDTH = 220;
+    FALLBACK_MAX_WIDTH = 480;
   }
 });
 
@@ -4157,7 +5265,7 @@ var init_kindMeta = __esm({
 });
 function ObjectRowMenu(props) {
   const { locked, onToggleLocked, onRename, onChangeColor, onDelete } = props;
-  const [open, setOpen] = React__namespace.useState(false);
+  const [open, setOpen] = React5__namespace.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-block", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -4310,11 +5418,11 @@ var init_ObjectRow = __esm({
 });
 function ObjectListPanel(props) {
   const { store, selectedId, onSelect, renderRow } = props;
-  const subscribe = React__namespace.useCallback(
+  const subscribe = React5__namespace.useCallback(
     (cb) => store.subscribe(() => cb()),
     [store]
   );
-  const state = React__namespace.useSyncExternalStore(subscribe, store.getState, store.getState);
+  const state = React5__namespace.useSyncExternalStore(subscribe, store.getState, store.getState);
   const objects = listObjects(state);
   function handleSelect(id) {
     onSelect?.(id === selectedId ? null : id);
@@ -4345,7 +5453,7 @@ function ObjectListPanel(props) {
         if (renderRow) {
           const custom = renderRow(obj, { selected, onClick });
           if (custom != null) {
-            return /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: custom }, obj.id);
+            return /* @__PURE__ */ jsxRuntime.jsx(React5__namespace.Fragment, { children: custom }, obj.id);
           }
         }
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4458,29 +5566,29 @@ var init_AxisGridSection = __esm({
 
 // src/stamps/shared/StampLeftPanel/types.ts
 var TOOLTIP_DELAY_MS;
-var init_types3 = __esm({
+var init_types4 = __esm({
   "src/stamps/shared/StampLeftPanel/types.ts"() {
     TOOLTIP_DELAY_MS = 400;
   }
 });
 function useToolHoverTooltip() {
-  const [hover, setHover] = React.useState(null);
-  const [portalReady, setPortalReady] = React.useState(false);
-  const hoverTimerRef = React.useRef(null);
-  React.useEffect(() => {
+  const [hover, setHover] = React5.useState(null);
+  const [portalReady, setPortalReady] = React5.useState(false);
+  const hoverTimerRef = React5.useRef(null);
+  React5.useEffect(() => {
     setPortalReady(true);
     return () => {
       if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
     };
   }, []);
-  const showHover = React.useCallback((el, t) => {
+  const showHover = React5.useCallback((el, t) => {
     if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
     hoverTimerRef.current = setTimeout(() => {
       const r = el.getBoundingClientRect();
       setHover({ label: t.label, hint: t.hint, x: r.right, y: r.top + r.height / 2 });
     }, TOOLTIP_DELAY_MS);
   }, []);
-  const hideHover = React.useCallback(() => {
+  const hideHover = React5.useCallback(() => {
     if (hoverTimerRef.current) {
       clearTimeout(hoverTimerRef.current);
       hoverTimerRef.current = null;
@@ -4491,27 +5599,118 @@ function useToolHoverTooltip() {
 }
 var init_useToolHoverTooltip = __esm({
   "src/stamps/shared/StampLeftPanel/useToolHoverTooltip.ts"() {
-    init_types3();
+    init_types4();
   }
 });
+function normalize(s) {
+  return s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
+}
+function SearchIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20", y1: "20", x2: "16.5", y2: "16.5" })
+  ] });
+}
+function ClearIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+  ] });
+}
+function ToolResultList(props) {
+  const { tools, activeTool, onToolChange } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", "data-testid": "tool-result-list", children: tools.map((t) => {
+    const active = activeTool === t.key;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-tool": t.key,
+        "aria-label": t.label,
+        "aria-pressed": active,
+        onClick: () => onToolChange(t.key),
+        className: [
+          "flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition",
+          active ? "bg-emerald-600 text-white" : "text-slate-700 hover:bg-slate-100"
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center", children: t.icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[12px] font-medium leading-tight", children: t.label }),
+            t.hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ["block truncate text-[10px] leading-tight", active ? "text-emerald-50" : "text-slate-400"].join(" "), children: t.hint })
+          ] })
+        ]
+      },
+      t.key
+    );
+  }) });
+}
 function ToolGrid(props) {
   const { tools, groupOrder, groupLabels, activeTool, onToolChange, chord } = props;
   const { hover, portalReady, showHover, hideHover } = useToolHoverTooltip();
-  const grouped = React.useMemo(() => {
+  const [query, setQuery] = React5.useState("");
+  const normalizedQuery = React5.useMemo(() => normalize(query.trim()), [query]);
+  const filteredTools = React5.useMemo(() => {
+    if (!normalizedQuery) return tools;
+    return tools.filter((t) => {
+      if (normalize(t.label).includes(normalizedQuery)) return true;
+      if (t.hint && normalize(t.hint).includes(normalizedQuery)) return true;
+      return false;
+    });
+  }, [tools, normalizedQuery]);
+  const grouped = React5.useMemo(() => {
     var _a;
     const acc = {};
-    for (const t of tools) {
+    for (const t of filteredTools) {
       (acc[_a = t.group] ?? (acc[_a] = [])).push(t);
     }
     return acc;
-  }, [tools]);
-  const groupKeys = React.useMemo(
-    () => groupOrder.filter((g) => grouped[g]),
+  }, [filteredTools]);
+  const groupKeys = React5.useMemo(
+    () => groupOrder.filter((g) => grouped[g] && grouped[g].length > 0),
     [grouped, groupOrder]
   );
-  const activeGroupTools = chord?.activeGroup ? grouped[chord.activeGroup] ?? null : null;
+  const noMatch = normalizedQuery !== "" && groupKeys.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    groupKeys.map((group) => {
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400", children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "search",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: "T\xECm c\xF4ng c\u1EE5\u2026",
+          "aria-label": "T\xECm c\xF4ng c\u1EE5",
+          "data-testid": "tool-search-input",
+          className: "w-full rounded-md border border-slate-200 bg-slate-50 py-1.5 pl-7 pr-7 text-[12px] text-slate-800 placeholder:text-slate-400 focus:border-emerald-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-emerald-300"
+        }
+      ),
+      query && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setQuery(""),
+          "aria-label": "Xo\xE1 t\xECm ki\u1EBFm",
+          "data-testid": "tool-search-clear",
+          className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 transition hover:bg-slate-200 hover:text-slate-700",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+        }
+      )
+    ] }),
+    noMatch && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-testid": "tool-search-empty",
+        className: "rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-center text-[11px] text-slate-500",
+        children: [
+          "Kh\xF4ng c\xF3 c\xF4ng c\u1EE5 n\xE0o kh\u1EDBp \u201C",
+          query.trim(),
+          "\u201D."
+        ]
+      }
+    ),
+    normalizedQuery !== "" && !noMatch ? /* @__PURE__ */ jsxRuntime.jsx(ToolResultList, { tools: filteredTools, activeTool, onToolChange }) : groupKeys.map((group) => {
       const isChordActive = chord?.activeGroup === group;
       const dimmed = chord?.activeGroup != null && !isChordActive;
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4525,23 +5724,10 @@ function ToolGrid(props) {
             dimmed ? "opacity-55" : "opacity-100"
           ].join(" "),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "mb-1.5 flex items-center justify-between text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: groupLabels[group] }),
-              chord && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "data-testid": `chord-letter-${group}`,
-                  className: [
-                    "font-mono text-[10px] leading-none transition",
-                    isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
-                  ].join(" "),
-                  children: chord.letterForGroup(group)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: grouped[group].map((t, i) => {
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: groupLabels[group] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: grouped[group].map((t) => {
               const active = activeTool === t.key;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
+              return /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
@@ -4558,20 +5744,7 @@ function ToolGrid(props) {
                     "relative flex h-10 items-center justify-center rounded-md transition",
                     active ? "bg-emerald-600 text-white shadow-sm" : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
                   ].join(" "),
-                  children: [
-                    t.icon,
-                    chord && /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        "data-testid": `chord-num-${t.key}`,
-                        className: [
-                          "pointer-events-none absolute bottom-0 right-0.5 font-mono text-[9px] leading-none transition",
-                          active ? "text-white/70" : isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
-                        ].join(" "),
-                        children: i + 1
-                      }
-                    )
-                  ]
+                  children: t.icon
                 },
                 t.key
               );
@@ -4581,22 +5754,6 @@ function ToolGrid(props) {
         group
       );
     }),
-    chord?.activeGroup && activeGroupTools && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "data-testid": "chord-hint",
-        className: "mt-1 rounded border border-emerald-200 bg-emerald-50/60 px-2 py-1 text-[11px] leading-snug text-slate-600",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-semibold text-emerald-700", children: chord.letterForGroup(chord.activeGroup) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 text-slate-400", children: "\u2192" }),
-          activeGroupTools.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2 inline-block", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-semibold text-emerald-700", children: i + 1 }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: t.label })
-          ] }, t.key)),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Esc hu\u1EF7" })
-        ]
-      }
-    ),
     portalReady && hover && typeof document !== "undefined" ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -4643,9 +5800,9 @@ function StampLeftPanelDesktop(props) {
     objects,
     tabs
   } = props;
-  const [tab, setTab] = React.useState("tools");
+  const [tab, setTab] = React5.useState("tools");
   const hasObjects = !!objects;
-  React.useEffect(() => {
+  React5.useEffect(() => {
     if (!hasObjects && tab === "objects") setTab("tools");
   }, [hasObjects, tab]);
   const tabSpecs = hasObjects ? [
@@ -4663,6 +5820,8 @@ function StampLeftPanelDesktop(props) {
       tabs: tabSpecs,
       activeTab: hasObjects ? tab : void 0,
       onTabChange: hasObjects ? setTab : void 0,
+      resizable: true,
+      widthStorageKey: "xom11.stamp-left-panel.width",
       children: !hasObjects || tab === "tools" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(AxisGridSection, { view, history }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4724,9 +5883,9 @@ function MobileToolDrawer({
   testId,
   objectsTab
 }) {
-  const [mobileTab, setMobileTab] = React__namespace.default.useState("tools");
-  const prevOpenRef = React__namespace.default.useRef(drawerOpen);
-  React__namespace.default.useEffect(() => {
+  const [mobileTab, setMobileTab] = React5__namespace.default.useState("tools");
+  const prevOpenRef = React5__namespace.default.useRef(drawerOpen);
+  React5__namespace.default.useEffect(() => {
     if (!prevOpenRef.current && drawerOpen) setMobileTab("tools");
     prevOpenRef.current = drawerOpen;
   }, [drawerOpen]);
@@ -4932,7 +6091,7 @@ function StampLeftPanelMobile(props) {
     drawerOpen,
     onDrawerClose
   } = props;
-  const groups = React.useMemo(() => {
+  const groups = React5.useMemo(() => {
     const acc = /* @__PURE__ */ new Map();
     for (const t of tools) {
       if (!acc.has(t.group)) acc.set(t.group, []);
@@ -5122,11 +6281,11 @@ function readMatch(query) {
   }
 }
 function useIsMobile() {
-  const [state, setState] = React.useState(() => ({
+  const [state, setState] = React5.useState(() => ({
     isMobile: readMatch(MOBILE_QUERY),
     isTouchOnly: readMatch(NO_HOVER_QUERY)
   }));
-  React.useEffect(() => {
+  React5.useEffect(() => {
     if (typeof window === "undefined" || !window.matchMedia) return;
     const mql = window.matchMedia(MOBILE_QUERY);
     const tql = window.matchMedia(NO_HOVER_QUERY);
@@ -5152,7 +6311,7 @@ var init_useIsMobile = __esm({
   }
 });
 function useStampStore(domain, editingElement, parseInitial) {
-  const ref = React.useRef(null);
+  const ref = React5.useRef(null);
   if (!ref.current) {
     const initial = editingElement?.customData ? parseInitial(editingElement.customData) ?? createEmptyState(domain) : createEmptyState(domain);
     ref.current = createStore(initial);
@@ -5251,9 +6410,9 @@ var init_tools = __esm({
   }
 });
 function FunctionRow({ obj, store, selected, onClick }) {
-  const [local, setLocal] = React.useState(obj.attrs.expression);
-  const [error, setError] = React.useState(null);
-  React.useEffect(() => {
+  const [local, setLocal] = React5.useState(obj.attrs.expression);
+  const [error, setError] = React5.useState(null);
+  React5.useEffect(() => {
     setLocal(obj.attrs.expression);
     setError(null);
   }, [obj.attrs.expression]);
@@ -5474,35 +6633,35 @@ var init_host = __esm({
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3 L3 21 L21 21" }),
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 14 Q9 8 12 10 Q15 12 18 6" })
     ] });
-    Graph2DStampHost = React.forwardRef(
+    Graph2DStampHost = React5.forwardRef(
       function Graph2DStampHost2({ api, editingElement, onClose, isDark }, ref) {
-        const panelRef = React.useRef(null);
+        const panelRef = React5.useRef(null);
         const { isMobile } = useIsMobile();
-        const [drawerOpen, setDrawerOpen] = React.useState(false);
+        const [drawerOpen, setDrawerOpen] = React5.useState(false);
         const sceneStore = useStampStore("graph2d", editingElement, parseInitialState);
-        const [selectedObjectId, setSelectedObjectId] = React.useState(void 0);
+        const [selectedObjectId, setSelectedObjectId] = React5.useState(void 0);
         const initialMeta = sceneStore.getState().meta;
         const initialView = initialMeta.domain === "graph2d" ? initialMeta.view : null;
-        const [selectedTool, setSelectedTool] = React.useState("move");
-        const [showAxis, setShowAxisState] = React.useState(initialView?.showAxis ?? true);
-        const [showGrid, setShowGridState] = React.useState(initialView?.showGrid ?? true);
-        const [canUndo, setCanUndo] = React.useState(false);
-        const [canRedo, setCanRedo] = React.useState(false);
-        const handleHistoryChange = React.useCallback((u, r) => {
+        const [selectedTool, setSelectedTool] = React5.useState("move");
+        const [showAxis, setShowAxisState] = React5.useState(initialView?.showAxis ?? true);
+        const [showGrid, setShowGridState] = React5.useState(initialView?.showGrid ?? true);
+        const [canUndo, setCanUndo] = React5.useState(false);
+        const [canRedo, setCanRedo] = React5.useState(false);
+        const handleHistoryChange = React5.useCallback((u, r) => {
           setCanUndo(u);
           setCanRedo(r);
         }, []);
-        const handleUndo = React.useCallback(() => sceneStore.undo(), [sceneStore]);
-        const handleRedo = React.useCallback(() => sceneStore.redo(), [sceneStore]);
-        const handleShowAxisChange = React.useCallback((b) => {
+        const handleUndo = React5.useCallback(() => sceneStore.undo(), [sceneStore]);
+        const handleRedo = React5.useCallback(() => sceneStore.redo(), [sceneStore]);
+        const handleShowAxisChange = React5.useCallback((b) => {
           setShowAxisState(b);
           sceneStore.dispatch({ type: "UPDATE_VIEW", payload: { patch: { showAxis: b } } });
         }, [sceneStore]);
-        const handleShowGridChange = React.useCallback((b) => {
+        const handleShowGridChange = React5.useCallback((b) => {
           setShowGridState(b);
           sceneStore.dispatch({ type: "UPDATE_VIEW", payload: { patch: { showGrid: b } } });
         }, [sceneStore]);
-        const handleAddFunction = React.useCallback(() => {
+        const handleAddFunction = React5.useCallback(() => {
           const existing = Object.values(sceneStore.getState().objects).filter((o) => o.kind === "function2d");
           const id = `f${existing.length + 1}`;
           sceneStore.dispatch({
@@ -5521,7 +6680,7 @@ var init_host = __esm({
             }
           });
         }, [sceneStore]);
-        const handleAddParameter = React.useCallback(() => {
+        const handleAddParameter = React5.useCallback(() => {
           const existing = Object.values(sceneStore.getState().objects).filter((o) => o.kind === "parameter");
           const labels = "abcdefghijklmnopqrstuvwxyz";
           const usedLabels = new Set(existing.map((o) => o.label));
@@ -5549,7 +6708,7 @@ var init_host = __esm({
             }
           });
         }, [sceneStore]);
-        const handleInsert = React.useCallback(
+        const handleInsert = React5.useCallback(
           async (jsonState, svgString) => {
             if (!api) return;
             try {
@@ -5569,7 +6728,7 @@ var init_host = __esm({
           },
           [api, editingElement?.id, onClose]
         );
-        React.useImperativeHandle(
+        React5.useImperativeHandle(
           ref,
           () => ({
             tryInsert: () => panelRef.current?.insert() ?? false,
@@ -5577,7 +6736,7 @@ var init_host = __esm({
           }),
           []
         );
-        const renderRow = React.useMemo(() => makeRenderRow(sceneStore), [sceneStore]);
+        const renderRow = React5.useMemo(() => makeRenderRow(sceneStore), [sceneStore]);
         return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             StampLeftPanel,
@@ -5655,7 +6814,7 @@ init_render();
 init_types();
 init_serialize();
 init_svgToStampFile();
-var Graph2DStampHost3 = React.lazy(
+var Graph2DStampHost3 = React5.lazy(
   () => Promise.resolve().then(() => (init_host(), host_exports)).then((m) => ({ default: m.Graph2DStampHost }))
 );
 var Graph2DIcon = /* @__PURE__ */ jsxRuntime.jsxs(