@xom11/whiteboard 0.11.0 → 0.24.1

package/dist/chunk-6V4SH4JJ.mjs

@@ -0,0 +1,1801 @@
+"use client";
+import { registerKind, compile, validate } from './chunk-ZBJBQKJ2.mjs';
+import * as React from 'react';
+
+// src/core/scene/types.ts
+var DEFAULT_VIEW_2D = {
+  bbox: [-10, 10, 10, -10],
+  showAxis: false,
+  showGrid: false
+};
+var DEFAULT_VIEW_3D = {
+  bbox3D: [-5, 5, -5, 5, -5, 5],
+  azimuth: 60,
+  elevation: 30
+};
+var DEFAULT_VIEW_GRAPH2D = {
+  xMin: -10,
+  xMax: 10,
+  yMin: -10,
+  yMax: 10,
+  showAxis: true,
+  showGrid: true
+};
+function createEmptyState(domain) {
+  const base = { objects: {}, order: [], counter: 0 };
+  switch (domain) {
+    case "2d":
+      return { ...base, meta: { domain: "2d", version: 1, view: DEFAULT_VIEW_2D } };
+    case "3d":
+      return { ...base, meta: { domain: "3d", version: 1, view: DEFAULT_VIEW_3D } };
+    case "graph2d":
+      return { ...base, meta: { domain: "graph2d", version: 1, view: DEFAULT_VIEW_GRAPH2D } };
+  }
+}
+
+// src/core/scene/selectors.ts
+function listObjects(state) {
+  return state.order.map((id) => state.objects[id]).filter((o) => o !== void 0);
+}
+var ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+var LABEL_GROUPS = {
+  point: ["point", "intersection"],
+  intersection: ["point", "intersection"]
+};
+function nextLabel(state, kind) {
+  const kinds = LABEL_GROUPS[kind] ?? [kind];
+  const used = new Set(
+    listObjects(state).filter((o) => kinds.includes(o.kind)).map((o) => o.label)
+  );
+  for (const c of ALPHABET) if (!used.has(c)) return c;
+  let idx = 1;
+  while (true) {
+    for (const c of ALPHABET) {
+      const candidate = `${c}${idx}`;
+      if (!used.has(candidate)) return candidate;
+    }
+    idx += 1;
+  }
+}
+function useEditorState(opts) {
+  const { store, initialState, onHistoryChange, bindKeyboardShortcuts = true } = opts;
+  const onHistoryChangeRef = React.useRef(onHistoryChange);
+  onHistoryChangeRef.current = onHistoryChange;
+  React.useEffect(() => {
+    if (initialState?.state) {
+      const loaded = initialState.state;
+      store.withoutHistory(() => {
+        store.dispatch({ type: "LOAD", payload: { state: loaded } });
+      });
+    }
+  }, []);
+  React.useEffect(() => {
+    onHistoryChangeRef.current?.(store.canUndo(), store.canRedo());
+    const unsub = store.subscribe(() => {
+      onHistoryChangeRef.current?.(store.canUndo(), store.canRedo());
+    });
+    return unsub;
+  }, [store]);
+  React.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]);
+}
+
+// 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 [];
+  }
+}
+
+// src/core/scene/kinds/point3d.ts
+var 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;
+}
+
+// src/core/scene/kinds/segment3d.ts
+var 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
+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
+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
+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
+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
+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
+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 = {
+  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 = 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 = 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 [];
+  }
+}
+
+// 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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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 = {
+  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);
+
+// src/core/scene/kinds/angle.ts
+var 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
+    });
+  }
+};
+registerKind(def13);
+
+// src/core/scene/kinds/distance.ts
+var 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);
+
+// src/core/scene/kinds/function2d.ts
+var 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 = {
+  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 = {
+  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 = {
+  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
+var DEFAULT_SAMPLES = 1e3;
+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;
+}
+
+// src/core/scene/kinds/extremum2d.ts
+var 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 = {
+  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 = {
+  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/stamps/shared/serializeScene.ts
+function serializeScene(state) {
+  return JSON.stringify(state);
+}
+function isValidState(value, domain) {
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  if (!v.meta || typeof v.meta !== "object") return false;
+  if (v.meta.domain !== domain) return false;
+  if (!v.meta.view || typeof v.meta.view !== "object") return false;
+  if (!v.objects || typeof v.objects !== "object") return false;
+  if (!Array.isArray(v.order)) return false;
+  return true;
+}
+function deserializeScene(domain, raw) {
+  if (!raw) return createEmptyState(domain);
+  try {
+    const parsed = JSON.parse(raw);
+    if (isValidState(parsed, domain)) return parsed;
+  } catch {
+  }
+  return createEmptyState(domain);
+}
+
+export { DEFAULT_VIEW_2D, DEFAULT_VIEW_3D, createEmptyState, deserializeScene, listObjects, nextLabel, serializeScene, useEditorState };
+//# sourceMappingURL=chunk-6V4SH4JJ.mjs.map
+//# sourceMappingURL=chunk-6V4SH4JJ.mjs.map