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

package/dist/ui/index.js

@@ -1,19 +1,22 @@
 import {
+  ROOT_CHILDREN_KEY,
+  createReferenceSourcePickerController,
   normalizeDirectoryPath,
   useWorkspaceFileReferencePickerView
-} from "../chunk-LS7P3J6Z.js";
-import "../chunk-PAR2R2G5.js";
+} from "../chunk-KSK6PILG.js";
+import {
+  REFERENCE_FILTER_CATEGORIES,
+  WORKSPACE_ROOT_GROUP_NODE_ID,
+  nodeRefKey,
+  selectedReferenceToWorkspaceFileReference
+} from "../chunk-HRC2MZ5H.js";
 
 // src/ui/internal/reference/WorkspaceFileReferencePicker.tsx
-import { useId } from "react";
-import { createPortal } from "react-dom";
 import {
-  Button as Button3,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CloseIcon,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
   cn as cn2
 } from "@tutti-os/ui-system";
 
@@ -45,7 +48,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,
@@ -154,6 +157,12 @@ function WorkspaceFileReferencePickerTreeEntry({
     }, workspaceFileReferenceTreeCollapseDurationMs);
     return () => window.clearTimeout(timeoutId);
   }, [expanded]);
+  const handleRowSelect = () => {
+    onFocusPath(entry.path);
+    if (isFolder) {
+      onToggleFolder(entry);
+    }
+  };
   const shouldBuildChildContent = expanded || shouldRenderChildContent;
   const childContent = shouldBuildChildContent ? childState?.loading ? /* @__PURE__ */ jsxs(
     "div",
@@ -196,14 +205,24 @@ function WorkspaceFileReferencePickerTreeEntry({
     /* @__PURE__ */ jsxs(
       "div",
       {
+        "aria-current": focused ? "true" : void 0,
         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 cursor-pointer items-center gap-2 rounded-[6px] py-1.5 pr-1 transition-colors select-none",
           "nodrag [-webkit-app-region:no-drag]",
           focused || selected ? "bg-transparency-block" : "hover:bg-transparency-block"
         ),
+        role: "button",
+        tabIndex: 0,
         style: {
           paddingLeft: `${(childDepth - 1) * workspaceFileReferenceTreeIndent + 8}px`
         },
+        onClick: handleRowSelect,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleRowSelect();
+          }
+        },
         children: [
           isFolder ? /* @__PURE__ */ jsx(
             "button",
@@ -225,25 +244,11 @@ function WorkspaceFileReferencePickerTreeEntry({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx("span", { className: "block size-5 shrink-0" }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              className: "nodrag flex min-w-0 items-center gap-2 text-left [-webkit-app-region:no-drag]",
-              type: "button",
-              onClick: (event) => {
-                event.stopPropagation();
-                onFocusPath(entry.path);
-                if (entry.kind === "folder") {
-                  onToggleFolder(entry);
-                }
-              },
-              children: [
-                isFolder ? /* @__PURE__ */ jsx(FolderFilledIcon, { className: "size-4 shrink-0 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx(FileIcon, { className: "size-4 shrink-0 text-[var(--text-tertiary)]" }),
-                /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) })
-              ]
-            }
-          ),
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [
+            isFolder ? /* @__PURE__ */ jsx(FolderFilledIcon, { className: "size-4 shrink-0 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx(FileIcon, { className: "size-4 shrink-0 text-[var(--text-tertiary)]" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) })
+          ] }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -252,7 +257,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);
@@ -299,30 +304,29 @@ function WorkspaceFileReferencePickerSearchEntry({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "aria-current": focused ? "true" : void 0,
       className: cn(
-        "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[6px] border py-2.5 pr-1 pl-3 transition-colors",
+        "grid cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-[6px] border py-2.5 pr-1 pl-3 transition-colors select-none",
         "nodrag [-webkit-app-region:no-drag]",
         focused || selected ? "border-border bg-transparency-block" : "border-transparent bg-transparent hover:border-border/70 hover:bg-transparency-block"
       ),
+      role: "button",
+      tabIndex: 0,
+      onClick: () => onFocusPath(entry.path),
+      onKeyDown: (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onFocusPath(entry.path);
+        }
+      },
       children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: "nodrag flex min-w-0 items-center gap-3 text-left [-webkit-app-region:no-drag]",
-            type: "button",
-            onClick: (event) => {
-              event.stopPropagation();
-              onFocusPath(entry.path);
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-[var(--transparency-block)] text-[var(--text-tertiary)]", children: isFolder ? /* @__PURE__ */ jsx(FolderFilledIcon, { className: "size-4 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-[var(--text-tertiary)]" }) }),
-              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-medium text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) }),
-                /* @__PURE__ */ jsx("span", { className: "block truncate text-[11px] text-[var(--text-secondary)]", children: entry.path })
-              ] })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: "nodrag flex min-w-0 items-center gap-3 text-left [-webkit-app-region:no-drag]", children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-lg bg-[var(--transparency-block)] text-[var(--text-tertiary)]", children: isFolder ? /* @__PURE__ */ jsx(FolderFilledIcon, { className: "size-4 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-[var(--text-tertiary)]" }) }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px] font-medium text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) }),
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-[11px] text-[var(--text-secondary)]", children: entry.path })
+          ] })
+        ] }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -540,8 +544,6 @@ function WorkspaceFileReferencePickerFeedback2({
 
 // src/ui/internal/reference/WorkspaceFileReferencePicker.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var workspaceFileReferencePickerBackdropMotionClassName = "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-[180ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:animate-none";
-var workspaceFileReferencePickerPanelMotionClassName = "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-[0.96] motion-safe:duration-[250ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:animate-none";
 function WorkspaceFileReferencePicker({
   copy,
   fileAdapter,
@@ -549,9 +551,9 @@ function WorkspaceFileReferencePicker({
   onClose,
   onConfirm,
   open,
+  scoped = false,
   workspaceId
 }) {
-  const titleId = useId();
   const {
     browseRootEntries,
     directoryStateByPath,
@@ -576,52 +578,27 @@ function WorkspaceFileReferencePicker({
     open,
     workspaceId
   });
-  if (!open) {
-    return null;
-  }
-  const dialog = /* @__PURE__ */ jsx3(
-    "div",
+  return /* @__PURE__ */ jsx3(
+    Dialog,
     {
-      className: cn2(
-        "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",
-        workspaceFileReferencePickerBackdropMotionClassName
-      ),
-      style: { zIndex: "var(--z-panel)" },
-      onClick: onClose,
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) {
+          onClose();
+        }
+      },
       children: /* @__PURE__ */ jsxs3(
-        Card,
+        DialogContent,
         {
-          "aria-labelledby": titleId,
-          "aria-modal": "true",
+          "aria-describedby": void 0,
           className: cn2(
-            "nodrag flex h-[min(88vh,44rem)] w-full max-w-5xl origin-center 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] sm:h-[min(82vh,44rem)]",
-            workspaceFileReferencePickerPanelMotionClassName
+            "nodrag flex h-[min(88vh,44rem)] w-full max-w-5xl flex-col gap-0 overflow-hidden border-[var(--line-1)] bg-[var(--background-fronted)] p-0 text-[var(--text-primary)] shadow-panel [-webkit-app-region:no-drag] sm:h-[min(82vh,44rem)] sm:max-w-5xl"
           ),
-          role: "dialog",
-          onClick: (event) => event.stopPropagation(),
+          overlayClassName: cn2("nodrag", scoped && "!absolute"),
+          portaled: !scoped,
           children: [
-            /* @__PURE__ */ jsx3(
-              CardHeader,
-              {
-                className: "border-b px-4 py-4 sm:px-6 sm:py-5",
-                style: { borderBottomColor: "var(--line-1)" },
-                children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between gap-4", children: [
-                  /* @__PURE__ */ jsx3("div", { className: "min-w-0", children: /* @__PURE__ */ jsx3(CardTitle, { id: titleId, children: copy.t("referencePicker.title") }) }),
-                  /* @__PURE__ */ jsx3(
-                    Button3,
-                    {
-                      "aria-label": copy.t("actions.cancel"),
-                      size: "icon-sm",
-                      type: "button",
-                      variant: "ghost",
-                      onClick: onClose,
-                      children: /* @__PURE__ */ jsx3(CloseIcon, { size: 16 })
-                    }
-                  )
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxs3(CardContent, { className: "grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] gap-0 overflow-hidden p-0 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:grid-rows-1", children: [
+            /* @__PURE__ */ jsx3(DialogHeader, { className: "flex-none border-b border-[var(--line-1)] px-4 py-4 sm:px-6 sm:py-5", children: /* @__PURE__ */ jsx3(DialogTitle, { children: copy.t("referencePicker.title") }) }),
+            /* @__PURE__ */ jsxs3("div", { className: "grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto] gap-0 overflow-hidden p-0 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:grid-rows-1", children: [
               /* @__PURE__ */ jsx3(
                 WorkspaceFileReferencePickerBrowserPane,
                 {
@@ -665,12 +642,1448 @@ function WorkspaceFileReferencePicker({
       )
     }
   );
+}
+
+// src/ui/internal/reference/ReferenceSourcePicker.tsx
+import {
+  useEffect as useEffect3,
+  useId,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  ArrowRightIcon as ArrowRightIcon2,
+  Badge as Badge2,
+  Button as Button3,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CheckIcon as CheckIcon2,
+  ChevronDownIcon,
+  CloseIcon,
+  FileIcon as FileIcon3,
+  FolderFilledIcon as FolderFilledIcon3,
+  Input as Input2,
+  IssueIcon,
+  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";
+import {
+  WorkspaceFilePreviewSurface
+} from "@tutti-os/workspace-file-preview/react";
+
+// 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";
+import {
+  createWorkspaceFilePreviewLoadedState
+} from "@tutti-os/workspace-file-preview";
+function useReferenceSourcePickerView({
+  aggregator,
+  workspaceId,
+  open,
+  workspaceRootGroupLabel,
+  initialTarget = null,
+  onClose,
+  onConfirm,
+  onConfirmBundles
+}) {
+  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 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());
+  const appliedInitialTargetRef = useRef(null);
+  useEffect2(() => {
+    if (!open) {
+      return;
+    }
+    controller.reset();
+    controller.open();
+    setBreadcrumbBySource({});
+    setFocusedNode(null);
+    autoEnteredSourcesRef.current = /* @__PURE__ */ new Set();
+    appliedInitialTargetRef.current = null;
+    return () => {
+      controller.close();
+    };
+  }, [controller, open]);
+  useEffect2(() => {
+    const target = initialTarget;
+    if (!open || !target || appliedInitialTargetRef.current === target) {
+      return;
+    }
+    appliedInitialTargetRef.current = target;
+    autoEnteredSourcesRef.current.add(target.sourceId);
+    let canceled = false;
+    void controller.locatePath(target).then((path) => {
+      if (canceled) {
+        return;
+      }
+      const group = path[0];
+      if (!group) {
+        autoEnteredSourcesRef.current.delete(target.sourceId);
+        return;
+      }
+      controller.setActiveSource(target.sourceId);
+      setBreadcrumbBySource((current) => ({
+        ...current,
+        [group.ref.sourceId]: [group]
+      }));
+      controller.ensureChildren(group);
+      const deepest = path[path.length - 1];
+      setFocusedNode(path.length > 1 && deepest ? deepest : null);
+    }).catch(() => {
+      autoEnteredSourcesRef.current.delete(target.sourceId);
+    });
+    return () => {
+      canceled = true;
+    };
+  }, [open, initialTarget, controller]);
+  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 activeFilters = activeTabState?.searchFilters ?? [];
+  const isQuery = activeTabState?.mode === "search" && (activeTabState.searchQuery.trim() !== "" || activeFilters.length > 0);
+  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: workspaceRootGroupLabel
+        };
+        result[sourceId] = [workspaceRoot, ...folders];
+      }
+    }
+    return result;
+  }, [
+    snapshot.tabs,
+    snapshot.bySource,
+    aggregator,
+    scope,
+    workspaceRootGroupLabel
+  ]);
+  const sidebarHasMoreBySource = 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] = false;
+        continue;
+      }
+      const root = snapshot.bySource[sourceId]?.childrenByKey[ROOT_CHILDREN_KEY];
+      result[sourceId] = Boolean(root?.nextCursor);
+    }
+    return result;
+  }, [snapshot.tabs, snapshot.bySource, aggregator, scope]);
+  const sidebarLoadingMoreBySource = useMemo(() => {
+    const result = {};
+    for (const tab of snapshot.tabs) {
+      const root = snapshot.bySource[tab.sourceId]?.childrenByKey[ROOT_CHILDREN_KEY];
+      result[tab.sourceId] = Boolean(root?.loaded && root.loading);
+    }
+    return result;
+  }, [snapshot.tabs, snapshot.bySource]);
+  const sidebarGroups = activeSourceId ? sidebarGroupsBySource[activeSourceId] ?? [] : [];
+  const rootGroupNode = breadcrumb[0] ?? null;
+  const searchScopeNodeId = rootGroupNode ? rootGroupNode.ref.nodeId : null;
+  const selectedGroupKey = rootGroupNode ? nodeRefKey(rootGroupNode.ref) : activeSourceId && !capabilities?.navigable ? nodeRefKey({
+    sourceId: activeSourceId,
+    nodeId: WORKSPACE_ROOT_GROUP_NODE_ID
+  }) : null;
+  useEffect2(() => {
+    controller.setSearchScope(searchScopeNodeId);
+  }, [controller, searchScopeNodeId]);
+  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) {
+      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, sidebarGroups, breadcrumbBySource, enterFolder]);
+  useEffect2(() => {
+    if (!open) {
+      return;
+    }
+    for (const tab of snapshot.tabs) {
+      controller.ensureSourceRoot(tab.sourceId);
+    }
+  }, [open, snapshot.tabs, controller]);
+  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;
+      }
+      controller.ensureChildren(node);
+      setBreadcrumbBySource((current) => ({ ...current, [sourceId]: [node] }));
+      setFocusedNode(null);
+    },
+    [controller, snapshot.activeSourceId, navigateToRoot]
+  );
+  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 {
+      if (onConfirmBundles) {
+        const grouped = await controller.confirmGrouped();
+        onConfirmBundles({
+          files: grouped.files.map(selectedReferenceToWorkspaceFileReference),
+          bundles: grouped.bundles.map((bundle) => ({
+            sourceId: bundle.root.ref.sourceId,
+            nodeId: bundle.root.ref.nodeId,
+            displayName: bundle.root.displayName,
+            iconUrl: bundle.root.iconUrl ?? null,
+            files: bundle.files.map(selectedReferenceToWorkspaceFileReference)
+          }))
+        });
+      } else {
+        const selected = await controller.confirm();
+        onConfirm(selected.map(selectedReferenceToWorkspaceFileReference));
+      }
+      onClose();
+    } finally {
+      setIsConfirming(false);
+    }
+  }, [controller, isConfirming, onClose, onConfirm, onConfirmBundles]);
+  const [previewState, setPreviewState] = useState2({
+    status: "empty"
+  });
+  const previewObjectUrlRef = useRef(null);
+  const revokePreviewObjectUrl = useCallback(() => {
+    if (previewObjectUrlRef.current) {
+      URL.revokeObjectURL(previewObjectUrlRef.current);
+      previewObjectUrlRef.current = null;
+    }
+  }, []);
+  useEffect2(() => {
+    const node = focusedNode;
+    if (!node) {
+      revokePreviewObjectUrl();
+      setPreviewState({ status: "empty" });
+      return;
+    }
+    if (node.kind === "folder") {
+      revokePreviewObjectUrl();
+      setPreviewState({ node, status: "directory" });
+      return;
+    }
+    const previewable = aggregator.getLoadedSource(node.ref.sourceId)?.capabilities.previewable ?? false;
+    if (!previewable) {
+      revokePreviewObjectUrl();
+      setPreviewState({ node, status: "unsupported" });
+      return;
+    }
+    let cancelled = false;
+    revokePreviewObjectUrl();
+    setPreviewState({ node, status: "loading" });
+    void (async () => {
+      try {
+        const preview = await aggregator.readPreview(scope, node);
+        if (cancelled) {
+          return;
+        }
+        if (!preview) {
+          setPreviewState({ node, status: "unsupported" });
+          return;
+        }
+        const loaded = createWorkspaceFilePreviewLoadedState({
+          bytes: preview.bytes,
+          contentType: preview.contentType,
+          entry: {
+            kind: node.kind,
+            name: node.displayName,
+            path: node.ref.nodeId,
+            mtimeMs: node.mtimeMs ?? null,
+            sizeBytes: node.sizeBytes ?? null
+          },
+          target: {
+            fileKind: preview.kind,
+            name: node.displayName,
+            path: node.ref.nodeId,
+            mtimeMs: node.mtimeMs ?? null,
+            sizeBytes: node.sizeBytes ?? null
+          }
+        });
+        if (cancelled) {
+          return;
+        }
+        if (loaded.status === "image") {
+          const objectUrl = URL.createObjectURL(
+            new Blob([loaded.bytes], { type: loaded.contentType })
+          );
+          previewObjectUrlRef.current = objectUrl;
+          setPreviewState({ node, objectUrl, status: "image" });
+          return;
+        }
+        if (loaded.status === "text") {
+          setPreviewState({ content: loaded.content, node, status: "text" });
+          return;
+        }
+        setPreviewState({
+          node,
+          reason: loaded.reason,
+          ...loaded.maxSizeBytes == null ? {} : { maxSizeBytes: loaded.maxSizeBytes },
+          status: "readonly"
+        });
+      } catch {
+        if (!cancelled) {
+          setPreviewState({ node, status: "error" });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [aggregator, focusedNode, revokePreviewObjectUrl, scope]);
+  useEffect2(() => revokePreviewObjectUrl, [revokePreviewObjectUrl]);
+  return {
+    tabs: snapshot.tabs,
+    activeSourceId,
+    previewState,
+    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,
+    sidebarHasMoreBySource,
+    sidebarLoadingMoreBySource,
+    loadMoreSidebarGroups: (sourceId) => controller.loadMoreSourceRoot(sourceId),
+    selectedGroupKey,
+    arrangeMode,
+    setArrangeMode,
+    // 查询态(关键词或筛选任一非空)→ 平铺结果;否则浏览树。
+    isQuery,
+    searchQuery: activeTabState?.searchQuery ?? "",
+    // 当前源支持的文件类型筛选分类(不支持则空数组,picker 据此决定是否展示筛选下拉)。
+    filterCategories: capabilities?.filterable ? REFERENCE_FILTER_CATEGORIES : [],
+    activeFilters,
+    // 搜索态:仅在「还没有任何结果」时显示 spinner;细化关键词(已有结果)时
+    // 保留旧结果直到新结果就绪,避免内容区在 spinner/结果间反复切换造成闪烁。
+    isLoading: isQuery ? (activeTabState?.isSearchLoading ?? false) && (activeTabState?.searchEntries.length ?? 0) === 0 : currentChildren?.loading ?? false,
+    // 查询态:增长式分页是否还有更多;浏览态:cursor 是否有下一页。
+    hasMore: isQuery ? activeTabState?.searchHasMore ?? false : Boolean(currentChildren?.nextCursor),
+    // 底部「加载更多」在途(查询态 = 增长重查;浏览态 = cursor append)。
+    isLoadingMore: isQuery ? activeTabState?.isSearchLoadingMore ?? false : currentChildren?.loading ?? false,
+    focusedNode,
+    selection: snapshot.selection,
+    selectionCount: snapshot.selection.length,
+    setActiveSource,
+    enterFolder,
+    selectGroup,
+    navigateToBreadcrumb,
+    navigateToRoot,
+    setFocusedNode,
+    setSearchQuery: (query) => controller.setSearchQuery(query, searchScopeNodeId),
+    setFilters: (filters) => controller.setSearchFilters(filters, searchScopeNodeId),
+    toggleSelection: (node) => controller.toggleSelection(node),
+    loadMore: () => isQuery ? controller.loadMoreSearch() : controller.loadMore(currentNode),
+    isSelected,
+    confirm,
+    isConfirming
+  };
+}
+
+// src/ui/internal/reference/ReferenceSourcePicker.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIDEBAR_GROUP_PAGE_SIZE = 20;
+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,
+  initialTarget,
+  onClose,
+  onConfirm,
+  onConfirmBundles,
+  open,
+  workspaceId
+}) {
+  const titleId = useId();
+  const view = useReferenceSourcePickerView({
+    aggregator,
+    workspaceId,
+    open,
+    workspaceRootGroupLabel: copy.t("referencePicker.workspaceRootGroup"),
+    initialTarget,
+    onClose,
+    onConfirm,
+    onConfirmBundles
+  });
+  const activeFilterSet = new Set(view.activeFilters);
+  const toggleFilter = (id) => {
+    const next = new Set(activeFilterSet);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    view.setFilters([...next]);
+  };
+  const clearFilters = () => view.setFilters([]);
+  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(
+        Card,
+        {
+          "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(CardHeader, { 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(CardTitle, { id: titleId, children: copy.t("referencePicker.title") }),
+              /* @__PURE__ */ jsx4(
+                Button3,
+                {
+                  "aria-label": copy.t("actions.cancel"),
+                  size: "icon-sm",
+                  type: "button",
+                  variant: "ghost",
+                  onClick: onClose,
+                  children: /* @__PURE__ */ jsx4(CloseIcon, { size: 16 })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx4(CardContent, { 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 min-w-0 flex-1", children: /* @__PURE__ */ jsxs4(
+              ResizablePanelGroup,
+              {
+                className: "min-h-0 min-w-0 flex-1",
+                orientation: "horizontal",
+                defaultLayout: { sidebar: 2.5, middle: 4.5, preview: 3 },
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    ResizablePanel,
+                    {
+                      id: "sidebar",
+                      className: "min-h-0 min-w-0",
+                      defaultSize: 15,
+                      minSize: "150px",
+                      panelRef: (handle) => {
+                        sidebarPanelRef.current = handle;
+                      },
+                      children: /* @__PURE__ */ jsx4(
+                        SourceSidebar,
+                        {
+                          contentRef: sidebarContentRef,
+                          copy,
+                          view
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    ResizableHandle,
+                    {
+                      disableDoubleClick: true,
+                      withHandle: true,
+                      className: "after:bg-[var(--line-1)]",
+                      onDoubleClick: fitSidebar
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    ResizablePanel,
+                    {
+                      id: "middle",
+                      className: "min-h-0 min-w-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__ */ jsxs4("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)
+                              }
+                            )
+                          ] }),
+                          view.capabilities?.filterable && view.filterCategories.length > 0 ? /* @__PURE__ */ jsx4(
+                            FilterCategoryFilter,
+                            {
+                              categories: view.filterCategories,
+                              copy,
+                              selected: activeFilterSet,
+                              onClear: clearFilters,
+                              onToggle: toggleFilter
+                            }
+                          ) : null
+                        ] }),
+                        /* @__PURE__ */ jsx4(
+                          ScrollArea2,
+                          {
+                            className: "min-h-0 flex-1",
+                            viewportProps: {
+                              // 拉到底部(距底 <120px)自动加载更多 —— 查询态走增长式分页,
+                              // 浏览态走 cursor 续页。已在加载/无更多时由 loadMore 内部 no-op。
+                              onScroll: (event) => {
+                                const el = event.currentTarget;
+                                if (view.hasMore && !view.isLoading && !view.isLoadingMore && el.scrollHeight - el.scrollTop - el.clientHeight < 120) {
+                                  view.loadMore();
+                                }
+                              }
+                            },
+                            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.isQuery ? (
+                                    // 查询态(关键词或筛选):扁平结果
+                                    view.searchResults.length === 0 ? /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.emptySearch") }) : 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: copy.t("referencePicker.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 && (view.isQuery || hasSelectedGroup) ? /* @__PURE__ */ jsxs4(
+                                    Button3,
+                                    {
+                                      className: "mt-1 w-full",
+                                      disabled: view.isLoadingMore,
+                                      size: "sm",
+                                      type: "button",
+                                      variant: "ghost",
+                                      onClick: view.loadMore,
+                                      children: [
+                                        view.isLoadingMore ? /* @__PURE__ */ jsx4(Spinner2, { className: "text-current", size: 14 }) : null,
+                                        copy.t("referencePicker.loadMore")
+                                      ]
+                                    }
+                                  ) : null
+                                ]
+                              }
+                            )
+                          }
+                        )
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    ResizableHandle,
+                    {
+                      disableDoubleClick: true,
+                      withHandle: true,
+                      className: "after:bg-[var(--line-1)]",
+                      onDoubleClick: fitMiddle
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    ResizablePanel,
+                    {
+                      id: "preview",
+                      className: "min-h-0 min-w-0",
+                      defaultSize: 30,
+                      minSize: "200px",
+                      children: /* @__PURE__ */ jsx4(
+                        PreviewInfoPane,
+                        {
+                          copy,
+                          node: view.focusedNode,
+                          previewState: view.previewState,
+                          sourceLabel: view.activeTabLabel,
+                          hierarchy: resolveHierarchyPath(view)
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ) }) }),
+            /* @__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 createPortal(dialog, document.body);
 }
+function GroupFallbackIcon({
+  icon,
+  className
+}) {
+  if (icon === "issue") {
+    return /* @__PURE__ */ jsx4(IssueIcon, { className });
+  }
+  return /* @__PURE__ */ jsx4(FolderFilledIcon3, { className });
+}
+function SourceSidebar({
+  copy,
+  view,
+  contentRef
+}) {
+  const selectedGroupRef = useRef2(null);
+  useEffect3(() => {
+    selectedGroupRef.current?.scrollIntoView({ block: "nearest" });
+  }, [view.selectedGroupKey]);
+  const [shownBySource, setShownBySource] = useState3(
+    {}
+  );
+  const loadMoreGroups = (sourceId) => {
+    const groups = view.sidebarGroupsBySource[sourceId] ?? [];
+    const limit = shownBySource[sourceId] ?? SIDEBAR_GROUP_PAGE_SIZE;
+    const selectedIndex = groups.findIndex(
+      (group) => nodeRefKey(group.ref) === view.selectedGroupKey
+    );
+    const visibleCount = selectedIndex >= limit ? selectedIndex + 1 : limit;
+    const next = visibleCount + SIDEBAR_GROUP_PAGE_SIZE;
+    setShownBySource((prev) => ({ ...prev, [sourceId]: next }));
+    if (next > groups.length && (view.sidebarHasMoreBySource[sourceId] ?? false)) {
+      view.loadMoreSidebarGroups(sourceId);
+    }
+  };
+  return /* @__PURE__ */ jsx4(ScrollArea2, { className: "h-full min-h-0 w-full", children: /* @__PURE__ */ jsx4("div", { ref: contentRef, className: "flex flex-col gap-1 p-2", children: view.tabs.map((tab) => {
+    const groups = view.sidebarGroupsBySource[tab.sourceId] ?? [];
+    const limit = shownBySource[tab.sourceId] ?? SIDEBAR_GROUP_PAGE_SIZE;
+    const selectedIndex = groups.findIndex(
+      (group) => nodeRefKey(group.ref) === view.selectedGroupKey
+    );
+    const effectiveLimit = selectedIndex >= limit ? selectedIndex + 1 : limit;
+    const visibleGroups = groups.slice(0, effectiveLimit);
+    const loadingMore = view.sidebarLoadingMoreBySource[tab.sourceId] ?? false;
+    const hasMore = groups.length > effectiveLimit || (view.sidebarHasMoreBySource[tab.sourceId] ?? false);
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx4(
+        "p",
+        {
+          className: "px-2 pt-1.5 pb-0.5 text-[11px] font-semibold text-[var(--text-tertiary)]",
+          "data-autofit-label": true,
+          children: tab.label
+        }
+      ),
+      groups.length === 0 ? view.isLoadingTabs ? /* @__PURE__ */ jsx4("p", { className: "px-2 py-1 text-[12px] text-[var(--text-tertiary)]", children: "\u2026" }) : null : visibleGroups.map((group) => {
+        const key = nodeRefKey(group.ref);
+        const selected = key === view.selectedGroupKey;
+        return /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            ref: selected ? selectedGroupRef : void 0,
+            "aria-current": selected ? "true" : void 0,
+            className: cn3(
+              "flex items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[13px] transition-colors",
+              selected ? "bg-primary/10 font-medium text-[var(--text-primary)] hover:bg-primary/15" : "text-[var(--text-secondary)] hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)]"
+            ),
+            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(
+                GroupFallbackIcon,
+                {
+                  className: "size-4 shrink-0 text-[var(--rich-text-folder)]",
+                  icon: tab.icon
+                }
+              ),
+              /* @__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
+        );
+      }),
+      hasMore ? /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          className: "flex items-center gap-1.5 rounded-[6px] px-2 py-1.5 text-left text-[12px] text-[var(--text-secondary)] transition-colors hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] disabled:opacity-60",
+          disabled: loadingMore,
+          type: "button",
+          onClick: () => loadMoreGroups(tab.sourceId),
+          children: [
+            loadingMore ? /* @__PURE__ */ jsx4(
+              Spinner2,
+              {
+                className: "text-[var(--text-secondary)]",
+                size: 12
+              }
+            ) : null,
+            /* @__PURE__ */ jsx4("span", { children: copy.t("referencePicker.loadMoreGroups") })
+          ]
+        }
+      ) : null
+    ] }, tab.sourceId);
+  }) }) });
+}
+function SearchResultRow({
+  node,
+  focused,
+  selected,
+  onFocus,
+  onToggle
+}) {
+  const isFolder = node.kind === "folder";
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn3(
+        "grid cursor-pointer 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"
+      ),
+      onClick: () => onFocus(node),
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-center gap-3 text-left", 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.contextLabel ?? node.ref.nodeId })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx4(
+          Button3,
+          {
+            "aria-label": node.displayName,
+            "aria-pressed": selected,
+            size: "icon-sm",
+            type: "button",
+            variant: "ghost",
+            onClick: (event) => {
+              event.stopPropagation();
+              onFocus(node);
+              onToggle(node);
+            },
+            children: selected ? /* @__PURE__ */ jsx4(CheckIcon2, { size: 14 }) : /* @__PURE__ */ jsx4(AddIcon, { className: "text-[var(--text-secondary)]", size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}
+function toPreviewSurfaceState(node, previewState, copy) {
+  if (!("node" in previewState) || nodeRefKey(previewState.node.ref) !== nodeRefKey(node.ref)) {
+    return node.kind === "folder" ? { entry: node, status: "directory" } : { entry: node, status: "loading" };
+  }
+  switch (previewState.status) {
+    case "directory":
+      return { entry: node, status: "directory" };
+    case "loading":
+      return { entry: node, status: "loading" };
+    case "image":
+      return {
+        entry: node,
+        objectUrl: previewState.objectUrl,
+        status: "image"
+      };
+    case "text":
+      return { content: previewState.content, entry: node, status: "text" };
+    case "readonly":
+      return {
+        entry: node,
+        message: previewState.reason === "binary" ? copy.t("referencePicker.previewBinary") : previewState.reason === "file_too_large" || previewState.reason === "text_too_large" ? copy.t("referencePicker.previewTooLarge") : copy.t("referencePicker.previewUnsupported"),
+        status: "readonly"
+      };
+    case "error":
+      return {
+        entry: node,
+        message: copy.t("referencePicker.previewError"),
+        status: "error"
+      };
+    case "unsupported":
+      return {
+        entry: node,
+        message: copy.t("referencePicker.previewUnsupported"),
+        status: "unsupported"
+      };
+  }
+}
+function sourceBadgeClassName(sourceId) {
+  return SOURCE_BADGE_CLASSES[sourceId];
+}
+var SOURCE_BADGE_CLASSES = {
+  "workspace-file": "bg-[color-mix(in_srgb,var(--rich-text-mention-file)_12%,transparent)] text-[var(--rich-text-mention-file)]",
+  "app-artifact": "bg-[color-mix(in_srgb,var(--rich-text-mention-app)_12%,transparent)] text-[var(--rich-text-mention-app)]",
+  "issue-file": "bg-[color-mix(in_srgb,var(--rich-text-mention-issue)_12%,transparent)] text-[var(--rich-text-mention-issue)]"
+};
+function PreviewInfoPane({
+  copy,
+  node,
+  previewState,
+  sourceLabel,
+  hierarchy
+}) {
+  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(
+      WorkspaceFilePreviewSurface,
+      {
+        directoryMessage: copy.t("referencePicker.previewFolder"),
+        emptyMessage: copy.t("referencePicker.emptyPreview"),
+        frameClassName: "flex aspect-[3/2] w-full flex-col items-center justify-center overflow-hidden rounded-[8px] border border-[var(--line-2,var(--border-2))] bg-[var(--transparency-block)] p-0 text-center",
+        imageAlt: (entry) => entry.displayName,
+        imageFrameClassName: "p-3",
+        loadingIndicator: /* @__PURE__ */ jsx4(Spinner2, { size: 16 }),
+        loadingMessage: copy.t("referencePicker.previewLoading"),
+        messageClassName: "mx-auto max-w-[24ch] text-[13px] leading-5 text-[var(--text-secondary)] [overflow-wrap:anywhere]",
+        renderIcon: (entry) => entry.kind === "folder" ? /* @__PURE__ */ jsx4(FolderFilledIcon3, { className: "size-9 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx4(FileIcon3, { className: "size-9 text-[var(--text-tertiary)]" }),
+        state: toPreviewSurfaceState(node, previewState, copy),
+        textClassName: "h-full w-full overflow-auto p-3 text-left text-[11px] leading-5 whitespace-pre-wrap break-words text-[var(--text-primary)]",
+        textFrameClassName: "items-stretch justify-stretch"
+      }
+    ),
+    /* @__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: copy.t("referencePicker.previewSource"), children: /* @__PURE__ */ jsx4(
+        Badge2,
+        {
+          variant: "secondary",
+          className: sourceBadgeClassName(node.ref.sourceId),
+          children: sourceLabel
+        }
+      ) }),
+      node.mtimeMs != null ? /* @__PURE__ */ jsx4(InfoRow, { label: copy.t("referencePicker.previewModified"), children: formatDateTime(node.mtimeMs) }) : null,
+      node.sizeBytes != null ? /* @__PURE__ */ jsx4(InfoRow, { label: copy.t("referencePicker.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: copy.t("referencePicker.previewHierarchy") }),
+      /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap items-center gap-y-1 text-[12px] leading-5", children: hierarchy.map((crumb, index) => /* @__PURE__ */ jsxs4(
+        "span",
+        {
+          className: "flex min-w-0 items-center",
+          children: [
+            index > 0 ? /* @__PURE__ */ jsx4("span", { className: "mx-1 shrink-0 text-[var(--text-tertiary)]", children: "/" }) : null,
+            /* @__PURE__ */ jsx4(
+              "span",
+              {
+                className: "max-w-[14ch] truncate text-[var(--text-secondary)]",
+                title: crumb.displayName,
+                children: crumb.displayName
+              }
+            )
+          ]
+        },
+        nodeRefKey(crumb.ref)
+      )) })
+    ] }) : null
+  ] }) : /* @__PURE__ */ jsx4(Feedback, { children: copy.t("referencePicker.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: "shrink-0 text-[13px] text-[var(--text-secondary)]", children: countLabel }),
+      selection.slice(0, 2).map((node) => /* @__PURE__ */ jsx4(
+        Badge2,
+        {
+          className: "min-w-0 max-w-[12rem]",
+          variant: "secondary",
+          children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: node.displayName })
+        },
+        nodeRefKey(node.ref)
+      )),
+      selection.length > 2 ? /* @__PURE__ */ jsxs4(Badge2, { className: "shrink-0", variant: "secondary", children: [
+        "+",
+        selection.length - 2
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx4(Button3, { type: "button", variant: "secondary", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ jsxs4(
+        Button3,
+        {
+          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 });
+}
+function FilterCategoryFilter({
+  categories,
+  copy,
+  selected,
+  onClear,
+  onToggle
+}) {
+  const [open, setOpen] = useState3(false);
+  const containerRef = useRef2(null);
+  useEffect3(() => {
+    if (!open) {
+      return;
+    }
+    const onPointerDown = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const selectedLabels = categories.filter((category) => selected.has(category.id)).map((category) => copy.t(category.labelKey));
+  const count = selectedLabels.length;
+  const labelText = count > 0 ? selectedLabels.join(copy.t("referencePicker.fileTypeSeparator")) : copy.t("referencePicker.fileTypeAll");
+  return (
+    // shrink-0:不被搜索框挤压;固定宽度让控件不随选中文案变宽。
+    /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: "relative w-[124px] shrink-0", children: [
+      /* @__PURE__ */ jsxs4(
+        Button3,
+        {
+          "aria-expanded": open,
+          "aria-haspopup": "menu",
+          className: "h-8 w-full justify-between gap-1.5 border-0 px-2.5",
+          size: "default",
+          type: "button",
+          variant: "secondary",
+          onClick: () => setOpen((current) => !current),
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1 truncate text-left", title: labelText, children: labelText }),
+            count > 1 ? /* @__PURE__ */ jsx4(Badge2, { className: "shrink-0 px-1.5", variant: "secondary", children: count }) : null,
+            count > 0 ? (
+              // 有选中时,右侧箭头位让位给「清除」:role=button 的 span(避免 button 嵌
+              // button 的非法结构),stopPropagation 让点击只清空筛选、不触发触发器的开合。
+              /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  "aria-label": copy.t("referencePicker.clearFilter"),
+                  className: "grid size-4 shrink-0 cursor-pointer place-items-center rounded-full text-[var(--text-tertiary)] transition-colors hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)]",
+                  role: "button",
+                  tabIndex: 0,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    onClear();
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      event.stopPropagation();
+                      onClear();
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx4(CloseIcon, { size: 12 })
+                }
+              )
+            ) : /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "size-3.5 shrink-0 text-[var(--text-tertiary)]" })
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: "absolute top-[calc(100%+4px)] right-0 min-w-40 overflow-hidden rounded-[8px] border border-[var(--line-1)] bg-[var(--background-fronted)] p-1 shadow-panel",
+          role: "menu",
+          style: { zIndex: "var(--z-panel-popover)" },
+          children: categories.map((category) => {
+            const checked = selected.has(category.id);
+            return /* @__PURE__ */ jsxs4(
+              "button",
+              {
+                "aria-checked": checked,
+                className: "flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-[13px] text-[var(--text-primary)] transition-colors hover:bg-[var(--transparency-hover)]",
+                role: "menuitemcheckbox",
+                type: "button",
+                onClick: () => onToggle(category.id),
+                children: [
+                  /* @__PURE__ */ jsx4("span", { className: "grid size-4 shrink-0 place-items-center", children: checked ? /* @__PURE__ */ jsx4(CheckIcon2, { className: "size-3.5 text-[var(--tutti-purple)]" }) : null }),
+                  /* @__PURE__ */ jsx4("span", { className: "flex-1", children: copy.t(category.labelKey) })
+                ]
+              },
+              category.id
+            );
+          })
+        }
+      ) : null
+    ] })
+  );
+}
+var TREE_INDENT = 28;
+var TREE_COLLAPSE_DURATION_MS = 200;
+function isFocused(focused, node) {
+  return focused ? nodeRefKey(focused.ref) === nodeRefKey(node.ref) : false;
+}
+function resolveHierarchyPath(view) {
+  const focused = view.focusedNode;
+  if (!focused) {
+    return view.breadcrumb;
+  }
+  const trail = findFocusedTrail(
+    view.currentEntries,
+    view.childrenByKey,
+    nodeRefKey(focused.ref),
+    []
+  );
+  return trail ? [...view.breadcrumb, ...trail] : view.breadcrumb;
+}
+function findFocusedTrail(roots, childrenByKey, targetKey, trail) {
+  for (const node of roots) {
+    if (nodeRefKey(node.ref) === targetKey) {
+      return [...trail];
+    }
+    if (node.kind === "folder") {
+      const children = childrenByKey[nodeRefKey(node.ref)]?.entries ?? [];
+      if (children.length > 0) {
+        const found = findFocusedTrail(children, childrenByKey, targetKey, [
+          ...trail,
+          node
+        ]);
+        if (found) {
+          return found;
+        }
+      }
+    }
+  }
+  return null;
+}
+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 cursor-pointer 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` },
+        onClick: () => {
+          view.setFocusedNode(node);
+          if (isFolder) {
+            view.toggleNode(node);
+          }
+        },
+        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: (event) => {
+                event.stopPropagation();
+                view.setFocusedNode(node);
+                view.toggleNode(node);
+              },
+              children: /* @__PURE__ */ jsx4(
+                ArrowRightIcon2,
+                {
+                  className: cn3(
+                    "size-3.5 transition-transform",
+                    expanded && "rotate-90"
+                  )
+                }
+              )
+            }
+          ) : null,
+          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: "min-w-0 flex-1 truncate text-[13px] text-[var(--text-primary)]",
+              "data-autofit-label": true,
+              children: node.displayName
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Button3,
+            {
+              "aria-label": node.displayName,
+              "aria-pressed": selected,
+              className: "shrink-0",
+              size: "icon-sm",
+              type: "button",
+              variant: "ghost",
+              onClick: (event) => {
+                event.stopPropagation();
+                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