@tutti-os/workspace-file-reference 0.0.48 → 0.0.50

package/dist/ui/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { WorkspaceFileReferenceCopy, WorkspaceFileReferenceAdapter, WorkspaceFileReference, ReferenceHandle, ReferenceLocateTarget, ReferenceNode } from '../contracts/index.js';
+import { WorkspaceFileReferenceCopy, WorkspaceFileReferenceAdapter, WorkspaceFileReference, ReferenceHandle, NodeRef, ReferenceLocateTarget, ReferenceNode } from '../contracts/index.js';
 import { JSX } from 'react';
-import { WorkspaceFileManagerI18nRuntime, WorkspaceFileOpenWithApplication, WorkspaceFileEntry } from '@tutti-os/workspace-file-manager';
+import { WorkspaceFileManagerI18nRuntime, WorkspaceFileEntry, WorkspaceFileOpenWithApplication } from '@tutti-os/workspace-file-manager';
 import { R as ReferenceSourceAggregator } from '../referenceSourceAggregator-DjtFsLnF.js';
 import '@tutti-os/workspace-file-manager/services';
 
@@ -63,5 +63,18 @@ interface ReferenceSourcePickerProps {
     workspaceId: string;
 }
 declare function ReferenceSourcePicker({ aggregator, copy, fileManagerCopy, hostOs, initialTarget, isNodeSelectable, onClose, onConfirm, onConfirmBundles, open, resolveEntryIconUrl, resolveOpenWithApplicationIcon, workspaceId }: ReferenceSourcePickerProps): JSX.Element | null;
+interface ReferenceSourceContentPaneProps {
+    aggregator: ReferenceSourceAggregator;
+    className?: string;
+    copy: WorkspaceFileReferenceCopy;
+    fileManagerCopy?: WorkspaceFileManagerI18nRuntime;
+    hostOs?: NodeJS.Platform;
+    initialNodeRef?: NodeRef | null;
+    initialTarget?: ReferenceLocateTarget | null;
+    resolveEntryIconUrl?: (entry: WorkspaceFileEntry) => Promise<string | null | undefined>;
+    resolveOpenWithApplicationIcon?: (application: WorkspaceFileOpenWithApplication) => JSX.Element | null;
+    workspaceId: string;
+}
+declare function ReferenceSourceContentPane({ aggregator, className, copy, fileManagerCopy, hostOs, initialNodeRef, initialTarget, resolveEntryIconUrl, resolveOpenWithApplicationIcon, workspaceId }: ReferenceSourceContentPaneProps): JSX.Element;
 
-export { type ReferenceBundleSelection, type ReferenceGroupedSelection, ReferenceSourcePicker, type ReferenceSourcePickerProps, WorkspaceFileReferencePicker, type WorkspaceFileReferencePickerProps };
+export { type ReferenceBundleSelection, type ReferenceGroupedSelection, ReferenceSourceContentPane, type ReferenceSourceContentPaneProps, ReferenceSourcePicker, type ReferenceSourcePickerProps, WorkspaceFileReferencePicker, type WorkspaceFileReferencePickerProps };

package/dist/ui/index.js

@@ -1968,6 +1968,355 @@ function ReferenceSourcePicker({
   }
   return createPortal(dialog, document.body);
 }
+function ReferenceSourceContentPane({
+  aggregator,
+  className,
+  copy,
+  fileManagerCopy,
+  hostOs = "darwin",
+  initialNodeRef = null,
+  initialTarget = null,
+  resolveEntryIconUrl,
+  resolveOpenWithApplicationIcon,
+  workspaceId
+}) {
+  const view = useReferenceSourcePickerView({
+    aggregator,
+    workspaceId,
+    open: true,
+    workspaceRootGroupLabel: copy.t("referencePicker.workspaceRootGroup"),
+    initialTarget,
+    isNodeSelectable: () => false,
+    onClose: noopVoid,
+    onConfirm: noopVoid
+  });
+  useEffect3(() => {
+    if (!initialNodeRef) {
+      return;
+    }
+    if (view.selectedGroupKey === nodeRefKey(initialNodeRef)) {
+      return;
+    }
+    const group = view.sidebarGroupsBySource[initialNodeRef.sourceId]?.find(
+      (item) => item.ref.nodeId === initialNodeRef.nodeId
+    );
+    if (!group) {
+      return;
+    }
+    view.selectGroup(group);
+  }, [
+    initialNodeRef,
+    view.selectedGroupKey,
+    view.sidebarGroupsBySource,
+    view.selectGroup
+  ]);
+  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 searchInput = useComposedInputValue2({
+    onCommit: view.setSearchQuery,
+    value: view.searchQuery
+  });
+  const contextMenuRef = useRef2(null);
+  const [contextMenu, setContextMenu] = useState4(null);
+  const [openWithApplications, setOpenWithApplications] = useState4([]);
+  const [openWithLoading, setOpenWithLoading] = useState4(false);
+  const retainedIconEntries = useMemo2(
+    () => collectReferenceNodeIconEntries({
+      childrenByKey: view.childrenByKey,
+      currentEntries: view.currentEntries,
+      expandedKeys: view.expandedKeys,
+      focusedNode: view.focusedNode,
+      searchResults: view.searchResults,
+      selection: view.selection,
+      sidebarGroupsBySource: view.sidebarGroupsBySource
+    }),
+    [
+      view.childrenByKey,
+      view.currentEntries,
+      view.expandedKeys,
+      view.focusedNode,
+      view.searchResults,
+      view.selection,
+      view.sidebarGroupsBySource
+    ]
+  );
+  const iconUrls = useWorkspaceFileEntryIconUrls({
+    entries: retainedIconEntries,
+    includeImageThumbnails: resolveEntryIconUrl !== void 0,
+    resolveEntryIconUrl
+  });
+  useEffect3(() => {
+    if (!contextMenu || !fileManagerCopy) {
+      setOpenWithApplications([]);
+      setOpenWithLoading(false);
+      return;
+    }
+    let cancelled = false;
+    const cachedApplications = view.getCachedOpenWithApplications(
+      contextMenu.node
+    );
+    if (cachedApplications) {
+      setOpenWithApplications(cachedApplications);
+      setOpenWithLoading(false);
+      return;
+    }
+    setOpenWithApplications([]);
+    setOpenWithLoading(true);
+    void view.listOpenWithApplications(contextMenu.node).then((applications) => {
+      if (cancelled) {
+        return;
+      }
+      setOpenWithApplications(applications);
+      setOpenWithLoading(false);
+    }).catch(() => {
+      if (cancelled) {
+        return;
+      }
+      setOpenWithApplications([]);
+      setOpenWithLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [contextMenu?.node, fileManagerCopy]);
+  useEffect3(() => {
+    if (!contextMenu) {
+      return;
+    }
+    function handlePointerDown(event) {
+      const target = event.target;
+      if (target instanceof Node && contextMenuRef.current?.contains(target)) {
+        return;
+      }
+      if (target instanceof Element && target.closest("[data-workspace-file-manager-submenu]")) {
+        return;
+      }
+      setContextMenu(null);
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        setContextMenu(null);
+      }
+    }
+    window.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [contextMenu]);
+  const openReferenceContextMenu = (event, node) => {
+    if (!fileManagerCopy || node.kind !== "file") {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    view.setFocusedNode(node);
+    setContextMenu({
+      node,
+      x: event.clientX,
+      y: event.clientY
+    });
+  };
+  const hasSelectedGroup = view.selectedGroupKey != null;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn3(
+        "relative flex min-h-0 min-w-0 flex-1 overflow-hidden bg-[var(--background-fronted)]",
+        className
+      ),
+      "data-slot": "viewport-menu-boundary",
+      "data-workspace-file-menu-boundary": "",
+      style: {
+        "--workspace-file-manager-dialog-overlay-z-index": "20"
+      },
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex min-h-0 min-w-0 flex-[1.7] flex-col border-r border-[var(--line-1)]", 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: searchInput.value,
+                  onBlur: searchInput.onBlur,
+                  onChange: searchInput.onChange,
+                  onCompositionEnd: searchInput.onCompositionEnd,
+                  onCompositionStart: searchInput.onCompositionStart
+                }
+              )
+            ] }),
+            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: {
+                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", { 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),
+                    iconUrls,
+                    node,
+                    selected: view.isSelected(node),
+                    onFocus: view.setFocusedNode,
+                    onContextMenu: openReferenceContextMenu,
+                    onOpen: view.openNode,
+                    selectable: view.isSelectable(node),
+                    onSingleSelect: view.toggleSingleSelectionAndExpand,
+                    onToggle: view.toggleSelection
+                  },
+                  nodeRefKey(node.ref)
+                )) : view.currentEntries.length === 0 ? /* @__PURE__ */ jsx4(Feedback, { children: copy.t(
+                  hasSelectedGroup ? "referencePicker.emptyDirectory" : "referencePicker.selectGroupHint"
+                ) }) : view.currentEntries.map((node) => /* @__PURE__ */ jsx4(
+                  TreeNodeRow,
+                  {
+                    copy,
+                    depth: 0,
+                    iconUrls,
+                    node,
+                    onContextMenu: openReferenceContextMenu,
+                    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
+              ] })
+            }
+          ),
+          fileManagerCopy ? /* @__PURE__ */ jsx4(
+            WorkspaceFileManagerContextMenu,
+            {
+              busy: view.isOpeningReference,
+              contextMenu: contextMenu ? {
+                entry: referenceNodeToWorkspaceFileEntry(contextMenu.node),
+                x: contextMenu.x,
+                y: contextMenu.y
+              } : null,
+              contextMenuRef,
+              copy: fileManagerCopy,
+              openWithApplications,
+              openWithLoading,
+              positionMode: "viewport",
+              revealInFolderLabel: resolveRevealInFolderLabel(
+                fileManagerCopy,
+                hostOs
+              ),
+              resolveOpenWithApplicationIcon,
+              showCopyAction: false,
+              showCopyPathAction: false,
+              showCreateAction: false,
+              showDeleteAction: false,
+              showExportAction: false,
+              showImportAction: false,
+              showOpenInAppBrowserAction: false,
+              showOpenInDefaultBrowserAction: false,
+              showOpenInFileViewerAction: false,
+              showOpenWithAction: true,
+              showOpenWithOtherAction: true,
+              showRevealInFolderAction: true,
+              showRenameAction: false,
+              onClose: () => setContextMenu(null),
+              onCopy: noopAsync,
+              onCopyPath: noopAsync,
+              onCreateDirectory: noopVoid,
+              onCreateFile: noopVoid,
+              onDelete: noopVoid,
+              onExport: noopAsync,
+              onImport: noopAsync,
+              onOpen: async () => {
+                if (contextMenu) {
+                  await view.openNode(contextMenu.node);
+                }
+              },
+              onOpenInAppBrowser: noopAsync,
+              onOpenInDefaultBrowser: noopAsync,
+              onOpenInFileViewer: noopAsync,
+              onOpenWithApplication: async (applicationPath) => {
+                if (contextMenu) {
+                  await view.openWithApplication(
+                    contextMenu.node,
+                    applicationPath
+                  );
+                }
+              },
+              onOpenWithOtherApplication: async () => {
+                if (contextMenu) {
+                  await view.openWithOtherApplication(
+                    contextMenu.node,
+                    fileManagerCopy.t("openWithOtherPickerPrompt")
+                  );
+                }
+              },
+              onRevealInFolder: async () => {
+                if (contextMenu) {
+                  await view.revealNode(contextMenu.node);
+                }
+              },
+              onRename: noopVoid
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "@max-[760px]/workspace-file-manager:hidden min-h-0 min-w-[220px] flex-1", children: /* @__PURE__ */ jsx4(
+          PreviewInfoPane,
+          {
+            copy,
+            hierarchy: view.breadcrumb,
+            iconUrls,
+            node: view.focusedNode,
+            previewState: view.previewState,
+            sourceLabel: view.activeTabLabel
+          }
+        ) })
+      ]
+    }
+  );
+}
 function GroupFallbackIcon({
   icon,
   className
@@ -2805,6 +3154,7 @@ function noopVoid() {
 async function noopAsync() {
 }
 export {
+  ReferenceSourceContentPane,
   ReferenceSourcePicker,
   WorkspaceFileReferencePicker
 };