@tutti-os/workspace-file-reference 0.0.13 → 0.0.14

package/dist/ui/index.js

@@ -1,8 +1,14 @@
 import {
+  ROOT_CHILDREN_KEY,
+  createReferenceSourcePickerController,
   normalizeDirectoryPath,
   useWorkspaceFileReferencePickerView
-} from "../chunk-LS7P3J6Z.js";
-import "../chunk-PAR2R2G5.js";
+} from "../chunk-CD3YNHYJ.js";
+import {
+  WORKSPACE_ROOT_GROUP_NODE_ID,
+  nodeRefKey,
+  selectedReferenceToWorkspaceFileReference
+} from "../chunk-7C3RZYQE.js";
 
 // src/ui/internal/reference/WorkspaceFileReferencePicker.tsx
 import { useId } from "react";
@@ -45,7 +51,7 @@ import {
 } from "@tutti-os/ui-system";
 import { AddIcon as AddLinedIcon } from "@tutti-os/ui-system/icons";
 import { jsx, jsxs } from "react/jsx-runtime";
-var workspaceFileReferenceTreeIndent = 24;
+var workspaceFileReferenceTreeIndent = 28;
 var workspaceFileReferenceTreeCollapseDurationMs = 200;
 function WorkspaceFileReferencePickerBrowserPane({
   browseRootEntries,
@@ -197,7 +203,7 @@ function WorkspaceFileReferencePickerTreeEntry({
       "div",
       {
         className: cn(
-          "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-[6px] py-1.5 pr-1 pl-2 transition-colors",
+          "flex items-center gap-2 rounded-[6px] py-1.5 pr-1 transition-colors",
           "nodrag [-webkit-app-region:no-drag]",
           focused || selected ? "bg-transparency-block" : "hover:bg-transparency-block"
         ),
@@ -225,11 +231,11 @@ function WorkspaceFileReferencePickerTreeEntry({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx("span", { className: "block size-5 shrink-0" }),
+          ) : null,
           /* @__PURE__ */ jsxs(
             "button",
             {
-              className: "nodrag flex min-w-0 items-center gap-2 text-left [-webkit-app-region:no-drag]",
+              className: "nodrag flex min-w-0 flex-1 items-center gap-2 text-left [-webkit-app-region:no-drag]",
               type: "button",
               onClick: (event) => {
                 event.stopPropagation();
@@ -252,7 +258,7 @@ function WorkspaceFileReferencePickerTreeEntry({
               size: "icon-sm",
               type: "button",
               variant: "ghost",
-              className: "nodrag [-webkit-app-region:no-drag]",
+              className: "nodrag shrink-0 [-webkit-app-region:no-drag]",
               onClick: (event) => {
                 event.stopPropagation();
                 onFocusPath(entry.path);
@@ -670,7 +676,975 @@ function WorkspaceFileReferencePicker({
   }
   return createPortal(dialog, document.body);
 }
+
+// src/ui/internal/reference/ReferenceSourcePicker.tsx
+import {
+  useEffect as useEffect3,
+  useId as useId2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import {
+  ArrowRightIcon as ArrowRightIcon2,
+  Badge as Badge2,
+  Button as Button4,
+  Card as Card2,
+  CardContent as CardContent2,
+  CardHeader as CardHeader2,
+  CardTitle as CardTitle2,
+  CheckIcon as CheckIcon2,
+  CloseIcon as CloseIcon2,
+  FileIcon as FileIcon3,
+  FolderFilledIcon as FolderFilledIcon3,
+  Input as Input2,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ScrollArea as ScrollArea2,
+  SearchIcon as SearchIcon2,
+  Spinner as Spinner2,
+  cn as cn3
+} from "@tutti-os/ui-system";
+import { AddIcon } from "@tutti-os/ui-system/icons";
+
+// src/react/internal/reference/useReferenceSourcePickerView.ts
+import { useCallback, useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+import { useSnapshot } from "valtio";
+import {
+  sortWorkspaceFileEntriesForArrangeMode
+} from "@tutti-os/workspace-file-manager/services";
+var WORKSPACE_ROOT_GROUP_LABEL = "\u5DE5\u4F5C\u533A";
+function useReferenceSourcePickerView({
+  aggregator,
+  workspaceId,
+  open,
+  onClose,
+  onConfirm
+}) {
+  const readSnapshot = useSnapshot;
+  const scope = useMemo(() => ({ workspaceId }), [workspaceId]);
+  const controller = useMemo(
+    () => createReferenceSourcePickerController({ aggregator, scope }),
+    [aggregator, scope]
+  );
+  const snapshot = readSnapshot(controller.store);
+  const [breadcrumbBySource, setBreadcrumbBySource] = useState2({});
+  const [focusedNode, setFocusedNode] = useState2(null);
+  const [arrangeMode, setArrangeMode] = useState2("none");
+  const [expandedSources, setExpandedSources] = useState2({});
+  const expandSeededRef = useRef(false);
+  const sortNodes = useCallback(
+    (nodes) => {
+      if (arrangeMode === "none") {
+        return [...nodes];
+      }
+      const byKey = /* @__PURE__ */ new Map();
+      const fileEntries = nodes.map((node) => {
+        const key = nodeRefKey(node.ref);
+        byKey.set(key, node);
+        return {
+          hasChildren: node.kind === "folder",
+          kind: node.kind === "folder" ? "directory" : "file",
+          mtimeMs: node.mtimeMs ?? null,
+          name: node.displayName,
+          path: key,
+          sizeBytes: node.sizeBytes ?? null
+        };
+      });
+      return sortWorkspaceFileEntriesForArrangeMode(fileEntries, arrangeMode).map((entry) => byKey.get(entry.path)).filter((node) => node !== void 0);
+    },
+    [arrangeMode]
+  );
+  const autoEnteredSourcesRef = useRef(/* @__PURE__ */ new Set());
+  useEffect2(() => {
+    if (!open) {
+      return;
+    }
+    controller.reset();
+    controller.open();
+    setBreadcrumbBySource({});
+    setFocusedNode(null);
+    setExpandedSources({});
+    expandSeededRef.current = false;
+    autoEnteredSourcesRef.current = /* @__PURE__ */ new Set();
+    return () => {
+      controller.close();
+    };
+  }, [controller, open]);
+  const activeSourceId = snapshot.activeSourceId;
+  const activeTab = useMemo(
+    () => snapshot.tabs.find((tab) => tab.sourceId === activeSourceId) ?? null,
+    [activeSourceId, snapshot.tabs]
+  );
+  const capabilities = activeTab?.capabilities ?? null;
+  const breadcrumb = activeSourceId ? breadcrumbBySource[activeSourceId] ?? [] : [];
+  const currentNode = breadcrumb.at(-1) ?? null;
+  const currentKey = currentNode ? nodeRefKey(currentNode.ref) : ROOT_CHILDREN_KEY;
+  const activeTabState = activeSourceId ? snapshot.bySource[activeSourceId] : void 0;
+  const isSearch = activeTabState?.mode === "search" && activeTabState.searchQuery.trim() !== "";
+  const currentChildren = activeTabState?.childrenByKey[currentKey];
+  const currentEntries = useMemo(
+    () => sortNodes(currentChildren?.entries ?? []),
+    [currentChildren?.entries, sortNodes]
+  );
+  const searchResults = useMemo(
+    () => sortNodes(activeTabState?.searchEntries ?? []),
+    [activeTabState?.searchEntries, sortNodes]
+  );
+  const sidebarGroupsBySource = useMemo(() => {
+    const result = {};
+    for (const tab of snapshot.tabs) {
+      const sourceId = tab.sourceId;
+      const provided = aggregator.getLoadedSource(sourceId)?.listSidebarGroups?.(scope);
+      if (provided && provided.length > 0) {
+        result[sourceId] = provided;
+        continue;
+      }
+      const root = snapshot.bySource[sourceId]?.childrenByKey[ROOT_CHILDREN_KEY];
+      const folders = (root?.entries ?? []).filter(
+        (node) => node.kind === "folder"
+      );
+      if (tab.capabilities.navigable) {
+        result[sourceId] = folders;
+      } else {
+        const workspaceRoot = {
+          ref: { sourceId, nodeId: WORKSPACE_ROOT_GROUP_NODE_ID },
+          kind: "folder",
+          displayName: WORKSPACE_ROOT_GROUP_LABEL
+        };
+        result[sourceId] = [workspaceRoot, ...folders];
+      }
+    }
+    return result;
+  }, [snapshot.tabs, snapshot.bySource, aggregator, scope]);
+  const sidebarGroups = activeSourceId ? sidebarGroupsBySource[activeSourceId] ?? [] : [];
+  const selectedGroupKey = currentNode != null ? nodeRefKey(currentNode.ref) : activeSourceId && !capabilities?.navigable ? nodeRefKey({
+    sourceId: activeSourceId,
+    nodeId: WORKSPACE_ROOT_GROUP_NODE_ID
+  }) : null;
+  const setActiveSource = useCallback(
+    (sourceId) => {
+      controller.setActiveSource(sourceId);
+      setFocusedNode(null);
+    },
+    [controller]
+  );
+  const enterFolder = useCallback(
+    (node) => {
+      const sourceId = node.ref.sourceId;
+      if (node.kind !== "folder" || !sourceId || node.ref.nodeId === WORKSPACE_ROOT_GROUP_NODE_ID) {
+        return;
+      }
+      controller.ensureChildren(node);
+      setBreadcrumbBySource((current) => {
+        const stack = current[sourceId] ?? [];
+        const index = stack.findIndex(
+          (item) => nodeRefKey(item.ref) === nodeRefKey(node.ref)
+        );
+        const nextStack = index >= 0 ? stack.slice(0, index + 1) : [...stack, node];
+        return { ...current, [sourceId]: nextStack };
+      });
+      setFocusedNode(null);
+    },
+    [controller]
+  );
+  useEffect2(() => {
+    if (!open || !activeSourceId || !capabilities?.navigable) {
+      return;
+    }
+    if (autoEnteredSourcesRef.current.has(activeSourceId)) {
+      return;
+    }
+    const stack = breadcrumbBySource[activeSourceId] ?? [];
+    if (stack.length > 0) {
+      autoEnteredSourcesRef.current.add(activeSourceId);
+      return;
+    }
+    const firstGroup = sidebarGroups[0];
+    if (!firstGroup) {
+      return;
+    }
+    autoEnteredSourcesRef.current.add(activeSourceId);
+    enterFolder(firstGroup);
+  }, [
+    open,
+    activeSourceId,
+    capabilities?.navigable,
+    sidebarGroups,
+    breadcrumbBySource,
+    enterFolder
+  ]);
+  useEffect2(() => {
+    if (!open || expandSeededRef.current || !activeSourceId) {
+      return;
+    }
+    expandSeededRef.current = true;
+    setExpandedSources(
+      (current) => current[activeSourceId] != null ? current : { ...current, [activeSourceId]: true }
+    );
+  }, [open, activeSourceId]);
+  const navigateToBreadcrumb = useCallback(
+    (index) => {
+      if (!activeSourceId) {
+        return;
+      }
+      setBreadcrumbBySource((current) => {
+        const stack = current[activeSourceId] ?? [];
+        return { ...current, [activeSourceId]: stack.slice(0, index + 1) };
+      });
+      const target = (breadcrumbBySource[activeSourceId] ?? [])[index] ?? null;
+      controller.ensureChildren(target);
+      setFocusedNode(null);
+    },
+    [activeSourceId, breadcrumbBySource, controller]
+  );
+  const navigateToRoot = useCallback(
+    (sourceId) => {
+      const sid = sourceId ?? activeSourceId;
+      if (!sid) {
+        return;
+      }
+      setBreadcrumbBySource((current) => ({ ...current, [sid]: [] }));
+      controller.ensureSourceRoot(sid);
+      setFocusedNode(null);
+    },
+    [activeSourceId, controller]
+  );
+  const selectGroup = useCallback(
+    (node) => {
+      const sourceId = node.ref.sourceId;
+      if (!sourceId) {
+        return;
+      }
+      if (sourceId !== snapshot.activeSourceId) {
+        controller.setActiveSource(sourceId);
+      }
+      if (node.ref.nodeId === WORKSPACE_ROOT_GROUP_NODE_ID) {
+        navigateToRoot(sourceId);
+        return;
+      }
+      enterFolder(node);
+    },
+    [controller, snapshot.activeSourceId, enterFolder, navigateToRoot]
+  );
+  const isSourceExpanded = useCallback(
+    (sourceId) => expandedSources[sourceId] ?? false,
+    [expandedSources]
+  );
+  const toggleSourceExpanded = useCallback(
+    (sourceId) => {
+      const willExpand = !(expandedSources[sourceId] ?? false);
+      setExpandedSources((current) => ({
+        ...current,
+        [sourceId]: !(current[sourceId] ?? false)
+      }));
+      if (willExpand && !aggregator.getLoadedSource(sourceId)?.listSidebarGroups) {
+        controller.ensureSourceRoot(sourceId);
+      }
+    },
+    [aggregator, controller, expandedSources]
+  );
+  const isSelected = useCallback(
+    (node) => snapshot.selection.some(
+      (item) => nodeRefKey(item.ref) === nodeRefKey(node.ref)
+    ),
+    [snapshot.selection]
+  );
+  const [isConfirming, setIsConfirming] = useState2(false);
+  const confirm = useCallback(async () => {
+    if (isConfirming) {
+      return;
+    }
+    setIsConfirming(true);
+    try {
+      const selected = await controller.confirm();
+      onConfirm(selected.map(selectedReferenceToWorkspaceFileReference));
+      onClose();
+    } finally {
+      setIsConfirming(false);
+    }
+  }, [controller, isConfirming, onClose, onConfirm]);
+  return {
+    tabs: snapshot.tabs,
+    activeSourceId,
+    activeTabLabel: activeTab?.label ?? "",
+    capabilities,
+    // 内容区递归就地树:当前选中二级节点的子条目(本地根时为源根子条目)。
+    currentEntries,
+    // 搜索态:扁平搜索结果。
+    searchResults,
+    expandedKeys: activeTabState?.expandedKeys ?? {},
+    childrenByKey: activeTabState?.childrenByKey ?? {},
+    toggleNode: (node) => controller.toggleNode(node),
+    sortNodes,
+    isLoadingTabs: snapshot.isLoadingTabs,
+    breadcrumb,
+    currentNode,
+    sidebarGroups,
+    sidebarGroupsBySource,
+    isSourceExpanded,
+    toggleSourceExpanded,
+    selectedGroupKey,
+    arrangeMode,
+    setArrangeMode,
+    isSearch,
+    searchQuery: activeTabState?.searchQuery ?? "",
+    isLoading: isSearch ? activeTabState?.isSearchLoading ?? false : currentChildren?.loading ?? false,
+    hasMore: !isSearch && Boolean(currentChildren?.nextCursor),
+    focusedNode,
+    selection: snapshot.selection,
+    selectionCount: snapshot.selection.length,
+    setActiveSource,
+    enterFolder,
+    selectGroup,
+    navigateToBreadcrumb,
+    navigateToRoot,
+    setFocusedNode,
+    setSearchQuery: (query) => controller.setSearchQuery(query),
+    toggleSelection: (node) => controller.toggleSelection(node),
+    loadMore: () => controller.loadMore(currentNode),
+    isSelected,
+    confirm,
+    isConfirming
+  };
+}
+
+// src/ui/internal/reference/ReferenceSourcePicker.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var L = {
+  sourceColumn: "\u5206\u7C7B",
+  selectGroupHint: "\u4ECE\u5DE6\u4FA7\u9009\u62E9\u4E00\u4E2A\u76EE\u5F55",
+  previewSource: "\u4EA7\u51FA\u6765\u6E90",
+  previewModified: "\u4EA7\u51FA\u65F6\u95F4",
+  previewSize: "\u6587\u4EF6\u5927\u5C0F",
+  previewHierarchy: "\u6240\u5C5E\u5C42\u7EA7",
+  reference: "\u5F15\u7528",
+  loadMore: "\u52A0\u8F7D\u66F4\u591A",
+  emptyPreview: "\u9009\u62E9\u4E00\u4E2A\u6587\u4EF6\u67E5\u770B\u8BE6\u60C5"
+};
+function autoFitPanelWidth(groupEl, contentEl, panel, trailingPx) {
+  if (!groupEl || !contentEl || !panel) {
+    return;
+  }
+  const groupWidth = groupEl.clientWidth;
+  if (groupWidth <= 0) {
+    return;
+  }
+  const contentLeft = contentEl.getBoundingClientRect().left;
+  const labels = contentEl.querySelectorAll(
+    "[data-autofit-label]"
+  );
+  let maxRight = 0;
+  labels.forEach((label) => {
+    const right = label.getBoundingClientRect().left - contentLeft + label.scrollWidth;
+    if (right > maxRight) {
+      maxRight = right;
+    }
+  });
+  if (maxRight <= 0) {
+    return;
+  }
+  const naturalWidth = maxRight + trailingPx;
+  panel.resize(Math.min(80, naturalWidth / groupWidth * 100));
+}
+function ReferenceSourcePicker({
+  aggregator,
+  copy,
+  onClose,
+  onConfirm,
+  open,
+  workspaceId
+}) {
+  const titleId = useId2();
+  const view = useReferenceSourcePickerView({
+    aggregator,
+    workspaceId,
+    open,
+    onClose,
+    onConfirm
+  });
+  const layoutRef = useRef2(null);
+  const sidebarContentRef = useRef2(null);
+  const middleContentRef = useRef2(null);
+  const sidebarPanelRef = useRef2(null);
+  const middlePanelRef = useRef2(null);
+  if (!open) {
+    return null;
+  }
+  const hasSelectedGroup = view.selectedGroupKey != null;
+  const fitSidebar = () => autoFitPanelWidth(
+    layoutRef.current,
+    sidebarContentRef.current,
+    sidebarPanelRef.current,
+    36
+  );
+  const fitMiddle = () => autoFitPanelWidth(
+    layoutRef.current,
+    middleContentRef.current,
+    middlePanelRef.current,
+    56
+  );
+  const dialog = /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "nodrag fixed inset-0 grid place-items-center bg-[var(--backdrop)] px-3 py-4 backdrop-blur-md [-webkit-app-region:no-drag] sm:px-6 sm:py-8",
+      style: { zIndex: "var(--z-panel)" },
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs4(
+        Card2,
+        {
+          "aria-labelledby": titleId,
+          "aria-modal": "true",
+          className: "nodrag flex h-[min(88vh,46rem)] w-full max-w-5xl flex-col gap-0 overflow-hidden border-[var(--line-1)] bg-[var(--background-fronted)] py-0 text-[var(--text-primary)] shadow-panel [-webkit-app-region:no-drag]",
+          role: "dialog",
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx4(CardHeader2, { className: "gap-3 px-4 pt-4 pb-4 sm:px-6", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-4", children: [
+              /* @__PURE__ */ jsx4(CardTitle2, { id: titleId, children: copy.t("referencePicker.title") }),
+              /* @__PURE__ */ jsx4(
+                Button4,
+                {
+                  "aria-label": copy.t("actions.cancel"),
+                  size: "icon-sm",
+                  type: "button",
+                  variant: "ghost",
+                  onClick: onClose,
+                  children: /* @__PURE__ */ jsx4(CloseIcon2, { size: 16 })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx4(CardContent2, { className: "flex min-h-0 flex-1 overflow-hidden border-t border-[var(--line-1)] p-0", children: /* @__PURE__ */ jsx4("div", { ref: layoutRef, className: "flex min-h-0 flex-1", children: /* @__PURE__ */ jsxs4(
+              ResizablePanelGroup,
+              {
+                className: "min-h-0 flex-1",
+                orientation: "horizontal",
+                defaultLayout: { sidebar: 2, middle: 5, preview: 3 },
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    ResizablePanel,
+                    {
+                      id: "sidebar",
+                      className: "min-h-0 border-r border-[var(--line-1)]",
+                      defaultSize: 20,
+                      minSize: "180px",
+                      panelRef: (handle) => {
+                        sidebarPanelRef.current = handle;
+                      },
+                      children: /* @__PURE__ */ jsx4(SourceSidebar, { contentRef: sidebarContentRef, view })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    ResizableHandle,
+                    {
+                      disableDoubleClick: true,
+                      withHandle: true,
+                      onDoubleClick: fitSidebar
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    ResizablePanel,
+                    {
+                      id: "middle",
+                      className: "min-h-0",
+                      defaultSize: 50,
+                      minSize: "260px",
+                      panelRef: (handle) => {
+                        middlePanelRef.current = handle;
+                      },
+                      children: /* @__PURE__ */ jsxs4("div", { className: "flex h-full min-h-0 flex-col", children: [
+                        /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2 border-b border-[var(--line-1)] p-3", children: /* @__PURE__ */ jsxs4("div", { className: "relative flex-1", children: [
+                          /* @__PURE__ */ jsx4(SearchIcon2, { className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[var(--text-tertiary)]" }),
+                          /* @__PURE__ */ jsx4(
+                            Input2,
+                            {
+                              className: "pl-9",
+                              placeholder: copy.t(
+                                "referencePicker.searchPlaceholder"
+                              ),
+                              value: view.searchQuery,
+                              onChange: (event) => view.setSearchQuery(event.target.value)
+                            }
+                          )
+                        ] }) }),
+                        /* @__PURE__ */ jsx4(ScrollArea2, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxs4(
+                          "div",
+                          {
+                            ref: middleContentRef,
+                            className: "flex flex-col gap-[2px] p-3",
+                            children: [
+                              view.isLoading ? /* @__PURE__ */ jsx4(Feedback, { children: /* @__PURE__ */ jsx4(Spinner2, { size: 16 }) }) : view.isSearch ? (
+                                // 搜索:扁平结果
+                                view.searchResults.length === 0 ? /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.emptyDirectory") }) : view.searchResults.map((node) => /* @__PURE__ */ jsx4(
+                                  SearchResultRow,
+                                  {
+                                    focused: isFocused(view.focusedNode, node),
+                                    node,
+                                    selected: view.isSelected(node),
+                                    onFocus: view.setFocusedNode,
+                                    onToggle: view.toggleSelection
+                                  },
+                                  nodeRefKey(node.ref)
+                                ))
+                              ) : !hasSelectedGroup ? /* @__PURE__ */ jsx4(Feedback, { children: L.selectGroupHint }) : view.currentEntries.length === 0 ? /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.emptyDirectory") }) : (
+                                // 浏览:就地递归展开树(复刻 agent 引用面板文件树交互)
+                                view.currentEntries.map((node) => /* @__PURE__ */ jsx4(
+                                  TreeNodeRow,
+                                  {
+                                    copy,
+                                    depth: 0,
+                                    node,
+                                    view
+                                  },
+                                  nodeRefKey(node.ref)
+                                ))
+                              ),
+                              view.hasMore && hasSelectedGroup && !view.isSearch ? /* @__PURE__ */ jsx4(
+                                Button4,
+                                {
+                                  className: "mt-1 w-full",
+                                  size: "sm",
+                                  type: "button",
+                                  variant: "ghost",
+                                  onClick: view.loadMore,
+                                  children: L.loadMore
+                                }
+                              ) : null
+                            ]
+                          }
+                        ) })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    ResizableHandle,
+                    {
+                      disableDoubleClick: true,
+                      withHandle: true,
+                      onDoubleClick: fitMiddle
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    ResizablePanel,
+                    {
+                      id: "preview",
+                      className: "min-h-0 border-l border-[var(--line-1)]",
+                      defaultSize: 30,
+                      minSize: "200px",
+                      children: /* @__PURE__ */ jsx4(
+                        PreviewInfoPane,
+                        {
+                          node: view.focusedNode,
+                          sourceLabel: view.activeTabLabel,
+                          hierarchy: view.breadcrumb,
+                          onReference: view.toggleSelection,
+                          referenced: view.focusedNode ? view.isSelected(view.focusedNode) : false
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx4(
+              Footer,
+              {
+                cancelLabel: copy.t("actions.cancel"),
+                confirmLabel: copy.t("referencePicker.confirm"),
+                countLabel: copy.t("referencePicker.selectedCount", {
+                  count: view.selectionCount
+                }),
+                disabled: view.selectionCount === 0,
+                loading: view.isConfirming,
+                selection: view.selection,
+                onClose,
+                onConfirm: () => void view.confirm()
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  if (typeof document === "undefined") {
+    return dialog;
+  }
+  return createPortal2(dialog, document.body);
+}
+function SourceSidebar({
+  view,
+  contentRef
+}) {
+  return /* @__PURE__ */ jsx4(ScrollArea2, { className: "h-full min-h-0 w-full", children: /* @__PURE__ */ jsxs4("div", { ref: contentRef, className: "flex flex-col gap-0.5 p-2", children: [
+    /* @__PURE__ */ jsx4("p", { className: "px-2 py-1 text-[11px] font-semibold text-[var(--text-tertiary)]", children: L.sourceColumn }),
+    view.tabs.map((tab) => {
+      const active = tab.sourceId === view.activeSourceId;
+      const expanded = view.isSourceExpanded(tab.sourceId);
+      const groups = view.sidebarGroupsBySource[tab.sourceId] ?? [];
+      return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            "aria-expanded": expanded,
+            className: cn3(
+              "flex items-center gap-1.5 rounded-[6px] px-2 py-1.5 text-left text-[13px] font-semibold transition-colors hover:bg-transparency-block",
+              active ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"
+            ),
+            type: "button",
+            onClick: () => view.toggleSourceExpanded(tab.sourceId),
+            children: [
+              /* @__PURE__ */ jsx4(
+                ArrowRightIcon2,
+                {
+                  className: cn3(
+                    "size-3 shrink-0 text-[var(--text-tertiary)] transition-transform",
+                    expanded && "rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx4("span", { className: "truncate", "data-autofit-label": true, children: tab.label })
+            ]
+          }
+        ),
+        expanded ? /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: groups.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "px-2 py-1.5 pl-7 text-[12px] text-[var(--text-tertiary)]", children: view.isLoadingTabs ? "\u2026" : "" }) : groups.map((group) => {
+          const key = nodeRefKey(group.ref);
+          const selected = key === view.selectedGroupKey;
+          return /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              className: cn3(
+                "flex items-center gap-2 rounded-[6px] py-1.5 pr-2 pl-7 text-left text-[13px] transition-colors hover:bg-transparency-block",
+                selected ? "bg-transparency-block text-[var(--text-primary)]" : "text-[var(--text-secondary)]"
+              ),
+              type: "button",
+              onClick: () => view.selectGroup(group),
+              children: [
+                group.iconUrl ? /* @__PURE__ */ jsx4(
+                  "img",
+                  {
+                    alt: "",
+                    className: "size-4 shrink-0 rounded-[3px] object-cover",
+                    src: group.iconUrl
+                  }
+                ) : /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-4 shrink-0 text-[var(--rich-text-folder)]" }),
+                /* @__PURE__ */ jsx4(
+                  "span",
+                  {
+                    className: "min-w-0 flex-1 truncate",
+                    "data-autofit-label": true,
+                    children: group.displayName
+                  }
+                ),
+                group.childCount != null ? /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-[11px] text-[var(--text-tertiary)]", children: group.childCount }) : null
+              ]
+            },
+            key
+          );
+        }) }) : null
+      ] }, tab.sourceId);
+    })
+  ] }) });
+}
+function SearchResultRow({
+  node,
+  focused,
+  selected,
+  onFocus,
+  onToggle
+}) {
+  const isFolder = node.kind === "folder";
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn3(
+        "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[6px] border py-2.5 pr-1 pl-3 transition-colors",
+        focused || selected ? "border-border bg-transparency-block" : "border-transparent bg-transparent hover:border-border/70 hover:bg-transparency-block"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: "flex min-w-0 items-center gap-3 text-left",
+            type: "button",
+            onClick: () => onFocus(node),
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-[var(--transparency-block)] text-[var(--text-tertiary)]", children: isFolder ? /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-4 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx4(FileIcon3, { className: "size-4 text-[var(--text-tertiary)]" }) }),
+              /* @__PURE__ */ jsxs4("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx4("span", { className: "block truncate text-[13px] font-medium text-[var(--text-primary)]", children: node.displayName }),
+                /* @__PURE__ */ jsx4("span", { className: "block truncate text-[11px] text-[var(--text-secondary)]", children: node.ref.nodeId })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          Button4,
+          {
+            "aria-label": node.displayName,
+            "aria-pressed": selected,
+            size: "icon-sm",
+            type: "button",
+            variant: "ghost",
+            onClick: () => {
+              onFocus(node);
+              onToggle(node);
+            },
+            children: selected ? /* @__PURE__ */ jsx4(CheckIcon2, { size: 14 }) : /* @__PURE__ */ jsx4(AddIcon, { className: "text-[var(--text-secondary)]", size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}
+function PreviewInfoPane({
+  node,
+  sourceLabel,
+  hierarchy,
+  referenced,
+  onReference
+}) {
+  return /* @__PURE__ */ jsx4("aside", { className: "flex h-full min-h-0 w-full flex-col bg-[var(--background-fronted)]", children: node ? /* @__PURE__ */ jsxs4("div", { className: "flex min-h-0 flex-1 flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsx4("div", { className: "grid aspect-[3/2] w-full place-items-center rounded-[8px] border border-[var(--line-2,var(--border-2))] bg-[var(--transparency-block)]", children: /* @__PURE__ */ jsx4(FileIcon3, { className: "size-9 text-[var(--text-tertiary)]" }) }),
+    /* @__PURE__ */ jsx4("p", { className: "truncate text-[15px] font-semibold", children: node.displayName }),
+    /* @__PURE__ */ jsxs4("dl", { className: "space-y-2 text-[13px]", children: [
+      /* @__PURE__ */ jsx4(InfoRow, { label: L.previewSource, children: /* @__PURE__ */ jsx4(Badge2, { variant: "secondary", children: sourceLabel }) }),
+      node.mtimeMs != null ? /* @__PURE__ */ jsx4(InfoRow, { label: L.previewModified, children: formatDateTime(node.mtimeMs) }) : null,
+      node.sizeBytes != null ? /* @__PURE__ */ jsx4(InfoRow, { label: L.previewSize, children: formatBytes(node.sizeBytes) }) : null
+    ] }),
+    hierarchy.length > 0 ? /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-[11px] font-semibold text-[var(--text-tertiary)]", children: L.previewHierarchy }),
+      /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", children: hierarchy.map((crumb) => /* @__PURE__ */ jsx4(Badge2, { variant: "secondary", children: crumb.displayName }, nodeRefKey(crumb.ref))) })
+    ] }) : null,
+    /* @__PURE__ */ jsx4("div", { className: "mt-auto flex justify-end", children: /* @__PURE__ */ jsx4(
+      Button4,
+      {
+        type: "button",
+        variant: referenced ? "secondary" : void 0,
+        onClick: () => onReference(node),
+        children: L.reference
+      }
+    ) })
+  ] }) : /* @__PURE__ */ jsx4(Feedback, { children: L.emptyPreview }) });
+}
+function InfoRow({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsx4("dt", { className: "text-[var(--text-secondary)]", children: label }),
+    /* @__PURE__ */ jsx4("dd", { className: "min-w-0 truncate text-right text-[var(--text-primary)]", children })
+  ] });
+}
+function Footer({
+  cancelLabel,
+  confirmLabel,
+  countLabel,
+  disabled,
+  loading = false,
+  selection,
+  onClose,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-3 border-t border-[var(--line-1)] px-4 py-3 sm:px-6", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx4("span", { className: "text-[13px] text-[var(--text-secondary)]", children: countLabel }),
+      selection.slice(0, 2).map((node) => /* @__PURE__ */ jsx4(Badge2, { variant: "secondary", children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: node.displayName }) }, nodeRefKey(node.ref))),
+      selection.length > 2 ? /* @__PURE__ */ jsxs4(Badge2, { variant: "secondary", children: [
+        "+",
+        selection.length - 2
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx4(Button4, { type: "button", variant: "secondary", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ jsxs4(
+        Button4,
+        {
+          disabled: disabled || loading,
+          type: "button",
+          onClick: onConfirm,
+          children: [
+            loading ? /* @__PURE__ */ jsx4(Spinner2, { className: "text-current", size: 14 }) : null,
+            confirmLabel
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function Feedback({ children }) {
+  return /* @__PURE__ */ jsx4("div", { className: "grid min-h-0 flex-1 place-items-center px-4 py-8 text-center text-[13px] text-[var(--text-secondary)]", children });
+}
+var TREE_INDENT = 28;
+var TREE_COLLAPSE_DURATION_MS = 200;
+function isFocused(focused, node) {
+  return focused ? nodeRefKey(focused.ref) === nodeRefKey(node.ref) : false;
+}
+function TreeNodeRow({
+  node,
+  depth,
+  view,
+  copy
+}) {
+  const key = nodeRefKey(node.ref);
+  const isFolder = node.kind === "folder";
+  const expanded = view.expandedKeys[key] ?? false;
+  const childState = view.childrenByKey[key];
+  const childEntries = view.sortNodes(childState?.entries ?? []);
+  const selected = view.isSelected(node);
+  const focused = isFocused(view.focusedNode, node);
+  const [shouldRenderChildContent, setShouldRenderChildContent] = useState3(expanded);
+  useEffect3(() => {
+    if (expanded) {
+      setShouldRenderChildContent(true);
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setShouldRenderChildContent(false);
+    }, TREE_COLLAPSE_DURATION_MS);
+    return () => window.clearTimeout(timeoutId);
+  }, [expanded]);
+  const shouldBuildChildContent = expanded || shouldRenderChildContent;
+  const childContent = shouldBuildChildContent ? childState?.loading ? /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "flex items-center gap-2 px-2 py-2 text-[11px] text-[var(--text-secondary)]",
+      style: { paddingLeft: `${(depth + 1) * TREE_INDENT + 12}px` },
+      children: [
+        /* @__PURE__ */ jsx4(Spinner2, { className: "text-[var(--text-secondary)]", size: 14 }),
+        /* @__PURE__ */ jsx4("span", { children: copy.t("referencePicker.loading") })
+      ]
+    }
+  ) : childEntries.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "space-y-0.5", children: childEntries.map((child) => /* @__PURE__ */ jsx4(
+    TreeNodeRow,
+    {
+      copy,
+      depth: depth + 1,
+      node: child,
+      view
+    },
+    nodeRefKey(child.ref)
+  )) }) : childState?.loaded ? /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "px-2 py-2 text-[11px] text-[var(--text-secondary)]",
+      style: { paddingLeft: `${(depth + 1) * TREE_INDENT + 12}px` },
+      children: copy.t("referencePicker.emptyDirectory")
+    }
+  ) : null : null;
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cn3(
+          "flex items-center gap-2 rounded-[6px] py-1.5 pr-1 transition-colors",
+          focused || selected ? "bg-transparency-block" : "hover:bg-transparency-block"
+        ),
+        style: { paddingLeft: `${depth * TREE_INDENT + 8}px` },
+        children: [
+          isFolder ? /* @__PURE__ */ jsx4(
+            "button",
+            {
+              "aria-label": node.displayName,
+              className: "grid size-5 shrink-0 place-items-center rounded-sm text-[var(--text-secondary)] hover:bg-[var(--transparency-hover)]",
+              type: "button",
+              onClick: () => view.toggleNode(node),
+              children: /* @__PURE__ */ jsx4(
+                ArrowRightIcon2,
+                {
+                  className: cn3(
+                    "size-3.5 transition-transform",
+                    expanded && "rotate-90"
+                  )
+                }
+              )
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+              type: "button",
+              onClick: () => {
+                view.setFocusedNode(node);
+                if (isFolder) {
+                  view.toggleNode(node);
+                }
+              },
+              children: [
+                isFolder ? /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-4 shrink-0 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx4(FileIcon3, { className: "size-4 shrink-0 text-[var(--text-tertiary)]" }),
+                /* @__PURE__ */ jsx4(
+                  "span",
+                  {
+                    className: "truncate text-[13px] text-[var(--text-primary)]",
+                    "data-autofit-label": true,
+                    children: node.displayName
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Button4,
+            {
+              "aria-label": node.displayName,
+              "aria-pressed": selected,
+              className: "shrink-0",
+              size: "icon-sm",
+              type: "button",
+              variant: "ghost",
+              onClick: () => {
+                view.setFocusedNode(node);
+                view.toggleSelection(node);
+              },
+              children: selected ? /* @__PURE__ */ jsx4(CheckIcon2, { size: 14 }) : /* @__PURE__ */ jsx4(AddIcon, { className: "text-[var(--text-secondary)]", size: 16 })
+            }
+          )
+        ]
+      }
+    ),
+    isFolder ? /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: cn3(
+          "grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+          expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+          childContent && "mt-[2px]"
+        ),
+        children: /* @__PURE__ */ jsx4(
+          "div",
+          {
+            "aria-hidden": expanded ? void 0 : "true",
+            className: cn3(
+              "min-h-0 overflow-hidden transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none",
+              expanded ? "translate-y-0 opacity-100" : "-translate-y-1 opacity-0"
+            ),
+            inert: expanded ? void 0 : true,
+            children: childContent
+          }
+        )
+      }
+    ) : null
+  ] });
+}
+function formatDateTime(ms) {
+  const date = new Date(ms);
+  const pad = (value) => String(value).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex += 1;
+  }
+  return `${value.toFixed(1)} ${units[unitIndex]}`;
+}
 export {
+  ReferenceSourcePicker,
   WorkspaceFileReferencePicker
 };
 //# sourceMappingURL=index.js.map