@reopt-ai/opt-ui 1.4.1 → 1.5.0

package/dist/index.js

@@ -66,7 +66,7 @@ import {
   formatOptTime,
   getShaderFragment,
   getShaderPreset
-} from "./chunk-ELWICXYY.js";
+} from "./chunk-VBGPEW45.js";
 import {
   AppMenubar,
   BranchSelect,
@@ -101,7 +101,7 @@ import {
   WorkflowCanvas,
   toast,
   useToast
-} from "./chunk-QWBHD54V.js";
+} from "./chunk-3XD4HIFL.js";
 import {
   Alert,
   AlertDialogPanel,
@@ -3138,10 +3138,18 @@ function SqlEditor({
   const viewRef = React6.useRef(
     null
   );
+  const latestValueRef = React6.useRef(value);
+  const onChangeRef = React6.useRef(onChange);
+  const onRunRef = React6.useRef(onRun);
+  latestValueRef.current = value;
+  onChangeRef.current = onChange;
+  onRunRef.current = onRun;
   React6.useEffect(() => {
     let view = null;
+    let cancelled = false;
     async function init() {
-      if (!editorRef.current) return;
+      const parent = editorRef.current;
+      if (!parent) return;
       const [
         { EditorView, keymap, placeholder: cmPlaceholder },
         { EditorState },
@@ -3153,6 +3161,7 @@ function SqlEditor({
         import("@codemirror/lang-sql"),
         import("@codemirror/theme-one-dark")
       ]);
+      if (cancelled || !parent.isConnected) return;
       const extensions = [
         sql(),
         oneDark,
@@ -3169,18 +3178,19 @@ function SqlEditor({
         EditorView.lineWrapping,
         EditorView.updateListener.of((update) => {
           if (update.docChanged) {
-            onChange(update.state.doc.toString());
+            onChangeRef.current(update.state.doc.toString());
           }
         }),
         EditorView.editable.of(!readOnly)
       ];
-      if (onRun) {
+      if (onRunRef.current) {
         extensions.push(
           keymap.of([
             {
               key: "Mod-Enter",
               run: (v) => {
-                onRun(v.state.doc.toString());
+                var _a;
+                (_a = onRunRef.current) == null ? void 0 : _a.call(onRunRef, v.state.doc.toString());
                 return true;
               }
             }
@@ -3189,17 +3199,20 @@ function SqlEditor({
       }
       view = new EditorView({
         state: EditorState.create({
-          doc: value,
+          doc: latestValueRef.current,
           extensions
         }),
-        parent: editorRef.current
+        parent
       });
       viewRef.current = view;
     }
     init();
     return () => {
+      cancelled = true;
       view == null ? void 0 : view.destroy();
-      viewRef.current = null;
+      if (viewRef.current === view) {
+        viewRef.current = null;
+      }
     };
   }, []);
   React6.useEffect(() => {
@@ -6389,8 +6402,39 @@ function SidebarHeader({
 SidebarHeader.displayName = "Sidebar.Header";
 function SidebarContent({
   children,
-  className
+  className,
+  onKeyDown
 }) {
+  const handleKeyDown = (event) => {
+    var _a;
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    const items = Array.from(
+      event.currentTarget.querySelectorAll(
+        "[data-sidebar-item]:not([disabled]):not([aria-disabled='true'])"
+      )
+    );
+    const target = event.target instanceof HTMLElement ? event.target.closest("[data-sidebar-item]") : null;
+    const currentIndex = target ? items.indexOf(target) : -1;
+    if (currentIndex < 0 || items.length === 0) return;
+    let nextIndex = null;
+    if (event.key === "ArrowDown") {
+      nextIndex = (currentIndex + 1) % items.length;
+    } else if (event.key === "ArrowUp") {
+      nextIndex = (currentIndex - 1 + items.length) % items.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = items.length - 1;
+    }
+    if (nextIndex === null) return;
+    event.preventDefault();
+    const nextItem = items[nextIndex];
+    nextItem == null ? void 0 : nextItem.focus({ preventScroll: true });
+    (_a = nextItem == null ? void 0 : nextItem.scrollIntoView) == null ? void 0 : _a.call(nextItem, { block: "nearest" });
+  };
   return /* @__PURE__ */ jsx34(
     "nav",
     {
@@ -6398,6 +6442,7 @@ function SidebarContent({
         "flex-1 overflow-x-hidden overflow-y-auto px-2 py-1",
         className
       ),
+      onKeyDown: handleKeyDown,
       children
     }
   );
@@ -6528,6 +6573,7 @@ function SidebarItem({
     {
       href,
       onClick,
+      "data-sidebar-item": "",
       "aria-current": active ? "page" : void 0,
       "aria-label": ariaLabel,
       className: sharedClassName,
@@ -6538,6 +6584,7 @@ function SidebarItem({
     {
       type: "button",
       onClick,
+      "data-sidebar-item": "",
       "aria-current": active ? "page" : void 0,
       "aria-label": ariaLabel,
       className: sharedClassName,
@@ -6545,9 +6592,9 @@ function SidebarItem({
     }
   );
   if (isCollapsed && tooltipText) {
-    return /* @__PURE__ */ jsxs29(TooltipProvider, { placement: "right", children: [
+    return /* @__PURE__ */ jsxs29(TooltipProvider, { placement: "right", portal: true, children: [
       /* @__PURE__ */ jsx34(TooltipAnchor, { render: element }),
-      /* @__PURE__ */ jsx34(Tooltip, { className: "bg-foreground text-background z-50 rounded-md px-2 py-1 text-xs shadow-lg", children: tooltipText })
+      /* @__PURE__ */ jsx34(Tooltip, { className: "bg-foreground text-background z-[120] rounded-md px-2 py-1 text-xs shadow-lg", children: tooltipText })
     ] });
   }
   return element;
@@ -6612,7 +6659,7 @@ function SidebarRoot({
       "data-collapsed": collapsed || void 0,
       "data-side": side,
       className: cn(
-        "bg-surface sticky top-0 flex h-screen flex-col transition-[width] duration-200",
+        "bg-surface sticky top-0 flex h-screen shrink-0 flex-col transition-[width] duration-200",
         className
       ),
       style: { width: currentWidth },
@@ -6659,7 +6706,7 @@ function AppShellSidebar({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx35("div", { className: cn("hidden xl:block", className), children });
+  return /* @__PURE__ */ jsx35("div", { className: cn("shrink-0", className), children });
 }
 AppShellSidebar.displayName = "AppShell.Sidebar";
 function AppShellContent({
@@ -7043,13 +7090,16 @@ function BulkActions({
 
 // src/shells/saved-filters.tsx
 import * as React20 from "react";
+import { Trash2 } from "lucide-react";
 import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var defaultLabels24 = {
   triggerLabel: (count) => `Saved Filters (${count})`,
   emptyMessage: "No saved filters",
   deleteLabel: (name) => `Delete ${name}`,
   namePlaceholder: "Filter name\u2026",
-  saveLabel: "Save"
+  saveLabel: "Save",
+  confirmDeleteLabel: "Confirm",
+  cancelDeleteLabel: "Cancel"
 };
 function SavedFilters({
   currentFilters,
@@ -7062,10 +7112,41 @@ function SavedFilters({
 }) {
   const labels = __spreadValues(__spreadValues({}, defaultLabels24), customLabels);
   const [newName, setNewName] = React20.useState("");
-  return /* @__PURE__ */ jsxs36(PopoverRoot, { "data-opt-id": "DAB08", "data-opt-slug": "saved-filters.SavedFilters", children: [
+  const [pendingDeleteId, setPendingDeleteId] = React20.useState(
+    null
+  );
+  const triggerId = React20.useId();
+  const restoreDeleteTrigger = React20.useCallback((presetId) => {
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = Array.from(
+        document.querySelectorAll("[data-saved-filter-delete]")
+      ).find((element) => element.dataset.savedFilterDelete === presetId)) == null ? void 0 : _a.focus();
+    });
+  }, []);
+  const cancelPendingDelete = React20.useCallback(
+    (presetId) => {
+      setPendingDeleteId(null);
+      restoreDeleteTrigger(presetId);
+    },
+    [restoreDeleteTrigger]
+  );
+  React20.useEffect(() => {
+    if (!pendingDeleteId) return;
+    const cancelDelete = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        cancelPendingDelete(pendingDeleteId);
+      }
+    };
+    window.addEventListener("keydown", cancelDelete);
+    return () => window.removeEventListener("keydown", cancelDelete);
+  }, [cancelPendingDelete, pendingDeleteId]);
+  return /* @__PURE__ */ jsxs36(PopoverRoot, { "data-opt-id": "SPRCB", "data-opt-slug": "saved-filters.SavedFilters", children: [
     /* @__PURE__ */ jsx41(
       PopoverTrigger,
       {
+        id: triggerId,
         className: cn(
           "border-border bg-surface text-text-primary hover:bg-bg-subtle inline-flex h-9 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium",
           className
@@ -7073,63 +7154,159 @@ function SavedFilters({
         children: labels.triggerLabel(presets.length)
       }
     ),
-    /* @__PURE__ */ jsx41(PopoverContent, { className: "w-64", children: /* @__PURE__ */ jsxs36("div", { className: "gap-group flex flex-col p-2", children: [
-      presets.length > 0 && /* @__PURE__ */ jsx41("div", { className: "gap-element flex flex-col", children: presets.map((preset) => /* @__PURE__ */ jsxs36(
-        "div",
+    /* @__PURE__ */ jsx41(PopoverContent, { className: "w-72", children: /* @__PURE__ */ jsxs36("section", { className: "gap-group flex flex-col p-2", children: [
+      presets.length > 0 && /* @__PURE__ */ jsx41(
+        "ul",
+        {
+          className: "gap-element m-0 flex list-none flex-col p-0",
+          onKeyDown: (event) => {
+            var _a;
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || !(event.target instanceof HTMLElement)) {
+              return;
+            }
+            const items = Array.from(
+              event.currentTarget.querySelectorAll(
+                "[data-saved-filter-item]"
+              )
+            );
+            const current = event.target.closest(
+              "[data-saved-filter-item]"
+            );
+            const index = current ? items.indexOf(current) : -1;
+            if (index < 0 || items.length === 0) return;
+            let next = null;
+            if (event.key === "ArrowDown") {
+              next = (index + 1) % items.length;
+            } else if (event.key === "ArrowUp") {
+              next = (index - 1 + items.length) % items.length;
+            } else if (event.key === "Home") {
+              next = 0;
+            } else if (event.key === "End") {
+              next = items.length - 1;
+            }
+            if (next === null) return;
+            event.preventDefault();
+            (_a = items[next]) == null ? void 0 : _a.focus({ preventScroll: true });
+          },
+          children: presets.map((preset) => /* @__PURE__ */ jsxs36(
+            "li",
+            {
+              className: "gap-element hover:bg-bg-subtle flex min-h-9 items-center justify-between rounded-md px-2 py-1.5",
+              children: [
+                /* @__PURE__ */ jsx41(
+                  "button",
+                  {
+                    type: "button",
+                    "data-saved-filter-item": "",
+                    className: "text-text-primary min-w-0 flex-1 truncate text-left text-sm",
+                    onClick: () => {
+                      setPendingDeleteId(null);
+                      onLoadPreset(preset);
+                    },
+                    children: preset.name
+                  }
+                ),
+                /* @__PURE__ */ jsx41(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "text-text-tertiary hover:text-danger size-7 p-0",
+                    "data-saved-filter-delete": preset.id,
+                    "aria-expanded": pendingDeleteId === preset.id,
+                    "aria-controls": pendingDeleteId === preset.id ? `${triggerId}-${preset.id}` : void 0,
+                    onClick: () => setPendingDeleteId(preset.id),
+                    "aria-label": labels.deleteLabel(preset.name),
+                    children: /* @__PURE__ */ jsx41(Trash2, { size: 14, "aria-hidden": "true" })
+                  }
+                ),
+                pendingDeleteId === preset.id ? /* @__PURE__ */ jsxs36(
+                  "span",
+                  {
+                    className: "flex flex-none items-center gap-1",
+                    onKeyDownCapture: (event) => {
+                      if (event.key === "Escape") {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        cancelPendingDelete(preset.id);
+                      }
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx41(
+                        Button,
+                        {
+                          id: `${triggerId}-${preset.id}`,
+                          variant: "danger",
+                          size: "sm",
+                          className: "h-7 px-2",
+                          autoFocus: true,
+                          onClick: () => {
+                            onDeletePreset(preset.id);
+                            setPendingDeleteId(null);
+                            requestAnimationFrame(() => {
+                              var _a;
+                              (_a = document.getElementById(triggerId)) == null ? void 0 : _a.focus();
+                            });
+                          },
+                          children: labels.confirmDeleteLabel
+                        }
+                      ),
+                      /* @__PURE__ */ jsx41(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "sm",
+                          className: "h-7 px-2",
+                          onClick: () => cancelPendingDelete(preset.id),
+                          children: labels.cancelDeleteLabel
+                        }
+                      )
+                    ]
+                  }
+                ) : null
+              ]
+            },
+            preset.id
+          ))
+        }
+      ),
+      presets.length === 0 && /* @__PURE__ */ jsx41("p", { className: "text-text-tertiary px-2 py-1 text-sm", children: labels.emptyMessage }),
+      /* @__PURE__ */ jsxs36(
+        "form",
         {
-          className: "hover:bg-bg-subtle flex items-center justify-between rounded-md px-2 py-1.5",
+          className: "gap-element border-border flex border-t pt-2",
+          onSubmit: (event) => {
+            event.preventDefault();
+            if (newName.trim()) {
+              onSavePreset(newName.trim(), currentFilters);
+              setNewName("");
+              setPendingDeleteId(null);
+            }
+          },
           children: [
             /* @__PURE__ */ jsx41(
-              "button",
+              Input,
               {
-                type: "button",
-                className: "text-text-primary flex-1 text-left text-sm",
-                onClick: () => onLoadPreset(preset),
-                children: preset.name
+                value: newName,
+                onChange: (e) => setNewName(e.target.value),
+                placeholder: labels.namePlaceholder,
+                "aria-label": labels.namePlaceholder,
+                className: "h-8 text-sm"
               }
             ),
             /* @__PURE__ */ jsx41(
-              "button",
+              Button,
               {
-                type: "button",
-                className: "text-text-tertiary hover:text-danger text-xs",
-                onClick: () => onDeletePreset(preset.id),
-                "aria-label": labels.deleteLabel(preset.name),
-                children: "\xD7"
+                type: "submit",
+                size: "sm",
+                disabled: !newName.trim(),
+                className: "h-8",
+                children: labels.saveLabel
               }
             )
           ]
-        },
-        preset.id
-      )) }),
-      presets.length === 0 && /* @__PURE__ */ jsx41("p", { className: "text-text-tertiary px-2 py-1 text-sm", children: labels.emptyMessage }),
-      /* @__PURE__ */ jsxs36("div", { className: "gap-element border-border flex border-t pt-2", children: [
-        /* @__PURE__ */ jsx41(
-          Input,
-          {
-            value: newName,
-            onChange: (e) => setNewName(e.target.value),
-            placeholder: labels.namePlaceholder,
-            "aria-label": labels.namePlaceholder,
-            className: "h-8 text-sm"
-          }
-        ),
-        /* @__PURE__ */ jsx41(
-          "button",
-          {
-            type: "button",
-            disabled: !newName.trim(),
-            className: "bg-accent text-accent-fg hover:bg-accent-hover inline-flex h-8 items-center rounded-md px-3 text-sm font-medium disabled:opacity-50",
-            onClick: () => {
-              if (newName.trim()) {
-                onSavePreset(newName.trim(), currentFilters);
-                setNewName("");
-              }
-            },
-            children: labels.saveLabel
-          }
-        )
-      ] })
+        }
+      )
     ] }) })
   ] });
 }
@@ -8324,7 +8501,7 @@ function MegaMenu({
 MegaMenu.displayName = "MegaMenu";
 
 // src/shells/chat-sidebar.tsx
-import { useState as useState24, useEffect as useEffect7, useCallback as useCallback12 } from "react";
+import { useState as useState24, useEffect as useEffect8, useCallback as useCallback13 } from "react";
 import { jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
 var defaultLabels30 = {
   newChat: "\uC0C8 \uB300\uD654",
@@ -8344,10 +8521,10 @@ function ChatSidebar({
   const labels = __spreadValues(__spreadValues({}, defaultLabels30), customLabels);
   const [searchQuery, setSearchQuery] = useState24("");
   const [isHydrated, setIsHydrated] = useState24(false);
-  useEffect7(() => {
+  useEffect8(() => {
     setIsHydrated(true);
   }, []);
-  const handleSearch = useCallback12(
+  const handleSearch = useCallback13(
     (value) => {
       setSearchQuery(value);
       onSearch == null ? void 0 : onSearch(value);
@@ -8495,7 +8672,7 @@ ChatSidebar.displayName = "ChatSidebar";
 // src/shells/chat-input.tsx
 import {
   useRef as useRef8,
-  useCallback as useCallback13,
+  useCallback as useCallback14,
   useLayoutEffect
 } from "react";
 import { jsx as jsx54, jsxs as jsxs49 } from "react/jsx-runtime";
@@ -8544,13 +8721,13 @@ function ChatInput({
     const maxHeight = lineHeight * maxRows;
     textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
   }, [value, maxRows]);
-  const handleSend = useCallback13(() => {
+  const handleSend = useCallback14(() => {
     const trimmed = value.trim();
     if (!trimmed || disabled) return;
     onSend == null ? void 0 : onSend(trimmed);
     setValue("");
   }, [value, disabled, onSend, setValue]);
-  const handleKeyDown = useCallback13(
+  const handleKeyDown = useCallback14(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -8715,8 +8892,8 @@ ChatInput.displayName = "ChatInput";
 // src/shells/chat-message-list.tsx
 import {
   useRef as useRef9,
-  useEffect as useEffect8,
-  useCallback as useCallback14,
+  useEffect as useEffect9,
+  useCallback as useCallback15,
   useState as useState25
 } from "react";
 import { jsx as jsx55, jsxs as jsxs50 } from "react/jsx-runtime";
@@ -8741,19 +8918,19 @@ function ChatMessageList({
   const labels = __spreadValues(__spreadValues(__spreadValues({}, defaultLabels32), customLabels), userName ? { userLabel: userName } : {});
   const scrollRef = useRef9(null);
   const [isUserScrolledUp, setIsUserScrolledUp] = useState25(false);
-  const scrollToBottom = useCallback14(() => {
+  const scrollToBottom = useCallback15(() => {
     const el = scrollRef.current;
     if (!el) return;
     el.scrollTop = el.scrollHeight;
   }, []);
-  const handleScroll = useCallback14(() => {
+  const handleScroll = useCallback15(() => {
     const el = scrollRef.current;
     if (!el) return;
     const threshold = 50;
     const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
     setIsUserScrolledUp(!isAtBottom);
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (autoScroll && !isUserScrolledUp) {
       scrollToBottom();
     }
@@ -8875,11 +9052,11 @@ ChatMessageList.displayName = "ChatMessageList";
 
 // src/utils/route-focus-manager.tsx
 import { usePathname } from "next/navigation";
-import { useEffect as useEffect9, useRef as useRef10 } from "react";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
 function RouteFocusManager() {
   const pathname = usePathname();
   const prevPathname = useRef10(pathname);
-  useEffect9(() => {
+  useEffect10(() => {
     if (prevPathname.current === pathname) return;
     prevPathname.current = pathname;
     const timer = setTimeout(() => {
@@ -9380,7 +9557,7 @@ function DesignGuidePanel({ className }) {
 }
 
 // src/lib/spatial-nav.ts
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 var TABBABLE_SELECTOR = [
   "a[href]:not([tabindex='-1'])",
   "button:not([disabled]):not([tabindex='-1'])",
@@ -9563,7 +9740,7 @@ function emitDecision(detail) {
   }
 }
 function useSpatialNav() {
-  useEffect10(() => {
+  useEffect11(() => {
     function handleKeyDown(e) {
       var _a;
       if (!ARROW_KEYS.has(e.key)) return;