@tutti-os/workspace-file-reference 0.0.1

package/dist/ui/index.js

@@ -0,0 +1,676 @@
+import {
+  normalizeDirectoryPath,
+  useWorkspaceFileReferencePickerView
+} from "../chunk-LS7P3J6Z.js";
+import "../chunk-PAR2R2G5.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,
+  cn as cn2
+} from "@tutti-os/ui-system";
+
+// src/ui/internal/reference/WorkspaceFileReferencePickerSections.tsx
+import {
+  Badge,
+  Button as Button2,
+  FileIcon as FileIcon2,
+  FolderFilledIcon as FolderFilledIcon2,
+  LoadingIcon
+} from "@tutti-os/ui-system";
+import { formatWorkspacePreviewByteLimit } from "@tutti-os/workspace-file-preview";
+import { WorkspaceFilePreviewSurface as SharedWorkspaceFilePreviewSurface } from "@tutti-os/workspace-file-preview/react";
+
+// src/ui/internal/reference/WorkspaceFileReferencePickerTree.tsx
+import { useEffect, useState } from "react";
+import { useComposedInputValue } from "@tutti-os/ui-react-hooks";
+import {
+  ArrowRightIcon,
+  Button,
+  CheckIcon,
+  FileIcon,
+  FolderFilledIcon,
+  Input,
+  ScrollArea,
+  SearchIcon,
+  Spinner,
+  cn
+} 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 workspaceFileReferenceTreeCollapseDurationMs = 200;
+function WorkspaceFileReferencePickerBrowserPane({
+  browseRootEntries,
+  copy,
+  directoryStateByPath,
+  expandedFolderPaths,
+  focusedPath,
+  isLoading,
+  mode,
+  searchQuery,
+  selectedRefs,
+  setSearchQuery,
+  visibleEntries,
+  onFocusPath,
+  onToggleFolder,
+  onToggleRef
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "nodrag flex min-h-0 flex-col border-b border-[var(--line-1)] [-webkit-app-region:no-drag] lg:border-r lg:border-b-0", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--line-1)] p-3", children: /* @__PURE__ */ jsx(
+      WorkspaceFileReferencePickerSearchInput,
+      {
+        placeholder: copy.t("referencePicker.searchPlaceholder"),
+        value: searchQuery,
+        onChange: setSearchQuery
+      }
+    ) }),
+    isLoading ? /* @__PURE__ */ jsx(WorkspaceFileReferencePickerFeedback, { children: /* @__PURE__ */ jsx(Spinner, { className: "text-[var(--text-secondary)]", size: 16 }) }) : visibleEntries.length === 0 ? /* @__PURE__ */ jsx(WorkspaceFileReferencePickerFeedback, { children: mode === "search" ? copy.t("referencePicker.emptySearch") : copy.t("referencePicker.emptyDirectory") }) : /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px] p-3", children: mode === "browse" ? /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: browseRootEntries.map((entry) => /* @__PURE__ */ jsx(
+      WorkspaceFileReferencePickerTreeEntry,
+      {
+        childDepth: 1,
+        copy,
+        directoryStateByPath,
+        entry,
+        expandedFolderPaths,
+        focusedPath,
+        selectedRefs,
+        onFocusPath,
+        onToggleFolder,
+        onToggleRef
+      },
+      entry.path
+    )) }) : visibleEntries.map((entry) => /* @__PURE__ */ jsx(
+      WorkspaceFileReferencePickerSearchEntry,
+      {
+        entry,
+        focused: focusedPath === entry.path,
+        selected: selectedRefs.some(
+          (item) => item.path === entry.path
+        ),
+        onFocusPath,
+        onToggleRef
+      },
+      entry.path
+    )) }) })
+  ] });
+}
+function WorkspaceFileReferencePickerSearchInput({
+  onChange,
+  placeholder,
+  value
+}) {
+  const searchInput = useComposedInputValue({ onCommit: onChange, value });
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(SearchIcon, { className: "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-[var(--text-tertiary)]" }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        className: "pl-9",
+        placeholder,
+        value: searchInput.value,
+        onBlur: searchInput.onBlur,
+        onChange: searchInput.onChange,
+        onCompositionEnd: searchInput.onCompositionEnd,
+        onCompositionStart: searchInput.onCompositionStart
+      }
+    )
+  ] });
+}
+function WorkspaceFileReferencePickerTreeEntry({
+  childDepth,
+  copy,
+  directoryStateByPath,
+  entry,
+  expandedFolderPaths,
+  focusedPath,
+  selectedRefs,
+  onFocusPath,
+  onToggleFolder,
+  onToggleRef
+}) {
+  const selected = selectedRefs.some((item) => item.path === entry.path);
+  const focused = focusedPath === entry.path;
+  const isFolder = entry.kind === "folder";
+  const folderKey = normalizeDirectoryPath(entry.path);
+  const expanded = expandedFolderPaths[folderKey] ?? false;
+  const childState = directoryStateByPath[folderKey];
+  const childEntries = childState?.entries ?? [];
+  const [shouldRenderChildContent, setShouldRenderChildContent] = useState(expanded);
+  useEffect(() => {
+    if (expanded) {
+      setShouldRenderChildContent(true);
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setShouldRenderChildContent(false);
+    }, workspaceFileReferenceTreeCollapseDurationMs);
+    return () => window.clearTimeout(timeoutId);
+  }, [expanded]);
+  const shouldBuildChildContent = expanded || shouldRenderChildContent;
+  const childContent = shouldBuildChildContent ? childState?.loading ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-2 px-2 py-2 text-xs text-[var(--text-secondary)]",
+      style: {
+        paddingLeft: `${childDepth * workspaceFileReferenceTreeIndent + 12}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx(Spinner, { className: "text-[var(--text-secondary)]", size: 14 }),
+        /* @__PURE__ */ jsx("span", { children: copy.t("referencePicker.loading") })
+      ]
+    }
+  ) : childEntries.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: childEntries.map((childEntry) => /* @__PURE__ */ jsx(
+    WorkspaceFileReferencePickerTreeEntry,
+    {
+      childDepth: childDepth + 1,
+      copy,
+      directoryStateByPath,
+      entry: childEntry,
+      expandedFolderPaths,
+      focusedPath,
+      selectedRefs,
+      onFocusPath,
+      onToggleFolder,
+      onToggleRef
+    },
+    childEntry.path
+  )) }) : childState?.loaded ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "px-2 py-2 text-xs text-[var(--text-secondary)]",
+      style: {
+        paddingLeft: `${childDepth * workspaceFileReferenceTreeIndent + 12}px`
+      },
+      children: copy.t("referencePicker.emptyDirectory")
+    }
+  ) : null : null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "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",
+          "nodrag [-webkit-app-region:no-drag]",
+          focused || selected ? "bg-transparency-block" : "hover:bg-transparency-block"
+        ),
+        style: {
+          paddingLeft: `${(childDepth - 1) * workspaceFileReferenceTreeIndent + 8}px`
+        },
+        children: [
+          isFolder ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": resolveWorkspaceFileReferenceLabel(entry),
+              className: "nodrag grid size-5 shrink-0 place-items-center rounded-sm text-[var(--text-secondary)] [-webkit-app-region:no-drag] hover:bg-[var(--transparency-hover)]",
+              type: "button",
+              onClick: (event) => {
+                event.stopPropagation();
+                onToggleFolder(entry);
+              },
+              children: /* @__PURE__ */ jsx(
+                ArrowRightIcon,
+                {
+                  className: cn(
+                    "size-3.5 transition-transform",
+                    expanded && "rotate-90"
+                  )
+                }
+              )
+            }
+          ) : /* @__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-sm text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": resolveWorkspaceFileReferenceLabel(entry),
+              "aria-pressed": selected,
+              size: "icon-sm",
+              type: "button",
+              variant: "ghost",
+              className: "nodrag [-webkit-app-region:no-drag]",
+              onClick: (event) => {
+                event.stopPropagation();
+                onFocusPath(entry.path);
+                onToggleRef(entry);
+              },
+              children: selected ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(AddLinedIcon, { className: "text-[var(--text-secondary)]", size: 16 })
+            }
+          )
+        ]
+      }
+    ),
+    isFolder ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "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__ */ jsx(
+          "div",
+          {
+            "aria-hidden": expanded ? void 0 : "true",
+            className: cn(
+              "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 WorkspaceFileReferencePickerSearchEntry({
+  entry,
+  focused,
+  selected,
+  onFocusPath,
+  onToggleRef
+}) {
+  const isFolder = entry.kind === "folder";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      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",
+        "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"
+      ),
+      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-sm font-medium text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(entry) }),
+                /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--text-secondary)]", children: entry.path })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": resolveWorkspaceFileReferenceLabel(entry),
+            "aria-pressed": selected,
+            size: "icon-sm",
+            type: "button",
+            variant: "ghost",
+            className: "nodrag [-webkit-app-region:no-drag]",
+            onClick: (event) => {
+              event.stopPropagation();
+              onFocusPath(entry.path);
+              onToggleRef(entry);
+            },
+            children: selected ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(AddLinedIcon, { className: "text-[var(--text-secondary)]", size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkspaceFileReferencePickerFeedback({
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "grid min-h-0 flex-1 place-items-center px-4 text-center text-sm text-[var(--text-secondary)]", children });
+}
+function resolveWorkspaceFileReferenceLabel(ref) {
+  return ref.displayName || ref.path.split("/").filter(Boolean).at(-1) || ref.path;
+}
+
+// src/ui/internal/reference/WorkspaceFileReferencePickerSections.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var workspaceFileReferencePickerSelectedBadgeClassName = "max-w-[14rem] rounded-[4px] border-transparent bg-[var(--transparency-block)] text-[var(--text-primary)]";
+function WorkspaceFileReferencePickerPreviewPane({
+  copy,
+  focusedEntry,
+  mode,
+  previewState
+}) {
+  return /* @__PURE__ */ jsx2("aside", { className: "flex shrink-0 flex-col border-t border-[var(--line-1)] bg-[var(--background-fronted)] lg:min-h-0 lg:flex-1 lg:border-t-0", children: /* @__PURE__ */ jsx2("div", { className: "flex min-h-0 flex-1 flex-col p-2", children: focusedEntry ? /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-col gap-4 lg:flex-1 lg:gap-5", children: [
+    /* @__PURE__ */ jsx2(
+      WorkspaceFileReferencePreviewSurface,
+      {
+        copy,
+        focusedEntry,
+        previewState
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: "space-y-2 px-2 lg:space-y-3", children: /* @__PURE__ */ jsxs2("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx2("p", { className: "truncate text-[15px] font-semibold text-[var(--text-primary)]", children: resolveWorkspaceFileReferenceLabel(focusedEntry) }),
+      /* @__PURE__ */ jsx2("p", { className: "line-clamp-3 text-sm text-[var(--text-secondary)] [overflow-wrap:anywhere]", children: focusedEntry.path })
+    ] }) })
+  ] }) : /* @__PURE__ */ jsx2(WorkspaceFileReferencePickerFeedback2, { children: mode === "search" ? copy.t("referencePicker.emptySearch") : copy.t("referencePicker.emptyDirectory") }) }) });
+}
+function WorkspaceFileReferencePreviewSurface({
+  copy,
+  focusedEntry,
+  previewState
+}) {
+  return /* @__PURE__ */ jsx2(
+    SharedWorkspaceFilePreviewSurface,
+    {
+      directoryMessage: copy.t("referencePicker.previewFolder"),
+      emptyMessage: copy.t("referencePicker.previewUnavailable"),
+      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: resolveWorkspaceFileReferenceLabel,
+      imageFrameClassName: "p-3",
+      loadingIndicator: /* @__PURE__ */ jsx2("span", { className: "mx-auto grid size-11 place-items-center rounded-[6px] bg-[var(--transparency-block)]", children: /* @__PURE__ */ jsx2(LoadingIcon, { className: "size-4 animate-spin" }) }),
+      loadingMessage: copy.t("referencePicker.previewLoading"),
+      messageClassName: "mx-auto max-w-[24ch] text-sm leading-5 text-[var(--text-secondary)] [overflow-wrap:anywhere]",
+      renderIcon: (entry) => entry.kind === "folder" ? /* @__PURE__ */ jsx2(FolderFilledIcon2, { className: "mx-auto size-9 text-[var(--rich-text-folder)]" }) : /* @__PURE__ */ jsx2(FileIcon2, { className: "mx-auto size-9 text-[var(--text-tertiary)]" }),
+      state: resolveWorkspaceFileReferenceSurfaceState(
+        copy,
+        focusedEntry,
+        previewState
+      ),
+      textClassName: "h-full overflow-auto p-3 text-left text-xs leading-5 whitespace-pre-wrap break-words text-[var(--text-primary)]",
+      textFrameClassName: "items-stretch justify-stretch"
+    }
+  );
+}
+function resolveWorkspaceFileReferenceSurfaceState(copy, focusedEntry, previewState) {
+  if (focusedEntry.kind === "folder") {
+    return {
+      entry: focusedEntry,
+      status: "directory"
+    };
+  }
+  if (!("reference" in previewState) || previewState.reference.path !== focusedEntry.path) {
+    return {
+      entry: focusedEntry,
+      message: focusedEntry.path,
+      status: "unsupported"
+    };
+  }
+  switch (previewState.status) {
+    case "loading":
+    case "image":
+    case "text":
+      return {
+        ...previewState,
+        entry: focusedEntry
+      };
+    case "readonly":
+      return {
+        entry: focusedEntry,
+        message: resolveWorkspaceFileReferencePreviewReadonlyMessage(
+          copy,
+          previewState
+        ),
+        status: "readonly"
+      };
+    case "error":
+      return {
+        entry: focusedEntry,
+        message: copy.t("referencePicker.previewError"),
+        status: "error"
+      };
+    case "unsupported":
+      return {
+        entry: focusedEntry,
+        message: copy.t("referencePicker.previewUnsupported"),
+        status: "unsupported"
+      };
+    case "unavailable":
+      return {
+        entry: focusedEntry,
+        message: copy.t("referencePicker.previewUnavailable"),
+        status: "unsupported"
+      };
+    case "directory":
+      return {
+        entry: focusedEntry,
+        status: "directory"
+      };
+  }
+}
+function resolveWorkspaceFileReferencePreviewReadonlyMessage(copy, previewState) {
+  switch (previewState.reason) {
+    case "binary":
+      return copy.t("referencePicker.previewBinary");
+    case "decode_failed":
+      return copy.t("referencePicker.previewDecodeFailed");
+    case "file_too_large":
+      return copy.t("referencePicker.previewFileTooLarge", {
+        maxSize: formatWorkspacePreviewByteLimit(previewState.maxSizeBytes ?? 0)
+      });
+    case "text_too_large":
+      return copy.t("referencePicker.previewTextTooLarge", {
+        maxSize: formatWorkspacePreviewByteLimit(previewState.maxSizeBytes ?? 0)
+      });
+  }
+}
+function WorkspaceFileReferencePickerFooter({
+  copy,
+  onClose,
+  onConfirm,
+  selectedRefs
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "nodrag flex flex-col gap-3 border-t border-[var(--line-1)] px-4 py-4 [-webkit-app-region:no-drag] sm:px-6 lg:flex-row lg:items-center lg:justify-between", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-wrap items-center gap-2 lg:flex-1", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-sm text-[var(--text-secondary)]", children: copy.t("referencePicker.selectedCount", {
+        count: selectedRefs.length
+      }) }),
+      selectedRefs.slice(0, 2).map((ref) => /* @__PURE__ */ jsx2(
+        Badge,
+        {
+          className: workspaceFileReferencePickerSelectedBadgeClassName,
+          variant: "secondary",
+          children: /* @__PURE__ */ jsx2("span", { className: "truncate", children: resolveWorkspaceFileReferenceLabel(ref) })
+        },
+        ref.path
+      )),
+      selectedRefs.length > 2 ? /* @__PURE__ */ jsxs2(
+        Badge,
+        {
+          className: workspaceFileReferencePickerSelectedBadgeClassName,
+          variant: "secondary",
+          children: [
+            "+",
+            selectedRefs.length - 2
+          ]
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex w-full items-center justify-end gap-2 lg:w-auto lg:shrink-0", children: [
+      /* @__PURE__ */ jsx2(
+        Button2,
+        {
+          className: "nodrag [-webkit-app-region:no-drag]",
+          type: "button",
+          variant: "secondary",
+          onClick: onClose,
+          children: copy.t("actions.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Button2,
+        {
+          className: "nodrag [-webkit-app-region:no-drag]",
+          disabled: selectedRefs.length === 0,
+          type: "button",
+          onClick: onConfirm,
+          children: copy.t("referencePicker.confirm")
+        }
+      )
+    ] })
+  ] });
+}
+function WorkspaceFileReferencePickerFeedback2({
+  children
+}) {
+  return /* @__PURE__ */ jsx2("div", { className: "grid min-h-0 flex-1 place-items-center px-4 text-center text-sm text-[var(--text-secondary)]", children });
+}
+
+// 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,
+  initialPath,
+  onClose,
+  onConfirm,
+  open,
+  workspaceId
+}) {
+  const titleId = useId();
+  const {
+    browseRootEntries,
+    directoryStateByPath,
+    expandedFolderPaths,
+    focusedEntry,
+    focusedPath,
+    isLoading,
+    mode,
+    previewState,
+    searchQuery,
+    selectedRefs,
+    visibleEntries,
+    setFocusedPath,
+    setSearchQuery,
+    toggleFolder,
+    toggleRef
+  } = useWorkspaceFileReferencePickerView({
+    fileAdapter,
+    initialPath,
+    onClose,
+    onConfirm,
+    open,
+    workspaceId
+  });
+  if (!open) {
+    return null;
+  }
+  const dialog = /* @__PURE__ */ jsx3(
+    "div",
+    {
+      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,
+      children: /* @__PURE__ */ jsxs3(
+        Card,
+        {
+          "aria-labelledby": titleId,
+          "aria-modal": "true",
+          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
+          ),
+          role: "dialog",
+          onClick: (event) => event.stopPropagation(),
+          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(
+                WorkspaceFileReferencePickerBrowserPane,
+                {
+                  browseRootEntries,
+                  copy,
+                  directoryStateByPath,
+                  expandedFolderPaths,
+                  focusedPath,
+                  isLoading,
+                  mode,
+                  searchQuery,
+                  selectedRefs,
+                  setSearchQuery,
+                  visibleEntries,
+                  onFocusPath: setFocusedPath,
+                  onToggleFolder: toggleFolder,
+                  onToggleRef: toggleRef
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                WorkspaceFileReferencePickerPreviewPane,
+                {
+                  copy,
+                  focusedEntry,
+                  mode,
+                  previewState
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3(
+              WorkspaceFileReferencePickerFooter,
+              {
+                copy,
+                onClose,
+                onConfirm: () => onConfirm(selectedRefs),
+                selectedRefs
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  if (typeof document === "undefined") {
+    return dialog;
+  }
+  return createPortal(dialog, document.body);
+}
+export {
+  WorkspaceFileReferencePicker
+};
+//# sourceMappingURL=index.js.map