@xom11/whiteboard 0.30.0 → 0.32.0

package/dist/geometry-2d.js

@@ -73,16 +73,16 @@ var init_types = __esm({
 });
 
 // src/core/scene/registry.ts
-function registerKind(def22) {
-  if (registry.has(def22.type)) {
-    console.warn(`[scene] kind "${def22.type}" \u0111\xE3 \u0111\u01B0\u1EE3c \u0111\u0103ng k\xFD \u2014 ghi \u0111\xE8 \u0111\u1ECBnh ngh\u0129a c\u0169`);
+function registerKind(def24) {
+  if (registry.has(def24.type)) {
+    console.warn(`[scene] kind "${def24.type}" \u0111\xE3 \u0111\u01B0\u1EE3c \u0111\u0103ng k\xFD \u2014 ghi \u0111\xE8 \u0111\u1ECBnh ngh\u0129a c\u0169`);
   }
-  registry.set(def22.type, def22);
+  registry.set(def24.type, def24);
 }
 function getKind(type) {
-  const def22 = registry.get(type);
-  if (!def22) throw new Error(`[scene] unknown kind: ${type}`);
-  return def22;
+  const def24 = registry.get(type);
+  if (!def24) throw new Error(`[scene] unknown kind: ${type}`);
+  return def24;
 }
 var registry;
 var init_registry = __esm({
@@ -168,8 +168,8 @@ function reduce(draft, action) {
       return;
     }
     case "TRANSACTION": {
-      for (const sub of action.payload.actions) {
-        reduce(draft, sub);
+      for (const sub2 of action.payload.actions) {
+        reduce(draft, sub2);
       }
       return;
     }
@@ -382,8 +382,36 @@ function constraintRefs(c) {
       return [c.polygonId];
     case "onSphere":
       return [c.sphereId];
-    default:
+    case "midpoint":
+      return [c.p1, c.p2];
+    case "centroid":
+      return [...c.vertices];
+    case "intersectionLines":
+      return [c.a1, c.b1, c.a2, c.b2];
+    case "intersectionLinePlane":
+      return [c.a, c.b, c.plane];
+    case "perpFootLine":
+      return [c.from, c.a, c.b];
+    case "perpFootPlane":
+      return [c.from, c.plane];
+    case "circumsphereCenter":
+      return [...c.vertices];
+    case "pyramidInsphereCenter":
+      return [c.apex, ...c.vertices];
+    case "faceCircumcenter":
+      return [...c.vertices];
+    case "pointAboveFace":
+      return [c.base, c.apex, ...c.vertices];
+    // Kind KHÔNG có ref scene-object (toạ độ literal): liệt kê TƯỜNG MINH để
+    // exhaustive never-guard bên dưới buộc khai báo khi thêm constraint kind mới
+    // (mô phỏng constraintRefs2D — quên case = cascade-delete/deps sai âm thầm).
+    case "free":
+    case "onGround":
+    case "onAxis":
+      return [];
+    default: {
       return [];
+    }
   }
 }
 var init_d_constraint = __esm({
@@ -391,12 +419,359 @@ var init_d_constraint = __esm({
   }
 });
 
+// src/core/scene/kinds/constraint3d-math.ts
+function sub(a, b) {
+  return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+}
+function add(a, b) {
+  return [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
+}
+function scale(a, k) {
+  return [a[0] * k, a[1] * k, a[2] * k];
+}
+function dot(a, b) {
+  return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+}
+function cross(a, b) {
+  return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+}
+function norm(a) {
+  return Math.sqrt(dot(a, a));
+}
+function normalize(a) {
+  const n = norm(a);
+  return n === 0 ? a : scale(a, 1 / n);
+}
+function getPointWorld(id, state) {
+  const obj = state.objects[id];
+  if (!obj || obj.kind !== "point3d") {
+    throw new Error(`constraintMath: point ${id} not found`);
+  }
+  const attrs = obj.attrs;
+  return constraintToWorld(attrs.constraint, state);
+}
+function getPlaneBasis(planeObj, state) {
+  const a = planeObj.attrs;
+  let p1, p2, p3;
+  if (a.construction) {
+    const r = planeConstructionWorld(a.construction, state);
+    p1 = r.p1;
+    p2 = r.p2;
+    p3 = r.p3;
+  } else {
+    p1 = getPointWorld(a.p1, state);
+    p2 = getPointWorld(a.p2, state);
+    p3 = getPointWorld(a.p3, state);
+  }
+  const basis1 = sub(p2, p1);
+  const tmp = sub(p3, p1);
+  const normal = normalize(cross(basis1, tmp));
+  const basis2 = cross(normal, basis1);
+  return { origin: p1, basis1, basis2, normal };
+}
+function orthoBasisFromNormal(n) {
+  const seed = Math.abs(n[0]) < 0.9 ? [1, 0, 0] : [0, 1, 0];
+  const basis1 = normalize(cross(n, seed));
+  const basis2 = cross(n, basis1);
+  return { basis1, basis2 };
+}
+function planeConstructionWorld(c, state) {
+  if (_recDepth >= MAX_REC_DEPTH) throw new Error("planeConstructionWorld: \u0111\u1EC7 quy qu\xE1 s\xE2u \u2014 chu tr\xECnh tham chi\u1EBFu m\u1EB7t?");
+  _recDepth++;
+  try {
+    return planeConstructionWorldInner(c, state);
+  } finally {
+    _recDepth--;
+  }
+}
+function planeConstructionWorldInner(c, state) {
+  switch (c.kind) {
+    case "planeParallelThrough": {
+      const P = getPointWorld(c.point, state);
+      const ref = state.objects[c.refPlane];
+      if (!ref || ref.kind !== "plane3d") throw new Error("planeParallelThrough: m\u1EB7t tham chi\u1EBFu thi\u1EBFu");
+      const { basis1, basis2 } = getPlaneBasis(ref, state);
+      if (norm(basis1) < 1e-12 || norm(basis2) < 1e-12) {
+        return { p1: P, p2: add(P, [1, 0, 0]), p3: add(P, [0, 1, 0]) };
+      }
+      return { p1: P, p2: add(P, basis1), p3: add(P, basis2) };
+    }
+    case "planePerpToLine": {
+      const P = getPointWorld(c.point, state);
+      const dir = sub(getPointWorld(c.lineB, state), getPointWorld(c.lineA, state));
+      const dn = norm(dir);
+      if (dn < 1e-12) return { p1: P, p2: add(P, [1, 0, 0]), p3: add(P, [0, 1, 0]) };
+      const { basis1, basis2 } = orthoBasisFromNormal(scale(dir, 1 / dn));
+      return { p1: P, p2: add(P, basis1), p3: add(P, basis2) };
+    }
+    default: {
+      throw new Error("planeConstructionWorld: kind kh\xF4ng h\u1ED7 tr\u1EE3");
+    }
+  }
+}
+function lineDefiningPointIds(line) {
+  if (line.kind === "line3d" || line.kind === "segment3d") {
+    const a = line.attrs;
+    return a.p1 && a.p2 ? [a.p1, a.p2] : null;
+  }
+  if (line.kind === "ray3d") {
+    const a = line.attrs;
+    return [a.origin, a.through];
+  }
+  if (line.kind === "vector3d") {
+    const a = line.attrs;
+    return [a.from, a.to];
+  }
+  return null;
+}
+function lineEndpointsWorld(lineId, state, ctx) {
+  const line = state.objects[lineId];
+  if (!line) throw new Error(`${ctx}: \u0111\u01B0\u1EDDng ${lineId} kh\xF4ng t\u1ED3n t\u1EA1i`);
+  const ids = lineDefiningPointIds(line);
+  if (!ids) throw new Error(`${ctx}: kind ${line.kind} kh\xF4ng ph\u1EA3i \u0111\u01B0\u1EDDng`);
+  return { a: getPointWorld(ids[0], state), b: getPointWorld(ids[1], state) };
+}
+function lineLineClosestMidpoint(A, B, C, D) {
+  const u = sub(B, A), v = sub(D, C), w0 = sub(A, C);
+  const a = dot(u, u), b = dot(u, v), cc = dot(v, v), d = dot(u, w0), e = dot(v, w0);
+  const denom = a * cc - b * b;
+  if (Math.abs(denom) < 1e-12) return scale(add(A, C), 0.5);
+  const sc = (b * e - cc * d) / denom;
+  const tc = (a * e - b * d) / denom;
+  return scale(add(add(A, scale(u, sc)), add(C, scale(v, tc))), 0.5);
+}
+function planeOriginNormal(planeId, state, ctx) {
+  const plane = state.objects[planeId];
+  if (!plane || plane.kind !== "plane3d") throw new Error(`${ctx}: m\u1EB7t ph\u1EB3ng ${planeId} thi\u1EBFu`);
+  const { origin, normal } = getPlaneBasis(plane, state);
+  return { origin, normal };
+}
+function lineConstructionWorld(c, state) {
+  switch (c.kind) {
+    case "planePlaneIntersection": {
+      const P1 = planeOriginNormal(c.plane1, state, "planePlaneIntersection");
+      const P2 = planeOriginNormal(c.plane2, state, "planePlaneIntersection");
+      const d = cross(P1.normal, P2.normal);
+      const dd = dot(d, d);
+      if (dd < 1e-12) {
+        return { a: P1.origin, b: add(P1.origin, P2.normal) };
+      }
+      const c1 = dot(P1.normal, P1.origin);
+      const c2 = dot(P2.normal, P2.origin);
+      const p0 = scale(add(scale(cross(P2.normal, d), c1), scale(cross(d, P1.normal), c2)), 1 / dd);
+      return { a: p0, b: add(p0, d) };
+    }
+    case "lineParallelThrough": {
+      const P = getPointWorld(c.point, state);
+      const dir = sub(getPointWorld(c.dirB, state), getPointWorld(c.dirA, state));
+      if (norm(dir) < 1e-12) return { a: P, b: add(P, [1, 0, 0]) };
+      return { a: P, b: add(P, dir) };
+    }
+    case "linePerpToPlane": {
+      const P = getPointWorld(c.point, state);
+      const { normal } = planeOriginNormal(c.plane, state, "linePerpToPlane");
+      return { a: P, b: add(P, normal) };
+    }
+    default: {
+      throw new Error("lineConstructionWorld: kind kh\xF4ng h\u1ED7 tr\u1EE3");
+    }
+  }
+}
+function solve3(M, b) {
+  const det3 = (m) => m[0][0] * (m[1][1] * m[2][2] - m[1][2] * m[2][1]) - m[0][1] * (m[1][0] * m[2][2] - m[1][2] * m[2][0]) + m[0][2] * (m[1][0] * m[2][1] - m[1][1] * m[2][0]);
+  const det = det3(M);
+  if (Math.abs(det) < 1e-9) return null;
+  const colDet = (j) => {
+    const A = M.map((r) => r.slice());
+    for (let i = 0; i < 3; i++) A[i][j] = b[i];
+    return det3(A);
+  };
+  return [colDet(0) / det, colDet(1) / det, colDet(2) / det];
+}
+function constraintToWorld(c, state) {
+  if (_recDepth >= MAX_REC_DEPTH) throw new Error("constraintToWorld: \u0111\u1EC7 quy qu\xE1 s\xE2u \u2014 chu tr\xECnh tham chi\u1EBFu?");
+  _recDepth++;
+  try {
+    return constraintToWorldInner(c, state);
+  } finally {
+    _recDepth--;
+  }
+}
+function constraintToWorldInner(c, state) {
+  switch (c.kind) {
+    case "free":
+      return [c.x, c.y, c.z];
+    case "onGround":
+      return [c.x, c.y, 0];
+    case "onAxis": {
+      if (c.axis === "x") return [c.t, 0, 0];
+      if (c.axis === "y") return [0, c.t, 0];
+      return [0, 0, c.t];
+    }
+    case "onPlane": {
+      const plane = state.objects[c.planeId];
+      if (!plane || plane.kind !== "plane3d") throw new Error("onPlane: plane missing");
+      const { origin, basis1, basis2 } = getPlaneBasis(plane, state);
+      return add(add(origin, scale(basis1, c.u)), scale(basis2, c.v));
+    }
+    case "onLine": {
+      const { a, b } = lineEndpointsWorld(c.lineId, state, "onLine");
+      return add(a, scale(sub(b, a), c.t));
+    }
+    case "onPolygon": {
+      const pg = state.objects[c.polygonId];
+      if (!pg || pg.kind !== "polygon3d") throw new Error("onPolygon: parent missing");
+      const v = pg.attrs.vertices;
+      if (v.length < 3) throw new Error("onPolygon: < 3 vertices");
+      const p1 = getPointWorld(v[0], state);
+      const p2 = getPointWorld(v[1], state);
+      const p3 = getPointWorld(v[2], state);
+      const basis1 = sub(p2, p1);
+      const tmp = sub(p3, p1);
+      const normal = normalize(cross(basis1, tmp));
+      const basis2 = cross(normal, basis1);
+      return add(add(p1, scale(basis1, c.u)), scale(basis2, c.v));
+    }
+    case "onSphere": {
+      const sph = state.objects[c.sphereId];
+      if (!sph || sph.kind !== "sphere3d") throw new Error("onSphere: parent missing");
+      const a = sph.attrs;
+      const center = getPointWorld(a.center, state);
+      const surface = getPointWorld(a.surfacePoint, state);
+      const radius = norm(sub(surface, center));
+      const x = center[0] + radius * Math.sin(c.phi) * Math.cos(c.theta);
+      const y = center[1] + radius * Math.sin(c.phi) * Math.sin(c.theta);
+      const z = center[2] + radius * Math.cos(c.phi);
+      return [x, y, z];
+    }
+    // ───── Điểm phái sinh (v1) ─────
+    case "midpoint": {
+      const p1 = getPointWorld(c.p1, state);
+      const p2 = getPointWorld(c.p2, state);
+      return scale(add(p1, p2), 0.5);
+    }
+    case "centroid": {
+      const n = c.vertices.length;
+      if (n === 0) return [0, 0, 0];
+      let acc = [0, 0, 0];
+      for (const id of c.vertices) acc = add(acc, getPointWorld(id, state));
+      return scale(acc, 1 / n);
+    }
+    case "circumsphereCenter": {
+      const P = c.vertices.map((id) => getPointWorld(id, state));
+      if (P.length < 4) return P.length ? P[0] : [0, 0, 0];
+      const p0 = P[0];
+      const M = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
+      const rhs = [0, 0, 0];
+      for (let i = 1; i < P.length; i++) {
+        const r = [2 * (P[i][0] - p0[0]), 2 * (P[i][1] - p0[1]), 2 * (P[i][2] - p0[2])];
+        const bi = dot(P[i], P[i]) - dot(p0, p0);
+        for (let a = 0; a < 3; a++) {
+          for (let bcol = 0; bcol < 3; bcol++) M[a][bcol] += r[a] * r[bcol];
+          rhs[a] += r[a] * bi;
+        }
+      }
+      const sol = solve3(M, rhs);
+      if (sol) return sol;
+      let acc = [0, 0, 0];
+      for (const p of P) acc = add(acc, p);
+      return scale(acc, 1 / P.length);
+    }
+    case "pyramidInsphereCenter": {
+      const S = getPointWorld(c.apex, state);
+      const base = c.vertices.map((id) => getPointWorld(id, state));
+      const n = base.length;
+      if (n < 3) return S;
+      let G = [0, 0, 0];
+      for (const p of base) G = add(G, p);
+      G = scale(G, 1 / n);
+      let nb = normalize(cross(sub(base[1], base[0]), sub(base[2], base[0])));
+      if (dot(nb, sub(S, G)) < 0) nb = scale(nb, -1);
+      let m = normalize(cross(sub(base[0], S), sub(base[1], S)));
+      if (dot(m, sub(G, base[0])) < 0) m = scale(m, -1);
+      const denom = 1 - dot(m, nb);
+      const s = Math.abs(denom) < 1e-9 ? NaN : dot(m, sub(G, base[0])) / denom;
+      if (!Number.isFinite(s) || s <= 0) {
+        return scale(add(S, scale(G, n)), 1 / (n + 1));
+      }
+      return add(G, scale(nb, s));
+    }
+    case "faceCircumcenter": {
+      const P = c.vertices.map((id) => getPointWorld(id, state));
+      if (P.length < 3) return P.length ? P[0] : [0, 0, 0];
+      const [p0, p1, p2] = P;
+      const e1 = sub(p1, p0), e2 = sub(p2, p0);
+      const nrm = cross(e1, e2);
+      const M = [
+        [2 * e1[0], 2 * e1[1], 2 * e1[2]],
+        [2 * e2[0], 2 * e2[1], 2 * e2[2]],
+        [nrm[0], nrm[1], nrm[2]]
+      ];
+      const rhs = [dot(p1, p1) - dot(p0, p0), dot(p2, p2) - dot(p0, p0), dot(nrm, p0)];
+      const sol = solve3(M, rhs);
+      if (sol) return sol;
+      return scale(add(add(p0, p1), p2), 1 / 3);
+    }
+    case "pointAboveFace": {
+      const G = getPointWorld(c.base, state);
+      const P = c.vertices.map((id) => getPointWorld(id, state));
+      if (P.length < 3) return G;
+      let n = normalize(cross(sub(P[1], P[0]), sub(P[2], P[0])));
+      const S = getPointWorld(c.apex, state);
+      if (dot(n, sub(S, P[0])) < 0) n = scale(n, -1);
+      const h = dot(sub(S, P[0]), n);
+      if (!Number.isFinite(h) || h <= 1e-9) return G;
+      return add(G, scale(n, h));
+    }
+    case "intersectionLines": {
+      const A = getPointWorld(c.a1, state), B = getPointWorld(c.b1, state);
+      const C = getPointWorld(c.a2, state), D = getPointWorld(c.b2, state);
+      return lineLineClosestMidpoint(A, B, C, D);
+    }
+    case "intersectionLinePlane": {
+      const A = getPointWorld(c.a, state), B = getPointWorld(c.b, state);
+      const plane = state.objects[c.plane];
+      if (!plane || plane.kind !== "plane3d") throw new Error("intersectionLinePlane: m\u1EB7t ph\u1EB3ng thi\u1EBFu");
+      const { origin, normal } = getPlaneBasis(plane, state);
+      const dir = sub(B, A);
+      const dn = dot(dir, normal);
+      if (Math.abs(dn) < 1e-12) return A;
+      const t = dot(sub(origin, A), normal) / dn;
+      return add(A, scale(dir, t));
+    }
+    case "perpFootLine": {
+      const P = getPointWorld(c.from, state);
+      const A = getPointWorld(c.a, state), B = getPointWorld(c.b, state);
+      const u = sub(B, A);
+      const uu = dot(u, u);
+      const t = uu === 0 ? 0 : dot(sub(P, A), u) / uu;
+      return add(A, scale(u, t));
+    }
+    case "perpFootPlane": {
+      const P = getPointWorld(c.from, state);
+      const plane = state.objects[c.plane];
+      if (!plane || plane.kind !== "plane3d") throw new Error("perpFootPlane: m\u1EB7t ph\u1EB3ng thi\u1EBFu");
+      const { origin, normal } = getPlaneBasis(plane, state);
+      const dist2 = dot(sub(P, origin), normal);
+      return sub(P, scale(normal, dist2));
+    }
+  }
+}
+var MAX_REC_DEPTH, _recDepth;
+var init_constraint3d_math = __esm({
+  "src/core/scene/kinds/constraint3d-math.ts"() {
+    MAX_REC_DEPTH = 512;
+    _recDepth = 0;
+  }
+});
+
 // src/core/scene/kinds/point3d.ts
 var def;
 var init_point3d = __esm({
   "src/core/scene/kinds/point3d.ts"() {
     init_registry();
     init_d_constraint();
+    init_constraint3d_math();
     def = {
       type: "point3d",
       schemaVersion: 1,
@@ -434,6 +809,15 @@ var init_point3d = __esm({
         if (c.kind === "onLine") return `${obj.label} tr\xEAn \u0111\u01B0\u1EDDng ${c.lineId}`;
         if (c.kind === "onPolygon") return `${obj.label} tr\xEAn \u0111a gi\xE1c ${c.polygonId}`;
         if (c.kind === "onSphere") return `${obj.label} tr\xEAn m\u1EB7t c\u1EA7u ${c.sphereId}`;
+        if (c.kind === "midpoint") return `${obj.label} = trung \u0111i\u1EC3m ${c.p1}${c.p2}`;
+        if (c.kind === "centroid") return `${obj.label} = tr\u1ECDng t\xE2m ${c.vertices.join("")}`;
+        if (c.kind === "intersectionLines") return `${obj.label} = giao 2 \u0111\u01B0\u1EDDng (${c.a1}${c.b1}, ${c.a2}${c.b2})`;
+        if (c.kind === "intersectionLinePlane") return `${obj.label} = giao ${c.a}${c.b} \u2229 ${c.plane}`;
+        if (c.kind === "perpFootLine") return `${obj.label} = ch\xE2n \u22A5 t\u1EEB ${c.from} xu\u1ED1ng ${c.a}${c.b}`;
+        if (c.kind === "perpFootPlane") return `${obj.label} = ch\xE2n \u22A5 t\u1EEB ${c.from} xu\u1ED1ng ${c.plane}`;
+        if (c.kind === "pyramidInsphereCenter") return `${obj.label} = t\xE2m c\u1EA7u n\u1ED9i ti\u1EBFp ch\xF3p ${c.apex}.${c.vertices.join("")}`;
+        if (c.kind === "faceCircumcenter") return `${obj.label} = t\xE2m ngo\u1EA1i ti\u1EBFp ${c.vertices.join("")}`;
+        if (c.kind === "pointAboveFace") return `${obj.label} = \u0111\u1EC9nh tr\u1EE5c tr\u1EE5 \u22A5 m\u1EB7t ${c.vertices.join("")}`;
         return obj.label;
       },
       render: (obj, ctx) => {
@@ -483,6 +867,15 @@ var init_point3d = __esm({
             () => sph.F(c.theta, c.phi)[2]
           ], opts);
         }
+        const getState = ctx.getState;
+        if (getState) {
+          const cw = () => constraintToWorld(c, getState());
+          return view.create("point3d", [
+            () => cw()[0],
+            () => cw()[1],
+            () => cw()[2]
+          ], { ...opts, needsRegularUpdate: true });
+        }
         return view.create("point3d", [0, 0, 0], opts);
       }
     };
@@ -544,32 +937,77 @@ var init_segment3d = __esm({
 });
 
 // src/core/scene/kinds/line3d.ts
+function line3dConstructionRefs(c) {
+  switch (c.kind) {
+    case "planePlaneIntersection":
+      return [c.plane1, c.plane2];
+    case "lineParallelThrough":
+      return [c.point, c.dirA, c.dirB];
+    case "linePerpToPlane":
+      return [c.point, c.plane];
+    default: {
+      return [];
+    }
+  }
+}
+var def3;
 var init_line3d = __esm({
   "src/core/scene/kinds/line3d.ts"() {
     init_registry();
     init_labelOf();
-    registerKind({
+    init_constraint3d_math();
+    def3 = {
       type: "line3d",
       schemaVersion: 1,
       migrate: {},
       validate: (a) => {
-        if (!a?.p1 || !a?.p2) throw new Error("line3d: p1/p2 required");
+        if (a?.construction) return;
+        if (!a?.p1 || !a?.p2) throw new Error("line3d: p1/p2 required (ho\u1EB7c construction)");
+      },
+      dependsOn: (a) => a.construction ? line3dConstructionRefs(a.construction) : [a.p1, a.p2],
+      describe: (obj, state) => {
+        const c = obj.attrs.construction;
+        if (!c) return `\u0110\u01B0\u1EDDng ${obj.label} qua ${labelOf(obj.attrs.p1, state)}, ${labelOf(obj.attrs.p2, state)}`;
+        switch (c.kind) {
+          case "planePlaneIntersection":
+            return `Giao tuy\u1EBFn ${obj.label} = ${labelOf(c.plane1, state)} \u2229 ${labelOf(c.plane2, state)}`;
+          case "lineParallelThrough":
+            return `${obj.label} \u2225 ${labelOf(c.dirA, state)}${labelOf(c.dirB, state)} qua ${labelOf(c.point, state)}`;
+          case "linePerpToPlane":
+            return `${obj.label} \u22A5 ${labelOf(c.plane, state)} qua ${labelOf(c.point, state)}`;
+          default:
+            return obj.label;
+        }
       },
-      dependsOn: (a) => [a.p1, a.p2],
-      describe: (obj, state) => `\u0110\u01B0\u1EDDng ${obj.label} qua ${labelOf(obj.attrs.p1, state)}, ${labelOf(obj.attrs.p2, state)}`,
       render: (obj, ctx) => {
         const view = ctx.jxg;
+        const baseOpts = {
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: 2,
+          visible: obj.visible
+        };
+        const c = obj.attrs.construction;
+        if (c) {
+          const getState = ctx.getState;
+          if (!getState) throw new Error("line3d construction: c\u1EA7n ctx.getState");
+          const lc = () => lineConstructionWorld(c, getState());
+          return view.create("line3d", [() => lc().a, () => lc().b], {
+            ...baseOpts,
+            straightFirst: true,
+            straightLast: true,
+            needsRegularUpdate: true
+          });
+        }
         const pA = ctx.resolveRef(obj.attrs.p1);
         const pB = ctx.resolveRef(obj.attrs.p2);
         return view.create("line3d", [pA, pB], {
+          ...baseOpts,
           straightFirst: true,
-          straightLast: true,
-          strokeColor: obj.attrs.color ?? "#0f172a",
-          strokeWidth: 2,
-          visible: obj.visible
+          straightLast: true
         });
       }
-    });
+    };
+    registerKind(def3);
   }
 });
 
@@ -635,33 +1073,77 @@ var init_vector3d = __esm({
 });
 
 // src/core/scene/kinds/plane3d.ts
+function plane3dConstructionRefs(c) {
+  switch (c.kind) {
+    case "planeParallelThrough":
+      return [c.point, c.refPlane];
+    case "planePerpToLine":
+      return [c.point, c.lineA, c.lineB];
+    default: {
+      return [];
+    }
+  }
+}
+var def4;
 var init_plane3d = __esm({
   "src/core/scene/kinds/plane3d.ts"() {
     init_registry();
     init_labelOf();
-    registerKind({
+    init_constraint3d_math();
+    def4 = {
       type: "plane3d",
       schemaVersion: 1,
       migrate: {},
       validate: (a) => {
-        if (!a?.p1 || !a?.p2 || !a?.p3) throw new Error("plane3d: c\u1EA7n 3 \u0111i\u1EC3m");
+        if (a?.construction) return;
+        if (!a?.p1 || !a?.p2 || !a?.p3) throw new Error("plane3d: c\u1EA7n 3 \u0111i\u1EC3m (ho\u1EB7c construction)");
+      },
+      dependsOn: (a) => a.construction ? plane3dConstructionRefs(a.construction) : [a.p1, a.p2, a.p3],
+      describe: (obj, state) => {
+        const c = obj.attrs.construction;
+        if (!c) {
+          return `M\u1EB7t ${obj.label} qua ${labelOf(obj.attrs.p1, state)}, ${labelOf(obj.attrs.p2, state)}, ${labelOf(obj.attrs.p3, state)}`;
+        }
+        switch (c.kind) {
+          case "planeParallelThrough":
+            return `${obj.label} \u2225 ${labelOf(c.refPlane, state)} qua ${labelOf(c.point, state)}`;
+          case "planePerpToLine":
+            return `${obj.label} \u22A5 ${labelOf(c.lineA, state)}${labelOf(c.lineB, state)} qua ${labelOf(c.point, state)}`;
+          default:
+            return obj.label;
+        }
       },
-      dependsOn: (a) => [a.p1, a.p2, a.p3],
-      describe: (obj, state) => `M\u1EB7t ${obj.label} qua ${labelOf(obj.attrs.p1, state)}, ${labelOf(obj.attrs.p2, state)}, ${labelOf(obj.attrs.p3, state)}`,
       render: (obj, ctx) => {
         const view = ctx.jxg;
-        return view.create("plane3d", [
-          ctx.resolveRef(obj.attrs.p1),
-          ctx.resolveRef(obj.attrs.p2),
-          ctx.resolveRef(obj.attrs.p3)
-        ], {
+        const opts = {
           fillOpacity: 0.15,
           fillColor: obj.attrs.color ?? "#60a5fa",
           strokeColor: obj.attrs.color ?? "#60a5fa",
           visible: obj.visible
-        });
+        };
+        const c = obj.attrs.construction;
+        if (c) {
+          const getState = ctx.getState;
+          if (!getState) throw new Error("plane3d construction: c\u1EA7n ctx.getState");
+          const pc = () => planeConstructionWorld(c, getState());
+          const diff = (which) => {
+            const r = pc();
+            const q = r[which];
+            return [q[0] - r.p1[0], q[1] - r.p1[1], q[2] - r.p1[2]];
+          };
+          return view.create("plane3d", [() => pc().p1, () => diff("p2"), () => diff("p3")], {
+            ...opts,
+            needsRegularUpdate: true
+          });
+        }
+        return view.create("plane3d", [
+          ctx.resolveRef(obj.attrs.p1),
+          ctx.resolveRef(obj.attrs.p2),
+          ctx.resolveRef(obj.attrs.p3)
+        ], opts);
       }
-    });
+    };
+    registerKind(def4);
   }
 });
 
@@ -760,11 +1242,37 @@ var init_polyhedron3d = __esm({
   }
 });
 
+// src/core/scene/kinds/_ringBasis.ts
+function perpBasis(axis) {
+  const n = Math.hypot(axis[0], axis[1], axis[2]);
+  if (n < 1e-12) return [[1, 0, 0], [0, 1, 0]];
+  const a = [axis[0] / n, axis[1] / n, axis[2] / n];
+  const seed = Math.abs(a[2]) < 0.9 ? [0, 0, 1] : [1, 0, 0];
+  let u = [
+    seed[1] * a[2] - seed[2] * a[1],
+    seed[2] * a[0] - seed[0] * a[2],
+    seed[0] * a[1] - seed[1] * a[0]
+  ];
+  const un = Math.hypot(u[0], u[1], u[2]) || 1;
+  u = [u[0] / un, u[1] / un, u[2] / un];
+  const v = [
+    a[1] * u[2] - a[2] * u[1],
+    a[2] * u[0] - a[0] * u[2],
+    a[0] * u[1] - a[1] * u[0]
+  ];
+  return [u, v];
+}
+var init_ringBasis = __esm({
+  "src/core/scene/kinds/_ringBasis.ts"() {
+  }
+});
+
 // src/core/scene/kinds/cylinder3d.ts
 var CURVED_SEGMENTS;
 var init_cylinder3d = __esm({
   "src/core/scene/kinds/cylinder3d.ts"() {
     init_registry();
+    init_ringBasis();
     CURVED_SEGMENTS = 16;
     registerKind({
       type: "cylinder3d",
@@ -783,14 +1291,17 @@ var init_cylinder3d = __esm({
         const r = obj.attrs.radius;
         const ax = a.X?.() ?? 0, ay = a.Y?.() ?? 0, az = a.Z?.() ?? 0;
         const bx = b.X?.() ?? 0, by = b.Y?.() ?? 0, bz = b.Z?.() ?? 0;
+        const [u, v] = perpBasis([bx - ax, by - ay, bz - az]);
         const baseRing = [];
         const topRing = [];
         for (let i = 0; i < CURVED_SEGMENTS; i++) {
           const theta = i / CURVED_SEGMENTS * Math.PI * 2;
-          const dx = r * Math.cos(theta);
-          const dy = r * Math.sin(theta);
-          baseRing.push([ax + dx, ay + dy, az]);
-          topRing.push([bx + dx, by + dy, bz]);
+          const c = Math.cos(theta), s = Math.sin(theta);
+          const ox = r * (c * u[0] + s * v[0]);
+          const oy = r * (c * u[1] + s * v[1]);
+          const oz = r * (c * u[2] + s * v[2]);
+          baseRing.push([ax + ox, ay + oy, az + oz]);
+          topRing.push([bx + ox, by + oy, bz + oz]);
         }
         const vertices = [...baseRing, ...topRing];
         const faces = [];
@@ -801,7 +1312,7 @@ var init_cylinder3d = __esm({
           faces.push([i, next, CURVED_SEGMENTS + next, CURVED_SEGMENTS + i]);
         }
         const vertJxgs = vertices.map(
-          (v, i) => view.create("point3d", v, {
+          (v2, i) => view.create("point3d", v2, {
             id: `${obj.id}.v${i}`,
             visible: false,
             fixed: true,
@@ -829,6 +1340,7 @@ var CURVED_SEGMENTS2;
 var init_cone3d = __esm({
   "src/core/scene/kinds/cone3d.ts"() {
     init_registry();
+    init_ringBasis();
     CURVED_SEGMENTS2 = 16;
     registerKind({
       type: "cone3d",
@@ -851,10 +1363,16 @@ var init_cone3d = __esm({
           apexPt.Y?.() ?? 0,
           apexPt.Z?.() ?? 0
         ];
+        const [u, v] = perpBasis([apexCoords[0] - bx, apexCoords[1] - by, apexCoords[2] - bz]);
         const baseRing = [];
         for (let i = 0; i < CURVED_SEGMENTS2; i++) {
           const theta = i / CURVED_SEGMENTS2 * Math.PI * 2;
-          baseRing.push([bx + r * Math.cos(theta), by + r * Math.sin(theta), bz]);
+          const c = Math.cos(theta), s = Math.sin(theta);
+          baseRing.push([
+            bx + r * (c * u[0] + s * v[0]),
+            by + r * (c * u[1] + s * v[1]),
+            bz + r * (c * u[2] + s * v[2])
+          ]);
         }
         const apexIdx = baseRing.length;
         const vertices = [...baseRing, apexCoords];
@@ -863,7 +1381,7 @@ var init_cone3d = __esm({
           faces.push([i, (i + 1) % CURVED_SEGMENTS2, apexIdx]);
         }
         const vertJxgs = vertices.map(
-          (v, i) => view.create("point3d", v, {
+          (v2, i) => view.create("point3d", v2, {
             id: `${obj.id}.v${i}`,
             visible: false,
             fixed: true,
@@ -939,8 +1457,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] : [];
@@ -948,8 +1470,16 @@ function constraintRefs2D(c) {
     }
     case "excenter":
       return [c.vertices[0], c.vertices[1], c.vertices[2]];
-    default:
+    case "commonTangentPoint":
+      return [c.circles[0], c.circles[1]];
+    // Các kind KHÔNG có ref scene-object (toạ độ literal): liệt kê TƯỜNG MINH để
+    // exhaustive never-guard bên dưới buộc khai báo khi thêm constraint kind mới.
+    case "free":
+    case "onAxis":
+      return [];
+    default: {
       return [];
+    }
   }
 }
 var init_d_constraint2 = __esm({
@@ -1227,7 +1757,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];
@@ -1242,12 +1772,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;
@@ -1263,6 +1799,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];
@@ -1290,29 +1855,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);
       }
@@ -1362,6 +1936,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) {
@@ -1390,19 +2017,19 @@ function buildJxgTransforms(board, ctx, t) {
   }
 }
 function makeDistanceFn(ctx, d) {
-  const scale = d.scale ?? 1;
+  const scale2 = d.scale ?? 1;
   const offset = d.offset ?? 0;
   if (d.kind === "literal") {
     const v = d.value;
-    return () => scale * v + offset;
+    return () => scale2 * 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;
+    return () => scale2 * Math.hypot(p.X() - q.X(), p.Y() - q.Y()) + offset;
   }
   const circle = ctx.resolveRef(d.circle);
-  return () => scale * circle.Radius() + offset;
+  return () => scale2 * circle.Radius() + offset;
 }
 function buildPointOpts(obj) {
   return {
@@ -1413,11 +2040,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();
   }
 });
 
@@ -1449,6 +2078,73 @@ var init_pointAtDistance = __esm({
   }
 });
 
+// src/stamps/geometry-2d/geometry/commonTangent.ts
+function computeCommonTangentPoint(O1, r1, O2, r2, on, variant, side) {
+  const dx = O2[0] - O1[0];
+  const dy = O2[1] - O1[1];
+  const d = Math.hypot(dx, dy);
+  if (d < EPS) return null;
+  const beta = Math.atan2(dy, dx);
+  const ratio = variant === "external" ? (r1 - r2) / d : (r1 + r2) / d;
+  if (Math.abs(ratio) > 1) return null;
+  const gamma = Math.acos(ratio);
+  const s = side === 0 ? 1 : -1;
+  const angle = beta + s * gamma;
+  const nx = Math.cos(angle);
+  const ny = Math.sin(angle);
+  if (on === 0) {
+    return [O1[0] + r1 * nx, O1[1] + r1 * ny];
+  }
+  if (variant === "external") {
+    return [O2[0] + r2 * nx, O2[1] + r2 * ny];
+  }
+  return [O2[0] - r2 * nx, O2[1] - r2 * ny];
+}
+var EPS;
+var init_commonTangent = __esm({
+  "src/stamps/geometry-2d/geometry/commonTangent.ts"() {
+    EPS = 1e-9;
+  }
+});
+
+// src/core/scene/kinds/point-constraints/commonTangentPoint.ts
+var commonTangentPointConstraint;
+var init_commonTangentPoint = __esm({
+  "src/core/scene/kinds/point-constraints/commonTangentPoint.ts"() {
+    init_commonTangent();
+    init_types2();
+    commonTangentPointConstraint = definePointConstraint({
+      kind: "commonTangentPoint",
+      describe: (obj, state, c) => {
+        const c1 = state?.objects[c.circles[0]]?.label ?? c.circles[0];
+        const c2 = state?.objects[c.circles[1]]?.label ?? c.circles[1];
+        const v = c.variant === "internal" ? "trong" : "ngo\xE0i";
+        return `${obj.label} = ti\u1EBFp \u0111i\u1EC3m ti\u1EBFp tuy\u1EBFn chung ${v} ${c1},${c2} (tr\xEAn ${c.on === 0 ? c1 : c2})`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const k1 = ctx.resolveRef(c.circles[0]);
+        const k2 = ctx.resolveRef(c.circles[1]);
+        const O1 = k1?.center ?? k1?.midpoint ?? k1;
+        const O2 = k2?.center ?? k2?.midpoint ?? k2;
+        const compute = () => {
+          const t = computeCommonTangentPoint(
+            [O1.X(), O1.Y()],
+            k1.Radius(),
+            [O2.X(), O2.Y()],
+            k2.Radius(),
+            c.on,
+            c.variant,
+            c.side
+          );
+          return t ?? [0, 0];
+        };
+        return board.create("point", [() => compute()[0], () => compute()[1]], opts);
+      }
+    });
+  }
+});
+
 // src/core/scene/kinds/point-constraints/circleIntersection.ts
 var circleIntersectionConstraint;
 var init_circleIntersection = __esm({
@@ -1726,7 +2422,9 @@ var init_registry2 = __esm({
     init_centroid();
     init_arcMidpoint();
     init_excenter();
+    init_mixtilinearPoint();
     init_pointAtDistance();
+    init_commonTangentPoint();
     init_circleIntersection();
     init_circleSecondIntersection();
     init_secondIntersection();
@@ -1751,7 +2449,9 @@ var init_registry2 = __esm({
       centroidConstraint,
       arcMidpointConstraint,
       excenterConstraint,
+      mixtilinearPointConstraint,
       pointAtDistanceConstraint,
+      commonTangentPointConstraint,
       circleIntersectionConstraint,
       circleSecondIntersectionConstraint,
       secondIntersectionConstraint,
@@ -1768,14 +2468,15 @@ var init_registry2 = __esm({
 });
 
 // src/core/scene/kinds/point.ts
-var def3;
+var def5;
 var init_point = __esm({
   "src/core/scene/kinds/point.ts"() {
     init_registry();
     init_d_constraint2();
     init_registry2();
     init_shared();
-    def3 = {
+    init_label();
+    def5 = {
       type: "point",
       schemaVersion: 1,
       migrate: {},
@@ -1842,7 +2543,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 {
             }
@@ -1852,17 +2554,18 @@ var init_point = __esm({
         throw new Error("point: constraint kind changed \u2014 recreate");
       }
     };
-    registerKind(def3);
+    registerKind(def5);
   }
 });
 
 // src/core/scene/kinds/segment.ts
-var def4;
+var def6;
 var init_segment = __esm({
   "src/core/scene/kinds/segment.ts"() {
     init_registry();
     init_labelOf();
-    def4 = {
+    init_label();
+    def6 = {
       type: "segment",
       schemaVersion: 1,
       migrate: {},
@@ -1893,11 +2596,12 @@ 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)
         });
       }
     };
-    registerKind(def4);
+    registerKind(def6);
   }
 });
 
@@ -1925,13 +2629,14 @@ function constructionRefs(c) {
       return [c.throughPoint, c.toCircle];
   }
 }
-var def5;
+var def7;
 var init_line = __esm({
   "src/core/scene/kinds/line.ts"() {
     init_registry();
     init_labelOf();
+    init_label();
     init_pointConstructions();
-    def5 = {
+    def7 = {
       type: "line",
       schemaVersion: 1,
       migrate: {},
@@ -1972,7 +2677,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) {
@@ -2126,17 +2832,17 @@ var init_line = __esm({
         }
       }
     };
-    registerKind(def5);
+    registerKind(def7);
   }
 });
 
 // src/core/scene/kinds/ray.ts
-var def6;
+var def8;
 var init_ray = __esm({
   "src/core/scene/kinds/ray.ts"() {
     init_registry();
     init_labelOf();
-    def6 = {
+    def8 = {
       type: "ray",
       schemaVersion: 1,
       migrate: {},
@@ -2161,17 +2867,17 @@ var init_ray = __esm({
         });
       }
     };
-    registerKind(def6);
+    registerKind(def8);
   }
 });
 
 // src/core/scene/kinds/vector.ts
-var def7;
+var def9;
 var init_vector = __esm({
   "src/core/scene/kinds/vector.ts"() {
     init_registry();
     init_labelOf();
-    def7 = {
+    def9 = {
       type: "vector",
       schemaVersion: 1,
       migrate: {},
@@ -2193,7 +2899,7 @@ var init_vector = __esm({
         });
       }
     };
-    registerKind(def7);
+    registerKind(def9);
   }
 });
 
@@ -2223,13 +2929,14 @@ function constructionRefs2(c) {
       return [c.p1, c.p2];
   }
 }
-var def8;
+var def10;
 var init_circle = __esm({
   "src/core/scene/kinds/circle.ts"() {
     init_registry();
     init_labelOf();
+    init_label();
     init_pointConstructions();
-    def8 = {
+    def10 = {
       type: "circle",
       schemaVersion: 1,
       migrate: {},
@@ -2289,15 +2996,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") {
@@ -2379,7 +3088,7 @@ var init_circle = __esm({
         return board.create("circle", [center, surface], baseOpts);
       }
     };
-    registerKind(def8);
+    registerKind(def10);
   }
 });
 
@@ -2394,12 +3103,12 @@ function constructionRefs3(c) {
       return [c.p1, c.p2, c.p3];
   }
 }
-var def9;
+var def11;
 var init_arc = __esm({
   "src/core/scene/kinds/arc.ts"() {
     init_registry();
     init_labelOf();
-    def9 = {
+    def11 = {
       type: "arc",
       schemaVersion: 1,
       migrate: {},
@@ -2457,17 +3166,17 @@ var init_arc = __esm({
         return board.create("circumcirclearc", [A, B, C], baseOpts);
       }
     };
-    registerKind(def9);
+    registerKind(def11);
   }
 });
 
 // src/core/scene/kinds/sector.ts
-var def10;
+var def12;
 var init_sector = __esm({
   "src/core/scene/kinds/sector.ts"() {
     init_registry();
     init_labelOf();
-    def10 = {
+    def12 = {
       type: "sector",
       schemaVersion: 1,
       migrate: {},
@@ -2507,7 +3216,7 @@ var init_sector = __esm({
         });
       }
     };
-    registerKind(def10);
+    registerKind(def12);
   }
 });
 
@@ -2553,12 +3262,12 @@ function specialShapeName(kind) {
       return "";
   }
 }
-var def11;
+var def13;
 var init_polygon = __esm({
   "src/core/scene/kinds/polygon.ts"() {
     init_registry();
     init_labelOf();
-    def11 = {
+    def13 = {
       type: "polygon",
       schemaVersion: 1,
       migrate: {},
@@ -2745,16 +3454,16 @@ var init_polygon = __esm({
         return poly;
       }
     };
-    registerKind(def11);
+    registerKind(def13);
   }
 });
 
 // src/core/scene/kinds/intersection.ts
-var def12;
+var def14;
 var init_intersection = __esm({
   "src/core/scene/kinds/intersection.ts"() {
     init_registry();
-    def12 = {
+    def14 = {
       type: "intersection",
       schemaVersion: 1,
       migrate: {},
@@ -2782,8 +3491,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
         };
@@ -2792,19 +3504,51 @@ 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);
+    registerKind(def14);
   }
 });
 
 // src/core/scene/kinds/angle.ts
-var def13;
+var def15;
 var init_angle = __esm({
   "src/core/scene/kinds/angle.ts"() {
     init_registry();
     init_labelOf();
-    def13 = {
+    def15 = {
       type: "angle",
       schemaVersion: 1,
       migrate: {},
@@ -2840,17 +3584,17 @@ var init_angle = __esm({
         });
       }
     };
-    registerKind(def13);
+    registerKind(def15);
   }
 });
 
 // src/core/scene/kinds/distance.ts
-var def14;
+var def16;
 var init_distance = __esm({
   "src/core/scene/kinds/distance.ts"() {
     init_registry();
     init_labelOf();
-    def14 = {
+    def16 = {
       type: "distance",
       schemaVersion: 1,
       migrate: {},
@@ -2879,7 +3623,7 @@ var init_distance = __esm({
         });
       }
     };
-    registerKind(def14);
+    registerKind(def16);
   }
 });
 
@@ -3008,12 +3752,12 @@ var init_parser = __esm({
 });
 
 // src/core/scene/kinds/function2d.ts
-var def15;
+var def17;
 var init_function2d = __esm({
   "src/core/scene/kinds/function2d.ts"() {
     init_registry();
     init_parser();
-    def15 = {
+    def17 = {
       type: "function2d",
       schemaVersion: 1,
       migrate: {},
@@ -3052,16 +3796,16 @@ var init_function2d = __esm({
         });
       }
     };
-    registerKind(def15);
+    registerKind(def17);
   }
 });
 
 // src/core/scene/kinds/parameter.ts
-var def16;
+var def18;
 var init_parameter = __esm({
   "src/core/scene/kinds/parameter.ts"() {
     init_registry();
-    def16 = {
+    def18 = {
       type: "parameter",
       schemaVersion: 1,
       migrate: {},
@@ -3079,16 +3823,16 @@ var init_parameter = __esm({
       render: () => null
       // Không render lên board
     };
-    registerKind(def16);
+    registerKind(def18);
   }
 });
 
 // src/core/scene/kinds/pointOnCurve.ts
-var def17;
+var def19;
 var init_pointOnCurve = __esm({
   "src/core/scene/kinds/pointOnCurve.ts"() {
     init_registry();
-    def17 = {
+    def19 = {
       type: "pointOnCurve",
       schemaVersion: 1,
       migrate: {},
@@ -3115,16 +3859,16 @@ var init_pointOnCurve = __esm({
         });
       }
     };
-    registerKind(def17);
+    registerKind(def19);
   }
 });
 
 // src/core/scene/kinds/tangent2d.ts
-var def18;
+var def20;
 var init_tangent2d = __esm({
   "src/core/scene/kinds/tangent2d.ts"() {
     init_registry();
-    def18 = {
+    def20 = {
       type: "tangent2d",
       schemaVersion: 1,
       migrate: {},
@@ -3147,7 +3891,7 @@ var init_tangent2d = __esm({
         });
       }
     };
-    registerKind(def18);
+    registerKind(def20);
   }
 });
 
@@ -3223,13 +3967,13 @@ var init_evaluator = __esm({
 });
 
 // src/core/scene/kinds/extremum2d.ts
-var def19;
+var def21;
 var init_extremum2d = __esm({
   "src/core/scene/kinds/extremum2d.ts"() {
     init_registry();
     init_evaluator();
     init_parser();
-    def19 = {
+    def21 = {
       type: "extremum2d",
       schemaVersion: 1,
       migrate: {},
@@ -3262,18 +4006,18 @@ var init_extremum2d = __esm({
         }));
       }
     };
-    registerKind(def19);
+    registerKind(def21);
   }
 });
 
 // src/core/scene/kinds/root2d.ts
-var def20;
+var def22;
 var init_root2d = __esm({
   "src/core/scene/kinds/root2d.ts"() {
     init_registry();
     init_evaluator();
     init_parser();
-    def20 = {
+    def22 = {
       type: "root2d",
       schemaVersion: 1,
       migrate: {},
@@ -3303,16 +4047,16 @@ var init_root2d = __esm({
         }));
       }
     };
-    registerKind(def20);
+    registerKind(def22);
   }
 });
 
 // src/core/scene/kinds/slope2d.ts
-var def21;
+var def23;
 var init_slope2d = __esm({
   "src/core/scene/kinds/slope2d.ts"() {
     init_registry();
-    def21 = {
+    def23 = {
       type: "slope2d",
       schemaVersion: 1,
       migrate: {},
@@ -3336,7 +4080,7 @@ var init_slope2d = __esm({
         });
       }
     };
-    registerKind(def21);
+    registerKind(def23);
   }
 });
 
@@ -3478,6 +4222,7 @@ var init_JxgRenderer = __esm({
     init_registry();
     init_types2d();
     init_parser();
+    init_label();
     JxgRenderer = class {
       constructor(store, board, options = {}) {
         this.elements = /* @__PURE__ */ new Map();
@@ -3541,11 +4286,12 @@ var init_JxgRenderer = __esm({
       }
       create(obj) {
         try {
-          const def22 = getKind(obj.kind);
-          const el = def22.render(obj, this.ctx());
+          const def24 = getKind(obj.kind);
+          const el = def24.render(obj, this.ctx());
           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);
         }
@@ -3660,6 +4406,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);
@@ -3697,11 +4491,11 @@ var init_JxgRenderer = __esm({
             continue;
           }
           if (Object.is(old, cur)) continue;
-          const def22 = getKind(cur.kind);
+          const def24 = getKind(cur.kind);
           const existing = this.elements.get(id);
-          if (def22.update && existing) {
+          if (def24.update && existing) {
             try {
-              def22.update(cur, old, this.ctx(), existing);
+              def24.update(cur, old, this.ctx(), existing);
               continue;
             } catch (err) {
               console.warn(`[scene/render/2d] update fail, recreate:`, err);
@@ -3796,88 +4590,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);
@@ -3977,15 +4772,18 @@ function computeAutoFitBbox(points, circles, aspect, padPct = 0.12) {
   const xs = points.map((p) => p[0]).filter(Number.isFinite);
   const ys = points.map((p) => p[1]).filter(Number.isFinite);
   let xmin = Infinity, xmax = -Infinity, ymin = Infinity, ymax = -Infinity;
-  let clusterDiag = 0;
+  let fullDiag = 0;
   if (xs.length >= 2 && ys.length >= 2) {
     [xmin, xmax] = robustRange(xs);
     [ymin, ymax] = robustRange(ys);
-    clusterDiag = Math.hypot(xmax - xmin, ymax - ymin);
+    fullDiag = Math.hypot(
+      Math.max(...xs) - Math.min(...xs),
+      Math.max(...ys) - Math.min(...ys)
+    );
   }
   for (const c of circles) {
     if (!Number.isFinite(c.cx) || !Number.isFinite(c.cy) || !Number.isFinite(c.r)) continue;
-    if (clusterDiag > 0 && c.r > CIRCLE_MAX_FACTOR * clusterDiag) continue;
+    if (fullDiag > 0 && c.r > CIRCLE_MAX_FACTOR * fullDiag) continue;
     xmin = Math.min(xmin, c.cx - c.r);
     xmax = Math.max(xmax, c.cx + c.r);
     ymin = Math.min(ymin, c.cy - c.r);
@@ -4037,6 +4835,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();
@@ -4071,8 +4912,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;
@@ -4087,31 +4929,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;
@@ -4137,10 +4954,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;
@@ -4175,7 +4988,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;
@@ -4183,7 +4996,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();
@@ -4192,9 +5005,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;
@@ -4833,7 +5646,7 @@ var init_useToolHoverTooltip = __esm({
     init_types4();
   }
 });
-function normalize(s) {
+function normalize2(s) {
   return s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
 }
 function SearchIcon() {
@@ -4880,12 +5693,12 @@ function ToolGrid(props) {
   const { tools, groupOrder, groupLabels, activeTool, onToolChange, chord } = props;
   const { hover, portalReady, showHover, hideHover } = useToolHoverTooltip();
   const [query, setQuery] = React2.useState("");
-  const normalizedQuery = React2.useMemo(() => normalize(query.trim()), [query]);
+  const normalizedQuery = React2.useMemo(() => normalize2(query.trim()), [query]);
   const filteredTools = React2.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;
+      if (normalize2(t.label).includes(normalizedQuery)) return true;
+      if (t.hint && normalize2(t.hint).includes(normalizedQuery)) return true;
       return false;
     });
   }, [tools, normalizedQuery]);
@@ -5754,41 +6567,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" }),
@@ -5799,9 +6619,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" }),
@@ -6584,8 +7406,8 @@ var init_circles = __esm({
         const ax = picks[0].X(), ay = picks[0].Y();
         const bx = picks[1].X(), by = picks[1].Y();
         const cx = picks[2].X(), cy = picks[2].Y();
-        const cross = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);
-        if (Math.abs(cross) < 1e-6) {
+        const cross2 = (bx - ax) * (cy - ay) - (by - ay) * (cx - ax);
+        if (Math.abs(cross2) < 1e-6) {
           ctx.toast?.("Kh\xF4ng v\u1EBD \u0111\u01B0\u1EE3c cung qua 3 \u0111i\u1EC3m th\u1EB3ng h\xE0ng", {
             variant: "warning",
             id: "arc3-collinear"
@@ -7811,11 +8633,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,
@@ -8223,6 +9045,7 @@ var init_MiniBoard = __esm({
     init_safeJsx();
     init_attachJxgWheelZoom();
     init_initJxgBoard();
+    init_autoFitBoard();
     init_snapshot();
     init_previewActions();
     init_buildHandle();
@@ -8462,6 +9285,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");
           }
@@ -9259,6 +10087,7 @@ function useAiFigure(generator) {
   const [prompt, setPrompt] = React2.useState("");
   const [isLoading, setIsLoading] = React2.useState(false);
   const [error, setError] = React2.useState(null);
+  const [notice, setNotice] = React2.useState(null);
   const [tokens, setTokens] = React2.useState(0);
   const abortRef = React2.useRef(null);
   const requestIdRef = React2.useRef(0);
@@ -9279,6 +10108,7 @@ function useAiFigure(generator) {
     abortRef.current = controller;
     setIsLoading(true);
     setError(null);
+    setNotice(null);
     setTokens(0);
     try {
       const generated = await generator(problem, {
@@ -9292,6 +10122,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") {
@@ -9318,6 +10149,7 @@ function useAiFigure(generator) {
     setPrompt,
     isLoading,
     error,
+    notice,
     submit,
     cancel,
     tokens
@@ -9354,6 +10186,141 @@ var init_tesseract = __esm({
   }
 });
 
+// src/stamps/geometry-2d/ai/vision/repairOcrSymbols.ts
+function repairOcrSymbols(text) {
+  let t = text;
+  t = t.replace(PERP_RE, "$1 \u22A5 $3");
+  t = t.replace(TRI_STRICT_RE, "tam gi\xE1c $1 $2");
+  t = t.replace(TRI_DOUBLE_RE, "tam gi\xE1c A$1");
+  t = t.replace(CIRCLE_O_RE, "(O)");
+  t = t.replace(ELEM_RE, "$1 \u2208 (O)");
+  t = t.replace(INTERSECT_RE, "$1 \u2229 $2 = {");
+  t = t.replace(SQUARE_RE, "$1\xB2");
+  t = t.replace(HORN_O_C_RE, "C");
+  t = t.replace(DUONG_DBAR_RE, "\u0110\u01B0\u1EDDng");
+  t = t.replace(DUONG_LOWER_RE, "\u0111\u01B0\u1EDDng");
+  t = t.replace(DUONG_TRON_RE, "$1tr\xF2n");
+  t = t.replace(FLORIN_F_RE, "F");
+  t = t.replace(TAI_TAI_RE, "t\u1EA1i$1");
+  t = t.replace(TAM_TAM_RE, "t\xE2m$1");
+  t = t.replace(EURO_ELEM_RE, "\u2208");
+  t = t.replace(PARALLEL_RE, "\u2225");
+  t = t.replace(CENT_C_RE, "c");
+  t = t.replace(ETH_D_RE, "D");
+  t = t.replace(SLASH_O_RE, "O");
+  t = t.replace(GOI_RE, "G\u1ECDi");
+  t = t.replace(LAY_RE, "L\u1EA5y");
+  t = t.replace(DIQUA_RE, "\u0111i qua");
+  t = t.replace(VA_VAND_RE, "v\xE0 ");
+  t = t.replace(TREN_RE, "$1r\xEAn");
+  t = t.replace(DAY_RE, "d\xE2y");
+  t = t.replace(CHUNG_MINH_RE, "$1minh");
+  t = t.replace(THANG_HANG_RE, "th\u1EB3ng h\xE0ng");
+  t = t.replace(TINH_RE, "T\xEDnh");
+  t = t.replace(DO_DAI_RE, "\u0111\u1ED9 d\xE0i");
+  t = t.replace(NIM_RE, "n\u1EB1m");
+  t = t.replace(NAM_GIUA_RE, "n\u1EB1m");
+  t = t.replace(ANGLE_Z_RE, "\u2220$1");
+  t = t.replace(DE_PAREN_RE, "(\u0110\u1EC1 ");
+  t = t.replace(DE_VERB_RE, "$1xu\u1EA5t$2");
+  t = t.replace(DE_THI_LOWER_RE, "\u0111\u1EC1");
+  t = t.replace(DI_DONG_RE, "di \u0111\u1ED9ng");
+  t = t.replace(POUND_E_RE, "E");
+  t = t.replace(TRI_SPACE_2_1, "$1$2$3$4");
+  t = t.replace(TRI_SPACE_1_2, "$1$2$3$4");
+  t = t.replace(DIAERESIS_O_RE, "O");
+  t = t.replace(INTERSECT_PAREN_RE, "$1 \u2229 $2$3");
+  return t;
+}
+var PT, PERP_RE, TRI_STRICT_RE, TRI_DOUBLE_RE, CIRCLE_O_RE, ELEM_RE, INTERSECT_RE, SQUARE_RE, HORN_O_C_RE, DUONG_DBAR_RE, DUONG_TRON_RE, FLORIN_F_RE, TAI_TAI_RE, TAM_TAM_RE, EURO_ELEM_RE, PARALLEL_RE, CENT_C_RE, ETH_D_RE, SLASH_O_RE, GOI_RE, LAY_RE, DIQUA_RE, VA_VAND_RE, TREN_RE, DUONG_LOWER_RE, DAY_RE, CHUNG_MINH_RE, THANG_HANG_RE, TINH_RE, DO_DAI_RE, NIM_RE, NAM_GIUA_RE, ANGLE_Z_RE, DE_PAREN_RE, DE_VERB_RE, DE_THI_LOWER_RE, DI_DONG_RE, POUND_E_RE, TRI_SPACE_2_1, TRI_SPACE_1_2, DIAERESIS_O_RE, INTERSECT_PAREN_RE;
+var init_repairOcrSymbols = __esm({
+  "src/stamps/geometry-2d/ai/vision/repairOcrSymbols.ts"() {
+    PT = `[A-Z]{2,3}['\u2032]?`;
+    PERP_RE = new RegExp(
+      `(?<![\\p{L}\\d])(${PT})\\s+([1|L])\\s+(${PT})(?![\\p{L}\\d])`,
+      "gu"
+    );
+    TRI_STRICT_RE = /(?<!giác )(?<!thang )(?<![\p{L}\d])A([A-Z]{3})\s+(đều|cân|nhọn|vuông)(?![\p{L}])/gu;
+    TRI_DOUBLE_RE = /(?<![\p{L}\d])AA([A-Z]{2})(?![A-Z])/gu;
+    CIRCLE_O_RE = /\(0\)/gu;
+    ELEM_RE = /(?<![\p{L}\d])([A-Z](?:\s*,\s*[A-Z])+)\s*e\s*\((?:O|0)\)/gu;
+    INTERSECT_RE = /([A-Z]{2,3})N\s+([A-Z]\S{0,2})\s*=\s*\{/gu;
+    SQUARE_RE = /([A-Z])\?(?=\s*[-=+)])/gu;
+    HORN_O_C_RE = /(?<!\p{Ll})Ơ(?!\p{Ll})/gu;
+    DUONG_DBAR_RE = /D(?:ường|uong)(?= (?:tròn|tron|thẳng|kính|cao|chéo|trung|phân|vuông|nối|gấp|tâm))/gu;
+    DUONG_TRON_RE = /([Đđ]ường\s+)tron(?![\p{L}])/gu;
+    FLORIN_F_RE = /Ƒ/gu;
+    TAI_TAI_RE = /(?<![\p{L}])tai(\s+)(?=[A-Z(]|điểm)/gu;
+    TAM_TAM_RE = /(?<![\p{L}])tam(\s+)(?=đường|\(|đối xứng)/gu;
+    EURO_ELEM_RE = /€/gu;
+    PARALLEL_RE = /\|\|/gu;
+    CENT_C_RE = /¢/gu;
+    ETH_D_RE = /(?<!\p{Ll})Ð(?!\p{Ll})/gu;
+    SLASH_O_RE = /(?<!\p{Ll})Ø(?!\p{Ll})/gu;
+    GOI_RE = /(?<!\p{L})Goi(?!\p{L})/gu;
+    LAY_RE = /(?<!\p{L})Lay(?!\p{L})/gu;
+    DIQUA_RE = /(?<!\p{L})di qua(?!\p{L})/gu;
+    VA_VAND_RE = /(?<!\p{L})va (?=[A-Z(]|dây|đường)/gu;
+    TREN_RE = /([Tt])rén(?![\p{L}])/gu;
+    DUONG_LOWER_RE = /(?<![\p{L}])dường(?= (?:tròn|tron|thẳng|kính|cao|chéo|trung|phân|vuông|nối|gấp|tâm))/gu;
+    DAY_RE = /(?<![\p{L}])day(?=\s+(?:cung(?![\p{L}])|[A-Z]{2}))/gu;
+    CHUNG_MINH_RE = /([Cc]hứng )mình(?![\p{L}])/gu;
+    THANG_HANG_RE = /thẳng hang(?![\p{L}])/gu;
+    TINH_RE = /(?<![\p{L}])Tinh(?= (?:[A-Z]|do(?![\p{L}])|độ|diện|bán|chu|số|giá))/gu;
+    DO_DAI_RE = /(?<![\p{L}])do dai(?![\p{L}])/gu;
+    NIM_RE = /(?<![\p{L}])nim(?= (?:giữa|trên|trong)(?![\p{L}]))/gu;
+    NAM_GIUA_RE = /(?<![\p{L}])năm(?= (?:giữa|trên) [A-Z])/gu;
+    ANGLE_Z_RE = /(?<![\p{L}\d])4?Z([A-Z]{2,3})(?![A-Z])/gu;
+    DE_PAREN_RE = /\(Dé /gu;
+    DE_VERB_RE = /(\(Đề )\S+( bởi)/gu;
+    DE_THI_LOWER_RE = /(?<![\p{L}])dé(?= thi)/gu;
+    DI_DONG_RE = /(?<![\p{L}])di dong(?![\p{L}])/gu;
+    POUND_E_RE = /£/gu;
+    TRI_SPACE_2_1 = /(tam\s*giác\s+)([A-Z])([A-Z])\s+([A-Z])(?![A-Z\p{Ll}])/gu;
+    TRI_SPACE_1_2 = /(tam\s*giác\s+)([A-Z])\s+([A-Z])([A-Z])(?![A-Z\p{Ll}])/gu;
+    DIAERESIS_O_RE = /(?<!\p{Ll})Ö(?!\p{Ll})/gu;
+    INTERSECT_PAREN_RE = /(\([A-Z]{3}\))\s+N\s+([A-Z]{2})(\s*=\s*\{)/gu;
+  }
+});
+
+// src/stamps/geometry-2d/ai/vision/detectFormulaRisk.ts
+function hasManglingLtGt(text) {
+  const re = /[<>]/gu;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    const prev = text.slice(0, m.index).replace(/\s+$/u, "").slice(-1);
+    const next = text.slice(m.index + 1).replace(/^\s+/u, "").slice(0, 1);
+    const prevOperand = /[A-Za-z0-9]/.test(prev);
+    const nextOperand = /[A-Za-z0-9]/.test(next);
+    if (!(prevOperand && nextOperand)) return true;
+  }
+  return false;
+}
+function detectFormulaRisk(text) {
+  const reasons = [];
+  if (hasManglingLtGt(text)) {
+    reasons.push('ph\xE2n s\u1ED1/bi\u1EC3u th\u1EE9c nghi b\u1ECB nu\u1ED1t (k\xFD hi\u1EC7u "<"/">")');
+  }
+  if (SUP_RESIDUE.test(text)) {
+    reasons.push('s\u1ED1 m\u0169 ho\u1EB7c \u0111\u1ED9 nghi b\u1ECB m\u1EA5t (d\u1EA5u "?")');
+  }
+  for (const m of text.matchAll(ANGLE_DEG)) {
+    const tok = m[1];
+    if (/[A-Z]/.test(tok) && /[^\x00-\x7F]/u.test(tok)) {
+      reasons.push("t\xEAn g\xF3c nghi b\u1ECB nh\u1EADn d\u1EA1ng sai (k\xFD t\u1EF1 c\xF3 d\u1EA5u)");
+      break;
+    }
+  }
+  return reasons;
+}
+var SUP_RESIDUE, ANGLE_DEG;
+var init_detectFormulaRisk = __esm({
+  "src/stamps/geometry-2d/ai/vision/detectFormulaRisk.ts"() {
+    SUP_RESIDUE = /[A-Z0-9]\?(?=\s*[-=+)(])/u;
+    ANGLE_DEG = /([\p{L}]{1,6})\s*=\s*\d+\s*°/gu;
+  }
+});
+
 // src/stamps/geometry-2d/ai/vision/extractProblem.ts
 async function extractProblemFromImage(image, opts = {}) {
   let raw;
@@ -9381,6 +10348,7 @@ async function extractProblemFromImage(image, opts = {}) {
     ok: true,
     text,
     confidence,
+    warnings: detectFormulaRisk(text),
     usage: { inputTokens: 0, outputTokens: 0 }
   };
 }
@@ -9392,6 +10360,7 @@ function postProcess(raw) {
   t = t.replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, "$1");
   t = t.replace(/\s+/g, " ").trim();
   t = t.normalize("NFC");
+  t = repairOcrSymbols(t);
   if (t.length > MAX_TEXT_CHARS) t = t.slice(0, MAX_TEXT_CHARS);
   return t;
 }
@@ -9399,6 +10368,8 @@ var MIN_HIGH_CONFIDENCE_CHARS, MAX_TEXT_CHARS, TESSERACT_HIGH_CONFIDENCE_THRESHO
 var init_extractProblem = __esm({
   "src/stamps/geometry-2d/ai/vision/extractProblem.ts"() {
     init_tesseract();
+    init_repairOcrSymbols();
+    init_detectFormulaRisk();
     MIN_HIGH_CONFIDENCE_CHARS = 10;
     MAX_TEXT_CHARS = 2e3;
     TESSERACT_HIGH_CONFIDENCE_THRESHOLD = 70;
@@ -9410,6 +10381,14 @@ async function handleExtractProblem(image, opts = {}) {
   try {
     const r = await extractProblemFromImage(image, opts);
     if (r.ok) {
+      if (r.warnings.length > 0) {
+        return {
+          kind: "low-confidence",
+          text: r.text,
+          warning: `C\xF3 th\u1EC3 c\xF3 c\xF4ng th\u1EE9c/k\xFD hi\u1EC7u b\u1ECB nh\u1EADn d\u1EA1ng sai (${r.warnings.join("; ")}). Ki\u1EC3m tra k\u1EF9 tr\u01B0\u1EDBc khi v\u1EBD.`,
+          usage: r.usage
+        };
+      }
       if (r.confidence === "low") {
         return {
           kind: "low-confidence",
@@ -9474,9 +10453,9 @@ async function fileToImagePart(file) {
   const bitmap = await createImageBitmap(file);
   const { width, height } = bitmap;
   const maxEdge = Math.max(width, height);
-  const scale = maxEdge > MAX_EDGE_PX ? MAX_EDGE_PX / maxEdge : 1;
-  const targetW = Math.round(width * scale);
-  const targetH = Math.round(height * scale);
+  const scale2 = maxEdge > MAX_EDGE_PX ? MAX_EDGE_PX / maxEdge : 1;
+  const targetW = Math.round(width * scale2);
+  const targetH = Math.round(height * scale2);
   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");
@@ -9528,6 +10507,7 @@ function AiFigurePrompt({ generator, onGenerated }) {
     setPrompt,
     isLoading,
     error,
+    notice,
     submit,
     cancel,
     tokens
@@ -9541,6 +10521,10 @@ function AiFigurePrompt({ generator, onGenerated }) {
     const id = setInterval(() => setElapsed((s) => s + 1), 1e3);
     return () => clearInterval(id);
   }, [isLoading]);
+  const [noticeDismissed, setNoticeDismissed] = React2.useState(false);
+  React2.useEffect(() => {
+    setNoticeDismissed(false);
+  }, [notice]);
   const [image, setImage] = React2.useState(null);
   const [ocrLoading, setOcrLoading] = React2.useState(false);
   const [ocrError, setOcrError] = React2.useState(null);
@@ -9756,7 +10740,30 @@ function AiFigurePrompt({ generator, onGenerated }) {
       }
     ),
     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 })
+    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, PaperclipIcon;
@@ -10381,11 +11388,17 @@ async function insertStampImage(api, opts) {
   const elements = api.getSceneElements();
   const editingId = opts.editingElementId ?? null;
   if (editingId) {
+    const old = elements.find((e) => e.id === editingId) ;
+    const oldLongest = old ? Math.max(old.width ?? 0, old.height ?? 0) : 0;
+    const newLongest = Math.max(width, height);
+    const scale2 = oldLongest > 0 && newLongest > 0 ? oldLongest / newLongest : 1;
+    const w = width * scale2;
+    const h = height * scale2;
     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,
@@ -10539,8 +11552,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: {
@@ -10549,7 +11565,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] } : {}
         }
       };
     }
@@ -10586,6 +11602,21 @@ function serializePoint(obj, state) {
         entity: { name: obj.label, kind: "pointAtDistance", from: refs[0], through: refs[1], distance }
       };
     }
+    case "commonTangentPoint": {
+      const refs = resolveRefs([c.circles[0], c.circles[1]], state);
+      if (!refs) return fail("unresolved-ref", `${c.circles[0]},${c.circles[1]}`);
+      return {
+        ok: true,
+        entity: {
+          name: obj.label,
+          kind: "commonTangentPoint",
+          circles: [refs[0], refs[1]],
+          on: c.on,
+          variant: c.variant,
+          side: c.side
+        }
+      };
+    }
     // Out of DSL v1:
     case "onAxis":
     case "onPolygon":
@@ -10593,6 +11624,7 @@ function serializePoint(obj, state) {
     case "onPerpendicular":
     case "onPerpBisector":
     case "onCircleAroundPoint":
+    case "mixtilinearPoint":
       return fail("unsupported-constraint", c.kind);
     default: {
       return fail("unsupported-constraint");
@@ -10895,9 +11927,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":
@@ -10908,6 +11942,12 @@ 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}`;
+    case "commonTangentPoint": {
+      const v = e.variant === "internal" ? "trong" : "ngo\xE0i";
+      return `${e.name} = ti\u1EBFp \u0111i\u1EC3m ti\u1EBFp tuy\u1EBFn chung ${v} ${e.circles[0]},${e.circles[1]} (tr\xEAn ${e.circles[e.on]})`;
+    }
     default: {
       return "";
     }
@@ -11030,7 +12070,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);