@xom11/whiteboard 0.29.0 → 0.31.0

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

@@ -1,18 +1,19 @@
 "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-OQIQNKPQ.mjs';
-import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-H22OZYTW.mjs';
+import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel, ObjectRow } from './chunk-LTLLQUMN.mjs';
+import { isDefaultBbox, autoFitBoardToContent, serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-KOXOC2FI.mjs';
 import { themeLabel, paletteFor, themeAxis, themeGrid } from './chunk-R5FL6S7L.mjs';
-import { JxgRenderer } from './chunk-SZDAS7LK.mjs';
+import { JxgRenderer } from './chunk-IE2GGHNF.mjs';
 import './chunk-ICR4CVOE.mjs';
-import { nextLabel, useEditorState, listObjects } from './chunk-ZTQBUKLJ.mjs';
-import './chunk-IHUFOV7L.mjs';
-import { describeDsl } from './chunk-E6EDOPGT.mjs';
+import { nextLabel, useEditorState, listObjects } from './chunk-JJ4FPCBE.mjs';
+import './chunk-CH6SFONH.mjs';
+import { validateFile, fileToImagePart, describeDsl } from './chunk-DWIEVCGK.mjs';
+import { handleExtractProblem } from './chunk-QK6OVDLC.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 { insertStampImage } from './chunk-QLQ4MJNO.mjs';
 import './chunk-5UTGXHLJ.mjs';
 import { __export } from './chunk-J5LGTIGS.mjs';
 import { forwardRef, useRef, useId, useState, useEffect, useCallback, useImperativeHandle, useMemo, useLayoutEffect } from 'react';
@@ -330,41 +331,48 @@ var Icon = {
     /* @__PURE__ */ jsx("circle", { cx: "4", cy: "4", r: "1.7", fill: C_POINT })
   ] }),
   // ===== Nâng cao / kind chưa có icon =====
-  excenter: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx("path", { d: "M5 16 L12 5 L19 16 Z", stroke: "currentColor", strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "20", r: "3", fill: "none", stroke: C_CONSTRUCT, strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "20", r: "1.4", fill: C_CONSTRUCT })
+  // Hệ màu đồng bộ: XANH = input click sẵn, ĐỎ = output suy ra. Toạ độ tính để
+  // điểm nằm ĐÚNG trên đường tròn/cung/tiếp tuyến (không trôi nổi).
+  excenter: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "12,3 15,15 9,15", stroke: "currentColor", strokeWidth: "1.4", fill: "none" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "15", x2: "8", y2: "18.9", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.6 1.6" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "15", x2: "16", y2: "18.9", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.6 1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "18.9", r: "3.8", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "3", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "15", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "15", r: "1.6", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "18.9", r: "2.2", fill: C_CONSTRUCT })
   ] }),
-  tangencyPoint: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "12", r: "6.5", stroke: "currentColor", strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("line", { x1: "16.5", y1: "3", x2: "16.5", y2: "21", stroke: "currentColor", strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("circle", { cx: "16.5", cy: "12", r: "2.2", fill: C_CONSTRUCT })
+  tangencyPoint: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "9.5", cy: "12", r: "7", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("line", { x1: "16.5", y1: "3.5", x2: "16.5", y2: "20.5", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "16.5", cy: "12", r: "2.3", fill: C_CONSTRUCT })
   ] }),
-  secondIntersection: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "12", r: "6.5", stroke: "currentColor", strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("line", { x1: "2", y1: "8", x2: "22", y2: "16", stroke: "currentColor", strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("circle", { cx: "6.2", cy: "9.6", r: "1.6", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "15.8", cy: "14.4", r: "2.4", fill: C_CONSTRUCT })
+  secondIntersection: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "12", r: "6.5", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("line", { x1: "2.4", y1: "8.2", x2: "20.4", y2: "11.4", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5.37", cy: "8.75", r: "1.8", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "17.4", cy: "10.87", r: "2.4", fill: C_CONSTRUCT })
   ] }),
   arcMidpoint: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
-    /* @__PURE__ */ jsx("path", { d: "M4 17 A 9 9 0 0 1 20 17", stroke: "currentColor", strokeWidth: "1.4" }),
-    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "17", r: "1.6", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "17", r: "1.6", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8.2", r: "2.4", fill: C_CONSTRUCT })
+    /* @__PURE__ */ jsx("path", { d: "M4 17 A 8.5 8.5 0 0 1 20 17", stroke: "currentColor", strokeWidth: "1.6", fill: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4", cy: "17", r: "1.8", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "20", cy: "17", r: "1.8", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "11.4", r: "2.3", fill: C_CONSTRUCT })
   ] }),
   circleIntersection: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7.6", r: "2", fill: C_CONSTRUCT }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16.4", r: "2", fill: C_CONSTRUCT })
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6.8", r: "2", fill: C_CONSTRUCT }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "17.2", r: "2", fill: C_CONSTRUCT })
   ] }),
   tangentPointExt: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "14", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.3" }),
-    /* @__PURE__ */ jsx("circle", { cx: "3.5", cy: "12", r: "1.8", fill: C_POINT }),
-    /* @__PURE__ */ jsx("line", { x1: "3.5", y1: "12", x2: "17.5", y2: "7.5", stroke: "currentColor", strokeWidth: "1.2" }),
-    /* @__PURE__ */ jsx("line", { x1: "3.5", y1: "12", x2: "17.5", y2: "16.5", stroke: "currentColor", strokeWidth: "1.2" }),
-    /* @__PURE__ */ jsx("circle", { cx: "17.5", cy: "7.5", r: "1.8", fill: C_CONSTRUCT }),
-    /* @__PURE__ */ jsx("circle", { cx: "17.5", cy: "16.5", r: "1.8", fill: C_CONSTRUCT })
+    /* @__PURE__ */ jsx("circle", { cx: "13", cy: "12", r: "6", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "11.8", y2: "18.6", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "11.8", y2: "5.4", stroke: "currentColor", strokeWidth: "1.3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "12", r: "2", fill: C_POINT }),
+    /* @__PURE__ */ jsx("circle", { cx: "9.4", cy: "16.8", r: "1.8", fill: C_CONSTRUCT }),
+    /* @__PURE__ */ jsx("circle", { cx: "9.4", cy: "7.2", r: "1.8", fill: C_CONSTRUCT })
   ] }),
   circleCR: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7.5", stroke: "currentColor", strokeWidth: "1.3" }),
@@ -375,9 +383,11 @@ var Icon = {
     /* @__PURE__ */ jsx("path", { d: "M3 19 L12 4 L21 19 Z", stroke: "currentColor", strokeWidth: "1.3", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "14", r: "4.2", fill: "none", stroke: C_CONSTRUCT, strokeWidth: "1.3" })
   ] }),
-  excircle: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
-    /* @__PURE__ */ jsx("path", { d: "M6 9 L14 4 L18 13 Z", stroke: "currentColor", strokeWidth: "1.2" }),
-    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "17", r: "4.6", fill: "none", stroke: C_CONSTRUCT, strokeWidth: "1.3" })
+  excircle: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("polygon", { points: "12,3 15,15 9,15", stroke: "currentColor", strokeWidth: "1.4", fill: "none" }),
+    /* @__PURE__ */ jsx("line", { x1: "9", y1: "15", x2: "8", y2: "18.9", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.6 1.6" }),
+    /* @__PURE__ */ jsx("line", { x1: "15", y1: "15", x2: "16", y2: "18.9", stroke: "#94a3b8", strokeWidth: "1", strokeDasharray: "1.6 1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "18.9", r: "3.8", stroke: C_CONSTRUCT, strokeWidth: "1.5", fill: C_CONSTRUCT, fillOpacity: "0.12" })
   ] }),
   pointOn: /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7.5", stroke: "currentColor", strokeWidth: "1.3" }),
@@ -2122,11 +2132,11 @@ function buildObjectSnapshot(state, id, anchorScreen) {
   const obj = state.objects[id];
   if (!obj) return null;
   const k = obj.kind;
-  if (k !== "point" && k !== "line" && k !== "circle" && k !== "segment" && k !== "ray" && k !== "vector") {
+  if (k !== "point" && k !== "line" && k !== "circle" && k !== "segment" && k !== "ray" && k !== "vector" && k !== "intersection") {
     return null;
   }
   const a = obj.attrs;
-  const jKind = k === "point" ? "point" : k === "circle" ? "circle" : "line";
+  const jKind = k === "point" || k === "intersection" ? "point" : k === "circle" ? "circle" : "line";
   return {
     id,
     kind: jKind,
@@ -2702,6 +2712,11 @@ var MiniBoard2D = forwardRef(function MiniBoard2D2({ onReady, store, selectedToo
       rendererRef.current = new JxgRenderer(store, board, {
         theme: paletteFor(isDarkRef.current)
       });
+      if (isDefaultBbox(initialView.bbox)) {
+        const el = containerRef.current;
+        const aspect = el && el.clientHeight > 0 ? el.clientWidth / el.clientHeight : 1;
+        safeJsx("MiniBoard.autoFit", () => autoFitBoardToContent(board, aspect));
+      }
       if (containerRef.current) {
         wheelCleanup = attachJxgWheelZoom(containerRef.current, board, "MiniBoard.2d");
       }
@@ -3271,6 +3286,7 @@ function useAiFigure(generator) {
   const [prompt, setPrompt] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [notice, setNotice] = useState(null);
   const [tokens, setTokens] = useState(0);
   const abortRef = useRef(null);
   const requestIdRef = useRef(0);
@@ -3291,6 +3307,7 @@ function useAiFigure(generator) {
     abortRef.current = controller;
     setIsLoading(true);
     setError(null);
+    setNotice(null);
     setTokens(0);
     try {
       const generated = await generator(problem, {
@@ -3304,6 +3321,7 @@ function useAiFigure(generator) {
         setError(generated.message);
         return null;
       }
+      if (generated.partial) setNotice(generated.partial.message);
       return generated.state;
     } catch (caught) {
       if (controller.signal.aborted || caught instanceof DOMException && caught.name === "AbortError") {
@@ -3330,6 +3348,7 @@ function useAiFigure(generator) {
     setPrompt,
     isLoading,
     error,
+    notice,
     submit,
     cancel,
     tokens
@@ -3353,12 +3372,27 @@ 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" }) });
+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-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" })
+  }
+);
 function AiFigurePrompt({ generator, onGenerated }) {
   const {
     prompt,
     setPrompt,
     isLoading,
     error,
+    notice,
     submit,
     cancel,
     tokens
@@ -3372,20 +3406,136 @@ function AiFigurePrompt({ generator, onGenerated }) {
     const id = setInterval(() => setElapsed((s) => s + 1), 1e3);
     return () => clearInterval(id);
   }, [isLoading]);
+  const [noticeDismissed, setNoticeDismissed] = useState(false);
+  useEffect(() => {
+    setNoticeDismissed(false);
+  }, [notice]);
+  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 handleExtractProblem(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]);
   const handleSendClick = useCallback(async () => {
+    if (image && !prompt.trim() && !ocrLoading) {
+      await runOcr();
+      return;
+    }
     const generated = await submit();
     if (generated) onGenerated(generated);
-  }, [submit, onGenerated]);
+  }, [image, prompt, ocrLoading, runOcr, submit, onGenerated]);
   const promptEmpty = !prompt.trim();
-  const sendDisabled = promptEmpty || isLoading;
+  const willOcr = image != null && promptEmpty;
+  const sendDisabled = !image && promptEmpty || ocrLoading || isLoading && !willOcr;
+  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" : "M\xF4 t\u1EA3 \u0111\u1EC1 b\xE0i c\u1EA7n d\u1EF1ng \u2014 ho\u1EB7c d\xE1n/\u0111\xEDnh \u1EA3nh \u0111\u1EC1 (Ctrl+V).";
   return /* @__PURE__ */ jsxs("div", { className: "border-b border-slate-200 bg-slate-50 px-3 py-3", children: [
     /* @__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",
       {
-        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",
+        onDragOver: (e) => {
+          e.preventDefault();
+          setIsDragOver(true);
+        },
+        onDragLeave: () => setIsDragOver(false),
+        onDrop: handleDrop,
+        onPaste: handlePaste,
+        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" : ""),
         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",
             {
@@ -3403,41 +3553,102 @@ function AiFigurePrompt({ generator, onGenerated }) {
               },
               disabled: isLoading,
               rows: 2,
-              placeholder: "M\xF4 t\u1EA3 \u0111\u1EC1 b\xE0i c\u1EA7n d\u1EF1ng.",
+              placeholder,
               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__ */ 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("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" })
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: error })
+    ocrWarning && /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "mt-1 px-1 text-xs text-amber-700",
+        "data-testid": "geometry-ai-ocr-warning",
+        children: ocrWarning
+      }
+    ),
+    ocrError && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: ocrError }),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: error }),
+    notice && !noticeDismissed && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "status",
+        "data-testid": "geometry-ai-partial-notice",
+        className: "relative mt-2 whitespace-pre-wrap rounded-lg border border-amber-200 bg-amber-50 py-2 pl-3 pr-8 text-xs leading-relaxed text-amber-800",
+        children: [
+          notice,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setNoticeDismissed(true),
+              "aria-label": "\u0110\xF3ng th\xF4ng b\xE1o",
+              title: "\u0110\xF3ng th\xF4ng b\xE1o",
+              "data-testid": "geometry-ai-partial-dismiss",
+              className: "absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded text-amber-500 transition hover:bg-amber-100 hover:text-amber-800",
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 
@@ -3946,7 +4157,8 @@ var GeometryStampHost = forwardRef(
               version: 1,
               jsonState
             }),
-            editingElementId: editingElement?.id ?? null
+            editingElementId: editingElement?.id ?? null,
+            preserveExistingSize: true
           });
         } catch (err) {
           console.error("Geometry insert failed:", err);
@@ -4034,5 +4246,5 @@ var GeometryStampHost = forwardRef(
 );
 
 export { GeometryStampHost };
-//# sourceMappingURL=host-HKMZSCIT.mjs.map
-//# sourceMappingURL=host-HKMZSCIT.mjs.map
+//# sourceMappingURL=host-KMWP7KBT.mjs.map
+//# sourceMappingURL=host-KMWP7KBT.mjs.map