@xom11/whiteboard 0.24.0 → 0.24.1

package/dist/geometry-2d.js

@@ -73,10 +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`);
+  }
+  registry.set(def22.type, def22);
+}
 function getKind(type) {
-  const def = registry.get(type);
-  if (!def) throw new Error(`[scene] unknown kind: ${type}`);
-  return def;
+  const def22 = registry.get(type);
+  if (!def22) throw new Error(`[scene] unknown kind: ${type}`);
+  return def22;
 }
 var registry;
 var init_registry = __esm({
@@ -301,67 +307,1621 @@ function nextLabel(state, kind) {
     }
     idx += 1;
   }
-}
-var ALPHABET, LABEL_GROUPS;
-var init_selectors = __esm({
-  "src/core/scene/selectors.ts"() {
-    ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    LABEL_GROUPS = {
-      point: ["point", "intersection"],
-      intersection: ["point", "intersection"]
+}
+var ALPHABET, LABEL_GROUPS;
+var init_selectors = __esm({
+  "src/core/scene/selectors.ts"() {
+    ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    LABEL_GROUPS = {
+      point: ["point", "intersection"],
+      intersection: ["point", "intersection"]
+    };
+  }
+});
+function useEditorState(opts) {
+  const { store, initialState, onHistoryChange, bindKeyboardShortcuts = true } = opts;
+  const onHistoryChangeRef = React__namespace.useRef(onHistoryChange);
+  onHistoryChangeRef.current = onHistoryChange;
+  React__namespace.useEffect(() => {
+    if (initialState?.state) {
+      const loaded = initialState.state;
+      store.withoutHistory(() => {
+        store.dispatch({ type: "LOAD", payload: { state: loaded } });
+      });
+    }
+  }, []);
+  React__namespace.useEffect(() => {
+    onHistoryChangeRef.current?.(store.canUndo(), store.canRedo());
+    const unsub = store.subscribe(() => {
+      onHistoryChangeRef.current?.(store.canUndo(), store.canRedo());
+    });
+    return unsub;
+  }, [store]);
+  React__namespace.useEffect(() => {
+    if (!bindKeyboardShortcuts) return;
+    const onKey = (e) => {
+      const ae = document.activeElement;
+      const inField = !!(ae && (ae.tagName === "INPUT" || ae.tagName === "TEXTAREA" || ae.isContentEditable));
+      if (inField) return;
+      if (!(e.metaKey || e.ctrlKey)) return;
+      const key = e.key.toLowerCase();
+      if (key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        store.undo();
+      } else if (key === "z" && e.shiftKey || key === "y" && !e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        store.redo();
+      }
+    };
+    window.addEventListener("keydown", onKey, { capture: true });
+    return () => window.removeEventListener("keydown", onKey, { capture: true });
+  }, [store, bindKeyboardShortcuts]);
+}
+var init_useEditorState = __esm({
+  "src/core/scene/hooks/useEditorState.ts"() {
+  }
+});
+
+// src/core/scene/hooks/index.ts
+var init_hooks = __esm({
+  "src/core/scene/hooks/index.ts"() {
+    init_useEditorState();
+  }
+});
+
+// src/core/scene/kinds/3d-constraint.ts
+function constraintRefs(c) {
+  switch (c.kind) {
+    case "onPlane":
+      return [c.planeId];
+    case "onLine":
+      return [c.lineId];
+    case "onPolygon":
+      return [c.polygonId];
+    case "onSphere":
+      return [c.sphereId];
+    default:
+      return [];
+  }
+}
+var init_d_constraint = __esm({
+  "src/core/scene/kinds/3d-constraint.ts"() {
+  }
+});
+
+// src/core/scene/kinds/point3d.ts
+var def;
+var init_point3d = __esm({
+  "src/core/scene/kinds/point3d.ts"() {
+    init_registry();
+    init_d_constraint();
+    def = {
+      type: "point3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a || !a.constraint || !a.constraint.kind) {
+          throw new Error("point3d: constraint required");
+        }
+      },
+      dependsOn: (a) => constraintRefs(a.constraint),
+      measure: (obj) => {
+        const c = obj.attrs.constraint;
+        if (c.kind === "free") {
+          return [
+            { label: "x", value: c.x },
+            { label: "y", value: c.y },
+            { label: "z", value: c.z }
+          ];
+        }
+        if (c.kind === "onGround") {
+          return [
+            { label: "x", value: c.x },
+            { label: "y", value: c.y },
+            { label: "z", value: 0 }
+          ];
+        }
+        return null;
+      },
+      describe: (obj) => {
+        const c = obj.attrs.constraint;
+        if (c.kind === "free") return `${obj.label} = (${c.x.toFixed(2)}, ${c.y.toFixed(2)}, ${c.z.toFixed(2)})`;
+        if (c.kind === "onGround") return `${obj.label} = (${c.x.toFixed(2)}, ${c.y.toFixed(2)}, 0)`;
+        if (c.kind === "onAxis") return `${obj.label} tr\xEAn tr\u1EE5c ${c.axis} (t=${c.t.toFixed(2)})`;
+        if (c.kind === "onPlane") return `${obj.label} tr\xEAn m\u1EB7t ${c.planeId}`;
+        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}`;
+        return obj.label;
+      },
+      render: (obj, ctx) => {
+        const view = ctx.jxg;
+        const c = obj.attrs.constraint;
+        const opts = {
+          name: obj.label,
+          visible: obj.visible,
+          fixed: obj.locked,
+          strokeColor: obj.attrs.color ?? "#1e40af",
+          fillColor: obj.attrs.color ?? "#1e40af",
+          size: 4
+        };
+        if (c.kind === "free") {
+          return view.create("point3d", [c.x, c.y, c.z], opts);
+        } else if (c.kind === "onGround") {
+          return view.create("point3d", [c.x, c.y, 0], opts);
+        } else if (c.kind === "onAxis") {
+          const coords = c.axis === "x" ? [c.t, 0, 0] : c.axis === "y" ? [0, c.t, 0] : [0, 0, c.t];
+          return view.create("point3d", coords, opts);
+        } else if (c.kind === "onPlane") {
+          const plane = ctx.resolveRef(c.planeId);
+          return view.create("point3d", [
+            () => plane.F(c.u, c.v)[0],
+            () => plane.F(c.u, c.v)[1],
+            () => plane.F(c.u, c.v)[2]
+          ], opts);
+        } else if (c.kind === "onLine") {
+          const line = ctx.resolveRef(c.lineId);
+          return view.create("point3d", [
+            () => line.F(c.t)[0],
+            () => line.F(c.t)[1],
+            () => line.F(c.t)[2]
+          ], opts);
+        } else if (c.kind === "onPolygon") {
+          const poly = ctx.resolveRef(c.polygonId);
+          return view.create("point3d", [
+            () => poly.F(c.u, c.v)[0],
+            () => poly.F(c.u, c.v)[1],
+            () => poly.F(c.u, c.v)[2]
+          ], opts);
+        } else if (c.kind === "onSphere") {
+          const sph = ctx.resolveRef(c.sphereId);
+          return view.create("point3d", [
+            () => sph.F(c.theta, c.phi)[0],
+            () => sph.F(c.theta, c.phi)[1],
+            () => sph.F(c.theta, c.phi)[2]
+          ], opts);
+        }
+        return view.create("point3d", [0, 0, 0], opts);
+      }
+    };
+    registerKind(def);
+  }
+});
+
+// src/core/scene/kinds/labelOf.ts
+function labelOf(id, state) {
+  return state?.objects[id]?.label ?? id;
+}
+var init_labelOf = __esm({
+  "src/core/scene/kinds/labelOf.ts"() {
+  }
+});
+
+// src/core/scene/kinds/segment3d.ts
+var def2;
+var init_segment3d = __esm({
+  "src/core/scene/kinds/segment3d.ts"() {
+    init_registry();
+    init_labelOf();
+    def2 = {
+      type: "segment3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.p1 || !a?.p2) throw new Error("segment3d: p1 v\xE0 p2 b\u1EAFt bu\u1ED9c");
+      },
+      dependsOn: (a) => [a.p1, a.p2],
+      measure: (obj, state) => {
+        const p1 = state.objects[obj.attrs.p1];
+        const p2 = state.objects[obj.attrs.p2];
+        if (!p1 || !p2) return null;
+        const c1 = p1.attrs.constraint;
+        const c2 = p2.attrs.constraint;
+        if (c1?.kind !== "free" || c2?.kind !== "free") return null;
+        const dx = (c2.x ?? 0) - (c1.x ?? 0);
+        const dy = (c2.y ?? 0) - (c1.y ?? 0);
+        const dz = (c2.z ?? 0) - (c1.z ?? 0);
+        return [{ label: "length", value: Math.hypot(dx, dy, dz) }];
+      },
+      describe: (obj, state) => `\u0110o\u1EA1n th\u1EB3ng ${labelOf(obj.attrs.p1, state)}${labelOf(obj.attrs.p2, state)}`,
+      render: (obj, ctx) => {
+        const view = ctx.jxg;
+        const pA = ctx.resolveRef(obj.attrs.p1);
+        const pB = ctx.resolveRef(obj.attrs.p2);
+        return view.create("line3d", [pA, pB], {
+          straightFirst: false,
+          straightLast: false,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: 2,
+          visible: obj.visible
+        });
+      }
+    };
+    registerKind(def2);
+  }
+});
+
+// src/core/scene/kinds/line3d.ts
+var init_line3d = __esm({
+  "src/core/scene/kinds/line3d.ts"() {
+    init_registry();
+    init_labelOf();
+    registerKind({
+      type: "line3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.p1 || !a?.p2) throw new Error("line3d: p1/p2 required");
+      },
+      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 pA = ctx.resolveRef(obj.attrs.p1);
+        const pB = ctx.resolveRef(obj.attrs.p2);
+        return view.create("line3d", [pA, pB], {
+          straightFirst: true,
+          straightLast: true,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: 2,
+          visible: obj.visible
+        });
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/ray3d.ts
+var init_ray3d = __esm({
+  "src/core/scene/kinds/ray3d.ts"() {
+    init_registry();
+    init_labelOf();
+    registerKind({
+      type: "ray3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.origin || !a?.through) throw new Error("ray3d: origin/through required");
+      },
+      dependsOn: (a) => [a.origin, a.through],
+      describe: (obj, state) => `Tia ${obj.label} t\u1EEB ${labelOf(obj.attrs.origin, state)} qua ${labelOf(obj.attrs.through, state)}`,
+      render: (obj, ctx) => {
+        const view = ctx.jxg;
+        const pOrigin = ctx.resolveRef(obj.attrs.origin);
+        const pThrough = ctx.resolveRef(obj.attrs.through);
+        return view.create("line3d", [pOrigin, pThrough], {
+          straightFirst: false,
+          straightLast: true,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: 2,
+          visible: obj.visible
+        });
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/vector3d.ts
+var init_vector3d = __esm({
+  "src/core/scene/kinds/vector3d.ts"() {
+    init_registry();
+    init_labelOf();
+    registerKind({
+      type: "vector3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.from || !a?.to) throw new Error("vector3d: from/to required");
+      },
+      dependsOn: (a) => [a.from, a.to],
+      describe: (obj, state) => `V\xE9c-t\u01A1 ${obj.label}: ${labelOf(obj.attrs.from, state)} \u2192 ${labelOf(obj.attrs.to, state)}`,
+      render: (obj, ctx) => {
+        const view = ctx.jxg;
+        const pFrom = ctx.resolveRef(obj.attrs.from);
+        const pTo = ctx.resolveRef(obj.attrs.to);
+        return view.create("line3d", [pFrom, pTo], {
+          straightFirst: false,
+          straightLast: false,
+          lastArrow: { type: 1 },
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: 2,
+          visible: obj.visible
+        });
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/plane3d.ts
+var init_plane3d = __esm({
+  "src/core/scene/kinds/plane3d.ts"() {
+    init_registry();
+    init_labelOf();
+    registerKind({
+      type: "plane3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.p1 || !a?.p2 || !a?.p3) throw new Error("plane3d: c\u1EA7n 3 \u0111i\u1EC3m");
+      },
+      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)
+        ], {
+          fillOpacity: 0.15,
+          fillColor: obj.attrs.color ?? "#60a5fa",
+          strokeColor: obj.attrs.color ?? "#60a5fa",
+          visible: obj.visible
+        });
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/polygon3d.ts
+var init_polygon3d = __esm({
+  "src/core/scene/kinds/polygon3d.ts"() {
+    init_registry();
+    registerKind({
+      type: "polygon3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.vertices || a.vertices.length < 3) throw new Error("polygon3d: c\u1EA7n \u22653 vertices");
+      },
+      dependsOn: (a) => [...a.vertices],
+      describe: (obj) => `\u0110a gi\xE1c ${obj.label} (${obj.attrs.vertices.length} \u0111\u1EC9nh)`,
+      render: (obj, ctx) => {
+        const view = ctx.jxg;
+        const refs = obj.attrs.vertices.map((id) => ctx.resolveRef(id));
+        return view.create("polygon3d", [refs], {
+          fillOpacity: 0.3,
+          fillColor: obj.attrs.color ?? "#60a5fa",
+          visible: obj.visible
+        });
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/sphere3d.ts
+var init_sphere3d = __esm({
+  "src/core/scene/kinds/sphere3d.ts"() {
+    init_registry();
+    init_labelOf();
+    registerKind({
+      type: "sphere3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.center || !a?.surfacePoint) throw new Error("sphere3d: center/surfacePoint required");
+      },
+      dependsOn: (a) => [a.center, a.surfacePoint],
+      describe: (obj, state) => `M\u1EB7t c\u1EA7u ${obj.label} t\xE2m ${labelOf(obj.attrs.center, state)}`,
+      render: (obj, ctx) => {
+        const view = ctx.jxg;
+        return view.create("sphere3d", [
+          ctx.resolveRef(obj.attrs.center),
+          ctx.resolveRef(obj.attrs.surfacePoint)
+        ], {
+          fillOpacity: 0.25,
+          fillColor: obj.attrs.color ?? "#60a5fa",
+          visible: obj.visible
+        });
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/polyhedron3d.ts
+var FLAVOR_LABEL;
+var init_polyhedron3d = __esm({
+  "src/core/scene/kinds/polyhedron3d.ts"() {
+    init_registry();
+    FLAVOR_LABEL = {
+      pyramid: "ch\xF3p",
+      prism: "l\u0103ng tr\u1EE5",
+      tetrahedron: "t\u1EE9 di\u1EC7n",
+      cube: "l\u1EADp ph\u01B0\u01A1ng"
+    };
+    registerKind({
+      type: "polyhedron3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.vertices || a.vertices.length < 4) throw new Error("polyhedron3d: c\u1EA7n \u22654 vertices");
+        if (!a?.faces || a.faces.length < 4) throw new Error("polyhedron3d: c\u1EA7n \u22654 faces");
+      },
+      dependsOn: (a) => [...a.vertices],
+      describe: (obj) => `Kh\u1ED1i ${FLAVOR_LABEL[obj.attrs.flavor]} ${obj.label}`,
+      render: (obj, ctx) => {
+        const view = ctx.jxg;
+        const verts = obj.attrs.vertices.map((id) => ctx.resolveRef(id));
+        const faces = obj.attrs.faces.map(
+          (faceIndices, fi) => view.create("polygon3d", [faceIndices.map((i) => verts[i])], {
+            id: `${obj.id}.face${faceIndices.join("-")}.${fi}`,
+            fillOpacity: 0.25,
+            fillColor: obj.attrs.color ?? "#fbbf24",
+            strokeColor: "#0066cc",
+            strokeWidth: 1.5,
+            visible: obj.visible
+          })
+        );
+        return { faces };
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/cylinder3d.ts
+var CURVED_SEGMENTS;
+var init_cylinder3d = __esm({
+  "src/core/scene/kinds/cylinder3d.ts"() {
+    init_registry();
+    CURVED_SEGMENTS = 16;
+    registerKind({
+      type: "cylinder3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.baseCenter || !a?.topCenter) throw new Error("cylinder3d: baseCenter/topCenter required");
+        if (!(a.radius > 0)) throw new Error("cylinder3d: radius > 0");
+      },
+      dependsOn: (a) => [a.baseCenter, a.topCenter],
+      describe: (obj) => `Tr\u1EE5 ${obj.label} R=${obj.attrs.radius.toFixed(2)}`,
+      render: (obj, ctx) => {
+        const view = ctx.jxg;
+        const a = ctx.resolveRef(obj.attrs.baseCenter);
+        const b = ctx.resolveRef(obj.attrs.topCenter);
+        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 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 vertices = [...baseRing, ...topRing];
+        const faces = [];
+        faces.push(baseRing.map((_, i) => i));
+        faces.push(topRing.map((_, i) => CURVED_SEGMENTS + i));
+        for (let i = 0; i < CURVED_SEGMENTS; i++) {
+          const next = (i + 1) % CURVED_SEGMENTS;
+          faces.push([i, next, CURVED_SEGMENTS + next, CURVED_SEGMENTS + i]);
+        }
+        const vertJxgs = vertices.map(
+          (v, i) => view.create("point3d", v, {
+            id: `${obj.id}.v${i}`,
+            visible: false,
+            fixed: true,
+            withLabel: false
+          })
+        );
+        const faceJxgs = faces.map(
+          (face, fi) => view.create("polygon3d", [face.map((idx) => vertJxgs[idx])], {
+            id: `${obj.id}.face${fi}`,
+            fillOpacity: 0.25,
+            fillColor: obj.attrs.color ?? "#f97316",
+            strokeColor: "#0066cc",
+            strokeWidth: 1.5,
+            visible: obj.visible
+          })
+        );
+        return { _verts: vertJxgs, faces: faceJxgs };
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/cone3d.ts
+var CURVED_SEGMENTS2;
+var init_cone3d = __esm({
+  "src/core/scene/kinds/cone3d.ts"() {
+    init_registry();
+    CURVED_SEGMENTS2 = 16;
+    registerKind({
+      type: "cone3d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.baseCenter || !a?.apex) throw new Error("cone3d: baseCenter/apex required");
+        if (!(a.radius > 0)) throw new Error("cone3d: radius > 0");
+      },
+      dependsOn: (a) => [a.baseCenter, a.apex],
+      describe: (obj) => `N\xF3n ${obj.label} R=${obj.attrs.radius.toFixed(2)}`,
+      render: (obj, ctx) => {
+        const view = ctx.jxg;
+        const base = ctx.resolveRef(obj.attrs.baseCenter);
+        const apexPt = ctx.resolveRef(obj.attrs.apex);
+        const r = obj.attrs.radius;
+        const bx = base.X?.() ?? 0, by = base.Y?.() ?? 0, bz = base.Z?.() ?? 0;
+        const apexCoords = [
+          apexPt.X?.() ?? 0,
+          apexPt.Y?.() ?? 0,
+          apexPt.Z?.() ?? 0
+        ];
+        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 apexIdx = baseRing.length;
+        const vertices = [...baseRing, apexCoords];
+        const faces = [baseRing.map((_, i) => i)];
+        for (let i = 0; i < CURVED_SEGMENTS2; i++) {
+          faces.push([i, (i + 1) % CURVED_SEGMENTS2, apexIdx]);
+        }
+        const vertJxgs = vertices.map(
+          (v, i) => view.create("point3d", v, {
+            id: `${obj.id}.v${i}`,
+            visible: false,
+            fixed: true,
+            withLabel: false
+          })
+        );
+        const faceJxgs = faces.map(
+          (face, fi) => view.create("polygon3d", [face.map((idx) => vertJxgs[idx])], {
+            id: `${obj.id}.face${fi}`,
+            fillOpacity: 0.25,
+            fillColor: obj.attrs.color ?? "#f59e0b",
+            strokeColor: "#0066cc",
+            strokeWidth: 1.5,
+            visible: obj.visible
+          })
+        );
+        return { _verts: vertJxgs, faces: faceJxgs };
+      }
+    });
+  }
+});
+
+// src/core/scene/kinds/2d-constraint.ts
+function transformRefs(t) {
+  switch (t.kind) {
+    case "translate":
+      return [];
+    case "rotate":
+    case "reflectPoint":
+    case "dilate":
+      return [t.center];
+    case "reflectLine":
+      return [t.line];
+  }
+}
+function constraintRefs2D(c) {
+  switch (c.kind) {
+    case "onLine":
+      return [c.lineId];
+    case "onSegment":
+      return [c.segmentId];
+    case "onCircle":
+      return [c.circleId];
+    case "onPolygon":
+      return [c.polygonId];
+    case "midpoint":
+      return [c.p1, c.p2];
+    case "transformed":
+      return [c.source, ...transformRefs(c.transform)];
+    case "perpFoot":
+      return [c.from, c.onLine];
+    case "circumcenter":
+      return [c.vertices[0], c.vertices[1], c.vertices[2]];
+    case "incenter":
+      return [c.vertices[0], c.vertices[1], c.vertices[2]];
+    case "centroid":
+      return [c.vertices[0], c.vertices[1], c.vertices[2]];
+    case "orthocenter":
+      return [c.vertices[0], c.vertices[1], c.vertices[2]];
+    default:
+      return [];
+  }
+}
+var init_d_constraint2 = __esm({
+  "src/core/scene/kinds/2d-constraint.ts"() {
+  }
+});
+
+// src/core/scene/kinds/point.ts
+function buildJxgTransforms(board, ctx, t) {
+  switch (t.kind) {
+    case "translate":
+      return [board.create("transform", [t.dx, t.dy], { type: "translate" })];
+    case "rotate": {
+      const c = ctx.resolveRef(t.center);
+      return [board.create("transform", [t.angleRad, c], { type: "rotate" })];
+    }
+    case "reflectPoint": {
+      const c = ctx.resolveRef(t.center);
+      return [board.create("transform", [Math.PI, c], { type: "rotate" })];
+    }
+    case "reflectLine": {
+      const l = ctx.resolveRef(t.line);
+      return [board.create("transform", [l], { type: "reflect" })];
+    }
+    case "dilate": {
+      const c = ctx.resolveRef(t.center);
+      return [
+        board.create("transform", [() => -c.X(), () => -c.Y()], { type: "translate" }),
+        board.create("transform", [t.k, t.k], { type: "scale" }),
+        board.create("transform", [() => c.X(), () => c.Y()], { type: "translate" })
+      ];
+    }
+  }
+}
+var def3;
+var init_point = __esm({
+  "src/core/scene/kinds/point.ts"() {
+    init_registry();
+    init_d_constraint2();
+    def3 = {
+      type: "point",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a || !a.constraint || !a.constraint.kind) {
+          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");
+          }
+        }
+      },
+      dependsOn: (a) => constraintRefs2D(a.constraint),
+      measure: (obj) => {
+        const c = obj.attrs.constraint;
+        if (c.kind === "free") {
+          return [
+            { label: "x", value: c.x },
+            { label: "y", value: c.y }
+          ];
+        }
+        return null;
+      },
+      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}`;
+        }
+        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;
+        }
+        return board.create("point", [0, 0], opts);
+      },
+      /**
+       * Free → Free update giữ nguyên JxgObj identity (gọi setPositionDirectly +
+       * setAttribute) để các object phụ thuộc (line/segment/...) không bị stale
+       * parent ref. Đổi constraint kind → throw để renderer fallback recreate.
+       *
+       * Đây cũng là endpoint cho drag-sync dispatch trong JxgRenderer: khi user
+       * kéo điểm, listener dispatch UPDATE_ATTRS → update hook chạy, vị trí đã
+       * đúng sẵn nên setPositionDirectly là no-op nhưng vẫn cần để sync các attrs
+       * khác (label/color/...).
+       */
+      update: (obj, prev, ctx, existing) => {
+        const c = obj.attrs.constraint;
+        const oldC = prev.attrs.constraint;
+        if (c.kind === "free" && oldC.kind === "free") {
+          const el = existing;
+          if (typeof el.setPositionDirectly === "function") {
+            try {
+              el.setPositionDirectly(1, [c.x, c.y]);
+            } catch {
+            }
+          }
+          if (typeof el.setAttribute === "function") {
+            try {
+              el.setAttribute({
+                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
+              });
+            } catch {
+            }
+          }
+          return;
+        }
+        throw new Error("point: constraint kind changed \u2014 recreate");
+      }
+    };
+    registerKind(def3);
+  }
+});
+
+// src/core/scene/kinds/segment.ts
+var def4;
+var init_segment = __esm({
+  "src/core/scene/kinds/segment.ts"() {
+    init_registry();
+    init_labelOf();
+    def4 = {
+      type: "segment",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.p1 || !a?.p2) throw new Error("segment: p1 v\xE0 p2 b\u1EAFt bu\u1ED9c");
+      },
+      dependsOn: (a) => [a.p1, a.p2],
+      measure: (obj, state) => {
+        const p1 = state.objects[obj.attrs.p1];
+        const p2 = state.objects[obj.attrs.p2];
+        if (!p1 || !p2) return null;
+        const c1 = p1.attrs.constraint;
+        const c2 = p2.attrs.constraint;
+        if (c1?.kind !== "free" || c2?.kind !== "free") return null;
+        const dx = (c2.x ?? 0) - (c1.x ?? 0);
+        const dy = (c2.y ?? 0) - (c1.y ?? 0);
+        return [{ label: "length", value: Math.hypot(dx, dy) }];
+      },
+      describe: (obj, state) => `\u0110o\u1EA1n th\u1EB3ng ${labelOf(obj.attrs.p1, state)}${labelOf(obj.attrs.p2, state)}`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const p1 = ctx.resolveRef(obj.attrs.p1);
+        const p2 = ctx.resolveRef(obj.attrs.p2);
+        return board.create("segment", [p1, p2], {
+          name: obj.label,
+          withLabel: obj.attrs.showLabel ?? false,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: obj.attrs.width ?? 2,
+          dash: obj.attrs.dash ?? 0,
+          visible: obj.visible,
+          fixed: obj.locked
+        });
+      }
+    };
+    registerKind(def4);
+  }
+});
+
+// src/core/scene/kinds/line.ts
+function stripBorderSuffix(id) {
+  const m = /^(.+):border:\d+$/.exec(id);
+  return m ? m[1] : id;
+}
+function constructionRefs(c) {
+  switch (c.kind) {
+    case "perpendicular":
+    case "parallel":
+      return [c.throughPoint, stripBorderSuffix(c.toLine)];
+    case "perpBisector":
+      return [c.p1, c.p2];
+    case "angleBisector":
+      return [c.p1, c.vertex, c.p2];
+    case "angleBisectorLines":
+      return [stripBorderSuffix(c.line1), stripBorderSuffix(c.line2)];
+    case "tangent":
+      return [c.throughPoint, c.toCircle];
+  }
+}
+var def5;
+var init_line = __esm({
+  "src/core/scene/kinds/line.ts"() {
+    init_registry();
+    init_labelOf();
+    def5 = {
+      type: "line",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (a?.construction) return;
+        if (!a?.p1 || !a?.p2) throw new Error("line: p1 v\xE0 p2 b\u1EAFt bu\u1ED9c (ho\u1EB7c construction)");
+      },
+      dependsOn: (a) => a.construction ? constructionRefs(a.construction) : [a.p1, a.p2],
+      describe: (obj, state) => {
+        const L = (id) => labelOf(id, state);
+        const c = obj.attrs.construction;
+        if (!c) return `\u0110\u01B0\u1EDDng th\u1EB3ng ${L(obj.attrs.p1)}${L(obj.attrs.p2)}`;
+        switch (c.kind) {
+          case "perpendicular":
+            return `${obj.label} \u27C2 ${L(c.toLine)} qua ${L(c.throughPoint)}`;
+          case "parallel":
+            return `${obj.label} \u2225 ${L(c.toLine)} qua ${L(c.throughPoint)}`;
+          case "perpBisector":
+            return `${obj.label}: trung tr\u1EF1c ${L(c.p1)}${L(c.p2)}`;
+          case "angleBisector":
+            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 "tangent":
+            return `${obj.label}: ti\u1EBFp tuy\u1EBFn ${L(c.toCircle)} qua ${L(c.throughPoint)}`;
+        }
+      },
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const baseOpts = {
+          name: obj.label,
+          withLabel: obj.attrs.showLabel ?? false,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: obj.attrs.width ?? 2,
+          dash: obj.attrs.dash ?? 0,
+          visible: obj.visible,
+          fixed: obj.locked
+        };
+        const c = obj.attrs.construction;
+        if (!c) {
+          const p1 = ctx.resolveRef(obj.attrs.p1);
+          const p2 = ctx.resolveRef(obj.attrs.p2);
+          return board.create("line", [p1, p2], {
+            ...baseOpts,
+            straightFirst: true,
+            straightLast: true
+          });
+        }
+        switch (c.kind) {
+          case "perpendicular": {
+            const through = ctx.resolveRef(c.throughPoint);
+            const toLine = ctx.resolveRef(c.toLine);
+            return board.create("perpendicular", [toLine, through], baseOpts);
+          }
+          case "parallel": {
+            const through = ctx.resolveRef(c.throughPoint);
+            const toLine = ctx.resolveRef(c.toLine);
+            return board.create("parallel", [toLine, through], baseOpts);
+          }
+          case "perpBisector": {
+            const p1 = ctx.resolveRef(c.p1);
+            const p2 = ctx.resolveRef(c.p2);
+            const mid = board.create("midpoint", [p1, p2], {
+              visible: false,
+              withLabel: false,
+              fixed: true,
+              name: ""
+            });
+            const helperLine = board.create("line", [p1, p2], {
+              visible: false,
+              withLabel: false,
+              fixed: true,
+              name: "",
+              straightFirst: true,
+              straightLast: true
+            });
+            const bisector = board.create("perpendicular", [helperLine, mid], baseOpts);
+            bisector._helpers = [mid, helperLine];
+            return bisector;
+          }
+          case "angleBisector": {
+            const p1 = ctx.resolveRef(c.p1);
+            const vertex = ctx.resolveRef(c.vertex);
+            const p2 = ctx.resolveRef(c.p2);
+            return board.create("bisector", [p1, vertex, p2], baseOpts);
+          }
+          case "angleBisectorLines": {
+            const line1Jxg = ctx.resolveRef(c.line1);
+            const line2Jxg = ctx.resolveRef(c.line2);
+            const comp = board.create("bisectorlines", [line1Jxg, line2Jxg], {
+              line1: { visible: false, withLabel: false, fixed: true, name: "" },
+              line2: { visible: false, withLabel: false, fixed: true, name: "" }
+            });
+            const selected = c.branch === 0 ? comp.line1 : comp.line2;
+            const other = c.branch === 0 ? comp.line2 : comp.line1;
+            selected.setAttribute({
+              ...baseOpts,
+              visible: obj.visible,
+              fixed: obj.locked
+            });
+            selected._helpers = [other];
+            return selected;
+          }
+          case "tangent": {
+            const through = ctx.resolveRef(c.throughPoint);
+            const toCircle = ctx.resolveRef(c.toCircle);
+            const branch = c.branch ?? "on";
+            if (branch === "on") {
+              const glider = board.create("glider", [through.X(), through.Y(), toCircle], {
+                visible: false,
+                withLabel: false,
+                fixed: true,
+                name: ""
+              });
+              const tangent2 = board.create("tangent", [glider], baseOpts);
+              tangent2._helpers = [glider];
+              return tangent2;
+            }
+            const center = toCircle.center;
+            const mid = board.create("midpoint", [center, through], {
+              visible: false,
+              withLabel: false,
+              fixed: true,
+              name: ""
+            });
+            const thales = board.create("circle", [mid, through], {
+              visible: false,
+              withLabel: false,
+              fixed: true,
+              strokeOpacity: 0,
+              fillOpacity: 0
+            });
+            const touch = board.create("intersection", [thales, toCircle, branch], {
+              visible: false,
+              withLabel: false,
+              fixed: true,
+              name: ""
+            });
+            const tangent = board.create("line", [through, touch], {
+              ...baseOpts,
+              straightFirst: true,
+              straightLast: true
+            });
+            tangent._helpers = [mid, thales, touch];
+            return tangent;
+          }
+        }
+      }
+    };
+    registerKind(def5);
+  }
+});
+
+// src/core/scene/kinds/ray.ts
+var def6;
+var init_ray = __esm({
+  "src/core/scene/kinds/ray.ts"() {
+    init_registry();
+    init_labelOf();
+    def6 = {
+      type: "ray",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.origin || !a?.through) throw new Error("ray: origin v\xE0 through b\u1EAFt bu\u1ED9c");
+      },
+      dependsOn: (a) => [a.origin, a.through],
+      describe: (obj, state) => `Tia ${labelOf(obj.attrs.origin, state)}${labelOf(obj.attrs.through, state)}`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const o = ctx.resolveRef(obj.attrs.origin);
+        const t = ctx.resolveRef(obj.attrs.through);
+        return board.create("line", [o, t], {
+          name: obj.label,
+          straightFirst: false,
+          straightLast: true,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: obj.attrs.width ?? 2,
+          dash: obj.attrs.dash ?? 0,
+          visible: obj.visible,
+          fixed: obj.locked
+        });
+      }
+    };
+    registerKind(def6);
+  }
+});
+
+// src/core/scene/kinds/vector.ts
+var def7;
+var init_vector = __esm({
+  "src/core/scene/kinds/vector.ts"() {
+    init_registry();
+    init_labelOf();
+    def7 = {
+      type: "vector",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.from || !a?.to) throw new Error("vector: from v\xE0 to b\u1EAFt bu\u1ED9c");
+      },
+      dependsOn: (a) => [a.from, a.to],
+      describe: (obj, state) => `Vector ${labelOf(obj.attrs.from, state)}${labelOf(obj.attrs.to, state)}`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const f = ctx.resolveRef(obj.attrs.from);
+        const t = ctx.resolveRef(obj.attrs.to);
+        return board.create("arrow", [f, t], {
+          name: obj.label,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: obj.attrs.width ?? 2,
+          visible: obj.visible,
+          fixed: obj.locked
+        });
+      }
+    };
+    registerKind(def7);
+  }
+});
+
+// src/core/scene/kinds/circle.ts
+function constructionRefs2(c) {
+  switch (c.kind) {
+    case "circumscribed":
+      return [c.p1, c.p2, c.p3];
+  }
+}
+var def8;
+var init_circle = __esm({
+  "src/core/scene/kinds/circle.ts"() {
+    init_registry();
+    init_labelOf();
+    def8 = {
+      type: "circle",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (a?.construction) return;
+        if (!a?.center || !a?.surfacePoint) {
+          throw new Error("circle: center v\xE0 surfacePoint b\u1EAFt bu\u1ED9c (ho\u1EB7c construction)");
+        }
+      },
+      dependsOn: (a) => a.construction ? constructionRefs2(a.construction) : [a.center, a.surfacePoint],
+      measure: (obj, state) => {
+        if (obj.attrs.construction) return null;
+        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;
+        const c1 = center.attrs.constraint;
+        const c2 = surface.attrs.constraint;
+        if (c1?.kind !== "free" || c2?.kind !== "free") return null;
+        const dx = (c2.x ?? 0) - (c1.x ?? 0);
+        const dy = (c2.y ?? 0) - (c1.y ?? 0);
+        return [{ label: "r", value: Math.hypot(dx, dy) }];
+      },
+      describe: (obj, state) => {
+        const L = (id) => labelOf(id, state);
+        const c = obj.attrs.construction;
+        if (c?.kind === "circumscribed") {
+          return `\u0110\u01B0\u1EDDng tr\xF2n \u0111i qua ${L(c.p1)}${L(c.p2)}${L(c.p3)}`;
+        }
+        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 baseOpts = {
+          name: obj.label,
+          withLabel: obj.attrs.showLabel ?? false,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: obj.attrs.width ?? 2,
+          dash: obj.attrs.dash ?? 0,
+          fillColor: "none",
+          visible: obj.visible,
+          fixed: obj.locked
+        };
+        const c = obj.attrs.construction;
+        if (c?.kind === "circumscribed") {
+          const p1 = ctx.resolveRef(c.p1);
+          const p2 = ctx.resolveRef(c.p2);
+          const p3 = ctx.resolveRef(c.p3);
+          return board.create("circumcircle", [p1, p2, p3], baseOpts);
+        }
+        const center = ctx.resolveRef(obj.attrs.center);
+        const surface = ctx.resolveRef(obj.attrs.surfacePoint);
+        return board.create("circle", [center, surface], baseOpts);
+      }
+    };
+    registerKind(def8);
+  }
+});
+
+// src/core/scene/kinds/arc.ts
+function constructionRefs3(c) {
+  switch (c.kind) {
+    case "semicircle":
+      return [c.p1, c.p2];
+    case "byCenter":
+      return [c.center, c.p1, c.p2];
+    case "by3Points":
+      return [c.p1, c.p2, c.p3];
+  }
+}
+var def9;
+var init_arc = __esm({
+  "src/core/scene/kinds/arc.ts"() {
+    init_registry();
+    init_labelOf();
+    def9 = {
+      type: "arc",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        const c = a?.construction;
+        if (!c) throw new Error("arc: construction b\u1EAFt bu\u1ED9c");
+        if (c.kind === "semicircle") {
+          if (!c.p1 || !c.p2) throw new Error("arc.semicircle: p1, p2 b\u1EAFt bu\u1ED9c");
+        } else if (c.kind === "byCenter") {
+          if (!c.center || !c.p1 || !c.p2) throw new Error("arc.byCenter: center, p1, p2 b\u1EAFt bu\u1ED9c");
+        } else if (c.kind === "by3Points") {
+          if (!c.p1 || !c.p2 || !c.p3) throw new Error("arc.by3Points: p1, p2, p3 b\u1EAFt bu\u1ED9c");
+        }
+      },
+      dependsOn: (a) => constructionRefs3(a.construction),
+      describe: (obj, state) => {
+        const L = (id) => labelOf(id, state);
+        const c = obj.attrs.construction;
+        switch (c.kind) {
+          case "semicircle":
+            return `N\u1EEDa \u0111\u01B0\u1EDDng tr\xF2n \u0111\u01B0\u1EDDng k\xEDnh ${L(c.p1)}${L(c.p2)}`;
+          case "byCenter":
+            return `Cung tr\xF2n t\xE2m ${L(c.center)} t\u1EEB ${L(c.p1)} \u0111\u1EBFn ${L(c.p2)}`;
+          case "by3Points":
+            return `Cung tr\xF2n qua ${L(c.p1)}${L(c.p2)}${L(c.p3)}`;
+        }
+      },
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const baseOpts = {
+          name: obj.label,
+          withLabel: obj.attrs.showLabel ?? false,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: obj.attrs.width ?? 2,
+          dash: obj.attrs.dash ?? 0,
+          fillColor: "none",
+          visible: obj.visible,
+          fixed: obj.locked
+        };
+        const c = obj.attrs.construction;
+        if (c.kind === "semicircle") {
+          const p1 = ctx.resolveRef(c.p1);
+          const p2 = ctx.resolveRef(c.p2);
+          return board.create("semicircle", [p1, p2], baseOpts);
+        }
+        if (c.kind === "byCenter") {
+          const O = ctx.resolveRef(c.center);
+          const A2 = ctx.resolveRef(c.p1);
+          const B2 = ctx.resolveRef(c.p2);
+          return board.create("arc", [O, A2, B2], baseOpts);
+        }
+        const A = ctx.resolveRef(c.p1);
+        const B = ctx.resolveRef(c.p2);
+        const C = ctx.resolveRef(c.p3);
+        return board.create("circumcirclearc", [A, B, C], baseOpts);
+      }
+    };
+    registerKind(def9);
+  }
+});
+
+// src/core/scene/kinds/sector.ts
+var def10;
+var init_sector = __esm({
+  "src/core/scene/kinds/sector.ts"() {
+    init_registry();
+    init_labelOf();
+    def10 = {
+      type: "sector",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        const c = a?.construction;
+        if (!c) throw new Error("sector: construction b\u1EAFt bu\u1ED9c");
+        if (c.kind === "byCenter") {
+          if (!c.center || !c.p1 || !c.p2) {
+            throw new Error("sector.byCenter: center, p1, p2 b\u1EAFt bu\u1ED9c");
+          }
+        }
+      },
+      dependsOn: (a) => {
+        const c = a.construction;
+        return [c.center, c.p1, c.p2];
+      },
+      describe: (obj, state) => {
+        const L = (id) => labelOf(id, state);
+        const c = obj.attrs.construction;
+        return `H\xECnh qu\u1EA1t t\xE2m ${L(c.center)} t\u1EEB ${L(c.p1)} \u0111\u1EBFn ${L(c.p2)}`;
+      },
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const c = obj.attrs.construction;
+        const O = ctx.resolveRef(c.center);
+        const A = ctx.resolveRef(c.p1);
+        const B = ctx.resolveRef(c.p2);
+        return board.create("sector", [O, A, B], {
+          name: obj.label,
+          withLabel: obj.attrs.showLabel ?? false,
+          strokeColor: obj.attrs.color ?? "#0f172a",
+          strokeWidth: obj.attrs.width ?? 2,
+          fillColor: obj.attrs.fillColor ?? "#f59e0b",
+          fillOpacity: obj.attrs.fillOpacity ?? 0.18,
+          visible: obj.visible,
+          fixed: obj.locked
+        });
+      }
+    };
+    registerKind(def10);
+  }
+});
+
+// src/core/scene/kinds/polygon.ts
+function regularPolygonName(n) {
+  if (n === 3) return "Tam gi\xE1c \u0111\u1EC1u";
+  if (n === 4) return "H\xECnh vu\xF4ng";
+  if (n === 5) return "Ng\u0169 gi\xE1c \u0111\u1EC1u";
+  if (n === 6) return "L\u1EE5c gi\xE1c \u0111\u1EC1u";
+  return `${n}-gi\xE1c \u0111\u1EC1u`;
+}
+function regularVertexLabels(p1Label, p2Label, n) {
+  const A = "A".charCodeAt(0);
+  const Z = "Z".charCodeAt(0);
+  if (p1Label.length === 1 && p2Label.length === 1) {
+    const c1 = p1Label.charCodeAt(0);
+    const c2 = p2Label.charCodeAt(0);
+    if (c1 >= A && c1 <= Z && c2 === c1 + 1 && c1 + n - 1 <= Z) {
+      let out = "";
+      for (let i = 0; i < n; i++) out += String.fromCharCode(c1 + i);
+      return out;
+    }
+  }
+  return `${p1Label}${p2Label}\u2026`;
+}
+var def11;
+var init_polygon = __esm({
+  "src/core/scene/kinds/polygon.ts"() {
+    init_registry();
+    init_labelOf();
+    def11 = {
+      type: "polygon",
+      schemaVersion: 1,
+      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");
+            }
+          }
+          return;
+        }
+        if (!Array.isArray(a?.vertices) || a.vertices.length < 3) {
+          throw new Error("polygon: c\u1EA7n \xEDt nh\u1EA5t 3 \u0111\u1EC9nh");
+        }
+      },
+      dependsOn: (a) => {
+        if (a.construction?.kind === "regular") return [a.construction.p1, a.construction.p2];
+        return [...a.vertices ?? []];
+      },
+      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}`;
+        }
+        return `\u0110a gi\xE1c ${(obj.attrs.vertices ?? []).map((id) => labelOf(id, state)).join("")}`;
+      },
+      render: (obj, ctx) => {
+        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 verts = (obj.attrs.vertices ?? []).map((id) => ctx.resolveRef(id));
+        const poly = board.create("polygon", verts, {
+          name: showValue ? function() {
+            const a = typeof this.Area === "function" ? this.Area() : 0;
+            const prefix = obj.attrs.showLabel ?? true ? `${label}: ` : "";
+            return `${prefix}S = ${Math.abs(a).toFixed(2)}`;
+          } : label,
+          withLabel: showValue ? true : 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
+        });
+        return poly;
+      }
+    };
+    registerKind(def11);
+  }
+});
+
+// src/core/scene/kinds/intersection.ts
+var def12;
+var init_intersection = __esm({
+  "src/core/scene/kinds/intersection.ts"() {
+    init_registry();
+    def12 = {
+      type: "intersection",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a || !("kind" in a)) throw new Error("intersection: kind b\u1EAFt bu\u1ED9c");
+        if (!a.ref1 || !a.ref2) throw new Error("intersection: ref1 v\xE0 ref2 b\u1EAFt bu\u1ED9c");
+        if (a.kind === "lineLine") return;
+        if (a.kind === "lineCircle" || a.kind === "circleCircle") {
+          if (a.branch !== 0 && a.branch !== 1) {
+            throw new Error(`intersection.${a.kind}: branch ph\u1EA3i l\xE0 0 ho\u1EB7c 1`);
+          }
+          return;
+        }
+        throw new Error(`intersection: kind kh\xF4ng h\u1EE3p l\u1EC7 "${a.kind}"`);
+      },
+      dependsOn: (a) => [a.ref1, a.ref2],
+      describe: (obj) => {
+        const a = obj.attrs;
+        return `${obj.label} = giao ${a.ref1} \u2229 ${a.ref2}`;
+      },
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const a = ctx.resolveRef(obj.attrs.ref1);
+        const b = ctx.resolveRef(obj.attrs.ref2);
+        const opts = {
+          name: obj.label,
+          withLabel: true,
+          strokeColor: obj.attrs.color ?? "#dc2626",
+          fillColor: obj.attrs.color ?? "#dc2626",
+          visible: obj.visible,
+          fixed: obj.locked
+        };
+        if (obj.attrs.kind === "lineLine") {
+          return board.create("intersection", [a, b, 0], opts);
+        }
+        const branch = obj.attrs.branch ?? 0;
+        return board.create("intersection", [a, b, branch], opts);
+      }
     };
+    registerKind(def12);
   }
 });
-function useEditorState(opts) {
-  const { store, initialState, onHistoryChange, bindKeyboardShortcuts = true } = opts;
-  const onHistoryChangeRef = React__namespace.useRef(onHistoryChange);
-  onHistoryChangeRef.current = onHistoryChange;
-  React__namespace.useEffect(() => {
-    if (initialState?.state) {
-      const loaded = initialState.state;
-      store.withoutHistory(() => {
-        store.dispatch({ type: "LOAD", payload: { state: loaded } });
-      });
-    }
-  }, []);
-  React__namespace.useEffect(() => {
-    onHistoryChangeRef.current?.(store.canUndo(), store.canRedo());
-    const unsub = store.subscribe(() => {
-      onHistoryChangeRef.current?.(store.canUndo(), store.canRedo());
-    });
-    return unsub;
-  }, [store]);
-  React__namespace.useEffect(() => {
-    if (!bindKeyboardShortcuts) return;
-    const onKey = (e) => {
-      const ae = document.activeElement;
-      const inField = !!(ae && (ae.tagName === "INPUT" || ae.tagName === "TEXTAREA" || ae.isContentEditable));
-      if (inField) return;
-      if (!(e.metaKey || e.ctrlKey)) return;
-      const key = e.key.toLowerCase();
-      if (key === "z" && !e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        store.undo();
-      } else if (key === "z" && e.shiftKey || key === "y" && !e.shiftKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        store.redo();
+
+// src/core/scene/kinds/angle.ts
+var def13;
+var init_angle = __esm({
+  "src/core/scene/kinds/angle.ts"() {
+    init_registry();
+    init_labelOf();
+    def13 = {
+      type: "angle",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.p1 || !a?.vertex || !a?.p2) {
+          throw new Error("angle: p1, vertex, p2 b\u1EAFt bu\u1ED9c");
+        }
+      },
+      dependsOn: (a) => [a.p1, a.vertex, a.p2],
+      describe: (obj, state) => `G\xF3c ${labelOf(obj.attrs.p1, state)}${labelOf(obj.attrs.vertex, state)}${labelOf(obj.attrs.p2, state)}`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const pa = ctx.resolveRef(obj.attrs.p1);
+        const pv = ctx.resolveRef(obj.attrs.vertex);
+        const pc = ctx.resolveRef(obj.attrs.p2);
+        let parents = [pa, pv, pc];
+        try {
+          const ax = pa.X() - pv.X(), ay = pa.Y() - pv.Y();
+          const cx = pc.X() - pv.X(), cy = pc.Y() - pv.Y();
+          if (ax * cy - ay * cx < 0) parents = [pc, pv, pa];
+        } catch {
+        }
+        return board.create("angle", parents, {
+          name: obj.label,
+          withLabel: obj.attrs.showLabel ?? true,
+          radius: obj.attrs.radius ?? 1,
+          fillColor: obj.attrs.color ?? "#22c55e",
+          fillOpacity: obj.attrs.fillOpacity ?? 0.25,
+          strokeColor: obj.attrs.color ?? "#16a34a",
+          strokeWidth: 1.5,
+          visible: obj.visible,
+          fixed: obj.locked
+        });
       }
     };
-    window.addEventListener("keydown", onKey, { capture: true });
-    return () => window.removeEventListener("keydown", onKey, { capture: true });
-  }, [store, bindKeyboardShortcuts]);
-}
-var init_useEditorState = __esm({
-  "src/core/scene/hooks/useEditorState.ts"() {
+    registerKind(def13);
   }
 });
 
-// src/core/scene/hooks/index.ts
-var init_hooks = __esm({
-  "src/core/scene/hooks/index.ts"() {
-    init_useEditorState();
+// src/core/scene/kinds/distance.ts
+var def14;
+var init_distance = __esm({
+  "src/core/scene/kinds/distance.ts"() {
+    init_registry();
+    init_labelOf();
+    def14 = {
+      type: "distance",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a?.p1 || !a?.p2) throw new Error("distance: p1 v\xE0 p2 b\u1EAFt bu\u1ED9c");
+      },
+      dependsOn: (a) => [a.p1, a.p2],
+      describe: (obj, state) => `Kho\u1EA3ng c\xE1ch ${labelOf(obj.attrs.p1, state)}${labelOf(obj.attrs.p2, state)}`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const p1 = ctx.resolveRef(obj.attrs.p1);
+        const p2 = ctx.resolveRef(obj.attrs.p2);
+        const prefix = obj.attrs.prefix ?? "d = ";
+        const precision = obj.attrs.precision ?? 2;
+        return board.create("text", [
+          () => (p1.X() + p2.X()) / 2,
+          () => (p1.Y() + p2.Y()) / 2,
+          () => `${prefix}${Math.hypot(p1.X() - p2.X(), p1.Y() - p2.Y()).toFixed(precision)}`
+        ], {
+          fontSize: obj.attrs.fontSize ?? 14,
+          strokeColor: obj.attrs.color ?? "#dc2626",
+          anchorX: "middle",
+          anchorY: "middle",
+          visible: obj.visible,
+          fixed: true
+        });
+      }
+    };
+    registerKind(def14);
   }
 });
 
@@ -400,6 +1960,30 @@ function validate(expression) {
   }
   return { ok: true };
 }
+function compile(expression, params) {
+  const v = validate(expression);
+  if (!v.ok) return v.error;
+  const jsExpr = expression.trim().replace(/\^/g, "**");
+  const ids = /* @__PURE__ */ new Set();
+  let m;
+  ID_RE.lastIndex = 0;
+  while ((m = ID_RE.exec(jsExpr)) !== null) ids.add(m[0]);
+  const paramNames = [];
+  for (const id of ids) {
+    if (id === "x") continue;
+    if (ALLOWED_CONSTANTS.includes(id)) continue;
+    if (ALLOWED_FUNCTIONS.includes(id)) continue;
+    paramNames.push(id);
+  }
+  try {
+    const body = buildFunctionBody(jsExpr, paramNames);
+    const fn = new Function("x", ...paramNames, body);
+    const args = paramNames.map((name) => params[name] ?? NaN);
+    return (x) => fn(x, ...args);
+  } catch (err) {
+    return `Compile error: ${err.message}`;
+  }
+}
 function buildFunctionBody(jsExpr, _paramNames) {
   let body = jsExpr;
   body = body.replace(/\bln\b/g, "Math.log");
@@ -465,6 +2049,375 @@ var init_parser = __esm({
   }
 });
 
+// src/core/scene/kinds/function2d.ts
+var def15;
+var init_function2d = __esm({
+  "src/core/scene/kinds/function2d.ts"() {
+    init_registry();
+    init_parser();
+    def15 = {
+      type: "function2d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a) throw new Error("function2d: attrs b\u1EAFt bu\u1ED9c");
+        if (typeof a.expression !== "string" || !a.expression.trim()) {
+          throw new Error("function2d: expression r\u1ED7ng");
+        }
+        const v = validate(a.expression);
+        if (!v.ok) throw new Error(`function2d: expression invalid \u2014 ${v.error}`);
+        if (typeof a.color !== "string") throw new Error("function2d: color b\u1EAFt bu\u1ED9c");
+        if (typeof a.visible !== "boolean") throw new Error("function2d: visible b\u1EAFt bu\u1ED9c");
+        if (a.domain) {
+          if (a.domain.min >= a.domain.max) {
+            throw new Error("function2d: domain min ph\u1EA3i < max");
+          }
+        }
+      },
+      dependsOn: () => [],
+      describe: (obj) => `${obj.label}(x) = ${obj.attrs.expression}`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        if (!obj.visible || !obj.attrs.visible) return null;
+        const fn = compile(obj.attrs.expression, ctx.paramMap ?? {});
+        if (typeof fn !== "function") return null;
+        const view = ctx.defaults.view;
+        const xMin = obj.attrs.domain?.min ?? view?.xMin ?? -10;
+        const xMax = obj.attrs.domain?.max ?? view?.xMax ?? 10;
+        return board.create("functiongraph", [fn, xMin, xMax], {
+          strokeColor: obj.attrs.color,
+          strokeWidth: 2,
+          name: obj.label,
+          withLabel: false,
+          highlight: false,
+          fixed: true
+        });
+      }
+    };
+    registerKind(def15);
+  }
+});
+
+// src/core/scene/kinds/parameter.ts
+var def16;
+var init_parameter = __esm({
+  "src/core/scene/kinds/parameter.ts"() {
+    init_registry();
+    def16 = {
+      type: "parameter",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a) throw new Error("parameter: attrs b\u1EAFt bu\u1ED9c");
+        if (typeof a.value !== "number" || typeof a.min !== "number" || typeof a.max !== "number") {
+          throw new Error("parameter: value/min/max ph\u1EA3i l\xE0 number");
+        }
+        if (a.min >= a.max) throw new Error("parameter: min ph\u1EA3i < max");
+        if (a.value < a.min || a.value > a.max) throw new Error("parameter: value ngo\xE0i [min, max]");
+        if (typeof a.step !== "number" || a.step <= 0) throw new Error("parameter: step ph\u1EA3i > 0");
+      },
+      dependsOn: () => [],
+      describe: (obj) => `${obj.label} = ${obj.attrs.value}`,
+      render: () => null
+      // Không render lên board
+    };
+    registerKind(def16);
+  }
+});
+
+// src/core/scene/kinds/pointOnCurve.ts
+var def17;
+var init_pointOnCurve = __esm({
+  "src/core/scene/kinds/pointOnCurve.ts"() {
+    init_registry();
+    def17 = {
+      type: "pointOnCurve",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a || typeof a.functionId !== "string" || !a.functionId) {
+          throw new Error("pointOnCurve: functionId b\u1EAFt bu\u1ED9c");
+        }
+        if (typeof a.x !== "number" || !Number.isFinite(a.x)) {
+          throw new Error("pointOnCurve: x ph\u1EA3i l\xE0 finite number");
+        }
+      },
+      dependsOn: (a) => [a.functionId],
+      describe: (obj) => `${obj.label} tr\xEAn ${obj.attrs.functionId} t\u1EA1i x=${obj.attrs.x.toFixed(3)}`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const curve = ctx.resolveRef(obj.attrs.functionId);
+        if (!curve) return null;
+        return board.create("glider", [obj.attrs.x, 0, curve], {
+          name: obj.label,
+          size: 3,
+          withLabel: obj.label !== "",
+          fillColor: "#000",
+          strokeColor: "#000"
+        });
+      }
+    };
+    registerKind(def17);
+  }
+});
+
+// src/core/scene/kinds/tangent2d.ts
+var def18;
+var init_tangent2d = __esm({
+  "src/core/scene/kinds/tangent2d.ts"() {
+    init_registry();
+    def18 = {
+      type: "tangent2d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a || typeof a.pointId !== "string" || !a.pointId) {
+          throw new Error("tangent2d: pointId b\u1EAFt bu\u1ED9c");
+        }
+      },
+      dependsOn: (a) => [a.pointId],
+      describe: (obj) => `Ti\u1EBFp tuy\u1EBFn t\u1EA1i ${obj.attrs.pointId}`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const pt = ctx.resolveRef(obj.attrs.pointId);
+        if (!pt) return null;
+        return board.create("tangent", [pt], {
+          strokeColor: "#65a30d",
+          strokeWidth: 1.5,
+          dash: 2,
+          withLabel: false
+        });
+      }
+    };
+    registerKind(def18);
+  }
+});
+
+// src/core/scene/expressions/evaluator.ts
+function scanRoots(fn, xMin, xMax, samples = DEFAULT_SAMPLES) {
+  if (!Number.isFinite(xMin) || !Number.isFinite(xMax) || xMin >= xMax) return [];
+  const out = [];
+  const step = (xMax - xMin) / samples;
+  let prev = fn(xMin);
+  for (let i = 1; i <= samples; i++) {
+    const x = xMin + i * step;
+    const curr = fn(x);
+    if (!Number.isFinite(prev) || !Number.isFinite(curr)) {
+      prev = curr;
+      continue;
+    }
+    if (prev * curr < 0) {
+      const root = bisect(fn, x - step, x);
+      if (Number.isFinite(root)) out.push(root);
+    } else if (prev !== 0 && curr === 0) {
+      out.push(x);
+    }
+    prev = curr;
+  }
+  return out;
+}
+function bisect(fn, lo, hi) {
+  for (let i = 0; i < 50; i++) {
+    const mid = (lo + hi) / 2;
+    const fmid = fn(mid);
+    if (!Number.isFinite(fmid)) break;
+    if (Math.abs(fmid) < 1e-10) return mid;
+    const flo = fn(lo);
+    if (!Number.isFinite(flo)) break;
+    if (flo * fmid <= 0) hi = mid;
+    else lo = mid;
+  }
+  return (lo + hi) / 2;
+}
+function scanExtrema(fn, xMin, xMax, samples = DEFAULT_SAMPLES) {
+  if (!Number.isFinite(xMin) || !Number.isFinite(xMax) || xMin >= xMax) return [];
+  const out = [];
+  const step = (xMax - xMin) / samples;
+  const xs = [];
+  const ys = [];
+  for (let i = 0; i <= samples + 1; i++) {
+    const x = xMin + (i - 1) * step;
+    xs.push(x);
+    ys.push(fn(x));
+  }
+  let prevSign = 0;
+  let prevSignIdx = 1;
+  for (let i = 1; i <= samples; i++) {
+    const d = ys[i + 1] - ys[i - 1];
+    if (!Number.isFinite(d)) continue;
+    const sign = d > 0 ? 1 : d < 0 ? -1 : 0;
+    if (sign === 0) continue;
+    if (prevSign !== 0 && sign !== prevSign) {
+      const type = prevSign > 0 ? "max" : "min";
+      const midI = Math.round((prevSignIdx + i) / 2);
+      out.push({ x: xs[midI], y: ys[midI], type });
+    }
+    prevSign = sign;
+    prevSignIdx = i;
+  }
+  return out;
+}
+var DEFAULT_SAMPLES;
+var init_evaluator = __esm({
+  "src/core/scene/expressions/evaluator.ts"() {
+    DEFAULT_SAMPLES = 1e3;
+  }
+});
+
+// src/core/scene/kinds/extremum2d.ts
+var def19;
+var init_extremum2d = __esm({
+  "src/core/scene/kinds/extremum2d.ts"() {
+    init_registry();
+    init_evaluator();
+    init_parser();
+    def19 = {
+      type: "extremum2d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a || typeof a.functionId !== "string" || !a.functionId) {
+          throw new Error("extremum2d: functionId b\u1EAFt bu\u1ED9c");
+        }
+        if (!a.interval || a.interval.min >= a.interval.max) {
+          throw new Error("extremum2d: interval min ph\u1EA3i < max");
+        }
+        if (a.mode !== "max" && a.mode !== "min") {
+          throw new Error('extremum2d: mode ph\u1EA3i l\xE0 "max" ho\u1EB7c "min"');
+        }
+      },
+      dependsOn: (a) => [a.functionId],
+      describe: (obj) => `${obj.attrs.mode === "max" ? "C\u1EF1c \u0111\u1EA1i" : "C\u1EF1c ti\u1EC3u"} c\u1EE7a ${obj.attrs.functionId} trong [${obj.attrs.interval.min}, ${obj.attrs.interval.max}]`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const expr = ctx.defaults._functionExpr?.[obj.attrs.functionId];
+        if (!expr) return null;
+        const fn = compile(expr, ctx.paramMap ?? {});
+        if (typeof fn !== "function") return null;
+        const extrema = scanExtrema(fn, obj.attrs.interval.min, obj.attrs.interval.max).filter((e) => e.type === obj.attrs.mode);
+        return extrema.map((e) => board.create("point", [e.x, e.y], {
+          name: obj.label,
+          size: 3,
+          fillColor: "#dc2626",
+          strokeColor: "#dc2626",
+          withLabel: obj.label !== ""
+        }));
+      }
+    };
+    registerKind(def19);
+  }
+});
+
+// src/core/scene/kinds/root2d.ts
+var def20;
+var init_root2d = __esm({
+  "src/core/scene/kinds/root2d.ts"() {
+    init_registry();
+    init_evaluator();
+    init_parser();
+    def20 = {
+      type: "root2d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a || typeof a.functionId !== "string" || !a.functionId) {
+          throw new Error("root2d: functionId b\u1EAFt bu\u1ED9c");
+        }
+        if (!a.interval || a.interval.min >= a.interval.max) {
+          throw new Error("root2d: interval min ph\u1EA3i < max");
+        }
+      },
+      dependsOn: (a) => [a.functionId],
+      describe: (obj) => `Nghi\u1EC7m c\u1EE7a ${obj.attrs.functionId} trong [${obj.attrs.interval.min}, ${obj.attrs.interval.max}]`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const expr = ctx.defaults._functionExpr?.[obj.attrs.functionId];
+        if (!expr) return null;
+        const fn = compile(expr, ctx.paramMap ?? {});
+        if (typeof fn !== "function") return null;
+        const roots = scanRoots(fn, obj.attrs.interval.min, obj.attrs.interval.max);
+        return roots.map((x) => board.create("point", [x, 0], {
+          name: obj.label,
+          size: 3,
+          fillColor: "#dc2626",
+          strokeColor: "#dc2626",
+          withLabel: obj.label !== ""
+        }));
+      }
+    };
+    registerKind(def20);
+  }
+});
+
+// src/core/scene/kinds/slope2d.ts
+var def21;
+var init_slope2d = __esm({
+  "src/core/scene/kinds/slope2d.ts"() {
+    init_registry();
+    def21 = {
+      type: "slope2d",
+      schemaVersion: 1,
+      migrate: {},
+      validate: (a) => {
+        if (!a || typeof a.pointId !== "string" || !a.pointId) {
+          throw new Error("slope2d: pointId b\u1EAFt bu\u1ED9c");
+        }
+      },
+      dependsOn: (a) => [a.pointId],
+      describe: (obj) => `Slope t\u1EA1i ${obj.attrs.pointId}`,
+      render: (obj, ctx) => {
+        const board = ctx.jxg;
+        const pt = ctx.resolveRef(obj.attrs.pointId);
+        if (!pt) return null;
+        return board.create("slopetriangle", [pt], {
+          name: obj.label,
+          withLabel: true,
+          fillColor: "#9333ea",
+          strokeColor: "#9333ea",
+          fillOpacity: 0.2
+        });
+      }
+    };
+    registerKind(def21);
+  }
+});
+
+// src/core/scene/kinds/index.ts
+var init_kinds = __esm({
+  "src/core/scene/kinds/index.ts"() {
+    init_point3d();
+    init_segment3d();
+    init_line3d();
+    init_ray3d();
+    init_vector3d();
+    init_plane3d();
+    init_polygon3d();
+    init_sphere3d();
+    init_polyhedron3d();
+    init_cylinder3d();
+    init_cone3d();
+    init_point();
+    init_segment();
+    init_line();
+    init_ray();
+    init_vector();
+    init_circle();
+    init_arc();
+    init_sector();
+    init_polygon();
+    init_intersection();
+    init_angle();
+    init_distance();
+    init_function2d();
+    init_parameter();
+    init_pointOnCurve();
+    init_tangent2d();
+    init_extremum2d();
+    init_root2d();
+    init_slope2d();
+  }
+});
+
 // src/core/scene/index.ts
 var init_scene = __esm({
   "src/core/scene/index.ts"() {
@@ -472,6 +2425,7 @@ var init_scene = __esm({
     init_store();
     init_selectors();
     init_hooks();
+    init_kinds();
   }
 });
 
@@ -629,8 +2583,8 @@ var init_JxgRenderer = __esm({
       }
       create(obj) {
         try {
-          const def = getKind(obj.kind);
-          const el = def.render(obj, this.ctx());
+          const def22 = getKind(obj.kind);
+          const el = def22.render(obj, this.ctx());
           this.elements.set(obj.id, el);
           this.attachFreePointDragSync(obj, el);
         } catch (err) {
@@ -708,11 +2662,11 @@ var init_JxgRenderer = __esm({
             continue;
           }
           if (Object.is(old, cur)) continue;
-          const def = getKind(cur.kind);
+          const def22 = getKind(cur.kind);
           const existing = this.elements.get(id);
-          if (def.update && existing) {
+          if (def22.update && existing) {
             try {
-              def.update(cur, old, this.ctx(), existing);
+              def22.update(cur, old, this.ctx(), existing);
               continue;
             } catch (err) {
               console.warn(`[scene/render/2d] update fail, recreate:`, err);
@@ -2119,47 +4073,20 @@ var init_StampLeftPanel = __esm({
   }
 });
 function UndoIcon3() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10 L8 5 L8 8 L15 8 A5 5 0 0 1 20 13 L20 16" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 10 L8 15 L8 12" })
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 7 3 13 9 13" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
   ] });
 }
 function RedoIcon3() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 10 L16 5 L16 8 L9 8 A5 5 0 0 0 4 13 L4 16" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 10 L16 15 L16 12" })
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 7 21 13 15 13" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.49 13a9 9 0 1 1-2.12-9.36L21 7" })
   ] });
 }
-var GeometryIconHeader;
+var C_POINT, C_CONSTRUCT, C_FILL, C_ARC, Icon, GeometryIconHeader;
 var init_icons = __esm({
   "src/stamps/geometry-2d/editor/icons.tsx"() {
-    GeometryIconHeader = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "4,20 20,20 12,5" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4", cy: "20", r: "1.5", fill: "currentColor", stroke: "none" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "1.5", fill: "currentColor", stroke: "none" }),
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" })
-    ] });
-  }
-});
-function letterForGroup(g) {
-  const idx = GROUP_ORDER.indexOf(g);
-  return idx >= 0 ? String.fromCharCode(A_CODE + idx) : "";
-}
-function objKind(obj) {
-  if (!obj) return "other";
-  const ec = typeof obj.elementClass === "number" ? obj.elementClass : null;
-  if (ec === 1) return "point";
-  if (ec === 2) return "line";
-  if (ec === 3) return "circle";
-  const e = (obj.elType || obj.type || "").toString().toLowerCase();
-  if (e === "point" || e === "glider" || e === "midpoint" || e === "intersection" || e === "otherintersection" || e === "reflection" || e === "mirrorpoint" || e === "mirrorelement" || e === "orthogonalprojection" || e === "parallelpoint") return "point";
-  if (e === "line" || e === "segment" || e === "arrow" || e === "axis" || e === "normal" || e === "parallel" || e === "perpendicular" || e === "tangent" || e === "bisector" || e === "perpendicularsegment") return "line";
-  if (e === "circle" || e === "circumcircle") return "circle";
-  return "other";
-}
-var C_POINT, C_CONSTRUCT, C_FILL, C_ARC, Icon, TOOLS, GROUP_LABELS, GROUP_ORDER, A_CODE;
-var init_tools = __esm({
-  "src/stamps/geometry-2d/editor/tools.tsx"() {
     C_POINT = "#2563eb";
     C_CONSTRUCT = "#dc2626";
     C_FILL = "#f59e0b";
@@ -2427,6 +4354,36 @@ var init_tools = __esm({
         /* @__PURE__ */ jsxRuntime.jsx("text", { x: "10.5", y: "10.5", fontSize: "8", fontFamily: "serif", fontStyle: "italic", fontWeight: "700", fill: "currentColor", children: "k" })
       ] })
     };
+    GeometryIconHeader = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "4,20 20,20 12,5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4", cy: "20", r: "1.5", fill: "currentColor", stroke: "none" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "1.5", fill: "currentColor", stroke: "none" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" })
+    ] });
+  }
+});
+
+// src/stamps/geometry-2d/editor/tools.tsx
+function letterForGroup(g) {
+  const idx = GROUP_ORDER.indexOf(g);
+  return idx >= 0 ? String.fromCharCode(A_CODE + idx) : "";
+}
+function objKind(obj) {
+  if (!obj) return "other";
+  const ec = typeof obj.elementClass === "number" ? obj.elementClass : null;
+  if (ec === 1) return "point";
+  if (ec === 2) return "line";
+  if (ec === 3) return "circle";
+  const e = (obj.elType || obj.type || "").toString().toLowerCase();
+  if (e === "point" || e === "glider" || e === "midpoint" || e === "intersection" || e === "otherintersection" || e === "reflection" || e === "mirrorpoint" || e === "mirrorelement" || e === "orthogonalprojection" || e === "parallelpoint") return "point";
+  if (e === "line" || e === "segment" || e === "arrow" || e === "axis" || e === "normal" || e === "parallel" || e === "perpendicular" || e === "tangent" || e === "bisector" || e === "perpendicularsegment") return "line";
+  if (e === "circle" || e === "circumcircle") return "circle";
+  return "other";
+}
+var TOOLS, GROUP_LABELS, GROUP_ORDER, A_CODE;
+var init_tools = __esm({
+  "src/stamps/geometry-2d/editor/tools.tsx"() {
+    init_icons();
     TOOLS = [
       { key: "move", label: "Di chuy\u1EC3n", hint: "K\xE9o \u0111i\u1EC3m ho\u1EB7c xoay n\u1EC1n", icon: Icon.cursor, group: "move", needs: 0 },
       { key: "select", label: "Ch\u1ECDn", hint: "Click \u0111\u1EC3 ch\u1ECDn 1 / Shift+click \u0111\u1EC3 b\u1ECF th\xEAm / K\xE9o n\u1EC1n \u0111\u1EC3 khoanh v\xF9ng / DEL \u0111\u1EC3 xo\xE1", icon: Icon.select, group: "move", needs: 0 },
@@ -2654,7 +4611,7 @@ function handlePointTool(ctx, _e, x, y, hits) {
   }
   dispatchAddFreePoint(ctx, x, y);
 }
-var init_point = __esm({
+var init_point2 = __esm({
   "src/stamps/geometry-2d/editor/handlers/pointerDown/point.ts"() {
     init_tools();
     init_safeJsx();
@@ -2750,7 +4707,7 @@ function handlePolygonTool(ctx, t, toolDef, e, x, y, bestHit) {
   ctx.setPendingCount(ctx.pendingIdsRef.current.length);
   return true;
 }
-var init_polygon = __esm({
+var init_polygon2 = __esm({
   "src/stamps/geometry-2d/editor/handlers/pointerDown/polygon.ts"() {
     init_tools();
     init_safeJsx();
@@ -3444,9 +5401,9 @@ var init_pointerDown = __esm({
     init_tools();
     init_move();
     init_select();
-    init_point();
+    init_point2();
     init_singleTarget();
-    init_polygon();
+    init_polygon2();
     init_multiClick();
   }
 });
@@ -4524,7 +6481,6 @@ var init_MiniBoard = __esm({
           deleteSelection,
           emitTransform
         }),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
         [store, clearSelection, deleteSelection, clearPending, emitTransform]
       );
       return /* @__PURE__ */ jsxRuntime.jsx(