@xom11/whiteboard 0.29.0 → 0.31.0

package/dist/index.js

@@ -942,8 +942,12 @@ function constraintRefs2D(c) {
       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 "arcMidpoint": {
+      const containment = c.notContaining ?? c.containing;
+      return containment ? [c.circle, c.a, c.b, containment] : [c.circle, c.a, c.b];
+    }
+    case "mixtilinearPoint":
+      return [c.vertices[0], c.vertices[1], c.vertices[2]];
     case "pointAtDistance": {
       const d = c.distance;
       const extra = d.kind === "circleRadius" ? [d.circle] : d.kind === "segmentLength" ? [d.p1, d.p2] : [];
@@ -1230,7 +1234,7 @@ function dist(p, q) {
 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) {
+function arcMidpoint(center, radius, a, b, reference, sameSide = false) {
   const mcx = (a[0] + b[0]) / 2;
   const mcy = (a[1] + b[1]) / 2;
   let ux = mcx - center[0];
@@ -1245,12 +1249,18 @@ function arcMidpoint(center, radius, a, b, notContaining) {
   uy /= len;
   const cand1 = [center[0] + radius * ux, center[1] + radius * uy];
   const cand2 = [center[0] - radius * ux, center[1] - radius * uy];
+  if (!reference) return cand1[1] >= cand2[1] ? cand1 : cand2;
+  const notContaining = reference;
   const sN = sideOf(a, b, notContaining);
   if (Math.abs(sN) < 1e-9) {
-    return dist(cand1, notContaining) >= dist(cand2, notContaining) ? cand1 : cand2;
+    const far = dist(cand1, notContaining) >= dist(cand2, notContaining) ? cand1 : cand2;
+    const near = far === cand1 ? cand2 : cand1;
+    return sameSide ? near : far;
   }
   const s1 = sideOf(a, b, cand1);
-  return s1 * sN < 0 ? cand1 : cand2;
+  const opp = s1 * sN < 0 ? cand1 : cand2;
+  const same = opp === cand1 ? cand2 : cand1;
+  return sameSide ? same : opp;
 }
 function excenter(vertices, oppositeIndex) {
   const [A, B, C] = vertices;
@@ -1266,6 +1276,35 @@ function excenter(vertices, oppositeIndex) {
     (w[0] * A[1] + w[1] * B[1] + w[2] * C[1]) / sum
   ];
 }
+function circumcenterXY(a, b, c) {
+  const ax = a[0], ay = a[1], bx = b[0], by = b[1], cx = c[0], cy = c[1];
+  const d = 2 * (ax * (by - cy) + bx * (cy - ay) + cx * (ay - by));
+  if (Math.abs(d) < 1e-12) return [(ax + bx + cx) / 3, (ay + by + cy) / 3];
+  const ux = ((ax * ax + ay * ay) * (by - cy) + (bx * bx + by * by) * (cy - ay) + (cx * cx + cy * cy) * (ay - by)) / d;
+  const uy = ((ax * ax + ay * ay) * (cx - bx) + (bx * bx + by * by) * (ax - cx) + (cx * cx + cy * cy) * (bx - ax)) / d;
+  return [ux, uy];
+}
+function mixtilinearPoint(a, b, c, which) {
+  const O = circumcenterXY(a, b, c);
+  const R = Math.hypot(O[0] - a[0], O[1] - a[1]);
+  const ux1 = (b[0] - a[0]) / (Math.hypot(b[0] - a[0], b[1] - a[1]) || 1);
+  const uy1 = (b[1] - a[1]) / (Math.hypot(b[0] - a[0], b[1] - a[1]) || 1);
+  const ux2 = (c[0] - a[0]) / (Math.hypot(c[0] - a[0], c[1] - a[1]) || 1);
+  const uy2 = (c[1] - a[1]) / (Math.hypot(c[0] - a[0], c[1] - a[1]) || 1);
+  let bx = ux1 + ux2, by = uy1 + uy2;
+  const bl = Math.hypot(bx, by) || 1;
+  bx /= bl;
+  by /= bl;
+  const cosA = ux1 * ux2 + uy1 * uy2;
+  const sinHalf = Math.sqrt(Math.max(0, (1 - cosA) / 2));
+  const cos2Half = Math.max(1e-9, (1 + cosA) / 2);
+  const dotAO = bx * (O[0] - a[0]) + by * (O[1] - a[1]);
+  const d = 2 * (dotAO - R * sinHalf) / cos2Half;
+  const K = [a[0] + d * bx, a[1] + d * by];
+  if (which === "center") return K;
+  const kl = Math.hypot(K[0] - O[0], K[1] - O[1]) || 1;
+  return [O[0] + R * (K[0] - O[0]) / kl, O[1] + R * (K[1] - O[1]) / kl];
+}
 function pointAtDistanceCoord(from, through, d) {
   const dx = through[0] - from[0];
   const dy = through[1] - from[1];
@@ -1293,29 +1332,38 @@ var init_arcMidpoint = __esm({
     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");
+        if (!c.circle || !c.a || !c.b) {
+          throw new Error("point.arcMidpoint: circle, a, b b\u1EAFt bu\u1ED9c");
+        }
+        if (c.notContaining && c.containing) {
+          throw new Error("point.arcMidpoint: kh\xF4ng th\u1EC3 v\u1EEBa notContaining v\u1EEBa containing");
         }
       },
       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})`;
+        const ref = c.containing ?? c.notContaining;
+        if (!ref) return `${obj.label} = trung \u0111i\u1EC3m cung ${al}${bl}`;
+        const rl = state?.objects[ref]?.label ?? ref;
+        const rel = c.containing ? "ch\u1EE9a" : "kh\xF4ng ch\u1EE9a";
+        return `${obj.label} = trung \u0111i\u1EC3m cung ${al}${bl} (${rel} ${rl})`;
       },
       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 refName = c.containing ?? c.notContaining;
+        const ref = refName ? ctx.resolveRef(refName) : void 0;
+        const sameSide = !!c.containing;
         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()]
+          ref ? [ref.X(), ref.Y()] : void 0,
+          sameSide
         );
         return board.create("point", [() => am()[0], () => am()[1]], opts);
       }
@@ -1365,6 +1413,59 @@ var init_excenter = __esm({
   }
 });
 
+// src/core/scene/kinds/point-constraints/mixtilinearPoint.ts
+var mixtilinearPointConstraint;
+var init_mixtilinearPoint = __esm({
+  "src/core/scene/kinds/point-constraints/mixtilinearPoint.ts"() {
+    init_pointConstructions();
+    init_types2();
+    mixtilinearPointConstraint = definePointConstraint({
+      kind: "mixtilinearPoint",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3 || !c.vertices.every(Boolean)) {
+          throw new Error("point.mixtilinearPoint: vertices ph\u1EA3i l\xE0 tuple 3 id non-empty");
+        }
+        if (c.which !== "center" && c.which !== "touch") {
+          throw new Error("point.mixtilinearPoint: which ph\u1EA3i 'center' | 'touch'");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return c.which === "center" ? `${obj.label} = t\xE2m \u0111\u01B0\u1EDDng tr\xF2n mixtilinear \u0394${labels}` : `${obj.label} = ti\u1EBFp \u0111i\u1EC3m mixtilinear \u0394${labels} v\u1EDBi (O)`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const d = ctx.resolveRef(c.vertices[2]);
+        const mp = () => mixtilinearPoint(
+          [a.X(), a.Y()],
+          [b.X(), b.Y()],
+          [d.X(), d.Y()],
+          c.which
+        );
+        return board.create("point", [() => mp()[0], () => mp()[1]], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/_label.ts
+function labelOpts(labelOffset, dflt) {
+  const offset = labelOffset ?? dflt;
+  return { label: { fixed: false, ...offset ? { offset } : {} } };
+}
+function readLabelOffset(label) {
+  const off = label.evalVisProp?.("offset") ?? label.visProp?.offset;
+  const rel = label.relativeCoords?.scrCoords;
+  if (!off || !rel || off.length < 2 || rel.length < 3) return null;
+  return [Math.round(off[0] + rel[1]), Math.round(off[1] - rel[2])];
+}
+var init_label = __esm({
+  "src/core/scene/kinds/_label.ts"() {
+  }
+});
+
 // src/core/scene/kinds/point-constraints/shared.ts
 function buildJxgTransforms(board, ctx, t) {
   switch (t.kind) {
@@ -1416,11 +1517,13 @@ function buildPointOpts(obj) {
     strokeColor: obj.attrs.color ?? "#1e40af",
     fillColor: obj.attrs.color ?? "#1e40af",
     face: obj.attrs.face ?? "o",
-    size: obj.attrs.size ?? 4
+    size: obj.attrs.size ?? 4,
+    ...labelOpts(obj.attrs.labelOffset, [10, 10])
   };
 }
 var init_shared = __esm({
   "src/core/scene/kinds/point-constraints/shared.ts"() {
+    init_label();
   }
 });
 
@@ -1729,6 +1832,7 @@ var init_registry2 = __esm({
     init_centroid();
     init_arcMidpoint();
     init_excenter();
+    init_mixtilinearPoint();
     init_pointAtDistance();
     init_circleIntersection();
     init_circleSecondIntersection();
@@ -1754,6 +1858,7 @@ var init_registry2 = __esm({
       centroidConstraint,
       arcMidpointConstraint,
       excenterConstraint,
+      mixtilinearPointConstraint,
       pointAtDistanceConstraint,
       circleIntersectionConstraint,
       circleSecondIntersectionConstraint,
@@ -1778,6 +1883,7 @@ var init_point = __esm({
     init_d_constraint2();
     init_registry2();
     init_shared();
+    init_label();
     def3 = {
       type: "point",
       schemaVersion: 1,
@@ -1845,7 +1951,8 @@ var init_point = __esm({
                 strokeColor: obj.attrs.color ?? "#1e40af",
                 fillColor: obj.attrs.color ?? "#1e40af",
                 face: obj.attrs.face ?? "o",
-                size: obj.attrs.size ?? 4
+                size: obj.attrs.size ?? 4,
+                ...labelOpts(obj.attrs.labelOffset, [10, 10])
               });
             } catch {
             }
@@ -1865,6 +1972,7 @@ var init_segment = __esm({
   "src/core/scene/kinds/segment.ts"() {
     init_registry();
     init_labelOf();
+    init_label();
     def4 = {
       type: "segment",
       schemaVersion: 1,
@@ -1896,7 +2004,8 @@ var init_segment = __esm({
           strokeWidth: obj.attrs.width ?? 2,
           dash: obj.attrs.dash ?? 0,
           visible: obj.visible,
-          fixed: obj.locked
+          fixed: obj.locked,
+          ...labelOpts(obj.attrs.labelOffset)
         });
       }
     };
@@ -1933,6 +2042,7 @@ var init_line = __esm({
   "src/core/scene/kinds/line.ts"() {
     init_registry();
     init_labelOf();
+    init_label();
     init_pointConstructions();
     def5 = {
       type: "line",
@@ -1975,7 +2085,8 @@ var init_line = __esm({
           strokeWidth: obj.attrs.width ?? 2,
           dash: obj.attrs.dash ?? 0,
           visible: obj.visible,
-          fixed: obj.locked
+          fixed: obj.locked,
+          ...labelOpts(obj.attrs.labelOffset)
         };
         const c = obj.attrs.construction;
         if (!c) {
@@ -2231,6 +2342,7 @@ var init_circle = __esm({
   "src/core/scene/kinds/circle.ts"() {
     init_registry();
     init_labelOf();
+    init_label();
     init_pointConstructions();
     def8 = {
       type: "circle",
@@ -2292,15 +2404,17 @@ var init_circle = __esm({
         const board = ctx.jxg;
         const isCenterLabel = (l) => /^[A-Z]['′]?\d*$/u.test(l);
         const isCenter = isCenterLabel(obj.label);
+        const isRenamedCircle = /_c$/.test(obj.label);
         const baseOpts = {
           name: obj.label,
-          withLabel: isCenter ? obj.attrs.showLabel ?? false : true,
+          withLabel: isCenter ? obj.attrs.showLabel ?? false : isRenamedCircle ? false : true,
           strokeColor: obj.attrs.color ?? "#0f172a",
           strokeWidth: obj.attrs.width ?? 2,
           dash: obj.attrs.dash ?? 0,
           fillColor: "none",
           visible: obj.visible,
-          fixed: obj.locked
+          fixed: obj.locked,
+          ...labelOpts(obj.attrs.labelOffset)
         };
         const c = asConstruction(obj.attrs);
         if (c?.kind === "circumscribed") {
@@ -2785,8 +2899,11 @@ var init_intersection = __esm({
         const opts = {
           name: obj.label,
           withLabel: true,
-          strokeColor: obj.attrs.color ?? "#dc2626",
-          fillColor: obj.attrs.color ?? "#dc2626",
+          // Cùng màu xanh với mọi điểm khác (buildPointOpts dùng '#1e40af').
+          // Trước đây điểm giao tô đỏ '#dc2626' → tách biệt thị giác nhưng gây
+          // khó hiểu ("vì sao điểm này khác màu?"). Giữ chung một màu.
+          strokeColor: obj.attrs.color ?? "#1e40af",
+          fillColor: obj.attrs.color ?? "#1e40af",
           visible: obj.visible,
           fixed: obj.locked
         };
@@ -2795,6 +2912,38 @@ var init_intersection = __esm({
         }
         const branch = obj.attrs.branch ?? 0;
         return board.create("intersection", [a, b, branch], opts);
+      },
+      /**
+       * Cập nhật TẠI CHỖ các thuộc tính "trang trí" (tên/màu/ẩn-hiện/khoá) qua
+       * setAttribute — giữ nguyên JxgObj identity nên các object phụ thuộc điểm
+       * giao (đường thẳng qua nó, …) KHÔNG bị stale parent ref. Mô phỏng update
+       * hook của point.ts.
+       *
+       * Nếu định nghĩa hình học đổi (kind/ref1/ref2/branch) thì throw → renderer
+       * fallback remove + create để JSXGraph dựng lại phép giao đúng.
+       */
+      update: (obj, prev, ctx, existing) => {
+        const a = obj.attrs;
+        const p = prev.attrs;
+        const branchA = a.branch;
+        const branchP = p.branch;
+        if (a.kind !== p.kind || a.ref1 !== p.ref1 || a.ref2 !== p.ref2 || branchA !== branchP) {
+          throw new Error("intersection: \u0111\u1ECBnh ngh\u0129a h\xECnh h\u1ECDc \u0111\u1ED5i \u2014 recreate");
+        }
+        const el = existing;
+        if (typeof el.setAttribute === "function") {
+          try {
+            el.setAttribute({
+              name: obj.label,
+              withLabel: true,
+              strokeColor: a.color ?? "#1e40af",
+              fillColor: a.color ?? "#1e40af",
+              visible: obj.visible,
+              fixed: obj.locked
+            });
+          } catch {
+          }
+        }
       }
     };
     registerKind(def12);
@@ -3481,6 +3630,7 @@ var init_JxgRenderer = __esm({
     init_registry();
     init_types2d();
     init_parser();
+    init_label();
     JxgRenderer = class {
       constructor(store, board, options = {}) {
         this.elements = /* @__PURE__ */ new Map();
@@ -3549,6 +3699,7 @@ var init_JxgRenderer = __esm({
           this.elements.set(obj.id, el);
           this.attachFreePointDragSync(obj, el);
           this.attachGliderDragSync(obj, el);
+          this.attachLabelDragSync(obj, el);
         } catch (err) {
           console.warn(`[scene/render/2d] kh\xF4ng render \u0111\u01B0\u1EE3c ${obj.kind} id="${obj.id}":`, err);
         }
@@ -3663,6 +3814,54 @@ var init_JxgRenderer = __esm({
           });
         });
       }
+      /**
+       * Cho phép kéo NHÃN của bất kỳ object nào có label (point/line/segment/
+       * circle...). Khi user kéo nhãn, JSXGraph cộng dồn vào label.relativeCoords
+       * (drag-delta screen px) nhưng KHÔNG đổi attribute offset → vị trí cuối =
+       * offset + relativeCoords. Ta gộp lại thành offset thuần (readLabelOffset),
+       * zero relativeCoords để khỏi double-count khi update-hook/recreate áp lại
+       * offset, rồi dispatch UPDATE_ATTRS { labelOffset }. Right-click → reset.
+       */
+      attachLabelDragSync(obj, el) {
+        const label = el?.label;
+        if (!label || typeof label.on !== "function") return;
+        const sceneId = obj.id;
+        label.on("up", () => {
+          if (this.disposed) return;
+          const off = readLabelOffset(label);
+          if (!off) return;
+          const cur = this.store.getState().objects[sceneId];
+          if (!cur) return;
+          const prev = cur.attrs.labelOffset;
+          if (prev && prev[0] === off[0] && prev[1] === off[1]) return;
+          try {
+            label.setAttribute({ offset: off });
+            if (label.relativeCoords?.scrCoords) {
+              label.relativeCoords.scrCoords[1] = 0;
+              label.relativeCoords.scrCoords[2] = 0;
+            }
+          } catch {
+          }
+          this.store.dispatch({
+            type: "UPDATE_ATTRS",
+            payload: { id: sceneId, patch: { labelOffset: off } }
+          });
+        });
+        const node = label.rendNode;
+        if (node?.addEventListener) {
+          node.addEventListener("contextmenu", (ev) => {
+            if (this.disposed) return;
+            ev.preventDefault();
+            const c = this.store.getState().objects[sceneId];
+            if (!c) return;
+            if (c.attrs.labelOffset === void 0) return;
+            this.store.dispatch({
+              type: "UPDATE_ATTRS",
+              payload: { id: sceneId, patch: { labelOffset: void 0 } }
+            });
+          });
+        }
+      }
       remove(id) {
         this.removeHalo(id);
         this.selectedIds.delete(id);
@@ -3799,88 +3998,89 @@ var init_JxgRenderer = __esm({
           layer: 4,
           needsRegularUpdate: true
         };
+        const elementClass = el.elementClass;
+        const elType = el.elType;
+        const isPointLike = elementClass === 1 || elType === "point" || elType === "glider" || elType === "intersection";
+        const isPolygonLike = Array.isArray(el.vertices) && el.vertices.length >= 3;
+        const isCircleLike = elementClass === 3 || elType === "circle" || elType === "circumcircle" || elType === "incircle";
+        const isSegment = elType === "segment";
+        const isLineLike = elementClass === 2 || elType === "line" || elType === "arrow" || elType === "ray" || elType === "vector" || elType === "tangent" || elType === "normal" || elType === "parallel" || elType === "perpendicular" || elType === "bisector";
         const halos = [];
         try {
-          switch (el.elType) {
-            case "point":
-            case "glider":
-            case "intersection": {
-              const baseSize = el.getAttribute?.("size") ?? 4;
-              const halo = board.create("point", [
-                () => el.X?.() ?? 0,
-                () => el.Y?.() ?? 0
-              ], {
-                ...haloBase,
-                size: baseSize + 6,
-                face: "o",
-                strokeWidth: 2,
-                strokeOpacity: 0.75,
-                fillOpacity: 0.25
-              });
-              halos.push(halo);
-              break;
-            }
-            case "segment": {
-              if (el.point1 && el.point2) {
-                const halo = board.create("segment", [el.point1, el.point2], {
-                  ...haloBase,
-                  strokeWidth: 9,
-                  straightFirst: false,
-                  straightLast: false
-                });
-                halos.push(halo);
-              }
-              break;
-            }
-            case "line":
-            case "arrow":
-            case "ray":
-            case "vector":
-            case "tangent":
-            case "normal":
-            case "parallel":
-            case "perpendicular":
-            case "bisector": {
-              if (el.point1 && el.point2) {
-                const halo = board.create("line", [el.point1, el.point2], {
-                  ...haloBase,
-                  strokeWidth: 9
-                });
-                halos.push(halo);
-              }
-              break;
-            }
-            case "circle": {
-              if (el.center && typeof el.Radius === "function") {
-                const halo = board.create("circle", [el.center, () => el.Radius?.() ?? 0], {
-                  ...haloBase,
-                  strokeWidth: 9,
-                  fillOpacity: 0
-                });
-                halos.push(halo);
-              }
-              break;
-            }
-            case "polygon": {
-              if (Array.isArray(el.vertices) && el.vertices.length >= 3) {
-                const last = el.vertices.length - 1;
-                const verts = el.vertices[last] === el.vertices[0] ? el.vertices.slice(0, last) : el.vertices.slice();
-                const halo = board.create("polygon", verts, {
-                  ...haloBase,
-                  fillOpacity: 0.2,
-                  borders: {
-                    strokeColor: SEL_STROKE,
-                    strokeWidth: 7,
-                    strokeOpacity: 0.55,
-                    highlight: false
-                  }
-                });
-                halos.push(halo);
+          if (isPointLike) {
+            const baseSize = el.getAttribute?.("size") ?? 4;
+            const halo = board.create("point", [
+              () => el.X?.() ?? 0,
+              () => el.Y?.() ?? 0
+            ], {
+              ...haloBase,
+              size: baseSize + 6,
+              face: "o",
+              strokeWidth: 2,
+              strokeOpacity: 0.75,
+              fillOpacity: 0.25
+            });
+            halos.push(halo);
+          } else if (isPolygonLike) {
+            const verts = el.vertices;
+            const last = verts.length - 1;
+            const trimmed = verts[last] === verts[0] ? verts.slice(0, last) : verts.slice();
+            const halo = board.create("polygon", trimmed, {
+              ...haloBase,
+              fillOpacity: 0.2,
+              borders: {
+                strokeColor: SEL_STROKE,
+                strokeWidth: 7,
+                strokeOpacity: 0.55,
+                highlight: false
               }
-              break;
+            });
+            halos.push(halo);
+          } else if (isCircleLike && el.center && typeof el.Radius === "function") {
+            const halo = board.create("circle", [el.center, () => el.Radius?.() ?? 0], {
+              ...haloBase,
+              strokeWidth: 9,
+              fillOpacity: 0
+            });
+            halos.push(halo);
+          } else if (isSegment && el.point1 && el.point2) {
+            const halo = board.create("segment", [el.point1, el.point2], {
+              ...haloBase,
+              strokeWidth: 9,
+              straightFirst: false,
+              straightLast: false
+            });
+            halos.push(halo);
+          } else if (isLineLike && el.point1 && el.point2) {
+            const halo = board.create("line", [el.point1, el.point2], {
+              ...haloBase,
+              strokeWidth: 9
+            });
+            halos.push(halo);
+          } else if (el.center && (el.radiuspoint ?? el.radiusPoint) && (el.anglepoint ?? el.anglePoint) && (elType === "arc" || elType === "semicircle" || elType === "circumcirclearc" || elType === "sector" || elType === "angle")) {
+            const rp = el.radiuspoint ?? el.radiusPoint;
+            const ap = el.anglepoint ?? el.anglePoint;
+            if (elType === "sector") {
+              halos.push(board.create("sector", [el.center, rp, ap], {
+                ...haloBase,
+                strokeWidth: 7,
+                fillOpacity: 0.2
+              }));
+            } else if (elType === "angle") {
+              halos.push(board.create("angle", [rp, el.center, ap], {
+                ...haloBase,
+                strokeWidth: 7,
+                fillOpacity: 0.2,
+                radius: el.getAttribute?.("radius") ?? 1
+              }));
+            } else {
+              halos.push(board.create("arc", [el.center, rp, ap], {
+                ...haloBase,
+                strokeWidth: 9,
+                fillColor: "none",
+                fillOpacity: 0
+              }));
             }
-            default:
-              break;
           }
         } catch (err) {
           console.warn("[scene/render/2d] halo create fail:", err);
@@ -4040,6 +4240,49 @@ var init_autoFitBbox = __esm({
   }
 });
 
+// src/stamps/geometry-2d/autoFitBoard.ts
+function isDefaultBbox(bbox) {
+  const d = DEFAULT_VIEW_2D.bbox;
+  return bbox.length === 4 && bbox[0] === d[0] && bbox[1] === d[1] && bbox[2] === d[2] && bbox[3] === d[3];
+}
+function fittedBboxFromBoard(board, aspect) {
+  const objs = board?.objectsList;
+  if (!Array.isArray(objs)) return null;
+  const points = [];
+  const circles = [];
+  for (const raw of objs) {
+    const o = raw;
+    if (o?.elementClass === 1 && typeof o.X === "function" && typeof o.Y === "function") {
+      const x = o.X(), y = o.Y();
+      if (Number.isFinite(x) && Number.isFinite(y)) points.push([x, y]);
+    } else if (o?.elementClass === 3 && o.center?.X && typeof o.Radius === "function") {
+      const cx = o.center.X(), cy = o.center.Y(), r = o.Radius();
+      if (Number.isFinite(cx) && Number.isFinite(cy) && Number.isFinite(r)) {
+        circles.push({ cx, cy, r });
+      }
+    }
+  }
+  const safeAspect = Number.isFinite(aspect) && aspect > 0 ? aspect : 1;
+  return computeAutoFitBbox(points, circles, safeAspect);
+}
+function autoFitBoardToContent(board, aspect) {
+  const bbox = fittedBboxFromBoard(board, aspect);
+  if (!bbox) return;
+  const b = board;
+  try {
+    b.setBoundingBox?.(bbox);
+    if (typeof b.update === "function") b.update();
+    if (typeof b.fullUpdate === "function") b.fullUpdate();
+  } catch {
+  }
+}
+var init_autoFitBoard = __esm({
+  "src/stamps/geometry-2d/autoFitBoard.ts"() {
+    init_types();
+    init_autoFitBbox();
+  }
+});
+
 // src/stamps/geometry-2d/labelLayout.ts
 function radialLabelOffsets(points, R = 14) {
   const out = /* @__PURE__ */ new Map();
@@ -4074,8 +4317,9 @@ function containerDimsForBbox(bbox) {
   if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
     return { width: FALLBACK_W, height: FALLBACK_H };
   }
-  let width = w * PIXELS_PER_UNIT;
-  let height = h * PIXELS_PER_UNIT;
+  const pxPerUnit = DEFAULT_VIEW_PX / Math.max(w, h);
+  let width = w * pxPerUnit;
+  let height = h * pxPerUnit;
   const maxAxis = Math.max(width, height);
   if (maxAxis > MAX_DIM) {
     const ratio = MAX_DIM / maxAxis;
@@ -4090,31 +4334,6 @@ function containerDimsForBbox(bbox) {
   }
   return { width: Math.round(width), height: Math.round(height) };
 }
-function autoFitBboxFromBoard(board, aspect) {
-  const objs = board?.objectsList;
-  if (!Array.isArray(objs)) return;
-  const points = [];
-  const circles = [];
-  for (const o of objs) {
-    if (o?.elementClass === 1 && typeof o.X === "function" && typeof o.Y === "function") {
-      const x = o.X(), y = o.Y();
-      if (Number.isFinite(x) && Number.isFinite(y)) points.push([x, y]);
-    } else if (o?.elementClass === 3 && o.center?.X && typeof o.Radius === "function") {
-      const cx = o.center.X(), cy = o.center.Y(), r = o.Radius();
-      if (Number.isFinite(cx) && Number.isFinite(cy) && Number.isFinite(r)) {
-        circles.push({ cx, cy, r });
-      }
-    }
-  }
-  const bbox = computeAutoFitBbox(points, circles, aspect);
-  if (!bbox) return;
-  try {
-    board.setBoundingBox(bbox);
-    if (typeof board.update === "function") board.update();
-    if (typeof board.fullUpdate === "function") board.fullUpdate();
-  } catch {
-  }
-}
 function applyRadialLabelOffsets(board) {
   const objs = board?.objectsList;
   if (!Array.isArray(objs)) return;
@@ -4140,10 +4359,6 @@ function applyRadialLabelOffsets(board) {
   } catch {
   }
 }
-function isDefaultBbox(bbox) {
-  const d = DEFAULT_VIEW_2D.bbox;
-  return bbox.length === 4 && bbox[0] === d[0] && bbox[1] === d[1] && bbox[2] === d[2] && bbox[3] === d[3];
-}
 async function renderGeometrySvgFromState(jsonState) {
   const state = deserializeBoard(jsonState);
   const view = state.meta.domain === "2d" ? state.meta.view : DEFAULT_VIEW_2D;
@@ -4178,7 +4393,7 @@ async function renderGeometrySvgFromState(jsonState) {
       const store = createStore(state);
       const renderer = new JxgRenderer(store, board);
       if (shouldAutoFit) {
-        autoFitBboxFromBoard(board, dims.width / dims.height);
+        autoFitBoardToContent(board, dims.width / dims.height);
         applyRadialLabelOffsets(board);
       }
       return renderer;
@@ -4186,7 +4401,7 @@ async function renderGeometrySvgFromState(jsonState) {
   });
   return svgString;
 }
-var PIXELS_PER_UNIT, MIN_DIM, MAX_DIM, FALLBACK_W, FALLBACK_H;
+var DEFAULT_VIEW_PX, MIN_DIM, MAX_DIM, FALLBACK_W, FALLBACK_H;
 var init_render = __esm({
   "src/stamps/geometry-2d/render.ts"() {
     init_serialize();
@@ -4195,9 +4410,9 @@ var init_render = __esm({
     init_types();
     init_JxgRenderer();
     init_jxgOffscreenRender();
-    init_autoFitBbox();
+    init_autoFitBoard();
     init_labelLayout();
-    PIXELS_PER_UNIT = 20;
+    DEFAULT_VIEW_PX = 500;
     MIN_DIM = 100;
     MAX_DIM = 1200;
     FALLBACK_W = 400;
@@ -5757,41 +5972,48 @@ var init_icons = __esm({
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4", cy: "4", r: "1.7", fill: C_POINT })
       ] }),
       // ===== Nâng cao / kind chưa có icon =====
-      excenter: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 16 L12 5 L19 16 Z", stroke: "currentColor", strokeWidth: "1.3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "20", r: "3", fill: "none", stroke: C_CONSTRUCT, strokeWidth: "1.3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "20", r: "1.4", fill: C_CONSTRUCT })
+      // Hệ màu đồng bộ: XANH = input click sẵn, ĐỎ = output suy ra. Toạ độ tính để
+      // điểm nằm ĐÚNG trên đường tròn/cung/tiếp tuyến (không trôi nổi).
+      excenter: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "12,3 15,15 9,15", stroke: "currentColor", strokeWidth: "1.4", fill: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "15", x2: "8", y2: "18.9", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.6 1.6" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "15", y1: "15", x2: "16", y2: "18.9", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.6 1.6" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "18.9", r: "3.8", stroke: "currentColor", strokeWidth: "1.3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "3", r: "1.6", fill: C_POINT }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "15", r: "1.6", fill: C_POINT }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "15", r: "1.6", fill: C_POINT }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "18.9", r: "2.2", fill: C_CONSTRUCT })
       ] }),
-      tangencyPoint: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "12", r: "6.5", stroke: "currentColor", strokeWidth: "1.3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16.5", y1: "3", x2: "16.5", y2: "21", stroke: "currentColor", strokeWidth: "1.3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16.5", cy: "12", r: "2.2", fill: C_CONSTRUCT })
+      tangencyPoint: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9.5", cy: "12", r: "7", stroke: "currentColor", strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16.5", y1: "3.5", x2: "16.5", y2: "20.5", stroke: "currentColor", strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16.5", cy: "12", r: "2.3", fill: C_CONSTRUCT })
       ] }),
-      secondIntersection: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "12", r: "6.5", stroke: "currentColor", strokeWidth: "1.3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2", y1: "8", x2: "22", y2: "16", stroke: "currentColor", strokeWidth: "1.3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6.2", cy: "9.6", r: "1.6", fill: "currentColor" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15.8", cy: "14.4", r: "2.4", fill: C_CONSTRUCT })
+      secondIntersection: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "12", r: "6.5", stroke: "currentColor", strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "2.4", y1: "8.2", x2: "20.4", y2: "11.4", stroke: "currentColor", strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5.37", cy: "8.75", r: "1.8", fill: C_POINT }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "17.4", cy: "10.87", r: "2.4", fill: C_CONSTRUCT })
       ] }),
       arcMidpoint: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 17 A 9 9 0 0 1 20 17", stroke: "currentColor", strokeWidth: "1.4" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4", cy: "17", r: "1.6", fill: "currentColor" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "17", r: "1.6", fill: "currentColor" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "8.2", r: "2.4", fill: C_CONSTRUCT })
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 17 A 8.5 8.5 0 0 1 20 17", stroke: "currentColor", strokeWidth: "1.6", fill: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4", cy: "17", r: "1.8", fill: C_POINT }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "17", r: "1.8", fill: C_POINT }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "11.4", r: "2.3", fill: C_CONSTRUCT })
       ] }),
       circleIntersection: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7.6", r: "2", fill: C_CONSTRUCT }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16.4", r: "2", fill: C_CONSTRUCT })
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "6.8", r: "2", fill: C_CONSTRUCT }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "17.2", r: "2", fill: C_CONSTRUCT })
       ] }),
       tangentPointExt: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "14", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "3.5", cy: "12", r: "1.8", fill: C_POINT }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3.5", y1: "12", x2: "17.5", y2: "7.5", stroke: "currentColor", strokeWidth: "1.2" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3.5", y1: "12", x2: "17.5", y2: "16.5", stroke: "currentColor", strokeWidth: "1.2" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "17.5", cy: "7.5", r: "1.8", fill: C_CONSTRUCT }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "17.5", cy: "16.5", r: "1.8", fill: C_CONSTRUCT })
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "13", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "11.8", y2: "18.6", stroke: "currentColor", strokeWidth: "1.3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "11.8", y2: "5.4", stroke: "currentColor", strokeWidth: "1.3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "3", cy: "12", r: "2", fill: C_POINT }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9.4", cy: "16.8", r: "1.8", fill: C_CONSTRUCT }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9.4", cy: "7.2", r: "1.8", fill: C_CONSTRUCT })
       ] }),
       circleCR: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "7.5", stroke: "currentColor", strokeWidth: "1.3" }),
@@ -5802,9 +6024,11 @@ var init_icons = __esm({
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 19 L12 4 L21 19 Z", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }),
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "14", r: "4.2", fill: "none", stroke: C_CONSTRUCT, strokeWidth: "1.3" })
       ] }),
-      excircle: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9 L14 4 L18 13 Z", stroke: "currentColor", strokeWidth: "1.2" }),
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "17", r: "4.6", fill: "none", stroke: C_CONSTRUCT, strokeWidth: "1.3" })
+      excircle: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "12,3 15,15 9,15", stroke: "currentColor", strokeWidth: "1.4", fill: "none" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "15", x2: "8", y2: "18.9", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.6 1.6" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "15", y1: "15", x2: "16", y2: "18.9", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.6 1.6" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "18.9", r: "3.8", stroke: C_CONSTRUCT, strokeWidth: "1.5", fill: C_CONSTRUCT, fillOpacity: "0.12" })
       ] }),
       pointOn: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "7.5", stroke: "currentColor", strokeWidth: "1.3" }),
@@ -7814,11 +8038,11 @@ function buildObjectSnapshot(state, id, anchorScreen) {
   const obj = state.objects[id];
   if (!obj) return null;
   const k = obj.kind;
-  if (k !== "point" && k !== "line" && k !== "circle" && k !== "segment" && k !== "ray" && k !== "vector") {
+  if (k !== "point" && k !== "line" && k !== "circle" && k !== "segment" && k !== "ray" && k !== "vector" && k !== "intersection") {
     return null;
   }
   const a = obj.attrs;
-  const jKind = k === "point" ? "point" : k === "circle" ? "circle" : "line";
+  const jKind = k === "point" || k === "intersection" ? "point" : k === "circle" ? "circle" : "line";
   return {
     id,
     kind: jKind,
@@ -8226,6 +8450,7 @@ var init_MiniBoard = __esm({
     init_safeJsx();
     init_attachJxgWheelZoom();
     init_initJxgBoard();
+    init_autoFitBoard();
     init_snapshot();
     init_previewActions();
     init_buildHandle();
@@ -8465,6 +8690,11 @@ var init_MiniBoard = __esm({
           rendererRef.current = new JxgRenderer(store, board, {
             theme: paletteFor(isDarkRef.current)
           });
+          if (isDefaultBbox(initialView.bbox)) {
+            const el = containerRef.current;
+            const aspect = el && el.clientHeight > 0 ? el.clientWidth / el.clientHeight : 1;
+            safeJsx("MiniBoard.autoFit", () => autoFitBoardToContent(board, aspect));
+          }
           if (containerRef.current) {
             wheelCleanup = attachJxgWheelZoom(containerRef.current, board, "MiniBoard.2d");
           }
@@ -9262,6 +9492,7 @@ function useAiFigure(generator) {
   const [prompt, setPrompt] = React19.useState("");
   const [isLoading, setIsLoading] = React19.useState(false);
   const [error, setError] = React19.useState(null);
+  const [notice, setNotice] = React19.useState(null);
   const [tokens, setTokens] = React19.useState(0);
   const abortRef = React19.useRef(null);
   const requestIdRef = React19.useRef(0);
@@ -9282,6 +9513,7 @@ function useAiFigure(generator) {
     abortRef.current = controller;
     setIsLoading(true);
     setError(null);
+    setNotice(null);
     setTokens(0);
     try {
       const generated = await generator(problem, {
@@ -9295,6 +9527,7 @@ function useAiFigure(generator) {
         setError(generated.message);
         return null;
       }
+      if (generated.partial) setNotice(generated.partial.message);
       return generated.state;
     } catch (caught) {
       if (controller.signal.aborted || caught instanceof DOMException && caught.name === "AbortError") {
@@ -9321,6 +9554,7 @@ function useAiFigure(generator) {
     setPrompt,
     isLoading,
     error,
+    notice,
     submit,
     cancel,
     tokens
@@ -9331,12 +9565,207 @@ var init_useAiFigure = __esm({
     "use client";
   }
 });
+
+// src/stamps/geometry-2d/ai/vision/tesseract.ts
+async function runTesseractOcr(image, opts = {}) {
+  if (opts.signal?.aborted) {
+    const err = new Error("Tesseract OCR aborted");
+    err.name = "AbortError";
+    throw err;
+  }
+  const { createWorker } = await import('tesseract.js');
+  const lang = opts.lang ?? DEFAULT_LANG;
+  const worker = await createWorker(lang);
+  try {
+    const dataUrl = `data:${image.mediaType};base64,${image.base64}`;
+    const { data } = await worker.recognize(dataUrl);
+    return { text: data.text, confidence: data.confidence };
+  } finally {
+    await worker.terminate();
+  }
+}
+var DEFAULT_LANG;
+var init_tesseract = __esm({
+  "src/stamps/geometry-2d/ai/vision/tesseract.ts"() {
+    DEFAULT_LANG = "vie+eng";
+  }
+});
+
+// src/stamps/geometry-2d/ai/vision/extractProblem.ts
+async function extractProblemFromImage(image, opts = {}) {
+  let raw;
+  try {
+    raw = await runTesseractOcr(image, {
+      ...opts.tesseractLang ? { lang: opts.tesseractLang } : {},
+      ...opts.signal ? { signal: opts.signal } : {}
+    });
+  } catch (e) {
+    const err = e;
+    return {
+      ok: false,
+      reason: "unreadable",
+      message: "Tesseract OCR fail: " + (err.message ?? "?")
+    };
+  }
+  const text = postProcess(raw.text);
+  if (text.length === 0) {
+    return { ok: false, reason: "empty", message: "Tesseract kh\xF4ng tr\xEDch \u0111\u01B0\u1EE3c text." };
+  }
+  const tooShort = text.length < MIN_HIGH_CONFIDENCE_CHARS;
+  const lowConf = raw.confidence < TESSERACT_HIGH_CONFIDENCE_THRESHOLD;
+  const confidence = tooShort || lowConf ? "low" : "high";
+  return {
+    ok: true,
+    text,
+    confidence,
+    usage: { inputTokens: 0, outputTokens: 0 }
+  };
+}
+function postProcess(raw) {
+  let t = raw.trim();
+  t = t.replace(/\*\*(.+?)\*\*/g, "$1");
+  t = t.replace(/\*(.+?)\*/g, "$1");
+  t = t.replace(/_(.+?)_/g, "$1");
+  t = t.replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, "$1");
+  t = t.replace(/\s+/g, " ").trim();
+  t = t.normalize("NFC");
+  if (t.length > MAX_TEXT_CHARS) t = t.slice(0, MAX_TEXT_CHARS);
+  return t;
+}
+var MIN_HIGH_CONFIDENCE_CHARS, MAX_TEXT_CHARS, TESSERACT_HIGH_CONFIDENCE_THRESHOLD;
+var init_extractProblem = __esm({
+  "src/stamps/geometry-2d/ai/vision/extractProblem.ts"() {
+    init_tesseract();
+    MIN_HIGH_CONFIDENCE_CHARS = 10;
+    MAX_TEXT_CHARS = 2e3;
+    TESSERACT_HIGH_CONFIDENCE_THRESHOLD = 70;
+  }
+});
+
+// src/stamps/geometry-2d/ai/handleExtractProblem.ts
+async function handleExtractProblem(image, opts = {}) {
+  try {
+    const r = await extractProblemFromImage(image, opts);
+    if (r.ok) {
+      if (r.confidence === "low") {
+        return {
+          kind: "low-confidence",
+          text: r.text,
+          warning: "OCR c\xF3 th\u1EC3 kh\xF4ng ch\xEDnh x\xE1c, ki\u1EC3m tra tr\u01B0\u1EDBc khi v\u1EBD.",
+          usage: r.usage
+        };
+      }
+      return { kind: "success", text: r.text, usage: r.usage };
+    }
+    if (r.reason === "not-math") {
+      return { kind: "refused", reason: "not-math", message: r.message };
+    }
+    if (r.reason === "unsupported") {
+      return { kind: "error", code: "unsupported", message: r.message };
+    }
+    if (r.reason === "unreadable") {
+      return { kind: "error", code: "network", message: r.message };
+    }
+    return { kind: "error", code: "empty", message: r.message };
+  } catch (e) {
+    return {
+      kind: "error",
+      code: "unexpected",
+      message: e instanceof Error ? e.message : String(e)
+    };
+  }
+}
+var init_handleExtractProblem = __esm({
+  "src/stamps/geometry-2d/ai/handleExtractProblem.ts"() {
+    init_extractProblem();
+  }
+});
+
+// src/stamps/geometry-2d/ai/vision/preprocess.ts
+function inferMediaType(file) {
+  const t = file.type.toLowerCase();
+  if (ALLOWED_TYPES.includes(t)) return t;
+  return null;
+}
+function validateFile(file) {
+  const mt = inferMediaType(file);
+  if (mt == null) {
+    return {
+      ok: false,
+      code: "invalid-format",
+      message: "Ch\u1EC9 h\u1ED7 tr\u1EE3 PNG, JPEG, WEBP."
+    };
+  }
+  if (file.size > MAX_RAW_BYTES) {
+    return {
+      ok: false,
+      code: "too-large",
+      message: `\u1EA2nh qu\xE1 l\u1EDBn (> ${Math.round(MAX_RAW_BYTES / 1024 / 1024)} MB). Crop ho\u1EB7c resize tr\u01B0\u1EDBc.`
+    };
+  }
+  return { ok: true, mediaType: mt };
+}
+async function fileToImagePart(file) {
+  const v = validateFile(file);
+  if (!v.ok) throw new Error(v.message);
+  const bitmap = await createImageBitmap(file);
+  const { width, height } = bitmap;
+  const maxEdge = Math.max(width, height);
+  const scale3 = maxEdge > MAX_EDGE_PX ? MAX_EDGE_PX / maxEdge : 1;
+  const targetW = Math.round(width * scale3);
+  const targetH = Math.round(height * scale3);
+  const canvas = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(targetW, targetH) : Object.assign(document.createElement("canvas"), { width: targetW, height: targetH });
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Kh\xF4ng t\u1EA1o \u0111\u01B0\u1EE3c canvas 2D context");
+  ctx.drawImage(bitmap, 0, 0, targetW, targetH);
+  bitmap.close();
+  let outputType = v.mediaType === "image/png" ? "image/png" : "image/jpeg";
+  let finalBlob = await canvasToBlob(canvas, outputType, 0.92);
+  if (finalBlob.size > MAX_ENCODED_BYTES) {
+    outputType = "image/jpeg";
+    finalBlob = await canvasToBlob(canvas, "image/jpeg", 0.7);
+  }
+  const base64 = await blobToBase64(finalBlob);
+  return { mediaType: outputType, base64 };
+}
+async function canvasToBlob(canvas, type, quality) {
+  if ("convertToBlob" in canvas) {
+    return canvas.convertToBlob({ type, quality });
+  }
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (b) => b ? resolve(b) : reject(new Error("Canvas encode fail")),
+      type,
+      quality
+    );
+  });
+}
+async function blobToBase64(blob) {
+  const buf = await blob.arrayBuffer();
+  let binary = "";
+  const bytes = new Uint8Array(buf);
+  const chunk = 32768;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+  }
+  return typeof btoa === "function" ? btoa(binary) : Buffer.from(binary, "binary").toString("base64");
+}
+var MAX_EDGE_PX, MAX_RAW_BYTES, MAX_ENCODED_BYTES, ALLOWED_TYPES;
+var init_preprocess = __esm({
+  "src/stamps/geometry-2d/ai/vision/preprocess.ts"() {
+    MAX_EDGE_PX = 2048;
+    MAX_RAW_BYTES = 10 * 1024 * 1024;
+    MAX_ENCODED_BYTES = 3 * 1024 * 1024;
+    ALLOWED_TYPES = ["image/png", "image/jpeg", "image/webp"];
+  }
+});
 function AiFigurePrompt({ generator, onGenerated }) {
   const {
     prompt,
     setPrompt,
     isLoading,
     error,
+    notice,
     submit,
     cancel,
     tokens
@@ -9350,20 +9779,136 @@ function AiFigurePrompt({ generator, onGenerated }) {
     const id = setInterval(() => setElapsed((s) => s + 1), 1e3);
     return () => clearInterval(id);
   }, [isLoading]);
+  const [noticeDismissed, setNoticeDismissed] = React19.useState(false);
+  React19.useEffect(() => {
+    setNoticeDismissed(false);
+  }, [notice]);
+  const [image, setImage] = React19.useState(null);
+  const [ocrLoading, setOcrLoading] = React19.useState(false);
+  const [ocrError, setOcrError] = React19.useState(null);
+  const [ocrWarning, setOcrWarning] = React19.useState(null);
+  const [isDragOver, setIsDragOver] = React19.useState(false);
+  const fileInputRef = React19.useRef(null);
   const textareaRef = React19.useRef(null);
+  const imagePreview = image ? `data:${image.mediaType};base64,${image.base64}` : null;
+  React19.useEffect(() => {
+    setOcrError(null);
+    setOcrWarning(null);
+  }, [image]);
+  const handleFile = React19.useCallback(
+    async (file) => {
+      if (isLoading || ocrLoading) return;
+      const v = validateFile(file);
+      if (!v.ok) {
+        setOcrError(v.message);
+        return;
+      }
+      try {
+        const part = await fileToImagePart(file);
+        setImage(part);
+      } catch (e) {
+        setOcrError(e instanceof Error ? e.message : "Kh\xF4ng decode \u0111\u01B0\u1EE3c \u1EA3nh");
+      }
+    },
+    [isLoading, ocrLoading]
+  );
+  const handleFileInput = React19.useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (file) void handleFile(file);
+      e.target.value = "";
+    },
+    [handleFile]
+  );
+  const handlePaste = React19.useCallback(
+    (e) => {
+      const item = Array.from(e.clipboardData.items).find(
+        (it) => it.kind === "file" && it.type.startsWith("image/")
+      );
+      if (!item) return;
+      const file = item.getAsFile();
+      if (!file) return;
+      e.preventDefault();
+      void handleFile(file);
+    },
+    [handleFile]
+  );
+  const handleDrop = React19.useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      const file = Array.from(e.dataTransfer.files).find(
+        (f) => f.type.startsWith("image/")
+      );
+      if (file) void handleFile(file);
+    },
+    [handleFile]
+  );
+  const runOcr = React19.useCallback(async () => {
+    if (!image) return;
+    setOcrLoading(true);
+    setOcrError(null);
+    setOcrWarning(null);
+    try {
+      const r = await handleExtractProblem(image);
+      if (r.kind === "success" || r.kind === "low-confidence") {
+        setPrompt(r.text);
+        if (r.kind === "low-confidence") setOcrWarning(r.warning);
+        requestAnimationFrame(() => textareaRef.current?.focus());
+      } else {
+        setOcrError(r.message);
+      }
+    } finally {
+      setOcrLoading(false);
+    }
+  }, [image, setPrompt]);
   const handleSendClick = React19.useCallback(async () => {
+    if (image && !prompt.trim() && !ocrLoading) {
+      await runOcr();
+      return;
+    }
     const generated = await submit();
     if (generated) onGenerated(generated);
-  }, [submit, onGenerated]);
+  }, [image, prompt, ocrLoading, runOcr, submit, onGenerated]);
   const promptEmpty = !prompt.trim();
-  const sendDisabled = promptEmpty || isLoading;
+  const willOcr = image != null && promptEmpty;
+  const sendDisabled = !image && promptEmpty || ocrLoading || isLoading && !willOcr;
+  const placeholder = willOcr ? "B\u1EA5m g\u1EEDi \u0111\u1EC3 \u0111\u1ECDc \u0111\u1EC1 t\u1EEB \u1EA3nh \u2014 ho\u1EB7c t\u1EF1 g\xF5 \u1EDF \u0111\xE2y\u2026" : "M\xF4 t\u1EA3 \u0111\u1EC1 b\xE0i c\u1EA7n d\u1EF1ng \u2014 ho\u1EB7c d\xE1n/\u0111\xEDnh \u1EA3nh \u0111\u1EC1 (Ctrl+V).";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-slate-200 bg-slate-50 px-3 py-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium tracking-wide text-slate-600", children: "D\u1EF1ng h\xECnh b\u1EB1ng AI" }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "group relative flex flex-col rounded-2xl bg-white shadow-sm transition-all duration-150 ring-1 ring-slate-200 focus-within:ring-2 focus-within:ring-emerald-400/70 focus-within:shadow-md",
+        onDragOver: (e) => {
+          e.preventDefault();
+          setIsDragOver(true);
+        },
+        onDragLeave: () => setIsDragOver(false),
+        onDrop: handleDrop,
+        onPaste: handlePaste,
+        className: "group relative flex flex-col rounded-2xl bg-white shadow-sm transition-all duration-150 ring-1 ring-slate-200 focus-within:ring-2 focus-within:ring-emerald-400/70 focus-within:shadow-md " + (isDragOver ? "ring-2 ring-emerald-500 bg-emerald-50/40" : ""),
         children: [
+          image && imagePreview && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 px-3 pt-2.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/chip relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: imagePreview,
+                alt: "\u1EA2nh \u0111\u1EC1 b\xE0i",
+                className: "max-h-48 max-w-full h-auto w-auto rounded-lg border border-slate-200 shadow-sm"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setImage(null),
+                disabled: ocrLoading || isLoading,
+                "aria-label": "Xo\xE1 \u1EA3nh",
+                className: "absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-slate-900/85 text-[11px] font-medium text-white shadow ring-2 ring-white transition hover:bg-slate-900 disabled:opacity-50",
+                children: "\xD7"
+              }
+            )
+          ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "textarea",
             {
@@ -9381,48 +9926,111 @@ function AiFigurePrompt({ generator, onGenerated }) {
               },
               disabled: isLoading,
               rows: 2,
-              placeholder: "M\xF4 t\u1EA3 \u0111\u1EC1 b\xE0i c\u1EA7n d\u1EF1ng.",
+              placeholder,
               className: "block w-full resize-none rounded-2xl bg-transparent px-3.5 pt-2.5 pb-1 text-sm leading-relaxed text-slate-800 placeholder:text-slate-400 outline-none disabled:opacity-60 field-sizing-content max-h-44"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-2 px-2 pb-2 pt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] tabular-nums text-slate-500", children: tokens > 0 ? `${tokens}tok \xB7 ${elapsed}s` : `${elapsed}s` }),
-            isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: cancel,
-                "aria-label": "Hu\u1EF7 d\u1EF1ng h\xECnh AI",
-                "data-testid": "geometry-ai-cancel",
-                title: `\u0110ang d\u1EF1ng\u2026 ${elapsed}s \u2014 b\u1EA5m \u0111\u1EC3 hu\u1EF7`,
-                className: "flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-white shadow-sm transition hover:scale-105 hover:bg-amber-600 active:scale-95",
-                children: /* @__PURE__ */ jsxRuntime.jsx(StopIcon, { className: "h-3.5 w-3.5" })
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => void handleSendClick(),
-                disabled: sendDisabled,
-                "aria-label": "D\u1EF1ng b\u1EB1ng AI",
-                title: "D\u1EF1ng b\u1EB1ng AI (Ctrl/\u2318+Enter)",
-                "data-testid": "geometry-ai-submit",
-                className: "flex h-8 w-8 items-center justify-center rounded-full bg-emerald-600 text-white shadow-sm transition hover:scale-105 hover:bg-emerald-700 active:scale-95 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:hover:scale-100",
-                children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, { className: "h-[18px] w-[18px]" })
-              }
-            )
-          ] }) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-2 pb-2 pt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => fileInputRef.current?.click(),
+                  disabled: isLoading || ocrLoading,
+                  "aria-label": "\u0110\xEDnh \u1EA3nh \u0111\u1EC1 b\xE0i",
+                  title: "\u0110\xEDnh \u1EA3nh (c\u0169ng c\xF3 th\u1EC3 d\xE1n b\u1EB1ng Ctrl+V ho\u1EB7c k\xE9o th\u1EA3)",
+                  className: "flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-emerald-700 disabled:opacity-40",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(PaperclipIcon, { className: "h-[18px] w-[18px]" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: "image/png,image/jpeg,image/webp",
+                  className: "sr-only",
+                  onChange: handleFileInput,
+                  disabled: isLoading || ocrLoading,
+                  "aria-label": "Ch\u1ECDn \u1EA3nh \u0111\u1EC1 b\xE0i"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              (isLoading || ocrLoading) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] tabular-nums text-slate-500", children: ocrLoading ? "\u0111\u1ECDc \u1EA3nh\u2026" : tokens > 0 ? `${tokens}tok \xB7 ${elapsed}s` : `${elapsed}s` }),
+              isLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: cancel,
+                  "aria-label": "Hu\u1EF7 d\u1EF1ng h\xECnh AI",
+                  "data-testid": "geometry-ai-cancel",
+                  title: `\u0110ang d\u1EF1ng\u2026 ${elapsed}s \u2014 b\u1EA5m \u0111\u1EC3 hu\u1EF7`,
+                  className: "flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-white shadow-sm transition hover:scale-105 hover:bg-amber-600 active:scale-95",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(StopIcon, { className: "h-3.5 w-3.5" })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => void handleSendClick(),
+                  disabled: sendDisabled,
+                  "aria-label": willOcr ? "\u0110\u1ECDc \u0111\u1EC1 t\u1EEB \u1EA3nh" : "D\u1EF1ng b\u1EB1ng AI",
+                  title: willOcr ? "\u0110\u1ECDc \u0111\u1EC1 t\u1EEB \u1EA3nh (s\u1EBD \u0111i\u1EC1n v\xE0o \xF4 chat)" : "D\u1EF1ng b\u1EB1ng AI (Ctrl/\u2318+Enter)",
+                  "data-testid": willOcr ? "geometry-ai-ocr" : "geometry-ai-submit",
+                  className: "flex h-8 w-8 items-center justify-center rounded-full bg-emerald-600 text-white shadow-sm transition hover:scale-105 hover:bg-emerald-700 active:scale-95 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:hover:scale-100",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, { className: "h-[18px] w-[18px]" })
+                }
+              )
+            ] })
+          ] }),
+          isDragOver && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center rounded-2xl bg-emerald-50/60 text-xs font-medium text-emerald-700", children: "Th\u1EA3 \u1EA3nh v\xE0o \u0111\xE2y" })
         ]
       }
     ),
-    error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: error })
+    ocrWarning && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "mt-1 px-1 text-xs text-amber-700",
+        "data-testid": "geometry-ai-ocr-warning",
+        children: ocrWarning
+      }
+    ),
+    ocrError && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: ocrError }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: error }),
+    notice && !noticeDismissed && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "status",
+        "data-testid": "geometry-ai-partial-notice",
+        className: "relative mt-2 whitespace-pre-wrap rounded-lg border border-amber-200 bg-amber-50 py-2 pl-3 pr-8 text-xs leading-relaxed text-amber-800",
+        children: [
+          notice,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setNoticeDismissed(true),
+              "aria-label": "\u0110\xF3ng th\xF4ng b\xE1o",
+              title: "\u0110\xF3ng th\xF4ng b\xE1o",
+              "data-testid": "geometry-ai-partial-dismiss",
+              className: "absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded text-amber-500 transition hover:bg-amber-100 hover:text-amber-800",
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
-var ArrowUpIcon, StopIcon;
+var ArrowUpIcon, StopIcon, PaperclipIcon;
 var init_AiFigurePrompt = __esm({
   "src/stamps/geometry-2d/editor/AiFigurePrompt.tsx"() {
     "use client";
     init_useAiFigure();
+    init_handleExtractProblem();
+    init_preprocess();
     ArrowUpIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
       {
@@ -9441,6 +10049,20 @@ var init_AiFigurePrompt = __esm({
       }
     );
     StopIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) });
+    PaperclipIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.75,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": true,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+      }
+    );
   }
 });
 
@@ -10024,11 +10646,17 @@ async function insertStampImage(api, opts) {
   const elements = api.getSceneElements();
   const editingId = opts.editingElementId ?? null;
   if (editingId) {
+    const old = opts.preserveExistingSize ? elements.find((e) => e.id === editingId) : void 0;
+    const oldLongest = old ? Math.max(old.width ?? 0, old.height ?? 0) : 0;
+    const newLongest = Math.max(width, height);
+    const scale3 = oldLongest > 0 && newLongest > 0 ? oldLongest / newLongest : 1;
+    const w = width * scale3;
+    const h = height * scale3;
     const updated = elements.map(
-      (e) => e.id === editingId ? { ...e, fileId, customData, width, height } : e
+      (e) => e.id === editingId ? { ...e, fileId, customData, width: w, height: h } : e
     );
     api.updateScene({ elements: updated, appState: clearAppStateAfterInsert() });
-    return { fileId, width, height, elementId: editingId };
+    return { fileId, width: w, height: h, elementId: editingId };
   }
   const newElement = buildStampImageElement(
     api,
@@ -10182,8 +10810,11 @@ function serializePoint(obj, state) {
       };
     }
     case "arcMidpoint": {
-      const refs = resolveRefs([c.circle, c.a, c.b, c.notContaining], state);
-      if (!refs) return fail("unresolved-ref", `${c.circle},${c.a},${c.b},${c.notContaining}`);
+      const containment = c.containing ?? c.notContaining;
+      const baseRefs = [c.circle, c.a, c.b];
+      if (containment) baseRefs.push(containment);
+      const refs = resolveRefs(baseRefs, state);
+      if (!refs) return fail("unresolved-ref", baseRefs.join(","));
       return {
         ok: true,
         entity: {
@@ -10192,7 +10823,7 @@ function serializePoint(obj, state) {
           circle: refs[0],
           a: refs[1],
           b: refs[2],
-          notContaining: refs[3]
+          ...c.containing ? { containing: refs[3] } : c.notContaining ? { notContaining: refs[3] } : {}
         }
       };
     }
@@ -10236,6 +10867,7 @@ function serializePoint(obj, state) {
     case "onPerpendicular":
     case "onPerpBisector":
     case "onCircleAroundPoint":
+    case "mixtilinearPoint":
       return fail("unsupported-constraint", c.kind);
     default: {
       return fail("unsupported-constraint");
@@ -10538,9 +11170,11 @@ function describeEntity(e) {
       return `${e.name} = \u0111\u01B0\u1EDDng tr\xF2n b\xE0ng ti\u1EBFp ${e.vertices.join("")} \u0111\u1ED1i di\u1EC7n ${e.opposite}`;
     // Cụm A
     case "arcMidpoint":
-      return `${e.name} = trung \u0111i\u1EC3m cung ${e.a}${e.b} (kh\xF4ng ch\u1EE9a ${e.notContaining}) tr\xEAn ${e.circle}`;
+      return `${e.name} = trung \u0111i\u1EC3m cung ${e.a}${e.b}${e.containing || e.notContaining ? ` (${e.containing ? "ch\u1EE9a" : "kh\xF4ng ch\u1EE9a"} ${e.containing ?? e.notContaining})` : ""} tr\xEAn ${e.circle}`;
     case "excenter":
       return `${e.name} = t\xE2m b\xE0ng ti\u1EBFp ${e.vertices.join("")} \u0111\u1ED1i di\u1EC7n ${e.opposite}`;
+    case "mixtilinearPoint":
+      return `${e.name} = ${e.which === "center" ? "t\xE2m" : "ti\u1EBFp \u0111i\u1EC3m"} mixtilinear ${e.vertices.join("")}`;
     case "reflectPoint":
       return `${e.name} = \u0111\u1ED1i x\u1EE9ng ${e.of} qua \u0111i\u1EC3m ${e.through}`;
     case "reflectLine":
@@ -10551,6 +11185,8 @@ function describeEntity(e) {
       const distStr = d.kind === "circleRadius" ? `r(${d.circle})` : d.kind === "segmentLength" ? `|${d.p1}${d.p2}|` : `${d.value}`;
       return `${e.name} = \u0111i\u1EC3m tr\xEAn tia ${e.from}${e.through} c\xE1ch ${e.through} m\u1ED9t kho\u1EA3ng ${distStr}`;
     }
+    case "onPerpBisector":
+      return `${e.name} = \u0111i\u1EC3m tr\xEAn trung tr\u1EF1c ${e.p1}${e.p2}`;
     default: {
       return "";
     }
@@ -10673,7 +11309,8 @@ var init_host = __esm({
                   version: 1,
                   jsonState
                 }),
-                editingElementId: editingElement?.id ?? null
+                editingElementId: editingElement?.id ?? null,
+                preserveExistingSize: true
               });
             } catch (err) {
               console.error("Geometry insert failed:", err);
@@ -14216,7 +14853,8 @@ var init_host3 = __esm({
                 version: 2,
                 jsonState
               }),
-              editingElementId: editingElement?.id ?? null
+              editingElementId: editingElement?.id ?? null,
+              preserveExistingSize: true
             });
             onClose();
           },
@@ -15519,7 +16157,8 @@ var init_host4 = __esm({
                   version: 2,
                   jsonState
                 }),
-                editingElementId: editingElement?.id ?? null
+                editingElementId: editingElement?.id ?? null,
+                preserveExistingSize: true
               });
             } catch (err) {
               console.error("Graph2D insert failed:", err);
@@ -17944,6 +18583,9 @@ function Whiteboard({
   ] });
 }
 
+// src/index.ts
+init_handleExtractProblem();
+
 exports.ALL_STAMPS = ALL_STAMPS;
 exports.DEFAULT_STAMPS = DEFAULT_STAMPS;
 exports.EXPERIMENTAL_STAMPS = EXPERIMENTAL_STAMPS;
@@ -17957,6 +18599,7 @@ exports.findStampForCustomData = findStampForCustomData;
 exports.geometry3dStamp = geometry3dStamp;
 exports.geometryStamp = geometryStamp;
 exports.graph2dStamp = graph2dStamp;
+exports.handleExtractProblem = handleExtractProblem;
 exports.insertPdfPages = insertPdfPages;
 exports.insertRasterizedPagesIntoScene = insertRasterizedPagesIntoScene;
 exports.isStampElement = isStampElement;