@dxos/react-ui-table 0.4.10-main.ec8b427 → 0.4.10-main.ef6fbc2

package/dist/lib/browser/index.mjs

@@ -1,39 +1,15 @@
 // packages/ui/react-ui-table/src/components/ColumnMenu.tsx
-import { Check, Trash, X, GearSix } from "@phosphor-icons/react";
-import React2, { useRef, useState } from "react";
-import { Button as Button2, DensityProvider, Input, Popover, Select, Separator, useTranslation } from "@dxos/react-ui";
-import { getSize as getSize2, mx } from "@dxos/react-ui-theme";
-import { safeParseInt } from "@dxos/util";
+import { X as X2, GearSix, CaretDown, ArrowDown, ArrowUp } from "@phosphor-icons/react";
+import React2, { useRef as useRef2, useState as useState3, useCallback } from "react";
+import { Button as Button2, DensityProvider, Popover, DropdownMenu } from "@dxos/react-ui";
+import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-table/src/components/SortButton.tsx
-import { CaretUpDown, SortAscending, SortDescending } from "@phosphor-icons/react";
-import React from "react";
-import { Button } from "@dxos/react-ui";
-import { getSize } from "@dxos/react-ui-theme";
-var SortButton = ({ sortDirection, onClick }) => {
-  let icon;
-  const size = getSize(4);
-  switch (sortDirection) {
-    case "asc":
-      icon = /* @__PURE__ */ React.createElement(SortAscending, {
-        className: size
-      });
-      break;
-    case "desc":
-      icon = /* @__PURE__ */ React.createElement(SortDescending, {
-        className: size
-      });
-      break;
-    default:
-      icon = /* @__PURE__ */ React.createElement(CaretUpDown, {
-        className: size
-      });
-  }
-  return /* @__PURE__ */ React.createElement(Button, {
-    variant: "ghost",
-    onClick
-  }, icon);
-};
+// packages/ui/react-ui-table/src/components/ColumnSettingsForm.tsx
+import { Check, Trash, X } from "@phosphor-icons/react";
+import React, { useRef, useState } from "react";
+import { Button, Input, Select, Separator, useTranslation } from "@dxos/react-ui";
+import { getSize, mx } from "@dxos/react-ui-theme";
+import { safeParseInt } from "@dxos/util";
 
 // packages/ui/react-ui-table/src/translations.ts
 var translationKey = "table";
@@ -58,34 +34,12 @@ var translations_default = [
   }
 ];
 
-// packages/ui/react-ui-table/src/components/ColumnMenu.tsx
-var ColumnMenu = ({ column, ...props }) => {
-  const title = column.label?.length ? column.label : column.id;
-  const header = props.context.header;
-  const canSort = header.column.getCanSort();
-  const sortDirection = header.column.getIsSorted();
-  const toggleSort = header.column.getToggleSortingHandler();
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: "flex items-center gap-2"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: "flex-1 min-is-0 truncate",
-    title
-  }, title), /* @__PURE__ */ React2.createElement("div", {
-    className: "flex gap-0"
-  }, canSort && toggleSort && /* @__PURE__ */ React2.createElement(SortButton, {
-    sortDirection,
-    onClick: toggleSort
-  }), /* @__PURE__ */ React2.createElement(ColumnPanel, {
-    ...props,
-    column
-  })));
-};
-var Section = ({ children, className }) => /* @__PURE__ */ React2.createElement("div", {
+// packages/ui/react-ui-table/src/components/ColumnSettingsForm.tsx
+var Section = ({ children, className }) => /* @__PURE__ */ React.createElement("div", {
   role: "none",
   className: mx("p-2", className)
 }, children);
-var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete }) => {
-  const [open, setOpen] = useState(false);
+var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onClose }) => {
   const [prop, setProp] = useState(column.id);
   const [refTable, setRefTable] = useState(column.refTable);
   const [refProp, setRefProp] = useState(column.refProp);
@@ -96,7 +50,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
   const { t } = useTranslation(translationKey);
   const handleCancel = () => {
     setProp(column.id);
-    setOpen(false);
+    onClose;
   };
   const handleSave = () => {
     if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
@@ -119,117 +73,275 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
       refProp,
       digits: safeParseInt(digits)
     });
-    setOpen(false);
+    onClose();
   };
-  return /* @__PURE__ */ React2.createElement(Popover.Root, {
-    open,
-    onOpenChange: (nextOpen) => setOpen(nextOpen)
-  }, /* @__PURE__ */ React2.createElement(Popover.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button2, {
-    variant: "ghost"
-  }, /* @__PURE__ */ React2.createElement(GearSix, {
-    className: mx(getSize2(4), "rotate-90")
-  }))), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, null, /* @__PURE__ */ React2.createElement(Popover.Viewport, {
-    classNames: "w-60"
-  }, /* @__PURE__ */ React2.createElement(DensityProvider, {
-    density: "fine"
-  }, /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React.createElement("div", {
     className: "flex flex-col gap-1"
-  }, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  }, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1"
-  }, t("column label label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+  }, t("column label label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     placeholder: "Column label",
     value: label ?? "",
     onChange: (event) => setLabel(event.target.value),
     autoFocus: true
-  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, t("property key label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+  }, t("property key label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     ref: propRef,
     placeholder: "Property key",
     // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
     value: prop ?? "",
     onChange: (event) => setProp(event.target.value.replace(/[^\w_]/g, ""))
-  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
+  }, t("column type label")), /* @__PURE__ */ React.createElement(Select.Root, {
     value: type,
     onValueChange: setType
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
     placeholder: "Type",
     classNames: "is-full"
-  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, [
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, [
     "number",
     "boolean",
     "string",
     "ref"
-  ].map((type2) => /* @__PURE__ */ React2.createElement(Select.Option, {
+  ].map((type2) => /* @__PURE__ */ React.createElement(Select.Option, {
     key: type2,
     value: type2
-  }, t(`${type2} column type label`))))))))), type === "number" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  }, t(`${type2} column type label`))))))))), type === "number" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, t("digits label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+  }, t("digits label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     value: digits ?? "",
     onChange: (event) => setDigits(event.target.value)
-  })))), type === "ref" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  })))), type === "ref" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Table"), /* @__PURE__ */ React2.createElement(Select.Root, {
+  }, "Table"), /* @__PURE__ */ React.createElement(Select.Root, {
     value: refTable,
     onValueChange: setRefTable
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
     placeholder: "Table",
     classNames: "is-full"
-  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tableDefs.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React2.createElement(Select.Option, {
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React.createElement(Select.Option, {
     key: id,
     value: id
-  }, name ?? id))))))), refTable && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  }, name ?? id))))))), refTable && /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
-  }, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
+  }, "Table property"), /* @__PURE__ */ React.createElement(Select.Root, {
     value: refProp,
     onValueChange: setRefProp
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
     placeholder: "Property",
     classNames: "is-full"
-  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tableDefs.find((tableDef2) => tableDef2.id === refTable)?.columns.map(({ id, label: label2 }) => /* @__PURE__ */ React2.createElement(Select.Option, {
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.find((tableDef2) => tableDef2.id === refTable)?.columns.map(({ id, label: label2 }) => /* @__PURE__ */ React.createElement(Select.Option, {
     key: id,
     value: id
-  }, label2 ?? id))))))))), /* @__PURE__ */ React2.createElement(Separator, {
+  }, label2 ?? id))))))))), /* @__PURE__ */ React.createElement(Separator, {
     classNames: "mli-2"
-  }), /* @__PURE__ */ React2.createElement(Section, {
+  }), /* @__PURE__ */ React.createElement(Section, {
     className: "space-b-1.5"
-  }, /* @__PURE__ */ React2.createElement(Button2, {
+  }, /* @__PURE__ */ React.createElement(Button, {
     variant: "primary",
     classNames: "is-full flex gap-2",
     onClick: handleSave
-  }, /* @__PURE__ */ React2.createElement("span", null, t("save label")), /* @__PURE__ */ React2.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("save label")), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
-  }), /* @__PURE__ */ React2.createElement(Check, {
-    className: getSize2(5)
-  })), /* @__PURE__ */ React2.createElement(Button2, {
+  }), /* @__PURE__ */ React.createElement(Check, {
+    className: getSize(5)
+  })), /* @__PURE__ */ React.createElement(Button, {
     classNames: "is-full flex gap-2",
     onClick: handleCancel
-  }, /* @__PURE__ */ React2.createElement("span", null, t("cancel label", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("cancel label", {
     ns: "os"
-  })), /* @__PURE__ */ React2.createElement("div", {
+  })), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
-  }), /* @__PURE__ */ React2.createElement(X, {
-    className: getSize2(5)
-  })), /* @__PURE__ */ React2.createElement(Button2, {
+  }), /* @__PURE__ */ React.createElement(X, {
+    className: getSize(5)
+  })), /* @__PURE__ */ React.createElement(Button, {
     classNames: "is-full flex gap-2",
     onClick: () => onDelete?.(column.id)
-  }, /* @__PURE__ */ React2.createElement("span", null, t("delete label")), /* @__PURE__ */ React2.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("delete label")), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
-  }), /* @__PURE__ */ React2.createElement(Trash, {
-    className: getSize2(5)
-  })))))), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))));
+  }), /* @__PURE__ */ React.createElement(Trash, {
+    className: getSize(5)
+  }))));
+};
+
+// packages/ui/react-ui-table/src/components/hooks/useColumnSorting.ts
+import { useState as useState2 } from "react";
+var useColumnSorting = (column) => {
+  const [sortDirection, setSortDirection] = useState2(column.getIsSorted());
+  const [firstSort, setFirstSort] = useState2();
+  const canSort = column.getCanSort();
+  const updateColumnSort = (direction) => {
+    setSortDirection(direction);
+    switch (direction) {
+      case false:
+        column.clearSorting();
+        break;
+      case "asc":
+        column.toggleSorting(false);
+        break;
+      case "desc":
+        column.toggleSorting(true);
+        break;
+    }
+  };
+  const onToggleSort = () => {
+    if (sortDirection === false) {
+      return;
+    }
+    if (sortDirection === firstSort) {
+      updateColumnSort(firstSort === "asc" ? "desc" : "asc");
+    } else {
+      updateColumnSort(false);
+    }
+  };
+  const onSelectSort = (direction) => {
+    setFirstSort(direction);
+    updateColumnSort(direction);
+  };
+  const onClearSort = () => {
+    updateColumnSort(false);
+  };
+  return {
+    canSort,
+    sortDirection,
+    onSelectSort,
+    onToggleSort,
+    onClearSort
+  };
+};
+
+// packages/ui/react-ui-table/src/components/ColumnMenu.tsx
+var ColumnMenu = ({ column, ...props }) => {
+  const title = column.label?.length ? column.label : column.id;
+  const header = props.context.header;
+  const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useColumnSorting(header.column);
+  const columnSettingsAnchorRef = useRef2(null);
+  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState3(false);
+  const shouldPreventFocusOnClose = useRef2(false);
+  const onOpenColumnSettings = useCallback(() => {
+    shouldPreventFocusOnClose.current = true;
+    setIsColumnSettingsOpen(true);
+  }, [
+    shouldPreventFocusOnClose,
+    setIsColumnSettingsOpen
+  ]);
+  const onDropdownCloseAutoFocus = useCallback((event) => {
+    if (shouldPreventFocusOnClose.current) {
+      event.preventDefault();
+      shouldPreventFocusOnClose.current = false;
+    }
+  }, [
+    shouldPreventFocusOnClose
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: "flex items-center justify-center justify-between"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "flex items-center gap-1 truncate",
+    title
+  }, /* @__PURE__ */ React2.createElement(SortIndicator, {
+    direction: sortDirection,
+    onClick: onToggleSort
+  }), /* @__PURE__ */ React2.createElement("div", {
+    className: "truncate"
+  }, title)), /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+    modal: false
+  }, /* @__PURE__ */ React2.createElement(Popover.Root, {
+    open: isColumnSettingsOpen,
+    onOpenChange: setIsColumnSettingsOpen,
+    modal: false
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+    ref: columnSettingsAnchorRef,
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Popover.Anchor, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Button2, {
+    variant: "ghost"
+  }, /* @__PURE__ */ React2.createElement(CaretDown, {
+    className: getSize2(4)
+  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+    onCloseAutoFocus: onDropdownCloseAutoFocus,
+    sideOffset: 4,
+    collisionPadding: 8
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, canSort && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+    onClick: () => onSelectSort("asc")
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "grow"
+  }, "Sort ascending"), /* @__PURE__ */ React2.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React2.createElement(ArrowUp, {
+    className: getSize2(4)
+  }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+    onClick: () => onSelectSort("desc")
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "grow"
+  }, "Sort descending"), /* @__PURE__ */ React2.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React2.createElement(ArrowDown, {
+    className: getSize2(4)
+  }))), sortDirection !== false && /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+    onClick: onClearSort
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "grow"
+  }, "Clear sort"), /* @__PURE__ */ React2.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React2.createElement(X2, {
+    className: getSize2(4)
+  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Item, {
+    onClick: onOpenColumnSettings
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "grow"
+  }, "Column settings"), /* @__PURE__ */ React2.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React2.createElement(GearSix, {
+    className: mx2(getSize2(4), "rotate-90")
+  })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)), /* @__PURE__ */ React2.createElement(ColumnSettingsPanel, {
+    ...props,
+    column,
+    onClose: () => setIsColumnSettingsOpen(false)
+  }))));
+};
+var ColumnSettingsPanel = ({ tableDefs, tableDef, column, onUpdate, onDelete, onClose }) => /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, null, /* @__PURE__ */ React2.createElement(Popover.Viewport, {
+  classNames: "w-60"
+}, /* @__PURE__ */ React2.createElement(DensityProvider, {
+  density: "fine"
+}, /* @__PURE__ */ React2.createElement(ColumnSettingsForm, {
+  column,
+  tableDefs,
+  tableDef,
+  onUpdate,
+  onDelete,
+  onClose
+}))), /* @__PURE__ */ React2.createElement(Popover.Arrow, null)));
+var SortIndicator = ({ direction, onClick }) => {
+  if (direction === false) {
+    return null;
+  }
+  let icon;
+  switch (direction) {
+    case "asc":
+      icon = /* @__PURE__ */ React2.createElement(ArrowUp, {
+        className: getSize2(3)
+      });
+      break;
+    case "desc":
+      icon = /* @__PURE__ */ React2.createElement(ArrowDown, {
+        className: getSize2(3)
+      });
+      break;
+  }
+  return /* @__PURE__ */ React2.createElement("div", {
+    onClick,
+    className: "flex items-center cursor-pointer"
+  }, icon);
 };
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { getCoreRowModel, getSortedRowModel, useReactTable, getGroupedRowModel, getExpandedRowModel } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React8, { Fragment, useCallback, useEffect, useState as useState2 } from "react";
+import React8, { Fragment, useCallback as useCallback2, useEffect as useEffect2, useState as useState5 } from "react";
 import { log } from "@dxos/log";
 import { useDefaultValue, useOnTransition } from "@dxos/react-ui";
 
@@ -252,28 +364,28 @@ var useTableContext = () => {
 };
 
 // packages/ui/react-ui-table/src/theme.ts
-import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx2 } from "@dxos/react-ui-theme";
+import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx3 } from "@dxos/react-ui-theme";
 var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
 var selectedRow = "!bg-primary-100 dark:!bg-primary-700";
 var flushPadding = "pli-0 plb-0";
 var textPadding = "pli-2 plb-0.5";
 var headPadding = "pli-2 plb-1";
 var gridCellFocusRing = "focus-within:z-[11] focus-within:outline outline-2 outline-primary-500 dark:outline-primary-400";
-var tableRoot = ({ fullWidth }, ...etc) => mx2("table-fixed", fullWidth && "is-full", ...etc);
-var groupTh = (_props, ...etc) => mx2("text-start font-medium", flushPadding, ...etc);
-var theadRoot = ({ header, stickyHeader }, ...etc) => mx2(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", header && "base-surface", "drop-shadow-sm", ...etc);
-var theadTr = (_props, ...etc) => mx2("group", ...etc);
-var theadTh = ({ border }, ...etc) => mx2("relative", "text-start font-medium select-none truncate", headPadding, border && groupBorder, border && "border border-t-0 border-b-0 border-neutral-200", ...etc);
+var tableRoot = ({ fullWidth }, ...etc) => mx3("table-fixed", fullWidth && "is-full", ...etc);
+var groupTh = (_props, ...etc) => mx3("text-start font-medium", flushPadding, ...etc);
+var theadRoot = ({ header, stickyHeader }, ...etc) => mx3(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", header && "base-surface", "drop-shadow-sm", ...etc);
+var theadTr = (_props, ...etc) => mx3("group", ...etc);
+var theadTh = ({ border }, ...etc) => mx3("relative", "text-start font-medium select-none truncate", headPadding, border && groupBorder, border && "border border-t-0 border-b-0 border-neutral-200", ...etc);
 var theadResizeRoot = ({ isResizing }) => {
-  return mx2("absolute h-full w-[4px] top-0 right-0", "cursor-col-resize", "user-select-none", "touch-action-none", !isResizing && "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800", "pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800", isResizing && "bg-primary-500 dark:bg-primary-400");
+  return mx3("absolute h-full w-[4px] top-0 right-0", "cursor-col-resize", "user-select-none", "touch-action-none", !isResizing && "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800", "pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800", isResizing && "bg-primary-500 dark:bg-primary-400");
 };
-var tbodyRoot = (_props, ...etc) => mx2(...etc);
-var tbodyTr = ({ canBeCurrent }, ...etc) => mx2("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer rounded", ...etc);
-var tdRoot = ({ border, isGrid }, ...etc) => mx2("relative", flushPadding, border && "border", border && groupBorder, isGrid && gridCellFocusRing, ...etc);
-var tdContent = (_props, ...etc) => mx2(...etc);
-var tfootRoot = (_props, ...etc) => mx2("sticky block-end-0 z-10", modalSurface, ...etc);
-var tfootTr = (_props, ...etc) => mx2(...etc);
-var tfootTh = ({ border }, ...etc) => mx2(textPadding, modalSurface, border && groupBorder, ...etc);
+var tbodyRoot = (_props, ...etc) => mx3(...etc);
+var tbodyTr = ({ canBeCurrent, isPinned }, ...etc) => mx3("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer rounded", isPinned && "sticky z-1 bottom-[-1px] base-surface", ...etc);
+var tdRoot = ({ border, isGrid }, ...etc) => mx3("relative", flushPadding, border && "border", border && groupBorder, isGrid && gridCellFocusRing, ...etc);
+var tdContent = (_props, ...etc) => mx3(...etc);
+var tfootRoot = (_props, ...etc) => mx3("sticky block-end-0 z-10", modalSurface, ...etc);
+var tfootTr = (_props, ...etc) => mx3(...etc);
+var tfootTh = ({ border }, ...etc) => mx3(textPadding, modalSurface, border && groupBorder, ...etc);
 
 // packages/ui/react-ui-table/src/components/Cell/Cell.tsx
 import { useFocusableGroup } from "@fluentui/react-tabster";
@@ -318,11 +430,14 @@ var TableBody = ({ rows }) => {
   return /* @__PURE__ */ React5.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
     const isCurrent = currentDatum === row.original;
     const isSelected = rowSelection?.[row.id];
+    const isPinned = row.getIsPinned();
+    const classNames = tbodyTr({
+      canBeCurrent,
+      isPinned: isPinned !== false
+    });
     return /* @__PURE__ */ React5.createElement("tr", {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
-      className: tbodyTr({
-        canBeCurrent
-      }),
+      className: classNames,
       ...isCurrent && {
         "aria-current": "location"
       },
@@ -419,6 +534,42 @@ var TableHead = (_props) => {
 };
 TableHead.displayName = TABLE_HEAD_NAME;
 
+// packages/ui/react-ui-table/src/components/hooks/usePinLastRow.ts
+import { useEffect, useState as useState4 } from "react";
+var usePinLastRow = (pinLastRow, table, data, getScrollElement) => {
+  const [pinnedRowKey, setPinnedRowKey] = useState4();
+  useEffect(() => {
+    if (!pinLastRow) {
+      return;
+    }
+    const rows = table.getRowModel().rows;
+    const rowToPin = rows[rows.length - 1];
+    const rowId = rowToPin.id;
+    if (rowId === pinnedRowKey) {
+      return;
+    }
+    table.resetRowPinning();
+    rowToPin.pin("bottom");
+    const scrollElement = getScrollElement?.();
+    const isFirstRender = pinnedRowKey === void 0;
+    if (scrollElement && !isFirstRender) {
+      requestAnimationFrame(() => {
+        scrollElement.scrollTo({
+          top: scrollElement.scrollHeight
+        });
+      });
+    }
+    setPinnedRowKey(rowId);
+  }, [
+    pinLastRow,
+    table,
+    getScrollElement,
+    pinnedRowKey,
+    setPinnedRowKey,
+    data
+  ]);
+};
+
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
 var Table = (props) => {
@@ -426,9 +577,9 @@ var Table = (props) => {
   const columns = useDefaultValue(props.columns, []);
   const data = useDefaultValue(props.data, []);
   const TableProvider2 = TableProvider;
-  const [columnsInitialised, setColumnsInitialised] = useState2(false);
-  const [columnSizing, setColumnSizing] = useState2({});
-  useEffect(() => {
+  const [columnsInitialised, setColumnsInitialised] = useState5(false);
+  const [columnSizing, setColumnSizing] = useState5({});
+  useEffect2(() => {
     if (columnsInitialised) {
       return;
     }
@@ -441,8 +592,8 @@ var Table = (props) => {
     columns,
     setColumnSizing
   ]);
-  const [columnSizingInfo, setColumnSizingInfo] = useState2({});
-  const notifyColumnResize = useCallback(() => onColumnResize?.(columnSizing), [
+  const [columnSizingInfo, setColumnSizingInfo] = useState5({});
+  const notifyColumnResize = useCallback2(() => onColumnResize?.(columnSizing), [
     onColumnResize,
     columnSizing
   ]);
@@ -452,7 +603,7 @@ var Table = (props) => {
     onChange: props.onRowSelectionChange,
     defaultProp: props.defaultRowSelection
   });
-  const handleRowSelectionChange = useCallback((updaterOrValue) => {
+  const handleRowSelectionChange = useCallback2((updaterOrValue) => {
     const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
     if (rowsSelectable === "multi") {
       setRowSelection(nextRowSelection);
@@ -469,8 +620,8 @@ var Table = (props) => {
     setRowSelection,
     rowSelection
   ]);
-  const [grouping, handleGroupingChange] = useState2(props.grouping ?? []);
-  useEffect(() => handleGroupingChange(props.grouping ?? []), [
+  const [grouping, handleGroupingChange] = useState5(props.grouping ?? []);
+  useEffect2(() => handleGroupingChange(props.grouping ?? []), [
     handleGroupingChange,
     props.grouping
   ]);
@@ -512,30 +663,19 @@ var Table = (props) => {
     // Debug
     debugTable: debug
   });
-  useEffect(() => {
+  useEffect2(() => {
     onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
   }, [
     onDataSelectionChange,
     rowSelection,
     table
   ]);
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
-    }
-    table.resetRowPinning();
-    const rows = table.getRowModel().rows;
-    rows[rows.length - 1].pin("bottom");
-  }, [
-    pinLastRow,
-    table,
-    data
-  ]);
+  usePinLastRow(pinLastRow, table, data, getScrollElement);
   const expand = false;
   if (!getScrollElement) {
     log.warn("Table: getScrollElement is not set. This is required for virtualized tables.", void 0, {
       F: __dxlog_file,
-      L: 168,
+      L: 159,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -588,13 +728,9 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
   const { table } = useTableContext();
   const centerRows = table.getCenterRows();
   const pinnedRows = table.getBottomRows();
-  const rows = [
-    ...centerRows,
-    ...pinnedRows
-  ];
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,
-    count: rows.length,
+    count: centerRows.length,
     overscan: 8,
     estimateSize: () => 40
   });
@@ -602,6 +738,10 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
   const totalSize = getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
   const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
+  const rowsToRender = [
+    ...virtualRows.map((virtualRow) => centerRows[virtualRow.index]),
+    ...pinnedRows
+  ];
   return /* @__PURE__ */ React8.createElement(React8.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React8.createElement("tbody", {
     role: "none"
   }, /* @__PURE__ */ React8.createElement("tr", {
@@ -612,7 +752,7 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
     },
     role: "none"
   }))), /* @__PURE__ */ React8.createElement(TableBody, {
-    rows: virtualRows.map((virtualRow) => rows[virtualRow.index])
+    rows: rowsToRender
   }), paddingBottom > 0 && /* @__PURE__ */ React8.createElement("tbody", {
     role: "none"
   }, /* @__PURE__ */ React8.createElement("tr", {
@@ -641,11 +781,11 @@ var GroupedTableContent = () => {
 };
 
 // packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx
-import { CaretDown } from "@phosphor-icons/react";
-import React9, { useCallback as useCallback2, useState as useState3 } from "react";
+import { CaretDown as CaretDown2 } from "@phosphor-icons/react";
+import React9, { useCallback as useCallback3, useState as useState6 } from "react";
 import { Popover as Popover2, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { PopoverCombobox } from "@dxos/react-ui-searchlist";
-import { descriptionText, getSize as getSize3, mx as mx3, staticPlaceholderText } from "@dxos/react-ui-theme";
+import { descriptionText, getSize as getSize3, mx as mx4, staticPlaceholderText } from "@dxos/react-ui-theme";
 var initialItems = (model, value) => value ? {
   [model.getId(value)]: {
     label: model.getText(value),
@@ -654,9 +794,9 @@ var initialItems = (model, value) => value ? {
 } : {};
 var CellCombobox = ({ model, value, onValueChange }) => {
   const { t } = useTranslation2(translationKey);
-  const [items, setItems] = useState3(initialItems(model, value));
-  const [loading, setLoading] = useState3(false);
-  const [searchInputValue, setSearchInputValue] = useState3("");
+  const [items, setItems] = useState6(initialItems(model, value));
+  const [loading, setLoading] = useState6(false);
+  const [searchInputValue, setSearchInputValue] = useState6("");
   const handleSearchInputValueChange = async (text) => {
     setSearchInputValue(text ?? "");
     setLoading(true);
@@ -670,7 +810,7 @@ var CellCombobox = ({ model, value, onValueChange }) => {
     }, initialItems(model, value)));
     setLoading(false);
   };
-  const handleValueChange = useCallback2((id) => {
+  const handleValueChange = useCallback3((id) => {
     onValueChange(items[id]?.data);
   }, [
     items,
@@ -682,8 +822,8 @@ var CellCombobox = ({ model, value, onValueChange }) => {
     variant: "ghost",
     classNames: "is-full rounded-none ring-inset"
   }, value ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", {
-    className: mx3("font-normal text-start text-base flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
-  }, model.getText(value)), /* @__PURE__ */ React9.createElement(CaretDown, {
+    className: mx4("font-normal text-start text-base flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
+  }, model.getText(value)), /* @__PURE__ */ React9.createElement(CaretDown2, {
     weight: "bold",
     className: getSize3(3)
   })) : null), /* @__PURE__ */ React9.createElement(PopoverCombobox.Content, {
@@ -693,9 +833,9 @@ var CellCombobox = ({ model, value, onValueChange }) => {
     value: searchInputValue,
     onValueChange: handleSearchInputValueChange
   }), /* @__PURE__ */ React9.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React9.createElement("p", {
-    className: mx3("text-center", descriptionText)
+    className: mx4("text-center", descriptionText)
   }, "Start typing to search") : loading ? /* @__PURE__ */ React9.createElement("p", {
-    className: mx3("text-center", descriptionText)
+    className: mx4("text-center", descriptionText)
   }, "Searching\u2026") : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(PopoverCombobox.Empty, {
     classNames: [
       "text-center",
@@ -711,14 +851,14 @@ var CellCombobox = ({ model, value, onValueChange }) => {
 
 // packages/ui/react-ui-table/src/helpers.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
-import { Check as Check2, ClipboardText, X as X2 } from "@phosphor-icons/react";
+import { Check as Check2, ClipboardText, X as X3 } from "@phosphor-icons/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { format } from "date-fns/format";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import React10, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import React10, { useEffect as useEffect3, useRef as useRef3, useState as useState7 } from "react";
 import { log as log2 } from "@dxos/log";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
-import { getSize as getSize4, mx as mx4 } from "@dxos/react-ui-theme";
+import { getSize as getSize4, mx as mx5 } from "@dxos/react-ui-theme";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/helpers.tsx";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
@@ -733,11 +873,11 @@ var ComboboxBuilderCell = (cellContext) => {
   }) : null;
 };
 var StringBuilderCell = (cellContext) => {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const { findPrevFocusable } = useFocusFinders();
   const { onUpdate, cell } = cellContext.column.columnDef.meta;
   const initialValue = cellContext.getValue();
-  const [value, setValue] = useState4(() => {
+  const [value, setValue] = useState7(() => {
     if (initialValue?.content) {
       return initialValue?.content;
     }
@@ -779,10 +919,10 @@ var displayNumber = (value, digits) => value || value === 0 ? value.toLocaleStri
 var NumberBuilderCell = (cellContext) => {
   const { onUpdate, digits } = cellContext.column.columnDef.meta;
   const value = cellContext.getValue();
-  const [text, setText] = useState4(displayNumber(value, digits));
+  const [text, setText] = useState7(displayNumber(value, digits));
   const { findPrevFocusable } = useFocusFinders();
-  const ref = useRef2(null);
-  useEffect2(() => {
+  const ref = useRef3(null);
+  useEffect3(() => {
     (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
   }, [
     digits,
@@ -869,7 +1009,7 @@ var ColumnBuilder = class {
       cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
         const cellValue = cellContext.getValue();
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx4("truncate", classNames)
+          className: mx5("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
       },
       ...props,
@@ -900,7 +1040,7 @@ var ColumnBuilder = class {
           value = value.content;
         }
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx4("truncate", textPadding, classNames)
+          className: mx5("truncate", textPadding, classNames)
         }, value);
       },
       ...props,
@@ -929,7 +1069,6 @@ var ColumnBuilder = class {
         onUpdate,
         digits,
         header: {
-          classNames: "text-end",
           ...props.meta?.header
         },
         cell: {
@@ -955,7 +1094,7 @@ var ColumnBuilder = class {
             addSuffix: true
           }) : value.toISOString() : void 0;
           return /* @__PURE__ */ React10.createElement("div", {
-            className: mx4(textPadding, classNames)
+            className: mx5(textPadding, classNames)
           }, str);
         } catch (err) {
           log2.info("formatError", {
@@ -1082,7 +1221,7 @@ var ColumnBuilder = class {
   */
   icon({ label, size, on, off, ...props } = {}) {
     const IconOn = on?.Icon ?? Check2;
-    const IconOff = off?.Icon ?? X2;
+    const IconOff = off?.Icon ?? X3;
     return {
       size: size ?? 32,
       // TODO(Zan): Implement sort algorithm
@@ -1094,11 +1233,11 @@ var ColumnBuilder = class {
         const value = cell.getValue();
         if (value) {
           return /* @__PURE__ */ React10.createElement(IconOn, {
-            className: mx4("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
+            className: mx5("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
           });
         } else if (value === false) {
           return /* @__PURE__ */ React10.createElement(IconOff, {
-            className: mx4("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
+            className: mx5("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
           });
         } else {
           return null;
@@ -1107,13 +1246,44 @@ var ColumnBuilder = class {
       ...props
     };
   }
+  /**
+  * This display column type is for nested/unhandled data to appear as JSON.
+  */
+  display({ label, classNames, ...props } = {}) {
+    return {
+      size: 120,
+      minSize: 120,
+      header: (cell) => label ?? cell.header.id,
+      cell: (cell) => {
+        const value = cell.getValue();
+        return /* @__PURE__ */ React10.createElement("div", {
+          className: "overflow-scroll"
+        }, /* @__PURE__ */ React10.createElement("code", {
+          className: "text-xs"
+        }, JSON.stringify(value)));
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        cell: {
+          ...props.meta?.cell,
+          classNames: [
+            "font-mono",
+            textPadding,
+            classNames
+          ]
+        }
+      }
+    };
+  }
 };
 export {
   CellCombobox,
   ColumnBuilder,
   ColumnMenu,
-  ColumnPanel,
+  ColumnSettingsPanel,
   MemoizedVirtualisedTableContent,
+  SortIndicator,
   Table,
   createColumnBuilder,
   currentRow,