@xom11/whiteboard 0.29.0 → 0.30.0

package/dist/{chunk-GEC2D2EQ.mjs → chunk-XVVLT6B3.mjs}

@@ -5,7 +5,7 @@ import { lazy } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var GeometryStampHost = lazy(
-  () => import('./host-HKMZSCIT.mjs').then((m) => ({ default: m.GeometryStampHost }))
+  () => import('./host-3UFGFMJ2.mjs').then((m) => ({ default: m.GeometryStampHost }))
 );
 var GeometryIcon = /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
   /* @__PURE__ */ jsx("polygon", { points: "4,20 20,20 12,5" }),
@@ -38,5 +38,5 @@ var geometryStamp = {
 };
 
 export { geometryStamp };
-//# sourceMappingURL=chunk-GEC2D2EQ.mjs.map
-//# sourceMappingURL=chunk-GEC2D2EQ.mjs.map
+//# sourceMappingURL=chunk-XVVLT6B3.mjs.map
+//# sourceMappingURL=chunk-XVVLT6B3.mjs.map

package/dist/{chunk-GEC2D2EQ.mjs.map → chunk-XVVLT6B3.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/stamps/geometry-2d/index.tsx"],"names":[],"mappings":";;;;;AAgBA,IAAM,iBAAA,GAAoB,IAAA;AAAA,EAAK,MAC7B,OAAO,qBAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,MAAO,EAAE,OAAA,EAAS,CAAA,CAAE,iBAAA,EAAkB,CAAE;AACjE,CAAA;AAEA,IAAM,YAAA,wBACH,KAAA,EAAA,EAAI,KAAA,EAAM,MAAK,MAAA,EAAO,IAAA,EAAK,SAAQ,WAAA,EAAY,IAAA,EAAK,QAAO,MAAA,EAAO,cAAA,EAAe,aAAY,KAAA,EAAM,aAAA,EAAc,SAAQ,cAAA,EAAe,OAAA,EAAQ,eAAY,MAAA,EAC3J,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAQ,QAAO,iBAAA,EAAkB,CAAA;AAAA,kBAClC,GAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM,IAAA,EAAK,cAAA,EAAe,MAAA,EAAO,MAAA,EAAO,CAAA;AAAA,kBACjE,GAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM,IAAA,EAAK,cAAA,EAAe,MAAA,EAAO,MAAA,EAAO,CAAA;AAAA,kBAClE,GAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,GAAA,EAAI,CAAA,EAAE,KAAA,EAAM,IAAA,EAAK,cAAA,EAAe,MAAA,EAAO,MAAA,EAAO;AAAA,CAAA,EACnE,CAAA;AAGK,IAAM,aAAA,GAA+C;AAAA,EAC1D,IAAA,EAAM,UAAA;AAAA,EACN,WAAA,EAAa,GAAA;AAAA,EACb,YAAA,EAAc,GAAA;AAAA,EACd,YAAA,EAAc,8BAAA;AAAA,EACd,WAAA,EAAa,YAAA;AAAA,EACb,aAAA,EAAe,wBAAA;AAAA,EACf,iBAAA,EAAmB,oBAAA;AAAA,EACnB,MAAM,wBAAwB,IAAA,EAAM;AAClC,IAAA,IAAI,CAAC,oBAAA,CAAqB,IAAI,CAAA,EAAG;AAC/B,MAAA,MAAM,IAAI,MAAM,+EAAuE,CAAA;AAAA,IACzF;AACA,IAAA,OAAO,0BAAA,CAA2B,KAAK,SAAS,CAAA;AAAA,EAClD,CAAA;AAAA,EACA,MAAM,0BAA0B,OAAA,EAA4C;AAC1E,IAAA,MAAM,OAAO,OAAA,CAAQ,UAAA;AACrB,IAAA,MAAM,SAAU,OAAA,CAAuC,MAAA;AACvD,IAAA,IAAI,CAAC,QAAQ,CAAC,MAAA,IAAU,CAAC,oBAAA,CAAqB,IAAI,GAAG,OAAO,IAAA;AAC5D,IAAA,MAAM,SAAA,GAAY,MAAM,0BAAA,CAA2B,IAAA,CAAK,SAAS,CAAA;AACjE,IAAA,OAAO,cAAA,CAAe,WAAW,MAAM,CAAA;AAAA,EACzC,CAAA;AAAA,EACA,IAAA,EAAM;AACR","file":"chunk-GEC2D2EQ.mjs","sourcesContent":["'use client';\n\nimport { lazy, type ReactNode } from 'react';\nimport { renderGeometrySvgFromState } from './render';\nimport type {\n  RestoredStampFile,\n  StampType,\n} from '../shared/types';\nimport { svgToStampFile } from '../shared/svgToStampFile';\nimport {\n  isGeometryCustomData,\n  type GeometryCustomData,\n} from './types';\n\nexport type { GeometryCustomData };\n\nconst GeometryStampHost = lazy(() =>\n  import('./host').then((m) => ({ default: m.GeometryStampHost })),\n);\n\nconst GeometryIcon: ReactNode = (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polygon points=\"4,20 20,20 12,5\" />\n    <circle cx=\"4\" cy=\"20\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\" />\n    <circle cx=\"20\" cy=\"20\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\" />\n    <circle cx=\"12\" cy=\"5\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\" />\n  </svg>\n);\n\nexport const geometryStamp: StampType<GeometryCustomData> = {\n  kind: 'geometry',\n  shortcutKey: 'g',\n  toolbarLabel: 'G',\n  toolbarTitle: 'Chèn hình học (G)',\n  toolbarIcon: GeometryIcon,\n  toolbarTestId: 'stamp-toolbar-geometry',\n  matchesCustomData: isGeometryCustomData,\n  async renderSvgFromCustomData(data) {\n    if (!isGeometryCustomData(data)) {\n      throw new Error('geometryStamp.renderSvgFromCustomData: customData không phải geometry');\n    }\n    return renderGeometrySvgFromState(data.jsonState);\n  },\n  async restoreFileFromCustomData(element): Promise<RestoredStampFile | null> {\n    const data = element.customData as GeometryCustomData | undefined;\n    const fileId = (element as { fileId?: string | null }).fileId;\n    if (!data || !fileId || !isGeometryCustomData(data)) return null;\n    const svgString = await renderGeometrySvgFromState(data.jsonState);\n    return svgToStampFile(svgString, fileId);\n  },\n  Host: GeometryStampHost,\n};\n"]}
+{"version":3,"sources":["../src/stamps/geometry-2d/index.tsx"],"names":[],"mappings":";;;;;AAgBA,IAAM,iBAAA,GAAoB,IAAA;AAAA,EAAK,MAC7B,OAAO,qBAAQ,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,MAAO,EAAE,OAAA,EAAS,CAAA,CAAE,iBAAA,EAAkB,CAAE;AACjE,CAAA;AAEA,IAAM,YAAA,wBACH,KAAA,EAAA,EAAI,KAAA,EAAM,MAAK,MAAA,EAAO,IAAA,EAAK,SAAQ,WAAA,EAAY,IAAA,EAAK,QAAO,MAAA,EAAO,cAAA,EAAe,aAAY,KAAA,EAAM,aAAA,EAAc,SAAQ,cAAA,EAAe,OAAA,EAAQ,eAAY,MAAA,EAC3J,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAQ,QAAO,iBAAA,EAAkB,CAAA;AAAA,kBAClC,GAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,GAAA,EAAI,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM,IAAA,EAAK,cAAA,EAAe,MAAA,EAAO,MAAA,EAAO,CAAA;AAAA,kBACjE,GAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,CAAA,EAAE,KAAA,EAAM,IAAA,EAAK,cAAA,EAAe,MAAA,EAAO,MAAA,EAAO,CAAA;AAAA,kBAClE,GAAA,CAAC,QAAA,EAAA,EAAO,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,GAAA,EAAI,CAAA,EAAE,KAAA,EAAM,IAAA,EAAK,cAAA,EAAe,MAAA,EAAO,MAAA,EAAO;AAAA,CAAA,EACnE,CAAA;AAGK,IAAM,aAAA,GAA+C;AAAA,EAC1D,IAAA,EAAM,UAAA;AAAA,EACN,WAAA,EAAa,GAAA;AAAA,EACb,YAAA,EAAc,GAAA;AAAA,EACd,YAAA,EAAc,8BAAA;AAAA,EACd,WAAA,EAAa,YAAA;AAAA,EACb,aAAA,EAAe,wBAAA;AAAA,EACf,iBAAA,EAAmB,oBAAA;AAAA,EACnB,MAAM,wBAAwB,IAAA,EAAM;AAClC,IAAA,IAAI,CAAC,oBAAA,CAAqB,IAAI,CAAA,EAAG;AAC/B,MAAA,MAAM,IAAI,MAAM,+EAAuE,CAAA;AAAA,IACzF;AACA,IAAA,OAAO,0BAAA,CAA2B,KAAK,SAAS,CAAA;AAAA,EAClD,CAAA;AAAA,EACA,MAAM,0BAA0B,OAAA,EAA4C;AAC1E,IAAA,MAAM,OAAO,OAAA,CAAQ,UAAA;AACrB,IAAA,MAAM,SAAU,OAAA,CAAuC,MAAA;AACvD,IAAA,IAAI,CAAC,QAAQ,CAAC,MAAA,IAAU,CAAC,oBAAA,CAAqB,IAAI,GAAG,OAAO,IAAA;AAC5D,IAAA,MAAM,SAAA,GAAY,MAAM,0BAAA,CAA2B,IAAA,CAAK,SAAS,CAAA;AACjE,IAAA,OAAO,cAAA,CAAe,WAAW,MAAM,CAAA;AAAA,EACzC,CAAA;AAAA,EACA,IAAA,EAAM;AACR","file":"chunk-XVVLT6B3.mjs","sourcesContent":["'use client';\n\nimport { lazy, type ReactNode } from 'react';\nimport { renderGeometrySvgFromState } from './render';\nimport type {\n  RestoredStampFile,\n  StampType,\n} from '../shared/types';\nimport { svgToStampFile } from '../shared/svgToStampFile';\nimport {\n  isGeometryCustomData,\n  type GeometryCustomData,\n} from './types';\n\nexport type { GeometryCustomData };\n\nconst GeometryStampHost = lazy(() =>\n  import('./host').then((m) => ({ default: m.GeometryStampHost })),\n);\n\nconst GeometryIcon: ReactNode = (\n  <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polygon points=\"4,20 20,20 12,5\" />\n    <circle cx=\"4\" cy=\"20\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\" />\n    <circle cx=\"20\" cy=\"20\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\" />\n    <circle cx=\"12\" cy=\"5\" r=\"1.4\" fill=\"currentColor\" stroke=\"none\" />\n  </svg>\n);\n\nexport const geometryStamp: StampType<GeometryCustomData> = {\n  kind: 'geometry',\n  shortcutKey: 'g',\n  toolbarLabel: 'G',\n  toolbarTitle: 'Chèn hình học (G)',\n  toolbarIcon: GeometryIcon,\n  toolbarTestId: 'stamp-toolbar-geometry',\n  matchesCustomData: isGeometryCustomData,\n  async renderSvgFromCustomData(data) {\n    if (!isGeometryCustomData(data)) {\n      throw new Error('geometryStamp.renderSvgFromCustomData: customData không phải geometry');\n    }\n    return renderGeometrySvgFromState(data.jsonState);\n  },\n  async restoreFileFromCustomData(element): Promise<RestoredStampFile | null> {\n    const data = element.customData as GeometryCustomData | undefined;\n    const fileId = (element as { fileId?: string | null }).fileId;\n    if (!data || !fileId || !isGeometryCustomData(data)) return null;\n    const svgString = await renderGeometrySvgFromState(data.jsonState);\n    return svgToStampFile(svgString, fileId);\n  },\n  Host: GeometryStampHost,\n};\n"]}

package/dist/geometry-2d.js

@@ -9328,6 +9328,200 @@ var init_useAiFigure = __esm({
     "use client";
   }
 });
+
+// src/stamps/geometry-2d/ai/vision/tesseract.ts
+async function runTesseractOcr(image, opts = {}) {
+  if (opts.signal?.aborted) {
+    const err = new Error("Tesseract OCR aborted");
+    err.name = "AbortError";
+    throw err;
+  }
+  const { createWorker } = await import('tesseract.js');
+  const lang = opts.lang ?? DEFAULT_LANG;
+  const worker = await createWorker(lang);
+  try {
+    const dataUrl = `data:${image.mediaType};base64,${image.base64}`;
+    const { data } = await worker.recognize(dataUrl);
+    return { text: data.text, confidence: data.confidence };
+  } finally {
+    await worker.terminate();
+  }
+}
+var DEFAULT_LANG;
+var init_tesseract = __esm({
+  "src/stamps/geometry-2d/ai/vision/tesseract.ts"() {
+    DEFAULT_LANG = "vie+eng";
+  }
+});
+
+// src/stamps/geometry-2d/ai/vision/extractProblem.ts
+async function extractProblemFromImage(image, opts = {}) {
+  let raw;
+  try {
+    raw = await runTesseractOcr(image, {
+      ...opts.tesseractLang ? { lang: opts.tesseractLang } : {},
+      ...opts.signal ? { signal: opts.signal } : {}
+    });
+  } catch (e) {
+    const err = e;
+    return {
+      ok: false,
+      reason: "unreadable",
+      message: "Tesseract OCR fail: " + (err.message ?? "?")
+    };
+  }
+  const text = postProcess(raw.text);
+  if (text.length === 0) {
+    return { ok: false, reason: "empty", message: "Tesseract kh\xF4ng tr\xEDch \u0111\u01B0\u1EE3c text." };
+  }
+  const tooShort = text.length < MIN_HIGH_CONFIDENCE_CHARS;
+  const lowConf = raw.confidence < TESSERACT_HIGH_CONFIDENCE_THRESHOLD;
+  const confidence = tooShort || lowConf ? "low" : "high";
+  return {
+    ok: true,
+    text,
+    confidence,
+    usage: { inputTokens: 0, outputTokens: 0 }
+  };
+}
+function postProcess(raw) {
+  let t = raw.trim();
+  t = t.replace(/\*\*(.+?)\*\*/g, "$1");
+  t = t.replace(/\*(.+?)\*/g, "$1");
+  t = t.replace(/_(.+?)_/g, "$1");
+  t = t.replace(/```[\s\S]*?```/g, "").replace(/`([^`]+)`/g, "$1");
+  t = t.replace(/\s+/g, " ").trim();
+  t = t.normalize("NFC");
+  if (t.length > MAX_TEXT_CHARS) t = t.slice(0, MAX_TEXT_CHARS);
+  return t;
+}
+var MIN_HIGH_CONFIDENCE_CHARS, MAX_TEXT_CHARS, TESSERACT_HIGH_CONFIDENCE_THRESHOLD;
+var init_extractProblem = __esm({
+  "src/stamps/geometry-2d/ai/vision/extractProblem.ts"() {
+    init_tesseract();
+    MIN_HIGH_CONFIDENCE_CHARS = 10;
+    MAX_TEXT_CHARS = 2e3;
+    TESSERACT_HIGH_CONFIDENCE_THRESHOLD = 70;
+  }
+});
+
+// src/stamps/geometry-2d/ai/handleExtractProblem.ts
+async function handleExtractProblem(image, opts = {}) {
+  try {
+    const r = await extractProblemFromImage(image, opts);
+    if (r.ok) {
+      if (r.confidence === "low") {
+        return {
+          kind: "low-confidence",
+          text: r.text,
+          warning: "OCR c\xF3 th\u1EC3 kh\xF4ng ch\xEDnh x\xE1c, ki\u1EC3m tra tr\u01B0\u1EDBc khi v\u1EBD.",
+          usage: r.usage
+        };
+      }
+      return { kind: "success", text: r.text, usage: r.usage };
+    }
+    if (r.reason === "not-math") {
+      return { kind: "refused", reason: "not-math", message: r.message };
+    }
+    if (r.reason === "unsupported") {
+      return { kind: "error", code: "unsupported", message: r.message };
+    }
+    if (r.reason === "unreadable") {
+      return { kind: "error", code: "network", message: r.message };
+    }
+    return { kind: "error", code: "empty", message: r.message };
+  } catch (e) {
+    return {
+      kind: "error",
+      code: "unexpected",
+      message: e instanceof Error ? e.message : String(e)
+    };
+  }
+}
+var init_handleExtractProblem = __esm({
+  "src/stamps/geometry-2d/ai/handleExtractProblem.ts"() {
+    init_extractProblem();
+  }
+});
+
+// src/stamps/geometry-2d/ai/vision/preprocess.ts
+function inferMediaType(file) {
+  const t = file.type.toLowerCase();
+  if (ALLOWED_TYPES.includes(t)) return t;
+  return null;
+}
+function validateFile(file) {
+  const mt = inferMediaType(file);
+  if (mt == null) {
+    return {
+      ok: false,
+      code: "invalid-format",
+      message: "Ch\u1EC9 h\u1ED7 tr\u1EE3 PNG, JPEG, WEBP."
+    };
+  }
+  if (file.size > MAX_RAW_BYTES) {
+    return {
+      ok: false,
+      code: "too-large",
+      message: `\u1EA2nh qu\xE1 l\u1EDBn (> ${Math.round(MAX_RAW_BYTES / 1024 / 1024)} MB). Crop ho\u1EB7c resize tr\u01B0\u1EDBc.`
+    };
+  }
+  return { ok: true, mediaType: mt };
+}
+async function fileToImagePart(file) {
+  const v = validateFile(file);
+  if (!v.ok) throw new Error(v.message);
+  const bitmap = await createImageBitmap(file);
+  const { width, height } = bitmap;
+  const maxEdge = Math.max(width, height);
+  const scale = maxEdge > MAX_EDGE_PX ? MAX_EDGE_PX / maxEdge : 1;
+  const targetW = Math.round(width * scale);
+  const targetH = Math.round(height * scale);
+  const canvas = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(targetW, targetH) : Object.assign(document.createElement("canvas"), { width: targetW, height: targetH });
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Kh\xF4ng t\u1EA1o \u0111\u01B0\u1EE3c canvas 2D context");
+  ctx.drawImage(bitmap, 0, 0, targetW, targetH);
+  bitmap.close();
+  let outputType = v.mediaType === "image/png" ? "image/png" : "image/jpeg";
+  let finalBlob = await canvasToBlob(canvas, outputType, 0.92);
+  if (finalBlob.size > MAX_ENCODED_BYTES) {
+    outputType = "image/jpeg";
+    finalBlob = await canvasToBlob(canvas, "image/jpeg", 0.7);
+  }
+  const base64 = await blobToBase64(finalBlob);
+  return { mediaType: outputType, base64 };
+}
+async function canvasToBlob(canvas, type, quality) {
+  if ("convertToBlob" in canvas) {
+    return canvas.convertToBlob({ type, quality });
+  }
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (b) => b ? resolve(b) : reject(new Error("Canvas encode fail")),
+      type,
+      quality
+    );
+  });
+}
+async function blobToBase64(blob) {
+  const buf = await blob.arrayBuffer();
+  let binary = "";
+  const bytes = new Uint8Array(buf);
+  const chunk = 32768;
+  for (let i = 0; i < bytes.length; i += chunk) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+  }
+  return typeof btoa === "function" ? btoa(binary) : Buffer.from(binary, "binary").toString("base64");
+}
+var MAX_EDGE_PX, MAX_RAW_BYTES, MAX_ENCODED_BYTES, ALLOWED_TYPES;
+var init_preprocess = __esm({
+  "src/stamps/geometry-2d/ai/vision/preprocess.ts"() {
+    MAX_EDGE_PX = 2048;
+    MAX_RAW_BYTES = 10 * 1024 * 1024;
+    MAX_ENCODED_BYTES = 3 * 1024 * 1024;
+    ALLOWED_TYPES = ["image/png", "image/jpeg", "image/webp"];
+  }
+});
 function AiFigurePrompt({ generator, onGenerated }) {
   const {
     prompt,
@@ -9347,20 +9541,132 @@ function AiFigurePrompt({ generator, onGenerated }) {
     const id = setInterval(() => setElapsed((s) => s + 1), 1e3);
     return () => clearInterval(id);
   }, [isLoading]);
+  const [image, setImage] = React2.useState(null);
+  const [ocrLoading, setOcrLoading] = React2.useState(false);
+  const [ocrError, setOcrError] = React2.useState(null);
+  const [ocrWarning, setOcrWarning] = React2.useState(null);
+  const [isDragOver, setIsDragOver] = React2.useState(false);
+  const fileInputRef = React2.useRef(null);
   const textareaRef = React2.useRef(null);
+  const imagePreview = image ? `data:${image.mediaType};base64,${image.base64}` : null;
+  React2.useEffect(() => {
+    setOcrError(null);
+    setOcrWarning(null);
+  }, [image]);
+  const handleFile = React2.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 = React2.useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (file) void handleFile(file);
+      e.target.value = "";
+    },
+    [handleFile]
+  );
+  const handlePaste = React2.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 = React2.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 = React2.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 = React2.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__ */ jsxRuntime.jsxs("div", { className: "border-b border-slate-200 bg-slate-50 px-3 py-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium tracking-wide text-slate-600", children: "D\u1EF1ng h\xECnh b\u1EB1ng AI" }) }),
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 px-3 pt-2.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/chip relative", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "textarea",
             {
@@ -9378,48 +9684,88 @@ 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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-2 px-2 pb-2 pt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] tabular-nums text-slate-500", children: tokens > 0 ? `${tokens}tok \xB7 ${elapsed}s` : `${elapsed}s` }),
-            isLoading ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StopIcon, { className: "h-3.5 w-3.5" })
-              }
-            ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ArrowUpIcon, { className: "h-[18px] w-[18px]" })
-              }
-            )
-          ] }) })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 px-2 pb-2 pt-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PaperclipIcon, { className: "h-[18px] w-[18px]" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              (isLoading || ocrLoading) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StopIcon, { className: "h-3.5 w-3.5" })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ArrowUpIcon, { className: "h-[18px] w-[18px]" })
+                }
+              )
+            ] })
+          ] }),
+          isDragOver && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "mt-1 px-1 text-xs text-amber-700",
+        "data-testid": "geometry-ai-ocr-warning",
+        children: ocrWarning
+      }
+    ),
+    ocrError && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: ocrError }),
     error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-1 px-1 text-xs text-red-600", children: error })
   ] });
 }
-var ArrowUpIcon, StopIcon;
+var ArrowUpIcon, StopIcon, PaperclipIcon;
 var init_AiFigurePrompt = __esm({
   "src/stamps/geometry-2d/editor/AiFigurePrompt.tsx"() {
     "use client";
     init_useAiFigure();
+    init_handleExtractProblem();
+    init_preprocess();
     ArrowUpIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
       "svg",
       {
@@ -9438,6 +9784,20 @@ var init_AiFigurePrompt = __esm({
       }
     );
     StopIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) });
+    PaperclipIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.75,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": true,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.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" })
+      }
+    );
   }
 });