@xom11/whiteboard 0.9.1 → 0.10.0

package/dist/index.js

@@ -145,7 +145,17 @@ function deserializeIntoBoard(board, serialized, options = {}) {
   const palette = options.palette ?? paletteFor(false);
   const idMap = /* @__PURE__ */ new Map();
   const resolve = (a) => {
-    if (typeof a === "string" && idMap.has(a)) return idMap.get(a);
+    if (typeof a === "string") {
+      if (idMap.has(a)) return idMap.get(a);
+      const m = /^(.+):border:(\d+)$/.exec(a);
+      if (m) {
+        const poly = idMap.get(m[1]);
+        const idx = parseInt(m[2], 10);
+        if (poly && Array.isArray(poly.borders) && poly.borders[idx]) {
+          return poly.borders[idx];
+        }
+      }
+    }
     if (Array.isArray(a)) return a.map(resolve);
     return a;
   };
@@ -193,6 +203,29 @@ var init_safeJsx = __esm({
 });
 
 // src/stamps/geometry-2d/render.ts
+function containerDimsForBbox(bbox) {
+  const [xmin, ymax, xmax, ymin] = bbox;
+  const w = Math.abs(xmax - xmin);
+  const h = Math.abs(ymax - ymin);
+  if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
+    return { width: FALLBACK_W, height: FALLBACK_H };
+  }
+  let width = w * PIXELS_PER_UNIT;
+  let height = h * PIXELS_PER_UNIT;
+  const maxAxis = Math.max(width, height);
+  if (maxAxis > MAX_DIM) {
+    const ratio = MAX_DIM / maxAxis;
+    width *= ratio;
+    height *= ratio;
+  }
+  const minAxis = Math.min(width, height);
+  if (minAxis < MIN_DIM) {
+    const ratio = MIN_DIM / minAxis;
+    width *= ratio;
+    height *= ratio;
+  }
+  return { width: Math.round(width), height: Math.round(height) };
+}
 async function renderGeometrySvgFromState(jsonState) {
   const parsed = JSON.parse(jsonState);
   const palette = paletteFor(false);
@@ -215,10 +248,11 @@ async function renderGeometrySvgFromState(jsonState) {
       opts.grid.strokeColor = palette.grid;
     }
   });
+  const { width, height } = containerDimsForBbox(parsed.bbox);
   const container = document.createElement("div");
   const containerId = "jxg_offscreen_" + Date.now() + "_" + Math.random().toString(36).slice(2, 8);
   container.id = containerId;
-  container.style.cssText = "position:absolute;top:-99999px;left:-99999px;width:400px;height:300px;visibility:hidden;pointer-events:none;";
+  container.style.cssText = `position:absolute;top:-99999px;left:-99999px;width:${width}px;height:${height}px;visibility:hidden;pointer-events:none;`;
   document.body.appendChild(container);
   let board = null;
   try {
@@ -228,7 +262,7 @@ async function renderGeometrySvgFromState(jsonState) {
       grid: !!parsed.showGrid,
       showCopyright: false,
       showNavigation: false,
-      keepAspectRatio: false
+      keepAspectRatio: true
     });
     deserializeIntoBoard(board, parsed, { palette });
     board.update();
@@ -240,12 +274,18 @@ async function renderGeometrySvgFromState(jsonState) {
     if (container.parentNode) container.parentNode.removeChild(container);
   }
 }
+var PIXELS_PER_UNIT, MIN_DIM, MAX_DIM, FALLBACK_W, FALLBACK_H;
 var init_render = __esm({
   "src/stamps/geometry-2d/render.ts"() {
     init_renderInline();
     init_serialize();
     init_theme();
     init_safeJsx();
+    PIXELS_PER_UNIT = 20;
+    MIN_DIM = 100;
+    MAX_DIM = 1200;
+    FALLBACK_W = 400;
+    FALLBACK_H = 300;
   }
 });
 
@@ -342,8 +382,12 @@ function letterForGroup(g) {
 }
 function objKind(obj) {
   if (!obj) return "other";
+  const ec = typeof obj.elementClass === "number" ? obj.elementClass : null;
+  if (ec === 1) return "point";
+  if (ec === 2) return "line";
+  if (ec === 3) return "circle";
   const e = (obj.elType || obj.type || "").toString().toLowerCase();
-  if (e === "point" || e === "glider" || e === "midpoint") return "point";
+  if (e === "point" || e === "glider" || e === "midpoint" || e === "intersection" || e === "otherintersection" || e === "reflection" || e === "mirrorpoint" || e === "mirrorelement" || e === "orthogonalprojection" || e === "parallelpoint") return "point";
   if (e === "line" || e === "segment" || e === "arrow" || e === "axis" || e === "normal" || e === "parallel" || e === "perpendicular" || e === "tangent" || e === "bisector" || e === "perpendicularsegment") return "line";
   if (e === "circle" || e === "circumcircle") return "circle";
   return "other";
@@ -543,7 +587,7 @@ function handleDown(ctx, e) {
     if (!sc) return;
     const [sx, sy] = sc;
     const hits2 = ctx.objectsAt(e).map(ctx.promoteLabel).filter((o) => o !== ctx.axisObjsRef.current.x && o !== ctx.axisObjsRef.current.y);
-    const obj = hits2.find((o) => objKind(o) === "point") ?? hits2[0] ?? ctx.findNearestPoint(e, 12);
+    const obj = hits2.find((o) => objKind(o) === "point") ?? ctx.findNearestPoint(e, 12) ?? hits2[0];
     if (obj) {
       const shift = !!(e.shiftKey || e.altKey);
       ctx.toggleSelect(obj, shift);
@@ -786,7 +830,7 @@ function handleUp(ctx, e) {
   const moved = Math.hypot(sx - start.sx, sy - start.sy);
   if (moved > 4) return;
   const hits = ctx.objectsAt(e).map(ctx.promoteLabel).filter((o) => o !== ctx.axisObjsRef.current.x && o !== ctx.axisObjsRef.current.y);
-  const best = hits.find((o) => objKind(o) === "point") ?? hits[0] ?? ctx.findNearestPoint(e, 12);
+  const best = hits.find((o) => objKind(o) === "point") ?? ctx.findNearestPoint(e, 12) ?? hits[0];
   if (!best) {
     ctx.lastMoveClickRef.current = { obj: null, time: 0 };
     return;
@@ -925,8 +969,16 @@ var init_MiniBoard = __esm({
       const nextLocalId = React8.useCallback(() => "j" + creationLogRef.current.length, []);
       const resolveArgs = React8.useCallback((args) => {
         return args.map((a) => {
-          if (typeof a === "string" && objMapRef.current.has(a)) {
-            return objMapRef.current.get(a);
+          if (typeof a === "string") {
+            if (objMapRef.current.has(a)) return objMapRef.current.get(a);
+            const m = /^(.+):border:(\d+)$/.exec(a);
+            if (m) {
+              const poly = objMapRef.current.get(m[1]);
+              const idx = parseInt(m[2], 10);
+              if (poly && Array.isArray(poly.borders) && poly.borders[idx]) {
+                return poly.borders[idx];
+              }
+            }
           }
           return a;
         });
@@ -956,15 +1008,27 @@ var init_MiniBoard = __esm({
         [nextLocalId, resolveArgs, pushLog]
       );
       const localIdOf = React8.useCallback((obj) => {
+        if (!obj) return null;
         for (const [id, o] of objMapRef.current.entries()) {
           if (o === obj) return id;
         }
+        for (const [id, o] of objMapRef.current.entries()) {
+          const borders = o?.borders;
+          if (Array.isArray(borders)) {
+            const idx = borders.indexOf(obj);
+            if (idx >= 0) return `${id}:border:${idx}`;
+          }
+        }
         return null;
       }, []);
       const snapshotObject = React8.useCallback((obj, anchorScreen) => {
         const o = obj;
         const k = objKind(o);
         if (k !== "point" && k !== "line" && k !== "circle") return null;
+        for (const owner of objMapRef.current.values()) {
+          const borders = owner?.borders;
+          if (Array.isArray(borders) && borders.indexOf(o) >= 0) return null;
+        }
         const v = o.visProp ?? {};
         const showLabel = v.withlabel !== false;
         const showValue = valueLabelsRef.current.has(o);
@@ -1483,7 +1547,22 @@ var init_MiniBoard = __esm({
         const board = boardRef.current;
         if (!board) return false;
         const idMap = objMapRef.current;
-        const resolved = el.args.map((a) => typeof a === "string" && idMap.has(a) ? idMap.get(a) : a);
+        const resolve = (a) => {
+          if (typeof a === "string") {
+            if (idMap.has(a)) return idMap.get(a);
+            const m = /^(.+):border:(\d+)$/.exec(a);
+            if (m) {
+              const poly = idMap.get(m[1]);
+              const idx = parseInt(m[2], 10);
+              if (poly && Array.isArray(poly.borders) && poly.borders[idx]) {
+                return poly.borders[idx];
+              }
+            }
+          }
+          if (Array.isArray(a)) return a.map(resolve);
+          return a;
+        };
+        const resolved = el.args.map(resolve);
         try {
           if (el.type === "valueLabel") {
             const target = resolved[0];
@@ -2997,6 +3076,7 @@ var init_EditorPanel = __esm({
       function GeometryEditorPanel2({ initialState, onInsert, onClose, withLeftPanel = false, onStateChange, isDark, isMobile = false, onOpenDrawer, onUndo, onRedo, canUndo, canRedo }, ref) {
         const handleRef = React8.useRef(null);
         const [ready, setReady] = React8.useState(false);
+        const [hasContent, setHasContent] = React8.useState(false);
         const [propsPopover, setPropsPopover] = React8.useState(null);
         const [transformPopover, setTransformPopover] = React8.useState(null);
         const onStateChangeRef = React8.useRef(onStateChange);
@@ -3005,8 +3085,10 @@ var init_EditorPanel = __esm({
         }, [onStateChange]);
         const emitState = React8.useCallback(() => {
           const h = handleRef.current;
+          if (!h) return;
+          setHasContent(h.getCreationLog().length > 0);
           const cb = onStateChangeRef.current;
-          if (!h || !cb) return;
+          if (!cb) return;
           cb({
             tool: h.getTool(),
             showAxis: h.getShowAxis(),
@@ -3136,7 +3218,8 @@ var init_EditorPanel = __esm({
                     {
                       type: "button",
                       onClick: handleInsert,
-                      disabled: !ready,
+                      disabled: !ready || !hasContent,
+                      title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
                       "data-testid": "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"
@@ -3236,7 +3319,8 @@ var init_EditorPanel = __esm({
                     "button",
                     {
                       onClick: handleInsert,
-                      disabled: !ready,
+                      disabled: !ready || !hasContent,
+                      title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
                       "data-testid": "geometry-insert-btn",
                       className: "rounded bg-emerald-600 px-3 py-1 text-xs font-medium text-white transition hover:bg-emerald-700 disabled:opacity-50",
                       children: "Ch\xE8n"
@@ -4213,6 +4297,108 @@ var init_theme2 = __esm({
   }
 });
 
+// src/stamps/geometry-3d/render.ts
+async function renderGeometry3DSvgFromState(jsonState) {
+  const state = parseSerializedBoard3D(jsonState);
+  const JXG = (await import('jsxgraph')).default;
+  const div = document.createElement("div");
+  div.style.cssText = `position:absolute;left:-9999px;top:-9999px;width:${OUTPUT_WIDTH}px;height:${OUTPUT_HEIGHT}px;`;
+  document.body.appendChild(div);
+  try {
+    JXG.Options.text.display = "internal";
+    const board = JXG.JSXGraph.initBoard(div, {
+      boundingbox: state.bbox,
+      keepaspectratio: true,
+      axis: false,
+      showCopyright: false,
+      showNavigation: false,
+      renderer: "svg"
+    });
+    const baseAttrs = VIEW3D_ATTRS(false);
+    const view = board.create(
+      "view3d",
+      [
+        [-5, -5],
+        [10, 10],
+        [
+          [state.view.bbox3D[0], state.view.bbox3D[3]],
+          [state.view.bbox3D[1], state.view.bbox3D[4]],
+          [state.view.bbox3D[2], state.view.bbox3D[5]]
+        ]
+      ],
+      {
+        ...baseAttrs,
+        // JSXGraph view3d đọc azimuth/elevation từ az.slider.start (không phải
+        // az.value). Nếu pass `value` → JSXGraph bỏ qua → render rơi về default
+        // (1.0 rad / 0.3 rad), không khớp góc user xoay trong editor.
+        az: { ...baseAttrs.az, slider: { ...baseAttrs.az.slider, start: state.view.azimuth } },
+        el: { ...baseAttrs.el, slider: { ...baseAttrs.el.slider, start: state.view.elevation } }
+      }
+    );
+    try {
+      const v = view;
+      v?.az_slide?.setValue?.(state.view.azimuth);
+      v?.el_slide?.setValue?.(state.view.elevation);
+      v?.board?.update?.();
+    } catch {
+    }
+    if (!state.showAxes) {
+      view.defaultAxes = [];
+    }
+    try {
+      view.create(
+        "plane3d",
+        [
+          [0, 0, 0],
+          [1, 0, 0],
+          [0, 1, 0],
+          GROUND_PLANE_RANGE,
+          GROUND_PLANE_RANGE
+        ],
+        GROUND_PLANE_ATTRS(false)
+      );
+    } catch {
+    }
+    const idMap = /* @__PURE__ */ new Map();
+    for (const el of state.elements) {
+      const parents = el.parents.map(
+        (p) => typeof p === "string" && p.startsWith("@id:") ? idMap.get(p.slice(4)) : p
+      );
+      const obj = view.create(el.type, parents, {
+        ...el.attributes,
+        id: el.id,
+        name: el.label
+      });
+      idMap.set(el.id, obj);
+    }
+    const svg = div.querySelector("svg");
+    if (!svg) {
+      throw new Error("renderGeometry3DSvgFromState: SVG not produced");
+    }
+    const clone = svg.cloneNode(true);
+    clone.setAttribute("width", String(OUTPUT_WIDTH));
+    clone.setAttribute("height", String(OUTPUT_HEIGHT));
+    const svgString = new XMLSerializer().serializeToString(clone);
+    try {
+      JXG.JSXGraph.freeBoard(board);
+    } catch {
+    }
+    return { svgString, width: OUTPUT_WIDTH, height: OUTPUT_HEIGHT };
+  } finally {
+    document.body.removeChild(div);
+  }
+}
+var OUTPUT_WIDTH, OUTPUT_HEIGHT;
+var init_render3 = __esm({
+  "src/stamps/geometry-3d/render.ts"() {
+    "use client";
+    init_serialize2();
+    init_theme2();
+    OUTPUT_WIDTH = 1024;
+    OUTPUT_HEIGHT = 768;
+  }
+});
+
 // src/stamps/geometry-3d/editor/tools/handlers/_ensurePoint.ts
 function hitToConstraint(hit) {
   switch (hit.kind) {
@@ -5614,8 +5800,11 @@ var init_MiniBoard3D = __esm({
                 ],
                 {
                   ...baseAttrs,
-                  az: { ...baseAttrs.az, value: DEFAULT_VIEW3D.azimuth },
-                  el: { ...baseAttrs.el, value: DEFAULT_VIEW3D.elevation }
+                  // JSXGraph view3d đọc giá trị khởi tạo từ az.slider.start (không
+                  // phải az.value). Pass nhầm `value` → JSXGraph dùng default
+                  // 1.0/0.3, khiến DEFAULT_VIEW3D bị bỏ qua.
+                  az: { ...baseAttrs.az, slider: { ...baseAttrs.az.slider, start: DEFAULT_VIEW3D.azimuth } },
+                  el: { ...baseAttrs.el, slider: { ...baseAttrs.el.slider, start: DEFAULT_VIEW3D.elevation } }
                 }
               );
             } catch {
@@ -6252,6 +6441,7 @@ var init_EditorPanel2 = __esm({
     init_ensurePoint();
     init_MiniBoard3D();
     init_StatusHint();
+    init_theme2();
     init_persistence();
     EditorPanel = React8__namespace.forwardRef(
       function EditorPanel2(props, ref) {
@@ -6357,8 +6547,17 @@ var init_EditorPanel2 = __esm({
         }, [showAxis, showGrid]);
         const handleView3DReady = React8__namespace.useCallback((view) => {
           rendererRef.current = new JxgRenderer(scene, view);
+          if (initialState) {
+            try {
+              const v = view;
+              v?.az_slide?.setValue?.(initialState.view.azimuth);
+              v?.el_slide?.setValue?.(initialState.view.elevation);
+              v?.board?.update?.();
+            } catch {
+            }
+          }
           onReadyChange?.(true);
-        }, [onReadyChange, scene]);
+        }, [onReadyChange, scene, initialState]);
         const handleClick = React8__namespace.useCallback((screen) => {
           const board = boardRef.current;
           if (!board) return;
@@ -6496,8 +6695,10 @@ var init_EditorPanel2 = __esm({
               const elevation = typeof elSlider?.Value === "function" ? elSlider.Value() : 0;
               return sceneToBoard(
                 scene,
-                { azimuth, elevation, bbox3D: [-5, -5, -5, 5, 5, 5] },
-                [-6, -6, 6, 6]
+                { azimuth, elevation, bbox3D: [...DEFAULT_VIEW3D.bbox3D] },
+                // JSXGraph boundingbox order: [xmin, ymax, xmax, ymin]. Must match
+                // MiniBoard3D.initBoard so render reproduces the editor's view.
+                [-6, 6, 6, -6]
               );
             },
             setTool: (k) => controllerRef.current.selectTool(k),
@@ -7406,6 +7607,7 @@ var init_host3 = __esm({
     init_useChordShortcut();
     init_insertImage();
     init_useIsMobile();
+    init_render3();
     init_serialize2();
     Geometry3DStampHost = React8.forwardRef(
       function Geometry3DStampHost2({ api, editingElement, onClose, isDark }, ref) {
@@ -7420,10 +7622,25 @@ var init_host3 = __esm({
         const [showGrid, setShowGrid] = React8.useState(true);
         const [canUndo, setCanUndo] = React8.useState(false);
         const [canRedo, setCanRedo] = React8.useState(false);
+        const [hasContent, setHasContent] = React8.useState(false);
         const handleHistoryChange = React8.useCallback((u, r) => {
           setCanUndo(u);
           setCanRedo(r);
         }, []);
+        React8.useEffect(() => {
+          const scene = sceneRef.current;
+          if (!scene) return;
+          const sync = () => setHasContent(scene.list().length > 0);
+          sync();
+          const unsubs = [
+            scene.on("add", sync),
+            scene.on("delete", sync),
+            scene.on("reset", sync)
+          ];
+          return () => {
+            for (const u of unsubs) u();
+          };
+        }, []);
         const handleUndo = React8.useCallback(() => {
           editorRef.current?.undo();
         }, []);
@@ -7471,7 +7688,15 @@ var init_host3 = __esm({
           if (!editorRef.current.hasContent()) return false;
           const board = editorRef.current.serialize();
           if (board.elements.length === 0) return false;
-          void performInsert(board, 0, 0, "");
+          void (async () => {
+            try {
+              const jsonState = serializeBoard3D(board);
+              const { svgString, width, height } = await renderGeometry3DSvgFromState(jsonState);
+              await performInsert(board, width, height, svgString);
+            } catch (err) {
+              console.error("Geometry3D insert failed:", err);
+            }
+          })();
           return true;
         }, [performInsert]);
         React8.useImperativeHandle(
@@ -7553,7 +7778,8 @@ var init_host3 = __esm({
                     {
                       type: "button",
                       onClick: tryInsert,
-                      disabled: !ready,
+                      disabled: !ready || !hasContent,
+                      title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
                       "data-testid": "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"
@@ -7603,7 +7829,8 @@ var init_host3 = __esm({
                       "button",
                       {
                         onClick: tryInsert,
-                        disabled: !ready,
+                        disabled: !ready || !hasContent,
+                        title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
                         "data-testid": "geom3d-insert-btn",
                         className: "rounded bg-emerald-600 px-3 py-1 text-xs font-medium text-white transition hover:bg-emerald-700 disabled:opacity-50",
                         children: "Ch\xE8n"
@@ -8276,7 +8503,7 @@ async function renderGraph2dSvgFromState(jsonState) {
     if (container.parentNode) container.parentNode.removeChild(container);
   }
 }
-var init_render3 = __esm({
+var init_render4 = __esm({
   "src/stamps/graph-2d/render.ts"() {
     init_serialize3();
     init_renderObjects();
@@ -8964,7 +9191,7 @@ var init_EditorPanel3 = __esm({
     init_MiniBoard2();
     init_serialize3();
     init_parser();
-    init_render3();
+    init_render4();
     init_colors();
     init_handlers2();
     GraphEditorPanel = React8.forwardRef(function GraphEditorPanel2(props, ref) {
@@ -9539,91 +9766,7 @@ var latexStamp = {
 
 // src/stamps/geometry-3d/index.tsx
 init_serialize2();
-
-// src/stamps/geometry-3d/render.ts
-init_serialize2();
-init_theme2();
-var OUTPUT_WIDTH = 1024;
-var OUTPUT_HEIGHT = 768;
-async function renderGeometry3DSvgFromState(jsonState) {
-  const state = parseSerializedBoard3D(jsonState);
-  const JXG = (await import('jsxgraph')).default;
-  const div = document.createElement("div");
-  div.style.cssText = `position:absolute;left:-9999px;top:-9999px;width:${OUTPUT_WIDTH}px;height:${OUTPUT_HEIGHT}px;`;
-  document.body.appendChild(div);
-  try {
-    JXG.Options.text.display = "internal";
-    const board = JXG.JSXGraph.initBoard(div, {
-      boundingbox: state.bbox,
-      axis: false,
-      showCopyright: false,
-      showNavigation: false,
-      renderer: "svg"
-    });
-    const baseAttrs = VIEW3D_ATTRS(false);
-    const view = board.create(
-      "view3d",
-      [
-        [-5, -5],
-        [10, 10],
-        [
-          [state.view.bbox3D[0], state.view.bbox3D[3]],
-          [state.view.bbox3D[1], state.view.bbox3D[4]],
-          [state.view.bbox3D[2], state.view.bbox3D[5]]
-        ]
-      ],
-      {
-        ...baseAttrs,
-        az: { ...baseAttrs.az, value: state.view.azimuth },
-        el: { ...baseAttrs.el, value: state.view.elevation }
-      }
-    );
-    if (!state.showAxes) {
-      view.defaultAxes = [];
-    }
-    try {
-      view.create(
-        "plane3d",
-        [
-          [0, 0, 0],
-          [1, 0, 0],
-          [0, 1, 0],
-          GROUND_PLANE_RANGE,
-          GROUND_PLANE_RANGE
-        ],
-        GROUND_PLANE_ATTRS(false)
-      );
-    } catch {
-    }
-    const idMap = /* @__PURE__ */ new Map();
-    for (const el of state.elements) {
-      const parents = el.parents.map(
-        (p) => typeof p === "string" && p.startsWith("@id:") ? idMap.get(p.slice(4)) : p
-      );
-      const obj = view.create(el.type, parents, {
-        ...el.attributes,
-        id: el.id,
-        name: el.label
-      });
-      idMap.set(el.id, obj);
-    }
-    const svg = div.querySelector("svg");
-    if (!svg) {
-      throw new Error("renderGeometry3DSvgFromState: SVG not produced");
-    }
-    const clone = svg.cloneNode(true);
-    clone.setAttribute("width", String(OUTPUT_WIDTH));
-    clone.setAttribute("height", String(OUTPUT_HEIGHT));
-    const svgString = new XMLSerializer().serializeToString(clone);
-    try {
-      JXG.JSXGraph.freeBoard(board);
-    } catch {
-    }
-    return { svgString, width: OUTPUT_WIDTH, height: OUTPUT_HEIGHT };
-  } finally {
-    document.body.removeChild(div);
-  }
-}
+init_render3();
 var Geometry3DStampHost3 = React8.lazy(
   () => Promise.resolve().then(() => (init_host3(), host_exports3)).then((m) => ({ default: m.Geometry3DStampHost }))
 );
@@ -9679,7 +9822,7 @@ var geometry3dStamp = {
 };
 
 // src/stamps/graph-2d/index.tsx
-init_render3();
+init_render4();
 init_types3();
 var Graph2DStampHost3 = React8.lazy(
   () => Promise.resolve().then(() => (init_host4(), host_exports4)).then((m) => ({ default: m.Graph2DStampHost }))
@@ -9846,20 +9989,28 @@ function ToolbarInjector({
   };
   return 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);
-            closePopover();
+      stamps.map((stamp) => {
+        const { displayLabel, shortcut } = splitTitleAndShortcut(
+          stamp.toolbarTitle,
+          stamp.toolbarLabel
+        );
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          StampMenuItem,
+          {
+            icon: stamp.toolbarIcon,
+            label: displayLabel,
+            ariaLabel: stamp.toolbarTitle,
+            shortcut,
+            active: activeStampKind === stamp.kind,
+            onClick: () => {
+              onToggle(stamp.kind);
+              closePopover();
+            },
+            dataTestId: stamp.toolbarTestId
           },
-          dataTestId: stamp.toolbarTestId
-        },
-        stamp.kind
-      )),
+          stamp.kind
+        );
+      }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -9875,7 +10026,22 @@ function ToolbarInjector({
     menuMount
   );
 }
-function StampMenuItem({ icon, label, active, onClick, dataTestId }) {
+function splitTitleAndShortcut(title, fallbackShortcut) {
+  const match = title.match(/^(.*?)\s*\(([^()]+)\)\s*$/);
+  if (match) {
+    return { displayLabel: match[1].trim(), shortcut: match[2].trim() };
+  }
+  return { displayLabel: title, shortcut: fallbackShortcut };
+}
+function StampMenuItem({
+  icon,
+  label,
+  ariaLabel,
+  shortcut,
+  active,
+  onClick,
+  dataTestId
+}) {
   const className = [
     "dropdown-menu-item",
     "dropdown-menu-item-base",
@@ -9886,39 +10052,15 @@ function StampMenuItem({ icon, label, active, onClick, dataTestId }) {
     {
       type: "button",
       onClick,
-      "aria-label": label,
+      title: ariaLabel,
+      "aria-label": ariaLabel,
       "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 })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dropdown-menu-item__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dropdown-menu-item__text", children: label }),
+        shortcut ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dropdown-menu-item__shortcut", children: shortcut }) : null
       ]
     }
   );
@@ -9952,29 +10094,866 @@ function useShortcuts({
     return () => window.removeEventListener("keydown", handler, { capture: true });
   }, [enabled, onToggle, stamps]);
 }
-var DOUBLE_CLICK_MS = 400;
-function useStampDoubleClick({ enabled, stamps, onOpen }) {
-  const lastClickRef = React8.useRef({
-    time: 0,
-    elementId: null
-  });
-  return React8.useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (_activeTool, pointerDownState) => {
-      if (!enabled) return;
-      const hitElement = pointerDownState?.hit?.element;
-      if (!hitElement || hitElement.type !== "image") return;
-      const stamp = findStampForCustomData(hitElement.customData, stamps);
-      if (!stamp) return;
-      const now = Date.now();
-      const isDouble = lastClickRef.current.elementId === hitElement.id && now - lastClickRef.current.time < DOUBLE_CLICK_MS;
-      lastClickRef.current = { time: now, elementId: hitElement.id };
-      if (!isDouble) return;
-      onOpen(stamp.kind, {
-        id: hitElement.id,
-        customData: hitElement.customData
-      });
-    },
+var WRAPPER_ID = "pdf-import-portal-wrapper";
+var POPOVER_SELECTOR2 = ".App-toolbar__extra-tools-dropdown .dropdown-menu-container";
+function PdfImporterButton({ enabled, onPick }) {
+  const [mount, setMount] = React8.useState(null);
+  const mountRef = React8.useRef(null);
+  const inputRef = React8.useRef(null);
+  React8.useEffect(() => {
+    if (!enabled) {
+      mountRef.current = null;
+      setMount(null);
+      document.getElementById(WRAPPER_ID)?.remove();
+      return;
+    }
+    let cancelled = false;
+    let observer = null;
+    let rafId = null;
+    let observedRoot = null;
+    const apply = (next) => {
+      if (cancelled || mountRef.current === next) return;
+      mountRef.current = next;
+      queueMicrotask(() => {
+        if (!cancelled) setMount(next);
+      });
+    };
+    const findMenu = () => {
+      if (cancelled) return;
+      const container = document.querySelector(POPOVER_SELECTOR2);
+      if (!container) {
+        apply(null);
+        return;
+      }
+      let wrapper = container.querySelector("#" + WRAPPER_ID);
+      if (!wrapper) {
+        wrapper = document.createElement("div");
+        wrapper.id = WRAPPER_ID;
+        wrapper.setAttribute("data-pdf-import", "true");
+        wrapper.style.display = "contents";
+        container.appendChild(wrapper);
+      }
+      apply(wrapper);
+    };
+    const attachObserver = () => {
+      if (cancelled) return;
+      const excalidraw = document.querySelector(".excalidraw");
+      const nextRoot = excalidraw ?? document.body;
+      if (observedRoot === nextRoot) return;
+      observer?.disconnect();
+      observedRoot = nextRoot;
+      observer = new MutationObserver(onMutation);
+      observer.observe(nextRoot, { childList: true, subtree: true });
+    };
+    const onMutation = () => {
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (cancelled) return;
+        if (observedRoot !== document.querySelector(".excalidraw")) {
+          attachObserver();
+        }
+        findMenu();
+      });
+    };
+    findMenu();
+    attachObserver();
+    return () => {
+      cancelled = true;
+      if (rafId != null) cancelAnimationFrame(rafId);
+      observer?.disconnect();
+      document.getElementById(WRAPPER_ID)?.remove();
+    };
+  }, [enabled]);
+  const closePopover = () => {
+    const trigger = document.querySelector(
+      ".App-toolbar__extra-tools-trigger"
+    );
+    trigger?.click();
+  };
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file) onPick(file);
+    e.target.value = "";
+    closePopover();
+  };
+  if (!enabled || !mount) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "application/pdf,.pdf",
+        style: { display: "none" },
+        onChange: handleFileChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "application/pdf,.pdf",
+        style: { display: "none" },
+        onChange: handleFileChange
+      }
+    ),
+    reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleClick,
+          title: "Ch\xE8n PDF (P)",
+          "aria-label": "Ch\xE8n PDF",
+          "data-testid": "pdf-import-button",
+          className: "dropdown-menu-item dropdown-menu-item-base",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dropdown-menu-item__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(PdfIcon, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dropdown-menu-item__text", children: "Ch\xE8n PDF" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dropdown-menu-item__shortcut", children: "P" })
+          ]
+        }
+      ),
+      mount
+    )
+  ] });
+}
+function PdfIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      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: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 3v5h5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x: "7.5", y: "17", fontSize: "6", fontFamily: "sans-serif", fontWeight: "700", stroke: "none", fill: "currentColor", children: "PDF" })
+      ]
+    }
+  );
+}
+
+// src/pdf/parseRange.ts
+function parsePageRange(input, totalPages) {
+  if (!Number.isInteger(totalPages) || totalPages <= 0) {
+    throw new Error("S\u1ED1 trang ph\u1EA3i l\xE0 s\u1ED1 nguy\xEAn d\u01B0\u01A1ng.");
+  }
+  const trimmed = input.trim();
+  if (trimmed === "") return [];
+  const tokens = trimmed.split(/[,\s]+/).map((t) => t.trim()).filter((t) => t.length > 0);
+  const set = /* @__PURE__ */ new Set();
+  for (const token of tokens) {
+    if (token.includes("-")) {
+      const parts = token.split("-");
+      if (parts.length !== 2) {
+        throw new Error(`Kho\u1EA3ng trang kh\xF4ng h\u1EE3p l\u1EC7: "${token}".`);
+      }
+      const start = parseStrictInt(parts[0]);
+      const end = parseStrictInt(parts[1]);
+      if (start === null || end === null) {
+        throw new Error(`Kho\u1EA3ng trang kh\xF4ng h\u1EE3p l\u1EC7: "${token}".`);
+      }
+      if (start > end) {
+        throw new Error(`Kho\u1EA3ng trang ng\u01B0\u1EE3c: "${token}" (\u0111\u1EA7u > cu\u1ED1i).`);
+      }
+      if (start < 1 || end > totalPages) {
+        throw new Error(
+          `Kho\u1EA3ng trang v\u01B0\u1EE3t gi\u1EDBi h\u1EA1n: "${token}". PDF c\xF3 ${totalPages} trang.`
+        );
+      }
+      for (let i = start; i <= end; i++) set.add(i);
+    } else {
+      const n = parseStrictInt(token);
+      if (n === null) {
+        throw new Error(`S\u1ED1 trang kh\xF4ng h\u1EE3p l\u1EC7: "${token}".`);
+      }
+      if (n < 1 || n > totalPages) {
+        throw new Error(
+          `S\u1ED1 trang v\u01B0\u1EE3t gi\u1EDBi h\u1EA1n: ${n}. PDF c\xF3 ${totalPages} trang.`
+        );
+      }
+      set.add(n);
+    }
+  }
+  return Array.from(set).sort((a, b) => a - b);
+}
+function parseStrictInt(s) {
+  if (!/^-?\d+$/.test(s)) return null;
+  const n = Number(s);
+  return Number.isInteger(n) ? n : null;
+}
+
+// src/pdf/rasterize.ts
+var workerSrcOverride = null;
+var pdfjsCache = null;
+function configurePdfWorker(workerSrc) {
+  workerSrcOverride = workerSrc;
+  if (pdfjsCache) {
+    pdfjsCache.GlobalWorkerOptions.workerSrc = workerSrc;
+  }
+}
+async function loadPdfjs() {
+  if (pdfjsCache) return pdfjsCache;
+  const mod = await import('pdfjs-dist');
+  const workerSrc = workerSrcOverride ?? `https://cdn.jsdelivr.net/npm/pdfjs-dist@${mod.version}/build/pdf.worker.min.mjs`;
+  mod.GlobalWorkerOptions.workerSrc = workerSrc;
+  pdfjsCache = mod;
+  return mod;
+}
+async function loadPdfDocument(source) {
+  const pdfjs = await loadPdfjs();
+  const data = source instanceof ArrayBuffer ? source : await source.arrayBuffer();
+  const task = pdfjs.getDocument({ data: new Uint8Array(data) });
+  return task.promise;
+}
+async function closePdfDocument(doc) {
+  try {
+    await doc.cleanup();
+    await doc.destroy();
+  } catch {
+  }
+}
+async function rasterizePdf(doc, options = {}) {
+  const scale3 = options.scale ?? 2;
+  const total = doc.numPages;
+  const pages = options.pages ?? Array.from({ length: total }, (_, i) => i + 1);
+  const signal = options.signal;
+  const result = [];
+  for (let i = 0; i < pages.length; i++) {
+    if (signal?.aborted) {
+      throw new DOMException("Rasterize PDF b\u1ECB hu\u1EF7.", "AbortError");
+    }
+    const pageNum = pages[i];
+    const page = await doc.getPage(pageNum);
+    try {
+      const rendered = await renderPageToPng(page, scale3);
+      result.push({ pageNumber: pageNum, mimeType: "image/png", ...rendered });
+    } finally {
+      page.cleanup();
+    }
+    options.onProgress?.(i + 1, pages.length);
+  }
+  return result;
+}
+async function renderPageToPng(page, scale3) {
+  const viewport = page.getViewport({ scale: scale3 });
+  const width = Math.ceil(viewport.width);
+  const height = Math.ceil(viewport.height);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Kh\xF4ng l\u1EA5y \u0111\u01B0\u1EE3c 2D context c\u1EE7a canvas.");
+  await page.render({ canvasContext: ctx, viewport, canvas }).promise;
+  const dataURL = canvas.toDataURL("image/png");
+  return { dataURL, width, height };
+}
+async function renderPageThumbnail(page, scale3 = 0.3, quality = 0.7) {
+  const viewport = page.getViewport({ scale: scale3 });
+  const width = Math.ceil(viewport.width);
+  const height = Math.ceil(viewport.height);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Kh\xF4ng l\u1EA5y \u0111\u01B0\u1EE3c 2D context c\u1EE7a canvas.");
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, width, height);
+  await page.render({ canvasContext: ctx, viewport, canvas }).promise;
+  const dataURL = canvas.toDataURL("image/jpeg", quality);
+  return { dataURL, width, height };
+}
+async function renderAllThumbnails(doc, onEach, options = {}) {
+  const total = doc.numPages;
+  const scale3 = options.scale ?? 0.3;
+  const quality = options.quality ?? 0.7;
+  const concurrency = Math.max(1, options.concurrency ?? 3);
+  const signal = options.signal;
+  let next = 1;
+  async function worker() {
+    while (true) {
+      if (signal?.aborted) return;
+      const pageNum = next++;
+      if (pageNum > total) return;
+      const page = await doc.getPage(pageNum);
+      try {
+        if (signal?.aborted) return;
+        const { dataURL, width, height } = await renderPageThumbnail(page, scale3, quality);
+        if (signal?.aborted) return;
+        onEach(pageNum, dataURL, width, height);
+      } finally {
+        page.cleanup();
+      }
+    }
+  }
+  await Promise.all(
+    Array.from({ length: Math.min(concurrency, total) }, () => worker())
+  );
+}
+function serializeSelection(pages) {
+  if (pages.length === 0) return "";
+  const sorted = [...pages].sort((a, b) => a - b);
+  const groups = [];
+  let start = sorted[0];
+  let prev = start;
+  for (let i = 1; i < sorted.length; i++) {
+    const n = sorted[i];
+    if (n === prev + 1) {
+      prev = n;
+    } else {
+      groups.push(start === prev ? `${start}` : `${start}-${prev}`);
+      start = n;
+      prev = n;
+    }
+  }
+  groups.push(start === prev ? `${start}` : `${start}-${prev}`);
+  return groups.join(",");
+}
+function PageRangeDialog({ doc, fileName, onConfirm, onCancel }) {
+  const totalPages = doc.numPages;
+  const defaultPages = React8.useMemo(
+    () => Array.from({ length: totalPages }, (_, i) => i + 1),
+    [totalPages]
+  );
+  const [selectedSet, setSelectedSet] = React8.useState(
+    () => new Set(defaultPages)
+  );
+  const [inputValue, setInputValue] = React8.useState(serializeSelection(defaultPages));
+  const [inputError, setInputError] = React8.useState(null);
+  const [thumbs, setThumbs] = React8.useState({});
+  const [thumbProgress, setThumbProgress] = React8.useState(0);
+  const inputRef = React8.useRef(null);
+  React8.useEffect(() => {
+    const ctrl = new AbortController();
+    void renderAllThumbnails(
+      doc,
+      (pageNum, dataURL, width, height) => {
+        setThumbs((prev) => ({ ...prev, [pageNum]: { dataURL, width, height } }));
+        setThumbProgress((prev) => prev + 1);
+      },
+      { scale: 0.3, quality: 0.7, concurrency: 3, signal: ctrl.signal }
+    ).catch((err) => {
+      if (ctrl.signal.aborted) return;
+      console.warn("[PageRangeDialog] render thumbnails l\u1ED7i:", err);
+    });
+    return () => ctrl.abort();
+  }, [doc]);
+  React8.useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        onCancel();
+      }
+    };
+    window.addEventListener("keydown", onKey, { capture: true });
+    return () => window.removeEventListener("keydown", onKey, { capture: true });
+  }, [onCancel]);
+  const handleInputChange = (next) => {
+    setInputValue(next);
+    try {
+      const pages = parsePageRange(next, totalPages);
+      setInputError(null);
+      setSelectedSet(new Set(pages));
+    } catch (e) {
+      setInputError(e.message);
+    }
+  };
+  const toggleThumb = (pageNum) => {
+    setSelectedSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(pageNum)) next.delete(pageNum);
+      else next.add(pageNum);
+      const serialized = serializeSelection([...next]);
+      setInputValue(serialized);
+      setInputError(null);
+      return next;
+    });
+  };
+  const selectAll = () => {
+    setSelectedSet(new Set(defaultPages));
+    setInputValue(serializeSelection(defaultPages));
+    setInputError(null);
+  };
+  const clearAll = () => {
+    setSelectedSet(/* @__PURE__ */ new Set());
+    setInputValue("");
+    setInputError(null);
+  };
+  const canSubmit = inputError === null && selectedSet.size > 0;
+  const sortedSelected = React8.useMemo(
+    () => [...selectedSet].sort((a, b) => a - b),
+    [selectedSet]
+  );
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+    onConfirm(sortedSelected);
+  };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "pdf-range-title",
+        style: {
+          position: "fixed",
+          inset: 0,
+          background: "rgba(0,0,0,0.55)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1e4
+        },
+        onClick: (e) => {
+          if (e.target === e.currentTarget) onCancel();
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              background: "var(--popup-bg-color, #fff)",
+              color: "var(--text-primary-color, #1b1b1f)",
+              borderRadius: 12,
+              padding: "20px 22px",
+              width: "min(880px, 92vw)",
+              maxHeight: "88vh",
+              boxShadow: "0 12px 40px rgba(0,0,0,0.3)",
+              fontFamily: "inherit",
+              display: "flex",
+              flexDirection: "column",
+              gap: 12
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    id: "pdf-range-title",
+                    style: { margin: 0, fontSize: 16, fontWeight: 600, lineHeight: 1.3 },
+                    children: "Ch\xE8n PDF"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: "4px 0 0", fontSize: 12, opacity: 0.7 }, children: [
+                  fileName,
+                  " \u2014 ",
+                  totalPages,
+                  " trang",
+                  thumbProgress < totalPages && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    " \xB7 \u0111ang t\u1EA3i preview ",
+                    thumbProgress,
+                    "/",
+                    totalPages,
+                    "\u2026"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 10 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "label",
+                    {
+                      style: { display: "block", fontSize: 12, marginBottom: 4, opacity: 0.75 },
+                      children: "Trang c\u1EA7n ch\xE8n (vd: 1,3,5-10) \u2014 ho\u1EB7c click thumbnail b\xEAn d\u01B0\u1EDBi"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ref: inputRef,
+                      type: "text",
+                      value: inputValue,
+                      onChange: (e) => handleInputChange(e.target.value),
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          handleSubmit();
+                        }
+                      },
+                      style: {
+                        width: "100%",
+                        boxSizing: "border-box",
+                        padding: "8px 10px",
+                        fontSize: 14,
+                        borderRadius: 6,
+                        border: `1px solid ${inputError ? "#dc2626" : "rgba(0,0,0,0.2)"}`,
+                        outline: "none",
+                        background: "var(--input-bg-color, #fff)",
+                        color: "inherit",
+                        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, paddingTop: 18 }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: selectAll,
+                      style: quickBtnStyle,
+                      title: "Ch\u1ECDn t\u1EA5t c\u1EA3 trang",
+                      children: "T\u1EA5t c\u1EA3"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: clearAll,
+                      style: quickBtnStyle,
+                      title: "B\u1ECF ch\u1ECDn t\u1EA5t c\u1EA3",
+                      children: "B\u1ECF h\u1EBFt"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: 18, fontSize: 12 }, "data-testid": "pdf-range-status", children: inputError ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#dc2626" }, children: inputError }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { opacity: 0.75 }, children: [
+                "\u0110\xE3 ch\u1ECDn ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: selectedSet.size }),
+                " / ",
+                totalPages,
+                " trang"
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    minHeight: 240,
+                    maxHeight: "60vh",
+                    overflow: "auto",
+                    padding: 8,
+                    background: "rgba(0,0,0,0.04)",
+                    borderRadius: 8,
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+                    gap: 10,
+                    alignContent: "start"
+                  },
+                  children: Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => {
+                    const thumb = thumbs[pageNum];
+                    const selected = selectedSet.has(pageNum);
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      ThumbnailItem,
+                      {
+                        pageNum,
+                        thumb,
+                        selected,
+                        onToggle: () => toggleThumb(pageNum)
+                      },
+                      pageNum
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    gap: 8,
+                    paddingTop: 4
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onCancel,
+                        style: {
+                          padding: "8px 14px",
+                          fontSize: 13,
+                          borderRadius: 6,
+                          border: "1px solid rgba(0,0,0,0.15)",
+                          background: "transparent",
+                          color: "inherit",
+                          cursor: "pointer"
+                        },
+                        children: "Hu\u1EF7"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: handleSubmit,
+                        disabled: !canSubmit,
+                        style: {
+                          padding: "8px 16px",
+                          fontSize: 13,
+                          borderRadius: 6,
+                          border: "none",
+                          background: canSubmit ? "#4f46e5" : "rgba(0,0,0,0.15)",
+                          color: "#fff",
+                          cursor: canSubmit ? "pointer" : "not-allowed",
+                          fontWeight: 500
+                        },
+                        children: [
+                          "Ch\xE8n ",
+                          selectedSet.size > 0 ? `${selectedSet.size} trang` : ""
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+var quickBtnStyle = {
+  padding: "7px 10px",
+  fontSize: 12,
+  borderRadius: 6,
+  border: "1px solid rgba(0,0,0,0.15)",
+  background: "transparent",
+  color: "inherit",
+  cursor: "pointer",
+  whiteSpace: "nowrap"
+};
+function ThumbnailItem({ pageNum, thumb, selected, onToggle }) {
+  const aspect = thumb ? thumb.width / thumb.height : 0.77;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      "aria-pressed": selected,
+      "aria-label": `Trang ${pageNum}${selected ? " (\u0111\xE3 ch\u1ECDn)" : ""}`,
+      title: `Trang ${pageNum}`,
+      style: {
+        position: "relative",
+        padding: 0,
+        background: "#fff",
+        border: `2px solid ${selected ? "#4f46e5" : "rgba(0,0,0,0.12)"}`,
+        borderRadius: 6,
+        overflow: "hidden",
+        cursor: "pointer",
+        boxShadow: selected ? "0 0 0 3px rgba(79,70,229,0.18)" : "none",
+        transition: "border-color 80ms ease, box-shadow 80ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              aspectRatio: aspect.toString(),
+              background: "#f5f5f5",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: thumb ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: thumb.dataURL,
+                  alt: "",
+                  style: { width: "100%", height: "100%", display: "block", objectFit: "contain" },
+                  draggable: false
+                }
+              )
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, opacity: 0.5 }, children: "\u2026" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 4,
+              left: 4,
+              fontSize: 10,
+              fontWeight: 600,
+              padding: "2px 6px",
+              borderRadius: 4,
+              background: selected ? "#4f46e5" : "rgba(0,0,0,0.6)",
+              color: "#fff"
+            },
+            children: pageNum
+          }
+        ),
+        selected && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              top: 4,
+              right: 4,
+              width: 18,
+              height: 18,
+              borderRadius: "50%",
+              background: "#4f46e5",
+              color: "#fff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 11,
+              fontWeight: 700,
+              boxShadow: "0 1px 3px rgba(0,0,0,0.3)"
+            },
+            children: "\u2713"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/pdf/insertPdfPages.ts
+var PAGE_GAP = 24;
+var DEFAULT_SCALE = 2;
+function insertRasterizedPagesIntoScene(api, rendered, options) {
+  if (!api) throw new Error("Excalidraw API ch\u01B0a s\u1EB5n s\xE0ng.");
+  if (rendered.length === 0) return { insertedElementIds: [], fileIds: [] };
+  const { scale: scale3 } = options;
+  const filesPayload = rendered.map((p) => ({
+    id: generateFileId(),
+    dataURL: p.dataURL,
+    mimeType: p.mimeType,
+    created: Date.now()
+  }));
+  api.addFiles(filesPayload);
+  const origin = options.origin ?? getViewportCenter(api);
+  const sceneSizes = rendered.map((p) => pixelsToSceneSize(p.width, p.height, scale3));
+  const maxSceneWidth = Math.max(...sceneSizes.map((s) => s.width));
+  const baseX = origin.x - maxSceneWidth / 2;
+  let cursorY = origin.y - sceneSizes[0].height / 2;
+  const newElements = rendered.map((_, i) => {
+    const { width, height } = sceneSizes[i];
+    const x = baseX + (maxSceneWidth - width) / 2;
+    const y = cursorY;
+    cursorY = y + height + PAGE_GAP;
+    return buildPdfImageElement(filesPayload[i].id, x, y, width, height);
+  });
+  const existing = api.getSceneElements();
+  api.updateScene({
+    elements: [...existing, ...newElements],
+    appState: { selectedElementIds: {}, croppingElementId: null }
+  });
+  return {
+    insertedElementIds: newElements.map((e) => e.id),
+    fileIds: filesPayload.map((f) => f.id)
+  };
+}
+function pixelsToSceneSize(pxWidth, pxHeight, scale3) {
+  return { width: pxWidth / scale3, height: pxHeight / scale3 };
+}
+function buildPdfImageElement(fileId, x, y, width, height) {
+  return {
+    type: "image",
+    id: "pdf_" + Date.now() + "_" + Math.random().toString(36).slice(2, 8),
+    x,
+    y,
+    width,
+    height,
+    fileId,
+    angle: 0,
+    strokeColor: "transparent",
+    backgroundColor: "transparent",
+    fillStyle: "solid",
+    strokeWidth: 1,
+    strokeStyle: "solid",
+    roughness: 0,
+    opacity: 100,
+    groupIds: [],
+    roundness: null,
+    seed: Math.floor(Math.random() * 1e9),
+    versionNonce: 0,
+    version: 1,
+    isDeleted: false,
+    boundElements: null,
+    updated: Date.now(),
+    link: null,
+    locked: false,
+    status: "saved",
+    scale: [1, 1]
+  };
+}
+function generateFileId() {
+  return "pdf_" + Date.now() + "_" + Math.random().toString(36).slice(2, 10);
+}
+function getViewportCenter(api) {
+  const appState = api?.getAppState?.() ?? {
+    scrollX: 0,
+    scrollY: 0,
+    width: 800,
+    height: 600,
+    zoom: { value: 1 }
+  };
+  const zoom = appState.zoom?.value ?? 1;
+  return {
+    x: appState.scrollX + (appState.width ?? 800) / 2 / zoom,
+    y: appState.scrollY + (appState.height ?? 600) / 2 / zoom
+  };
+}
+async function insertPdfPages(api, source, options = {}) {
+  if (!api) throw new Error("Excalidraw API ch\u01B0a s\u1EB5n s\xE0ng.");
+  const scale3 = options.scale ?? DEFAULT_SCALE;
+  const doc = await loadPdfDocument(source);
+  let rendered;
+  try {
+    rendered = await rasterizePdf(doc, {
+      pages: options.pages,
+      scale: scale3,
+      onProgress: options.onProgress,
+      signal: options.signal
+    });
+  } finally {
+    void closePdfDocument(doc);
+  }
+  const { insertedElementIds } = insertRasterizedPagesIntoScene(api, rendered, {
+    scale: scale3,
+    origin: options.origin
+  });
+  return { insertedElementIds, pages: rendered };
+}
+var DOUBLE_CLICK_MS = 400;
+function useStampDoubleClick({ enabled, stamps, onOpen }) {
+  const lastClickRef = React8.useRef({
+    time: 0,
+    elementId: null
+  });
+  return React8.useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (_activeTool, pointerDownState) => {
+      if (!enabled) return;
+      const hitElement = pointerDownState?.hit?.element;
+      if (!hitElement || hitElement.type !== "image") return;
+      const stamp = findStampForCustomData(hitElement.customData, stamps);
+      if (!stamp) return;
+      const now = Date.now();
+      const isDouble = lastClickRef.current.elementId === hitElement.id && now - lastClickRef.current.time < DOUBLE_CLICK_MS;
+      lastClickRef.current = { time: now, elementId: hitElement.id };
+      if (!isDouble) return;
+      onOpen(stamp.kind, {
+        id: hitElement.id,
+        customData: hitElement.customData
+      });
+    },
     [enabled, stamps, onOpen]
   );
 }
@@ -10420,6 +11399,8 @@ function Whiteboard({
   activeStampRef.current = activeStamp;
   const [editingElement, setEditingElement] = React8.useState(null);
   const hostRef = React8.useRef(null);
+  const [pdfPending, setPdfPending] = React8.useState(null);
+  const [pdfBusy, setPdfBusy] = React8.useState(false);
   const handledCropIdRef = React8.useRef(null);
   const prevExcalidrawToolRef = React8.useRef("selection");
   const stampByKind = React8.useMemo(() => {
@@ -10708,6 +11689,80 @@ function Whiteboard({
     return () => window.removeEventListener("keydown", onKey, { capture: true });
   }, [activeStamp, closeStamp]);
   useStampClickOutside({ activeStamp, hostRef, onClose: closeStamp });
+  const handlePdfPick = React8.useCallback(
+    async (file) => {
+      if (readOnly || pdfBusy) return;
+      setPdfBusy(true);
+      try {
+        const doc = await loadPdfDocument(file);
+        setPdfPending({ doc, fileName: file.name, totalPages: doc.numPages });
+      } catch (err) {
+        console.warn("[whiteboard] \u0110\u1ECDc PDF th\u1EA5t b\u1EA1i:", err);
+        window.alert("Kh\xF4ng \u0111\u1ECDc \u0111\u01B0\u1EE3c PDF. File c\xF3 th\u1EC3 \u0111\xE3 h\u1ECFng ho\u1EB7c b\u1ECB m\u1EADt kh\u1EA9u b\u1EA3o v\u1EC7.");
+      } finally {
+        setPdfBusy(false);
+      }
+    },
+    [readOnly, pdfBusy]
+  );
+  const handlePdfConfirm = React8.useCallback(
+    async (pages) => {
+      if (!pdfPending || !api) return;
+      const { doc } = pdfPending;
+      setPdfPending(null);
+      setPdfBusy(true);
+      const scale3 = 2;
+      try {
+        const rendered = await rasterizePdf(doc, { pages, scale: scale3 });
+        await closePdfDocument(doc);
+        insertRasterizedPagesIntoScene(api, rendered, { scale: scale3 });
+      } catch (err) {
+        console.warn("[whiteboard] Ch\xE8n PDF th\u1EA5t b\u1EA1i:", err);
+        window.alert("Ch\xE8n PDF th\u1EA5t b\u1EA1i. Xem console \u0111\u1EC3 bi\u1EBFt chi ti\u1EBFt.");
+      } finally {
+        setPdfBusy(false);
+      }
+    },
+    [pdfPending, api]
+  );
+  const handlePdfCancel = React8.useCallback(() => {
+    if (pdfPending) {
+      void closePdfDocument(pdfPending.doc);
+    }
+    setPdfPending(null);
+  }, [pdfPending]);
+  React8.useEffect(() => {
+    if (readOnly) return;
+    const root = document.querySelector(".excalidraw");
+    if (!root) return;
+    const onDragOver = (e) => {
+      const items = e.dataTransfer?.items;
+      if (!items) return;
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].kind === "file" && items[i].type === "application/pdf") {
+          e.preventDefault();
+          e.stopPropagation();
+          if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+          return;
+        }
+      }
+    };
+    const onDrop = (e) => {
+      const files = e.dataTransfer?.files;
+      if (!files || files.length === 0) return;
+      const pdf = Array.from(files).find((f) => f.type === "application/pdf");
+      if (!pdf) return;
+      e.preventDefault();
+      e.stopPropagation();
+      void handlePdfPick(pdf);
+    };
+    root.addEventListener("dragover", onDragOver, { capture: true });
+    root.addEventListener("drop", onDrop, { capture: true });
+    return () => {
+      root.removeEventListener("dragover", onDragOver, { capture: true });
+      root.removeEventListener("drop", onDrop, { capture: true });
+    };
+  }, [readOnly, handlePdfPick, api]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative h-full w-full${isDarkTheme ? " theme--dark" : ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(React8.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(ExcalidrawLoadingFallback, {}), children: /* @__PURE__ */ jsxRuntime.jsx(
       Excalidraw2,
@@ -10742,6 +11797,35 @@ function Whiteboard({
         stamps
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsx(PdfImporterButton, { enabled: !readOnly, onPick: handlePdfPick }),
+    pdfPending && /* @__PURE__ */ jsxRuntime.jsx(
+      PageRangeDialog,
+      {
+        doc: pdfPending.doc,
+        fileName: pdfPending.fileName,
+        onConfirm: handlePdfConfirm,
+        onCancel: handlePdfCancel
+      }
+    ),
+    pdfBusy && !pdfPending && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-live": "polite",
+        role: "status",
+        style: {
+          position: "fixed",
+          bottom: 16,
+          right: 16,
+          padding: "8px 14px",
+          background: "rgba(0,0,0,0.75)",
+          color: "#fff",
+          borderRadius: 6,
+          fontSize: 12,
+          zIndex: 1e4
+        },
+        children: "\u0110ang x\u1EED l\xFD PDF\u2026"
+      }
+    ),
     HostComponent && /* @__PURE__ */ jsxRuntime.jsx(
       HostComponent,
       {
@@ -10760,17 +11844,24 @@ exports.DEFAULT_STAMPS = DEFAULT_STAMPS;
 exports.EXPERIMENTAL_STAMPS = EXPERIMENTAL_STAMPS;
 exports.STABLE_STAMPS = STABLE_STAMPS;
 exports.Whiteboard = Whiteboard;
+exports.closePdfDocument = closePdfDocument;
+exports.configurePdfWorker = configurePdfWorker;
 exports.findStampForCustomData = findStampForCustomData;
 exports.geometry3dStamp = geometry3dStamp;
 exports.geometryStamp = geometryStamp;
 exports.graph2dStamp = graph2dStamp;
+exports.insertPdfPages = insertPdfPages;
+exports.insertRasterizedPagesIntoScene = insertRasterizedPagesIntoScene;
 exports.isGeometry3DCustomData = isGeometry3DCustomData;
 exports.isGeometryCustomData = isGeometryCustomData;
 exports.isGraph2DCustomData = isGraph2DCustomData;
 exports.isLatexCustomData = isLatexCustomData;
 exports.isStampElement = isStampElement;
 exports.latexStamp = latexStamp;
+exports.loadPdfDocument = loadPdfDocument;
+exports.parsePageRange = parsePageRange;
 exports.pickSyncableAppState = pickSyncableAppState;
+exports.rasterizePdf = rasterizePdf;
 exports.restoreMissingStampFiles = restoreMissingStampFiles;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map