alinea 1.7.0 → 2.0.0-preview.1

package/dist/dashboard/app/Explorer.js

@@ -0,0 +1,812 @@
+import {
+  useAtom,
+  useAtomValue,
+  useSetAtom
+} from "../../chunks/chunk-U4VOHNR2.js";
+import "../../chunks/chunk-Y7XOMJOC.js";
+import {
+  $b325d7bd7e74496a$export$6fb4a10d2c950550,
+  $f2ff30fde7b014be$export$2e1e1122cf0cba88
+} from "../../chunks/chunk-I7X64JTZ.js";
+import "../../chunks/chunk-IWN3T3FL.js";
+import "../../chunks/chunk-RKDPDEF7.js";
+import "../../chunks/chunk-JFROOUG6.js";
+import "../../chunks/chunk-SJBZFMQ2.js";
+import "../../chunks/chunk-IYAQC63Y.js";
+import "../../chunks/chunk-LUBOGJCG.js";
+import "../../chunks/chunk-YK3OSMDM.js";
+import "../../chunks/chunk-AC4U3IMS.js";
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/Explorer.tsx
+import {
+  Button,
+  Menu,
+  MenuItem,
+  Popover,
+  SearchField,
+  Switch,
+  ToggleButton,
+  ToggleButtonGroup
+} from "alinea/components";
+import { getRoot, getWorkspace } from "alinea/core/Internal";
+import { MediaFile, MediaLibrary } from "alinea/core/media/MediaTypes";
+import { slugify } from "alinea/core/util/Slugs";
+import { ViewToggle } from "alinea/dashboard/app/ViewToggle";
+import { rootAtoms } from "alinea/dashboard/atoms/root";
+import { policyAtom } from "alinea/dashboard/atoms/user";
+import {
+  useEffect,
+  useMemo,
+  useState,
+  useTransition
+} from "react";
+import { configAtom } from "../atoms/core.js";
+import {
+  explorerPageIsPending
+} from "../atoms/explorer.js";
+import {
+  IcRoundAccountTree,
+  IcRoundArrowDownward,
+  IcRoundArrowUpward,
+  IcRoundClose,
+  IcRoundFilterList,
+  IcRoundUploadFile
+} from "../icons.js";
+import { EditorBackButton } from "./EditorBackButton.js";
+
+// src/dashboard/app/Explorer.module.css
+var Explorer_default = {
+  "Popover-Label": "alinea-Popover-Label",
+  "PopoverLabel": "alinea-Popover-Label",
+  "Popover": "alinea-Popover",
+  "ExplorerHeader-content": "alinea-ExplorerHeader-content",
+  "ExplorerHeaderContent": "alinea-ExplorerHeader-content",
+  "Explorer-locationBreadcrumbs-localeValue": "alinea-Explorer-locationBreadcrumbs-localeValue",
+  "ExplorerLocationBreadcrumbsLocaleValue": "alinea-Explorer-locationBreadcrumbs-localeValue",
+  "Explorer-actions": "alinea-Explorer-actions",
+  "ExplorerActions": "alinea-Explorer-actions",
+  "Explorer-searchSlot": "alinea-Explorer-searchSlot",
+  "ExplorerSearchSlot": "alinea-Explorer-searchSlot",
+  "Sorting-button": "alinea-Sorting-button",
+  "SortingButton": "alinea-Sorting-button",
+  "Explorer": "alinea-Explorer",
+  "Explorer-searchScope": "alinea-Explorer-searchScope",
+  "ExplorerSearchScope": "alinea-Explorer-searchScope",
+  "Explorer-locationBreadcrumbs-value": "alinea-Explorer-locationBreadcrumbs-value",
+  "ExplorerLocationBreadcrumbsValue": "alinea-Explorer-locationBreadcrumbs-value",
+  "ExplorerHeader-primary": "alinea-ExplorerHeader-primary",
+  "ExplorerHeaderPrimary": "alinea-ExplorerHeader-primary",
+  "ExplorerHeader-title": "alinea-ExplorerHeader-title",
+  "ExplorerHeaderTitle": "alinea-ExplorerHeader-title",
+  "Explorer-toolbar": "alinea-Explorer-toolbar",
+  "ExplorerToolbar": "alinea-Explorer-toolbar",
+  "Explorer-locationBreadcrumbs": "alinea-Explorer-locationBreadcrumbs",
+  "ExplorerLocationBreadcrumbs": "alinea-Explorer-locationBreadcrumbs",
+  "ExplorerHeader-main": "alinea-ExplorerHeader-main",
+  "ExplorerHeaderMain": "alinea-ExplorerHeader-main",
+  "ExplorerHeader-location": "alinea-ExplorerHeader-location",
+  "ExplorerHeaderLocation": "alinea-ExplorerHeader-location",
+  "Explorer-search": "alinea-Explorer-search",
+  "ExplorerSearch": "alinea-Explorer-search",
+  "Explorer-toolbar-mediaActions": "alinea-Explorer-toolbar-mediaActions",
+  "ExplorerToolbarMediaActions": "alinea-Explorer-toolbar-mediaActions",
+  "Explorer-locationBreadcrumbs-current": "alinea-Explorer-locationBreadcrumbs-current",
+  "ExplorerLocationBreadcrumbsCurrent": "alinea-Explorer-locationBreadcrumbs-current",
+  "Explorer-locationBreadcrumbs-parentAction": "alinea-Explorer-locationBreadcrumbs-parentAction",
+  "ExplorerLocationBreadcrumbsParentAction": "alinea-Explorer-locationBreadcrumbs-parentAction",
+  "Explorer-locationBreadcrumbs-parentValue": "alinea-Explorer-locationBreadcrumbs-parentValue",
+  "ExplorerLocationBreadcrumbsParentValue": "alinea-Explorer-locationBreadcrumbs-parentValue",
+  "ExplorerHeader": "alinea-ExplorerHeader",
+  "Explorer-locationBreadcrumbs-root-locale": "alinea-Explorer-locationBreadcrumbs-root-locale",
+  "ExplorerLocationBreadcrumbsRootLocale": "alinea-Explorer-locationBreadcrumbs-root-locale",
+  "is-navigation": "alinea-is-navigation",
+  "isNavigation": "alinea-is-navigation",
+  "Explorer-viewport": "alinea-Explorer-viewport",
+  "ExplorerViewport": "alinea-Explorer-viewport",
+  "Explorer-toolbar-tools": "alinea-Explorer-toolbar-tools",
+  "ExplorerToolbarTools": "alinea-Explorer-toolbar-tools",
+  "Explorer-locationBreadcrumbs-item": "alinea-Explorer-locationBreadcrumbs-item",
+  "ExplorerLocationBreadcrumbsItem": "alinea-Explorer-locationBreadcrumbs-item",
+  "Explorer-locationBreadcrumbs-root": "alinea-Explorer-locationBreadcrumbs-root",
+  "ExplorerLocationBreadcrumbsRoot": "alinea-Explorer-locationBreadcrumbs-root",
+  "Explorer-breadcrumbs": "alinea-Explorer-breadcrumbs",
+  "ExplorerBreadcrumbs": "alinea-Explorer-breadcrumbs",
+  "Explorer-locationBreadcrumbs-separator": "alinea-Explorer-locationBreadcrumbs-separator",
+  "ExplorerLocationBreadcrumbsSeparator": "alinea-Explorer-locationBreadcrumbs-separator",
+  "Explorer-resultMode": "alinea-Explorer-resultMode",
+  "ExplorerResultMode": "alinea-Explorer-resultMode"
+};
+
+// src/dashboard/app/Explorer.tsx
+import { ExplorerList } from "./ExplorerList.js";
+import { LocaleMenu } from "./LocaleMenu.js";
+import { ActivityStatus } from "./ActivityStatus.js";
+import { RailBody, RailHeader } from "./ui/Rail.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(Explorer_default);
+function ExplorerSearch({
+  autoFocus,
+  explorer,
+  onEntryAction,
+  page
+}) {
+  const items = page.items;
+  const [selection, setSelection] = useAtom(explorer.selection);
+  const search = useAtomValue(explorer.search);
+  const setSearch = useSetAtom(explorer.search);
+  const performAction = useSetAtom(explorer.onAction);
+  const [inputValue, setInputValue] = useState(search);
+  const [isPending, startTransition] = useTransition();
+  function selectEntry(entry) {
+    if (!entry) return;
+    setSelection(/* @__PURE__ */ new Set([entry.id]));
+  }
+  const selectedEntry = useMemo(() => {
+    if (selection === "all") return void 0;
+    const [selected] = selection;
+    if (selected === void 0) return void 0;
+    return items.find((item) => item.id === String(selected));
+  }, [items, selection]);
+  useEffect(() => {
+    if (!explorer.autoSelectFirstItem || !explorer.hasSelection) return;
+    if (items.length === 0) {
+      if (selection !== "all" && selection.size > 0)
+        setSelection(/* @__PURE__ */ new Set());
+      return;
+    }
+    if (!selectedEntry) setSelection(/* @__PURE__ */ new Set([items[0].id]));
+  }, [
+    explorer.autoSelectFirstItem,
+    explorer.hasSelection,
+    items,
+    selectedEntry,
+    selection,
+    setSelection
+  ]);
+  function onSearchChange(value) {
+    setInputValue(value);
+    startTransition(() => {
+      setSearch(value);
+    });
+  }
+  function selectedIndex() {
+    if (!selectedEntry) return -1;
+    return items.findIndex((item) => item.id === selectedEntry.id);
+  }
+  function moveSelection(direction) {
+    if (!explorer.hasSelection || items.length === 0) return;
+    const current = selectedIndex();
+    const next = current === -1 ? direction === 1 ? 0 : items.length - 1 : Math.max(0, Math.min(items.length - 1, current + direction));
+    selectEntry(items[next]);
+  }
+  function onSearchKeyDown(event) {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveSelection(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveSelection(-1);
+    } else if (event.key === "Enter") {
+      const entry = selectedEntry ?? (explorer.autoSelectFirstItem ? items[0] : void 0);
+      if (!entry) return;
+      event.preventDefault();
+      if (onEntryAction) onEntryAction(entry);
+      else performAction(entry, page.locale);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    SearchField,
+    {
+      "aria-label": "Search",
+      autoFocus,
+      className: styles.Explorer.search(),
+      hasIcon: true,
+      isPending,
+      placeholder: "Search...",
+      value: inputValue,
+      onChange: onSearchChange,
+      onKeyDown: onSearchKeyDown
+    }
+  );
+}
+function ExplorerSearchScope({ explorer, page }) {
+  const searchScope = page.searchScope;
+  const setSearchScope = useSetAtom(explorer.searchScope);
+  const resultMode = page.resultMode;
+  const canSearchEverything = useAtomValue(explorer.canSearchEverything);
+  const [, startTransition] = useTransition();
+  if (!explorer.allowAllWorkspaces) return null;
+  const isDisabled = !canSearchEverything || explorer.mode !== "search" && resultMode !== "matches";
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      className: styles.Explorer.searchScope(),
+      isDisabled,
+      isSelected: searchScope === "everything",
+      onChange: (selected) => startTransition(
+        () => setSearchScope(selected ? "everything" : "workspace")
+      ),
+      children: "All locations"
+    }
+  );
+}
+function ExplorerResultMode({ explorer, page }) {
+  const resultMode = page.resultMode;
+  const setResultMode = useSetAtom(explorer.resultMode);
+  const search = useAtomValue(explorer.search);
+  const [, startTransition] = useTransition();
+  const canShowFiltered = explorer.pickChildren || explorer.hasCondition || Boolean(search.trim());
+  const canBrowse = !explorer.pickChildren && !search.trim();
+  return /* @__PURE__ */ jsxs(
+    ToggleButtonGroup,
+    {
+      "aria-label": "Explorer results",
+      className: styles.Explorer.resultMode(),
+      disallowEmptySelection: true,
+      selectedKeys: [resultMode],
+      selectionMode: "single",
+      variant: "compact",
+      onSelectionChange: (keys) => {
+        const next = keys.has("matches") ? "matches" : "browse";
+        if (!canBrowse && next === "browse") return;
+        startTransition(() => {
+          setResultMode(next);
+        });
+      },
+      children: [
+        /* @__PURE__ */ jsxs(ToggleButton, { id: "browse", isDisabled: !canBrowse, children: [
+          /* @__PURE__ */ jsx(IcRoundAccountTree, { "aria-hidden": true, "data-slot": "icon" }),
+          "Browse"
+        ] }),
+        /* @__PURE__ */ jsxs(ToggleButton, { id: "matches", isDisabled: !canShowFiltered, children: [
+          /* @__PURE__ */ jsx(IcRoundFilterList, { "aria-hidden": true, "data-slot": "icon" }),
+          "Filtered"
+        ] })
+      ]
+    }
+  );
+}
+function ExplorerHeaderLoadedParentMain({
+  data,
+  explorer,
+  titleControls
+}) {
+  const label = useAtomValue(data.label);
+  const parents = useAtomValue(data.parents);
+  const setLocation = useSetAtom(explorer.location);
+  const parent = parents.at(-1);
+  return /* @__PURE__ */ jsxs("div", { className: styles.ExplorerHeader.main(), children: [
+    /* @__PURE__ */ jsx(
+      EditorBackButton,
+      {
+        label: parent ? "Back to parent entry" : "Back to root",
+        onPress: () => {
+          setLocation((location) => ({
+            ...location,
+            parentId: parent?.id
+          }));
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("h1", { className: styles.ExplorerHeader.title(), children: label }),
+    titleControls
+  ] });
+}
+function ExplorerHeaderMain({
+  explorer,
+  headerEntry,
+  page,
+  titleControls
+}) {
+  const parent = useAtomValue(explorer.parent(page.location, page.locale));
+  if (headerEntry) {
+    return /* @__PURE__ */ jsxs("div", { className: styles.ExplorerHeader.main(), children: [
+      /* @__PURE__ */ jsx(
+        EditorBackButton,
+        {
+          label: headerEntry.backLabel,
+          onPress: headerEntry.onBack
+        }
+      ),
+      /* @__PURE__ */ jsx("h1", { className: styles.ExplorerHeader.title(), children: headerEntry.title }),
+      titleControls
+    ] });
+  }
+  if (parent) {
+    return /* @__PURE__ */ jsx(
+      ExplorerHeaderParentMain,
+      {
+        parent,
+        explorer,
+        titleControls
+      }
+    );
+  }
+  if (titleControls) {
+    return /* @__PURE__ */ jsx("div", { className: styles.ExplorerHeader.main(), children: titleControls });
+  }
+  return null;
+}
+function ExplorerLocationParents({
+  explorer,
+  lockNavigation,
+  parent
+}) {
+  const { data } = useAtomValue(parent.data);
+  if (!data) return null;
+  return /* @__PURE__ */ jsx(
+    ExplorerLoadedLocationParents,
+    {
+      data,
+      explorer,
+      lockNavigation,
+      parent
+    }
+  );
+}
+function ExplorerLoadedLocationParents({
+  data,
+  explorer,
+  lockNavigation,
+  parent
+}) {
+  const parents = useAtomValue(data.parents);
+  return [...parents, parent].map((entry, index, entries) => /* @__PURE__ */ jsx(
+    ExplorerLocationParent,
+    {
+      current: index === entries.length - 1,
+      entry,
+      explorer,
+      lockNavigation
+    },
+    entry.id
+  ));
+}
+function ExplorerLocationParent({
+  current,
+  entry,
+  explorer,
+  lockNavigation
+}) {
+  const { data } = useAtomValue(entry.data);
+  if (!data) return null;
+  return /* @__PURE__ */ jsx(
+    ExplorerLoadedLocationParent,
+    {
+      current,
+      data,
+      entry,
+      explorer,
+      lockNavigation
+    }
+  );
+}
+function ExplorerLoadedLocationParent({
+  current,
+  data,
+  entry,
+  explorer,
+  lockNavigation
+}) {
+  const label = useAtomValue(data.label);
+  const setLocation = useSetAtom(explorer.location);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: styles.Explorer.locationBreadcrumbs.separator(),
+        children: "\u203A"
+      }
+    ),
+    current || lockNavigation ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: current ? styles.Explorer.locationBreadcrumbs.current() : styles.Explorer.locationBreadcrumbs.parentValue(),
+        children: label
+      }
+    ) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        appearance: "plain",
+        className: styles.Explorer.locationBreadcrumbs.parentAction(),
+        onPress: () => setLocation((location) => ({ ...location, parentId: entry.id })),
+        children: label
+      }
+    )
+  ] });
+}
+function ExplorerLocationMenu({
+  explorer,
+  lockNavigation = false,
+  page
+}) {
+  const config = useAtomValue(configAtom);
+  const location = page.location;
+  const policy = useAtomValue(policyAtom);
+  const selectedLocale = page.locale;
+  const setSelectedLocale = useSetAtom(explorer.selectedLocale);
+  const setLocation = useSetAtom(explorer.location);
+  const parent = useAtomValue(explorer.parent(location, selectedLocale));
+  const configuredLocations = explorer.limitLocations?.length ? explorer.limitLocations : Object.entries(config.workspaces).flatMap(
+    ([workspace, value]) => Object.keys(getWorkspace(value).roots).map((root) => ({ workspace, root }))
+  );
+  const visibleLocations = configuredLocations.filter(
+    (location2) => policy.canRead(location2)
+  );
+  const locations = visibleLocations.map((candidate) => {
+    const workspace = config.workspaces[candidate.workspace];
+    const workspaceLabel = workspace ? getWorkspace(workspace).label : candidate.workspace;
+    const root = workspace ? getWorkspace(workspace).roots[candidate.root] : void 0;
+    const rootData = root ? getRoot(root) : void 0;
+    const rootLabel = rootData?.label ?? candidate.root;
+    const locales2 = rootData?.i18n?.locales ?? [];
+    return {
+      ...candidate,
+      locales: locales2,
+      rootLabel,
+      workspaceLabel
+    };
+  });
+  const selected = locations.find(
+    (candidate) => candidate.workspace === location.workspace && candidate.root === location.root
+  );
+  const workspaces = Array.from(
+    new Map(
+      locations.map((candidate) => [
+        candidate.workspace,
+        {
+          key: candidate.workspace,
+          label: candidate.workspaceLabel
+        }
+      ])
+    ).values()
+  );
+  const roots = locations.filter(
+    (candidate) => candidate.workspace === location.workspace
+  );
+  const locales = selected?.locales ?? [];
+  const localeRoot = selected ? rootAtoms(selected.workspace, selected.root) : void 0;
+  function selectLocation(candidate) {
+    const locale = candidate.locales.includes(selectedLocale ?? "") ? selectedLocale : candidate.locales[0] ?? null;
+    setSelectedLocale(locale);
+    setLocation({
+      workspace: candidate.workspace,
+      root: candidate.root,
+      locale: locale ?? void 0
+    });
+  }
+  function selectLocale(locale) {
+    setSelectedLocale(locale);
+    setLocation((current) => ({ ...current, locale }));
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles.Explorer.locationBreadcrumbs(), children: [
+    /* @__PURE__ */ jsx("div", { className: styles.Explorer.locationBreadcrumbs.item(), children: workspaces.length > 1 && !lockNavigation ? /* @__PURE__ */ jsx(
+      Menu,
+      {
+        appearance: "plain",
+        label: selected?.workspaceLabel ?? location.workspace,
+        selectionMode: "single",
+        selectedKeys: [location.workspace],
+        onAction: (key) => {
+          const workspace = String(key);
+          const next = locations.find(
+            (candidate) => candidate.workspace === workspace && candidate.root === location.root
+          ) ?? locations.find((candidate) => candidate.workspace === workspace);
+          if (!next) return;
+          selectLocation(next);
+        },
+        children: workspaces.map((workspace) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            id: workspace.key,
+            textValue: workspace.label,
+            children: workspace.label
+          },
+          workspace.key
+        ))
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: styles.Explorer.locationBreadcrumbs.value(), children: selected?.workspaceLabel }) }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: styles.Explorer.locationBreadcrumbs.separator(),
+        children: "\u203A"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.Explorer.locationBreadcrumbs.root(), children: [
+      /* @__PURE__ */ jsx("div", { className: styles.Explorer.locationBreadcrumbs.item(), children: roots.length > 1 && !lockNavigation ? /* @__PURE__ */ jsx(
+        Menu,
+        {
+          appearance: "plain",
+          label: selected?.rootLabel ?? location.root ?? "Select root",
+          selectionMode: "single",
+          selectedKeys: location.root ? [location.root] : [],
+          onAction: (key) => {
+            const root = String(key);
+            const next = roots.find((candidate) => candidate.root === root);
+            if (next) selectLocation(next);
+          },
+          children: roots.map((root) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              id: root.root,
+              textValue: root.rootLabel,
+              children: root.rootLabel
+            },
+            root.root
+          ))
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: styles.Explorer.locationBreadcrumbs.value(), children: selected?.rootLabel ?? location.root ?? "Select root" }) }),
+      localeRoot && locales.length > 1 && /* @__PURE__ */ jsx("div", { className: styles.Explorer.locationBreadcrumbs.root.locale(), children: lockNavigation ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: styles.Explorer.locationBreadcrumbs.localeValue(),
+          children: (selectedLocale ?? locales[0])?.toUpperCase()
+        }
+      ) : /* @__PURE__ */ jsx(
+        LocaleMenu,
+        {
+          root: localeRoot,
+          locale: selectedLocale,
+          onLocaleChange: selectLocale
+        }
+      ) })
+    ] }),
+    parent && /* @__PURE__ */ jsx(
+      ExplorerLocationParents,
+      {
+        explorer,
+        lockNavigation,
+        parent
+      }
+    )
+  ] });
+}
+function ExplorerHeaderParentMain({
+  explorer,
+  parent,
+  titleControls
+}) {
+  const { data } = useAtomValue(parent.data);
+  if (!data) return null;
+  return /* @__PURE__ */ jsx(
+    ExplorerHeaderLoadedParentMain,
+    {
+      data,
+      explorer,
+      titleControls
+    }
+  );
+}
+var filters = [
+  { type: MediaFile, label: "File" },
+  { type: MediaLibrary, label: "Folder" }
+];
+var sortingOptions = [
+  { id: "index", label: "Index" },
+  { id: "title", label: "Title" },
+  { id: "id", label: "Creation date" },
+  { id: "size", label: "Size" }
+];
+function ExplorerControlsButton({
+  isMedia,
+  sort,
+  selectedFilter,
+  setSort,
+  toggleFilter
+}) {
+  return /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$2e1e1122cf0cba88, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-label": "Filter and sort",
+        appearance: selectedFilter ? "active" : "outline",
+        icon: IcRoundFilterList,
+        size: "icon-nav"
+      }
+    ),
+    /* @__PURE__ */ jsx(Popover, { placement: "bottom left", children: /* @__PURE__ */ jsx(
+      ExplorerControlsPopover,
+      {
+        isMedia,
+        sort,
+        selectedFilter,
+        setSort,
+        toggleFilter
+      }
+    ) })
+  ] });
+}
+function ExplorerControlsPopover({
+  isMedia,
+  sort,
+  selectedFilter,
+  setSort,
+  toggleFilter
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isMedia && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { className: styles.Popover.Label(), children: "Filter by" }),
+      filters.map((filter) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          appearance: selectedFilter === filter.type ? "active" : "plain",
+          onPress: () => toggleFilter(filter.type),
+          className: styles.Sorting.button(),
+          children: [
+            filter.label,
+            selectedFilter === filter.type && /* @__PURE__ */ jsx(IcRoundClose, {})
+          ]
+        },
+        slugify(filter.label)
+      ))
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: styles.Popover.Label(), children: "Sort by" }),
+    sortingOptions.map(
+      (option) => !isMedia && option.id === "size" ? null : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          appearance: sort.sortBy === option.id ? "solid" : "plain",
+          onPress: () => setSort(option.id),
+          className: styles.Sorting.button(),
+          children: [
+            option.label,
+            sort.sortBy === option.id && (sort.direction === "asc" ? /* @__PURE__ */ jsx(IcRoundArrowUpward, {}) : /* @__PURE__ */ jsx(IcRoundArrowDownward, {}))
+          ]
+        },
+        option.id
+      )
+    )
+  ] });
+}
+function ExplorerToolbar({ explorer, page }) {
+  const [, setView] = useAtom(explorer.view);
+  const [sort, setSort] = useAtom(explorer.sort);
+  const [selectedFilter, toggleFilter] = useAtom(explorer.filter);
+  const requestedLocation = useAtomValue(explorer.location);
+  const selectedLocale = useAtomValue(explorer.selectedLocale);
+  const locationIsPending = explorerPageIsPending(
+    page,
+    requestedLocation,
+    selectedLocale
+  );
+  const canUpload = useAtomValue(explorer.canUpload);
+  const uploads = useAtomValue(explorer.uploadsInCurrentFolder);
+  const upload = useSetAtom(explorer.upload);
+  const uploadCount = uploads.length;
+  const uploadLabel = uploadCount === 1 ? "1 file uploading" : `${uploadCount} files uploading`;
+  return /* @__PURE__ */ jsxs("div", { className: styles.Explorer.toolbar.tools(), children: [
+    page.isMedia && uploadCount > 0 && /* @__PURE__ */ jsx(ActivityStatus, { ariaLabel: uploadLabel, placement: "bottom", children: uploadCount }),
+    /* @__PURE__ */ jsx(
+      ExplorerControlsButton,
+      {
+        isMedia: page.isMedia,
+        sort,
+        selectedFilter,
+        setSort,
+        toggleFilter
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.Explorer.toolbar.mediaActions(), children: [
+      /* @__PURE__ */ jsx(ViewToggle, { view: page.view, setView }),
+      page.isMedia && canUpload && !locationIsPending && /* @__PURE__ */ jsx(
+        $b325d7bd7e74496a$export$6fb4a10d2c950550,
+        {
+          allowsMultiple: true,
+          onSelect: (files) => {
+            if (files) upload(files);
+          },
+          children: /* @__PURE__ */ jsx(Button, { icon: IcRoundUploadFile, intent: "primary", children: "Upload media" })
+        }
+      )
+    ] })
+  ] });
+}
+function ExplorerHeader({
+  autoFocusSearch,
+  controls,
+  explorer,
+  headerEntry,
+  navigate,
+  page,
+  titleControls
+}) {
+  return /* @__PURE__ */ jsx(RailHeader, { className: styles.ExplorerHeader({ navigation: navigate }), children: /* @__PURE__ */ jsxs("div", { className: styles.ExplorerHeader.content(), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.ExplorerHeader.primary(), children: [
+      !navigate && /* @__PURE__ */ jsx(
+        ExplorerHeaderMain,
+        {
+          explorer,
+          headerEntry,
+          page,
+          titleControls
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: styles.Explorer.searchSlot(), children: [
+        /* @__PURE__ */ jsx(
+          ExplorerSearch,
+          {
+            autoFocus: autoFocusSearch,
+            explorer,
+            page
+          }
+        ),
+        /* @__PURE__ */ jsx(ExplorerSearchScope, { explorer, page })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.Explorer.toolbar(), children: [
+        /* @__PURE__ */ jsx(ExplorerToolbar, { explorer, page }),
+        controls
+      ] })
+    ] }),
+    navigate && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": "Explorer location",
+        className: styles.ExplorerHeader.location(),
+        role: "group",
+        children: [
+          /* @__PURE__ */ jsx(ExplorerResultMode, { explorer, page }),
+          !page.searchesEverything && /* @__PURE__ */ jsx(
+            ExplorerLocationMenu,
+            {
+              explorer,
+              lockNavigation: explorer.pickChildren,
+              page
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+function ExplorerBody({
+  compactTable,
+  explorer,
+  onSelectionChange,
+  page
+}) {
+  return /* @__PURE__ */ jsx(RailBody, { children: /* @__PURE__ */ jsx("div", { className: styles.Explorer.viewport(), children: /* @__PURE__ */ jsx(
+    ExplorerList,
+    {
+      compactTable,
+      explorer,
+      onSelectionChange,
+      page
+    }
+  ) }) });
+}
+function Explorer({
+  controls,
+  explorer,
+  headerEntry,
+  page: loadedPage,
+  titleControls
+}) {
+  const resolvedPage = useAtomValue(explorer.page);
+  const page = resolvedPage ?? loadedPage;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ExplorerHeader,
+      {
+        controls,
+        explorer,
+        headerEntry,
+        page,
+        titleControls
+      }
+    ),
+    /* @__PURE__ */ jsx(ExplorerBody, { explorer, page })
+  ] });
+}
+export {
+  Explorer,
+  ExplorerBody,
+  ExplorerHeader,
+  ExplorerSearch
+};