@xom11/whiteboard 0.11.0 → 0.24.0

package/dist/host-3N4E4KJH.mjs

@@ -0,0 +1,1142 @@
+"use client";
+import { isGraph2DCustomData } from './chunk-O4WIZFRQ.mjs';
+import { paletteFor } from './chunk-VBJLUHCY.mjs';
+import { parseSceneState } from './chunk-7WG2KDRF.mjs';
+import { useToolStateMachine } from './chunk-NVJ7K3DK.mjs';
+import { JxgRenderer, compile } from './chunk-6XUPIGVD.mjs';
+import { initJxgBoard, attachJxgWheelZoom, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel, safeJsx } from './chunk-TOOHCAWP.mjs';
+import { useEditorState, nextLabel } from './chunk-3KBL77M6.mjs';
+import './chunk-VRWZILTG.mjs';
+import { useIsMobile } from './chunk-P2AOIF7S.mjs';
+import { insertStampImage } from './chunk-TQYQVXNW.mjs';
+import './chunk-5UTGXHLJ.mjs';
+import React, { useRef, useId, useEffect, useImperativeHandle, forwardRef, useState, useCallback, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/stamps/graph-2d/editor/handlers.ts
+function handleDown(ctx, coord) {
+  const tool = ctx.toolRef.current;
+  switch (tool) {
+    case "move":
+      return;
+    case "point":
+      addFreePoint(ctx, coord);
+      return;
+    case "slider":
+      ctx.setTool("move");
+      return;
+    case "pointOnCurve":
+      addPointOnCurve(ctx, coord);
+      return;
+    case "intersect":
+      handleIntersect(ctx, coord);
+      return;
+    case "tangent":
+      handleTangent(ctx, coord);
+      return;
+    case "slope":
+      handleSlope(ctx, coord);
+      return;
+    case "extremum":
+    case "root":
+      handleAnalysisTool(ctx, coord, tool);
+      return;
+    case "segment":
+    case "line":
+      handleTwoPointTool(ctx, coord, tool);
+      return;
+    case "polygon":
+      handlePolygonTool(ctx, coord);
+      return;
+  }
+}
+function addFreePoint(ctx, coord) {
+  const id = ctx.nextLabel("point");
+  ctx.store.dispatch({
+    type: "ADD",
+    payload: {
+      obj: {
+        id,
+        kind: "point",
+        label: id,
+        visible: true,
+        locked: false,
+        layer: "default",
+        schemaVersion: 1,
+        attrs: { constraint: { kind: "free", x: coord.x, y: coord.y } }
+      }
+    }
+  });
+  ctx.setTool("move");
+}
+function addPointOnCurve(ctx, coord) {
+  const fid = ctx.getNearestFunctionId(coord);
+  if (!fid) return;
+  const id = ctx.nextLabel("pointOnCurve");
+  ctx.store.dispatch({
+    type: "ADD",
+    payload: {
+      obj: {
+        id,
+        kind: "pointOnCurve",
+        label: id,
+        visible: true,
+        locked: false,
+        layer: "default",
+        schemaVersion: 1,
+        attrs: { functionId: fid, x: coord.x }
+      }
+    }
+  });
+  ctx.setTool("move");
+}
+function handleIntersect(ctx, coord) {
+  const fid = ctx.getNearestFunctionId(coord);
+  if (!fid) return;
+  if (ctx.pendingIdsRef.current.length === 0) {
+    ctx.pushPending(fid);
+    return;
+  }
+  const fa = ctx.pendingIdsRef.current[0];
+  if (fa === fid) return;
+  const id = ctx.nextLabel("intersection");
+  ctx.store.dispatch({
+    type: "ADD",
+    payload: {
+      obj: {
+        id,
+        kind: "intersection",
+        label: id,
+        visible: true,
+        locked: false,
+        layer: "default",
+        schemaVersion: 1,
+        // NOTE: 'lineLine' is semantically imprecise for function2d curves but
+        // works as a discriminant tag — TODO refactor to 'curveCurve' kind in
+        // a follow-up when intersection kind is extended.
+        attrs: { kind: "lineLine", ref1: fa, ref2: fid }
+      }
+    }
+  });
+  ctx.clearPending();
+  ctx.setTool("move");
+}
+function handleTangent(ctx, coord) {
+  const hitId = ctx.getHitObjectId(coord);
+  if (!hitId) return;
+  const obj = ctx.store.getState().objects[hitId];
+  if (!obj || obj.kind !== "pointOnCurve") return;
+  const id = ctx.nextLabel("tangent2d");
+  ctx.store.dispatch({
+    type: "ADD",
+    payload: {
+      obj: {
+        id,
+        kind: "tangent2d",
+        label: id,
+        visible: true,
+        locked: false,
+        layer: "default",
+        schemaVersion: 1,
+        attrs: { pointId: hitId }
+      }
+    }
+  });
+  ctx.setTool("move");
+}
+function handleSlope(ctx, coord) {
+  const hitId = ctx.getHitObjectId(coord);
+  if (!hitId) return;
+  const obj = ctx.store.getState().objects[hitId];
+  if (!obj || obj.kind !== "pointOnCurve") return;
+  const id = ctx.nextLabel("slope2d");
+  ctx.store.dispatch({
+    type: "ADD",
+    payload: {
+      obj: {
+        id,
+        kind: "slope2d",
+        label: id,
+        visible: true,
+        locked: false,
+        layer: "default",
+        schemaVersion: 1,
+        attrs: { pointId: hitId }
+      }
+    }
+  });
+  ctx.setTool("move");
+}
+function handleAnalysisTool(ctx, coord, tool) {
+  const fid = ctx.getNearestFunctionId(coord);
+  if (!fid) return;
+  if (tool === "extremum") {
+    const id = ctx.nextLabel("extremum2d");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: {
+        obj: {
+          id,
+          kind: "extremum2d",
+          label: id,
+          visible: true,
+          locked: false,
+          layer: "default",
+          schemaVersion: 1,
+          attrs: { functionId: fid, interval: { min: -10, max: 10 }, mode: "min" }
+        }
+      }
+    });
+  } else {
+    const id = ctx.nextLabel("root2d");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: {
+        obj: {
+          id,
+          kind: "root2d",
+          label: id,
+          visible: true,
+          locked: false,
+          layer: "default",
+          schemaVersion: 1,
+          attrs: { functionId: fid, interval: { min: -10, max: 10 } }
+        }
+      }
+    });
+  }
+  ctx.setTool("move");
+}
+function handleTwoPointTool(ctx, coord, tool) {
+  const hitId = ctx.getHitObjectId(coord);
+  const pid = hitId ?? (() => {
+    const id2 = ctx.nextLabel("point");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: {
+        obj: {
+          id: id2,
+          kind: "point",
+          label: id2,
+          visible: true,
+          locked: false,
+          layer: "default",
+          schemaVersion: 1,
+          attrs: { constraint: { kind: "free", x: coord.x, y: coord.y } }
+        }
+      }
+    });
+    return id2;
+  })();
+  if (ctx.pendingIdsRef.current.length === 0) {
+    ctx.pushPending(pid);
+    return;
+  }
+  const p1 = ctx.pendingIdsRef.current[0];
+  if (p1 === pid) return;
+  const id = ctx.nextLabel(tool);
+  ctx.store.dispatch({
+    type: "ADD",
+    payload: {
+      obj: {
+        id,
+        kind: tool,
+        label: id,
+        visible: true,
+        locked: false,
+        layer: "default",
+        schemaVersion: 1,
+        attrs: { p1, p2: pid }
+      }
+    }
+  });
+  ctx.clearPending();
+  ctx.setTool("move");
+}
+function handlePolygonTool(ctx, coord) {
+  const hitId = ctx.getHitObjectId(coord);
+  if (hitId && ctx.pendingIdsRef.current[0] === hitId && ctx.pendingIdsRef.current.length >= 3) {
+    const id = ctx.nextLabel("polygon");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: {
+        obj: {
+          id,
+          kind: "polygon",
+          label: id,
+          visible: true,
+          locked: false,
+          layer: "default",
+          schemaVersion: 1,
+          attrs: { points: [...ctx.pendingIdsRef.current] }
+        }
+      }
+    });
+    ctx.clearPending();
+    ctx.setTool("move");
+    return;
+  }
+  const pid = hitId ?? (() => {
+    const id = ctx.nextLabel("point");
+    ctx.store.dispatch({
+      type: "ADD",
+      payload: {
+        obj: {
+          id,
+          kind: "point",
+          label: id,
+          visible: true,
+          locked: false,
+          layer: "default",
+          schemaVersion: 1,
+          attrs: { constraint: { kind: "free", x: coord.x, y: coord.y } }
+        }
+      }
+    });
+    return id;
+  })();
+  ctx.pushPending(pid);
+}
+var MiniBoard = React.forwardRef(
+  function MiniBoard2({ store, selectedTool, showAxis, showGrid, isDark, onReady, onSelectionChange: _onSelectionChange }, ref) {
+    const isDarkRef = useRef(!!isDark);
+    isDarkRef.current = !!isDark;
+    const containerId = useId().replace(/:/g, "_") + "_graph_jxg";
+    const containerRef = useRef(null);
+    const boardRef = useRef(null);
+    const jxgRef = useRef(null);
+    const rendererRef = useRef(null);
+    const toolSM = useToolStateMachine(selectedTool);
+    const showAxisRef = useRef(showAxis);
+    showAxisRef.current = showAxis;
+    const showGridRef = useRef(showGrid);
+    showGridRef.current = showGrid;
+    useEffect(() => {
+      if (toolSM.toolRef.current !== selectedTool) toolSM.setTool(selectedTool);
+    }, [selectedTool]);
+    useEffect(() => {
+      if (typeof window === "undefined" || !containerRef.current) return;
+      let cancelled = false;
+      let wheelCleanup = null;
+      let freeBoard = null;
+      void (async () => {
+        const { JXG, board, cleanup } = await initJxgBoard(containerId, {
+          label: "MiniBoard.graph",
+          boardOptions: {
+            boundingbox: [-10, 10, 10, -10],
+            axis: showAxisRef.current,
+            grid: showGridRef.current,
+            showCopyright: false,
+            showNavigation: true,
+            keepAspectRatio: false,
+            pan: { enabled: true, needShift: false },
+            zoom: { wheel: false }
+          }
+        });
+        if (cancelled || !containerRef.current) {
+          cleanup();
+          return;
+        }
+        jxgRef.current = JXG;
+        boardRef.current = board;
+        freeBoard = cleanup;
+        const theme = paletteFor(isDarkRef.current);
+        rendererRef.current = new JxgRenderer(store, board, { theme });
+        if (containerRef.current) {
+          wheelCleanup = attachJxgWheelZoom(containerRef.current, board, "MiniBoard.graph");
+        }
+        const onDown = (evt) => {
+          const b = boardRef.current;
+          if (!b || toolSM.toolRef.current === "move") return;
+          let ux = 0, uy = 0;
+          safeJsx("MiniBoard.graph.pointerCoords", () => {
+            const usr = b.getUsrCoordsOfMouse?.(evt);
+            if (Array.isArray(usr) && usr.length >= 2 && Number.isFinite(usr[0]) && Number.isFinite(usr[1])) {
+              ux = usr[0];
+              uy = usr[1];
+            } else if (b.origin?.scrCoords && containerRef.current) {
+              const rect = containerRef.current.getBoundingClientRect();
+              const px = (evt.clientX ?? 0) - rect.left;
+              const py = (evt.clientY ?? 0) - rect.top;
+              const ox = b.origin.scrCoords[1];
+              const oy = b.origin.scrCoords[2];
+              const bUnitX = b.unitX || 1;
+              const bUnitY = b.unitY || 1;
+              ux = (px - ox) / bUnitX;
+              uy = (oy - py) / bUnitY;
+            }
+          });
+          const ctx = {
+            store,
+            toolRef: toolSM.toolRef,
+            pendingIdsRef: toolSM.pendingIdsRef,
+            pushPending: toolSM.pushPending,
+            clearPending: toolSM.clearPending,
+            setTool: toolSM.setTool,
+            nextLabel: (kind) => nextLabel(store.getState(), kind),
+            getNearestFunctionId: ({ x, y }) => findNearestFunction(b, store, rendererRef.current, x, y),
+            getHitObjectId: ({ x, y }) => findHitObject(b, rendererRef.current, x, y)
+          };
+          safeJsx(
+            "MiniBoard.graph.handleDown",
+            () => handleDown(ctx, { x: ux, y: uy })
+          );
+        };
+        board.on("down", onDown);
+        onReady?.();
+      })();
+      return () => {
+        cancelled = true;
+        if (wheelCleanup) {
+          wheelCleanup();
+          wheelCleanup = null;
+        }
+        rendererRef.current?.dispose();
+        rendererRef.current = null;
+        if (freeBoard) {
+          freeBoard();
+          freeBoard = null;
+        }
+        boardRef.current = null;
+      };
+    }, [containerId]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        getState: () => store.getState(),
+        getStore: () => store,
+        highlight: (id) => rendererRef.current?.highlight(id),
+        getContainer: () => containerRef.current,
+        getBbox: () => boardRef.current?.getBoundingBox() ?? [-10, 10, 10, -10]
+      }),
+      [store]
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        id: containerId,
+        "data-testid": "graph-miniboard",
+        className: "h-full w-full",
+        style: { touchAction: "none" }
+      }
+    );
+  }
+);
+function findNearestFunction(_board, store, renderer, x, y, tolY = 0.5) {
+  if (!renderer) return null;
+  const state = store.getState();
+  let bestId = null;
+  let bestDist = Infinity;
+  for (const id of state.order) {
+    const obj = state.objects[id];
+    if (obj.kind !== "function2d") continue;
+    const el = renderer.getElement(id);
+    if (!el || typeof el.Y !== "function") continue;
+    let fy;
+    try {
+      fy = el.Y(x);
+    } catch {
+      continue;
+    }
+    if (!Number.isFinite(fy)) continue;
+    const d = Math.abs(y - fy);
+    if (d < tolY && d < bestDist) {
+      bestDist = d;
+      bestId = id;
+    }
+  }
+  return bestId;
+}
+function findHitObject(board, renderer, x, y) {
+  if (!renderer || !board) return null;
+  let screen = null;
+  try {
+    screen = board.create("point", [x, y], { visible: false, withLabel: false, name: "" });
+  } catch {
+    return null;
+  }
+  let result = null;
+  try {
+    for (const [id, el] of renderer.listElements().entries()) {
+      const e = el;
+      if (e?.hasPoint?.(screen.X(), screen.Y())) {
+        result = id;
+        break;
+      }
+    }
+  } finally {
+    try {
+      board.removeObject(screen);
+    } catch {
+    }
+  }
+  return result;
+}
+var GraphEditorPanelInner = forwardRef(
+  function GraphEditorPanel({
+    store,
+    onInsert,
+    onClose,
+    onSelectionChange,
+    selectedTool,
+    showAxis,
+    showGrid,
+    onHistoryChange,
+    isDark,
+    withLeftPanel = false,
+    isMobile = false,
+    onOpenDrawer,
+    onUndo,
+    onRedo,
+    canUndo,
+    canRedo
+  }, ref) {
+    const miniRef = useRef(null);
+    const [ready, setReady] = useState(false);
+    const [hasContent, setHasContent] = useState(false);
+    const onSelectionChangeRef = useRef(onSelectionChange);
+    useEffect(() => {
+      onSelectionChangeRef.current = onSelectionChange;
+    }, [onSelectionChange]);
+    useEditorState({ store, onHistoryChange });
+    useEffect(() => {
+      const sync = () => setHasContent(Object.keys(store.getState().objects).length > 0);
+      sync();
+      return store.subscribe(sync);
+    }, [store]);
+    const handleReady = useCallback(() => {
+      setReady(true);
+    }, []);
+    const performInsert = useCallback(() => {
+      const h = miniRef.current;
+      if (!h) return false;
+      const state = h.getState();
+      if (Object.keys(state.objects).length === 0) return false;
+      void (async () => {
+        try {
+          const { renderGraphSvgFromState } = await import('./render-OCVGDKK6.mjs');
+          const { stringifySceneState } = await import('./serialize-GKN6OVPM.mjs');
+          const jsonState = stringifySceneState(state);
+          const svgString = await renderGraphSvgFromState(state, !!isDark);
+          onInsert(jsonState, svgString);
+        } catch (err) {
+          console.error("[GraphEditorPanel] insert failed:", err);
+        }
+      })();
+      return true;
+    }, [isDark, onInsert]);
+    useImperativeHandle(ref, () => ({
+      insert: performInsert,
+      hasContent: () => Object.keys(miniRef.current?.getState().objects ?? {}).length > 0,
+      getStore: () => miniRef.current?.getStore() ?? null,
+      highlight: (id) => miniRef.current?.highlight(id)
+    }), [performInsert]);
+    const wrapperStyle = isMobile ? { position: "fixed", inset: 0, zIndex: 40 } : {
+      position: "absolute",
+      top: "50%",
+      left: withLeftPanel ? "calc(50% + 120px)" : "50%",
+      transform: "translate(-50%, -50%)",
+      zIndex: 40
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "\u0110\u1ED3 th\u1ECB h\xE0m s\u1ED1",
+        "data-testid": "graph-editor-panel",
+        "data-stamp-area": "true",
+        "data-mobile-editor": isMobile ? "true" : void 0,
+        style: wrapperStyle,
+        className: [
+          isDark ? "theme--dark " : "",
+          "relative flex flex-col overflow-hidden bg-white",
+          isMobile ? "h-full w-full" : `${STAMP_PANEL_DESKTOP} rounded-lg border border-slate-300 shadow-2xl ring-1 ring-black/5`
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-2 border-b border-slate-200 bg-gradient-to-r from-emerald-600 to-teal-600 px-3 py-2 text-white", children: [
+            isMobile && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onOpenDrawer,
+                "aria-label": "M\u1EDF ng\u0103n c\xF4ng c\u1EE5",
+                className: "-ml-1 inline-flex h-10 w-10 items-center justify-center rounded transition hover:bg-white/15",
+                children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+                  /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+                  /* @__PURE__ */ jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs("h3", { className: "flex flex-1 items-center gap-2 text-sm font-semibold", children: [
+              /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("path", { d: "M3 3 L3 21 L21 21" }),
+                /* @__PURE__ */ jsx("path", { d: "M6 14 Q9 8 12 10 Q15 12 18 6" })
+              ] }),
+              "\u0110\u1ED3 th\u1ECB h\xE0m s\u1ED1"
+            ] }),
+            isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onUndo,
+                  disabled: !canUndo,
+                  "aria-label": "Ho\xE0n t\xE1c",
+                  title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
+                  "data-testid": "undo-btn-mobile",
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded transition hover:bg-white/15 disabled:opacity-40",
+                  children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx("path", { d: "M3 10 L8 5 L8 8 L15 8 A5 5 0 0 1 20 13 L20 16" }),
+                    /* @__PURE__ */ jsx("path", { d: "M3 10 L8 15 L8 12" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onRedo,
+                  disabled: !canRedo,
+                  "aria-label": "L\xE0m l\u1EA1i",
+                  title: "L\xE0m l\u1EA1i (Ctrl/Cmd+Shift+Z)",
+                  "data-testid": "redo-btn-mobile",
+                  className: "inline-flex h-9 w-9 items-center justify-center rounded transition hover:bg-white/15 disabled:opacity-40",
+                  children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx("path", { d: "M21 10 L16 5 L16 8 L9 8 A5 5 0 0 0 4 13 L4 16" }),
+                    /* @__PURE__ */ jsx("path", { d: "M21 10 L16 15 L16 12" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: performInsert,
+                  disabled: !ready || !hasContent,
+                  title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
+                  "data-testid": "graph-insert-btn-mobile",
+                  className: "rounded bg-white/15 px-3 py-1.5 text-xs font-semibold transition hover:bg-white/25 disabled:opacity-50",
+                  children: "Ch\xE8n"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-testid": "graph-editor-close-btn",
+                onClick: onClose,
+                "aria-label": "\u0110\xF3ng",
+                className: "inline-flex h-9 w-9 items-center justify-center rounded transition hover:bg-white/15",
+                children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
+            MiniBoard,
+            {
+              ref: miniRef,
+              store,
+              selectedTool,
+              showAxis,
+              showGrid,
+              isDark,
+              onReady: handleReady,
+              onSelectionChange: (id) => {
+                onSelectionChangeRef.current?.(id);
+              }
+            }
+          ) }),
+          !isMobile && /* @__PURE__ */ jsxs("footer", { className: "flex items-center justify-between border-t border-slate-200 bg-slate-50 px-3 py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-500", children: "Ch\u1ECDn c\xF4ng c\u1EE5 b\xEAn tr\xE1i, nh\u1EA5p tr\xEAn b\u1EA3ng \u0111\u1EC3 t\u01B0\u01A1ng t\xE1c." }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "rounded border border-slate-300 bg-white px-3 py-1 text-xs font-medium text-slate-700 transition hover:bg-slate-100",
+                  children: "Hu\u1EF7"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: performInsert,
+                  disabled: !ready || !hasContent,
+                  title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
+                  "data-testid": "graph-insert-btn",
+                  className: "rounded bg-emerald-600 px-3 py-1 text-xs font-medium text-white transition hover:bg-emerald-700 disabled:opacity-50",
+                  children: "Ch\xE8n"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ToastHost, {})
+        ]
+      }
+    );
+  }
+);
+var GraphEditorPanel2 = forwardRef(
+  function GraphEditorPanel3(props, ref) {
+    return /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(GraphEditorPanelInner, { ...props, ref }) });
+  }
+);
+var GROUPS = ["basic", "function", "analysis", "draw"];
+var GROUP_LABELS = {
+  basic: "C\u01A1 b\u1EA3n",
+  function: "H\xE0m",
+  analysis: "Ph\xE2n t\xEDch",
+  draw: "V\u1EBD"
+};
+var C_POINT = "#2563eb";
+var C_FUNC = "#059669";
+var C_HELP = "#dc2626";
+var wrap = (children) => /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children });
+var Icon = {
+  move: wrap(/* @__PURE__ */ jsx("path", { d: "M5 3 L5 18 L9.5 14 L12 20 L14 19.2 L11.5 13.5 L17.5 13.5 Z", fill: "currentColor", fillOpacity: "0.12" })),
+  point: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2.4", fill: C_POINT, stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4", fill: "none" })
+  ] })),
+  slider: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "2.4", fill: "currentColor", stroke: "none" })
+  ] })),
+  pointOnCurve: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 18 Q8 4 14 14 T21 6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "14", cy: "14", r: "2", fill: C_POINT, stroke: "none" })
+  ] })),
+  intersect: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 6 Q12 22 21 6" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 18 Q12 2 21 18" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.6", fill: C_POINT, stroke: "none" })
+  ] })),
+  tangent: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 16 Q12 4 21 16", stroke: C_FUNC }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "10", x2: "20", y2: "10", stroke: C_HELP, strokeDasharray: "3 2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "1.8", fill: C_POINT, stroke: "none" })
+  ] })),
+  slope: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "6" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "14", y2: "20", stroke: C_HELP, strokeDasharray: "2 2" }),
+    /* @__PURE__ */ jsx("line", { x1: "14", y1: "20", x2: "14", y2: "11", stroke: C_HELP, strokeDasharray: "2 2" })
+  ] })),
+  extremum: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 20 Q9 4 15 16 T21 8" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "8.5", r: "1.8", fill: C_HELP, stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "1.8", fill: C_HELP, stroke: "none" })
+  ] })),
+  root: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 6 Q9 18 12 12 Q15 6 19 18" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.6", fill: C_HELP, stroke: "none" })
+  ] })),
+  segment: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "18", x2: "19", y2: "6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "18", r: "1.4", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "6", r: "1.4", fill: "currentColor", stroke: "none" })
+  ] })),
+  line: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "20", x2: "21", y2: "4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "14.7", r: "1.4", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "9.3", r: "1.4", fill: "currentColor", stroke: "none" })
+  ] })),
+  polygon: wrap(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("polygon", { points: "5,18 12,4 19,12 16,20 8,20", fill: "currentColor", fillOpacity: "0.12" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "18", r: "1.2", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "4", r: "1.2", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1.2", fill: "currentColor", stroke: "none" })
+  ] }))
+};
+var TOOLS = [
+  { key: "move", label: "Di chuy\u1EC3n", hint: "Di chuy\u1EC3n / ch\u1ECDn", icon: Icon.move, group: "basic", shortcut: "S" },
+  { key: "point", label: "\u0110i\u1EC3m", hint: "T\u1EA1o \u0111i\u1EC3m t\u1EF1 do", icon: Icon.point, group: "basic", shortcut: "P" },
+  { key: "slider", label: "Slider", hint: "T\u1EA1o tham s\u1ED1", icon: Icon.slider, group: "basic", shortcut: "B" },
+  { key: "pointOnCurve", label: "\u0110i\u1EC3m tr\xEAn \u0111\u1ED3 th\u1ECB", hint: "T\u1EA1o \u0111i\u1EC3m tr\xEAn h\xE0m s\u1ED1", icon: Icon.pointOnCurve, group: "function", shortcut: "O" },
+  { key: "intersect", label: "Giao \u0111i\u1EC3m", hint: "Giao 2 \u0111\u1ED3 th\u1ECB", icon: Icon.intersect, group: "function", shortcut: "I" },
+  { key: "tangent", label: "Ti\u1EBFp tuy\u1EBFn", hint: "Ti\u1EBFp tuy\u1EBFn t\u1EA1i \u0111i\u1EC3m", icon: Icon.tangent, group: "function", shortcut: "T" },
+  { key: "slope", label: "H\u1EC7 s\u1ED1 g\xF3c", hint: "Slope triangle", icon: Icon.slope, group: "function", shortcut: "K" },
+  { key: "extremum", label: "C\u1EF1c tr\u1ECB", hint: "T\xECm c\u1EF1c tr\u1ECB trong kho\u1EA3ng", icon: Icon.extremum, group: "analysis", shortcut: "E" },
+  { key: "root", label: "Nghi\u1EC7m", hint: "T\xECm nghi\u1EC7m trong kho\u1EA3ng", icon: Icon.root, group: "analysis", shortcut: "R" },
+  { key: "segment", label: "\u0110o\u1EA1n th\u1EB3ng", hint: "V\u1EBD \u0111o\u1EA1n th\u1EB3ng", icon: Icon.segment, group: "draw", shortcut: "M" },
+  { key: "line", label: "\u0110\u01B0\u1EDDng th\u1EB3ng", hint: "V\u1EBD \u0111\u01B0\u1EDDng th\u1EB3ng", icon: Icon.line, group: "draw", shortcut: "L" },
+  { key: "polygon", label: "\u0110a gi\xE1c", hint: "V\u1EBD \u0111a gi\xE1c", icon: Icon.polygon, group: "draw", shortcut: "Y" }
+];
+function FunctionRow({ obj, store, selected, onClick }) {
+  const [local, setLocal] = useState(obj.attrs.expression);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    setLocal(obj.attrs.expression);
+    setError(null);
+  }, [obj.attrs.expression]);
+  function commit(value) {
+    if (value === obj.attrs.expression) {
+      setError(null);
+      return;
+    }
+    const result = compile(value, {});
+    if (typeof result === "string") {
+      setError(result);
+      return;
+    }
+    setError(null);
+    store.dispatch({
+      type: "UPDATE_ATTRS",
+      payload: { id: obj.id, patch: { expression: value } }
+    });
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit(local);
+      e.target.blur();
+    } else if (e.key === "Escape") {
+      setLocal(obj.attrs.expression);
+      setError(null);
+      e.target.blur();
+    }
+  }
+  function handleToggleVisible() {
+    store.dispatch({
+      type: "UPDATE_ATTRS",
+      payload: { id: obj.id, patch: { visible: !obj.attrs.visible } }
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-testid": `function-row-${obj.id}`,
+      "aria-selected": selected,
+      onClick,
+      className: "flex items-center gap-1.5 border-b border-zinc-100 px-2 py-1 text-xs cursor-pointer dark:border-zinc-800 " + (selected ? "bg-slate-200" : "hover:bg-zinc-50 dark:hover:bg-zinc-900"),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "inline-block h-3 w-3 shrink-0 rounded-full",
+            style: { backgroundColor: obj.attrs.color },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "shrink-0 font-mono text-[11px] text-slate-700", children: [
+          obj.label,
+          "(x)\xA0="
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: local,
+            onChange: (e) => {
+              setLocal(e.target.value);
+              setError(null);
+            },
+            onKeyDown: handleKeyDown,
+            onBlur: () => commit(local),
+            onClick: (e) => e.stopPropagation(),
+            className: [
+              "min-w-0 flex-1 rounded border px-1.5 py-0.5 font-mono text-xs outline-none focus:ring-1",
+              error ? "border-red-400 focus:ring-red-300" : "border-slate-300 focus:ring-blue-300"
+            ].join(" "),
+            "data-testid": `function-row-input-${obj.id}`,
+            "aria-label": "Bi\u1EC3u th\u1EE9c"
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-testid": `function-row-error-${obj.id}`,
+            className: "shrink-0 text-[10px] text-red-600",
+            title: error,
+            children: "\u26A0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "\u1EA8n/hi\u1EC7n h\xE0m",
+            "aria-pressed": !obj.attrs.visible,
+            onClick: (e) => {
+              e.stopPropagation();
+              handleToggleVisible();
+            },
+            className: "shrink-0 rounded px-1 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800",
+            children: obj.attrs.visible ? "\u{1F441}" : "\u{1F6AB}"
+          }
+        )
+      ]
+    }
+  );
+}
+function ParameterRow({ obj, store, selected, onClick }) {
+  const { value, min, max, step } = obj.attrs;
+  function handleSliderChange(e) {
+    const newVal = parseFloat(e.target.value);
+    if (!Number.isFinite(newVal)) return;
+    store.dispatch({
+      type: "UPDATE_ATTRS",
+      payload: { id: obj.id, patch: { value: newVal } }
+    });
+  }
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "data-testid": `parameter-row-${obj.id}`,
+      "aria-selected": selected,
+      onClick,
+      className: "flex items-center gap-1.5 border-b border-zinc-100 px-2 py-1 text-xs cursor-pointer dark:border-zinc-800 " + (selected ? "bg-slate-200" : "hover:bg-zinc-50 dark:hover:bg-zinc-900"),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0 w-4 font-mono text-[11px] font-semibold text-slate-700", children: obj.label }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min,
+            max,
+            step,
+            value,
+            onChange: handleSliderChange,
+            onClick: (e) => e.stopPropagation(),
+            className: "min-w-0 flex-1 accent-blue-600",
+            "data-testid": `parameter-row-slider-${obj.id}`,
+            "aria-label": `Tham s\u1ED1 ${obj.label}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-testid": `parameter-row-value-${obj.id}`,
+            className: "shrink-0 w-8 text-right font-mono text-[11px] text-slate-600",
+            children: Number.isInteger(value) ? value : parseFloat(value.toFixed(3))
+          }
+        )
+      ]
+    }
+  );
+}
+var GraphIconHeader = /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 3 L3 21 L21 21" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 14 Q9 8 12 10 Q15 12 18 6" })
+] });
+function makeRenderRow(store) {
+  return function renderRow(obj, defaults) {
+    if (obj.kind === "function2d") {
+      return /* @__PURE__ */ jsx(
+        FunctionRow,
+        {
+          obj,
+          store,
+          selected: defaults.selected,
+          onClick: defaults.onClick
+        }
+      );
+    }
+    if (obj.kind === "parameter") {
+      return /* @__PURE__ */ jsx(
+        ParameterRow,
+        {
+          obj,
+          store,
+          selected: defaults.selected,
+          onClick: defaults.onClick
+        }
+      );
+    }
+    return null;
+  };
+}
+function parseInitialState(data) {
+  if (!isGraph2DCustomData(data)) return null;
+  const state = parseSceneState(data.jsonState);
+  if (!state) {
+    console.warn("Graph2DStampHost: jsonState corrupted ho\u1EB7c kh\xF4ng h\u1EE3p l\u1EC7");
+    return null;
+  }
+  return state;
+}
+var Graph2DStampHost = forwardRef(
+  function Graph2DStampHost2({ api, editingElement, onClose, isDark }, ref) {
+    const panelRef = useRef(null);
+    const { isMobile } = useIsMobile();
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const sceneStore = useStampStore("graph2d", editingElement, parseInitialState);
+    const [selectedObjectId, setSelectedObjectId] = useState(void 0);
+    const initialMeta = sceneStore.getState().meta;
+    const initialView = initialMeta.domain === "graph2d" ? initialMeta.view : null;
+    const [selectedTool, setSelectedTool] = useState("move");
+    const [showAxis, setShowAxisState] = useState(initialView?.showAxis ?? true);
+    const [showGrid, setShowGridState] = useState(initialView?.showGrid ?? true);
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const handleHistoryChange = useCallback((u, r) => {
+      setCanUndo(u);
+      setCanRedo(r);
+    }, []);
+    const handleUndo = useCallback(() => sceneStore.undo(), [sceneStore]);
+    const handleRedo = useCallback(() => sceneStore.redo(), [sceneStore]);
+    const handleShowAxisChange = useCallback((b) => {
+      setShowAxisState(b);
+      sceneStore.dispatch({ type: "UPDATE_VIEW", payload: { patch: { showAxis: b } } });
+    }, [sceneStore]);
+    const handleShowGridChange = useCallback((b) => {
+      setShowGridState(b);
+      sceneStore.dispatch({ type: "UPDATE_VIEW", payload: { patch: { showGrid: b } } });
+    }, [sceneStore]);
+    const handleAddFunction = useCallback(() => {
+      const existing = Object.values(sceneStore.getState().objects).filter((o) => o.kind === "function2d");
+      const id = `f${existing.length + 1}`;
+      sceneStore.dispatch({
+        type: "ADD",
+        payload: {
+          obj: {
+            id,
+            kind: "function2d",
+            label: id,
+            visible: true,
+            locked: false,
+            layer: "default",
+            schemaVersion: 1,
+            attrs: { expression: "x", color: "#2563eb", visible: true }
+          }
+        }
+      });
+    }, [sceneStore]);
+    const handleAddParameter = useCallback(() => {
+      const existing = Object.values(sceneStore.getState().objects).filter((o) => o.kind === "parameter");
+      const labels = "abcdefghijklmnopqrstuvwxyz";
+      const usedLabels = new Set(existing.map((o) => o.label));
+      let label = "a";
+      for (const c of labels) {
+        if (!usedLabels.has(c)) {
+          label = c;
+          break;
+        }
+      }
+      const id = label;
+      sceneStore.dispatch({
+        type: "ADD",
+        payload: {
+          obj: {
+            id,
+            kind: "parameter",
+            label,
+            visible: true,
+            locked: false,
+            layer: "default",
+            schemaVersion: 1,
+            attrs: { value: 1, min: -5, max: 5, step: 0.1 }
+          }
+        }
+      });
+    }, [sceneStore]);
+    const handleInsert = useCallback(
+      async (jsonState, svgString) => {
+        if (!api) return;
+        try {
+          await insertStampImage(api, {
+            svgString,
+            makeCustomData: () => ({
+              kind: "graph2d",
+              version: 2,
+              jsonState
+            }),
+            editingElementId: editingElement?.id ?? null
+          });
+        } catch (err) {
+          console.error("Graph2D insert failed:", err);
+        }
+        onClose();
+      },
+      [api, editingElement?.id, onClose]
+    );
+    useImperativeHandle(
+      ref,
+      () => ({
+        tryInsert: () => panelRef.current?.insert() ?? false,
+        hasContent: () => panelRef.current?.hasContent() ?? false
+      }),
+      []
+    );
+    const renderRow = useMemo(() => makeRenderRow(sceneStore), [sceneStore]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        StampLeftPanel,
+        {
+          title: "\u0110\u1ED3 th\u1ECB",
+          icon: GraphIconHeader,
+          onClose,
+          isDark,
+          testId: "stamp-left-panel",
+          tools: TOOLS,
+          groupOrder: GROUPS,
+          groupLabels: GROUP_LABELS,
+          activeTool: selectedTool,
+          onToolChange: setSelectedTool,
+          view: {
+            showAxis,
+            showGrid,
+            onShowAxisChange: handleShowAxisChange,
+            onShowGridChange: handleShowGridChange
+          },
+          history: {
+            onUndo: handleUndo,
+            canUndo,
+            onRedo: handleRedo,
+            canRedo
+          },
+          objects: {
+            store: sceneStore,
+            selectedObjectId,
+            onObjectSelect: (id) => {
+              setSelectedObjectId(id ?? void 0);
+              panelRef.current?.highlight(id);
+            },
+            renderRow,
+            addButtons: [
+              { label: "+ H\xE0m f(x)", testId: "add-function-btn", onClick: handleAddFunction },
+              { label: "+ Tham s\u1ED1", testId: "add-parameter-btn", onClick: handleAddParameter }
+            ]
+          },
+          isMobile,
+          drawerOpen,
+          onDrawerClose: () => setDrawerOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        GraphEditorPanel2,
+        {
+          ref: panelRef,
+          store: sceneStore,
+          onInsert: handleInsert,
+          onClose,
+          selectedTool,
+          showAxis,
+          showGrid,
+          onHistoryChange: handleHistoryChange,
+          isDark,
+          withLeftPanel: !isMobile,
+          isMobile,
+          onOpenDrawer: () => setDrawerOpen(true),
+          onUndo: handleUndo,
+          onRedo: handleRedo,
+          canUndo,
+          canRedo,
+          onSelectionChange: setSelectedObjectId
+        }
+      )
+    ] });
+  }
+);
+
+export { Graph2DStampHost };
+//# sourceMappingURL=host-3N4E4KJH.mjs.map
+//# sourceMappingURL=host-3N4E4KJH.mjs.map