alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/dashboard/app/ExplorerList.js

@@ -1,52 +1,51 @@
 import {
   useAtomValueRaw,
-  useSetAtom
+  useSetAtom,
+  useStore
 } from "../../chunks/chunk-D6UJHBJJ.js";
 import {
   atom
 } from "../../chunks/chunk-CFNRVI3Y.js";
-import {
-  $32ef394310635fd5$export$2cfc5be7a55829f6
-} from "../../chunks/chunk-DNJX6CRV.js";
-import "../../chunks/chunk-AC4U3IMS.js";
-import {
-  $d40e85a29b831dd6$export$a144e1752ebe0aa
-} from "../../chunks/chunk-S4AU6SRS.js";
 import {
   dist_default
 } from "../../chunks/chunk-I4OYYAX5.js";
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/ExplorerList.tsx
-import { Button, Icon } from "alinea/components";
+import {
+  Button,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  Icon
+} from "alinea/components";
 import { assert } from "alinea/core/util/Assert";
+import { useLayoutEffect, useRef } from "react";
 import {
-  explorerPageIsPending
+  explorerPageIsPending,
+  explorerScrollKey
 } from "../atoms/explorer.js";
+import {
+  acceptsDashboardEntryDrag,
+  dashboardEntryDropIds
+} from "../atoms/utils.js";
 import { IcRoundSearch, LucideFile } from "../icons.js";
 import { ExplorerCards } from "./ExplorerCards.js";
 
 // src/dashboard/app/ExplorerList.module.css
 var ExplorerList_default = {
-  "ExplorerList-empty-title": "alinea-ExplorerList-empty-title",
-  "ExplorerListEmptyTitle": "alinea-ExplorerList-empty-title",
-  "ExplorerList-drag-preview-label": "alinea-ExplorerList-drag-preview-label",
-  "ExplorerListDragPreviewLabel": "alinea-ExplorerList-drag-preview-label",
-  "ExplorerList-empty-button": "alinea-ExplorerList-empty-button",
-  "ExplorerListEmptyButton": "alinea-ExplorerList-empty-button",
-  "ExplorerList-empty-text": "alinea-ExplorerList-empty-text",
-  "ExplorerListEmptyText": "alinea-ExplorerList-empty-text",
   "ExplorerList-drag-preview": "alinea-ExplorerList-drag-preview",
   "ExplorerListDragPreview": "alinea-ExplorerList-drag-preview",
-  "ExplorerList-pending": "alinea-ExplorerList-pending",
-  "ExplorerListPending": "alinea-ExplorerList-pending",
-  "ExplorerList": "alinea-ExplorerList",
   "ExplorerList-empty": "alinea-ExplorerList-empty",
   "ExplorerListEmpty": "alinea-ExplorerList-empty",
-  "ExplorerList-empty-icon": "alinea-ExplorerList-empty-icon",
-  "ExplorerListEmptyIcon": "alinea-ExplorerList-empty-icon",
-  "ExplorerList-empty-copy": "alinea-ExplorerList-empty-copy",
-  "ExplorerListEmptyCopy": "alinea-ExplorerList-empty-copy"
+  "ExplorerList": "alinea-ExplorerList",
+  "ExplorerList-drag-preview-label": "alinea-ExplorerList-drag-preview-label",
+  "ExplorerListDragPreviewLabel": "alinea-ExplorerList-drag-preview-label",
+  "ExplorerList-empty-button": "alinea-ExplorerList-empty-button",
+  "ExplorerListEmptyButton": "alinea-ExplorerList-empty-button"
 };
 
 // src/dashboard/app/ExplorerList.tsx
@@ -58,45 +57,101 @@ function EmptyResults({ explorer, page, root }) {
   const icon = useAtomValueRaw(root?.icon ?? fallbackEmptyIcon);
   const setSearchScope = useSetAtom(explorer.searchScope);
   const canSearchEverything = useAtomValueRaw(explorer.canSearchEverything);
-  const canSearchAll = canSearchEverything && page.searchScope === "workspace" && (explorer.mode === "search" || page.resultMode === "matches");
-  return /* @__PURE__ */ jsxs("div", { className: styles.ExplorerList.empty(), children: [
-    /* @__PURE__ */ jsx(Icon, { icon, className: styles.ExplorerList.empty.icon() }),
-    /* @__PURE__ */ jsxs("div", { className: styles.ExplorerList.empty.copy(), children: [
-      /* @__PURE__ */ jsx("div", { className: styles.ExplorerList.empty.title(), children: "No results found" }),
-      /* @__PURE__ */ jsx("div", { className: styles.ExplorerList.empty.text(), children: canSearchAll ? "Try different search terms or search all workspaces." : "Try different search terms." }),
-      canSearchAll && /* @__PURE__ */ jsx(
-        Button,
-        {
-          appearance: "plain",
-          intent: "primary",
-          size: "small",
-          className: styles.ExplorerList.empty.button(),
-          onPress: () => setSearchScope("everything"),
-          children: "Try searching all workspaces"
-        }
-      )
-    ] })
+  const canSearchAll = canSearchEverything && page.scope !== "everything" && (explorer.mode === "search" || page.resultMode === "matches");
+  return /* @__PURE__ */ jsxs(Empty, { className: styles.ExplorerList.empty(), children: [
+    /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+      /* @__PURE__ */ jsx(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon }) }),
+      /* @__PURE__ */ jsx(EmptyTitle, { children: "No results found" }),
+      /* @__PURE__ */ jsx(EmptyDescription, { children: canSearchAll ? "Try different search terms or search all workspaces." : "Try different search terms." })
+    ] }),
+    canSearchAll && /* @__PURE__ */ jsx(EmptyContent, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        color: "primary",
+        size: "sm",
+        className: styles.ExplorerList.empty.button(),
+        onClick: () => setSearchScope("everything"),
+        children: "Try searching all workspaces"
+      }
+    ) })
   ] });
 }
 function SearchIdleState() {
-  return /* @__PURE__ */ jsxs("div", { className: styles.ExplorerList.empty(), children: [
-    /* @__PURE__ */ jsx(Icon, { icon: IcRoundSearch, className: styles.ExplorerList.empty.icon() }),
-    /* @__PURE__ */ jsxs("div", { className: styles.ExplorerList.empty.copy(), children: [
-      /* @__PURE__ */ jsx("div", { className: styles.ExplorerList.empty.title(), children: "Search" }),
-      /* @__PURE__ */ jsx("div", { className: styles.ExplorerList.empty.text(), children: "Type to find a page." })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(Empty, { className: styles.ExplorerList.empty(), children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+    /* @__PURE__ */ jsx(EmptyMedia, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: IcRoundSearch }) }),
+    /* @__PURE__ */ jsx(EmptyTitle, { children: "Search" }),
+    /* @__PURE__ */ jsx(EmptyDescription, { children: "Type to find a page." })
+  ] }) });
+}
+var scrollRestoreFrames = 30;
+var scrollSettleFrames = 3;
+function useScrollRestoration(explorer, page) {
+  const store = useStore();
+  const container = useRef(null);
+  const scrollOffset = explorer.scrollOffset(explorerScrollKey(page));
+  useLayoutEffect(() => {
+    const element = container.current;
+    if (!element) return;
+    const scroller = element.querySelector(
+      '[role="grid"], [role="treegrid"]'
+    );
+    const target = store.get(scrollOffset);
+    let restoring = scroller !== null;
+    let frame = 0;
+    let frames = 0;
+    let settled = 0;
+    function restore() {
+      if (!scroller || !restoring) return;
+      scroller.scrollTop = target;
+      settled = Math.abs(scroller.scrollTop - target) < 1 ? settled + 1 : 0;
+      if (settled >= scrollSettleFrames || ++frames > scrollRestoreFrames) {
+        restoring = false;
+        return;
+      }
+      frame = requestAnimationFrame(restore);
+    }
+    function stopRestoring() {
+      restoring = false;
+      cancelAnimationFrame(frame);
+    }
+    function onScroll(event) {
+      if (restoring) return;
+      const scrolled = event.target;
+      if (!(scrolled instanceof HTMLElement)) return;
+      const role = scrolled.getAttribute("role");
+      if (role !== "grid" && role !== "treegrid") return;
+      store.set(scrollOffset, scrolled.scrollTop);
+    }
+    element.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    element.addEventListener("wheel", stopRestoring, { passive: true });
+    element.addEventListener("touchstart", stopRestoring, { passive: true });
+    element.addEventListener("pointerdown", stopRestoring);
+    element.addEventListener("keydown", stopRestoring);
+    restore();
+    return () => {
+      stopRestoring();
+      element.removeEventListener("scroll", onScroll, { capture: true });
+      element.removeEventListener("wheel", stopRestoring);
+      element.removeEventListener("touchstart", stopRestoring);
+      element.removeEventListener("pointerdown", stopRestoring);
+      element.removeEventListener("keydown", stopRestoring);
+    };
+  }, [scrollOffset, store]);
+  return container;
 }
 function ExplorerList({
   compactTable,
   explorer,
-  onSelectionChange,
+  onPick,
   page
 }) {
   const showResults = explorer.mode !== "search" || Boolean(page.search.trim());
-  const getItems = useSetAtom(explorer.getItems);
-  const getDropOperation = useSetAtom(explorer.getDropOperation);
-  const dropOnItem = useSetAtom(explorer.onItemDrop);
+  const container = useScrollRestoration(explorer, page);
+  const getDragData = useSetAtom(explorer.getDragData);
+  const canDrop = useSetAtom(explorer.canDrop);
+  const moveInto = useSetAtom(explorer.moveInto);
+  const reorder = useSetAtom(explorer.reorder);
   const requestedLocation = useAtomValueRaw(explorer.location);
   const selectedLocale = useAtomValueRaw(explorer.selectedLocale);
   const locationIsPending = explorerPageIsPending(
@@ -105,59 +160,69 @@ function ExplorerList({
     selectedLocale
   );
   const upload = useSetAtom(explorer.upload);
-  const { dragAndDropHooks } = $32ef394310635fd5$export$2cfc5be7a55829f6({
-    acceptedDragTypes: page.isMedia && page.canUpload && !locationIsPending ? "all" : [],
-    getItems,
-    getDropOperation(target, types, allowedOperations) {
-      const operation = getDropOperation(target, types, allowedOperations);
-      if (operation !== "cancel") return operation;
-      if (!page.isMedia || !page.canUpload || locationIsPending || target.type !== "root")
-        return "cancel";
-      return allowedOperations.includes("copy") ? "copy" : "cancel";
-    },
-    onItemDrop(event) {
-      dropOnItem(event, page.locale);
-    },
-    async onRootDrop(event) {
-      if (locationIsPending) return;
-      const files = await Promise.all(
-        event.items.filter($d40e85a29b831dd6$export$a144e1752ebe0aa).map((item) => item.getFile())
-      );
-      if (files.length > 0) await upload(files);
+  const acceptsDrops = page.uploadTypes.length > 0 && page.canUpload && !locationIsPending;
+  const canMove = explorer.hasRowAction && !locationIsPending;
+  const canReorder = canMove && page.sort.manual && page.resultMode === "browse";
+  const dragDrop = {
+    getDragData,
+    canDrop(target, types) {
+      if (target.position === "on")
+        return canMove && canDrop(target, types, page.locale);
+      return canReorder && acceptsDashboardEntryDrag(types);
     },
+    onReorder: canReorder ? (event) => reorder([...event.keys].map(String), event.target, page.locale) : void 0,
+    onMove: canMove ? (event) => moveInto([...event.keys].map(String), event.target) : void 0,
+    onDropItems: canMove ? (event) => {
+      const ids = dashboardEntryDropIds(event.items);
+      if (event.target.position === "on") return moveInto(ids, event.target);
+      return reorder(ids, event.target, page.locale);
+    } : void 0,
+    onDropFiles: acceptsDrops ? async (event) => {
+      if (event.target || locationIsPending) return;
+      await upload(event.files);
+    } : void 0,
     renderDragPreview(items) {
       return /* @__PURE__ */ jsx("div", { className: styles.ExplorerList.drag.preview(), children: /* @__PURE__ */ jsx("span", { className: styles.ExplorerList.drag.preview.label(), children: items.length === 1 ? "1 item" : `${items.length} items` }) });
     }
-  });
+  };
   if (!showResults)
     return /* @__PURE__ */ jsx("div", { className: styles.ExplorerList(), children: /* @__PURE__ */ jsx(SearchIdleState, {}) });
   assert(
     page.root || explorer.rootScope === "workspace",
     "ExplorerList requires a root"
   );
-  return /* @__PURE__ */ jsx("div", { className: styles.ExplorerList(), children: page.view === "card" ? /* @__PURE__ */ jsx(
-    ExplorerCards,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      dragAndDropHooks,
-      explorer,
-      items: page.items,
-      locale: page.locale,
-      page,
-      renderEmptyState: () => /* @__PURE__ */ jsx(EmptyResults, { explorer, page, root: page.root })
-    }
-  ) : /* @__PURE__ */ jsx(
-    ExplorerTable,
-    {
-      compact: compactTable,
-      dragAndDropHooks,
-      explorer,
-      items: page.items,
-      locale: page.locale,
-      onSelectionChange,
-      page,
-      renderEmptyState: () => /* @__PURE__ */ jsx(EmptyResults, { explorer, page, root: page.root })
+      ref: container,
+      className: styles.ExplorerList(),
+      "data-reorderable": canReorder || void 0,
+      children: page.view === "card" ? /* @__PURE__ */ jsx(
+        ExplorerCards,
+        {
+          dragDrop,
+          explorer,
+          items: page.items,
+          locale: page.locale,
+          onPick,
+          page,
+          renderEmptyState: () => /* @__PURE__ */ jsx(EmptyResults, { explorer, page, root: page.root })
+        }
+      ) : /* @__PURE__ */ jsx(
+        ExplorerTable,
+        {
+          compact: compactTable,
+          dragDrop,
+          explorer,
+          items: page.items,
+          locale: page.locale,
+          onPick,
+          page,
+          renderEmptyState: () => /* @__PURE__ */ jsx(EmptyResults, { explorer, page, root: page.root })
+        }
+      )
     }
-  ) });
+  );
 }
 export {
   ExplorerList

package/dist/dashboard/app/ExplorerModal.d.ts

@@ -1,16 +1,13 @@
+import { type PageFooterProps } from 'alinea/components';
 import { type ComponentProps, type PropsWithChildren } from 'react';
-import { RailHeader } from './ui/Rail.js';
 export declare function ExplorerModal(props: ComponentProps<'div'>): import("react").JSX.Element;
 export declare function ExplorerModalLoading(): import("react").JSX.Element;
 export declare function ExplorerModalContent(props: ComponentProps<'div'>): import("react").JSX.Element;
 export declare function ExplorerModalNavigation(props: ComponentProps<'aside'>): import("react").JSX.Element;
 export declare function ExplorerModalSuspense({ children }: PropsWithChildren): import("react").JSX.Element;
-export interface ExplorerModalFooterProps extends ComponentProps<typeof RailHeader> {
+export interface ExplorerModalFooterProps extends PageFooterProps {
 }
 export declare function ExplorerModalFooter(props: ExplorerModalFooterProps): import("react").JSX.Element;
-export interface ExplorerModalSelectionProps extends ComponentProps<'span'> {
-}
-export declare function ExplorerModalSelection(props: ExplorerModalSelectionProps): import("react").JSX.Element;
 export interface ExplorerModalActionsProps extends ComponentProps<'div'> {
 }
 export declare function ExplorerModalActions(props: ExplorerModalActionsProps): import("react").JSX.Element;

package/dist/dashboard/app/ExplorerModal.js

@@ -5,29 +5,27 @@ import {
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/ExplorerModal.tsx
-import { ProgressCircle } from "alinea/components";
+import { PageFooter, Spinner } from "alinea/components";
 import { Suspense } from "react";
 
 // src/dashboard/app/ExplorerModal.module.css
 var ExplorerModal_default = {
-  "ExplorerModal": "alinea-ExplorerModal",
+  "ExplorerModalLoading": "alinea-ExplorerModalLoading",
+  "ExplorerModalContent": "alinea-ExplorerModalContent",
   "ExplorerModalNavigation": "alinea-ExplorerModalNavigation",
+  "ExplorerModal": "alinea-ExplorerModal",
   "ExplorerModalFooter": "alinea-ExplorerModalFooter",
-  "ExplorerModalActions": "alinea-ExplorerModalActions",
-  "ExplorerModalSelection": "alinea-ExplorerModalSelection",
-  "ExplorerModalContent": "alinea-ExplorerModalContent",
-  "ExplorerModalLoading": "alinea-ExplorerModalLoading"
+  "ExplorerModalActions": "alinea-ExplorerModalActions"
 };
 
 // src/dashboard/app/ExplorerModal.tsx
-import { RailHeader } from "./ui/Rail.js";
 import { jsx } from "react/jsx-runtime";
 var styles = dist_default(ExplorerModal_default);
 function ExplorerModal(props) {
   return /* @__PURE__ */ jsx("div", { ...props, className: styles.ExplorerModal(dist_default.merge(props)) });
 }
 function ExplorerModalLoading() {
-  return /* @__PURE__ */ jsx("div", { className: styles.ExplorerModalLoading(), children: /* @__PURE__ */ jsx(ProgressCircle, { isIndeterminate: true, "aria-label": "Loading explorer" }) });
+  return /* @__PURE__ */ jsx("div", { className: styles.ExplorerModalLoading(), children: /* @__PURE__ */ jsx(Spinner, { "aria-label": "Loading explorer" }) });
 }
 function ExplorerModalContent(props) {
   return /* @__PURE__ */ jsx(
@@ -52,22 +50,13 @@ function ExplorerModalSuspense({ children }) {
 }
 function ExplorerModalFooter(props) {
   return /* @__PURE__ */ jsx(
-    RailHeader,
+    PageFooter,
     {
       ...props,
       className: styles.ExplorerModalFooter(dist_default.merge(props))
     }
   );
 }
-function ExplorerModalSelection(props) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ...props,
-      className: styles.ExplorerModalSelection(dist_default.merge(props))
-    }
-  );
-}
 function ExplorerModalActions(props) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -84,6 +73,5 @@ export {
   ExplorerModalFooter,
   ExplorerModalLoading,
   ExplorerModalNavigation,
-  ExplorerModalSelection,
   ExplorerModalSuspense
 };

package/dist/dashboard/app/ExplorerOverviewHeader.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export interface ExplorerOverviewHeaderProps {
+    children: ReactNode;
+}
+/** Places the `overview.header` view between the toolbar and the list */
+export declare function ExplorerOverviewHeader({ children }: ExplorerOverviewHeaderProps): import("react").JSX.Element;

package/dist/dashboard/app/ExplorerOverviewHeader.js

@@ -0,0 +1,28 @@
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/ExplorerOverviewHeader.module.css
+var ExplorerOverviewHeader_default = {
+  "ExplorerOverviewHeader": "alinea-ExplorerOverviewHeader"
+};
+
+// src/dashboard/app/ExplorerOverviewHeader.tsx
+import { jsx } from "react/jsx-runtime";
+var styles = dist_default(ExplorerOverviewHeader_default);
+function ExplorerOverviewHeader({
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles.ExplorerOverviewHeader(),
+      "data-slot": "overview-header",
+      children
+    }
+  );
+}
+export {
+  ExplorerOverviewHeader
+};

package/dist/dashboard/app/ExplorerPickerContent.d.ts

@@ -1,13 +1,29 @@
-import type { DashboardExplorer, ExplorerLocation, ExplorerReadyPage } from '../atoms/explorer.js';
-export declare function createExplorerTree(explorer: () => DashboardExplorer): (root: import("alinea/dashboard/atoms/root").RootAtoms, locale: string | null, location?: ExplorerLocation | undefined) => import("alinea/dashboard/atoms/root").TreeAtoms;
+import { type DashboardEntry, type DashboardExplorer, type ExplorerLocation, type ExplorerOptions, type ExplorerReadyPage, type ExplorerView } from '../atoms/explorer.js';
+export declare function createExplorerTree(explorer: () => DashboardExplorer): (root: import("../atoms/root.js").RootAtoms, locale: string | null, location?: ExplorerLocation | undefined) => import("../atoms/root.js").TreeAtoms;
+/**
+ * The explorer of a picker opened at `location`, it starts over when the
+ * location or condition changes
+ */
+export declare function usePickerExplorer(options: ExplorerOptions, requested: ExplorerLocation, initialView: ExplorerView): {
+    explorer: import("../atoms/explorer.js").ExplorerAtoms;
+    tree: (root: import("../atoms/root.js").RootAtoms, locale: string | null, location?: ExplorerLocation | undefined) => import("../atoms/root.js").TreeAtoms;
+};
+export interface ExplorerPickerFooterProps {
+    explorer: DashboardExplorer;
+    onSubmit: () => void;
+}
+/** Counts the selected entries and confirms or cancels the picker */
+export declare function ExplorerPickerFooter({ explorer, onSubmit }: ExplorerPickerFooterProps): import("react").JSX.Element;
 export interface ExplorerPickerContentProps {
     explorer: DashboardExplorer;
     navigationLabel: string;
+    /** Picks a single entry as soon as it is clicked */
+    onPick?: (entry: DashboardEntry) => void;
     options: {
         pickChildren?: boolean;
     };
     page: ExplorerReadyPage;
     tree: ReturnType<typeof createExplorerTree>;
 }
-export declare function ExplorerPickerContent({ explorer, navigationLabel, options, page, tree }: ExplorerPickerContentProps): import("react").JSX.Element;
+export declare function ExplorerPickerContent({ explorer, navigationLabel, onPick, options, page, tree }: ExplorerPickerContentProps): import("react").JSX.Element;
 export declare function normalizePickerLocale(locale: string | null | undefined, locales: ReadonlyArray<string>): string;

package/dist/dashboard/app/ExplorerPickerContent.js

@@ -1,4 +1,5 @@
 import {
+  useAtomValueRaw,
   useSetAtom
 } from "../../chunks/chunk-D6UJHBJJ.js";
 import {
@@ -7,11 +8,29 @@ import {
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/ExplorerPickerContent.tsx
-import { rootAtoms } from "alinea/dashboard/atoms/root";
+import {
+  Button,
+  Text,
+  useDialog
+} from "alinea/components";
 import { startTransition, useMemo } from "react";
+import {
+  constrainLocation,
+  createExplorerAtoms,
+  explorerLocations
+} from "../atoms/explorer.js";
+import { configAtom } from "../atoms/core.js";
+import { rootAtoms } from "../atoms/root.js";
+import { policyAtom } from "../atoms/user.js";
 import { dispense } from "../atoms/utils.js";
+import { useDashboardContext } from "../hooks.js";
 import { ExplorerBody } from "./Explorer.js";
-import { ExplorerModalContent, ExplorerModalNavigation } from "./ExplorerModal.js";
+import {
+  ExplorerModalActions,
+  ExplorerModalContent,
+  ExplorerModalFooter,
+  ExplorerModalNavigation
+} from "./ExplorerModal.js";
 import { SidebarTreeExplorer } from "./SidebarTree.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function createExplorerTree(explorer) {
@@ -24,14 +43,75 @@ function createExplorerTree(explorer) {
           const parentId = location ? location.parentId : get(current.location).parentId;
           return parentId ? /* @__PURE__ */ new Set([parentId]) : /* @__PURE__ */ new Set();
         }),
-        current.sidebarExpandedKeys
+        {
+          expandedKeys: current.sidebarExpandedKeys,
+          closedKeys: current.sidebarClosedKeys
+        },
+        current.permission
       );
     }
   );
 }
+function usePickerExplorer(options, requested, initialView) {
+  const { page, root } = useDashboardContext();
+  const config = useAtomValueRaw(configAtom);
+  const policy = useAtomValueRaw(policyAtom);
+  const location = constrainLocation(
+    requested,
+    explorerLocations(config, policy, options)
+  );
+  const pickerRoot = rootAtoms(location.workspace, location.root ?? root.key);
+  const pickerI18n = useAtomValueRaw(pickerRoot.i18n);
+  const initialLocale = normalizePickerLocale(
+    location.locale ?? options.selectedLocale ?? page.locale,
+    pickerI18n?.locales ?? []
+  );
+  const initialLocation = { ...location, locale: initialLocale ?? void 0 };
+  const explorerIdentity = JSON.stringify([
+    initialLocation,
+    options.condition ?? null
+  ]);
+  return useMemo(() => {
+    let explorer;
+    const tree = createExplorerTree(() => explorer);
+    const currentRoot = (location2) => rootAtoms(location2.workspace, location2.root ?? root.key);
+    const rootData = atom((get) => get(currentRoot(get(explorer.location)).data));
+    explorer = createExplorerAtoms(initialLocation, {
+      ...options,
+      // Limited pickers search all of their locations, if more than one
+      allowAllWorkspaces: options.allowAllWorkspaces ?? (!options.pickChildren && (options.limitLocations?.length ?? 2) > 1),
+      initialView: options.initialView ?? initialView,
+      rootData,
+      selectedLocale: initialLocale,
+      treeReady: (locale, location2) => tree(currentRoot(location2), locale, location2).ready
+    });
+    return { explorer, tree };
+  }, [explorerIdentity]);
+}
+function ExplorerPickerFooter({
+  explorer,
+  onSubmit
+}) {
+  const modal = useDialog();
+  const selection = useAtomValueRaw(explorer.selection);
+  const selectedItems = selection === "all" ? 0 : selection.size;
+  return /* @__PURE__ */ jsxs(ExplorerModalFooter, { children: [
+    /* @__PURE__ */ jsxs(Text, { color: "muted", children: [
+      selectedItems,
+      " ",
+      selectedItems === 1 ? "item" : "items",
+      " selected"
+    ] }),
+    /* @__PURE__ */ jsxs(ExplorerModalActions, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: modal.close, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: onSubmit, children: "Select" })
+    ] })
+  ] });
+}
 function ExplorerPickerContent({
   explorer,
   navigationLabel,
+  onPick,
   options,
   page,
   tree
@@ -69,7 +149,7 @@ function ExplorerPickerContent({
         onSelectionChange
       }
     ),
-    /* @__PURE__ */ jsx(ExplorerBody, { explorer, page })
+    /* @__PURE__ */ jsx(ExplorerBody, { explorer, onPick, page })
   ] });
 }
 function normalizePickerLocale(locale, locales) {
@@ -109,6 +189,8 @@ function ExplorerPickerNavigation({
 }
 export {
   ExplorerPickerContent,
+  ExplorerPickerFooter,
   createExplorerTree,
-  normalizePickerLocale
+  normalizePickerLocale,
+  usePickerExplorer
 };

package/dist/dashboard/app/ExplorerScope.d.ts

@@ -0,0 +1,7 @@
+import type { DashboardExplorer, ExplorerReadyPage } from '../atoms/explorer.js';
+export interface ExplorerScopeProps {
+    explorer: DashboardExplorer;
+    page: ExplorerReadyPage;
+}
+/** Picks the workspace and root the explorer lists, or all of them */
+export declare function ExplorerScope({ explorer, page }: ExplorerScopeProps): import("react").JSX.Element | null;