alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/dashboard/app/ExplorerTable.js

@@ -1,162 +1,68 @@
 import {
   useAtom,
   useAtomValueRaw,
+  useAtomValueRawSync,
   useSetAtom
 } from "../../chunks/chunk-D6UJHBJJ.js";
 import "../../chunks/chunk-CFNRVI3Y.js";
-import {
-  $143fb904d86051ce$export$89be5a243e59c4b2,
-  $7705c033048f6da7$export$353f5b6fc5456de1,
-  $89d060d8eb451127$export$4b687e3f663d618c,
-  $89d060d8eb451127$export$53d36ab85dc89436,
-  $89d060d8eb451127$export$7fbedc92909ed28e
-} from "../../chunks/chunk-OFEKTDRF.js";
-import {
-  $942f06a693c162e2$export$cacbb3924155d68e
-} from "../../chunks/chunk-NIVGVRDS.js";
-import "../../chunks/chunk-IYAQC63Y.js";
-import "../../chunks/chunk-DNJX6CRV.js";
-import "../../chunks/chunk-AC4U3IMS.js";
-import {
-  $42ceafc619f9c3ba$export$fb8073518f34e6ec
-} from "../../chunks/chunk-D6RGFNUW.js";
-import "../../chunks/chunk-RKDPDEF7.js";
-import "../../chunks/chunk-SJBZFMQ2.js";
-import "../../chunks/chunk-S4AU6SRS.js";
 import {
   dist_default
 } from "../../chunks/chunk-I4OYYAX5.js";
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/ExplorerTable.tsx
-import { Checkbox, FoldIcon, Icon, Surface } from "alinea/components";
+import {
+  Table,
+  TableCell,
+  TableRow,
+  TableTitle
+} from "alinea/components";
 import { startTransition, useMemo } from "react";
-import { dashboardEntryOverviewColumnCount } from "../atoms/explorer.js";
+import { configAtom } from "../atoms/core.js";
+import { titleColumn as overviewTitle } from "../atoms/overview.js";
 import { LucideFile, LucideFolder } from "../icons.js";
-import { CompactField, compactFieldText } from "./CompactField.js";
+import { EntryStatusIcon, entryStatus } from "./EntryStatusIcon.js";
+import { fileKindVisual } from "./FileKind.js";
 
 // src/dashboard/app/ExplorerTable.module.css
 var ExplorerTable_default = {
-  "ExplorerTable-surface": "alinea-ExplorerTable-surface",
-  "ExplorerTableSurface": "alinea-ExplorerTable-surface",
-  "is-compact": "alinea-is-compact",
-  "isCompact": "alinea-is-compact",
-  "ExplorerTable-checkbox": "alinea-ExplorerTable-checkbox",
-  "ExplorerTableCheckbox": "alinea-ExplorerTable-checkbox",
   "ExplorerTable-breadcrumbs": "alinea-ExplorerTable-breadcrumbs",
   "ExplorerTableBreadcrumbs": "alinea-ExplorerTable-breadcrumbs",
-  "ExplorerTable-chevron-button": "alinea-ExplorerTable-chevron-button",
-  "ExplorerTableChevronButton": "alinea-ExplorerTable-chevron-button",
-  "ExplorerTable-body": "alinea-ExplorerTable-body",
-  "ExplorerTableBody": "alinea-ExplorerTable-body",
-  "ExplorerTable-cell-filler": "alinea-ExplorerTable-cell-filler",
-  "ExplorerTableCellFiller": "alinea-ExplorerTable-cell-filler",
-  "ExplorerTable-cell-title": "alinea-ExplorerTable-cell-title",
-  "ExplorerTableCellTitle": "alinea-ExplorerTable-cell-title",
-  "ExplorerTable-titleAction": "alinea-ExplorerTable-titleAction",
-  "ExplorerTableTitleAction": "alinea-ExplorerTable-titleAction",
-  "ExplorerTable": "alinea-ExplorerTable",
-  "ExplorerTable-row-grid": "alinea-ExplorerTable-row-grid",
-  "ExplorerTableRowGrid": "alinea-ExplorerTable-row-grid",
-  "is-linked": "alinea-is-linked",
-  "isLinked": "alinea-is-linked",
-  "ExplorerTable-iconDrag": "alinea-ExplorerTable-iconDrag",
-  "ExplorerTableIconDrag": "alinea-ExplorerTable-iconDrag",
-  "ExplorerTable-column": "alinea-ExplorerTable-column",
-  "ExplorerTableColumn": "alinea-ExplorerTable-column",
-  "ExplorerTable-column-filler": "alinea-ExplorerTable-column-filler",
-  "ExplorerTableColumnFiller": "alinea-ExplorerTable-column-filler",
-  "is-noSelectionControls": "alinea-is-noSelectionControls",
-  "isNoSelectionControls": "alinea-is-noSelectionControls",
-  "ExplorerTable-field": "alinea-ExplorerTable-field",
-  "ExplorerTableField": "alinea-ExplorerTable-field",
-  "ExplorerTable-field-value": "alinea-ExplorerTable-field-value",
-  "ExplorerTableFieldValue": "alinea-ExplorerTable-field-value",
-  "ExplorerTable-header": "alinea-ExplorerTable-header",
-  "ExplorerTableHeader": "alinea-ExplorerTable-header",
+  "ExplorerTable-viewport": "alinea-ExplorerTable-viewport",
+  "ExplorerTableViewport": "alinea-ExplorerTable-viewport",
+  "is-compact": "alinea-is-compact",
+  "isCompact": "alinea-is-compact",
   "ExplorerTable-breadcrumb": "alinea-ExplorerTable-breadcrumb",
   "ExplorerTableBreadcrumb": "alinea-ExplorerTable-breadcrumb",
-  "is-unselectable": "alinea-is-unselectable",
-  "isUnselectable": "alinea-is-unselectable",
-  "ExplorerTable-empty": "alinea-ExplorerTable-empty",
-  "ExplorerTableEmpty": "alinea-ExplorerTable-empty",
-  "ExplorerTable-cell": "alinea-ExplorerTable-cell",
-  "ExplorerTableCell": "alinea-ExplorerTable-cell",
   "ExplorerTable-breadcrumb-root": "alinea-ExplorerTable-breadcrumb-root",
   "ExplorerTableBreadcrumbRoot": "alinea-ExplorerTable-breadcrumb-root",
-  "ExplorerTable-cell-selection": "alinea-ExplorerTable-cell-selection",
-  "ExplorerTableCellSelection": "alinea-ExplorerTable-cell-selection",
-  "ExplorerTable-row": "alinea-ExplorerTable-row",
-  "ExplorerTableRow": "alinea-ExplorerTable-row",
-  "ExplorerTable-field-label": "alinea-ExplorerTable-field-label",
-  "ExplorerTableFieldLabel": "alinea-ExplorerTable-field-label",
-  "ExplorerTable-icon": "alinea-ExplorerTable-icon",
-  "ExplorerTableIcon": "alinea-ExplorerTable-icon",
-  "ExplorerTable-viewport": "alinea-ExplorerTable-viewport",
-  "ExplorerTableViewport": "alinea-ExplorerTable-viewport",
-  "ExplorerTable-chevron": "alinea-ExplorerTable-chevron",
-  "ExplorerTableChevron": "alinea-ExplorerTable-chevron",
-  "ExplorerTable-title": "alinea-ExplorerTable-title",
-  "ExplorerTableTitle": "alinea-ExplorerTable-title",
+  "ExplorerTable": "alinea-ExplorerTable",
   "ExplorerTable-breadcrumb-label": "alinea-ExplorerTable-breadcrumb-label",
-  "ExplorerTableBreadcrumbLabel": "alinea-ExplorerTable-breadcrumb-label",
-  "ExplorerTable-column-selection": "alinea-ExplorerTable-column-selection",
-  "ExplorerTableColumnSelection": "alinea-ExplorerTable-column-selection"
+  "ExplorerTableBreadcrumbLabel": "alinea-ExplorerTable-breadcrumb-label"
 };
 
 // src/dashboard/app/ExplorerTable.tsx
+import {
+  OverviewCell,
+  overviewCellText,
+  overviewTableColumn
+} from "./OverviewCell.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createElement } from "react";
 var styles = dist_default(ExplorerTable_default);
-var explorerTableSelectionColumn = {
-  id: "selection",
-  kind: "selection",
-  width: 30
+var titleColumn = {
+  id: overviewTitle.key,
+  header: overviewTitle.header,
+  width: "2fr",
+  minWidth: 200,
+  sortable: true
 };
-var explorerTableTitleColumn = {
+var compactTitleColumn = {
   id: "title",
-  kind: "title",
-  width: 300
+  header: "Title",
+  width: "1fr",
+  minWidth: 0
 };
-var compactExplorerTableTitleColumn = {
-  id: "title",
-  kind: "title",
-  minWidth: 0,
-  width: "1fr"
-};
-var explorerTableOverviewColumns = Array.from(
-  { length: dashboardEntryOverviewColumnCount },
-  (_, index) => ({
-    id: `overview-${index}`,
-    index,
-    kind: "overview",
-    minWidth: 120,
-    width: "1fr"
-  })
-);
-var explorerTableLayoutOptions = {
-  rowHeight: 44,
-  padding: 0,
-  gap: 0
-};
-function createExplorerTableColumns({
-  compact,
-  showSelectionControls
-}) {
-  const columns = new Array();
-  if (showSelectionControls) columns.push(explorerTableSelectionColumn);
-  columns.push(
-    compact ? compactExplorerTableTitleColumn : explorerTableTitleColumn
-  );
-  if (!compact) columns.push(...explorerTableOverviewColumns);
-  return columns;
-}
-function explorerTableGridTemplate(columns) {
-  return columns.map((column) => {
-    if (column.width !== "1fr") return `${column.width}px`;
-    return `minmax(${column.minWidth ?? 0}px, 1fr)`;
-  }).join(" ");
-}
+var compactColumns = [compactTitleColumn];
 function ExplorerTableBreadcrumbs({
   entries,
   rootLabel
@@ -175,13 +81,6 @@ function ExplorerTableBreadcrumbs({
 }
 function ExplorerTableBreadcrumb({ entry, index }) {
   const { data } = useAtomValueRaw(entry.data);
-  if (!data) return null;
-  return /* @__PURE__ */ jsx(ExplorerTableLoadedBreadcrumb, { data, index });
-}
-function ExplorerTableLoadedBreadcrumb({
-  data,
-  index
-}) {
   const label = useAtomValueRaw(data.label);
   const root = useAtomValueRaw(data.root);
   const rootLabel = useAtomValueRaw(root.label);
@@ -204,110 +103,29 @@ function ExplorerTableLoadedBreadcrumb({
     )
   ] });
 }
-function ExplorerTableCell({
-  breadcrumbs,
-  cells,
-  column,
-  expanded,
-  explorer,
-  hasChildren,
-  icon,
-  isSelectable,
-  label,
-  level,
-  parents,
-  rootLabel
-}) {
-  if (column.kind === "selection") {
-    return /* @__PURE__ */ jsx("div", { className: styles.ExplorerTable.cell.selection(), role: "gridcell", children: isSelectable && /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        slot: "selection",
-        className: styles.ExplorerTable.checkbox(),
-        "aria-label": `Select ${label}`
-      }
-    ) });
-  }
-  if (column.kind === "title") {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: styles.ExplorerTable.cell.title(),
-        role: "gridcell",
-        style: { paddingLeft: 10 + Math.max(0, level - 1) * 20 },
-        children: [
-          explorer.supportsInlineExpansion && /* @__PURE__ */ jsx("span", { className: styles.ExplorerTable.chevron(), children: hasChildren && /* @__PURE__ */ jsx(
-            $7705c033048f6da7$export$353f5b6fc5456de1,
-            {
-              slot: "chevron",
-              className: styles.ExplorerTable.chevron.button(),
-              "aria-label": expanded ? `Collapse ${label}` : `Expand ${label}`,
-              children: /* @__PURE__ */ jsx(FoldIcon, { "aria-hidden": true, expanded })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            $7705c033048f6da7$export$353f5b6fc5456de1,
-            {
-              slot: "drag",
-              className: styles.ExplorerTable.iconDrag(),
-              "aria-label": `Drag ${label}`,
-              children: /* @__PURE__ */ jsx(
-                Icon,
-                {
-                  "aria-hidden": true,
-                  icon,
-                  className: styles.ExplorerTable.icon()
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: styles.ExplorerTable.field(), children: [
-            breadcrumbs && /* @__PURE__ */ jsx("span", { className: styles.ExplorerTable.field.label(), children: /* @__PURE__ */ jsx(
-              ExplorerTableBreadcrumbs,
-              {
-                entries: parents,
-                rootLabel
-              }
-            ) }),
-            /* @__PURE__ */ jsx("span", { className: styles.ExplorerTable.field.value(), title: label, children: /* @__PURE__ */ jsx("span", { className: styles.ExplorerTable.title(), children: label }) })
-          ] })
-        ]
-      }
-    );
-  }
-  if (column.kind === "filler")
-    return /* @__PURE__ */ jsx("div", { className: styles.ExplorerTable.cell.filler(), role: "gridcell" });
-  const cell = typeof column.index === "number" ? cells[column.index] : void 0;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: styles.ExplorerTable.cell(),
-      role: "gridcell",
-      title: cell ? `${cell.label} ${compactFieldText(cell.field, cell.value)}` : void 0,
-      children: cell && /* @__PURE__ */ jsxs("span", { className: styles.ExplorerTable.field(), children: [
-        /* @__PURE__ */ jsx("span", { className: styles.ExplorerTable.field.label(), children: cell.label }),
-        /* @__PURE__ */ jsx("span", { className: styles.ExplorerTable.field.value(), children: /* @__PURE__ */ jsx(CompactField, { field: cell.field, value: cell.value }) })
-      ] })
-    }
-  );
-}
 function ExplorerTableDisplayRow(props) {
   const {
-    cells,
-    columns,
+    breadcrumbs,
+    item,
+    compact,
     entry,
     explorer,
-    gridTemplateColumns,
     hasChildren,
-    label
+    icon,
+    isSelectable,
+    label,
+    links,
+    onPick,
+    parents,
+    rootLabel
   } = props;
-  const isExpanded = useAtomValueRaw(
-    useMemo(() => explorer.isExpanded(entry), [explorer, entry])
-  );
+  const config = useAtomValueRaw(configAtom);
+  const columns = props.page.overview.columns;
+  const isExpanded = useAtomValueRaw(explorer.isExpanded(entry));
   const onAction = useSetAtom(explorer.onAction);
   const openLocation = useSetAtom(explorer.openLocation);
   const setExpandedKeys = useSetAtom(explorer.expandedKeys);
-  const canExpandOnAction = !props.isSelectable && hasChildren && explorer.supportsInlineExpansion;
+  const canExpandOnAction = !isSelectable && hasChildren && explorer.supportsInlineExpansion;
   const hasAction = explorer.hasRowAction || canExpandOnAction;
   function performAction() {
     if (canExpandOnAction) {
@@ -316,196 +134,169 @@ function ExplorerTableDisplayRow(props) {
     }
     onAction(entry, props.locale);
   }
+  function pick() {
+    onPick?.(entry);
+  }
   function enterParent() {
     startTransition(() => openLocation(entry));
   }
-  const textValue = useMemo(
-    () => [label, ...cells.map((cell) => compactFieldText(cell.field, cell.value))].filter(Boolean).join(" "),
-    [cells, label]
+  const cellTexts = useMemo(
+    () => columns.map((column) => overviewCellText(config, column, item, links)),
+    [columns, config, item, links]
   );
+  const status = entryStatus(item);
+  const textValue = [label, status?.label, ...cellTexts].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
-    $89d060d8eb451127$export$53d36ab85dc89436,
+    TableRow,
     {
       id: entry.id,
       textValue,
-      hasChildItems: hasChildren,
-      className: styles.ExplorerTable.row({
-        unselectable: !props.isSelectable,
-        linked: props.isLinked
-      }),
-      "data-unselectable": !props.isSelectable || void 0,
-      isDisabled: !props.isSelectable,
+      hasChildren,
+      selectable: isSelectable,
+      highlighted: explorer.linkedKeys.has(entry.id),
       onAction: hasAction && explorer.mode !== "search" ? performAction : void 0,
-      onPress: hasAction && explorer.mode === "search" ? performAction : void 0,
+      onClick: hasAction && explorer.mode === "search" ? performAction : isSelectable && onPick ? pick : void 0,
       onDoubleClick: hasChildren ? enterParent : void 0,
+      rows: hasChildren && isExpanded ? /* @__PURE__ */ jsx(ExplorerTableChildren, { ...props }) : void 0,
       children: [
-        /* @__PURE__ */ jsx($89d060d8eb451127$export$4b687e3f663d618c, { children: ({ isExpanded: expanded, level }) => /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx(
+          TableTitle,
           {
-            className: styles.ExplorerTable.row.grid(),
-            role: "presentation",
-            style: { gridTemplateColumns },
-            children: columns.map((column) => /* @__PURE__ */ createElement(
-              ExplorerTableCell,
-              {
-                ...props,
-                column,
-                expanded,
-                key: column.id,
-                level
-              }
-            ))
+            icon,
+            title: label,
+            label: breadcrumbs ? /* @__PURE__ */ jsx(ExplorerTableBreadcrumbs, { entries: parents, rootLabel }) : void 0,
+            suffix: status && /* @__PURE__ */ jsx(EntryStatusIcon, { status })
           }
-        ) }),
-        hasChildren && isExpanded && /* @__PURE__ */ jsx(ExplorerTableChildren, { ...props })
+        ),
+        !compact && columns.map((column, index) => /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            align: column.align,
+            title: cellTexts[index] || void 0,
+            children: /* @__PURE__ */ jsx(OverviewCell, { column, row: item, links })
+          },
+          column.key
+        ))
       ]
     }
   );
 }
 function ExplorerTableChildren(props) {
-  const children = useAtomValueRaw(
-    useMemo(
-      () => props.explorer.children(props.entry, props.locale),
-      [props.entry, props.explorer, props.locale]
-    )
+  const children = useAtomValueRawSync(
+    props.explorer.children(props.entry, props.locale)
   );
-  if (children.length === 0) return null;
-  return /* @__PURE__ */ jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: children, children: (child) => /* @__PURE__ */ jsx(
+  return children.map((child) => /* @__PURE__ */ jsx(
     ExplorerTableRow,
     {
       breadcrumbs: props.breadcrumbs,
-      columns: props.columns,
+      compact: props.compact,
       entry: child,
       explorer: props.explorer,
-      gridTemplateColumns: props.gridTemplateColumns,
-      isLinked: props.explorer.linkedKeys.has(child.id),
       locale: props.locale,
+      onPick: props.onPick,
       page: props.page
-    }
-  ) });
+    },
+    child.id
+  ));
 }
-function ExplorerTableLoadingRow(props) {
-  return /* @__PURE__ */ jsx(
-    ExplorerTableDisplayRow,
-    {
-      ...props,
-      cells: [],
-      hasChildren: false,
-      icon: LucideFile,
-      isSelectable: false,
-      label: "Loading entry",
-      parents: []
-    }
-  );
-}
-function ExplorerTableLoadedRow({
-  data,
-  explorer,
-  ...props
-}) {
+function ExplorerTableRow({ explorer, ...props }) {
+  const { data } = useAtomValueRaw(props.entry.data);
   const root = useAtomValueRaw(data.root);
   const rootLabel = useAtomValueRaw(root.label);
   const label = useAtomValueRaw(data.label);
   const configuredIcon = useAtomValueRaw(data.icon);
+  const fileInfo = useAtomValueRaw(data.fileInfo);
   const hasChildren = useAtomValueRaw(data.hasChildren);
-  const cells = useAtomValueRaw(data.overviewCells);
+  const item = useAtomValueRaw(data.item);
+  const links = useAtomValueRaw(data.linked);
   const parents = useAtomValueRaw(data.parents);
-  const isSelectable = useAtomValueRaw(
-    useMemo(() => explorer.isSelectable(props.entry), [explorer, props.entry])
-  );
+  const isSelectable = useAtomValueRaw(explorer.isSelectable(props.entry));
   return /* @__PURE__ */ jsx(
     ExplorerTableDisplayRow,
     {
       ...props,
-      cells,
+      item,
       explorer,
       hasChildren: props.page.resultMode === "browse" && explorer.supportsInlineExpansion && hasChildren,
-      icon: configuredIcon ?? (hasChildren ? LucideFolder : LucideFile),
+      icon: fileInfo ? fileKindVisual(fileInfo.extension).icon : configuredIcon ?? (hasChildren ? LucideFolder : LucideFile),
       isSelectable,
       label,
+      links,
       parents,
       rootLabel
     }
   );
 }
-function ExplorerTableRow(props) {
-  const { data, pending } = useAtomValueRaw(props.entry.data);
-  if (pending || !data) return /* @__PURE__ */ jsx(ExplorerTableLoadingRow, { ...props });
-  return /* @__PURE__ */ jsx(ExplorerTableLoadedRow, { ...props, data });
-}
 function ExplorerTable({
   compact = false,
-  dragAndDropHooks,
+  dragDrop,
   explorer,
   items,
-  onSelectionChange,
+  onPick,
   page,
   renderEmptyState,
   locale
 }) {
   const [selected, setSelected] = useAtom(explorer.selection);
   const [expandedKeys, setExpandedKeys] = useAtom(explorer.expandedKeys);
+  const sort = useSetAtom(explorer.requestedSort);
+  const columns = useMemo(
+    () => [titleColumn, ...page.overview.columns.map(overviewTableColumn)],
+    [page.overview]
+  );
+  const sortDescriptor = page.sort.column ? { column: page.sort.column.column, direction: page.sort.column.direction } : void 0;
   const selectionMode = explorer.selectionMode;
-  const search = useAtomValueRaw(explorer.search);
-  const isSearching = Boolean(search.trim());
-  const breadcrumbs = explorer.breadcrumbs || page.resultMode === "matches" || isSearching || page.searchesEverything;
+  const breadcrumbs = explorer.breadcrumbs || page.resultMode === "matches" || page.searchesEverything;
   const hasSelection = selectionMode !== "none";
   const showSelectionControls = hasSelection && explorer.showSelectionControls && (!compact || selectionMode === "multiple");
-  const columns = useMemo(
-    () => createExplorerTableColumns({ compact, showSelectionControls }),
-    [compact, showSelectionControls]
-  );
-  const gridTemplateColumns = useMemo(
-    () => explorerTableGridTemplate(columns),
-    [columns]
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: explorer.resultsId,
+      className: styles.ExplorerTable.viewport({ compact }),
+      children: /* @__PURE__ */ jsx(
+        Table,
+        {
+          ...dragDrop,
+          "aria-label": "Explorer entries",
+          className: styles.ExplorerTable(),
+          variant: compact ? "plain" : "surface",
+          columns: compact ? compactColumns : columns,
+          showHeader: !compact,
+          sortDescriptor,
+          onSortChange: page.search.trim() ? void 0 : (descriptor) => startTransition(
+            () => sort({
+              column: String(descriptor.column),
+              direction: descriptor.direction
+            })
+          ),
+          expandable: explorer.supportsInlineExpansion,
+          dependencies: [breadcrumbs, compact, locale, onPick, page],
+          items,
+          selectionMode,
+          selectionBehavior: explorer.selectionBehavior,
+          showSelectionControls,
+          selectedKeys: hasSelection ? selected : void 0,
+          onSelectionChange: hasSelection ? (selection) => setSelected(selection === "all" ? "all" : new Set(selection)) : void 0,
+          expandedKeys,
+          onExpandedChange: setExpandedKeys,
+          renderEmptyState,
+          children: (item) => /* @__PURE__ */ jsx(
+            ExplorerTableRow,
+            {
+              breadcrumbs,
+              compact,
+              entry: item,
+              explorer,
+              locale,
+              onPick,
+              page
+            }
+          )
+        }
+      )
+    }
   );
-  function changeSelection(selection) {
-    setSelected(selection);
-    onSelectionChange?.(selection);
-  }
-  return /* @__PURE__ */ jsx("div", { className: styles.ExplorerTable.viewport({ compact }), children: /* @__PURE__ */ jsxs(Surface, { className: styles.ExplorerTable.surface({ compact }), children: [
-    /* @__PURE__ */ jsx(
-      $143fb904d86051ce$export$89be5a243e59c4b2,
-      {
-        layout: $942f06a693c162e2$export$cacbb3924155d68e,
-        layoutOptions: explorerTableLayoutOptions,
-        children: /* @__PURE__ */ jsx(
-          $89d060d8eb451127$export$7fbedc92909ed28e,
-          {
-            "aria-label": "Explorer entries",
-            className: styles.ExplorerTable({
-              noSelectionControls: !showSelectionControls
-            }),
-            dependencies: [breadcrumbs],
-            disabledBehavior: "selection",
-            dragAndDropHooks,
-            expandedKeys,
-            items,
-            selectedKeys: hasSelection ? selected : void 0,
-            selectionBehavior: explorer.selectionBehavior,
-            selectionMode: hasSelection ? selectionMode : void 0,
-            onExpandedChange: setExpandedKeys,
-            onSelectionChange: hasSelection ? changeSelection : void 0,
-            style: { display: "block", width: "100%", height: "100%" },
-            children: (item) => /* @__PURE__ */ jsx(
-              ExplorerTableRow,
-              {
-                breadcrumbs,
-                columns,
-                entry: item,
-                explorer,
-                gridTemplateColumns,
-                isLinked: explorer.linkedKeys.has(item.id),
-                locale,
-                page
-              }
-            )
-          }
-        )
-      }
-    ),
-    items.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.ExplorerTable.empty(), children: renderEmptyState() })
-  ] }) });
 }
 export {
   ExplorerTable

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { OverviewTabState } from '../atoms/overview.js';
+export interface ExplorerTabsProps {
+    tabs: Array<OverviewTabState>;
+    /** The key of the selected tab */
+    value: string;
+    onValueChange: (value: string) => void;
+    /** The listed entries of the selected tab */
+    children: ReactNode;
+}
+/** The tabs of an overview, above the entries listed for the selected tab */
+export declare function ExplorerTabs({ tabs, value, onValueChange, children }: ExplorerTabsProps): import("react").JSX.Element;