@xom11/whiteboard 0.27.0 → 0.29.0

package/dist/{host-HAYCJJ2T.mjs → host-HKMZSCIT.mjs}

@@ -1,22 +1,21 @@
 "use client";
 import { useChordShortcut } from './chunk-HNQLZIEP.mjs';
 import { useToolStateMachine } from './chunk-NVJ7K3DK.mjs';
-import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel, ObjectRow } from './chunk-I3L56GVH.mjs';
-import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-AYJPOHCI.mjs';
+import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel, ObjectRow } from './chunk-OQIQNKPQ.mjs';
+import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-H22OZYTW.mjs';
 import { themeLabel, paletteFor, themeAxis, themeGrid } from './chunk-R5FL6S7L.mjs';
 import { JxgRenderer } from './chunk-SZDAS7LK.mjs';
 import './chunk-ICR4CVOE.mjs';
-import { nextLabel, useEditorState, listObjects } from './chunk-D5LWSN2Y.mjs';
+import { nextLabel, useEditorState, listObjects } from './chunk-ZTQBUKLJ.mjs';
 import './chunk-IHUFOV7L.mjs';
-import { validateFile, fileToImagePart, describeDsl, serializeState } from './chunk-AJAHD35N.mjs';
-import { handleExtractProblem } from './chunk-T3SOHYB2.mjs';
+import { describeDsl } from './chunk-E6EDOPGT.mjs';
 import { DEFAULT_VIEW_2D } from './chunk-73Q7ADVL.mjs';
 import './chunk-B4NJJZFR.mjs';
 import { useIsMobile } from './chunk-P2AOIF7S.mjs';
 import { insertStampImage } from './chunk-QGNU34T7.mjs';
 import './chunk-5UTGXHLJ.mjs';
 import { __export } from './chunk-J5LGTIGS.mjs';
-import { forwardRef, useRef, useId, useState, useEffect, useCallback, useImperativeHandle, useSyncExternalStore, useMemo, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useId, useState, useEffect, useCallback, useImperativeHandle, useMemo, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -3268,41 +3267,13 @@ var TransformParamPopover = ({ kind, anchor, defaultValue, onConfirm, onCancel,
   );
   return createPortal(node, document.body);
 };
-function useAiFigure(generator, options = {}) {
-  const { currentState } = options;
+function useAiFigure(generator) {
   const [prompt, setPrompt] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const [tokens, setTokens] = useState(0);
   const abortRef = useRef(null);
   const requestIdRef = useRef(0);
-  const { dsl: currentDsl, unsupported, entityCount, hasContent } = useMemo(() => {
-    if (!currentState || currentState.order.length === 0) {
-      return {
-        dsl: null,
-        unsupported: [],
-        entityCount: { points: 0, shapes: 0 },
-        hasContent: false
-      };
-    }
-    const { dsl, unsupported: unsupported2 } = serializeState(currentState);
-    return {
-      dsl,
-      unsupported: unsupported2,
-      entityCount: { points: dsl.points.length, shapes: dsl.shapes.length },
-      hasContent: true
-    };
-  }, [currentState]);
-  const hasUnsupported = unsupported.length > 0;
-  const initialMode = hasContent && !hasUnsupported ? "refine" : "build";
-  const [mode, setModeInternal] = useState(initialMode);
-  useEffect(() => {
-    if (!hasContent && mode === "refine") setModeInternal("build");
-    if (hasUnsupported && mode === "refine") setModeInternal("build");
-  }, [hasContent, hasUnsupported, mode]);
-  const setMode = useCallback((next) => {
-    setModeInternal(next);
-  }, []);
   useEffect(() => () => abortRef.current?.abort(), []);
   const submit = useCallback(async () => {
     const problem = prompt.trim();
@@ -3326,8 +3297,7 @@ function useAiFigure(generator, options = {}) {
         signal: controller.signal,
         onProgress: (info) => {
           if (requestId === requestIdRef.current) setTokens(info.tokens);
-        },
-        ...mode === "refine" && currentDsl ? { currentDsl } : {}
+        }
       });
       if (controller.signal.aborted || requestId !== requestIdRef.current) return null;
       if (!generated.ok) {
@@ -3351,7 +3321,7 @@ function useAiFigure(generator, options = {}) {
         setIsLoading(false);
       }
     }
-  }, [generator, prompt, mode, currentDsl]);
+  }, [generator, prompt]);
   const cancel = useCallback(() => {
     abortRef.current?.abort();
   }, []);
@@ -3362,27 +3332,9 @@ function useAiFigure(generator, options = {}) {
     error,
     submit,
     cancel,
-    tokens,
-    mode,
-    setMode,
-    entityCount,
-    hasUnsupported
+    tokens
   };
 }
-var PaperclipIcon = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 1.75,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    "aria-hidden": true,
-    ...props,
-    children: /* @__PURE__ */ jsx("path", { d: "M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66L9.41 17.41a2 2 0 1 1-2.83-2.83l8.49-8.49" })
-  }
-);
 var ArrowUpIcon = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -3401,12 +3353,7 @@ var ArrowUpIcon = (props) => /* @__PURE__ */ jsxs(
   }
 );
 var StopIcon = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) });
-function AiFigurePrompt({
-  generator,
-  onGenerated,
-  currentState,
-  extractProblem = handleExtractProblem
-}) {
+function AiFigurePrompt({ generator, onGenerated }) {
   const {
     prompt,
     setPrompt,
@@ -3414,12 +3361,8 @@ function AiFigurePrompt({
     error,
     submit,
     cancel,
-    tokens,
-    mode,
-    setMode,
-    entityCount,
-    hasUnsupported
-  } = useAiFigure(generator, { currentState });
+    tokens
+  } = useAiFigure(generator);
   const [elapsed, setElapsed] = useState(0);
   useEffect(() => {
     if (!isLoading) {
@@ -3429,184 +3372,20 @@ function AiFigurePrompt({
     const id = setInterval(() => setElapsed((s) => s + 1), 1e3);
     return () => clearInterval(id);
   }, [isLoading]);
-  const [image, setImage] = useState(null);
-  const [ocrLoading, setOcrLoading] = useState(false);
-  const [ocrError, setOcrError] = useState(null);
-  const [ocrWarning, setOcrWarning] = useState(null);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const fileInputRef = useRef(null);
   const textareaRef = useRef(null);
-  const imagePreview = image ? `data:${image.mediaType};base64,${image.base64}` : null;
-  useEffect(() => {
-    setOcrError(null);
-    setOcrWarning(null);
-  }, [image]);
-  const handleFile = useCallback(
-    async (file) => {
-      if (isLoading || ocrLoading) return;
-      const v = validateFile(file);
-      if (!v.ok) {
-        setOcrError(v.message);
-        return;
-      }
-      try {
-        const part = await fileToImagePart(file);
-        setImage(part);
-      } catch (e) {
-        setOcrError(e instanceof Error ? e.message : "Kh\xF4ng decode \u0111\u01B0\u1EE3c \u1EA3nh");
-      }
-    },
-    [isLoading, ocrLoading]
-  );
-  const handleFileInput = useCallback(
-    (e) => {
-      const file = e.target.files?.[0];
-      if (file) void handleFile(file);
-      e.target.value = "";
-    },
-    [handleFile]
-  );
-  const handlePaste = useCallback(
-    (e) => {
-      const item = Array.from(e.clipboardData.items).find(
-        (it) => it.kind === "file" && it.type.startsWith("image/")
-      );
-      if (!item) return;
-      const file = item.getAsFile();
-      if (!file) return;
-      e.preventDefault();
-      void handleFile(file);
-    },
-    [handleFile]
-  );
-  const handleDrop = useCallback(
-    (e) => {
-      e.preventDefault();
-      setIsDragOver(false);
-      const file = Array.from(e.dataTransfer.files).find(
-        (f) => f.type.startsWith("image/")
-      );
-      if (file) void handleFile(file);
-    },
-    [handleFile]
-  );
-  const runOcr = useCallback(async () => {
-    if (!image) return;
-    setOcrLoading(true);
-    setOcrError(null);
-    setOcrWarning(null);
-    try {
-      const r = await extractProblem(image);
-      if (r.kind === "success" || r.kind === "low-confidence") {
-        setPrompt(r.text);
-        if (r.kind === "low-confidence") setOcrWarning(r.warning);
-        requestAnimationFrame(() => textareaRef.current?.focus());
-      } else {
-        setOcrError(r.message);
-      }
-    } finally {
-      setOcrLoading(false);
-    }
-  }, [image, setPrompt, extractProblem]);
   const handleSendClick = useCallback(async () => {
-    if (image && !prompt.trim() && !ocrLoading) {
-      await runOcr();
-      return;
-    }
     const generated = await submit();
     if (generated) onGenerated(generated);
-  }, [image, prompt, ocrLoading, runOcr, submit, onGenerated]);
-  const handleSwitchToBuild = useCallback(() => {
-    if (currentState && currentState.order.length > 0) {
-      const ok = window.confirm(
-        "D\u1EF1ng m\u1EDBi s\u1EBD thay to\xE0n b\u1ED9 h\xECnh hi\u1EC7n t\u1EA1i b\u1EB1ng h\xECnh m\u1EDBi t\u1EEB AI. Ti\u1EBFp t\u1EE5c?"
-      );
-      if (!ok) return;
-    }
-    setMode("build");
-  }, [currentState, setMode]);
-  const hasContent = currentState != null && currentState.order.length > 0;
+  }, [submit, onGenerated]);
   const promptEmpty = !prompt.trim();
-  const willOcr = image != null && promptEmpty;
-  const sendDisabled = !image && promptEmpty || ocrLoading || isLoading && !willOcr;
-  const refineChipLabel = entityCount.points + entityCount.shapes > 0 ? `Th\xEAm v\xE0o \xB7 ${entityCount.points}\u0111, ${entityCount.shapes}\u0111o\u1EA1n` : "Th\xEAm v\xE0o";
-  const placeholder = willOcr ? "B\u1EA5m g\u1EEDi \u0111\u1EC3 \u0111\u1ECDc \u0111\u1EC1 t\u1EEB \u1EA3nh \u2014 ho\u1EB7c t\u1EF1 g\xF5 \u1EDF \u0111\xE2y\u2026" : mode === "refine" ? "M\xF4 t\u1EA3 ph\u1EA7n c\u1EA7n th\xEAm (vd: trung \u0111i\u1EC3m M c\u1EE7a BC). C\xF3 th\u1EC3 d\xE1n \u1EA3nh \u0111\u1EC1 (Ctrl+V)." : "M\xF4 t\u1EA3 \u0111\u1EC1 b\xE0i c\u1EA7n d\u1EF1ng \u2014 ho\u1EB7c d\xE1n/\u0111\xEDnh \u1EA3nh \u0111\u1EC1 (Ctrl+V).";
+  const sendDisabled = promptEmpty || isLoading;
   return /* @__PURE__ */ jsxs("div", { className: "border-b border-slate-200 bg-slate-50 px-3 py-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium tracking-wide text-slate-600", children: "D\u1EF1ng h\xECnh b\u1EB1ng AI" }),
-      hasContent && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", role: "tablist", "aria-label": "Ch\u1EBF \u0111\u1ED9 AI", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": mode === "refine",
-            "data-testid": "geometry-ai-mode-refine",
-            onClick: () => setMode("refine"),
-            disabled: isLoading || hasUnsupported,
-            title: hasUnsupported ? "H\xECnh c\xF3 \u0111\u1ED1i t\u01B0\u1EE3ng ngo\xE0i DSL \u2014 ch\u1EC9 d\u1EF1ng m\u1EDBi \u0111\u01B0\u1EE3c" : refineChipLabel,
-            className: `rounded-full px-2.5 py-0.5 text-[11px] transition ${mode === "refine" ? "bg-emerald-600 text-white shadow-sm" : "text-slate-500 hover:text-emerald-700"} ${hasUnsupported ? "cursor-not-allowed opacity-40" : ""}`,
-            children: refineChipLabel
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": mode === "build",
-            "data-testid": "geometry-ai-mode-build",
-            onClick: handleSwitchToBuild,
-            disabled: isLoading,
-            className: `rounded-full px-2.5 py-0.5 text-[11px] transition ${mode === "build" ? "bg-emerald-600 text-white shadow-sm" : "text-slate-500 hover:text-emerald-700"}`,
-            children: "D\u1EF1ng m\u1EDBi"
-          }
-        )
-      ] })
-    ] }),
-    hasUnsupported && /* @__PURE__ */ jsx(
-      "p",
-      {
-        className: "mb-1.5 text-[10px] text-amber-700",
-        "data-testid": "geometry-ai-unsupported-warning",
-        children: "H\xECnh c\xF3 \u0111\u1ED1i t\u01B0\u1EE3ng ngo\xE0i DSL \u2014 ch\u1EC9 d\u1EF1ng m\u1EDBi \u0111\u01B0\u1EE3c"
-      }
-    ),
+    /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium tracking-wide text-slate-600", children: "D\u1EF1ng h\xECnh b\u1EB1ng AI" }) }),
     /* @__PURE__ */ jsxs(
       "div",
       {
-        onDragOver: (e) => {
-          e.preventDefault();
-          setIsDragOver(true);
-        },
-        onDragLeave: () => setIsDragOver(false),
-        onDrop: handleDrop,
-        onPaste: handlePaste,
-        "aria-label": "Khu v\u1EF1c k\xE9o th\u1EA3 \u1EA3nh",
-        role: "region",
-        className: "group relative flex flex-col rounded-2xl bg-white shadow-sm transition-all duration-150 ring-1 ring-slate-200 focus-within:ring-2 focus-within:ring-emerald-400/70 focus-within:shadow-md " + (isDragOver ? "ring-2 ring-emerald-500 bg-emerald-50/40" : ""),
+        className: "group relative flex flex-col rounded-2xl bg-white shadow-sm transition-all duration-150 ring-1 ring-slate-200 focus-within:ring-2 focus-within:ring-emerald-400/70 focus-within:shadow-md",
         children: [
-          image && imagePreview && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 px-3 pt-2.5", children: /* @__PURE__ */ jsxs("div", { className: "group/chip relative", children: [
-            /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: imagePreview,
-                alt: "\u1EA2nh \u0111\u1EC1 b\xE0i",
-                className: "max-h-48 max-w-full h-auto w-auto rounded-lg border border-slate-200 shadow-sm"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setImage(null),
-                disabled: ocrLoading || isLoading,
-                "aria-label": "Xo\xE1 \u1EA3nh",
-                className: "absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-slate-900/85 text-[11px] font-medium text-white shadow ring-2 ring-white transition hover:bg-slate-900 disabled:opacity-50",
-                children: "\xD7"
-              }
-            )
-          ] }) }),
           /* @__PURE__ */ jsx(
             "textarea",
             {
@@ -3624,79 +3403,122 @@ function AiFigurePrompt({
               },
               disabled: isLoading,
               rows: 2,
-              placeholder,
+              placeholder: "M\xF4 t\u1EA3 \u0111\u1EC1 b\xE0i c\u1EA7n d\u1EF1ng.",
               className: "block w-full resize-none rounded-2xl bg-transparent px-3.5 pt-2.5 pb-1 text-sm leading-relaxed text-slate-800 placeholder:text-slate-400 outline-none disabled:opacity-60 field-sizing-content max-h-44"
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-2 pb-2 pt-1", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => fileInputRef.current?.click(),
-                  disabled: isLoading || ocrLoading,
-                  "aria-label": "\u0110\xEDnh \u1EA3nh \u0111\u1EC1 b\xE0i",
-                  title: "\u0110\xEDnh \u1EA3nh (c\u0169ng c\xF3 th\u1EC3 d\xE1n b\u1EB1ng Ctrl+V ho\u1EB7c k\xE9o th\u1EA3)",
-                  className: "flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-emerald-700 disabled:opacity-40",
-                  children: /* @__PURE__ */ jsx(PaperclipIcon, { className: "h-[18px] w-[18px]" })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: fileInputRef,
-                  type: "file",
-                  accept: "image/png,image/jpeg,image/webp",
-                  className: "sr-only",
-                  onChange: handleFileInput,
-                  disabled: isLoading || ocrLoading,
-                  "aria-label": "Ch\u1ECDn \u1EA3nh \u0111\u1EC1 b\xE0i"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              (isLoading || ocrLoading) && /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] tabular-nums text-slate-500", children: ocrLoading ? "\u0111\u1ECDc \u1EA3nh\u2026" : tokens > 0 ? `${tokens}tok \xB7 ${elapsed}s` : `${elapsed}s` }),
-              isLoading ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: cancel,
-                  "aria-label": "Hu\u1EF7 d\u1EF1ng h\xECnh AI",
-                  "data-testid": "geometry-ai-cancel",
-                  title: `\u0110ang d\u1EF1ng\u2026 ${elapsed}s \u2014 b\u1EA5m \u0111\u1EC3 hu\u1EF7`,
-                  className: "flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-white shadow-sm transition hover:scale-105 hover:bg-amber-600 active:scale-95",
-                  children: /* @__PURE__ */ jsx(StopIcon, { className: "h-3.5 w-3.5" })
-                }
-              ) : /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => void handleSendClick(),
-                  disabled: sendDisabled,
-                  "aria-label": willOcr ? "\u0110\u1ECDc \u0111\u1EC1 t\u1EEB \u1EA3nh" : "D\u1EF1ng b\u1EB1ng AI",
-                  title: willOcr ? "\u0110\u1ECDc \u0111\u1EC1 t\u1EEB \u1EA3nh (s\u1EBD \u0111i\u1EC1n v\xE0o \xF4 chat)" : "D\u1EF1ng b\u1EB1ng AI (Ctrl/\u2318+Enter)",
-                  "data-testid": willOcr ? "geometry-ai-ocr" : "geometry-ai-submit",
-                  className: "flex h-8 w-8 items-center justify-center rounded-full bg-emerald-600 text-white shadow-sm transition hover:scale-105 hover:bg-emerald-700 active:scale-95 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:hover:scale-100",
-                  children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-[18px] w-[18px]" })
-                }
-              )
-            ] })
-          ] }),
-          isDragOver && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center rounded-2xl bg-emerald-50/60 text-xs font-medium text-emerald-700", children: "Th\u1EA3 \u1EA3nh v\xE0o \u0111\xE2y" })
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2 px-2 pb-2 pt-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            isLoading && /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] tabular-nums text-slate-500", children: tokens > 0 ? `${tokens}tok \xB7 ${elapsed}s` : `${elapsed}s` }),
+            isLoading ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: cancel,
+                "aria-label": "Hu\u1EF7 d\u1EF1ng h\xECnh AI",
+                "data-testid": "geometry-ai-cancel",
+                title: `\u0110ang d\u1EF1ng\u2026 ${elapsed}s \u2014 b\u1EA5m \u0111\u1EC3 hu\u1EF7`,
+                className: "flex h-8 w-8 items-center justify-center rounded-full bg-amber-500 text-white shadow-sm transition hover:scale-105 hover:bg-amber-600 active:scale-95",
+                children: /* @__PURE__ */ jsx(StopIcon, { className: "h-3.5 w-3.5" })
+              }
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => void handleSendClick(),
+                disabled: sendDisabled,
+                "aria-label": "D\u1EF1ng b\u1EB1ng AI",
+                title: "D\u1EF1ng b\u1EB1ng AI (Ctrl/\u2318+Enter)",
+                "data-testid": "geometry-ai-submit",
+                className: "flex h-8 w-8 items-center justify-center rounded-full bg-emerald-600 text-white shadow-sm transition hover:scale-105 hover:bg-emerald-700 active:scale-95 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:hover:scale-100",
+                children: /* @__PURE__ */ jsx(ArrowUpIcon, { className: "h-[18px] w-[18px]" })
+              }
+            )
+          ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("p", { className: "mt-1.5 px-1 text-[10px] text-slate-500", children: [
-      "D\xE1n \u1EA3nh (Ctrl+V), k\xE9o th\u1EA3, ho\u1EB7c b\u1EA5m ",
-      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u{1F4CE}" }),
-      " \u0111\u1EC3 \u0111\xEDnh \u1EA3nh \u0111\u1EC1."
-    ] }),
-    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: error }),
-    ocrError && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: ocrError }),
-    ocrWarning && /* @__PURE__ */ jsx("p", { className: "mt-1 rounded bg-amber-50 px-2 py-1 text-[11px] text-amber-700", children: ocrWarning })
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: error })
   ] });
 }
+
+// src/stamps/geometry-2d/draft.ts
+function svgIntrinsicSize(svg) {
+  const w = svg.match(/<svg[^>]*\swidth="([\d.]+)"/);
+  const h = svg.match(/<svg[^>]*\sheight="([\d.]+)"/);
+  if (w && h) return { width: parseFloat(w[1]), height: parseFloat(h[1]) };
+  const vb = svg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
+  if (vb) return { width: parseFloat(vb[1]), height: parseFloat(vb[2]) };
+  return { width: 300, height: 200 };
+}
+function draftFromViewport(svg, appState, seq) {
+  const { width, height } = svgIntrinsicSize(svg);
+  const zoom = appState.zoom?.value ?? 1;
+  const vw = appState.width ?? 800;
+  const vh = appState.height ?? 600;
+  const cx = appState.scrollX + vw / 2 / zoom;
+  const cy = appState.scrollY + vh / 2 / zoom;
+  return { svg, width, height, x: cx - width / 2, y: cy - height / 2, seq };
+}
+function didStateChange(seen, jsonState) {
+  if (seen.last === jsonState) return false;
+  seen.last = jsonState;
+  return true;
+}
+
+// src/stamps/geometry-2d/editor/useGeometryDraftEmit.ts
+function useGeometryDraftEmit({
+  store,
+  handleRef,
+  api,
+  showAxis,
+  showGrid,
+  onGeometryDraft,
+  debounceMs = 350
+}) {
+  const seqRef = useRef(0);
+  const seenRef = useRef({ last: null });
+  const timerRef = useRef(null);
+  const cbRef = useRef(onGeometryDraft);
+  cbRef.current = onGeometryDraft;
+  useEffect(() => {
+    if (!cbRef.current) return;
+    const emit = () => {
+      const h = handleRef.current;
+      if (!h) return;
+      const state = h.getState();
+      if (Object.keys(state.objects).length === 0) {
+        if (seenRef.current.last !== null) {
+          seenRef.current.last = null;
+          cbRef.current?.(null);
+        }
+        return;
+      }
+      const bbox = h.getBbox();
+      const jsonState = serializeBoard(state, { bbox, showAxis, showGrid });
+      if (!didStateChange(seenRef.current, jsonState)) return;
+      void (async () => {
+        try {
+          const svg = await renderGeometrySvgFromState(jsonState);
+          const appState = api?.getAppState?.() ?? { scrollX: 0, scrollY: 0, width: 800, height: 600, zoom: { value: 1 } };
+          seqRef.current += 1;
+          cbRef.current?.(draftFromViewport(svg, appState, seqRef.current));
+        } catch (err) {
+          console.warn("[geometry] draft render failed:", err);
+        }
+      })();
+    };
+    const schedule = () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(emit, debounceMs);
+    };
+    const unsub = store.subscribe(schedule);
+    return () => {
+      unsub();
+      if (timerRef.current) clearTimeout(timerRef.current);
+      cbRef.current?.(null);
+    };
+  }, [store, handleRef, api, showAxis, showGrid, debounceMs]);
+}
 var GeometryEditorPanelInner = forwardRef(
   function GeometryEditorPanelInner2({
     store,
@@ -3715,7 +3537,9 @@ var GeometryEditorPanelInner = forwardRef(
     canUndo,
     canRedo,
     onSelectionChange,
-    generateGeometryFigure
+    generateGeometryFigure,
+    api,
+    onGeometryDraft
   }, ref) {
     const { showToast } = useToast();
     const handleRef = useRef(null);
@@ -3728,12 +3552,12 @@ var GeometryEditorPanelInner = forwardRef(
     useEffect(() => {
       onSelectionChangeRef.current = onSelectionChange;
     }, [onSelectionChange]);
+    const onGeometryDraftRef = useRef(onGeometryDraft);
+    useEffect(() => {
+      onGeometryDraftRef.current = onGeometryDraft;
+    }, [onGeometryDraft]);
     useEditorState({ store, onHistoryChange });
-    const currentSceneState = useSyncExternalStore(
-      (cb) => store.subscribe(cb),
-      () => store.getState(),
-      () => store.getState()
-    );
+    useGeometryDraftEmit({ store, handleRef, api, showAxis, showGrid, onGeometryDraft });
     useEffect(() => {
       const sync = () => setHasContent(Object.keys(store.getState().objects).length > 0);
       sync();
@@ -3810,15 +3634,13 @@ var GeometryEditorPanelInner = forwardRef(
         try {
           const svgString = await renderGeometrySvgFromState(jsonState);
           onInsert(jsonState, svgString);
+          onGeometryDraftRef.current?.(null);
         } catch (err) {
           console.error("Geometry insert failed:", err);
         }
       })();
       return true;
     }, [onInsert, showAxis, showGrid]);
-    const handleInsert = useCallback(() => {
-      performInsert();
-    }, [performInsert]);
     const loadAiFigure = useCallback((generated) => {
       handleRef.current?.clearSelection();
       setPropsPopover(null);
@@ -3913,7 +3735,7 @@ var GeometryEditorPanelInner = forwardRef(
                 "button",
                 {
                   type: "button",
-                  onClick: handleInsert,
+                  onClick: performInsert,
                   disabled: !ready || !hasContent,
                   title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
                   "data-testid": "geometry-insert-btn-mobile",
@@ -3927,7 +3749,7 @@ var GeometryEditorPanelInner = forwardRef(
               /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
             ] }) })
           ] }),
-          generateGeometryFigure && /* @__PURE__ */ jsx(AiFigurePrompt, { generator: generateGeometryFigure, onGenerated: loadAiFigure, currentState: currentSceneState }),
+          generateGeometryFigure && /* @__PURE__ */ jsx(AiFigurePrompt, { generator: generateGeometryFigure, onGenerated: loadAiFigure }),
           /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
             MiniBoard2D,
             {
@@ -4031,7 +3853,7 @@ var GeometryEditorPanelInner = forwardRef(
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  onClick: handleInsert,
+                  onClick: performInsert,
                   disabled: !ready || !hasContent,
                   title: !hasContent ? "V\u1EBD \xEDt nh\u1EA5t m\u1ED9t \u0111\u1ED1i t\u01B0\u1EE3ng tr\u01B0\u1EDBc khi ch\xE8n" : void 0,
                   "data-testid": "geometry-insert-btn",
@@ -4087,7 +3909,7 @@ function parseInitialState(data) {
   return deserializeBoard(data.jsonState);
 }
 var GeometryStampHost = forwardRef(
-  function GeometryStampHost2({ api, editingElement, onClose, isDark, generateGeometryFigure }, ref) {
+  function GeometryStampHost2({ api, editingElement, onClose, isDark, generateGeometryFigure, onGeometryDraft }, ref) {
     const panelRef = useRef(null);
     const { isMobile } = useIsMobile();
     const [drawerOpen, setDrawerOpen] = useState(false);
@@ -4202,7 +4024,9 @@ var GeometryStampHost = forwardRef(
           canUndo,
           canRedo,
           onSelectionChange: setSelectedObjectId,
-          generateGeometryFigure
+          generateGeometryFigure,
+          api,
+          onGeometryDraft
         }
       )
     ] });
@@ -4210,5 +4034,5 @@ var GeometryStampHost = forwardRef(
 );
 
 export { GeometryStampHost };
-//# sourceMappingURL=host-HAYCJJ2T.mjs.map
-//# sourceMappingURL=host-HAYCJJ2T.mjs.map
+//# sourceMappingURL=host-HKMZSCIT.mjs.map
+//# sourceMappingURL=host-HKMZSCIT.mjs.map