@xom11/whiteboard 0.24.1 → 0.25.0

package/dist/{host-DOAYVL35.mjs → host-L7FMFZUW.mjs}

@@ -1,17 +1,20 @@
 "use client";
-import { useToolStateMachine } from './chunk-NVJ7K3DK.mjs';
-import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-MFOGFFIL.mjs';
-import { JxgRenderer } from './chunk-BKSXPNPQ.mjs';
 import { useChordShortcut } from './chunk-HNQLZIEP.mjs';
-import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel } from './chunk-4D5CSIJO.mjs';
+import { useToolStateMachine } from './chunk-NVJ7K3DK.mjs';
+import { safeJsx, initJxgBoard, attachJxgWheelZoom, useToast, ToastHost, STAMP_PANEL_DESKTOP, ToastProvider, useStampStore, StampLeftPanel, ObjectRow } from './chunk-TB4CL25L.mjs';
+import { serializeBoard, renderGeometrySvgFromState, isGeometryCustomData, deserializeBoard } from './chunk-VRHWDZ66.mjs';
 import { themeLabel, paletteFor, themeAxis, themeGrid } from './chunk-R5FL6S7L.mjs';
+import { JxgRenderer } from './chunk-AYSFWUPK.mjs';
 import './chunk-ICR4CVOE.mjs';
-import { DEFAULT_VIEW_2D, nextLabel, useEditorState, listObjects } from './chunk-6V4SH4JJ.mjs';
-import './chunk-ZBJBQKJ2.mjs';
+import { nextLabel, useEditorState, listObjects } from './chunk-REIJZDVZ.mjs';
+import './chunk-IHUFOV7L.mjs';
+import { describeDsl, serializeState } from './chunk-VNCCIV6O.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 { forwardRef, useRef, useId, useState, useEffect, useCallback, useImperativeHandle, useLayoutEffect, useMemo } from 'react';
+import { forwardRef, useRef, useId, useState, useEffect, useCallback, useImperativeHandle, useSyncExternalStore, useMemo, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -2619,12 +2622,41 @@ var TransformParamPopover = ({ kind, anchor, defaultValue, onConfirm, onCancel,
   );
   return createPortal(node, document.body);
 };
-function useAiFigure(generator) {
+function useAiFigure(generator, options = {}) {
+  const { currentState } = options;
   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();
@@ -2642,8 +2674,15 @@ function useAiFigure(generator) {
     abortRef.current = controller;
     setIsLoading(true);
     setError(null);
+    setTokens(0);
     try {
-      const generated = await generator(problem, { signal: controller.signal });
+      const generated = await generator(problem, {
+        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) {
         setError(generated.message);
@@ -2655,7 +2694,9 @@ function useAiFigure(generator) {
         return null;
       }
       if (requestId === requestIdRef.current) {
-        setError(caught instanceof Error && caught.message ? caught.message : "Kh\xF4ng th\u1EC3 d\u1EF1ng h\xECnh b\u1EB1ng AI.");
+        setError(
+          caught instanceof Error && caught.message ? caught.message : "Kh\xF4ng th\u1EC3 d\u1EF1ng h\xECnh b\u1EB1ng AI."
+        );
       }
       return null;
     } finally {
@@ -2664,22 +2705,81 @@ function useAiFigure(generator) {
         setIsLoading(false);
       }
     }
-  }, [generator, prompt]);
-  return { prompt, setPrompt, isLoading, error, submit };
+  }, [generator, prompt, mode, currentDsl]);
+  const cancel = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+  return {
+    prompt,
+    setPrompt,
+    isLoading,
+    error,
+    submit,
+    cancel,
+    tokens,
+    mode,
+    setMode,
+    entityCount,
+    hasUnsupported
+  };
 }
-function AiFigurePrompt({ generator, onGenerated }) {
+var BUILD_EXAMPLES = [
+  "Tam gi\xE1c ABC, d\u1EF1ng trung \u0111i\u1EC3m M c\u1EE7a BC",
+  "Tam gi\xE1c ABC vu\xF4ng t\u1EA1i A, AH l\xE0 \u0111\u01B0\u1EDDng cao xu\u1ED1ng BC",
+  "H\xECnh thoi ABCD, hai \u0111\u01B0\u1EDDng ch\xE9o c\u1EAFt nhau t\u1EA1i O",
+  "T\u1EEB \u0111i\u1EC3m M ngo\xE0i \u0111\u01B0\u1EDDng tr\xF2n (O), k\u1EBB hai ti\u1EBFp tuy\u1EBFn"
+];
+var REFINE_EXAMPLES = [
+  "Th\xEAm trung \u0111i\u1EC3m M c\u1EE7a BC",
+  "D\u1EF1ng \u0111\u01B0\u1EDDng cao AH xu\u1ED1ng BC",
+  "V\u1EBD \u0111\u01B0\u1EDDng tr\xF2n ngo\u1EA1i ti\u1EBFp",
+  "Th\xEAm ti\u1EBFp tuy\u1EBFn t\u1EA1i A"
+];
+function AiFigurePrompt({ generator, onGenerated, currentState }) {
   const {
     prompt,
     setPrompt,
     isLoading,
     error,
-    submit
-  } = useAiFigure(generator);
-  const handleSubmit = useCallback(async (event) => {
-    event.preventDefault();
-    const generated = await submit();
-    if (generated) onGenerated(generated);
-  }, [onGenerated, submit]);
+    submit,
+    cancel,
+    tokens,
+    mode,
+    setMode,
+    entityCount,
+    hasUnsupported
+  } = useAiFigure(generator, { currentState });
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    if (!isLoading) {
+      setElapsed(0);
+      return;
+    }
+    setElapsed(0);
+    const id = setInterval(() => setElapsed((s) => s + 1), 1e3);
+    return () => clearInterval(id);
+  }, [isLoading]);
+  const handleSubmit = useCallback(
+    async (event) => {
+      event.preventDefault();
+      const generated = await submit();
+      if (generated) onGenerated(generated);
+    },
+    [onGenerated, submit]
+  );
+  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 primaryLabel = isLoading ? tokens > 0 ? `\u0110ang d\u1EF1ng ${tokens}tok / ${elapsed}s \u2014 Hu\u1EF7` : `\u0110ang d\u1EF1ng... ${elapsed}s \u2014 Hu\u1EF7` : "D\u1EF1ng b\u1EB1ng AI";
+  const hasContent = currentState != null && currentState.order.length > 0;
+  const examples = mode === "refine" ? REFINE_EXAMPLES : BUILD_EXAMPLES;
+  const refineChipLabel = entityCount.points + entityCount.shapes > 0 ? `Th\xEAm v\xE0o \xB7 ${entityCount.points}\u0111, ${entityCount.shapes}\u0111o\u1EA1n` : "Th\xEAm v\xE0o";
   return /* @__PURE__ */ jsxs(
     "form",
     {
@@ -2689,7 +2789,47 @@ function AiFigurePrompt({ generator, onGenerated }) {
       },
       className: "border-b border-slate-200 bg-slate-50 px-3 py-2",
       children: [
-        /* @__PURE__ */ jsx("label", { htmlFor: "geometry-ai-prompt", className: "mb-1 block text-xs font-medium text-slate-600", children: "D\u1EF1ng h\xECnh b\u1EB1ng AI" }),
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: "geometry-ai-prompt",
+            className: "mb-1 block text-xs font-medium text-slate-600",
+            children: "D\u1EF1ng h\xECnh b\u1EB1ng AI"
+          }
+        ),
+        hasContent && /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-testid": "geometry-ai-mode-refine",
+              onClick: () => setMode("refine"),
+              disabled: isLoading || hasUnsupported,
+              className: `rounded-full border px-2 py-0.5 text-[11px] transition ${mode === "refine" ? "border-emerald-600 bg-emerald-100 text-emerald-800" : "border-slate-300 bg-white text-slate-600 hover:border-emerald-400"} ${hasUnsupported ? "cursor-not-allowed opacity-50" : ""}`,
+              title: hasUnsupported ? "H\xECnh hi\u1EC7n t\u1EA1i c\xF3 \u0111\u1ED1i t\u01B0\u1EE3ng ngo\xE0i DSL \u2014 ch\u1EC9 d\u1EF1ng m\u1EDBi \u0111\u01B0\u1EE3c" : refineChipLabel,
+              children: refineChipLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-testid": "geometry-ai-mode-build",
+              onClick: handleSwitchToBuild,
+              disabled: isLoading,
+              className: `rounded-full border px-2 py-0.5 text-[11px] transition ${mode === "build" ? "border-emerald-600 bg-emerald-100 text-emerald-800" : "border-slate-300 bg-white text-slate-600 hover:border-emerald-400"}`,
+              children: "D\u1EF1ng m\u1EDBi"
+            }
+          ),
+          hasUnsupported && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-[10px] text-amber-700",
+              "data-testid": "geometry-ai-unsupported-warning",
+              children: "H\xECnh c\xF3 \u0111\u1ED1i t\u01B0\u1EE3ng ngo\xE0i DSL"
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
           /* @__PURE__ */ jsx(
             "textarea",
@@ -2700,21 +2840,42 @@ function AiFigurePrompt({ generator, onGenerated }) {
               onChange: (event) => setPrompt(event.target.value),
               disabled: isLoading,
               rows: 2,
-              placeholder: "V\xED d\u1EE5: Cho tam gi\xE1c ABC, d\u1EF1ng \u0111\u01B0\u1EDDng cao AH.",
+              placeholder: mode === "refine" ? "V\xED d\u1EE5: th\xEAm trung \u0111i\u1EC3m M c\u1EE7a BC" : "V\xED d\u1EE5: Cho tam gi\xE1c ABC, d\u1EF1ng \u0111\u01B0\u1EDDng cao AH.",
               className: "min-h-12 flex-1 resize-none rounded border border-slate-300 bg-white px-2 py-1.5 text-xs text-slate-800 outline-none focus:border-emerald-500 disabled:opacity-60"
             }
           ),
-          /* @__PURE__ */ jsx(
+          isLoading ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: cancel,
+              className: "rounded bg-amber-600 px-3 py-2 text-xs font-medium text-white transition hover:bg-amber-700",
+              children: primaryLabel
+            }
+          ) : /* @__PURE__ */ jsx(
             "button",
             {
               type: "submit",
-              disabled: isLoading || !prompt.trim(),
+              disabled: !prompt.trim(),
               className: "rounded bg-emerald-600 px-3 py-2 text-xs font-medium text-white transition hover:bg-emerald-700 disabled:opacity-50",
-              children: isLoading ? "\u0110ang d\u1EF1ng..." : "D\u1EF1ng b\u1EB1ng AI"
+              children: primaryLabel
             }
           )
         ] }),
-        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-xs text-red-600", children: error })
+        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "mt-1 text-xs text-red-600", children: error }),
+        !isLoading && !prompt.trim() && !error && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-slate-500", children: "G\u1EE3i \xFD:" }),
+          examples.map((ex) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setPrompt(ex),
+              className: "rounded-full border border-slate-300 bg-white px-2 py-0.5 text-[10px] text-slate-600 transition hover:border-emerald-400 hover:bg-emerald-50 hover:text-emerald-700",
+              children: ex
+            },
+            ex
+          ))
+        ] })
       ]
     }
   );
@@ -2751,6 +2912,11 @@ var GeometryEditorPanelInner = forwardRef(
       onSelectionChangeRef.current = onSelectionChange;
     }, [onSelectionChange]);
     useEditorState({ store, onHistoryChange });
+    const currentSceneState = useSyncExternalStore(
+      (cb) => store.subscribe(cb),
+      () => store.getState(),
+      () => store.getState()
+    );
     useEffect(() => {
       const sync = () => setHasContent(Object.keys(store.getState().objects).length > 0);
       sync();
@@ -2944,7 +3110,7 @@ var GeometryEditorPanelInner = forwardRef(
               /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
             ] }) })
           ] }),
-          generateGeometryFigure && /* @__PURE__ */ jsx(AiFigurePrompt, { generator: generateGeometryFigure, onGenerated: loadAiFigure }),
+          generateGeometryFigure && /* @__PURE__ */ jsx(AiFigurePrompt, { generator: generateGeometryFigure, onGenerated: loadAiFigure, currentState: currentSceneState }),
           /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
             MiniBoard2D,
             {
@@ -3069,6 +3235,36 @@ var GeometryEditorPanel = forwardRef(
     return /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(GeometryEditorPanelInner, { ...props, ref }) });
   }
 );
+function makeDslRenderRow(store) {
+  return function renderDslRow(obj, defaults) {
+    const state = store.getState();
+    const noop = () => {
+    };
+    return /* @__PURE__ */ jsx(
+      ObjectRow,
+      {
+        obj,
+        state,
+        selected: defaults.selected,
+        onSelect: defaults.onClick,
+        onToggleVisible: (id) => {
+          const o = state.objects[id];
+          if (!o) return;
+          store.dispatch({ type: "UPDATE", payload: { id, patch: { visible: !o.visible } } });
+        },
+        onToggleLocked: (id) => {
+          const o = state.objects[id];
+          if (!o) return;
+          store.dispatch({ type: "UPDATE", payload: { id, patch: { locked: !o.locked } } });
+        },
+        onRename: noop,
+        onChangeColor: noop,
+        onDelete: (id) => store.dispatch({ type: "DELETE", payload: { id } }),
+        describe: describeDsl
+      }
+    );
+  };
+}
 function parseInitialState(data) {
   if (!isGeometryCustomData(data)) return null;
   return deserializeBoard(data.jsonState);
@@ -3099,6 +3295,7 @@ var GeometryStampHost = forwardRef(
       onSelect: (key) => setSelectedTool(key),
       enabled: !isMobile
     });
+    const renderRow = useMemo(() => makeDslRenderRow(sceneStore), [sceneStore]);
     const handleInsert = useCallback(
       async (jsonState, svgString) => {
         if (!api) return;
@@ -3160,7 +3357,8 @@ var GeometryStampHost = forwardRef(
             onObjectSelect: (id) => {
               setSelectedObjectId(id ?? void 0);
               panelRef.current?.selectObject(id);
-            }
+            },
+            renderRow
           },
           isMobile,
           drawerOpen,
@@ -3195,5 +3393,5 @@ var GeometryStampHost = forwardRef(
 );
 
 export { GeometryStampHost };
-//# sourceMappingURL=host-DOAYVL35.mjs.map
-//# sourceMappingURL=host-DOAYVL35.mjs.map
+//# sourceMappingURL=host-L7FMFZUW.mjs.map
+//# sourceMappingURL=host-L7FMFZUW.mjs.map