@xom11/whiteboard 0.6.2 → 0.6.4

package/dist/index.js

@@ -15,6 +15,12 @@ var dynamic__default = /*#__PURE__*/_interopDefault(dynamic);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
@@ -292,6 +298,22 @@ var GROUP_LABELS = {
   edit: "Ch\u1EC9nh s\u1EEDa",
   transform: "Ph\xE9p bi\u1EBFn h\xECnh"
 };
+var GROUP_ORDER = [
+  "move",
+  "point",
+  "line",
+  "construct",
+  "polygon",
+  "circle",
+  "measure",
+  "edit",
+  "transform"
+];
+var A_CODE = "A".charCodeAt(0);
+function letterForGroup(g) {
+  const idx = GROUP_ORDER.indexOf(g);
+  return idx >= 0 ? String.fromCharCode(A_CODE + idx) : "";
+}
 function objKind(obj) {
   if (!obj) return "other";
   const e = (obj.elType || obj.type || "").toString().toLowerCase();
@@ -1684,7 +1706,24 @@ var JSXGraphMiniBoard = ({ onReady, initialState, isDark }) => {
       });
       onReady({
         getContainer: () => containerRef.current,
-        getCreationLog: () => [...creationLogRef.current],
+        // Sync toạ độ live của free point về log trước khi trả ra. JSXGraph
+        // cho phép drag free point (args=[x,y] không có ref), việc drag chỉ
+        // cập nhật obj.X()/Y() trên board chứ không đụng log → re-edit + Chèn
+        // sẽ serialize toạ độ cũ → SVG không đổi → fileId trùng → user thấy
+        // "k thay đổi". Line/segment/circle/polygon tham chiếu point qua id
+        // nên auto-update theo.
+        getCreationLog: () => creationLogRef.current.map((e) => {
+          if (e.type !== "point") return { ...e };
+          const args = e.args;
+          if (!Array.isArray(args) || args.length !== 2) return { ...e };
+          if (typeof args[0] !== "number" || typeof args[1] !== "number") return { ...e };
+          const obj = objMapRef.current.get(e.id);
+          if (!obj || typeof obj.X !== "function" || typeof obj.Y !== "function") return { ...e };
+          const x = obj.X();
+          const y = obj.Y();
+          if (!Number.isFinite(x) || !Number.isFinite(y)) return { ...e };
+          return { ...e, args: [x, y] };
+        }),
         getBbox: () => boardRef.current ? boardRef.current.getBoundingBox() : [-10, 10, 10, -10],
         getShowAxis: () => showAxisRef.current,
         getShowGrid: () => showGridRef.current,
@@ -1882,8 +1921,140 @@ var JSXGraphMiniBoard = ({ onReady, initialState, isDark }) => {
     }
   );
 };
+function MobileToolDrawer({
+  title,
+  headerIcon,
+  chips,
+  actions,
+  groups,
+  activeTool,
+  onToolSelect,
+  drawerOpen,
+  onDrawerClose,
+  isDark,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    drawerOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "stamp-drawer-backdrop",
+        onPointerDown: onDrawerClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        role: "complementary",
+        "aria-label": title,
+        "aria-hidden": !drawerOpen ? "true" : void 0,
+        "data-testid": testId,
+        "data-stamp-area": "true",
+        "data-mobile-drawer": "true",
+        "data-geo-mobile": "true",
+        "data-drawer-state": drawerOpen ? "open" : "closed",
+        className: [
+          isDark ? "theme--dark " : "",
+          "stamp-drawer-mobile flex flex-col border-r border-slate-200 bg-white shadow-md"
+        ].join(""),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-4 py-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-base font-semibold text-slate-800", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-50 text-emerald-700", children: headerIcon }),
+              title
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onDrawerClose,
+                "aria-label": "\u0110\xF3ng ng\u0103n c\xF4ng c\u1EE5",
+                className: "inline-flex h-9 w-9 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-slate-800",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-2 border-b border-slate-200 bg-white/95 px-3 py-2 backdrop-blur", children: [
+            chips.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "aria-pressed": c.pressed,
+                "aria-label": c.label,
+                "data-testid": c.testId,
+                onClick: () => c.onToggle(!c.pressed),
+                className: "geo-mobile-chip",
+                children: [
+                  c.icon,
+                  c.label
+                ]
+              },
+              c.label
+            )),
+            actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center gap-1", children: actions.map((a) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: a.onClick,
+                disabled: a.disabled,
+                "aria-label": a.label,
+                title: a.title ?? a.label,
+                className: "inline-flex h-9 w-9 items-center justify-center rounded-full text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-transparent",
+                children: a.icon
+              },
+              a.label
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "min-h-0 flex-1 overflow-y-auto",
+              style: { paddingBottom: "calc(0.75rem + env(safe-area-inset-bottom))" },
+              children: groups.map((g) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "px-3 pt-3 pb-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-500", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1 w-1 rounded-full bg-emerald-500" }),
+                  g.groupLabel
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: g.tools.map((t) => {
+                  const active = activeTool === t.key;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": t.label,
+                      "aria-pressed": active,
+                      "data-tool": t.key,
+                      onClick: () => {
+                        onToolSelect(t.key);
+                        onDrawerClose();
+                      },
+                      className: [
+                        "flex flex-col items-center justify-center gap-1.5 rounded-2xl px-2 py-3 transition active:scale-95",
+                        active ? "geo-mobile-tool-active" : "bg-slate-50 text-slate-700 hover:bg-slate-100"
+                      ].join(" "),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center", children: t.icon }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[11px] font-medium leading-tight line-clamp-2", children: t.label })
+                      ]
+                    },
+                    t.key
+                  );
+                }) })
+              ] }, g.group))
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 var TOOLTIP_DELAY_MS = 400;
-function Shell({ title, icon, onClose, children, isDark }) {
+function Shell({ title, icon, onClose, children, isDark, closeLabel = "\u0110\xF3ng" }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
@@ -1891,7 +2062,10 @@ function Shell({ title, icon, onClose, children, isDark }) {
       "aria-label": title,
       "data-testid": "stamp-left-panel",
       "data-stamp-area": "true",
-      className: `${isDark ? "theme--dark " : ""}absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200`,
+      className: [
+        isDark ? "theme--dark " : "",
+        "absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200"
+      ].join(""),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-slate-800", children: [
@@ -1902,12 +2076,9 @@ function Shell({ title, icon, onClose, children, isDark }) {
             "button",
             {
               onClick: onClose,
-              "aria-label": "\u0110\xF3ng",
+              "aria-label": closeLabel,
               className: "rounded p-1 text-slate-500 transition hover:bg-slate-100 hover:text-slate-800",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
-                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
-              ] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
             }
           )
         ] }),
@@ -1928,24 +2099,36 @@ var GeometryIconHeader = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", h
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "1.5", fill: "currentColor", stroke: "none" }),
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "1.5", fill: "currentColor", stroke: "none" })
 ] });
-function LeftPanel({
-  activeTool,
-  onToolChange,
-  showAxis,
-  showGrid,
-  onShowAxisChange,
-  onShowGridChange,
-  onUndo,
-  canUndo,
-  onClose,
-  isDark
-}) {
-  const grouped = TOOLS.reduce((acc, t) => {
-    var _a;
-    (acc[_a = t.group] ?? (acc[_a] = [])).push(t);
-    return acc;
-  }, {});
-  const groupKeys = Object.keys(grouped);
+function CloseIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+  ] });
+}
+function UndoIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 7 3 13 9 13" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
+  ] });
+}
+function AxisIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "20", x2: "4", y2: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 6 4 4 6 6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 18 20 20 18 22" })
+  ] });
+}
+function GridIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "1" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "10", x2: "20", y2: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "16", x2: "20", y2: "16" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", y1: "4", x2: "10", y2: "20" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "4", x2: "16", y2: "20" })
+  ] });
+}
+function useToolHoverTooltip() {
   const [hover, setHover] = react.useState(null);
   const [portalReady, setPortalReady] = react.useState(false);
   const hoverTimerRef = react.useRef(null);
@@ -1969,6 +2152,23 @@ function LeftPanel({
     }
     setHover(null);
   }, []);
+  return { hover, portalReady, showHover, hideHover };
+}
+function DesktopGeometryPanel(props) {
+  const { activeTool, onToolChange, showAxis, showGrid, onShowAxisChange, onShowGridChange, onUndo, canUndo, onClose, isDark, chordGroup } = props;
+  const grouped = react.useMemo(() => {
+    return TOOLS.reduce((acc, t) => {
+      var _a;
+      (acc[_a = t.group] ?? (acc[_a] = [])).push(t);
+      return acc;
+    }, {});
+  }, []);
+  const groupKeys = react.useMemo(
+    () => GROUP_ORDER.filter((g) => grouped[g]),
+    [grouped]
+  );
+  const activeGroupTools = chordGroup ? grouped[chordGroup] ?? null : null;
+  const { hover, portalReady, showHover, hideHover } = useToolHoverTooltip();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Shell, { title: "H\xECnh h\u1ECDc", icon: GeometryIconHeader, onClose, isDark, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Section, { label: "B\u1ED1 c\u1EE5c", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-[11px] text-slate-700", children: [
@@ -2005,36 +2205,95 @@ function LeftPanel({
             title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
             "aria-label": "Ho\xE0n t\xE1c",
             className: "ml-auto inline-flex items-center justify-center rounded p-1 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-transparent",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 7 3 13 9 13" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
-            ] })
+            children: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon, {})
           }
         )
       ] }) }),
-      groupKeys.map((group) => /* @__PURE__ */ jsxRuntime.jsx(Section, { label: GROUP_LABELS[group], children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: grouped[group].map((t) => {
-        const active = activeTool === t.key;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+      groupKeys.map((group) => {
+        const isChordActive = chordGroup === group;
+        const dimmed = chordGroup !== null && !isChordActive;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "section",
           {
-            type: "button",
-            "aria-label": t.label,
-            "aria-pressed": active,
-            "data-tool": t.key,
-            onClick: () => onToolChange(t.key),
-            onMouseEnter: (e) => showHover(e.currentTarget, t),
-            onMouseLeave: hideHover,
-            onFocus: (e) => showHover(e.currentTarget, t),
-            onBlur: hideHover,
+            "data-chord-group": group,
+            "data-chord-active": isChordActive ? "true" : "false",
             className: [
-              "flex h-8 items-center justify-center rounded-md transition",
-              active ? "bg-emerald-600 text-white shadow-sm" : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+              "rounded-md transition",
+              isChordActive ? "bg-emerald-50 ring-1 ring-emerald-400 p-1" : "p-0",
+              dimmed ? "opacity-55" : "opacity-100"
             ].join(" "),
-            children: t.icon
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "mb-1.5 flex items-center justify-between text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: GROUP_LABELS[group] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-testid": `chord-letter-${group}`,
+                    className: [
+                      "font-mono text-[10px] leading-none transition",
+                      isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
+                    ].join(" "),
+                    children: letterForGroup(group)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: grouped[group].map((t, i) => {
+                const active = activeTool === t.key;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t.label,
+                    "aria-pressed": active,
+                    "data-tool": t.key,
+                    onClick: () => onToolChange(t.key),
+                    onMouseEnter: (e) => showHover(e.currentTarget, t),
+                    onMouseLeave: hideHover,
+                    onFocus: (e) => showHover(e.currentTarget, t),
+                    onBlur: hideHover,
+                    className: [
+                      "relative flex h-8 items-center justify-center rounded-md transition",
+                      active ? "bg-emerald-600 text-white shadow-sm" : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+                    ].join(" "),
+                    children: [
+                      t.icon,
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          "data-testid": `chord-num-${t.key}`,
+                          className: [
+                            "pointer-events-none absolute bottom-0 right-0.5 font-mono text-[9px] leading-none transition",
+                            active ? "text-white/70" : isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
+                          ].join(" "),
+                          children: i + 1
+                        }
+                      )
+                    ]
+                  },
+                  t.key
+                );
+              }) })
+            ]
           },
-          t.key
+          group
         );
-      }) }) }, group))
+      }),
+      chordGroup && activeGroupTools && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-testid": "chord-hint",
+          className: "mt-1 rounded border border-emerald-200 bg-emerald-50/60 px-2 py-1 text-[11px] leading-snug text-slate-600",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-semibold text-emerald-700", children: letterForGroup(chordGroup) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 text-slate-400", children: "\u2192" }),
+            activeGroupTools.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2 inline-block", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-semibold text-emerald-700", children: i + 1 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: t.label })
+            ] }, t.key)),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Esc hu\u1EF7" })
+          ]
+        }
+      )
     ] }),
     portalReady && hover && typeof document !== "undefined" ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2058,6 +2317,78 @@ function LeftPanel({
     ) : null
   ] });
 }
+function MobileGeometryPanel(props) {
+  const {
+    activeTool,
+    onToolChange,
+    showAxis,
+    showGrid,
+    onShowAxisChange,
+    onShowGridChange,
+    onUndo,
+    canUndo,
+    isDark,
+    drawerOpen,
+    onDrawerClose
+  } = props;
+  const groups = react.useMemo(() => {
+    const acc = /* @__PURE__ */ new Map();
+    for (const t of TOOLS) {
+      if (!acc.has(t.group)) acc.set(t.group, []);
+      acc.get(t.group).push(t);
+    }
+    return Array.from(acc.entries()).map(([group, tools]) => ({
+      group,
+      groupLabel: GROUP_LABELS[group],
+      tools: tools.map((t) => ({ key: t.key, label: t.label, icon: t.icon }))
+    }));
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MobileToolDrawer,
+    {
+      title: "H\xECnh h\u1ECDc",
+      headerIcon: GeometryIconHeader,
+      testId: "stamp-left-panel",
+      isDark,
+      drawerOpen: !!drawerOpen,
+      onDrawerClose: () => onDrawerClose?.(),
+      chips: [
+        {
+          label: "Tr\u1EE5c",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(AxisIcon, {}),
+          pressed: showAxis,
+          onToggle: onShowAxisChange,
+          testId: "toggle-axis"
+        },
+        {
+          label: "L\u01B0\u1EDBi",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(GridIcon, {}),
+          pressed: showGrid,
+          onToggle: onShowGridChange,
+          testId: "toggle-grid"
+        }
+      ],
+      actions: [
+        {
+          label: "Ho\xE0n t\xE1c",
+          title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon, {}),
+          onClick: onUndo,
+          disabled: !canUndo
+        }
+      ],
+      groups,
+      activeTool,
+      onToolSelect: onToolChange
+    }
+  );
+}
+function LeftPanel(props) {
+  if (props.isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsx(MobileGeometryPanel, { ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DesktopGeometryPanel, { ...props });
+}
 
 // src/stamps/geometry-2d/serialize.ts
 function serializeBoard(board, log, options = {}) {
@@ -2202,6 +2533,38 @@ var STROKE_PALETTE = [
   "#868e96"
   // gray
 ];
+var MOBILE_QUERY = "(max-width: 768px)";
+var NO_HOVER_QUERY = "(hover: none)";
+function readMatch(query) {
+  if (typeof window === "undefined" || !window.matchMedia) return false;
+  try {
+    return window.matchMedia(query).matches;
+  } catch {
+    return false;
+  }
+}
+function useIsMobile() {
+  const [state, setState] = react.useState(() => ({
+    isMobile: readMatch(MOBILE_QUERY),
+    isTouchOnly: readMatch(NO_HOVER_QUERY)
+  }));
+  react.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(MOBILE_QUERY);
+    const tql = window.matchMedia(NO_HOVER_QUERY);
+    const update = () => {
+      setState({ isMobile: mql.matches, isTouchOnly: tql.matches });
+    };
+    update();
+    mql.addEventListener("change", update);
+    tql.addEventListener("change", update);
+    return () => {
+      mql.removeEventListener("change", update);
+      tql.removeEventListener("change", update);
+    };
+  }, []);
+  return state;
+}
 var DASH_OPTIONS = [
   { value: 0, label: "N\xE9t li\u1EC1n" },
   { value: 2, label: "N\xE9t \u0111\u1EE9t" },
@@ -2260,6 +2623,26 @@ var PropertiesPopover = (props) => {
   const { anchor, onClose, onMutate, isDark, getAllNames } = props;
   const rootRef = react.useRef(null);
   const [section, setSection] = react.useState(null);
+  const { isMobile } = useIsMobile();
+  const [clamped, setClamped] = react.useState(null);
+  react.useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    const margin = 8;
+    if (isMobile) {
+      const rect2 = rootRef.current?.getBoundingClientRect();
+      const w2 = rect2?.width ?? 280;
+      const left2 = Math.max(margin, (window.innerWidth - w2) / 2);
+      const top2 = window.innerHeight - (rect2?.height ?? 80) - margin - 12;
+      setClamped({ left: left2, top: Math.max(margin, top2) });
+      return;
+    }
+    const rect = rootRef.current?.getBoundingClientRect();
+    const w = rect?.width ?? 280;
+    const h = rect?.height ?? 80;
+    const left = Math.max(margin, Math.min(anchor.x, window.innerWidth - w - margin));
+    const top = Math.max(margin, Math.min(anchor.y, window.innerHeight - h - margin));
+    setClamped({ left, top });
+  }, [anchor.x, anchor.y, isMobile, section]);
   const initialName = props.kind === "point" ? props.currentName : props.kind === "line" || props.kind === "circle" ? props.currentName : "";
   const [name, setName] = react.useState(initialName);
   react.useEffect(() => {
@@ -2272,14 +2655,14 @@ var PropertiesPopover = (props) => {
         onClose();
       }
     };
-    const onMouseDown = (e) => {
+    const onPointerDown = (e) => {
       if (!rootRef.current?.contains(e.target)) onClose();
     };
     document.addEventListener("keydown", onKey);
-    document.addEventListener("mousedown", onMouseDown, { capture: true });
+    document.addEventListener("pointerdown", onPointerDown, { capture: true });
     return () => {
       document.removeEventListener("keydown", onKey);
-      document.removeEventListener("mousedown", onMouseDown, { capture: true });
+      document.removeEventListener("pointerdown", onPointerDown, { capture: true });
     };
   }, [onClose]);
   const pickColor = (c) => {
@@ -2316,6 +2699,7 @@ var PropertiesPopover = (props) => {
     {
       type: "button",
       "data-section": id,
+      "data-pill-btn": id,
       "aria-label": label,
       "aria-pressed": !!active,
       onClick,
@@ -2334,13 +2718,14 @@ var PropertiesPopover = (props) => {
     }
   );
   const colorIndicatorTint = react.useMemo(() => currentColor, [currentColor]);
+  const pos = clamped ?? { left: anchor.x, top: anchor.y };
   const node = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: rootRef,
       "data-stamp-area": "true",
       className: `${isDark ? "theme--dark " : ""}fixed z-[2147483600] flex flex-col gap-1.5`,
-      style: { left: anchor.x, top: anchor.y },
+      style: { left: pos.left, top: pos.top },
       role: "dialog",
       "aria-label": "Thu\u1ED9c t\xEDnh \u0111\u1ED1i t\u01B0\u1EE3ng",
       children: [
@@ -2530,7 +2915,7 @@ var TransformParamPopover = ({ kind, anchor, defaultValue, onConfirm, onCancel,
   return reactDom.createPortal(node, document.body);
 };
 var GeometryEditorPanel = react.forwardRef(
-  function GeometryEditorPanel2({ initialState, onInsert, onClose, withLeftPanel = false, onStateChange, isDark }, ref) {
+  function GeometryEditorPanel2({ initialState, onInsert, onClose, withLeftPanel = false, onStateChange, isDark, isMobile = false, onOpenDrawer }, ref) {
     const handleRef = react.useRef(null);
     const [ready, setReady] = react.useState(false);
     const [propsPopover, setPropsPopover] = react.useState(null);
@@ -2592,7 +2977,7 @@ var GeometryEditorPanel = react.forwardRef(
       insert: performInsert,
       hasContent: () => (handleRef.current?.getCreationLog().length ?? 0) > 0
     }), [performInsert]);
-    const wrapperStyle = {
+    const wrapperStyle = isMobile ? { position: "fixed", inset: 0, zIndex: 40 } : {
       position: "absolute",
       top: "50%",
       left: withLeftPanel ? "calc(50% + 120px)" : "50%",
@@ -2606,11 +2991,30 @@ var GeometryEditorPanel = react.forwardRef(
         "aria-label": "D\u1EF1ng h\xECnh h\u1ECDc",
         "data-testid": "geometry-editor-panel",
         "data-stamp-area": "true",
+        "data-mobile-editor": isMobile ? "true" : void 0,
         style: wrapperStyle,
-        className: `${isDark ? "theme--dark " : ""}flex h-[540px] max-h-[85vh] w-[640px] max-w-[calc(100vw-280px)] flex-col overflow-hidden rounded-lg border border-slate-300 bg-white shadow-2xl ring-1 ring-black/5`,
+        className: [
+          isDark ? "theme--dark " : "",
+          "flex flex-col overflow-hidden bg-white",
+          isMobile ? "h-full w-full" : "h-[540px] max-h-[85vh] w-[640px] max-w-[calc(100vw-280px)] rounded-lg border border-slate-300 shadow-2xl ring-1 ring-black/5"
+        ].join(" "),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-emerald-600 to-teal-600 px-3 py-2 text-white", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex flex-1 items-center gap-2 text-sm font-semibold", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "3,18 12,3 21,18" }),
                 /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "3", r: "1.5", fill: "currentColor" }),
@@ -2619,12 +3023,23 @@ var GeometryEditorPanel = react.forwardRef(
               ] }),
               "D\u1EF1ng h\xECnh h\u1ECDc"
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, "aria-label": "\u0110\xF3ng", className: "rounded p-1 transition hover:bg-white/15", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleInsert,
+                disabled: !ready,
+                "data-testid": "geometry-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__ */ jsxRuntime.jsx("button", { 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__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
               /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
               /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", style: { height: "420px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", style: isMobile ? void 0 : { height: "420px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
             JSXGraphMiniBoard,
             {
               onReady: handleReady,
@@ -2697,7 +3112,7 @@ var GeometryEditorPanel = react.forwardRef(
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex items-center justify-between border-t border-slate-200 bg-slate-50 px-3 py-2", children: [
+          !isMobile && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex items-center justify-between border-t border-slate-200 bg-slate-50 px-3 py-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-500", children: "Ch\u1ECDn c\xF4ng c\u1EE5 b\xEAn tr\xE1i, click tr\xEAn b\u1EA3ng \u0111\u1EC3 d\u1EF1ng h\xECnh." }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -2725,6 +3140,76 @@ var GeometryEditorPanel = react.forwardRef(
     );
   }
 );
+var A_CODE2 = "a".charCodeAt(0);
+function isFieldFocused() {
+  const ae = typeof document !== "undefined" ? document.activeElement : null;
+  return !!(ae && (ae.tagName === "INPUT" || ae.tagName === "TEXTAREA" || ae.isContentEditable));
+}
+function useChordShortcut(args) {
+  const { groupOrder, tools, onSelect, enabled } = args;
+  const [chordGroup, setChordGroup] = react.useState(null);
+  const groupOrderRef = react.useRef(groupOrder);
+  const toolsRef = react.useRef(tools);
+  const onSelectRef = react.useRef(onSelect);
+  const chordGroupRef = react.useRef(null);
+  groupOrderRef.current = groupOrder;
+  toolsRef.current = tools;
+  onSelectRef.current = onSelect;
+  const cancel = react.useCallback(() => {
+    chordGroupRef.current = null;
+    setChordGroup(null);
+  }, []);
+  react.useEffect(() => {
+    if (!enabled) return;
+    const setChord = (next) => {
+      chordGroupRef.current = next;
+      setChordGroup(next);
+    };
+    const onKey = (e) => {
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (isFieldFocused()) return;
+      const key = e.key;
+      const lower = key.length === 1 ? key.toLowerCase() : key;
+      if (key === "Escape") {
+        if (chordGroupRef.current !== null) {
+          e.preventDefault();
+          e.stopPropagation();
+          setChord(null);
+        }
+        return;
+      }
+      if (lower.length === 1 && lower >= "a" && lower <= "z") {
+        const idx = lower.charCodeAt(0) - A_CODE2;
+        if (idx < groupOrderRef.current.length) {
+          e.preventDefault();
+          e.stopPropagation();
+          setChord(groupOrderRef.current[idx]);
+        }
+        return;
+      }
+      if (key >= "1" && key <= "9") {
+        const active = chordGroupRef.current;
+        if (active === null) return;
+        const n = key.charCodeAt(0) - "1".charCodeAt(0);
+        const toolsInGroup = toolsRef.current.filter(
+          (t) => t.group === active
+        );
+        e.preventDefault();
+        e.stopPropagation();
+        if (n < toolsInGroup.length) {
+          onSelectRef.current(toolsInGroup[n].key);
+        }
+        setChord(null);
+        return;
+      }
+    };
+    window.addEventListener("keydown", onKey, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", onKey, { capture: true });
+    };
+  }, [enabled]);
+  return { chordGroup, cancel };
+}
 
 // src/stamps/shared/svgToImage.ts
 async function hashString(input) {
@@ -2847,6 +3332,14 @@ var GeometryStampHost = react.forwardRef(
   function GeometryStampHost2({ api, editingElement, onClose, isDark }, ref) {
     const panelRef = react.useRef(null);
     const [geomState, setGeomState] = react.useState(INITIAL_GEOM_STATE);
+    const { isMobile } = useIsMobile();
+    const [drawerOpen, setDrawerOpen] = react.useState(false);
+    const { chordGroup } = useChordShortcut({
+      groupOrder: GROUP_ORDER,
+      tools: TOOLS,
+      onSelect: (key) => panelRef.current?.setTool(key),
+      enabled: !isMobile
+    });
     const initialState = react.useMemo(() => {
       if (!editingElement) return null;
       if (!isGeometryCustomData(editingElement.customData)) return null;
@@ -2900,7 +3393,11 @@ var GeometryStampHost = react.forwardRef(
           onUndo: () => panelRef.current?.undo(),
           canUndo: geomState.canUndo,
           onClose,
-          isDark
+          isDark,
+          isMobile,
+          drawerOpen,
+          onDrawerClose: () => setDrawerOpen(false),
+          chordGroup
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2911,8 +3408,10 @@ var GeometryStampHost = react.forwardRef(
           onInsert: handleInsert,
           onClose,
           onStateChange: setGeomState,
-          withLeftPanel: true,
-          isDark
+          withLeftPanel: !isMobile,
+          isDark,
+          isMobile,
+          onOpenDrawer: () => setDrawerOpen(true)
         }
       )
     ] });
@@ -2950,38 +3449,58 @@ var geometryStamp = {
   },
   Host: GeometryStampHost
 };
-function Shell2({ title, icon, onClose, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "aside",
-    {
-      role: "complementary",
-      "aria-label": title,
-      "data-testid": "stamp-left-panel",
-      "data-stamp-area": "true",
-      className: "absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-slate-800", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: icon }),
-            title
+function Shell2({ title, icon, onClose, children, isMobile, drawerOpen, onDrawerClose }) {
+  const mobileAttrs = isMobile ? {
+    "data-mobile-drawer": "true",
+    "data-drawer-state": drawerOpen ? "open" : "closed"
+  } : {};
+  const handleHeaderClose = () => {
+    if (isMobile) onDrawerClose?.();
+    else onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isMobile && drawerOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "stamp-drawer-backdrop",
+        onPointerDown: onDrawerClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        role: "complementary",
+        "aria-label": title,
+        "aria-hidden": isMobile && !drawerOpen ? "true" : void 0,
+        "data-testid": "stamp-left-panel",
+        "data-stamp-area": "true",
+        ...mobileAttrs,
+        className: isMobile ? "stamp-drawer-mobile flex flex-col border-r border-slate-200 bg-white shadow-md" : "absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-slate-800", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: icon }),
+              title
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleHeaderClose,
+                "aria-label": isMobile ? "\u0110\xF3ng ng\u0103n c\xF4ng c\u1EE5" : "\u0110\xF3ng",
+                className: "rounded p-1 text-slate-500 transition hover:bg-slate-100 hover:text-slate-800",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+                ] })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: onClose,
-              "aria-label": "\u0110\xF3ng",
-              className: "rounded p-1 text-slate-500 transition hover:bg-slate-100 hover:text-slate-800",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
-                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
-              ] })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-3 space-y-4", children })
-      ]
-    }
-  );
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-3 space-y-4", children })
+        ]
+      }
+    )
+  ] });
 }
 function Section2({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
@@ -3028,65 +3547,80 @@ function LeftPanel2({
   displayMode,
   onDisplayModeChange,
   onInsertSnippet,
-  onClose
+  onClose,
+  isMobile,
+  drawerOpen,
+  onDrawerClose
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Shell2, { title: "C\xF4ng th\u1EE9c LaTeX", icon: "\u2211", onClose, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Section2, { label: "Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-1.5", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => onDisplayModeChange(false),
-          "aria-pressed": !displayMode,
-          className: [
-            "rounded-md border px-2 py-1.5 text-xs transition",
-            !displayMode ? "border-emerald-500 bg-emerald-50 text-emerald-700 ring-1 ring-emerald-300" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
-          ].join(" "),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-medium", children: "Inline" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px] text-slate-500", children: "$ ... $" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: () => onDisplayModeChange(true),
-          "aria-pressed": displayMode,
-          className: [
-            "rounded-md border px-2 py-1.5 text-xs transition",
-            displayMode ? "border-emerald-500 bg-emerald-50 text-emerald-700 ring-1 ring-emerald-300" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
-          ].join(" "),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-medium", children: "Block" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px] text-slate-500", children: "$$ ... $$" })
-          ]
-        }
-      )
-    ] }) }),
-    SNIPPETS.map((group) => /* @__PURE__ */ jsxRuntime.jsx(Section2, { label: group.group, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: group.items.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onInsertSnippet(s.snippet),
-        title: s.snippet,
-        className: "rounded border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 transition hover:border-emerald-300 hover:bg-emerald-50 hover:text-emerald-700",
-        children: s.preview
-      },
-      s.snippet
-    )) }) }, group.group)),
-    /* @__PURE__ */ jsxRuntime.jsx(Section2, { label: "Ph\xEDm t\u1EAFt", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 text-[11px] text-slate-600", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 font-mono", children: "Enter" }),
-        "ch\xE8n"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 font-mono", children: "Esc" }),
-        "\u0111\xF3ng"
-      ] })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Shell2,
+    {
+      title: "C\xF4ng th\u1EE9c LaTeX",
+      icon: "\u2211",
+      onClose,
+      isMobile,
+      drawerOpen,
+      onDrawerClose,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Section2, { label: "Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onDisplayModeChange(false),
+              "aria-pressed": !displayMode,
+              className: [
+                "rounded-md border px-2 py-1.5 text-xs transition",
+                !displayMode ? "border-emerald-500 bg-emerald-50 text-emerald-700 ring-1 ring-emerald-300" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-medium", children: "Inline" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px] text-slate-500", children: "$ ... $" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onDisplayModeChange(true),
+              "aria-pressed": displayMode,
+              className: [
+                "rounded-md border px-2 py-1.5 text-xs transition",
+                displayMode ? "border-emerald-500 bg-emerald-50 text-emerald-700 ring-1 ring-emerald-300" : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-medium", children: "Block" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-[10px] text-slate-500", children: "$$ ... $$" })
+              ]
+            }
+          )
+        ] }) }),
+        SNIPPETS.map((group) => /* @__PURE__ */ jsxRuntime.jsx(Section2, { label: group.group, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: group.items.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-snippet": s.snippet,
+            onClick: () => onInsertSnippet(s.snippet),
+            title: s.snippet,
+            className: "rounded border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 transition hover:border-emerald-300 hover:bg-emerald-50 hover:text-emerald-700",
+            children: s.preview
+          },
+          s.snippet
+        )) }) }, group.group)),
+        /* @__PURE__ */ jsxRuntime.jsx(Section2, { label: "Ph\xEDm t\u1EAFt", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 text-[11px] text-slate-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 font-mono", children: "Enter" }),
+            "ch\xE8n"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 font-mono", children: "Esc" }),
+            "\u0111\xF3ng"
+          ] })
+        ] }) })
+      ]
+    }
+  );
 }
 
 // src/stamps/latex/render.ts
@@ -3138,7 +3672,9 @@ var EditorPopover = react.forwardRef(function EditorPopover2({
   onClose,
   displayMode: controlledDisplayMode,
   onDisplayModeChange,
-  withLeftPanel = false
+  withLeftPanel = false,
+  isMobile = false,
+  onOpenDrawer
 }, ref) {
   const [value, setValue] = react.useState(initialValue);
   const [internalDisplayMode] = react.useState(false);
@@ -3209,7 +3745,7 @@ var EditorPopover = react.forwardRef(function EditorPopover2({
     [value, previewSvg, error, displayMode, onInsert]
   );
   const isLegacyPosition = x > 0 || y > 0;
-  const wrapperStyle = isLegacyPosition ? { position: "absolute", top: y, left: x, zIndex: 50 } : {
+  const wrapperStyle = isMobile ? { position: "fixed", inset: 0, zIndex: 50 } : isLegacyPosition ? { position: "absolute", top: y, left: x, zIndex: 50 } : {
     position: "absolute",
     top: "50%",
     left: withLeftPanel ? "calc(50% + 120px)" : "50%",
@@ -3221,29 +3757,55 @@ var EditorPopover = react.forwardRef(function EditorPopover2({
     {
       style: wrapperStyle,
       "data-stamp-area": "true",
-      className: "w-[420px] max-w-[calc(100vw-280px)] rounded-lg border border-slate-300 bg-white shadow-2xl ring-1 ring-black/5",
+      "data-mobile-editor": isMobile ? "true" : void 0,
+      className: isMobile ? "flex h-full w-full flex-col bg-white" : "w-[420px] max-w-[calc(100vw-280px)] rounded-lg border border-slate-300 bg-white shadow-2xl ring-1 ring-black/5",
       role: "dialog",
       "aria-label": "Nh\u1EADp c\xF4ng th\u1EE9c LaTeX",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between rounded-t-lg border-b border-slate-200 bg-gradient-to-r from-indigo-600 to-purple-600 px-3 py-2 text-white", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `flex items-center gap-2 border-b border-slate-200 bg-gradient-to-r from-indigo-600 to-purple-600 px-3 py-2 text-white${isMobile ? "" : " rounded-t-lg"}`, children: [
+          isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onOpenDrawer,
+              "aria-label": "M\u1EDF ng\u0103n snippet",
+              className: "-ml-1 inline-flex h-10 w-10 items-center justify-center rounded transition hover:bg-white/15",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex flex-1 items-center gap-2 text-sm font-semibold", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: "\u2211" }),
             "C\xF4ng th\u1EE9c LaTeX"
           ] }),
+          isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleInsert,
+              disabled: !previewSvg || !!error,
+              "data-testid": "latex-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__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: onClose,
               "aria-label": "\u0110\xF3ng",
-              className: "rounded p-1 transition hover:bg-white/15",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              className: "inline-flex h-9 w-9 items-center justify-center rounded transition hover:bg-white/15",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
                 /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
               ] })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 p-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `space-y-2 p-3${isMobile ? " flex min-h-0 flex-1 flex-col" : ""}`, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
@@ -3254,7 +3816,7 @@ var EditorPopover = react.forwardRef(function EditorPopover2({
               onChange: (e) => setValue(e.target.value),
               onKeyDown: handleKeyDown,
               placeholder: "Vd: \\frac{a^2+b^2}{c}",
-              className: "w-full rounded border border-slate-300 px-2 py-1.5 font-mono text-sm outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200",
+              className: `w-full rounded border border-slate-300 px-2 py-1.5 font-mono outline-none focus:border-indigo-400 focus:ring-2 focus:ring-indigo-200${isMobile ? " min-h-[44px] text-base" : " text-sm"}`,
               autoFocus: true
             }
           ),
@@ -3262,7 +3824,8 @@ var EditorPopover = react.forwardRef(function EditorPopover2({
             "div",
             {
               className: [
-                "flex min-h-[64px] items-center justify-center rounded border p-3 text-center",
+                "flex items-center justify-center rounded border p-3 text-center",
+                isMobile ? "min-h-0 flex-1 overflow-auto" : "min-h-[64px]",
                 error ? "border-rose-300 bg-rose-50 text-rose-700" : "border-slate-200 bg-slate-50"
               ].join(" "),
               children: error ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs", children: [
@@ -3271,7 +3834,7 @@ var EditorPopover = react.forwardRef(function EditorPopover2({
               ] }) : previewSvg ? /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: previewSvg } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-400", children: "(xem tr\u01B0\u1EDBc)" })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          !isMobile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[11px] text-slate-500", children: [
               displayMode ? "Block" : "Inline",
               " \xB7 Enter \u0111\u1EC3 ch\xE8n"
@@ -3295,6 +3858,10 @@ var EditorPopover = react.forwardRef(function EditorPopover2({
                 }
               )
             ] })
+          ] }),
+          isMobile && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-[11px] text-slate-500", children: [
+            displayMode ? "Block" : "Inline",
+            " \xB7 B\u1EA5m Ch\xE8n \u1EDF thanh tr\xEAn"
           ] })
         ] })
       ]
@@ -3309,6 +3876,8 @@ function isLatexCustomData(data) {
 var LatexStampHost = react.forwardRef(
   function LatexStampHost2({ api, editingElement, onClose }, ref) {
     const editorRef = react.useRef(null);
+    const { isMobile } = useIsMobile();
+    const [drawerOpen, setDrawerOpen] = react.useState(false);
     const initial = react.useMemo(() => {
       if (editingElement && isLatexCustomData(editingElement.customData)) {
         return {
@@ -3355,7 +3924,10 @@ var LatexStampHost = react.forwardRef(
           displayMode,
           onDisplayModeChange: setDisplayMode,
           onInsertSnippet: (s) => editorRef.current?.insertAtCursor(s),
-          onClose
+          onClose,
+          isMobile,
+          drawerOpen,
+          onDrawerClose: () => setDrawerOpen(false)
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3369,7 +3941,9 @@ var LatexStampHost = react.forwardRef(
           onDisplayModeChange: setDisplayMode,
           onInsert: handleInsert,
           onClose,
-          withLeftPanel: true
+          withLeftPanel: !isMobile,
+          isMobile,
+          onOpenDrawer: () => setDrawerOpen(true)
         }
       )
     ] });
@@ -4001,7 +4575,25 @@ var MiniBoard3D = react.forwardRef(function MiniBoard3D2({ isDark, initialState
       toolRef.current = t;
       notify();
     },
-    getCreationLog: () => [...logRef.current],
+    // Sync toạ độ live của free point3d về log trước khi trả ra. JSXGraph
+    // cho phép drag point3d (parents=[x,y,z] không có ref), việc drag chỉ
+    // cập nhật obj.X()/Y()/Z() chứ không đụng log → re-edit + Chèn sẽ
+    // serialize toạ độ cũ → SVG không đổi → fileId trùng → user thấy
+    // "k thay đổi". Line/plane/polygon/sphere tham chiếu point qua @id nên
+    // auto-update theo.
+    getCreationLog: () => logRef.current.map((e) => {
+      if (e.type !== "point3d") return { ...e };
+      const parents = e.parents;
+      if (!Array.isArray(parents) || parents.length !== 3) return { ...e };
+      if (typeof parents[0] !== "number" || typeof parents[1] !== "number" || typeof parents[2] !== "number") return { ...e };
+      const obj = objMapRef.current.get(e.id);
+      if (!obj || typeof obj.X !== "function" || typeof obj.Y !== "function" || typeof obj.Z !== "function") return { ...e };
+      const x = obj.X();
+      const y = obj.Y();
+      const z = obj.Z();
+      if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(z)) return { ...e };
+      return { ...e, parents: [x, y, z] };
+    }),
     pushLog: (e) => {
       logRef.current.push(e);
       notify();
@@ -4077,15 +4669,159 @@ var MiniBoard3D = react.forwardRef(function MiniBoard3D2({ isDark, initialState
     }
   );
 });
-
-// src/stamps/geometry-3d/editor/tools.ts
-var GROUP_LABELS_3D = {
-  view: "Xem",
-  primitive: "C\u01A1 b\u1EA3n",
-  solid: "Kh\u1ED1i \u0111a di\u1EC7n",
-  curved: "Kh\u1ED1i cong",
-  meta: "Kh\xE1c"
-};
+var EditorPanel = react.forwardRef(function EditorPanel2({ isDark, initial, onInsert, onClose, isMobile = false, withLeftPanel = false, onBoardReady, onOpenDrawer }, ref) {
+  const boardRef = react.useRef(null);
+  const [ready, setReady] = react.useState(false);
+  const onBoardReadyRef = react.useRef(onBoardReady);
+  onBoardReadyRef.current = onBoardReady;
+  const setBoard = react.useCallback((h) => {
+    boardRef.current = h;
+    setReady(!!h);
+    onBoardReadyRef.current?.(h);
+  }, []);
+  const performInsert = react.useCallback(() => {
+    const board = boardRef.current;
+    if (!board) return false;
+    const log = board.getCreationLog();
+    if (log.length === 0) return false;
+    const view = board.getViewState();
+    const state = {
+      version: 1,
+      bbox: board.getBbox(),
+      view,
+      showAxes: board.getShowAxes(),
+      showMesh: board.getShowMesh(),
+      elements: log
+    };
+    const snap = board.snapshotSVG();
+    onInsert(JSON.stringify(state), snap.svgString, snap.width, snap.height);
+    return true;
+  }, [onInsert]);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      tryInsert: performInsert,
+      hasContent: () => (boardRef.current?.getCreationLog().length ?? 0) > 0
+    }),
+    [performInsert]
+  );
+  const handleInsert = react.useCallback(() => {
+    performInsert();
+  }, [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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": "D\u1EF1ng h\xECnh h\u1ECDc 3D",
+      "data-testid": "geom3d-editor-panel",
+      "data-stamp-area": "true",
+      "data-mobile-editor": isMobile ? "true" : void 0,
+      style: wrapperStyle,
+      className: [
+        isDark ? "theme--dark " : "",
+        "flex flex-col overflow-hidden bg-white",
+        isMobile ? "h-full w-full" : "h-[600px] max-h-[85vh] w-[760px] max-w-[calc(100vw-280px)] rounded-lg border border-slate-300 shadow-2xl ring-1 ring-black/5"
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center gap-2 border-b border-slate-200 bg-gradient-to-r from-blue-600 to-cyan-600 px-3 py-2 text-white", children: [
+          isMobile && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex flex-1 items-center gap-2 text-sm font-semibold", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 7 L14 4 L20 7 L14 10 Z M4 7 L4 17 L14 20 L14 10 M14 20 L20 17 L20 7" }) }),
+            "H\xECnh h\u1ECDc kh\xF4ng gian (3D)"
+          ] }),
+          isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleInsert,
+              disabled: !ready,
+              "data-testid": "geom3d-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__ */ jsxRuntime.jsx(
+            "button",
+            {
+              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__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(MiniBoard3D, { ref: setBoard, isDark, initialState: initial }) }),
+        !isMobile && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex items-center justify-between border-t border-slate-200 bg-slate-50 px-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-500", children: "Ch\u1ECDn c\xF4ng c\u1EE5 b\xEAn tr\xE1i, click tr\xEAn b\u1EA3ng \u0111\u1EC3 d\u1EF1ng h\xECnh." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "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__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleInsert,
+                disabled: !ready,
+                "data-testid": "geom3d-insert-btn",
+                className: "rounded bg-blue-600 px-3 py-1 text-xs font-medium text-white transition hover:bg-blue-700 disabled:opacity-50",
+                children: "Ch\xE8n"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/stamps/geometry-3d/editor/tools.ts
+var GROUP_LABELS_3D = {
+  view: "Xem",
+  primitive: "C\u01A1 b\u1EA3n",
+  solid: "Kh\u1ED1i \u0111a di\u1EC7n",
+  curved: "Kh\u1ED1i cong",
+  meta: "Kh\xE1c"
+};
+var GROUP_ORDER_3D = [
+  "view",
+  "primitive",
+  "solid",
+  "curved",
+  "meta"
+];
+var A_CODE_3D = "A".charCodeAt(0);
+function letterForGroup3D(g) {
+  const idx = GROUP_ORDER_3D.indexOf(g);
+  return idx >= 0 ? String.fromCharCode(A_CODE_3D + idx) : "";
+}
 var TOOLS_3D = [
   { key: "move", label: "Di chuy\u1EC3n", group: "view", stepsRequired: 0 },
   { key: "point", label: "\u0110i\u1EC3m", group: "primitive", stepsRequired: 1, hint: "Nh\u1EADp (x, y, z)" },
@@ -4139,8 +4875,8 @@ var TOOLS_3D = [
   },
   { key: "label", label: "Nh\xE3n", group: "meta", stepsRequired: 1, hint: "G\u1EAFn v\xE0o \u0111i\u1EC3m" }
 ];
-function ToolButton({ toolKey, label, hint, active, onClick, icon }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+function ToolButton({ toolKey, label, hint, active, onClick, icon, badge }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       type: "button",
@@ -4151,10 +4887,13 @@ function ToolButton({ toolKey, label, hint, active, onClick, icon }) {
       "data-active": active || void 0,
       "data-tool": toolKey,
       className: [
-        "flex h-8 items-center justify-center rounded-md transition",
+        "relative flex h-8 items-center justify-center rounded-md transition",
         active ? "bg-blue-600 text-white shadow-sm" : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
       ].join(" "),
-      children: icon
+      children: [
+        icon,
+        badge
+      ]
     }
   );
 }
@@ -4206,7 +4945,10 @@ function Shell3({ title, icon, onClose, children, isDark }) {
       "aria-label": title,
       "data-testid": "geom3d-left-panel",
       "data-stamp-area": "true",
-      className: `${isDark ? "theme--dark " : ""}absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200`,
+      className: [
+        isDark ? "theme--dark " : "",
+        "absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200"
+      ].join(""),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-slate-800", children: [
@@ -4219,10 +4961,7 @@ function Shell3({ title, icon, onClose, children, isDark }) {
               onClick: onClose,
               "aria-label": "\u0110\xF3ng",
               className: "rounded p-1 text-slate-500 transition hover:bg-slate-100 hover:text-slate-800",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
-                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
-              ] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon2, {})
             }
           )
         ] }),
@@ -4238,11 +4977,39 @@ function Section3({ label, children }) {
   ] });
 }
 var Geom3DIconHeader = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 7 L14 4 L20 7 L14 10 Z M4 7 L4 17 L14 20 L14 10 M14 20 L20 17 L20 7" }) });
-function LeftPanel3({ handle, onResetView, onClose, isDark }) {
-  const [tool, setTool] = react.useState("move");
-  const [showAxes, setShowAxes] = react.useState(true);
-  const [showMesh, setShowMesh] = react.useState(false);
-  const [canUndo, setCanUndo] = react.useState(false);
+function CloseIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+  ] });
+}
+function UndoIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 7 3 13 9 13" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
+  ] });
+}
+function ResetViewIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3v5h5" })
+  ] });
+}
+function AxisIcon3D() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "20", x2: "12", y2: "4" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "12", x2: "22", y2: "6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "12", x2: "2", y2: "18" })
+  ] });
+}
+function MeshIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8 L12 4 L20 8 L12 12 Z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8 L4 16 L12 20 L12 12" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 20 L20 16 L20 8" })
+  ] });
+}
+function useToolHoverTooltip2() {
   const [hover, setHover] = react.useState(null);
   const [portalReady, setPortalReady] = react.useState(false);
   const hoverTimerRef = react.useRef(null);
@@ -4252,17 +5019,6 @@ function LeftPanel3({ handle, onResetView, onClose, isDark }) {
       if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
     };
   }, []);
-  react.useEffect(() => {
-    if (!handle) return;
-    const sync = () => {
-      setTool(handle.getTool());
-      setShowAxes(handle.getShowAxes());
-      setShowMesh(handle.getShowMesh());
-      setCanUndo(handle.canUndo());
-    };
-    sync();
-    return handle.subscribe(sync);
-  }, [handle]);
   const showHover = react.useCallback((el, t) => {
     if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
     hoverTimerRef.current = setTimeout(() => {
@@ -4277,14 +5033,45 @@ function LeftPanel3({ handle, onResetView, onClose, isDark }) {
     }
     setHover(null);
   }, []);
-  const grouped = TOOLS_3D.reduce(
-    (acc, t) => {
-      var _a;
-      (acc[_a = t.group] ?? (acc[_a] = [])).push(t);
-      return acc;
-    },
-    {}
+  return { hover, portalReady, showHover, hideHover };
+}
+function useHandleState(handle) {
+  const [tool, setTool] = react.useState("move");
+  const [showAxes, setShowAxes] = react.useState(true);
+  const [showMesh, setShowMesh] = react.useState(false);
+  const [canUndo, setCanUndo] = react.useState(false);
+  react.useEffect(() => {
+    if (!handle) return;
+    const sync = () => {
+      setTool(handle.getTool());
+      setShowAxes(handle.getShowAxes());
+      setShowMesh(handle.getShowMesh());
+      setCanUndo(handle.canUndo());
+    };
+    sync();
+    return handle.subscribe(sync);
+  }, [handle]);
+  return { tool, showAxes, showMesh, canUndo };
+}
+function DesktopPanel(props) {
+  const { handle, onResetView, onClose, isDark, chordGroup } = props;
+  const { tool, showAxes, showMesh, canUndo } = useHandleState(handle);
+  const { hover, portalReady, showHover, hideHover } = useToolHoverTooltip2();
+  const grouped = react.useMemo(() => {
+    return TOOLS_3D.reduce(
+      (acc, t) => {
+        var _a;
+        (acc[_a = t.group] ?? (acc[_a] = [])).push(t);
+        return acc;
+      },
+      {}
+    );
+  }, []);
+  const orderedGroups = react.useMemo(
+    () => GROUP_ORDER_3D.filter((g) => grouped[g]),
+    [grouped]
   );
+  const activeGroupTools = chordGroup ? grouped[chordGroup] ?? null : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Shell3, { title: "H\xECnh h\u1ECDc 3D", icon: Geom3DIconHeader, onClose, isDark, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Section3, { label: "B\u1ED1 c\u1EE5c", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap text-[11px] text-slate-700", children: [
@@ -4320,10 +5107,7 @@ function LeftPanel3({ handle, onResetView, onClose, isDark }) {
             title: "Reset g\xF3c nh\xECn",
             "aria-label": "Reset view",
             className: "ml-auto inline-flex items-center justify-center rounded p-1 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3v5h5" })
-            ] })
+            children: /* @__PURE__ */ jsxRuntime.jsx(ResetViewIcon, {})
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4335,34 +5119,95 @@ function LeftPanel3({ handle, onResetView, onClose, isDark }) {
             title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
             "aria-label": "Ho\xE0n t\xE1c",
             className: "inline-flex items-center justify-center rounded p-1 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-transparent",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 7 3 13 9 13" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
-            ] })
+            children: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon2, {})
           }
         )
       ] }) }),
-      Object.entries(grouped).map(([group, tools]) => /* @__PURE__ */ jsxRuntime.jsx(Section3, { label: GROUP_LABELS_3D[group], children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: tools.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
-        ToolButton,
+      orderedGroups.map((group) => {
+        const tools = grouped[group];
+        const isChordActive = chordGroup === group;
+        const dimmed = chordGroup !== null && !isChordActive;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "section",
+          {
+            "data-chord-group": group,
+            "data-chord-active": isChordActive ? "true" : "false",
+            className: [
+              "rounded-md transition",
+              isChordActive ? "bg-blue-50 ring-1 ring-blue-400 p-1" : "p-0",
+              dimmed ? "opacity-55" : "opacity-100"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "mb-1.5 flex items-center justify-between text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: GROUP_LABELS_3D[group] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-testid": `chord-letter-${group}`,
+                    className: [
+                      "font-mono text-[10px] leading-none transition",
+                      isChordActive ? "text-blue-700 font-bold" : "text-slate-400"
+                    ].join(" "),
+                    children: letterForGroup3D(group)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: tools.map((t, i) => {
+                const isActive = tool === t.key;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  ToolButton,
+                  {
+                    toolKey: t.key,
+                    label: t.label,
+                    hint: t.hint,
+                    active: isActive,
+                    onClick: () => handle?.setTool(t.key),
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        onMouseEnter: (e) => showHover(e.currentTarget.closest("button"), t),
+                        onMouseLeave: hideHover,
+                        onFocus: (e) => showHover(e.currentTarget.closest("button"), t),
+                        onBlur: hideHover,
+                        children: ICONS_3D[t.key]
+                      }
+                    ),
+                    badge: /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "data-testid": `chord-num-${t.key}`,
+                        className: [
+                          "pointer-events-none absolute bottom-0 right-0.5 font-mono text-[9px] leading-none transition",
+                          isActive ? "text-white/70" : isChordActive ? "text-blue-700 font-bold" : "text-slate-400"
+                        ].join(" "),
+                        children: i + 1
+                      }
+                    )
+                  },
+                  t.key
+                );
+              }) })
+            ]
+          },
+          group
+        );
+      }),
+      chordGroup && activeGroupTools && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
         {
-          toolKey: t.key,
-          label: t.label,
-          hint: t.hint,
-          active: tool === t.key,
-          onClick: () => handle?.setTool(t.key),
-          icon: /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              onMouseEnter: (e) => showHover(e.currentTarget.closest("button"), t),
-              onMouseLeave: hideHover,
-              onFocus: (e) => showHover(e.currentTarget.closest("button"), t),
-              onBlur: hideHover,
-              children: ICONS_3D[t.key]
-            }
-          )
-        },
-        t.key
-      )) }) }, group))
+          "data-testid": "chord-hint",
+          className: "mt-1 rounded border border-blue-200 bg-blue-50/60 px-2 py-1 text-[11px] leading-snug text-slate-600",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-semibold text-blue-700", children: letterForGroup3D(chordGroup) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 text-slate-400", children: "\u2192" }),
+            activeGroupTools.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-2 inline-block", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono font-semibold text-blue-700", children: i + 1 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1", children: t.label })
+            ] }, t.key)),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-slate-400", children: "Esc hu\u1EF7" })
+          ]
+        }
+      )
     ] }),
     portalReady && hover && typeof document !== "undefined" ? reactDom.createPortal(
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4386,107 +5231,71 @@ function LeftPanel3({ handle, onResetView, onClose, isDark }) {
     ) : null
   ] });
 }
-var EditorPanel = react.forwardRef(function EditorPanel2({ isDark, initial, onInsert, onClose }, ref) {
-  const boardRef = react.useRef(null);
-  const [boardHandle, setBoardHandle] = react.useState(null);
-  const setBoard = react.useCallback((h) => {
-    boardRef.current = h;
-    setBoardHandle((prev) => prev === h ? prev : h);
-  }, []);
-  react.useImperativeHandle(
-    ref,
-    () => ({
-      tryInsert: () => {
-        const board = boardRef.current;
-        if (!board) return false;
-        const log = board.getCreationLog();
-        if (log.length === 0) return false;
-        const view = board.getViewState();
-        const state = {
-          version: 1,
-          bbox: board.getBbox(),
-          view,
-          showAxes: board.getShowAxes(),
-          showMesh: board.getShowMesh(),
-          elements: log
-        };
-        const snap = board.snapshotSVG();
-        onInsert(JSON.stringify(state), snap.svgString, snap.width, snap.height);
-        return true;
-      },
-      hasContent: () => (boardRef.current?.getCreationLog().length ?? 0) > 0
-    }),
-    [onInsert]
-  );
-  const handleResetView = react.useCallback(() => {
-    boardRef.current?.resetView();
+function MobilePanel(props) {
+  const { handle, onResetView, isDark, drawerOpen, onDrawerClose } = props;
+  const { tool, showAxes, showMesh, canUndo } = useHandleState(handle);
+  const groups = react.useMemo(() => {
+    const acc = /* @__PURE__ */ new Map();
+    for (const t of TOOLS_3D) {
+      if (!acc.has(t.group)) acc.set(t.group, []);
+      acc.get(t.group).push(t);
+    }
+    return Array.from(acc.entries()).map(([group, tools]) => ({
+      group,
+      groupLabel: GROUP_LABELS_3D[group],
+      tools: tools.map((t) => ({ key: t.key, label: t.label, icon: ICONS_3D[t.key] }))
+    }));
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MobileToolDrawer,
     {
-      "data-testid": "geom3d-editor-panel",
-      "data-stamp-area": "true",
-      style: {
-        position: "absolute",
-        left: "50%",
-        top: "50%",
-        transform: "translate(-50%, -50%)",
-        width: 900,
-        height: 700,
-        background: "#fff",
-        boxShadow: "0 6px 32px rgba(0,0,0,0.2)",
-        borderRadius: 8,
-        zIndex: 10,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              padding: "8px 12px",
-              borderBottom: "1px solid #eee",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: "H\xECnh h\u1ECDc kh\xF4ng gian (3D)" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 } }),
-              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, children: "\u0110\xF3ng" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", flex: 1, minHeight: 0 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            LeftPanel3,
-            {
-              handle: boardHandle,
-              onResetView: handleResetView,
-              onClose,
-              isDark
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: 120,
-                top: 0,
-                right: 0,
-                bottom: 0,
-                overflow: "hidden"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(MiniBoard3D, { ref: setBoard, isDark, initialState: initial })
-            }
-          )
-        ] })
-      ]
+      title: "H\xECnh h\u1ECDc 3D",
+      headerIcon: Geom3DIconHeader,
+      testId: "geom3d-left-panel",
+      isDark,
+      drawerOpen: !!drawerOpen,
+      onDrawerClose: () => onDrawerClose?.(),
+      chips: [
+        {
+          label: "Tr\u1EE5c",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(AxisIcon3D, {}),
+          pressed: showAxes,
+          onToggle: (b) => handle?.setShowAxes(b),
+          testId: "toggle-axes"
+        },
+        {
+          label: "L\u01B0\u1EDBi",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(MeshIcon, {}),
+          pressed: showMesh,
+          onToggle: (b) => handle?.setShowMesh(b),
+          testId: "toggle-mesh"
+        }
+      ],
+      actions: [
+        {
+          label: "Reset view",
+          title: "Reset g\xF3c nh\xECn",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(ResetViewIcon, {}),
+          onClick: onResetView
+        },
+        {
+          label: "Ho\xE0n t\xE1c",
+          title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
+          icon: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon2, {}),
+          onClick: () => handle?.undo(),
+          disabled: !canUndo
+        }
+      ],
+      groups,
+      activeTool: tool,
+      onToolSelect: (k) => handle?.setTool(k)
     }
   );
-});
+}
+function LeftPanel3(props) {
+  if (props.isMobile) return /* @__PURE__ */ jsxRuntime.jsx(MobilePanel, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(DesktopPanel, { ...props });
+}
 
 // src/stamps/geometry-3d/serialize.ts
 function isGeometry3DCustomData(data) {
@@ -4571,66 +5380,1528 @@ async function renderGeometry3DSvgFromState(jsonState) {
       JXG.JSXGraph.freeBoard(board);
     } catch {
     }
-    return { svgString, width: OUTPUT_WIDTH, height: OUTPUT_HEIGHT };
-  } finally {
-    document.body.removeChild(div);
-  }
-}
-function parseInitial(editingElement) {
-  if (!editingElement) return null;
-  if (!isGeometry3DCustomData(editingElement.customData)) return null;
-  try {
-    return parseSerializedBoard3D(editingElement.customData.jsonState);
-  } catch {
-    return null;
-  }
+    return { svgString, width: OUTPUT_WIDTH, height: OUTPUT_HEIGHT };
+  } finally {
+    document.body.removeChild(div);
+  }
+}
+function parseInitial(editingElement) {
+  if (!editingElement) return null;
+  if (!isGeometry3DCustomData(editingElement.customData)) return null;
+  try {
+    return parseSerializedBoard3D(editingElement.customData.jsonState);
+  } catch {
+    return null;
+  }
+}
+var Geometry3DStampHost = react.forwardRef(
+  function Geometry3DStampHost2({ api, editingElement, onClose, isDark }, ref) {
+    const editorRef = react.useRef(null);
+    const { isMobile } = useIsMobile();
+    const [drawerOpen, setDrawerOpen] = react.useState(false);
+    const [boardHandle, setBoardHandle] = react.useState(null);
+    const initial = react.useMemo(
+      () => parseInitial(editingElement),
+      [editingElement]
+    );
+    const handleBoardReady = react.useCallback((h) => {
+      setBoardHandle((prev) => prev === h ? prev : h);
+    }, []);
+    const { chordGroup } = useChordShortcut({
+      groupOrder: GROUP_ORDER_3D,
+      tools: TOOLS_3D,
+      onSelect: (key) => boardHandle?.setTool(key),
+      enabled: !isMobile
+    });
+    const handleResetView = react.useCallback(() => {
+      boardHandle?.resetView();
+    }, [boardHandle]);
+    const handleInsert = react.useCallback(
+      async (jsonState, svgString, width, height) => {
+        if (!api) return;
+        await insertStampImage(api, {
+          svgString,
+          makeCustomData: () => ({
+            kind: "geometry3d",
+            version: 1,
+            jsonState,
+            svgWidth: width,
+            svgHeight: height
+          }),
+          editingElementId: editingElement?.id ?? null
+        });
+        onClose();
+      },
+      [api, editingElement, onClose]
+    );
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        tryInsert: () => editorRef.current?.tryInsert() ?? false,
+        hasContent: () => editorRef.current?.hasContent() ?? false
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LeftPanel3,
+        {
+          handle: boardHandle,
+          onResetView: handleResetView,
+          onClose,
+          isDark,
+          isMobile,
+          drawerOpen,
+          onDrawerClose: () => setDrawerOpen(false),
+          chordGroup
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        EditorPanel,
+        {
+          ref: editorRef,
+          isDark,
+          initial,
+          onInsert: handleInsert,
+          onClose,
+          isMobile,
+          withLeftPanel: !isMobile,
+          onBoardReady: handleBoardReady,
+          onOpenDrawer: () => setDrawerOpen(true)
+        }
+      )
+    ] });
+  }
+);
+var Geometry3DIcon = /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.6",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3 L20 8 L20 16 L12 21 L4 16 L4 8 Z" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3 L12 21 M4 8 L12 12 L20 8 M4 16 L12 12 L20 16" })
+    ]
+  }
+);
+var geometry3dStamp = {
+  kind: "geometry3d",
+  shortcutKey: "d",
+  toolbarLabel: "D",
+  toolbarTitle: "H\xECnh 3D (D)",
+  toolbarIcon: Geometry3DIcon,
+  toolbarTestId: "stamp-toolbar-geometry3d",
+  matchesCustomData: isGeometry3DCustomData,
+  async renderSvgFromCustomData(data) {
+    if (!isGeometry3DCustomData(data)) {
+      throw new Error("geometry3dStamp.renderSvgFromCustomData: customData kh\xF4ng ph\u1EA3i geometry3d");
+    }
+    const { svgString } = await renderGeometry3DSvgFromState(data.jsonState);
+    return svgString;
+  },
+  restoreFileFromCustomData: async (element) => {
+    const data = element.customData;
+    const fileId = element.fileId;
+    if (!data || !fileId) return null;
+    if (!isGeometry3DCustomData(data)) return null;
+    try {
+      const { svgString } = await renderGeometry3DSvgFromState(data.jsonState);
+      const dataURL = `data:image/svg+xml;base64,${typeof btoa !== "undefined" ? btoa(unescape(encodeURIComponent(svgString))) : Buffer.from(svgString).toString("base64")}`;
+      return { fileId, dataURL, mimeType: "image/svg+xml" };
+    } catch {
+      return null;
+    }
+  },
+  Host: Geometry3DStampHost
+};
+
+// src/stamps/graph-2d/editor/tools.ts
+var GRAPH_TOOLS = [
+  { id: "move", label: "Di chuy\u1EC3n", title: "Di chuy\u1EC3n / ch\u1ECDn" },
+  { id: "point-on-curve", label: "\u0110i\u1EC3m tr\xEAn curve", title: "T\u1EA1o \u0111i\u1EC3m c\u1ED1 \u0111\u1ECBnh tr\xEAn \u0111\u1ED3 th\u1ECB" },
+  { id: "intersect", label: "Giao \u0111i\u1EC3m", title: "\u0110\xE1nh d\u1EA5u giao \u0111i\u1EC3m 2 \u0111\u1ED3 th\u1ECB" },
+  { id: "tangent", label: "Ti\u1EBFp tuy\u1EBFn", title: "V\u1EBD ti\u1EBFp tuy\u1EBFn t\u1EA1i \u0111i\u1EC3m tr\xEAn \u0111\u1ED3 th\u1ECB" }
+];
+function FunctionRow(props) {
+  const { id, name, expression, color, visible, error } = props;
+  const [draft, setDraft] = react.useState(expression);
+  react.useEffect(() => {
+    setDraft(expression);
+  }, [expression]);
+  const commit = () => {
+    if (draft !== expression) props.onExpressionCommit(draft);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      commit();
+      e.target.blur();
+    } else if (e.key === "Escape") {
+      setDraft(expression);
+      e.target.blur();
+    }
+  };
+  const handleBlur = (_) => commit();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `graph-function-row${error ? " is-error" : ""}`, "data-testid": `graph-function-row-${id}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "graph-function-color",
+        style: { backgroundColor: color },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "graph-function-name", "data-testid": `graph-function-name-${id}`, children: [
+      name,
+      "(x) ="
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        "aria-label": "Bi\u1EC3u th\u1EE9c",
+        className: "graph-function-input",
+        type: "text",
+        value: draft,
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        spellCheck: false,
+        autoCorrect: "off",
+        autoCapitalize: "off"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "\u1EA8n/hi\u1EC7n \u0111\u1ED3 th\u1ECB",
+        className: `graph-function-eye${visible ? "" : " is-hidden"}`,
+        onClick: props.onToggleVisible,
+        children: visible ? "\u{1F441}" : "\u2298"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Xo\xE1 \u0111\u1ED3 th\u1ECB",
+        className: "graph-function-remove",
+        onClick: props.onRemove,
+        children: "\u2715"
+      }
+    ),
+    error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "graph-function-error", children: error }) : null
+  ] });
+}
+function SliderRow(props) {
+  const { name, value, min, max, step } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "graph-slider-row", "data-testid": `graph-slider-row-${name}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "graph-slider-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "graph-slider-name", children: name }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "graph-slider-value", children: [
+        "= ",
+        value.toFixed(2)
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Xo\xE1 tham s\u1ED1 ${name}`,
+          className: "graph-slider-remove",
+          onClick: props.onRemove,
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "range",
+        "aria-label": `Slider ${name}`,
+        min,
+        max,
+        step,
+        value,
+        onChange: (e) => props.onChange(parseFloat(e.target.value)),
+        className: "graph-slider-input"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "graph-slider-range", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: min }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: max })
+    ] })
+  ] });
+}
+
+// src/stamps/graph-2d/colors.ts
+var GRAPH_PALETTE = [
+  "#2563eb",
+  // blue
+  "#dc2626",
+  // red
+  "#16a34a",
+  // green
+  "#9333ea",
+  // purple
+  "#ea580c",
+  // orange
+  "#0891b2",
+  // cyan
+  "#db2777",
+  // pink
+  "#65a30d"
+  // lime
+];
+var FUNCTION_NAMES = ["f", "g", "h", "i", "j", "k", "l", "m"];
+var MAX_FUNCTIONS = 8;
+var MAX_PARAMETERS = 8;
+function nextColor(usedColors) {
+  for (const c of GRAPH_PALETTE) {
+    if (!usedColors.includes(c)) return c;
+  }
+  return GRAPH_PALETTE[usedColors.length % GRAPH_PALETTE.length];
+}
+function nextFunctionName(usedNames) {
+  for (const n of FUNCTION_NAMES) {
+    if (!usedNames.includes(n)) return n;
+  }
+  return FUNCTION_NAMES[usedNames.length % FUNCTION_NAMES.length];
+}
+function AlgebraView(props) {
+  const { graph, errors } = props;
+  const atMax = graph.functions.length >= MAX_FUNCTIONS;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "graph-algebra-view", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "graph-algebra-section", children: [
+      graph.functions.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+        FunctionRow,
+        {
+          id: f.id,
+          name: f.name,
+          expression: f.expression,
+          color: f.color,
+          visible: f.visible,
+          error: errors[f.id] ?? null,
+          onExpressionCommit: (expr) => props.onCommitFunctionExpr(f.id, expr),
+          onToggleVisible: () => props.onToggleFunctionVisible(f.id),
+          onRemove: () => props.onRemoveFunction(f.id)
+        },
+        f.id
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Th\xEAm h\xE0m s\u1ED1",
+          className: "graph-algebra-add",
+          onClick: props.onAddFunctionDraft,
+          disabled: atMax,
+          children: "+ Th\xEAm h\xE0m"
+        }
+      )
+    ] }),
+    graph.parameters.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "graph-algebra-section graph-algebra-parameters", children: graph.parameters.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+      SliderRow,
+      {
+        name: p.name,
+        value: p.value,
+        min: p.min,
+        max: p.max,
+        step: p.step,
+        onChange: (v) => props.onParameterChange(p.name, v),
+        onRangeChange: (min, max, step) => props.onParameterRangeChange(p.name, min, max, step),
+        onRemove: () => props.onRemoveParameter(p.name)
+      },
+      p.name
+    )) }) : null
+  ] });
+}
+var GraphIconHeader = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21 V3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21 H21" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 19 C8 5, 14 5, 19 17" })
+] });
+function CloseIcon3() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+  ] });
+}
+function UndoIcon3() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 7 3 13 9 13" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.51 13a9 9 0 1 0 2.13-9.36L3 7" })
+  ] });
+}
+function ResetViewIcon2() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "21" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" })
+  ] });
+}
+function MoveIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4 L9 4 L9 9 L4 9 Z" }) });
+}
+function PointOnCurveIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 17 C7 8, 14 8, 21 14" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "11", r: "2.2", fill: "currentColor", stroke: "none" })
+  ] });
+}
+function IntersectIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 17 C8 5, 14 5, 21 17" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 5 C8 17, 14 17, 21 5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "11", r: "1.6", fill: "currentColor", stroke: "none" })
+  ] });
+}
+function TangentIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 17 C8 7, 14 7, 21 16" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "14", x2: "20", y2: "6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "10", r: "1.8", fill: "currentColor", stroke: "none" })
+  ] });
+}
+var TOOL_ICONS = {
+  move: /* @__PURE__ */ jsxRuntime.jsx(MoveIcon, {}),
+  "point-on-curve": /* @__PURE__ */ jsxRuntime.jsx(PointOnCurveIcon, {}),
+  intersect: /* @__PURE__ */ jsxRuntime.jsx(IntersectIcon, {}),
+  tangent: /* @__PURE__ */ jsxRuntime.jsx(TangentIcon, {})
+};
+function Section4({ label, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: label }),
+    children
+  ] });
+}
+function PanelBody(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Section4, { label: "B\u1ED1 c\u1EE5c", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap text-[11px] text-slate-700", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex select-none items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: props.showAxis,
+            onChange: (e) => props.onShowAxisChange(e.target.checked),
+            "data-testid": "toggle-axis"
+          }
+        ),
+        "Tr\u1EE5c"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex select-none items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: props.showGrid,
+            onChange: (e) => props.onShowGridChange(e.target.checked),
+            "data-testid": "toggle-grid"
+          }
+        ),
+        "L\u01B0\u1EDBi"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: props.onResetView,
+          title: "\u0110\u1EB7t l\u1EA1i t\u1EA7m nh\xECn",
+          "aria-label": "\u0110\u1EB7t l\u1EA1i t\u1EA7m nh\xECn",
+          className: "ml-auto inline-flex items-center justify-center rounded p-1 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ResetViewIcon2, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: props.onUndo,
+          disabled: !props.canUndo,
+          title: "Ho\xE0n t\xE1c (Ctrl/Cmd+Z)",
+          "aria-label": "Ho\xE0n t\xE1c",
+          className: "inline-flex items-center justify-center rounded p-1 text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 disabled:cursor-not-allowed disabled:text-slate-300 disabled:hover:bg-transparent",
+          children: /* @__PURE__ */ jsxRuntime.jsx(UndoIcon3, {})
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Section4, { label: "C\xF4ng c\u1EE5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1", children: GRAPH_TOOLS.map((t) => {
+      const isActive = props.activeTool === t.id;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": t.title,
+          title: t.title,
+          "aria-pressed": isActive,
+          onClick: () => props.onToolChange(t.id),
+          "data-testid": `graph-tool-${t.id}`,
+          className: [
+            "flex h-8 items-center justify-center rounded-md transition",
+            isActive ? "bg-orange-600 text-white shadow-sm" : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+          ].join(" "),
+          children: TOOL_ICONS[t.id]
+        },
+        t.id
+      );
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Section4, { label: "H\xE0m s\u1ED1", children: /* @__PURE__ */ jsxRuntime.jsx(
+      AlgebraView,
+      {
+        graph: props.graph,
+        errors: props.errors,
+        onAddFunctionDraft: props.onAddFunctionDraft,
+        onCommitFunctionExpr: props.onCommitFunctionExpr,
+        onToggleFunctionVisible: props.onToggleFunctionVisible,
+        onRemoveFunction: props.onRemoveFunction,
+        onParameterChange: props.onParameterChange,
+        onParameterRangeChange: props.onParameterRangeChange,
+        onRemoveParameter: props.onRemoveParameter
+      }
+    ) })
+  ] });
+}
+function GraphLeftPanel(props) {
+  const { isMobile, drawerOpen, isDark, onClose, onDrawerClose } = props;
+  if (isMobile && !drawerOpen) return null;
+  const handleClose = isMobile ? onDrawerClose : onClose;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      role: "complementary",
+      "aria-label": "\u0110\u1ED3 th\u1ECB 2D",
+      "data-testid": "graph-left-panel",
+      "data-stamp-area": "true",
+      className: [
+        isDark ? "theme--dark " : "",
+        isMobile ? "fixed inset-y-0 left-0 z-50 flex w-72 max-w-[85vw] flex-col bg-white shadow-2xl animate-in slide-in-from-left duration-200" : "absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200"
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-slate-800", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base leading-none", children: GraphIconHeader }),
+            "\u0110\u1ED3 th\u1ECB 2D"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleClose,
+              "aria-label": "\u0110\xF3ng",
+              className: "rounded p-1 text-slate-500 transition hover:bg-slate-100 hover:text-slate-800",
+              children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon3, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto p-3 space-y-4", children: /* @__PURE__ */ jsxRuntime.jsx(PanelBody, { ...props }) })
+      ]
+    }
+  );
+}
+
+// src/stamps/graph-2d/parser.ts
+var ALLOWED_FUNCTIONS = /* @__PURE__ */ new Set([
+  "sin",
+  "cos",
+  "tan",
+  "asin",
+  "acos",
+  "atan",
+  "log",
+  "ln",
+  "exp",
+  "sqrt",
+  "abs",
+  "floor",
+  "ceil",
+  "round"
+]);
+var ALLOWED_CHARS = /^[a-zA-Z0-9_.+\-*/^()\s,]+$/;
+var IDENTIFIER_RE = /[a-zA-Z][a-zA-Z0-9_]*/g;
+var SUGGESTIONS = {
+  tg: "tan",
+  arcsin: "asin",
+  arccos: "acos",
+  arctan: "atan"
+};
+function errResult(message) {
+  return { ok: false, error: message, freeVars: /* @__PURE__ */ new Set() };
+}
+function validate(expr) {
+  const trimmed = expr.trim();
+  if (!trimmed) return errResult("Bi\u1EC3u th\u1EE9c r\u1ED7ng");
+  if (!ALLOWED_CHARS.test(trimmed)) return errResult("K\xFD t\u1EF1 kh\xF4ng h\u1EE3p l\u1EC7");
+  const ids = trimmed.match(IDENTIFIER_RE) ?? [];
+  const freeVars = /* @__PURE__ */ new Set();
+  for (const id of ids) {
+    if (id === "x" || id === "pi" || id === "e") continue;
+    if (ALLOWED_FUNCTIONS.has(id)) continue;
+    if (id.length === 1) {
+      freeVars.add(id);
+      continue;
+    }
+    const hint = SUGGESTIONS[id];
+    return errResult(
+      hint ? `T\xEAn h\xE0m kh\xF4ng h\u1EE3p l\u1EC7: "${id}". B\u1EA1n c\xF3 \xFD l\xE0 "${hint}" kh\xF4ng?` : `T\xEAn kh\xF4ng h\u1EE3p l\u1EC7: "${id}"`
+    );
+  }
+  try {
+    const paramSubs = Object.fromEntries([...freeVars].map((v) => [v, 1]));
+    const rewritten = rewriteToJs(trimmed, paramSubs);
+    new Function("x", `return (${rewritten})`);
+  } catch {
+    return errResult("L\u1ED7i c\xFA ph\xE1p");
+  }
+  return { ok: true, freeVars };
+}
+var FUNCTION_REPLACEMENTS = [
+  // longest first để tránh substring conflict (asin trước sin)
+  ["asin", "Math.asin"],
+  ["acos", "Math.acos"],
+  ["atan", "Math.atan"],
+  ["sqrt", "Math.sqrt"],
+  ["floor", "Math.floor"],
+  ["round", "Math.round"],
+  ["ceil", "Math.ceil"],
+  ["sin", "Math.sin"],
+  ["cos", "Math.cos"],
+  ["tan", "Math.tan"],
+  ["abs", "Math.abs"],
+  ["exp", "Math.exp"],
+  ["log", "Math.log10"],
+  ["ln", "Math.log"]
+];
+function rewriteToJs(expr, params) {
+  let s = expr.replace(/\^/g, "**");
+  s = s.replace(/\bpi\b/g, "Math.PI");
+  s = s.replace(/\be\b/g, "Math.E");
+  for (const [from, to] of FUNCTION_REPLACEMENTS) {
+    s = s.replace(new RegExp(`\\b${from}\\b`, "g"), to);
+  }
+  for (const [name, value] of Object.entries(params)) {
+    if (name.length !== 1) continue;
+    s = s.replace(new RegExp(`\\b${name}\\b`, "g"), `(${value})`);
+  }
+  return s;
+}
+function compile(expr, paramValues) {
+  const v = validate(expr);
+  if (!v.ok) return { error: v.error ?? "Invalid" };
+  try {
+    const rewritten = rewriteToJs(expr, paramValues);
+    const raw = new Function("x", `return (${rewritten})`);
+    return (x) => {
+      try {
+        const y = raw(x);
+        return typeof y === "number" ? y : NaN;
+      } catch {
+        return NaN;
+      }
+    };
+  } catch (err) {
+    return { error: err instanceof Error ? err.message : String(err) };
+  }
+}
+
+// src/stamps/graph-2d/editor/handlers.ts
+function addPointOnCurve(graph, ctx, idFactory) {
+  if (!ctx.functionId) return graph;
+  const point = {
+    id: idFactory(),
+    functionId: ctx.functionId,
+    x: ctx.x
+  };
+  return { ...graph, points: [...graph.points, point] };
+}
+function addIntersection(graph, functionIdA, functionIdB, idFactory) {
+  if (functionIdA === functionIdB) return graph;
+  const exists = graph.intersections.some(
+    (i) => i.functionIdA === functionIdA && i.functionIdB === functionIdB || i.functionIdA === functionIdB && i.functionIdB === functionIdA
+  );
+  if (exists) return graph;
+  const intersection = {
+    id: idFactory(),
+    functionIdA,
+    functionIdB
+  };
+  return { ...graph, intersections: [...graph.intersections, intersection] };
+}
+function numericalDerivative(expression, paramValues, x, h = 1e-4) {
+  const fn = compile(expression, paramValues);
+  if (typeof fn !== "function") return NaN;
+  const y1 = fn(x - h);
+  const y2 = fn(x + h);
+  return (y2 - y1) / (2 * h);
+}
+function MiniBoard({ graph, activeTool, isDark, onBoardEvent }) {
+  const containerRef = react.useRef(null);
+  const boardRef = react.useRef(null);
+  const curvesRef = react.useRef(/* @__PURE__ */ new Map());
+  react.useEffect(() => {
+    let cancelled = false;
+    let createdBoard = null;
+    const containerEl = containerRef.current;
+    if (!containerEl) return;
+    const containerId = `jxg_graph2d_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+    containerEl.id = containerId;
+    (async () => {
+      const JXG = (await import('jsxgraph')).default;
+      if (cancelled) return;
+      const opts = JXG.Options;
+      if (opts) {
+        opts.text = opts.text || {};
+        opts.text.display = "internal";
+        opts.label = opts.label || {};
+        opts.label.display = "internal";
+      }
+      const board = JXG.JSXGraph.initBoard(containerId, {
+        boundingbox: [graph.view.xMin, graph.view.yMax, graph.view.xMax, graph.view.yMin],
+        axis: graph.view.showAxis,
+        grid: graph.view.showGrid,
+        showCopyright: false,
+        showNavigation: true,
+        pan: { enabled: true, needShift: false },
+        zoom: { wheel: true, needShift: false },
+        keepAspectRatio: false
+      });
+      boardRef.current = board;
+      createdBoard = board;
+      syncObjects(board, graph, curvesRef.current);
+      board.on("boundingbox", () => {
+        const bb = board.getBoundingBox();
+        onBoardEvent({
+          type: "view-change",
+          view: {
+            xMin: bb[0],
+            xMax: bb[2],
+            yMax: bb[1],
+            yMin: bb[3],
+            showAxis: graph.view.showAxis,
+            showGrid: graph.view.showGrid
+          }
+        });
+      });
+      board.on("down", (ev) => {
+        const usrCoords = board.getUsrCoordsOfMouse?.(ev);
+        const x = usrCoords?.[0] ?? 0;
+        const y = usrCoords?.[1] ?? 0;
+        let functionId;
+        for (const [id, ref] of curvesRef.current) {
+          const obj = ref.obj;
+          if (obj?.hasPoint && obj.hasPoint(ev.clientX ?? 0, ev.clientY ?? 0)) {
+            functionId = id;
+            break;
+          }
+        }
+        if (functionId) onBoardEvent({ type: "click-curve", functionId, x, y });
+        else onBoardEvent({ type: "click-empty", x, y });
+      });
+    })().catch((err) => console.error("MiniBoard init failed:", err));
+    return () => {
+      cancelled = true;
+      try {
+        if (createdBoard) __require("jsxgraph").default.JSXGraph.freeBoard(createdBoard);
+      } catch {
+      }
+      boardRef.current = null;
+      curvesRef.current.clear();
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!boardRef.current) return;
+    syncObjects(boardRef.current, graph, curvesRef.current);
+  }, [graph]);
+  react.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.style.cursor = activeTool === "move" ? "" : "crosshair";
+  }, [activeTool]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "graph-miniboard",
+      style: { width: "100%", height: "100%", minHeight: "300px" },
+      "data-testid": "graph-miniboard"
+    }
+  );
+}
+function paramSig(graph) {
+  return graph.parameters.map((p) => `${p.name}=${p.value}`).join(",");
+}
+function syncObjects(board, graph, curves) {
+  const sig = paramSig(graph);
+  const paramMap = {};
+  for (const p of graph.parameters) paramMap[p.name] = p.value;
+  const wantedIds = new Set(graph.functions.map((f) => f.id));
+  for (const [id, ref] of curves) {
+    if (!wantedIds.has(id)) {
+      try {
+        board.removeObject(ref.obj);
+      } catch {
+      }
+      curves.delete(id);
+    }
+  }
+  for (const f of graph.functions) {
+    const existing = curves.get(f.id);
+    const needsRecreate = !existing || existing.expression !== f.expression || existing.color !== f.color || existing.visible !== f.visible || existing.paramSignature !== sig;
+    if (!needsRecreate) continue;
+    if (existing) {
+      try {
+        board.removeObject(existing.obj);
+      } catch {
+      }
+    }
+    if (!f.visible) {
+      curves.delete(f.id);
+      continue;
+    }
+    const compiled = compile(f.expression, paramMap);
+    if (typeof compiled !== "function") continue;
+    const domain = f.domain ?? { min: graph.view.xMin, max: graph.view.xMax };
+    const obj = board.create("functiongraph", [compiled, domain.min, domain.max], {
+      strokeColor: f.color,
+      strokeWidth: 2,
+      name: f.name,
+      withLabel: false,
+      highlight: false
+    });
+    curves.set(f.id, {
+      obj,
+      expression: f.expression,
+      color: f.color,
+      visible: f.visible,
+      paramSignature: sig
+    });
+  }
+  for (const point of graph.points) {
+    const fn = graph.functions.find((f) => f.id === point.functionId);
+    if (!fn || !fn.visible) continue;
+    const compiled = compile(fn.expression, paramMap);
+    if (typeof compiled !== "function") continue;
+    const y = compiled(point.x);
+    board.create("point", [point.x, y], {
+      name: point.label ?? "",
+      size: 3,
+      fillColor: fn.color,
+      strokeColor: fn.color,
+      withLabel: !!point.label
+    });
+  }
+  for (const inter of graph.intersections) {
+    const fa = graph.functions.find((f) => f.id === inter.functionIdA);
+    const fb = graph.functions.find((f) => f.id === inter.functionIdB);
+    if (!fa || !fb || !fa.visible || !fb.visible) continue;
+    const cfa = compile(fa.expression, paramMap);
+    const cfb = compile(fb.expression, paramMap);
+    if (typeof cfa !== "function" || typeof cfb !== "function") continue;
+    const roots = scanRoots((x) => cfa(x) - cfb(x), graph.view.xMin, graph.view.xMax);
+    for (const x of roots) {
+      board.create("point", [x, cfa(x)], {
+        size: 3,
+        fillColor: "#000",
+        strokeColor: "#000"
+      });
+    }
+  }
+  for (const tan of graph.tangents) {
+    const pt = graph.points.find((p) => p.id === tan.pointId);
+    if (!pt) continue;
+    const fn = graph.functions.find((f) => f.id === pt.functionId);
+    if (!fn || !fn.visible) continue;
+    const slope = numericalDerivative(fn.expression, paramMap, pt.x);
+    const cfn = compile(fn.expression, paramMap);
+    if (typeof cfn !== "function" || !Number.isFinite(slope)) continue;
+    const y0 = cfn(pt.x);
+    const x1 = graph.view.xMin;
+    const x2 = graph.view.xMax;
+    board.create(
+      "line",
+      [
+        [x1, slope * (x1 - pt.x) + y0],
+        [x2, slope * (x2 - pt.x) + y0]
+      ],
+      {
+        strokeColor: fn.color,
+        strokeWidth: 1,
+        dash: 2,
+        straightFirst: false,
+        straightLast: false
+      }
+    );
+  }
+  board.update();
+}
+function scanRoots(fn, xMin, xMax, samples = 200) {
+  const roots = [];
+  const step = (xMax - xMin) / samples;
+  let prevX = xMin;
+  let prevY = fn(prevX);
+  for (let i = 1; i <= samples; i++) {
+    const x = xMin + i * step;
+    const y = fn(x);
+    if (Number.isFinite(prevY) && Number.isFinite(y) && prevY * y < 0) {
+      let a = prevX;
+      let b = x;
+      let ya = prevY;
+      for (let j = 0; j < 30; j++) {
+        const m = (a + b) / 2;
+        const ym = fn(m);
+        if (Math.abs(ym) < 1e-6) {
+          a = b = m;
+          break;
+        }
+        if (ya * ym < 0) {
+          b = m;
+        } else {
+          a = m;
+          ya = ym;
+        }
+      }
+      roots.push((a + b) / 2);
+    }
+    prevX = x;
+    prevY = y;
+  }
+  return roots;
+}
+
+// src/stamps/graph-2d/serialize.ts
+var EMPTY_GRAPH = {
+  version: 1,
+  view: { xMin: -10, xMax: 10, yMin: -10, yMax: 10, showAxis: true, showGrid: true },
+  functions: [],
+  parameters: [],
+  points: [],
+  intersections: [],
+  tangents: []
+};
+function stringifySerializedGraph(graph) {
+  return JSON.stringify(graph);
+}
+function parseSerializedGraph(jsonState) {
+  let raw;
+  try {
+    raw = JSON.parse(jsonState);
+  } catch {
+    return null;
+  }
+  if (!raw || typeof raw !== "object" || Array.isArray(raw)) return null;
+  const r = raw;
+  if (r.version !== 1) return null;
+  if (!r.view || typeof r.view !== "object") return null;
+  const v = r.view;
+  if (typeof v.xMin !== "number" || typeof v.xMax !== "number" || typeof v.yMin !== "number" || typeof v.yMax !== "number" || typeof v.showAxis !== "boolean" || typeof v.showGrid !== "boolean") {
+    return null;
+  }
+  for (const key of ["functions", "parameters", "points", "intersections", "tangents"]) {
+    if (!Array.isArray(r[key])) return null;
+  }
+  return raw;
+}
+
+// src/stamps/graph-2d/renderObjects.ts
+function renderGraphObjects(board, graph) {
+  const paramMap = {};
+  for (const p of graph.parameters) paramMap[p.name] = p.value;
+  for (const f of graph.functions) {
+    if (!f.visible) continue;
+    const compiled = compile(f.expression, paramMap);
+    if (typeof compiled !== "function") continue;
+    const domain = f.domain ?? { min: graph.view.xMin, max: graph.view.xMax };
+    board.create("functiongraph", [compiled, domain.min, domain.max], {
+      strokeColor: f.color,
+      strokeWidth: 2,
+      name: f.name,
+      withLabel: false,
+      highlight: false
+    });
+  }
+  for (const point of graph.points) {
+    const fn = graph.functions.find((f) => f.id === point.functionId);
+    if (!fn || !fn.visible) continue;
+    const compiled = compile(fn.expression, paramMap);
+    if (typeof compiled !== "function") continue;
+    const y = compiled(point.x);
+    board.create("point", [point.x, y], {
+      name: point.label ?? "",
+      size: 3,
+      fillColor: fn.color,
+      strokeColor: fn.color,
+      withLabel: !!point.label
+    });
+  }
+  for (const inter of graph.intersections) {
+    const fa = graph.functions.find((f) => f.id === inter.functionIdA);
+    const fb = graph.functions.find((f) => f.id === inter.functionIdB);
+    if (!fa || !fb || !fa.visible || !fb.visible) continue;
+    const cfa = compile(fa.expression, paramMap);
+    const cfb = compile(fb.expression, paramMap);
+    if (typeof cfa !== "function" || typeof cfb !== "function") continue;
+    const roots = scanRoots2((x) => cfa(x) - cfb(x), graph.view.xMin, graph.view.xMax);
+    for (const x of roots) {
+      board.create("point", [x, cfa(x)], {
+        size: 3,
+        fillColor: "#000",
+        strokeColor: "#000"
+      });
+    }
+  }
+  for (const tan of graph.tangents) {
+    const pt = graph.points.find((p) => p.id === tan.pointId);
+    if (!pt) continue;
+    const fn = graph.functions.find((f) => f.id === pt.functionId);
+    if (!fn || !fn.visible) continue;
+    const slope = numericalDerivative(fn.expression, paramMap, pt.x);
+    const cfn = compile(fn.expression, paramMap);
+    if (typeof cfn !== "function" || !Number.isFinite(slope)) continue;
+    const y0 = cfn(pt.x);
+    const x1 = graph.view.xMin;
+    const x2 = graph.view.xMax;
+    board.create(
+      "line",
+      [
+        [x1, slope * (x1 - pt.x) + y0],
+        [x2, slope * (x2 - pt.x) + y0]
+      ],
+      {
+        strokeColor: fn.color,
+        strokeWidth: 1,
+        dash: 2,
+        straightFirst: false,
+        straightLast: false
+      }
+    );
+  }
+}
+function scanRoots2(fn, xMin, xMax, samples = 200) {
+  const roots = [];
+  const step = (xMax - xMin) / samples;
+  let prevX = xMin;
+  let prevY = fn(prevX);
+  for (let i = 1; i <= samples; i++) {
+    const x = xMin + i * step;
+    const y = fn(x);
+    if (Number.isFinite(prevY) && Number.isFinite(y) && prevY * y < 0) {
+      let a = prevX;
+      let b = x;
+      let ya = prevY;
+      for (let j = 0; j < 30; j++) {
+        const m = (a + b) / 2;
+        const ym = fn(m);
+        if (Math.abs(ym) < 1e-6) {
+          a = b = m;
+          break;
+        }
+        if (ya * ym < 0) {
+          b = m;
+        } else {
+          a = m;
+          ya = ym;
+        }
+      }
+      roots.push((a + b) / 2);
+    }
+    prevX = x;
+    prevY = y;
+  }
+  return roots;
+}
+
+// src/stamps/graph-2d/render.ts
+async function renderGraph2dSvgFromState(jsonState) {
+  const parsed = parseSerializedGraph(jsonState);
+  if (!parsed) throw new Error("renderGraph2dSvgFromState: jsonState corrupt");
+  const JXG = (await import('jsxgraph')).default;
+  const opts = JXG.Options;
+  if (opts) {
+    opts.text = opts.text || {};
+    opts.text.display = "internal";
+    opts.text.useASCIIMathML = false;
+    opts.text.useMathJax = false;
+    opts.text.useKatex = false;
+    opts.label = opts.label || {};
+    opts.label.display = "internal";
+  }
+  const container = document.createElement("div");
+  container.id = `jxg_graph2d_off_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+  container.style.cssText = "position:absolute;top:-99999px;left:-99999px;width:600px;height:400px;visibility:hidden;pointer-events:none;";
+  document.body.appendChild(container);
+  let board = null;
+  try {
+    board = JXG.JSXGraph.initBoard(container.id, {
+      boundingbox: [parsed.view.xMin, parsed.view.yMax, parsed.view.xMax, parsed.view.yMin],
+      axis: parsed.view.showAxis,
+      grid: parsed.view.showGrid,
+      showCopyright: false,
+      showNavigation: false,
+      keepAspectRatio: false
+    });
+    renderGraphObjects(board, parsed);
+    board.update();
+    const svgEl = container.querySelector("svg");
+    if (!svgEl) throw new Error("renderGraph2dSvgFromState: no svg generated");
+    return svgEl.outerHTML;
+  } finally {
+    try {
+      if (board) JXG.JSXGraph.freeBoard(board);
+    } catch {
+    }
+    if (container.parentNode) container.parentNode.removeChild(container);
+  }
+}
+var GraphEditorPanel = react.forwardRef(function GraphEditorPanel2(props, ref) {
+  const initialGraph = props.initialState ?? EMPTY_GRAPH;
+  const graphRef = react.useRef(initialGraph);
+  const [, forceUpdate] = react.useState(0);
+  const [errors, setErrors] = react.useState({});
+  const [tool, setToolState] = react.useState("move");
+  const undoStackRef = react.useRef([]);
+  const idCounterRef = react.useRef(1);
+  const toolRef = react.useRef(tool);
+  toolRef.current = tool;
+  const intersectFirstRef = react.useRef(null);
+  const propsRef = react.useRef(props);
+  propsRef.current = props;
+  const initialGraphNotifiedRef = react.useRef(false);
+  const pushUndo = react.useCallback((g) => {
+    undoStackRef.current.push(g);
+    if (undoStackRef.current.length > 30) undoStackRef.current.shift();
+  }, []);
+  const setErrorsWithNotify = react.useCallback(
+    (updater) => {
+      setErrors((prev) => {
+        const next = updater(prev);
+        propsRef.current.onErrorsChange?.(next);
+        return next;
+      });
+    },
+    []
+  );
+  const notifyStateChange = react.useCallback((g, t) => {
+    propsRef.current.onStateChange({
+      tool: t,
+      showAxis: g.view.showAxis,
+      showGrid: g.view.showGrid,
+      canUndo: undoStackRef.current.length > 0
+    });
+  }, []);
+  const updateGraph = react.useCallback(
+    (mutator) => {
+      const prev = graphRef.current;
+      pushUndo(prev);
+      const next = mutator(prev);
+      graphRef.current = next;
+      notifyStateChange(next, toolRef.current);
+      forceUpdate((n) => n + 1);
+      propsRef.current.onGraphChange?.(next);
+    },
+    [pushUndo, notifyStateChange]
+  );
+  const onBoardEvent = react.useCallback((ev) => {
+    const currentTool = toolRef.current;
+    if (currentTool === "point-on-curve" && ev.type === "click-curve" && ev.functionId && ev.x !== void 0) {
+      updateGraph(
+        (g) => addPointOnCurve(
+          g,
+          { x: ev.x, y: ev.y ?? 0, functionId: ev.functionId },
+          () => `p${idCounterRef.current++}`
+        )
+      );
+      setToolState("move");
+    } else if (currentTool === "intersect" && ev.type === "click-curve" && ev.functionId) {
+      if (!intersectFirstRef.current) {
+        intersectFirstRef.current = ev.functionId;
+      } else {
+        const a = intersectFirstRef.current;
+        const b = ev.functionId;
+        intersectFirstRef.current = null;
+        updateGraph(
+          (g) => addIntersection(g, a, b, () => `i${idCounterRef.current++}`)
+        );
+        setToolState("move");
+      }
+    } else if (currentTool === "tangent" && ev.type === "click-curve" && ev.functionId && ev.x !== void 0) {
+      const pointId = `p${idCounterRef.current++}`;
+      const tangentId = `t${idCounterRef.current++}`;
+      updateGraph((g) => ({
+        ...g,
+        points: [...g.points, { id: pointId, functionId: ev.functionId, x: ev.x }],
+        tangents: [...g.tangents, { id: tangentId, pointId }]
+      }));
+      setToolState("move");
+    }
+  }, [updateGraph]);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      insert: () => {
+        const g = graphRef.current;
+        if (g.functions.length === 0) return false;
+        const jsonState = stringifySerializedGraph(g);
+        renderGraph2dSvgFromState(jsonState).then((svg) => propsRef.current.onInsert(jsonState, svg)).catch((err) => console.error("Graph2D insert render failed:", err));
+        return true;
+      },
+      hasContent: () => graphRef.current.functions.length > 0,
+      setTool: (t) => {
+        setToolState(t);
+        const g = graphRef.current;
+        propsRef.current.onStateChange({
+          tool: t,
+          showAxis: g.view.showAxis,
+          showGrid: g.view.showGrid,
+          canUndo: undoStackRef.current.length > 0
+        });
+      },
+      setShowAxis: (b) => updateGraph((g) => ({ ...g, view: { ...g.view, showAxis: b } })),
+      setShowGrid: (b) => updateGraph((g) => ({ ...g, view: { ...g.view, showGrid: b } })),
+      resetView: () => updateGraph((g) => ({
+        ...g,
+        view: { ...g.view, xMin: -10, xMax: 10, yMin: -10, yMax: 10 }
+      })),
+      undo: () => {
+        const prev = undoStackRef.current.pop();
+        if (!prev) return;
+        graphRef.current = prev;
+        forceUpdate((n) => n + 1);
+        propsRef.current.onStateChange({
+          tool: toolRef.current,
+          showAxis: prev.view.showAxis,
+          showGrid: prev.view.showGrid,
+          canUndo: undoStackRef.current.length > 0
+        });
+        propsRef.current.onGraphChange?.(prev);
+      },
+      addFunction: (expr) => {
+        const g = graphRef.current;
+        if (g.functions.length >= MAX_FUNCTIONS) {
+          return { ok: false, error: `T\u1ED1i \u0111a ${MAX_FUNCTIONS} h\xE0m` };
+        }
+        const v = validate(expr);
+        if (!v.ok) return { ok: false, error: v.error ?? "Invalid" };
+        const id = `f${idCounterRef.current++}`;
+        const usedNames = g.functions.map((f) => f.name);
+        const usedColors = g.functions.map((f) => f.color);
+        const newFn = {
+          id,
+          name: nextFunctionName(usedNames),
+          expression: expr,
+          color: nextColor(usedColors),
+          visible: true
+        };
+        const usedParamNames = new Set(g.parameters.map((p) => p.name));
+        const newParams = [];
+        for (const varName of v.freeVars) {
+          if (usedParamNames.has(varName)) continue;
+          if (g.parameters.length + newParams.length >= MAX_PARAMETERS) break;
+          newParams.push({ name: varName, value: 1, min: -5, max: 5, step: 0.1 });
+        }
+        updateGraph((prev) => ({
+          ...prev,
+          functions: [...prev.functions, newFn],
+          parameters: [...prev.parameters, ...newParams]
+        }));
+        setErrorsWithNotify((e) => ({ ...e, [id]: null }));
+        return { ok: true, id };
+      },
+      commitFunctionExpression: (id, expr) => {
+        const g = graphRef.current;
+        const v = validate(expr);
+        if (!v.ok) {
+          setErrorsWithNotify((e) => ({ ...e, [id]: v.error ?? "Invalid" }));
+          return;
+        }
+        const usedParamNames = new Set(g.parameters.map((p) => p.name));
+        const newParams = [];
+        for (const varName of v.freeVars) {
+          if (usedParamNames.has(varName)) continue;
+          if (g.parameters.length + newParams.length >= MAX_PARAMETERS) break;
+          newParams.push({ name: varName, value: 1, min: -5, max: 5, step: 0.1 });
+        }
+        updateGraph((prev) => ({
+          ...prev,
+          functions: prev.functions.map(
+            (f) => f.id === id ? { ...f, expression: expr } : f
+          ),
+          parameters: [...prev.parameters, ...newParams]
+        }));
+        setErrorsWithNotify((e) => ({ ...e, [id]: null }));
+      },
+      toggleFunctionVisible: (id) => updateGraph((g) => ({
+        ...g,
+        functions: g.functions.map(
+          (f) => f.id === id ? { ...f, visible: !f.visible } : f
+        )
+      })),
+      removeFunction: (id) => updateGraph((g) => ({
+        ...g,
+        functions: g.functions.filter((f) => f.id !== id)
+      })),
+      // setParameter does NOT push undo — would flood the stack (slider drag)
+      setParameter: (name, value) => {
+        const next = {
+          ...graphRef.current,
+          parameters: graphRef.current.parameters.map(
+            (p) => p.name === name ? { ...p, value } : p
+          )
+        };
+        graphRef.current = next;
+        forceUpdate((n) => n + 1);
+        propsRef.current.onGraphChange?.(next);
+      },
+      setParameterRange: (name, min, max, step) => updateGraph((g) => ({
+        ...g,
+        parameters: g.parameters.map(
+          (p) => p.name === name ? { ...p, min, max, step, value: Math.min(max, Math.max(min, p.value)) } : p
+        )
+      })),
+      removeParameter: (name) => updateGraph((g) => ({
+        ...g,
+        parameters: g.parameters.filter((p) => p.name !== name)
+      })),
+      getGraph: () => graphRef.current,
+      getErrors: () => errors
+    }),
+    // deps: updateGraph stable; errors changes when function errors change; setErrorsWithNotify stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [updateGraph, errors, setErrorsWithNotify]
+  );
+  react.useEffect(() => {
+    if (!initialGraphNotifiedRef.current) {
+      initialGraphNotifiedRef.current = true;
+      propsRef.current.onGraphChange?.(graphRef.current);
+    }
+  }, []);
+  const graph = graphRef.current;
+  const hasContent = graph.functions.length > 0;
+  const handleInsert = () => {
+    const g = graphRef.current;
+    if (g.functions.length === 0) return;
+    const jsonState = stringifySerializedGraph(g);
+    renderGraph2dSvgFromState(jsonState).then((svg) => propsRef.current.onInsert(jsonState, svg)).catch((err) => console.error("Graph2D insert render failed:", err));
+  };
+  const { isMobile, isDark, withLeftPanel } = props;
+  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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": "\u0110\u1ED3 th\u1ECB 2D",
+      "data-testid": "graph-editor-panel",
+      "data-stamp-area": "true",
+      "data-mobile-editor": isMobile ? "true" : void 0,
+      style: wrapperStyle,
+      className: [
+        isDark ? "theme--dark " : "",
+        "flex flex-col overflow-hidden bg-white",
+        isMobile ? "h-full w-full" : "h-[540px] max-h-[85vh] w-[640px] max-w-[calc(100vw-280px)] rounded-lg border border-slate-300 shadow-2xl ring-1 ring-black/5"
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center gap-2 border-b border-slate-200 bg-gradient-to-r from-orange-500 to-amber-600 px-3 py-2 text-white", children: [
+          isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: props.onOpenDrawer,
+              "aria-label": "M\u1EDF b\u1EA3ng \u0111\u1EA1i s\u1ED1",
+              "data-testid": "graph-drawer-toggle",
+              className: "-ml-1 inline-flex h-10 w-10 items-center justify-center rounded transition hover:bg-white/15",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex flex-1 items-center gap-2 text-sm font-semibold", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21 V3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21 H21" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 19 C8 5, 14 5, 19 17" })
+            ] }),
+            "\u0110\u1ED3 th\u1ECB 2D"
+          ] }),
+          isMobile && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleInsert,
+              disabled: !hasContent,
+              "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__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: props.onClose,
+              "aria-label": "\u0110\xF3ng",
+              className: "inline-flex h-9 w-9 items-center justify-center rounded transition hover:bg-white/15",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          MiniBoard,
+          {
+            graph,
+            activeTool: tool,
+            isDark,
+            onBoardEvent
+          }
+        ) }),
+        !isMobile && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex items-center justify-between border-t border-slate-200 bg-slate-50 px-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-slate-500", children: "Nh\u1EADp bi\u1EC3u th\u1EE9c trong b\u1EA3ng \u0111\u1EA1i s\u1ED1 b\xEAn tr\xE1i." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: props.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__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleInsert,
+                disabled: !hasContent,
+                "data-testid": "graph-insert-btn",
+                className: "rounded bg-orange-600 px-3 py-1 text-xs font-medium text-white transition hover:bg-orange-700 disabled:opacity-50",
+                children: "Ch\xE8n"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+function isGraph2DCustomData(data) {
+  if (!data || typeof data !== "object") return false;
+  const d = data;
+  return d.kind === "graph2d" && d.version === 1 && typeof d.jsonState === "string";
 }
-var Geometry3DStampHost = react.forwardRef(
-  function Geometry3DStampHost2({ api, editingElement, onClose, isDark }, ref) {
-    const editorRef = react.useRef(null);
-    const initial = react.useMemo(
-      () => parseInitial(editingElement),
-      [editingElement]
+var INITIAL_GRAPH_STATE = {
+  tool: "move",
+  showAxis: true,
+  showGrid: true,
+  canUndo: false
+};
+var Graph2DStampHost = react.forwardRef(
+  function Graph2DStampHost2({ api, editingElement, onClose, isDark }, ref) {
+    const panelRef = react.useRef(null);
+    const [graphUIState, setGraphUIState] = react.useState(INITIAL_GRAPH_STATE);
+    const { isMobile } = useIsMobile();
+    const [drawerOpen, setDrawerOpen] = react.useState(false);
+    const initialState = react.useMemo(() => {
+      if (!editingElement) return null;
+      if (!isGraph2DCustomData(editingElement.customData)) return null;
+      return parseSerializedGraph(editingElement.customData.jsonState);
+    }, [editingElement]);
+    const [graphSnapshot, setGraphSnapshot] = react.useState(
+      initialState ?? EMPTY_GRAPH
     );
+    const [errorsSnapshot, setErrorsSnapshot] = react.useState({});
     const handleInsert = react.useCallback(
-      async (jsonState, svgString, width, height) => {
+      async (jsonState, svgString) => {
         if (!api) return;
-        await insertStampImage(api, {
-          svgString,
-          makeCustomData: () => ({
-            kind: "geometry3d",
-            version: 1,
-            jsonState,
-            svgWidth: width,
-            svgHeight: height
-          }),
-          editingElementId: editingElement?.id ?? null
-        });
+        try {
+          await insertStampImage(api, {
+            svgString,
+            makeCustomData: (width, height) => ({
+              kind: "graph2d",
+              version: 1,
+              jsonState,
+              svgWidth: width,
+              svgHeight: height
+            }),
+            editingElementId: editingElement?.id ?? null
+          });
+        } catch (err) {
+          console.error("Graph2D insert failed:", err);
+        }
         onClose();
       },
-      [api, editingElement, onClose]
+      [api, editingElement?.id, onClose]
     );
     react.useImperativeHandle(
       ref,
       () => ({
-        tryInsert: () => editorRef.current?.tryInsert() ?? false,
-        hasContent: () => editorRef.current?.hasContent() ?? false
+        tryInsert: () => panelRef.current?.insert() ?? false,
+        hasContent: () => panelRef.current?.hasContent() ?? false
       }),
       []
     );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      EditorPanel,
-      {
-        ref: editorRef,
-        isDark,
-        initial,
-        onInsert: handleInsert,
-        onClose
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        GraphLeftPanel,
+        {
+          activeTool: graphUIState.tool,
+          onToolChange: (t) => panelRef.current?.setTool(t),
+          showAxis: graphUIState.showAxis,
+          showGrid: graphUIState.showGrid,
+          onShowAxisChange: (b) => panelRef.current?.setShowAxis(b),
+          onShowGridChange: (b) => panelRef.current?.setShowGrid(b),
+          onResetView: () => panelRef.current?.resetView(),
+          onUndo: () => panelRef.current?.undo(),
+          canUndo: graphUIState.canUndo,
+          onClose,
+          isDark,
+          isMobile,
+          drawerOpen,
+          onDrawerClose: () => setDrawerOpen(false),
+          graph: graphSnapshot,
+          errors: errorsSnapshot,
+          onAddFunctionDraft: () => {
+            const result = panelRef.current?.addFunction("x");
+            if (result && !result.ok) console.warn("addFunction failed:", result.error);
+          },
+          onCommitFunctionExpr: (id, expr) => panelRef.current?.commitFunctionExpression(id, expr),
+          onToggleFunctionVisible: (id) => panelRef.current?.toggleFunctionVisible(id),
+          onRemoveFunction: (id) => panelRef.current?.removeFunction(id),
+          onParameterChange: (name, v) => panelRef.current?.setParameter(name, v),
+          onParameterRangeChange: (name, min, max, step) => panelRef.current?.setParameterRange(name, min, max, step),
+          onRemoveParameter: (name) => panelRef.current?.removeParameter(name)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        GraphEditorPanel,
+        {
+          ref: panelRef,
+          initialState,
+          onInsert: handleInsert,
+          onClose,
+          onStateChange: setGraphUIState,
+          onGraphChange: setGraphSnapshot,
+          onErrorsChange: setErrorsSnapshot,
+          withLeftPanel: !isMobile,
+          isDark,
+          isMobile,
+          onOpenDrawer: () => setDrawerOpen(true)
+        }
+      )
+    ] });
   }
 );
-var Geometry3DIcon = /* @__PURE__ */ jsxRuntime.jsxs(
+var Graph2DIcon = /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
     width: "20",
@@ -4643,47 +6914,45 @@ var Geometry3DIcon = /* @__PURE__ */ jsxRuntime.jsxs(
     strokeLinejoin: "round",
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3 L20 8 L20 16 L12 21 L4 16 L4 8 Z" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3 L12 21 M4 8 L12 12 L20 8 M4 16 L12 12 L20 16" })
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21 V3" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21 H21" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 19 C8 5, 14 5, 19 17" })
     ]
   }
 );
-var geometry3dStamp = {
-  kind: "geometry3d",
-  shortcutKey: "d",
-  toolbarLabel: "D",
-  toolbarTitle: "H\xECnh 3D (D)",
-  toolbarIcon: Geometry3DIcon,
-  toolbarTestId: "stamp-toolbar-geometry3d",
-  matchesCustomData: isGeometry3DCustomData,
+var graph2dStamp = {
+  kind: "graph2d",
+  shortcutKey: "h",
+  toolbarLabel: "H",
+  toolbarTitle: "Ch\xE8n \u0111\u1ED3 th\u1ECB 2D (H)",
+  toolbarIcon: Graph2DIcon,
+  toolbarTestId: "stamp-toolbar-graph2d",
+  matchesCustomData: isGraph2DCustomData,
   async renderSvgFromCustomData(data) {
-    if (!isGeometry3DCustomData(data)) {
-      throw new Error("geometry3dStamp.renderSvgFromCustomData: customData kh\xF4ng ph\u1EA3i geometry3d");
+    if (!isGraph2DCustomData(data)) {
+      throw new Error("graph2dStamp.renderSvgFromCustomData: customData kh\xF4ng ph\u1EA3i graph2d");
     }
-    const { svgString } = await renderGeometry3DSvgFromState(data.jsonState);
-    return svgString;
+    return renderGraph2dSvgFromState(data.jsonState);
   },
-  restoreFileFromCustomData: async (element) => {
+  async restoreFileFromCustomData(element) {
     const data = element.customData;
     const fileId = element.fileId;
     if (!data || !fileId) return null;
-    if (!isGeometry3DCustomData(data)) return null;
-    try {
-      const { svgString } = await renderGeometry3DSvgFromState(data.jsonState);
-      const dataURL = `data:image/svg+xml;base64,${typeof btoa !== "undefined" ? btoa(unescape(encodeURIComponent(svgString))) : Buffer.from(svgString).toString("base64")}`;
-      return { fileId, dataURL, mimeType: "image/svg+xml" };
-    } catch {
-      return null;
-    }
+    if (!isGraph2DCustomData(data)) return null;
+    const svgString = await renderGraph2dSvgFromState(data.jsonState);
+    const utf8 = unescape(encodeURIComponent(svgString));
+    const dataURL = "data:image/svg+xml;base64," + (typeof btoa !== "undefined" ? btoa(utf8) : Buffer.from(utf8).toString("base64"));
+    return { fileId, dataURL, mimeType: "image/svg+xml" };
   },
-  Host: Geometry3DStampHost
+  Host: Graph2DStampHost
 };
 
 // src/stamps/shared/registry.ts
 var DEFAULT_STAMPS = Object.freeze([
   geometryStamp,
   latexStamp,
-  geometry3dStamp
+  geometry3dStamp,
+  graph2dStamp
 ]);
 function findStampForCustomData(data, stamps = DEFAULT_STAMPS) {
   for (const s of stamps) {
@@ -4694,36 +6963,90 @@ function findStampForCustomData(data, stamps = DEFAULT_STAMPS) {
 function isStampElement(element, stamps = DEFAULT_STAMPS) {
   return findStampForCustomData(element.customData, stamps) !== null;
 }
-var WRAPPER_ID = "stamp-toolbar-portal-wrapper";
+var TOOLBAR_WRAPPER_ID = "stamp-toolbar-portal-wrapper";
+var MENU_WRAPPER_ID = "stamp-menu-portal-wrapper";
 function ToolbarInjector({
   enabled,
   activeStampKind,
   onToggle,
   stamps = DEFAULT_STAMPS
 }) {
-  const [mountNode, setMountNode] = react.useState(null);
+  const [isMobile, setIsMobile] = react.useState(false);
+  const [toolbarMount, setToolbarMount] = react.useState(null);
+  const [menuMount, setMenuMount] = react.useState(null);
+  const isMobileRef = react.useRef(false);
+  const toolbarMountRef = react.useRef(null);
+  const menuMountRef = react.useRef(null);
   react.useEffect(() => {
     if (!enabled) {
-      setMountNode(null);
+      if (isMobileRef.current !== false) {
+        isMobileRef.current = false;
+        setIsMobile(false);
+      }
+      return;
+    }
+    let cancelled = false;
+    let observer = null;
+    let timer = null;
+    let attempts = 0;
+    const apply = (next) => {
+      if (cancelled || isMobileRef.current === next) return;
+      isMobileRef.current = next;
+      queueMicrotask(() => {
+        if (!cancelled) setIsMobile(next);
+      });
+    };
+    const attach = () => {
+      if (cancelled) return;
+      const root = document.querySelector(".excalidraw");
+      if (!root) {
+        if (attempts++ < 20) timer = setTimeout(attach, 100);
+        return;
+      }
+      apply(root.classList.contains("excalidraw--mobile"));
+      observer = new MutationObserver(() => {
+        apply(root.classList.contains("excalidraw--mobile"));
+      });
+      observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+    };
+    attach();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+      observer?.disconnect();
+    };
+  }, [enabled]);
+  react.useEffect(() => {
+    if (!enabled || isMobile) {
+      if (toolbarMountRef.current !== null) {
+        toolbarMountRef.current = null;
+        setToolbarMount(null);
+      }
+      document.getElementById(TOOLBAR_WRAPPER_ID)?.remove();
       return;
     }
     let cancelled = false;
     let attempts = 0;
     let observer = null;
     let timer = null;
+    const apply = (next) => {
+      if (cancelled || toolbarMountRef.current === next) return;
+      toolbarMountRef.current = next;
+      queueMicrotask(() => {
+        if (!cancelled) setToolbarMount(next);
+      });
+    };
     const tryMount = () => {
       if (cancelled) return;
       const container = document.querySelector(".excalidraw .App-toolbar .Stack_horizontal") ?? document.querySelector(".App-toolbar .Stack_horizontal");
       if (!container) {
-        if (attempts++ < 20) {
-          timer = setTimeout(tryMount, 100);
-        }
+        if (attempts++ < 20) timer = setTimeout(tryMount, 100);
         return;
       }
-      let wrapper = container.querySelector("#" + WRAPPER_ID);
+      let wrapper = container.querySelector("#" + TOOLBAR_WRAPPER_ID);
       if (!wrapper) {
         wrapper = document.createElement("div");
-        wrapper.id = WRAPPER_ID;
+        wrapper.id = TOOLBAR_WRAPPER_ID;
         wrapper.className = "Stamp-toolbar-injector";
         wrapper.setAttribute("data-stamp-area", "true");
         wrapper.style.display = "inline-flex";
@@ -4739,13 +7062,13 @@ function ToolbarInjector({
           container.appendChild(wrapper);
         }
       }
-      setMountNode(wrapper);
+      apply(wrapper);
     };
     tryMount();
     const root = document.querySelector(".excalidraw") ?? document.body;
     observer = new MutationObserver(() => {
       if (cancelled) return;
-      const stillThere = document.getElementById(WRAPPER_ID);
+      const stillThere = document.getElementById(TOOLBAR_WRAPPER_ID);
       if (!stillThere) {
         attempts = 0;
         tryMount();
@@ -4756,11 +7079,73 @@ function ToolbarInjector({
       cancelled = true;
       if (timer) clearTimeout(timer);
       observer?.disconnect();
-      document.getElementById(WRAPPER_ID)?.remove();
+      document.getElementById(TOOLBAR_WRAPPER_ID)?.remove();
     };
-  }, [enabled]);
-  if (!enabled || !mountNode) return null;
-  return reactDom.createPortal(
+  }, [enabled, isMobile]);
+  react.useEffect(() => {
+    if (!enabled || !isMobile) {
+      if (menuMountRef.current !== null) {
+        menuMountRef.current = null;
+        setMenuMount(null);
+      }
+      document.getElementById(MENU_WRAPPER_ID)?.remove();
+      return;
+    }
+    let cancelled = false;
+    let observer = null;
+    let rafId = null;
+    const apply = (next) => {
+      if (cancelled || menuMountRef.current === next) return;
+      menuMountRef.current = next;
+      queueMicrotask(() => {
+        if (!cancelled) setMenuMount(next);
+      });
+    };
+    const findMenu = () => {
+      if (cancelled) return;
+      const container = document.querySelector(
+        ".dropdown-menu--mobile .dropdown-menu-container"
+      );
+      if (!container) {
+        apply(null);
+        return;
+      }
+      let wrapper = container.querySelector("#" + MENU_WRAPPER_ID);
+      if (!wrapper) {
+        wrapper = document.createElement("div");
+        wrapper.id = MENU_WRAPPER_ID;
+        wrapper.setAttribute("data-stamp-menu", "true");
+        wrapper.style.display = "contents";
+        container.insertBefore(wrapper, container.firstChild);
+      }
+      apply(wrapper);
+    };
+    const schedule = () => {
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        findMenu();
+      });
+    };
+    findMenu();
+    const root = document.querySelector(".excalidraw") ?? document.body;
+    observer = new MutationObserver(schedule);
+    observer.observe(root, { childList: true, subtree: true });
+    return () => {
+      cancelled = true;
+      if (rafId != null) cancelAnimationFrame(rafId);
+      observer?.disconnect();
+      document.getElementById(MENU_WRAPPER_ID)?.remove();
+    };
+  }, [enabled, isMobile]);
+  if (!enabled) return null;
+  const closeMobileMenu = () => {
+    const trigger = document.querySelector(
+      ".App-toolbar__extra-tools-trigger"
+    );
+    trigger?.click();
+  };
+  const desktopButtons = !isMobile && toolbarMount ? reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: stamps.map((stamp) => /* @__PURE__ */ jsxRuntime.jsx(
       StampToolButton,
       {
@@ -4773,8 +7158,42 @@ function ToolbarInjector({
       },
       stamp.kind
     )) }),
-    mountNode
-  );
+    toolbarMount
+  ) : null;
+  const mobileMenuItems = isMobile && menuMount ? reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      stamps.map((stamp) => /* @__PURE__ */ jsxRuntime.jsx(
+        StampMenuItem,
+        {
+          icon: stamp.toolbarIcon,
+          label: stamp.toolbarTitle,
+          active: activeStampKind === stamp.kind,
+          onClick: () => {
+            onToggle(stamp.kind);
+            closeMobileMenu();
+          },
+          dataTestId: stamp.toolbarTestId
+        },
+        stamp.kind
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          style: {
+            height: 1,
+            background: "var(--default-border-color, rgba(0,0,0,0.08))",
+            margin: "6px 4px"
+          }
+        }
+      )
+    ] }),
+    menuMount
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    desktopButtons,
+    mobileMenuItems
+  ] });
 }
 function StampToolButton({ icon, keybind, label, active, onClick, dataTestId }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4839,6 +7258,54 @@ function StampToolButton({ icon, keybind, label, active, onClick, dataTestId })
     }
   );
 }
+function StampMenuItem({ icon, label, active, onClick, dataTestId }) {
+  const className = [
+    "dropdown-menu-item",
+    "dropdown-menu-item-base",
+    active ? "dropdown-menu-item--selected" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": label,
+      "aria-pressed": active,
+      "data-testid": dataTestId,
+      className,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        columnGap: "0.625rem",
+        width: "100%",
+        boxSizing: "border-box",
+        background: "transparent",
+        border: "1px solid transparent",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        fontSize: "0.875rem",
+        color: "var(--color-on-surface)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "1rem",
+              height: "1rem"
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+      ]
+    }
+  );
+}
 function isEditableTarget(t) {
   if (!t || !(t instanceof HTMLElement)) return false;
   if (t.isContentEditable) return true;
@@ -5156,7 +7623,9 @@ function Whiteboard({
   stamps = DEFAULT_STAMPS
 }) {
   const [api, setApi] = react.useState(null);
+  const apiRef = react.useRef(null);
   const [isDarkTheme, setIsDarkTheme] = react.useState(false);
+  const isDarkThemeRef = react.useRef(false);
   const knownFileIdsRef = react.useRef(/* @__PURE__ */ new Set());
   const lastSceneHashRef = react.useRef("");
   const sceneThrottleRef = react.useRef(null);
@@ -5217,7 +7686,10 @@ function Whiteboard({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (elements, appState, files) => {
       const nextDark = appState?.theme === "dark";
-      setIsDarkTheme((prev) => prev === nextDark ? prev : nextDark);
+      if (isDarkThemeRef.current !== nextDark) {
+        isDarkThemeRef.current = nextDark;
+        queueMicrotask(() => setIsDarkTheme(nextDark));
+      }
       if (readOnly) return;
       latestSceneRef.current = { elements, appState };
       const cropId = appState?.croppingElementId;
@@ -5227,12 +7699,17 @@ function Whiteboard({
           const stamp = findStampForCustomData(el.customData, stamps);
           if (stamp) {
             handledCropIdRef.current = cropId;
-            api.updateScene({
-              appState: { ...appState, croppingElementId: null, selectedElementIds: {} }
-            });
-            openStamp(stamp.kind, {
-              id: el.id,
-              customData: el.customData
+            const elId = el.id;
+            const elCustom = el.customData;
+            const stampKind = stamp.kind;
+            queueMicrotask(() => {
+              try {
+                api.updateScene({
+                  appState: { croppingElementId: null, selectedElementIds: {} }
+                });
+              } catch {
+              }
+              openStamp(stampKind, { id: elId, customData: elCustom });
             });
             return;
           }
@@ -5483,8 +7960,12 @@ function Whiteboard({
       Excalidraw2,
       {
         excalidrawAPI: (a) => {
-          setApi(a);
-          onApi?.(a);
+          if (apiRef.current === a) return;
+          apiRef.current = a;
+          queueMicrotask(() => {
+            setApi(a);
+            onApi?.(a);
+          });
         },
         langCode,
         viewModeEnabled: readOnly,
@@ -5526,8 +8007,10 @@ exports.Whiteboard = Whiteboard;
 exports.findStampForCustomData = findStampForCustomData;
 exports.geometry3dStamp = geometry3dStamp;
 exports.geometryStamp = geometryStamp;
+exports.graph2dStamp = graph2dStamp;
 exports.isGeometry3DCustomData = isGeometry3DCustomData;
 exports.isGeometryCustomData = isGeometryCustomData;
+exports.isGraph2DCustomData = isGraph2DCustomData;
 exports.isLatexCustomData = isLatexCustomData;
 exports.isStampElement = isStampElement;
 exports.latexStamp = latexStamp;