@xom11/whiteboard 0.25.0 → 0.28.0

package/dist/{chunk-TB4CL25L.mjs → chunk-OQIQNKPQ.mjs}

@@ -1,13 +1,30 @@
 "use client";
-import { listObjects } from './chunk-REIJZDVZ.mjs';
+import { listObjects } from './chunk-ZTQBUKLJ.mjs';
 import { createStore } from './chunk-IHUFOV7L.mjs';
 import { createEmptyState } from './chunk-73Q7ADVL.mjs';
 import { getKind } from './chunk-B4NJJZFR.mjs';
-import * as React2 from 'react';
-import React2__default, { createContext, useRef, useReducer, useCallback, useEffect, useMemo, useContext, useState } from 'react';
+import * as React from 'react';
+import React__default, { createContext, useRef, useReducer, useCallback, useEffect, useMemo, useContext, useState } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
+var FALLBACK_DEFAULT_WIDTH = 240;
+var FALLBACK_MIN_WIDTH = 220;
+var FALLBACK_MAX_WIDTH = 480;
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function readStoredWidth(key, fallback, min, max) {
+  if (!key || typeof window === "undefined") return fallback;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return fallback;
+    const n = parseInt(raw, 10);
+    if (Number.isFinite(n)) return clamp(n, min, max);
+  } catch {
+  }
+  return fallback;
+}
 function CloseIcon() {
   return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
     /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
@@ -15,8 +32,64 @@ function CloseIcon() {
   ] });
 }
 function LeftPanelShell(props) {
-  const { title, icon, onClose, isDark, tabs, activeTab, onTabChange, testId, children } = props;
+  const {
+    title,
+    icon,
+    onClose,
+    isDark,
+    tabs,
+    activeTab,
+    onTabChange,
+    testId,
+    resizable,
+    widthStorageKey,
+    defaultWidth,
+    minWidth,
+    maxWidth,
+    children
+  } = props;
   const showTabs = !!tabs && tabs.length >= 2;
+  const min = minWidth ?? FALLBACK_MIN_WIDTH;
+  const max = maxWidth ?? FALLBACK_MAX_WIDTH;
+  const initial = clamp(defaultWidth ?? FALLBACK_DEFAULT_WIDTH, min, max);
+  const [width, setWidth] = React.useState(
+    () => resizable ? readStoredWidth(widthStorageKey, initial, min, max) : initial
+  );
+  const widthRef = React.useRef(width);
+  widthRef.current = width;
+  React.useEffect(() => {
+    if (!resizable || !widthStorageKey || typeof window === "undefined") return;
+    try {
+      window.localStorage.setItem(widthStorageKey, String(width));
+    } catch {
+    }
+  }, [resizable, widthStorageKey, width]);
+  const onResizeStart = React.useCallback(
+    (e) => {
+      if (!resizable) return;
+      e.preventDefault();
+      const startX = e.clientX;
+      const startW = widthRef.current;
+      const onMove = (ev) => {
+        setWidth(clamp(startW + (ev.clientX - startX), min, max));
+      };
+      const onUp = () => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+      document.body.style.cursor = "ew-resize";
+      document.body.style.userSelect = "none";
+    },
+    [resizable, min, max]
+  );
+  const onResizeDoubleClick = React.useCallback(() => {
+    if (!resizable) return;
+    setWidth(initial);
+  }, [resizable, initial]);
   return /* @__PURE__ */ jsxs(
     "aside",
     {
@@ -24,10 +97,12 @@ function LeftPanelShell(props) {
       "aria-label": title,
       "data-testid": testId ?? "left-panel",
       "data-stamp-area": "true",
+      style: resizable ? { width: `${width}px` } : void 0,
       className: [
         isDark ? "theme--dark " : "",
-        "absolute left-0 top-0 z-30 flex h-full w-60 flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200"
-      ].join(""),
+        "absolute left-0 top-0 z-30 flex h-full flex-col border-r border-slate-200 bg-white shadow-md animate-in slide-in-from-left duration-200",
+        resizable ? "" : "w-60"
+      ].join(" "),
       children: [
         /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between border-b border-slate-200 bg-gradient-to-r from-slate-50 to-white px-3 py-2", children: [
           /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-2 text-sm font-semibold text-slate-800", children: [
@@ -62,6 +137,20 @@ function LeftPanelShell(props) {
             className: "min-h-0 flex-1 overflow-y-auto p-3 space-y-3",
             children
           }
+        ),
+        resizable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": "K\xE9o \u0111\u1EC3 \u0111\u1ED5i r\u1ED9ng panel",
+            "data-testid": "left-panel-resizer",
+            onMouseDown: onResizeStart,
+            onDoubleClick: onResizeDoubleClick,
+            className: "group absolute right-0 top-0 z-40 h-full w-1.5 -mr-0.5 cursor-ew-resize select-none",
+            title: "K\xE9o \u0111\u1EC3 \u0111\u1ED5i r\u1ED9ng (double-click \u0111\u1EC3 reset)",
+            children: /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-px bg-slate-200 transition group-hover:bg-emerald-400 group-hover:w-0.5 group-active:bg-emerald-500 group-active:w-0.5" })
+          }
         )
       ]
     }
@@ -134,7 +223,7 @@ function getKindUiMeta(kind) {
 }
 function ObjectRowMenu(props) {
   const { locked, onToggleLocked, onRename, onChangeColor, onDelete } = props;
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React.useState(false);
   return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -274,11 +363,11 @@ function ObjectRow(props) {
 }
 function ObjectListPanel(props) {
   const { store, selectedId, onSelect, renderRow } = props;
-  const subscribe = React2.useCallback(
+  const subscribe = React.useCallback(
     (cb) => store.subscribe(() => cb()),
     [store]
   );
-  const state = React2.useSyncExternalStore(subscribe, store.getState, store.getState);
+  const state = React.useSyncExternalStore(subscribe, store.getState, store.getState);
   const objects = listObjects(state);
   function handleSelect(id) {
     onSelect?.(id === selectedId ? null : id);
@@ -309,7 +398,7 @@ function ObjectListPanel(props) {
         if (renderRow) {
           const custom = renderRow(obj, { selected, onClick });
           if (custom != null) {
-            return /* @__PURE__ */ jsx(React2.Fragment, { children: custom }, obj.id);
+            return /* @__PURE__ */ jsx(React.Fragment, { children: custom }, obj.id);
           }
         }
         return /* @__PURE__ */ jsx(
@@ -437,24 +526,115 @@ function useToolHoverTooltip() {
   }, []);
   return { hover, portalReady, showHover, hideHover };
 }
+function normalize(s) {
+  return s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/đ/g, "d").replace(/Đ/g, "d");
+}
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ jsx("line", { x1: "20", y1: "20", x2: "16.5", y2: "16.5" })
+  ] });
+}
+function ClearIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+  ] });
+}
+function ToolResultList(props) {
+  const { tools, activeTool, onToolChange } = props;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", "data-testid": "tool-result-list", children: tools.map((t) => {
+    const active = activeTool === t.key;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-tool": t.key,
+        "aria-label": t.label,
+        "aria-pressed": active,
+        onClick: () => onToolChange(t.key),
+        className: [
+          "flex items-center gap-2 rounded-md px-2 py-1.5 text-left transition",
+          active ? "bg-emerald-600 text-white" : "text-slate-700 hover:bg-slate-100"
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center", children: t.icon }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-[12px] font-medium leading-tight", children: t.label }),
+            t.hint && /* @__PURE__ */ jsx("span", { className: ["block truncate text-[10px] leading-tight", active ? "text-emerald-50" : "text-slate-400"].join(" "), children: t.hint })
+          ] })
+        ]
+      },
+      t.key
+    );
+  }) });
+}
 function ToolGrid(props) {
   const { tools, groupOrder, groupLabels, activeTool, onToolChange, chord } = props;
   const { hover, portalReady, showHover, hideHover } = useToolHoverTooltip();
+  const [query, setQuery] = useState("");
+  const normalizedQuery = useMemo(() => normalize(query.trim()), [query]);
+  const filteredTools = useMemo(() => {
+    if (!normalizedQuery) return tools;
+    return tools.filter((t) => {
+      if (normalize(t.label).includes(normalizedQuery)) return true;
+      if (t.hint && normalize(t.hint).includes(normalizedQuery)) return true;
+      return false;
+    });
+  }, [tools, normalizedQuery]);
   const grouped = useMemo(() => {
     var _a;
     const acc = {};
-    for (const t of tools) {
+    for (const t of filteredTools) {
       (acc[_a = t.group] ?? (acc[_a] = [])).push(t);
     }
     return acc;
-  }, [tools]);
+  }, [filteredTools]);
   const groupKeys = useMemo(
-    () => groupOrder.filter((g) => grouped[g]),
+    () => groupOrder.filter((g) => grouped[g] && grouped[g].length > 0),
     [grouped, groupOrder]
   );
-  const activeGroupTools = chord?.activeGroup ? grouped[chord.activeGroup] ?? null : null;
+  const noMatch = normalizedQuery !== "" && groupKeys.length === 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    groupKeys.map((group) => {
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-slate-400", children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "search",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder: "T\xECm c\xF4ng c\u1EE5\u2026",
+          "aria-label": "T\xECm c\xF4ng c\u1EE5",
+          "data-testid": "tool-search-input",
+          className: "w-full rounded-md border border-slate-200 bg-slate-50 py-1.5 pl-7 pr-7 text-[12px] text-slate-800 placeholder:text-slate-400 focus:border-emerald-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-emerald-300"
+        }
+      ),
+      query && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setQuery(""),
+          "aria-label": "Xo\xE1 t\xECm ki\u1EBFm",
+          "data-testid": "tool-search-clear",
+          className: "absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-slate-400 transition hover:bg-slate-200 hover:text-slate-700",
+          children: /* @__PURE__ */ jsx(ClearIcon, {})
+        }
+      )
+    ] }),
+    noMatch && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "tool-search-empty",
+        className: "rounded-md border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-center text-[11px] text-slate-500",
+        children: [
+          "Kh\xF4ng c\xF3 c\xF4ng c\u1EE5 n\xE0o kh\u1EDBp \u201C",
+          query.trim(),
+          "\u201D."
+        ]
+      }
+    ),
+    normalizedQuery !== "" && !noMatch ? /* @__PURE__ */ jsx(ToolResultList, { tools: filteredTools, activeTool, onToolChange }) : groupKeys.map((group) => {
       const isChordActive = chord?.activeGroup === group;
       const dimmed = chord?.activeGroup != null && !isChordActive;
       return /* @__PURE__ */ jsxs(
@@ -468,23 +648,10 @@ function ToolGrid(props) {
             dimmed ? "opacity-55" : "opacity-100"
           ].join(" "),
           children: [
-            /* @__PURE__ */ jsxs("h4", { className: "mb-1.5 flex items-center justify-between text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: [
-              /* @__PURE__ */ jsx("span", { children: groupLabels[group] }),
-              chord && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-testid": `chord-letter-${group}`,
-                  className: [
-                    "font-mono text-[10px] leading-none transition",
-                    isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
-                  ].join(" "),
-                  children: chord.letterForGroup(group)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1", children: grouped[group].map((t, i) => {
+            /* @__PURE__ */ jsx("h4", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500", children: groupLabels[group] }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-1", children: grouped[group].map((t) => {
               const active = activeTool === t.key;
-              return /* @__PURE__ */ jsxs(
+              return /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -501,20 +668,7 @@ function ToolGrid(props) {
                     "relative flex h-10 items-center justify-center rounded-md transition",
                     active ? "bg-emerald-600 text-white shadow-sm" : "text-slate-700 hover:bg-slate-100 hover:text-slate-900"
                   ].join(" "),
-                  children: [
-                    t.icon,
-                    chord && /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        "data-testid": `chord-num-${t.key}`,
-                        className: [
-                          "pointer-events-none absolute bottom-0 right-0.5 font-mono text-[9px] leading-none transition",
-                          active ? "text-white/70" : isChordActive ? "text-emerald-700 font-bold" : "text-slate-400"
-                        ].join(" "),
-                        children: i + 1
-                      }
-                    )
-                  ]
+                  children: t.icon
                 },
                 t.key
               );
@@ -524,22 +678,6 @@ function ToolGrid(props) {
         group
       );
     }),
-    chord?.activeGroup && activeGroupTools && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-testid": "chord-hint",
-        className: "mt-1 rounded border border-emerald-200 bg-emerald-50/60 px-2 py-1 text-[11px] leading-snug text-slate-600",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-emerald-700", children: chord.letterForGroup(chord.activeGroup) }),
-          /* @__PURE__ */ jsx("span", { className: "mx-1 text-slate-400", children: "\u2192" }),
-          activeGroupTools.map((t, i) => /* @__PURE__ */ jsxs("span", { className: "mr-2 inline-block", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-mono font-semibold text-emerald-700", children: i + 1 }),
-            /* @__PURE__ */ jsx("span", { className: "ml-1", children: t.label })
-          ] }, t.key)),
-          /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "Esc hu\u1EF7" })
-        ]
-      }
-    ),
     portalReady && hover && typeof document !== "undefined" ? createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -600,6 +738,8 @@ function StampLeftPanelDesktop(props) {
       tabs: tabSpecs,
       activeTab: hasObjects ? tab : void 0,
       onTabChange: hasObjects ? setTab : void 0,
+      resizable: true,
+      widthStorageKey: "xom11.stamp-left-panel.width",
       children: !hasObjects || tab === "tools" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(AxisGridSection, { view, history }),
         /* @__PURE__ */ jsx(
@@ -652,9 +792,9 @@ function MobileToolDrawer({
   testId,
   objectsTab
 }) {
-  const [mobileTab, setMobileTab] = React2__default.useState("tools");
-  const prevOpenRef = React2__default.useRef(drawerOpen);
-  React2__default.useEffect(() => {
+  const [mobileTab, setMobileTab] = React__default.useState("tools");
+  const prevOpenRef = React__default.useRef(drawerOpen);
+  React__default.useEffect(() => {
     if (!prevOpenRef.current && drawerOpen) setMobileTab("tools");
     prevOpenRef.current = drawerOpen;
   }, [drawerOpen]);
@@ -1165,5 +1305,5 @@ async function initJxgBoard(target, config) {
 }
 
 export { ObjectRow, STAMP_PANEL_DESKTOP, StampLeftPanel, ToastHost, ToastProvider, attachJxgWheelZoom, initJxgBoard, safeJsx, useStampStore, useToast };
-//# sourceMappingURL=chunk-TB4CL25L.mjs.map
-//# sourceMappingURL=chunk-TB4CL25L.mjs.map
+//# sourceMappingURL=chunk-OQIQNKPQ.mjs.map
+//# sourceMappingURL=chunk-OQIQNKPQ.mjs.map