@xom11/whiteboard 0.25.0 → 0.28.0

package/dist/geometry-3d.js

@@ -923,6 +923,31 @@ function constraintRefs2D(c) {
       return [c.vertices[0], c.vertices[1], c.vertices[2]];
     case "orthocenter":
       return [c.vertices[0], c.vertices[1], c.vertices[2]];
+    case "onPerpendicular":
+      return [c.through, c.perpToA, c.perpToB];
+    case "onPerpBisector":
+      return [c.p1, c.p2];
+    case "onCircleAroundPoint":
+      return [c.center, c.radiusPoint];
+    case "tangentPointExt":
+      return [c.from, c.circle];
+    case "circleIntersection":
+      return [c.c1, c.c2];
+    case "circleSecondIntersection":
+      return [c.c1, c.c2, c.exclude];
+    case "secondIntersection":
+      return [c.line, c.circle, c.other];
+    case "tangencyPoint":
+      return [c.circle, c.onLine];
+    case "arcMidpoint":
+      return [c.circle, c.a, c.b, c.notContaining];
+    case "pointAtDistance": {
+      const d = c.distance;
+      const extra = d.kind === "circleRadius" ? [d.circle] : d.kind === "segmentLength" ? [d.p1, d.p2] : [];
+      return [c.from, c.through, ...extra];
+    }
+    case "excenter":
+      return [c.vertices[0], c.vertices[1], c.vertices[2]];
     default:
       return [];
   }
@@ -932,7 +957,412 @@ var init_d_constraint2 = __esm({
   }
 });
 
-// src/core/scene/kinds/point.ts
+// src/core/scene/kinds/point-constraints/_types.ts
+function definePointConstraint(m) {
+  return m;
+}
+var init_types2 = __esm({
+  "src/core/scene/kinds/point-constraints/_types.ts"() {
+  }
+});
+
+// src/core/scene/kinds/point-constraints/free.ts
+var freeConstraint;
+var init_free = __esm({
+  "src/core/scene/kinds/point-constraints/free.ts"() {
+    init_types2();
+    freeConstraint = definePointConstraint({
+      kind: "free",
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        return board.create("point", [c.x, c.y], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onAxis.ts
+var onAxisConstraint;
+var init_onAxis = __esm({
+  "src/core/scene/kinds/point-constraints/onAxis.ts"() {
+    init_types2();
+    onAxisConstraint = definePointConstraint({
+      kind: "onAxis",
+      describe: (obj, _state, c) => `${obj.label} tr\xEAn tr\u1EE5c ${c.axis}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const coords = c.axis === "x" ? [c.t, 0] : [0, c.t];
+        return board.create("point", coords, opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/midpoint.ts
+var midpointConstraint;
+var init_midpoint = __esm({
+  "src/core/scene/kinds/point-constraints/midpoint.ts"() {
+    init_types2();
+    midpointConstraint = definePointConstraint({
+      kind: "midpoint",
+      describe: (obj, state, c) => {
+        const l1 = state?.objects[c.p1]?.label ?? c.p1;
+        const l2 = state?.objects[c.p2]?.label ?? c.p2;
+        return `${obj.label} = trung \u0111i\u1EC3m ${l1}${l2}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const p1 = ctx.resolveRef(c.p1);
+        const p2 = ctx.resolveRef(c.p2);
+        return board.create("midpoint", [p1, p2], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/perpFoot.ts
+var perpFootConstraint;
+var init_perpFoot = __esm({
+  "src/core/scene/kinds/point-constraints/perpFoot.ts"() {
+    init_types2();
+    perpFootConstraint = definePointConstraint({
+      kind: "perpFoot",
+      validate: (c) => {
+        if (!c.from || !c.onLine) {
+          throw new Error("point.perpFoot: from v\xE0 onLine b\u1EAFt bu\u1ED9c");
+        }
+      },
+      describe: (obj, state, c) => {
+        const fromLabel = state?.objects[c.from]?.label ?? c.from;
+        const lineLabel = state?.objects[c.onLine]?.label ?? c.onLine;
+        return `${obj.label} = ch\xE2n \u27C2 t\u1EEB ${fromLabel} xu\u1ED1ng ${lineLabel}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const from = ctx.resolveRef(c.from);
+        const onLine = ctx.resolveRef(c.onLine);
+        return board.create("perpendicularpoint", [onLine, from], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/circumcenter.ts
+var circumcenterConstraint;
+var init_circumcenter = __esm({
+  "src/core/scene/kinds/point-constraints/circumcenter.ts"() {
+    init_types2();
+    circumcenterConstraint = definePointConstraint({
+      kind: "circumcenter",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.circumcenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.circumcenter: 3 vertex id ph\u1EA3i non-empty");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return `${obj.label} = t\xE2m ngo\u1EA1i ti\u1EBFp \u0394${labels}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        return board.create("circumcenter", [a, b, c3], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/incenter.ts
+var incenterConstraint;
+var init_incenter = __esm({
+  "src/core/scene/kinds/point-constraints/incenter.ts"() {
+    init_types2();
+    incenterConstraint = definePointConstraint({
+      kind: "incenter",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.incenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.incenter: 3 vertex id ph\u1EA3i non-empty");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return `${obj.label} = t\xE2m n\u1ED9i ti\u1EBFp \u0394${labels}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        return board.create("incenter", [a, b, c3], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onLine.ts
+var onLineConstraint;
+var init_onLine = __esm({
+  "src/core/scene/kinds/point-constraints/onLine.ts"() {
+    init_types2();
+    onLineConstraint = definePointConstraint({
+      kind: "onLine",
+      describe: (obj, state, c) => `${obj.label} tr\xEAn \u0111\u01B0\u1EDDng ${state?.objects[c.lineId]?.label ?? c.lineId}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const line = ctx.resolveRef(c.lineId);
+        const p1 = line.point1;
+        const p2 = line.point2;
+        const sx = p1 && p2 ? p1.X() + c.t * (p2.X() - p1.X()) : c.t;
+        const sy = p1 && p2 ? p1.Y() + c.t * (p2.Y() - p1.Y()) : c.t;
+        return board.create("glider", [sx, sy, line], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onSegment.ts
+var onSegmentConstraint;
+var init_onSegment = __esm({
+  "src/core/scene/kinds/point-constraints/onSegment.ts"() {
+    init_types2();
+    onSegmentConstraint = definePointConstraint({
+      kind: "onSegment",
+      describe: (obj, state, c) => `${obj.label} tr\xEAn \u0111o\u1EA1n ${state?.objects[c.segmentId]?.label ?? c.segmentId}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const seg = ctx.resolveRef(c.segmentId);
+        const p1 = seg.point1;
+        const p2 = seg.point2;
+        const sx = p1 && p2 ? p1.X() + c.t * (p2.X() - p1.X()) : c.t;
+        const sy = p1 && p2 ? p1.Y() + c.t * (p2.Y() - p1.Y()) : c.t;
+        return board.create("glider", [sx, sy, seg], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onCircle.ts
+var onCircleConstraint;
+var init_onCircle = __esm({
+  "src/core/scene/kinds/point-constraints/onCircle.ts"() {
+    init_types2();
+    onCircleConstraint = definePointConstraint({
+      kind: "onCircle",
+      describe: (obj, state, c) => `${obj.label} tr\xEAn \u0111\u01B0\u1EDDng tr\xF2n ${state?.objects[c.circleId]?.label ?? c.circleId}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const circle = ctx.resolveRef(c.circleId);
+        const O = circle.center ?? circle.midpoint;
+        const ox = O ? O.X() : 0;
+        const oy = O ? O.Y() : 0;
+        return board.create("glider", [ox + Math.cos(c.theta), oy + Math.sin(c.theta), circle], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onPolygon.ts
+var onPolygonConstraint;
+var init_onPolygon = __esm({
+  "src/core/scene/kinds/point-constraints/onPolygon.ts"() {
+    init_types2();
+    onPolygonConstraint = definePointConstraint({
+      kind: "onPolygon",
+      describe: (obj, state, c) => `${obj.label} tr\xEAn \u0111a gi\xE1c ${state?.objects[c.polygonId]?.label ?? c.polygonId}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const poly = ctx.resolveRef(c.polygonId);
+        return board.create("glider", [c.u, c.v, poly], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/centroid.ts
+var centroidConstraint;
+var init_centroid = __esm({
+  "src/core/scene/kinds/point-constraints/centroid.ts"() {
+    init_types2();
+    centroidConstraint = definePointConstraint({
+      kind: "centroid",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.centroid: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.centroid: 3 vertex id ph\u1EA3i non-empty");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return `${obj.label} = tr\u1ECDng t\xE2m \u0394${labels}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        return board.create("point", [
+          () => (a.X() + b.X() + c3.X()) / 3,
+          () => (a.Y() + b.Y() + c3.Y()) / 3
+        ], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/pointConstructions.ts
+function dist(p, q) {
+  return Math.hypot(p[0] - q[0], p[1] - q[1]);
+}
+function sideOf(a, b, p) {
+  return (b[0] - a[0]) * (p[1] - a[1]) - (b[1] - a[1]) * (p[0] - a[0]);
+}
+function arcMidpoint(center, radius, a, b, notContaining) {
+  const mcx = (a[0] + b[0]) / 2;
+  const mcy = (a[1] + b[1]) / 2;
+  let ux = mcx - center[0];
+  let uy = mcy - center[1];
+  let len = Math.hypot(ux, uy);
+  if (len < 1e-9) {
+    ux = -(b[1] - a[1]);
+    uy = b[0] - a[0];
+    len = Math.hypot(ux, uy) || 1;
+  }
+  ux /= len;
+  uy /= len;
+  const cand1 = [center[0] + radius * ux, center[1] + radius * uy];
+  const cand2 = [center[0] - radius * ux, center[1] - radius * uy];
+  const sN = sideOf(a, b, notContaining);
+  if (Math.abs(sN) < 1e-9) {
+    return dist(cand1, notContaining) >= dist(cand2, notContaining) ? cand1 : cand2;
+  }
+  const s1 = sideOf(a, b, cand1);
+  return s1 * sN < 0 ? cand1 : cand2;
+}
+function excenter(vertices, oppositeIndex) {
+  const [A, B, C] = vertices;
+  const a = dist(B, C);
+  const b = dist(C, A);
+  const c = dist(A, B);
+  const w = [a, b, c];
+  w[oppositeIndex] = -w[oppositeIndex];
+  const sum = w[0] + w[1] + w[2];
+  if (Math.abs(sum) < 1e-9) return A;
+  return [
+    (w[0] * A[0] + w[1] * B[0] + w[2] * C[0]) / sum,
+    (w[0] * A[1] + w[1] * B[1] + w[2] * C[1]) / sum
+  ];
+}
+function pointAtDistanceCoord(from, through, d) {
+  const dx = through[0] - from[0];
+  const dy = through[1] - from[1];
+  const len = Math.hypot(dx, dy) || 1;
+  return [through[0] + d * dx / len, through[1] + d * dy / len];
+}
+function radicalAxisFoot(o1, r1, o2, r2) {
+  const dx = o2[0] - o1[0], dy = o2[1] - o1[1];
+  const d2 = dx * dx + dy * dy;
+  if (d2 < 1e-12) return o1;
+  const t = (d2 + r1 * r1 - r2 * r2) / (2 * d2);
+  return [o1[0] + t * dx, o1[1] + t * dy];
+}
+var init_pointConstructions = __esm({
+  "src/core/scene/kinds/pointConstructions.ts"() {
+  }
+});
+
+// src/core/scene/kinds/point-constraints/arcMidpoint.ts
+var arcMidpointConstraint;
+var init_arcMidpoint = __esm({
+  "src/core/scene/kinds/point-constraints/arcMidpoint.ts"() {
+    init_pointConstructions();
+    init_types2();
+    arcMidpointConstraint = definePointConstraint({
+      kind: "arcMidpoint",
+      validate: (c) => {
+        if (!c.circle || !c.a || !c.b || !c.notContaining) {
+          throw new Error("point.arcMidpoint: circle, a, b, notContaining b\u1EAFt bu\u1ED9c");
+        }
+      },
+      describe: (obj, state, c) => {
+        const al = state?.objects[c.a]?.label ?? c.a;
+        const bl = state?.objects[c.b]?.label ?? c.b;
+        const nl = state?.objects[c.notContaining]?.label ?? c.notContaining;
+        return `${obj.label} = trung \u0111i\u1EC3m cung ${al}${bl} (kh\xF4ng ch\u1EE9a ${nl})`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const circle = ctx.resolveRef(c.circle);
+        const A = ctx.resolveRef(c.a);
+        const B = ctx.resolveRef(c.b);
+        const N = ctx.resolveRef(c.notContaining);
+        const O = circle?.center ?? circle?.midpoint ?? circle;
+        const am = () => arcMidpoint(
+          [O.X(), O.Y()],
+          circle.Radius(),
+          [A.X(), A.Y()],
+          [B.X(), B.Y()],
+          [N.X(), N.Y()]
+        );
+        return board.create("point", [() => am()[0], () => am()[1]], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/excenter.ts
+var excenterConstraint;
+var init_excenter = __esm({
+  "src/core/scene/kinds/point-constraints/excenter.ts"() {
+    init_pointConstructions();
+    init_types2();
+    excenterConstraint = definePointConstraint({
+      kind: "excenter",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.excenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.opposite) throw new Error("point.excenter: opposite b\u1EAFt bu\u1ED9c");
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.excenter: 3 vertex id ph\u1EA3i non-empty");
+        }
+        if (!c.vertices.includes(c.opposite)) {
+          throw new Error("point.excenter: opposite ph\u1EA3i l\xE0 m\u1ED9t trong vertices");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        const opp = state?.objects[c.opposite]?.label ?? c.opposite;
+        return `${obj.label} = t\xE2m b\xE0ng ti\u1EBFp \u0394${labels} \u0111\u1ED1i di\u1EC7n ${opp}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        const oppIdx = c.vertices.indexOf(c.opposite);
+        const idx = oppIdx < 0 ? 0 : oppIdx;
+        const ex = () => excenter(
+          [[a.X(), a.Y()], [b.X(), b.Y()], [c3.X(), c3.Y()]],
+          idx
+        );
+        return board.create("point", [() => ex()[0], () => ex()[1]], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/shared.ts
 function buildJxgTransforms(board, ctx, t) {
   switch (t.kind) {
     case "translate":
@@ -959,11 +1389,392 @@ function buildJxgTransforms(board, ctx, t) {
     }
   }
 }
+function makeDistanceFn(ctx, d) {
+  const scale3 = d.scale ?? 1;
+  const offset = d.offset ?? 0;
+  if (d.kind === "literal") {
+    const v = d.value;
+    return () => scale3 * v + offset;
+  }
+  if (d.kind === "segmentLength") {
+    const p = ctx.resolveRef(d.p1);
+    const q = ctx.resolveRef(d.p2);
+    return () => scale3 * Math.hypot(p.X() - q.X(), p.Y() - q.Y()) + offset;
+  }
+  const circle = ctx.resolveRef(d.circle);
+  return () => scale3 * circle.Radius() + offset;
+}
+function buildPointOpts(obj) {
+  return {
+    name: obj.label,
+    withLabel: obj.attrs.showLabel ?? true,
+    visible: obj.visible,
+    fixed: obj.locked,
+    strokeColor: obj.attrs.color ?? "#1e40af",
+    fillColor: obj.attrs.color ?? "#1e40af",
+    face: obj.attrs.face ?? "o",
+    size: obj.attrs.size ?? 4
+  };
+}
+var init_shared = __esm({
+  "src/core/scene/kinds/point-constraints/shared.ts"() {
+  }
+});
+
+// src/core/scene/kinds/point-constraints/pointAtDistance.ts
+var pointAtDistanceConstraint;
+var init_pointAtDistance = __esm({
+  "src/core/scene/kinds/point-constraints/pointAtDistance.ts"() {
+    init_pointConstructions();
+    init_types2();
+    init_shared();
+    pointAtDistanceConstraint = definePointConstraint({
+      kind: "pointAtDistance",
+      describe: (obj, state, c) => {
+        const fromL = state?.objects[c.from]?.label ?? c.from;
+        const thrL = state?.objects[c.through]?.label ?? c.through;
+        const d = c.distance;
+        const dLabel = d.kind === "literal" ? `${d.value}` : d.kind === "segmentLength" ? `${state?.objects[d.p1]?.label ?? d.p1}${state?.objects[d.p2]?.label ?? d.p2}` : `b\xE1n k\xEDnh (${state?.objects[d.circle]?.label ?? d.circle})`;
+        return `${obj.label} = tr\xEAn tia ${fromL}${thrL} k\xE9o d\xE0i, c\xE1ch ${thrL} kho\u1EA3ng ${dLabel}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const A = ctx.resolveRef(c.from);
+        const B = ctx.resolveRef(c.through);
+        const dFn = makeDistanceFn(ctx, c.distance);
+        const pc = () => pointAtDistanceCoord([A.X(), A.Y()], [B.X(), B.Y()], dFn());
+        return board.create("point", [() => pc()[0], () => pc()[1]], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/circleIntersection.ts
+var circleIntersectionConstraint;
+var init_circleIntersection = __esm({
+  "src/core/scene/kinds/point-constraints/circleIntersection.ts"() {
+    init_types2();
+    circleIntersectionConstraint = definePointConstraint({
+      kind: "circleIntersection",
+      // Không có describe-arm riêng trong point.ts → giữ fallback `Điểm ${label}`.
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const k1 = ctx.resolveRef(c.c1);
+        const k2 = ctx.resolveRef(c.c2);
+        return board.create("intersection", [k1, k2, c.which], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/circleSecondIntersection.ts
+var circleSecondIntersectionConstraint;
+var init_circleSecondIntersection = __esm({
+  "src/core/scene/kinds/point-constraints/circleSecondIntersection.ts"() {
+    init_types2();
+    circleSecondIntersectionConstraint = definePointConstraint({
+      kind: "circleSecondIntersection",
+      // Không có describe-arm riêng trong point.ts → giữ fallback `Điểm ${label}`.
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const k1 = ctx.resolveRef(c.c1);
+        const k2 = ctx.resolveRef(c.c2);
+        const ex = ctx.resolveRef(c.exclude);
+        return board.create("otherintersection", [k1, k2, ex], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/secondIntersection.ts
+var secondIntersectionConstraint;
+var init_secondIntersection = __esm({
+  "src/core/scene/kinds/point-constraints/secondIntersection.ts"() {
+    init_types2();
+    secondIntersectionConstraint = definePointConstraint({
+      kind: "secondIntersection",
+      // Không có describe-arm riêng trong point.ts → giữ fallback `Điểm ${label}`.
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const line = ctx.resolveRef(c.line);
+        const circle = ctx.resolveRef(c.circle);
+        const other = ctx.resolveRef(c.other);
+        return board.create("otherintersection", [circle, line, other], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/tangencyPoint.ts
+var tangencyPointConstraint;
+var init_tangencyPoint = __esm({
+  "src/core/scene/kinds/point-constraints/tangencyPoint.ts"() {
+    init_types2();
+    tangencyPointConstraint = definePointConstraint({
+      kind: "tangencyPoint",
+      // Không có describe-arm riêng trong point.ts → giữ fallback `Điểm ${label}`.
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const circle = ctx.resolveRef(c.circle);
+        const line = ctx.resolveRef(c.onLine);
+        const O = circle?.center ?? circle?.midpoint ?? circle;
+        return board.create("perpendicularpoint", [line, O], opts);
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/transformed.ts
+var transformedConstraint;
+var init_transformed = __esm({
+  "src/core/scene/kinds/point-constraints/transformed.ts"() {
+    init_types2();
+    init_shared();
+    transformedConstraint = definePointConstraint({
+      kind: "transformed",
+      describe: (obj, state, c) => {
+        const t = c.transform;
+        const labelRef = (id) => state?.objects[id]?.label ?? id;
+        const op = t.kind === "translate" ? `t\u1ECBnh ti\u1EBFn (${t.dx.toFixed(2)}, ${t.dy.toFixed(2)})` : t.kind === "rotate" ? `quay ${(t.angleRad * 180 / Math.PI).toFixed(0)}\xB0 quanh ${labelRef(t.center)}` : t.kind === "reflectLine" ? `\u0111\u1ED1i x\u1EE9ng qua ${labelRef(t.line)}` : t.kind === "reflectPoint" ? `\u0111\u1ED1i x\u1EE9ng qua \u0111i\u1EC3m ${labelRef(t.center)}` : t.kind === "dilate" ? `v\u1ECB t\u1EF1 k=${t.k} quanh ${labelRef(t.center)}` : "";
+        return `${obj.label} = \u1EA3nh c\u1EE7a ${labelRef(c.source)} (${op})`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const src = ctx.resolveRef(c.source);
+        const transforms = buildJxgTransforms(board, ctx, c.transform);
+        const parent = transforms.length === 1 ? transforms[0] : transforms;
+        const pt = board.create("point", [src, parent], opts);
+        pt._helpers = transforms;
+        return pt;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/orthocenter.ts
+var orthocenterConstraint;
+var init_orthocenter = __esm({
+  "src/core/scene/kinds/point-constraints/orthocenter.ts"() {
+    init_types2();
+    orthocenterConstraint = definePointConstraint({
+      kind: "orthocenter",
+      validate: (c) => {
+        if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
+          throw new Error("point.orthocenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
+        }
+        if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
+          throw new Error("point.orthocenter: 3 vertex id ph\u1EA3i non-empty");
+        }
+      },
+      describe: (obj, state, c) => {
+        const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
+        return `${obj.label} = tr\u1EF1c t\xE2m \u0394${labels}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(c.vertices[0]);
+        const b = ctx.resolveRef(c.vertices[1]);
+        const c3 = ctx.resolveRef(c.vertices[2]);
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const lineBC = board.create("line", [b, c3], hide);
+        const altA = board.create("perpendicular", [lineBC, a], hide);
+        const lineAC = board.create("line", [a, c3], hide);
+        const altB = board.create("perpendicular", [lineAC, b], hide);
+        const ortho = board.create("intersection", [altA, altB, 0], opts);
+        ortho._helpers = [lineBC, altA, lineAC, altB];
+        return ortho;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onPerpendicular.ts
+var onPerpendicularConstraint;
+var init_onPerpendicular = __esm({
+  "src/core/scene/kinds/point-constraints/onPerpendicular.ts"() {
+    init_types2();
+    onPerpendicularConstraint = definePointConstraint({
+      kind: "onPerpendicular",
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const T = ctx.resolveRef(c.through);
+        const A = ctx.resolveRef(c.perpToA);
+        const B = ctx.resolveRef(c.perpToB);
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const refLine = board.create("line", [A, B], hide);
+        const perpLine = board.create("perpendicular", [refLine, T], hide);
+        const dx = B.X() - A.X();
+        const dy = B.Y() - A.Y();
+        const len = Math.hypot(dx, dy) || 1;
+        const ux = -dy / len;
+        const uy = dx / len;
+        const x0 = T.X() + c.t * ux;
+        const y0 = T.Y() + c.t * uy;
+        const gl = board.create("glider", [x0, y0, perpLine], opts);
+        gl._helpers = [refLine, perpLine];
+        return gl;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onPerpBisector.ts
+var onPerpBisectorConstraint;
+var init_onPerpBisector = __esm({
+  "src/core/scene/kinds/point-constraints/onPerpBisector.ts"() {
+    init_types2();
+    onPerpBisectorConstraint = definePointConstraint({
+      kind: "onPerpBisector",
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const A = ctx.resolveRef(c.p1);
+        const B = ctx.resolveRef(c.p2);
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const refLine = board.create("line", [A, B], hide);
+        const mid = board.create("midpoint", [A, B], hide);
+        const bisLine = board.create("perpendicular", [refLine, mid], hide);
+        const Mx = (A.X() + B.X()) / 2;
+        const My = (A.Y() + B.Y()) / 2;
+        const dx = B.X() - A.X();
+        const dy = B.Y() - A.Y();
+        const len = Math.hypot(dx, dy) || 1;
+        const ux = -dy / len;
+        const uy = dx / len;
+        const x0 = Mx + c.t * ux;
+        const y0 = My + c.t * uy;
+        const gl = board.create("glider", [x0, y0, bisLine], opts);
+        gl._helpers = [refLine, mid, bisLine];
+        return gl;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/onCircleAroundPoint.ts
+var onCircleAroundPointConstraint;
+var init_onCircleAroundPoint = __esm({
+  "src/core/scene/kinds/point-constraints/onCircleAroundPoint.ts"() {
+    init_types2();
+    onCircleAroundPointConstraint = definePointConstraint({
+      kind: "onCircleAroundPoint",
+      describe: (obj) => `\u0110i\u1EC3m ${obj.label}`,
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const C = ctx.resolveRef(c.center);
+        const R = ctx.resolveRef(c.radiusPoint);
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const auxCircle = board.create("circle", [C, R], hide);
+        const r = Math.hypot(R.X() - C.X(), R.Y() - C.Y());
+        const x0 = C.X() + r * Math.cos(c.theta);
+        const y0 = C.Y() + r * Math.sin(c.theta);
+        const gl = board.create("glider", [x0, y0, auxCircle], opts);
+        gl._helpers = [auxCircle];
+        return gl;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/tangentPointExt.ts
+var tangentPointExtConstraint;
+var init_tangentPointExt = __esm({
+  "src/core/scene/kinds/point-constraints/tangentPointExt.ts"() {
+    init_types2();
+    tangentPointExtConstraint = definePointConstraint({
+      kind: "tangentPointExt",
+      describe: (obj, state, c) => {
+        const fromLabel = state?.objects[c.from]?.label ?? c.from;
+        const circleLabel = state?.objects[c.circle]?.label ?? c.circle;
+        return `${obj.label} = ti\u1EBFp \u0111i\u1EC3m c\u1EE7a (${circleLabel}) v\u1EDBi ti\u1EBFp tuy\u1EBFn t\u1EEB ${fromLabel}`;
+      },
+      render: (obj, ctx, c, opts) => {
+        const board = ctx.jxg;
+        const P = ctx.resolveRef(c.from);
+        const K = ctx.resolveRef(c.circle);
+        const O = K.center ?? K.midpoint;
+        const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+        const mid = board.create("midpoint", [P, O], hide);
+        const thales = board.create("circle", [mid, P], hide);
+        const inter = board.create("intersection", [thales, K, c.which], opts);
+        inter._helpers = [mid, thales];
+        return inter;
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/point-constraints/registry.ts
+var ALL, POINT_CONSTRAINTS;
+var init_registry2 = __esm({
+  "src/core/scene/kinds/point-constraints/registry.ts"() {
+    init_free();
+    init_onAxis();
+    init_midpoint();
+    init_perpFoot();
+    init_circumcenter();
+    init_incenter();
+    init_onLine();
+    init_onSegment();
+    init_onCircle();
+    init_onPolygon();
+    init_centroid();
+    init_arcMidpoint();
+    init_excenter();
+    init_pointAtDistance();
+    init_circleIntersection();
+    init_circleSecondIntersection();
+    init_secondIntersection();
+    init_tangencyPoint();
+    init_transformed();
+    init_orthocenter();
+    init_onPerpendicular();
+    init_onPerpBisector();
+    init_onCircleAroundPoint();
+    init_tangentPointExt();
+    ALL = [
+      freeConstraint,
+      onAxisConstraint,
+      midpointConstraint,
+      perpFootConstraint,
+      circumcenterConstraint,
+      incenterConstraint,
+      onLineConstraint,
+      onSegmentConstraint,
+      onCircleConstraint,
+      onPolygonConstraint,
+      centroidConstraint,
+      arcMidpointConstraint,
+      excenterConstraint,
+      pointAtDistanceConstraint,
+      circleIntersectionConstraint,
+      circleSecondIntersectionConstraint,
+      secondIntersectionConstraint,
+      tangencyPointConstraint,
+      transformedConstraint,
+      orthocenterConstraint,
+      onPerpendicularConstraint,
+      onPerpBisectorConstraint,
+      onCircleAroundPointConstraint,
+      tangentPointExtConstraint
+    ];
+    POINT_CONSTRAINTS = new Map(ALL.map((m) => [m.kind, m]));
+  }
+});
+
+// src/core/scene/kinds/point.ts
 var def3;
 var init_point = __esm({
   "src/core/scene/kinds/point.ts"() {
     init_registry();
     init_d_constraint2();
+    init_registry2();
+    init_shared();
     def3 = {
       type: "point",
       schemaVersion: 1,
@@ -973,43 +1784,7 @@ var init_point = __esm({
           throw new Error("point: constraint required");
         }
         const c = a.constraint;
-        if (c.kind === "perpFoot") {
-          if (!c.from || !c.onLine) {
-            throw new Error("point.perpFoot: from v\xE0 onLine b\u1EAFt bu\u1ED9c");
-          }
-        }
-        if (c.kind === "circumcenter") {
-          if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
-            throw new Error("point.circumcenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
-          }
-          if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
-            throw new Error("point.circumcenter: 3 vertex id ph\u1EA3i non-empty");
-          }
-        }
-        if (c.kind === "incenter") {
-          if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
-            throw new Error("point.incenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
-          }
-          if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
-            throw new Error("point.incenter: 3 vertex id ph\u1EA3i non-empty");
-          }
-        }
-        if (c.kind === "centroid") {
-          if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
-            throw new Error("point.centroid: vertices ph\u1EA3i l\xE0 tuple 3 id");
-          }
-          if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
-            throw new Error("point.centroid: 3 vertex id ph\u1EA3i non-empty");
-          }
-        }
-        if (c.kind === "orthocenter") {
-          if (!Array.isArray(c.vertices) || c.vertices.length !== 3) {
-            throw new Error("point.orthocenter: vertices ph\u1EA3i l\xE0 tuple 3 id");
-          }
-          if (!c.vertices[0] || !c.vertices[1] || !c.vertices[2]) {
-            throw new Error("point.orthocenter: 3 vertex id ph\u1EA3i non-empty");
-          }
-        }
+        POINT_CONSTRAINTS.get(c.kind)?.validate?.(c);
       },
       dependsOn: (a) => constraintRefs2D(a.constraint),
       measure: (obj) => {
@@ -1024,132 +1799,16 @@ var init_point = __esm({
       },
       describe: (obj, state) => {
         const c = obj.attrs.constraint;
-        if (c.kind === "free") return `\u0110i\u1EC3m ${obj.label}`;
-        if (c.kind === "onAxis") return `${obj.label} tr\xEAn tr\u1EE5c ${c.axis}`;
-        if (c.kind === "onLine") return `${obj.label} tr\xEAn \u0111\u01B0\u1EDDng ${state?.objects[c.lineId]?.label ?? c.lineId}`;
-        if (c.kind === "onSegment") return `${obj.label} tr\xEAn \u0111o\u1EA1n ${state?.objects[c.segmentId]?.label ?? c.segmentId}`;
-        if (c.kind === "onCircle") return `${obj.label} tr\xEAn \u0111\u01B0\u1EDDng tr\xF2n ${state?.objects[c.circleId]?.label ?? c.circleId}`;
-        if (c.kind === "onPolygon") return `${obj.label} tr\xEAn \u0111a gi\xE1c ${state?.objects[c.polygonId]?.label ?? c.polygonId}`;
-        if (c.kind === "midpoint") {
-          const l1 = state?.objects[c.p1]?.label ?? c.p1;
-          const l2 = state?.objects[c.p2]?.label ?? c.p2;
-          return `${obj.label} = trung \u0111i\u1EC3m ${l1}${l2}`;
-        }
-        if (c.kind === "transformed") {
-          const t = c.transform;
-          const labelRef = (id) => state?.objects[id]?.label ?? id;
-          const op = t.kind === "translate" ? `t\u1ECBnh ti\u1EBFn (${t.dx.toFixed(2)}, ${t.dy.toFixed(2)})` : t.kind === "rotate" ? `quay ${(t.angleRad * 180 / Math.PI).toFixed(0)}\xB0 quanh ${labelRef(t.center)}` : t.kind === "reflectLine" ? `\u0111\u1ED1i x\u1EE9ng qua ${labelRef(t.line)}` : t.kind === "reflectPoint" ? `\u0111\u1ED1i x\u1EE9ng qua \u0111i\u1EC3m ${labelRef(t.center)}` : t.kind === "dilate" ? `v\u1ECB t\u1EF1 k=${t.k} quanh ${labelRef(t.center)}` : "";
-          return `${obj.label} = \u1EA3nh c\u1EE7a ${labelRef(c.source)} (${op})`;
-        }
-        if (c.kind === "perpFoot") {
-          const fromLabel = state?.objects[c.from]?.label ?? c.from;
-          const lineLabel = state?.objects[c.onLine]?.label ?? c.onLine;
-          return `${obj.label} = ch\xE2n \u27C2 t\u1EEB ${fromLabel} xu\u1ED1ng ${lineLabel}`;
-        }
-        if (c.kind === "circumcenter") {
-          const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
-          return `${obj.label} = t\xE2m ngo\u1EA1i ti\u1EBFp \u0394${labels}`;
-        }
-        if (c.kind === "incenter") {
-          const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
-          return `${obj.label} = t\xE2m n\u1ED9i ti\u1EBFp \u0394${labels}`;
-        }
-        if (c.kind === "centroid") {
-          const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
-          return `${obj.label} = tr\u1ECDng t\xE2m \u0394${labels}`;
-        }
-        if (c.kind === "orthocenter") {
-          const labels = c.vertices.map((id) => state?.objects[id]?.label ?? id).join("");
-          return `${obj.label} = tr\u1EF1c t\xE2m \u0394${labels}`;
-        }
+        const mod = POINT_CONSTRAINTS.get(c.kind);
+        if (mod) return mod.describe(obj, state, c);
         return `\u0110i\u1EC3m ${obj.label}`;
       },
       render: (obj, ctx) => {
         const board = ctx.jxg;
         const c = obj.attrs.constraint;
-        const opts = {
-          name: obj.label,
-          withLabel: obj.attrs.showLabel ?? true,
-          visible: obj.visible,
-          fixed: obj.locked,
-          strokeColor: obj.attrs.color ?? "#1e40af",
-          fillColor: obj.attrs.color ?? "#1e40af",
-          face: obj.attrs.face ?? "o",
-          size: obj.attrs.size ?? 4
-        };
-        if (c.kind === "free") return board.create("point", [c.x, c.y], opts);
-        if (c.kind === "onAxis") {
-          const coords = c.axis === "x" ? [c.t, 0] : [0, c.t];
-          return board.create("point", coords, opts);
-        }
-        if (c.kind === "onLine") {
-          const line = ctx.resolveRef(c.lineId);
-          return board.create("glider", [c.t, c.t, line], opts);
-        }
-        if (c.kind === "onSegment") {
-          const seg = ctx.resolveRef(c.segmentId);
-          return board.create("glider", [c.t, c.t, seg], opts);
-        }
-        if (c.kind === "onCircle") {
-          const circle = ctx.resolveRef(c.circleId);
-          return board.create("glider", [Math.cos(c.theta), Math.sin(c.theta), circle], opts);
-        }
-        if (c.kind === "onPolygon") {
-          const poly = ctx.resolveRef(c.polygonId);
-          return board.create("glider", [c.u, c.v, poly], opts);
-        }
-        if (c.kind === "midpoint") {
-          const p1 = ctx.resolveRef(c.p1);
-          const p2 = ctx.resolveRef(c.p2);
-          return board.create("midpoint", [p1, p2], opts);
-        }
-        if (c.kind === "transformed") {
-          const src = ctx.resolveRef(c.source);
-          const transforms = buildJxgTransforms(board, ctx, c.transform);
-          const parent = transforms.length === 1 ? transforms[0] : transforms;
-          const pt = board.create("point", [src, parent], opts);
-          pt._helpers = transforms;
-          return pt;
-        }
-        if (c.kind === "perpFoot") {
-          const from = ctx.resolveRef(c.from);
-          const onLine = ctx.resolveRef(c.onLine);
-          return board.create("perpendicularpoint", [onLine, from], opts);
-        }
-        if (c.kind === "circumcenter") {
-          const a = ctx.resolveRef(c.vertices[0]);
-          const b = ctx.resolveRef(c.vertices[1]);
-          const c3 = ctx.resolveRef(c.vertices[2]);
-          return board.create("circumcenter", [a, b, c3], opts);
-        }
-        if (c.kind === "incenter") {
-          const a = ctx.resolveRef(c.vertices[0]);
-          const b = ctx.resolveRef(c.vertices[1]);
-          const c3 = ctx.resolveRef(c.vertices[2]);
-          return board.create("incenter", [a, b, c3], opts);
-        }
-        if (c.kind === "centroid") {
-          const a = ctx.resolveRef(c.vertices[0]);
-          const b = ctx.resolveRef(c.vertices[1]);
-          const c3 = ctx.resolveRef(c.vertices[2]);
-          return board.create("point", [
-            () => (a.X() + b.X() + c3.X()) / 3,
-            () => (a.Y() + b.Y() + c3.Y()) / 3
-          ], opts);
-        }
-        if (c.kind === "orthocenter") {
-          const a = ctx.resolveRef(c.vertices[0]);
-          const b = ctx.resolveRef(c.vertices[1]);
-          const c3 = ctx.resolveRef(c.vertices[2]);
-          const hide = { visible: false, withLabel: false, fixed: true, name: "" };
-          const lineBC = board.create("line", [b, c3], hide);
-          const altA = board.create("perpendicular", [lineBC, a], hide);
-          const lineAC = board.create("line", [a, c3], hide);
-          const altB = board.create("perpendicular", [lineAC, b], hide);
-          const ortho = board.create("intersection", [altA, altB, 0], opts);
-          ortho._helpers = [lineBC, altA, lineAC, altB];
-          return ortho;
-        }
+        const opts = buildPointOpts(obj);
+        const mod = POINT_CONSTRAINTS.get(c.kind);
+        if (mod) return mod.render(obj, ctx, c, opts);
         return board.create("point", [0, 0], opts);
       },
       /**
@@ -1258,6 +1917,10 @@ function constructionRefs(c) {
       return [c.p1, c.vertex, c.p2];
     case "angleBisectorLines":
       return [stripBorderSuffix(c.line1), stripBorderSuffix(c.line2)];
+    case "lineThrough":
+      return [...c.points];
+    case "radicalAxis":
+      return [c.circle1, c.circle2];
     case "tangent":
       return [c.throughPoint, c.toCircle];
   }
@@ -1267,6 +1930,7 @@ var init_line = __esm({
   "src/core/scene/kinds/line.ts"() {
     init_registry();
     init_labelOf();
+    init_pointConstructions();
     def5 = {
       type: "line",
       schemaVersion: 1,
@@ -1291,6 +1955,10 @@ var init_line = __esm({
             return `${obj.label}: ph\xE2n gi\xE1c g\xF3c ${L(c.p1)}${L(c.vertex)}${L(c.p2)}`;
           case "angleBisectorLines":
             return `${obj.label}: ph\xE2n gi\xE1c ${L(c.line1)} & ${L(c.line2)} (${c.branch === 0 ? "1" : "2"})`;
+          case "lineThrough":
+            return `${obj.label}: \u0111\u01B0\u1EDDng qua ${c.points.map(L).join("")}`;
+          case "radicalAxis":
+            return `${obj.label}: tr\u1EE5c \u0111\u1EB3ng ph\u01B0\u01A1ng ${L(c.circle1)} & ${L(c.circle2)}`;
           case "tangent":
             return `${obj.label}: ti\u1EBFp tuy\u1EBFn ${L(c.toCircle)} qua ${L(c.throughPoint)}`;
         }
@@ -1371,6 +2039,47 @@ var init_line = __esm({
             selected._helpers = [other];
             return selected;
           }
+          case "lineThrough": {
+            const pts = c.points.map((id) => ctx.resolveRef(id));
+            let bi = 0, bj = 1, best = -1;
+            for (let i = 0; i < pts.length; i++) {
+              for (let j = i + 1; j < pts.length; j++) {
+                const dx = pts[i].X() - pts[j].X();
+                const dy = pts[i].Y() - pts[j].Y();
+                const d = dx * dx + dy * dy;
+                if (d > best) {
+                  best = d;
+                  bi = i;
+                  bj = j;
+                }
+              }
+            }
+            return board.create("line", [pts[bi], pts[bj]], {
+              ...baseOpts,
+              straightFirst: true,
+              straightLast: true
+            });
+          }
+          case "radicalAxis": {
+            const k1 = ctx.resolveRef(c.circle1);
+            const k2 = ctx.resolveRef(c.circle2);
+            const o1 = () => [k1.center.X(), k1.center.Y()];
+            const o2 = () => [k2.center.X(), k2.center.Y()];
+            const foot = () => radicalAxisFoot(o1(), k1.Radius(), o2(), k2.Radius());
+            const hide = { visible: false, withLabel: false, fixed: true, name: "" };
+            const f1 = board.create("point", [() => foot()[0], () => foot()[1]], hide);
+            const f2 = board.create("point", [
+              () => foot()[0] - (o2()[1] - o1()[1]),
+              () => foot()[1] + (o2()[0] - o1()[0])
+            ], hide);
+            const line = board.create("line", [f1, f2], {
+              ...baseOpts,
+              straightFirst: true,
+              straightLast: true
+            });
+            line._helpers = [f1, f2];
+            return line;
+          }
           case "tangent": {
             const through = ctx.resolveRef(c.throughPoint);
             const toCircle = ctx.resolveRef(c.toCircle);
@@ -1489,10 +2198,29 @@ var init_vector = __esm({
 });
 
 // src/core/scene/kinds/circle.ts
+function asConstruction(a) {
+  if (a.construction) return a.construction;
+  const raw = a;
+  if (raw.kind === "incircle" && raw.vertices) {
+    return {
+      kind: "incircle",
+      p1: raw.vertices[0],
+      p2: raw.vertices[1],
+      p3: raw.vertices[2]
+    };
+  }
+  return void 0;
+}
 function constructionRefs2(c) {
   switch (c.kind) {
     case "circumscribed":
       return [c.p1, c.p2, c.p3];
+    case "incircle":
+      return [c.p1, c.p2, c.p3];
+    case "excircle":
+      return [c.p1, c.p2, c.p3];
+    case "diameter":
+      return [c.p1, c.p2];
   }
 }
 var def8;
@@ -1500,19 +2228,33 @@ var init_circle = __esm({
   "src/core/scene/kinds/circle.ts"() {
     init_registry();
     init_labelOf();
+    init_pointConstructions();
     def8 = {
       type: "circle",
       schemaVersion: 1,
       migrate: {},
       validate: (a) => {
-        if (a?.construction) return;
+        if (asConstruction(a)) return;
+        if (typeof a?.radius === "number") {
+          if (!a.center) throw new Error("circle: center b\u1EAFt bu\u1ED9c khi d\xF9ng radius");
+          if (!(a.radius > 0)) throw new Error("circle: radius ph\u1EA3i > 0");
+          return;
+        }
         if (!a?.center || !a?.surfacePoint) {
-          throw new Error("circle: center v\xE0 surfacePoint b\u1EAFt bu\u1ED9c (ho\u1EB7c construction)");
+          throw new Error("circle: center v\xE0 surfacePoint b\u1EAFt bu\u1ED9c (ho\u1EB7c construction / radius)");
         }
       },
-      dependsOn: (a) => a.construction ? constructionRefs2(a.construction) : [a.center, a.surfacePoint],
+      dependsOn: (a) => {
+        const c = asConstruction(a);
+        if (c) return constructionRefs2(c);
+        if (typeof a.radius === "number") return [a.center];
+        return [a.center, a.surfacePoint];
+      },
       measure: (obj, state) => {
-        if (obj.attrs.construction) return null;
+        if (asConstruction(obj.attrs)) return null;
+        if (typeof obj.attrs.radius === "number") {
+          return [{ label: "r", value: obj.attrs.radius }];
+        }
         const center = obj.attrs.center ? state.objects[obj.attrs.center] : void 0;
         const surface = obj.attrs.surfacePoint ? state.objects[obj.attrs.surfacePoint] : void 0;
         if (!center || !surface) return null;
@@ -1525,17 +2267,31 @@ var init_circle = __esm({
       },
       describe: (obj, state) => {
         const L = (id) => labelOf(id, state);
-        const c = obj.attrs.construction;
+        const c = asConstruction(obj.attrs);
         if (c?.kind === "circumscribed") {
           return `\u0110\u01B0\u1EDDng tr\xF2n \u0111i qua ${L(c.p1)}${L(c.p2)}${L(c.p3)}`;
         }
+        if (c?.kind === "incircle") {
+          return `\u0110\u01B0\u1EDDng tr\xF2n n\u1ED9i ti\u1EBFp \u0394${L(c.p1)}${L(c.p2)}${L(c.p3)}`;
+        }
+        if (c?.kind === "excircle") {
+          return `\u0110\u01B0\u1EDDng tr\xF2n b\xE0ng ti\u1EBFp \u0394${L(c.p1)}${L(c.p2)}${L(c.p3)} \u0111\u1ED1i di\u1EC7n ${L(c.opposite)}`;
+        }
+        if (c?.kind === "diameter") {
+          return `\u0110\u01B0\u1EDDng tr\xF2n \u0111\u01B0\u1EDDng k\xEDnh ${L(c.p1)}${L(c.p2)}`;
+        }
+        if (typeof obj.attrs.radius === "number") {
+          return `\u0110\u01B0\u1EDDng tr\xF2n t\xE2m ${L(obj.attrs.center)} b\xE1n k\xEDnh ${obj.attrs.radius}`;
+        }
         return `\u0110\u01B0\u1EDDng tr\xF2n t\xE2m ${L(obj.attrs.center)} b\xE1n k\xEDnh ${L(obj.attrs.center)}${L(obj.attrs.surfacePoint)}`;
       },
       render: (obj, ctx) => {
         const board = ctx.jxg;
+        const isCenterLabel = (l) => /^[A-Z]['′]?\d*$/u.test(l);
+        const isCenter = isCenterLabel(obj.label);
         const baseOpts = {
           name: obj.label,
-          withLabel: obj.attrs.showLabel ?? false,
+          withLabel: isCenter ? obj.attrs.showLabel ?? false : true,
           strokeColor: obj.attrs.color ?? "#0f172a",
           strokeWidth: obj.attrs.width ?? 2,
           dash: obj.attrs.dash ?? 0,
@@ -1543,13 +2299,81 @@ var init_circle = __esm({
           visible: obj.visible,
           fixed: obj.locked
         };
-        const c = obj.attrs.construction;
+        const c = asConstruction(obj.attrs);
         if (c?.kind === "circumscribed") {
           const p1 = ctx.resolveRef(c.p1);
           const p2 = ctx.resolveRef(c.p2);
           const p3 = ctx.resolveRef(c.p3);
+          if (isCenter) {
+            const center2 = board.create("circumcenter", [p1, p2, p3], {
+              visible: obj.visible,
+              withLabel: true,
+              fixed: true,
+              name: obj.label
+            });
+            const circ = board.create("circumcircle", [p1, p2, p3], { ...baseOpts, withLabel: false });
+            circ.center = circ.center ?? center2;
+            circ._helpers = [center2];
+            return circ;
+          }
           return board.create("circumcircle", [p1, p2, p3], baseOpts);
         }
+        if (c?.kind === "incircle") {
+          const p1 = ctx.resolveRef(c.p1);
+          const p2 = ctx.resolveRef(c.p2);
+          const p3 = ctx.resolveRef(c.p3);
+          if (isCenter) {
+            const center2 = board.create("incenter", [p1, p2, p3], {
+              visible: obj.visible,
+              withLabel: true,
+              fixed: true,
+              name: obj.label
+            });
+            const circ = board.create("incircle", [p1, p2, p3], { ...baseOpts, withLabel: false });
+            circ.center = circ.center ?? center2;
+            circ._helpers = [center2];
+            return circ;
+          }
+          return board.create("incircle", [p1, p2, p3], baseOpts);
+        }
+        if (c?.kind === "excircle") {
+          const P = [ctx.resolveRef(c.p1), ctx.resolveRef(c.p2), ctx.resolveRef(c.p3)];
+          const ids = [c.p1, c.p2, c.p3];
+          const oppIdx = Math.max(0, ids.indexOf(c.opposite));
+          const verts = () => [
+            [P[0].X(), P[0].Y()],
+            [P[1].X(), P[1].Y()],
+            [P[2].X(), P[2].Y()]
+          ];
+          const ctr = () => excenter(verts(), oppIdx);
+          const radius = () => {
+            const I = ctr();
+            const others = [0, 1, 2].filter((i) => i !== oppIdx);
+            const v = verts();
+            const a = v[others[0]];
+            const b = v[others[1]];
+            const dx = b[0] - a[0];
+            const dy = b[1] - a[1];
+            const len = Math.hypot(dx, dy) || 1;
+            return Math.abs((I[0] - a[0]) * dy - (I[1] - a[1]) * dx) / len;
+          };
+          const center2 = board.create("point", [() => ctr()[0], () => ctr()[1]], { visible: false, withLabel: false, fixed: true, name: "" });
+          const circ = board.create("circle", [center2, () => radius()], baseOpts);
+          circ._helpers = [center2];
+          return circ;
+        }
+        if (c?.kind === "diameter") {
+          const p1 = ctx.resolveRef(c.p1);
+          const p2 = ctx.resolveRef(c.p2);
+          const center2 = board.create("midpoint", [p1, p2], { visible: false, withLabel: false, fixed: true, name: "" });
+          const circ = board.create("circle", [center2, p2], baseOpts);
+          circ._helpers = [center2];
+          return circ;
+        }
+        if (typeof obj.attrs.radius === "number") {
+          const center2 = ctx.resolveRef(obj.attrs.center);
+          return board.create("circle", [center2, obj.attrs.radius], baseOpts);
+        }
         const center = ctx.resolveRef(obj.attrs.center);
         const surface = ctx.resolveRef(obj.attrs.surfacePoint);
         return board.create("circle", [center, surface], baseOpts);
@@ -1709,6 +2533,26 @@ function regularVertexLabels(p1Label, p2Label, n) {
   }
   return `${p1Label}${p2Label}\u2026`;
 }
+function specialShapeName(kind) {
+  switch (kind) {
+    case "square":
+      return "H\xECnh vu\xF4ng";
+    case "rectangle":
+      return "H\xECnh ch\u1EEF nh\u1EADt";
+    case "rhombus":
+      return "H\xECnh thoi";
+    case "parallelogram":
+      return "H\xECnh b\xECnh h\xE0nh";
+    case "isoTrapezoid":
+      return "H\xECnh thang c\xE2n";
+    case "isoTriangle":
+      return "Tam gi\xE1c c\xE2n";
+    case "rightTriangle":
+      return "Tam gi\xE1c vu\xF4ng";
+    case "regular":
+      return "";
+  }
+}
 var def11;
 var init_polygon = __esm({
   "src/core/scene/kinds/polygon.ts"() {
@@ -1720,13 +2564,27 @@ var init_polygon = __esm({
       migrate: {},
       validate: (a) => {
         if (a?.construction) {
-          if (a.construction.kind === "regular") {
-            if (!a.construction.p1 || !a.construction.p2) {
-              throw new Error("polygon (regular): p1 v\xE0 p2 b\u1EAFt bu\u1ED9c");
-            }
-            if (!Number.isFinite(a.construction.n) || a.construction.n < 3) {
-              throw new Error("polygon (regular): n \u2265 3");
-            }
+          const c = a.construction;
+          if (c.kind === "regular") {
+            if (!c.p1 || !c.p2) throw new Error("polygon (regular): p1 v\xE0 p2 b\u1EAFt bu\u1ED9c");
+            if (!Number.isFinite(c.n) || c.n < 3) throw new Error("polygon (regular): n \u2265 3");
+            return;
+          }
+          if (c.kind === "square") {
+            if (!c.p1 || !c.p2) throw new Error("polygon (square): p1 v\xE0 p2 b\u1EAFt bu\u1ED9c");
+            return;
+          }
+          if (c.kind === "rectangle" || c.kind === "rhombus" || c.kind === "parallelogram" || c.kind === "isoTrapezoid") {
+            if (!c.p1 || !c.p2 || !c.p3) throw new Error(`polygon (${c.kind}): p1, p2, p3 b\u1EAFt bu\u1ED9c`);
+            return;
+          }
+          if (c.kind === "isoTriangle") {
+            if (!c.base1 || !c.base2 || !c.apex) throw new Error("polygon (isoTriangle): base1, base2, apex b\u1EAFt bu\u1ED9c");
+            return;
+          }
+          if (c.kind === "rightTriangle") {
+            if (!c.rightAngle || !c.leg1End || !c.leg2End) throw new Error("polygon (rightTriangle): rightAngle, leg1End, leg2End b\u1EAFt bu\u1ED9c");
+            return;
           }
           return;
         }
@@ -1735,14 +2593,51 @@ var init_polygon = __esm({
         }
       },
       dependsOn: (a) => {
-        if (a.construction?.kind === "regular") return [a.construction.p1, a.construction.p2];
-        return [...a.vertices ?? []];
+        const c = a.construction;
+        if (!c) return [...a.vertices ?? []];
+        switch (c.kind) {
+          case "regular":
+            return [c.p1, c.p2];
+          case "square":
+            return [c.p1, c.p2];
+          case "rectangle":
+          case "rhombus":
+          case "parallelogram":
+          case "isoTrapezoid":
+            return [c.p1, c.p2, c.p3];
+          case "isoTriangle":
+            return [c.base1, c.base2, c.apex];
+          case "rightTriangle":
+            return [c.rightAngle, c.leg1End, c.leg2End];
+        }
       },
       describe: (obj, state) => {
-        if (obj.attrs.construction?.kind === "regular") {
-          const c = obj.attrs.construction;
-          const labels = regularVertexLabels(labelOf(c.p1, state), labelOf(c.p2, state), c.n);
-          return `${regularPolygonName(c.n)} ${labels}`;
+        const c = obj.attrs.construction;
+        if (c) {
+          if (c.kind === "regular") {
+            const labels2 = regularVertexLabels(labelOf(c.p1, state), labelOf(c.p2, state), c.n);
+            return `${regularPolygonName(c.n)} ${labels2}`;
+          }
+          const name = specialShapeName(c.kind);
+          let labels = [];
+          switch (c.kind) {
+            case "square":
+              labels = [labelOf(c.p1, state), labelOf(c.p2, state)];
+              break;
+            case "rectangle":
+            case "rhombus":
+            case "parallelogram":
+            case "isoTrapezoid":
+              labels = [labelOf(c.p1, state), labelOf(c.p2, state), labelOf(c.p3, state)];
+              break;
+            case "isoTriangle":
+              labels = [labelOf(c.apex, state), labelOf(c.base1, state), labelOf(c.base2, state)];
+              break;
+            case "rightTriangle":
+              labels = [labelOf(c.rightAngle, state), labelOf(c.leg1End, state), labelOf(c.leg2End, state)];
+              break;
+          }
+          return `${name} ${labels.join("")}`;
         }
         return `\u0110a gi\xE1c ${(obj.attrs.vertices ?? []).map((id) => labelOf(id, state)).join("")}`;
       },
@@ -1750,22 +2645,85 @@ var init_polygon = __esm({
         const board = ctx.jxg;
         const label = obj.label;
         const showValue = obj.attrs.showValue ?? false;
-        if (obj.attrs.construction?.kind === "regular") {
-          const c = obj.attrs.construction;
-          const p1 = ctx.resolveRef(c.p1);
-          const p2 = ctx.resolveRef(c.p2);
-          return board.create("regularpolygon", [p1, p2, c.n], {
-            name: label,
-            withLabel: obj.attrs.showLabel ?? false,
-            borders: {
-              strokeColor: obj.attrs.color ?? "#0f172a",
-              strokeWidth: obj.attrs.width ?? 2
-            },
-            fillColor: obj.attrs.color ?? "#60a5fa",
-            fillOpacity: obj.attrs.fillOpacity ?? 0.15,
-            visible: obj.visible,
-            fixed: obj.locked
+        const cons = obj.attrs.construction;
+        const commonAttrs = {
+          name: label,
+          withLabel: obj.attrs.showLabel ?? false,
+          borders: {
+            strokeColor: obj.attrs.color ?? "#0f172a",
+            strokeWidth: obj.attrs.width ?? 2
+          },
+          fillColor: obj.attrs.color ?? "#60a5fa",
+          fillOpacity: obj.attrs.fillOpacity ?? 0.15,
+          visible: obj.visible,
+          fixed: obj.locked
+        };
+        if (cons?.kind === "regular") {
+          const p1 = ctx.resolveRef(cons.p1);
+          const p2 = ctx.resolveRef(cons.p2);
+          return board.create("regularpolygon", [p1, p2, cons.n], commonAttrs);
+        }
+        if (cons?.kind === "square") {
+          const p1 = ctx.resolveRef(cons.p1);
+          const p2 = ctx.resolveRef(cons.p2);
+          return board.create("regularpolygon", [p1, p2, 4], commonAttrs);
+        }
+        if (cons?.kind === "rectangle" || cons?.kind === "rhombus" || cons?.kind === "parallelogram") {
+          const A = ctx.resolveRef(cons.p1);
+          const B = ctx.resolveRef(cons.p2);
+          const C = ctx.resolveRef(cons.p3);
+          const D = board.create(
+            "point",
+            [() => A.X() + C.X() - B.X(), () => A.Y() + C.Y() - B.Y()],
+            { visible: false, withLabel: false, fixed: true, name: "" }
+          );
+          const poly2 = board.create("polygon", [A, B, C, D], commonAttrs);
+          poly2._helpers = [D];
+          return poly2;
+        }
+        if (cons?.kind === "isoTrapezoid") {
+          const A = ctx.resolveRef(cons.p1);
+          const B = ctx.resolveRef(cons.p2);
+          const C = ctx.resolveRef(cons.p3);
+          const Dx = () => {
+            const Mx = (A.X() + B.X()) / 2;
+            const My = (A.Y() + B.Y()) / 2;
+            const ux = B.X() - A.X();
+            const uy = B.Y() - A.Y();
+            const len2 = ux * ux + uy * uy || 1;
+            const proj = ((C.X() - Mx) * ux + (C.Y() - My) * uy) / len2;
+            return C.X() - 2 * proj * ux;
+          };
+          const Dy = () => {
+            const Mx = (A.X() + B.X()) / 2;
+            const My = (A.Y() + B.Y()) / 2;
+            const ux = B.X() - A.X();
+            const uy = B.Y() - A.Y();
+            const len2 = ux * ux + uy * uy || 1;
+            const proj = ((C.X() - Mx) * ux + (C.Y() - My) * uy) / len2;
+            return C.Y() - 2 * proj * uy;
+          };
+          const D = board.create("point", [Dx, Dy], {
+            visible: false,
+            withLabel: false,
+            fixed: true,
+            name: ""
           });
+          const poly2 = board.create("polygon", [A, B, C, D], commonAttrs);
+          poly2._helpers = [D];
+          return poly2;
+        }
+        if (cons?.kind === "isoTriangle") {
+          const Apex = ctx.resolveRef(cons.apex);
+          const B1 = ctx.resolveRef(cons.base1);
+          const B2 = ctx.resolveRef(cons.base2);
+          return board.create("polygon", [Apex, B1, B2], commonAttrs);
+        }
+        if (cons?.kind === "rightTriangle") {
+          const R = ctx.resolveRef(cons.rightAngle);
+          const P = ctx.resolveRef(cons.leg1End);
+          const Q = ctx.resolveRef(cons.leg2End);
+          return board.create("polygon", [R, P, Q], commonAttrs);
         }
         const verts = (obj.attrs.vertices ?? []).map((id) => ctx.resolveRef(id));
         const poly = board.create("polygon", verts, {
@@ -2464,7 +3422,7 @@ var init_serialize = __esm({
 
 // src/core/scene/render/types.ts
 var DEFAULT_THEME_3D;
-var init_types2 = __esm({
+var init_types3 = __esm({
   "src/core/scene/render/types.ts"() {
     DEFAULT_THEME_3D = {
       point: { size: 4, color: "#1e40af" },
@@ -2479,7 +3437,7 @@ var JxgRenderer3D;
 var init_JxgRenderer3D = __esm({
   "src/core/scene/render/JxgRenderer3D.ts"() {
     init_registry();
-    init_types2();
+    init_types3();
     JxgRenderer3D = class {
       constructor(store, view, options = {}) {
         this.elements = /* @__PURE__ */ new Map();
@@ -5499,6 +6457,20 @@ var init_EditorPanel = __esm({
     );
   }
 });
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function readStoredWidth(key, fallback, min, max) {
+  if (!key || typeof window === "undefined") return fallback;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return fallback;
+    const n = parseInt(raw, 10);
+    if (Number.isFinite(n)) return clamp(n, min, max);
+  } catch {
+  }
+  return fallback;
+}
 function CloseIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
@@ -5506,8 +6478,64 @@ function CloseIcon() {
   ] });
 }
 function LeftPanelShell(props) {
-  const { title, icon, onClose, isDark, tabs, activeTab, onTabChange, testId, children } = props;
+  const {
+    title,
+    icon,
+    onClose,
+    isDark,
+    tabs,
+    activeTab,
+    onTabChange,
+    testId,
+    resizable,
+    widthStorageKey,
+    defaultWidth,
+    minWidth,
+    maxWidth,
+    children
+  } = props;
   const showTabs = !!tabs && tabs.length >= 2;
+  const min = minWidth ?? FALLBACK_MIN_WIDTH;
+  const max = maxWidth ?? FALLBACK_MAX_WIDTH;
+  const initial = clamp(defaultWidth ?? FALLBACK_DEFAULT_WIDTH, min, max);
+  const [width, setWidth] = React5__namespace.useState(
+    () => resizable ? readStoredWidth(widthStorageKey, initial, min, max) : initial
+  );
+  const widthRef = React5__namespace.useRef(width);
+  widthRef.current = width;
+  React5__namespace.useEffect(() => {
+    if (!resizable || !widthStorageKey || typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(widthStorageKey, String(width));
+    } catch {
+    }
+  }, [resizable, widthStorageKey, width]);
+  const onResizeStart = React5__namespace.useCallback(
+    (e) => {
+      if (!resizable) return;
+      e.preventDefault();
+      const startX = e.clientX;
+      const startW = widthRef.current;
+      const onMove = (ev) => {
+        setWidth(clamp(startW + (ev.clientX - startX), min, max));
+      };
+      const onUp = () => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+      document.body.style.cursor = "ew-resize";
+      document.body.style.userSelect = "none";
+    },
+    [resizable, min, max]
+  );
+  const onResizeDoubleClick = React5__namespace.useCallback(() => {
+    if (!resizable) return;
+    setWidth(initial);
+  }, [resizable, initial]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
@@ -5515,10 +6543,12 @@ function LeftPanelShell(props) {
       "aria-label": title,
       "data-testid": testId ?? "left-panel",
       "data-stamp-area": "true",
+      style: resizable ? { width: `${width}px` } : void 0,
       className: [
         isDark ? "theme--dark " : "",
-        "absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200"
-      ].join(""),
+        "absolute left-0 top-0 z-30 flex h-full flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200",
+        resizable ? "" : "w-60"
+      ].join(" "),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-slate-800", children: [
@@ -5553,6 +6583,20 @@ function LeftPanelShell(props) {
             className: "min-h-0 flex-1 overflow-y-auto p-3 space-y-3",
             children
           }
+        ),
+        resizable && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": "K\xE9o \u0111\u1EC3 \u0111\u1ED5i r\u1ED9ng panel",
+            "data-testid": "left-panel-resizer",
+            onMouseDown: onResizeStart,
+            onDoubleClick: onResizeDoubleClick,
+            className: "group absolute right-0 top-0 z-40 h-full w-1.5 -mr-0.5 cursor-ew-resize select-none",
+            title: "K\xE9o \u0111\u1EC3 \u0111\u1ED5i r\u1ED9ng (double-click \u0111\u1EC3 reset)",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-px bg-slate-200 transition group-hover:bg-emerald-400 group-hover:w-0.5 group-active:bg-emerald-500 group-active:w-0.5" })
+          }
         )
       ]
     }
@@ -5582,9 +6626,13 @@ function Section(props) {
     props.children
   ] });
 }
+var FALLBACK_DEFAULT_WIDTH, FALLBACK_MIN_WIDTH, FALLBACK_MAX_WIDTH;
 var init_LeftPanelShell = __esm({
   "src/core/scene/ui/LeftPanelShell.tsx"() {
     "use client";
+    FALLBACK_DEFAULT_WIDTH = 240;
+    FALLBACK_MIN_WIDTH = 220;
+    FALLBACK_MAX_WIDTH = 480;
   }
 });
 
@@ -5936,7 +6984,7 @@ var init_AxisGridSection = __esm({
 
 // src/stamps/shared/StampLeftPanel/types.ts
 var TOOLTIP_DELAY_MS;
-var init_types3 = __esm({
+var init_types4 = __esm({
   "src/stamps/shared/StampLeftPanel/types.ts"() {
     TOOLTIP_DELAY_MS = 400;
   }
@@ -5969,27 +7017,118 @@ function useToolHoverTooltip() {
 }
 var init_useToolHoverTooltip = __esm({
   "src/stamps/shared/StampLeftPanel/useToolHoverTooltip.ts"() {
-    init_types3();
+    init_types4();
   }
 });
+function normalize2(s) {
+  return s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
+}
+function SearchIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20", y1: "20", x2: "16.5", y2: "16.5" })
+  ] });
+}
+function ClearIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+  ] });
+}
+function ToolResultList(props) {
+  const { tools, activeTool, onToolChange } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", "data-testid": "tool-result-list", children: tools.map((t) => {
+    const active = activeTool === t.key;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-tool": t.key,
+        "aria-label": t.label,
+        "aria-pressed": active,
+        onClick: () => onToolChange(t.key),
+        className: [
+          "flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition",
+          active ? "bg-emerald-600 text-white" : "text-slate-700 hover:bg-slate-100"
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center", children: t.icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-[12px] font-medium leading-tight", children: t.label }),
+            t.hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ["block truncate text-[10px] leading-tight", active ? "text-emerald-50" : "text-slate-400"].join(" "), children: t.hint })
+          ] })
+        ]
+      },
+      t.key
+    );
+  }) });
+}
 function ToolGrid(props) {
   const { tools, groupOrder, groupLabels, activeTool, onToolChange, chord } = props;
   const { hover, portalReady, showHover, hideHover } = useToolHoverTooltip();
+  const [query, setQuery] = React5.useState("");
+  const normalizedQuery = React5.useMemo(() => normalize2(query.trim()), [query]);
+  const filteredTools = React5.useMemo(() => {
+    if (!normalizedQuery) return tools;
+    return tools.filter((t) => {
+      if (normalize2(t.label).includes(normalizedQuery)) return true;
+      if (t.hint && normalize2(t.hint).includes(normalizedQuery)) return true;
+      return false;
+    });
+  }, [tools, normalizedQuery]);
   const grouped = React5.useMemo(() => {
     var _a;
     const acc = {};
-    for (const t of tools) {
+    for (const t of filteredTools) {
       (acc[_a = t.group] ?? (acc[_a] = [])).push(t);
     }
     return acc;
-  }, [tools]);
+  }, [filteredTools]);
   const groupKeys = React5.useMemo(
-    () => groupOrder.filter((g) => grouped[g]),
+    () => groupOrder.filter((g) => grouped[g] && grouped[g].length > 0),
     [grouped, groupOrder]
   );
-  const activeGroupTools = chord?.activeGroup ? grouped[chord.activeGroup] ?? null : null;
+  const noMatch = normalizedQuery !== "" && groupKeys.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    groupKeys.map((group) => {
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400", children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "search",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: "T\xECm c\xF4ng c\u1EE5\u2026",
+          "aria-label": "T\xECm c\xF4ng c\u1EE5",
+          "data-testid": "tool-search-input",
+          className: "w-full rounded-md border border-slate-200 bg-slate-50 py-1.5 pl-7 pr-7 text-[12px] text-slate-800 placeholder:text-slate-400 focus:border-emerald-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-emerald-300"
+        }
+      ),
+      query && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setQuery(""),
+          "aria-label": "Xo\xE1 t\xECm ki\u1EBFm",
+          "data-testid": "tool-search-clear",
+          className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 transition hover:bg-slate-200 hover:text-slate-700",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+        }
+      )
+    ] }),
+    noMatch && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-testid": "tool-search-empty",
+        className: "rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-center text-[11px] text-slate-500",
+        children: [
+          "Kh\xF4ng c\xF3 c\xF4ng c\u1EE5 n\xE0o kh\u1EDBp \u201C",
+          query.trim(),
+          "\u201D."
+        ]
+      }
+    ),
+    normalizedQuery !== "" && !noMatch ? /* @__PURE__ */ jsxRuntime.jsx(ToolResultList, { tools: filteredTools, activeTool, onToolChange }) : groupKeys.map((group) => {
       const isChordActive = chord?.activeGroup === group;
       const dimmed = chord?.activeGroup != null && !isChordActive;
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6003,23 +7142,10 @@ function ToolGrid(props) {
             dimmed ? "opacity-55" : "opacity-100"
           ].join(" "),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "mb-1.5 flex items-center justify-between text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: groupLabels[group] }),
-              chord && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "data-testid": `chord-letter-${group}`,
-                  className: [
-                    "font-mono text-[10px] leading-none transition",
-                    isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
-                  ].join(" "),
-                  children: chord.letterForGroup(group)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: grouped[group].map((t, i) => {
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: groupLabels[group] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: grouped[group].map((t) => {
               const active = activeTool === t.key;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
+              return /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
@@ -6036,20 +7162,7 @@ function ToolGrid(props) {
                     "relative flex h-10 items-center justify-center rounded-md transition",
                     active ? "bg-emerald-600 text-white shadow-sm" : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
                   ].join(" "),
-                  children: [
-                    t.icon,
-                    chord && /* @__PURE__ */ jsxRuntime.jsx(
-                      "span",
-                      {
-                        "data-testid": `chord-num-${t.key}`,
-                        className: [
-                          "pointer-events-none absolute bottom-0 right-0.5 font-mono text-[9px] leading-none transition",
-                          active ? "text-white/70" : isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
-                        ].join(" "),
-                        children: i + 1
-                      }
-                    )
-                  ]
+                  children: t.icon
                 },
                 t.key
               );
@@ -6059,22 +7172,6 @@ function ToolGrid(props) {
         group
       );
     }),
-    chord?.activeGroup && activeGroupTools && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "data-testid": "chord-hint",
-        className: "mt-1 rounded border border-emerald-200 bg-emerald-50/60 px-2 py-1 text-[11px] leading-snug text-slate-600",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-semibold text-emerald-700", children: chord.letterForGroup(chord.activeGroup) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 text-slate-400", children: "\u2192" }),
-          activeGroupTools.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2 inline-block", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-semibold text-emerald-700", children: i + 1 }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: t.label })
-          ] }, t.key)),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Esc hu\u1EF7" })
-        ]
-      }
-    ),
     portalReady && hover && typeof document !== "undefined" ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -6141,6 +7238,8 @@ function StampLeftPanelDesktop(props) {
       tabs: tabSpecs,
       activeTab: hasObjects ? tab : void 0,
       onTabChange: hasObjects ? setTab : void 0,
+      resizable: true,
+      widthStorageKey: "xom11.stamp-left-panel.width",
       children: !hasObjects || tab === "tools" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(AxisGridSection, { view, history }),
         /* @__PURE__ */ jsxRuntime.jsx(