@xom11/whiteboard 0.29.0 → 0.30.0

package/dist/geometry-2d.mjs

@@ -1,5 +1,5 @@
 "use client";
-export { geometryStamp } from './chunk-GEC2D2EQ.mjs';
+export { geometryStamp } from './chunk-XVVLT6B3.mjs';
 import './chunk-H22OZYTW.mjs';
 import './chunk-R5FL6S7L.mjs';
 import './chunk-SZDAS7LK.mjs';

package/dist/handleExtractProblem-BrDY9ifM.d.mts

@@ -0,0 +1,58 @@
+interface ImagePart {
+    /** Whitelist 3 format browser decode native được. */
+    mediaType: 'image/png' | 'image/jpeg' | 'image/webp';
+    /** Base64 không bao gồm "data:image/...;base64," prefix. */
+    base64: string;
+}
+
+interface ExtractProblemOptions {
+    /** Tesseract language. Default 'vie+eng' cho đề toán VN. */
+    tesseractLang?: string;
+    signal?: AbortSignal;
+}
+interface ExtractProblemSuccess {
+    ok: true;
+    text: string;
+    confidence: 'high' | 'low';
+    usage: {
+        inputTokens: number;
+        outputTokens: number;
+    };
+}
+interface ExtractProblemFailure {
+    ok: false;
+    reason: 'not-math' | 'unreadable' | 'empty' | 'unsupported';
+    message: string;
+}
+type ExtractProblemOutcome = ExtractProblemSuccess | ExtractProblemFailure;
+declare function extractProblemFromImage(image: ImagePart, opts?: ExtractProblemOptions): Promise<ExtractProblemOutcome>;
+
+interface HandleExtractProblemOptions extends ExtractProblemOptions {
+}
+type ExtractUiResult = {
+    kind: 'success';
+    text: string;
+    usage: {
+        inputTokens: number;
+        outputTokens: number;
+    };
+} | {
+    kind: 'low-confidence';
+    text: string;
+    warning: string;
+    usage: {
+        inputTokens: number;
+        outputTokens: number;
+    };
+} | {
+    kind: 'refused';
+    reason: 'not-math';
+    message: string;
+} | {
+    kind: 'error';
+    code: 'network' | 'unsupported' | 'unexpected' | 'empty';
+    message: string;
+};
+declare function handleExtractProblem(image: ImagePart, opts?: HandleExtractProblemOptions): Promise<ExtractUiResult>;
+
+export { type ExtractUiResult as E, type HandleExtractProblemOptions as H, type ImagePart as I, type ExtractProblemOptions as a, type ExtractProblemOutcome as b, extractProblemFromImage as e, handleExtractProblem as h };

package/dist/handleExtractProblem-BrDY9ifM.d.ts

@@ -0,0 +1,58 @@
+interface ImagePart {
+    /** Whitelist 3 format browser decode native được. */
+    mediaType: 'image/png' | 'image/jpeg' | 'image/webp';
+    /** Base64 không bao gồm "data:image/...;base64," prefix. */
+    base64: string;
+}
+
+interface ExtractProblemOptions {
+    /** Tesseract language. Default 'vie+eng' cho đề toán VN. */
+    tesseractLang?: string;
+    signal?: AbortSignal;
+}
+interface ExtractProblemSuccess {
+    ok: true;
+    text: string;
+    confidence: 'high' | 'low';
+    usage: {
+        inputTokens: number;
+        outputTokens: number;
+    };
+}
+interface ExtractProblemFailure {
+    ok: false;
+    reason: 'not-math' | 'unreadable' | 'empty' | 'unsupported';
+    message: string;
+}
+type ExtractProblemOutcome = ExtractProblemSuccess | ExtractProblemFailure;
+declare function extractProblemFromImage(image: ImagePart, opts?: ExtractProblemOptions): Promise<ExtractProblemOutcome>;
+
+interface HandleExtractProblemOptions extends ExtractProblemOptions {
+}
+type ExtractUiResult = {
+    kind: 'success';
+    text: string;
+    usage: {
+        inputTokens: number;
+        outputTokens: number;
+    };
+} | {
+    kind: 'low-confidence';
+    text: string;
+    warning: string;
+    usage: {
+        inputTokens: number;
+        outputTokens: number;
+    };
+} | {
+    kind: 'refused';
+    reason: 'not-math';
+    message: string;
+} | {
+    kind: 'error';
+    code: 'network' | 'unsupported' | 'unexpected' | 'empty';
+    message: string;
+};
+declare function handleExtractProblem(image: ImagePart, opts?: HandleExtractProblemOptions): Promise<ExtractUiResult>;
+
+export { type ExtractUiResult as E, type HandleExtractProblemOptions as H, type ImagePart as I, type ExtractProblemOptions as a, type ExtractProblemOutcome as b, extractProblemFromImage as e, handleExtractProblem as h };

package/dist/{host-HKMZSCIT.mjs → host-3UFGFMJ2.mjs}

@@ -8,7 +8,8 @@ import { JxgRenderer } from './chunk-SZDAS7LK.mjs';
 import './chunk-ICR4CVOE.mjs';
 import { nextLabel, useEditorState, listObjects } from './chunk-ZTQBUKLJ.mjs';
 import './chunk-IHUFOV7L.mjs';
-import { describeDsl } from './chunk-E6EDOPGT.mjs';
+import { validateFile, fileToImagePart, describeDsl } from './chunk-SF3U7ZF4.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';
@@ -3353,6 +3354,20 @@ 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,
@@ -3372,20 +3387,132 @@ function AiFigurePrompt({ generator, onGenerated }) {
     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 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,40 +3530,78 @@ 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" })
         ]
       }
     ),
+    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 })
   ] });
 }
@@ -4034,5 +4199,5 @@ var GeometryStampHost = forwardRef(
 );
 
 export { GeometryStampHost };
-//# sourceMappingURL=host-HKMZSCIT.mjs.map
-//# sourceMappingURL=host-HKMZSCIT.mjs.map
+//# sourceMappingURL=host-3UFGFMJ2.mjs.map
+//# sourceMappingURL=host-3UFGFMJ2.mjs.map