@dxos/react-ui-table 0.8.1-staging.5be625a → 0.8.1-staging.9eaf14f

package/dist/lib/browser/deprecated/index.mjs

@@ -1,1483 +0,0 @@
-// packages/ui/react-ui-table/src/deprecated/translations.ts
-var translationKey = "table";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "no selection label": "\xA0",
-        "number column type label": "Number",
-        "boolean column type label": "Boolean",
-        "date column type label": "Date",
-        "string column type label": "Text",
-        "ref column type label": "Reference",
-        "digits label": "Decimal places",
-        "save label": "Save",
-        "delete label": "Delete",
-        "column label label": "Label",
-        "property key label": "Property",
-        "column type label": "Type"
-      }
-    }
-  }
-];
-
-// packages/ui/react-ui-table/src/deprecated/components/Cell/CellCombobox.tsx
-import { CaretDown } from "@phosphor-icons/react";
-import React, { useCallback, useState } from "react";
-import { Popover, useTranslation } from "@dxos/react-ui";
-import { PopoverCombobox } from "@dxos/react-ui-searchlist";
-import { descriptionText, getSize, mx, staticPlaceholderText } from "@dxos/react-ui-theme";
-var initialItems = (model, value) => value ? {
-  [model.getId(value)]: {
-    label: model.getText(value),
-    data: value
-  }
-} : {};
-var CellCombobox = ({ model, value, onValueChange }) => {
-  const { t } = useTranslation(translationKey);
-  const [items, setItems] = useState(initialItems(model, value));
-  const [loading, setLoading] = useState(false);
-  const [searchInputValue, setSearchInputValue] = useState("");
-  const handleSearchInputValueChange = async (text) => {
-    setSearchInputValue(text ?? "");
-    setLoading(true);
-    const items2 = await model.query(text);
-    setItems(items2.reduce((acc, item) => {
-      acc[model.getId(item)] = {
-        label: model.getText(item),
-        data: item
-      };
-      return acc;
-    }, initialItems(model, value)));
-    setLoading(false);
-  };
-  const handleValueChange = useCallback((id) => {
-    onValueChange(items[id]?.data);
-  }, [
-    items,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ React.createElement(PopoverCombobox.Root, {
-    placeholder: t("no selection label")
-  }, /* @__PURE__ */ React.createElement(PopoverCombobox.Trigger, {
-    variant: "ghost",
-    classNames: "is-full rounded-none ring-inset"
-  }, value ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", {
-    className: mx("font-normal text-start text-baseText flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
-  }, model.getText(value)), /* @__PURE__ */ React.createElement(CaretDown, {
-    weight: "bold",
-    className: getSize(3)
-  })) : null), /* @__PURE__ */ React.createElement(PopoverCombobox.Content, {
-    shouldFilter: false,
-    classNames: "is-[--radix-popover-trigger-width]"
-  }, /* @__PURE__ */ React.createElement(PopoverCombobox.Input, {
-    value: searchInputValue,
-    onValueChange: handleSearchInputValueChange
-  }), /* @__PURE__ */ React.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React.createElement("p", {
-    className: mx("text-center", descriptionText)
-  }, "Start typing to search") : loading ? /* @__PURE__ */ React.createElement("p", {
-    className: mx("text-center", descriptionText)
-  }, "Searching\u2026") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PopoverCombobox.Empty, {
-    classNames: [
-      "text-center",
-      descriptionText
-    ]
-  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React.createElement(PopoverCombobox.Item, {
-    key: id,
-    value: id,
-    onSelect: handleValueChange,
-    classNames: "truncate"
-  }, label)))), /* @__PURE__ */ React.createElement(Popover.Arrow, null)));
-};
-
-// packages/ui/react-ui-table/src/deprecated/components/ColumnMenu/ColumnMenu.tsx
-import { X, GearSix, CaretDown as CaretDown2, ArrowDown, ArrowUp, ArrowRight, ArrowLeft } from "@phosphor-icons/react";
-import React4, { useRef as useRef2, useState as useState6, useCallback as useCallback5 } from "react";
-import { Button as Button2, Popover as Popover2, DropdownMenu } from "@dxos/react-ui";
-import { getSize as getSize2, mx as mx2 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-table/src/deprecated/components/ColumnMenu/ColumnSettings.tsx
-import React2, { useRef, useState as useState2 } from "react";
-import { FormatEnums } from "@dxos/echo-schema";
-import { Button, Input, Select, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { safeParseInt } from "@dxos/util";
-var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
-  const { t } = useTranslation2(translationKey);
-  const propRef = useRef(null);
-  const [formState, setFormState] = useState2({
-    prop: column.id,
-    refTable: column.refTable,
-    refProp: column.refProp,
-    type: String(column.type),
-    label: column.label,
-    digits: String(column.digits ?? "0")
-  });
-  const handleSave = () => {
-    const { prop, refTable, refProp, type, label, digits } = formState;
-    if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
-      propRef.current?.focus();
-      return;
-    }
-    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
-    if (current) {
-      if (current.type !== "ref") {
-        propRef.current?.focus();
-        return;
-      }
-    }
-    onUpdate?.(column.id, {
-      id: prop,
-      prop,
-      label,
-      type,
-      refTable,
-      refProp,
-      digits: safeParseInt(digits)
-    });
-    onClose?.();
-  };
-  const handleDelete = () => {
-    onDelete?.(column.id);
-    onClose?.();
-  };
-  return /* @__PURE__ */ React2.createElement("div", {
-    className: "flex flex-col w-full gap-4"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: "flex flex-col gap-2"
-  }, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("column label label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
-    placeholder: "Column label",
-    value: formState.label ?? "",
-    onChange: (event) => setFormState((prevState) => ({
-      ...prevState,
-      label: event.target.value
-    })),
-    autoFocus: true,
-    "data-testid": "table.column-settings.label"
-  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("property key label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
-    ref: propRef,
-    placeholder: "Property key",
-    value: formState.prop ?? "",
-    onChange: (event) => setFormState((prevState) => ({
-      ...prevState,
-      prop: event.target.value.replace(/[^\w_]/g, "")
-    }))
-  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: formState.type,
-    onValueChange: (value) => setFormState((prevState) => ({
-      ...prevState,
-      type: value
-    }))
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
-    classNames: "is-full",
-    placeholder: "Type"
-  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, FormatEnums.map((type) => /* @__PURE__ */ React2.createElement(Select.Option, {
-    key: type,
-    value: type
-  }, t(`${type} column type label`)))))))), formState.type === "number" && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, t("digits label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
-    value: formState.digits ?? "",
-    onChange: (event) => setFormState((prevState) => ({
-      ...prevState,
-      digits: event.target.value
-    }))
-  })), formState.type === "ref" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, "Table"), /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: formState.refTable,
-    onValueChange: (value) => setFormState((prevState) => ({
-      ...prevState,
-      refTable: value
-    }))
-  }, /* @__PURE__ */ React2.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, tablesToReference.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React2.createElement(Select.Option, {
-    key: id,
-    value: id
-  }, name ?? id))))))), formState.refTable && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, null, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: formState.refProp,
-    onValueChange: (value) => setFormState((prevState) => ({
-      ...prevState,
-      refProp: value
-    }))
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
-    placeholder: "Property"
-  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tablesToReference.find((tableDef2) => tableDef2.id === formState.refTable)?.columns.map(({ id, label }) => /* @__PURE__ */ React2.createElement(Select.Option, {
-    key: id,
-    value: id
-  }, label ?? id))))))))), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", {
-    className: "flex flex-row justify-end gap-1"
-  }, /* @__PURE__ */ React2.createElement(Button, {
-    onClick: handleDelete,
-    "data-testid": "table.column-settings.delete"
-  }, t("delete label")), /* @__PURE__ */ React2.createElement(Button, {
-    variant: "primary",
-    onClick: handleSave,
-    "data-testid": "table.column-settings.save"
-  }, t("save label")))));
-};
-
-// packages/ui/react-ui-table/src/deprecated/hooks/useColumnSizing.ts
-import { useCallback as useCallback2, useEffect, useState as useState3 } from "react";
-import { useOnTransition } from "@dxos/react-ui";
-var useColumnResizing = ({ columns, onColumnResize }) => {
-  const [columnsInitialised, setColumnsInitialised] = useState3(false);
-  const [columnSizing, setColumnSizing] = useState3({});
-  useEffect(() => {
-    if (columnsInitialised) {
-      return;
-    }
-    setColumnSizing(columns.filter((column) => !!column.size && column.prop !== void 0).reduce((state, column) => {
-      state[column.prop] = column.size;
-      return state;
-    }, {}));
-    setColumnsInitialised(true);
-  }, [
-    columns,
-    setColumnSizing
-  ]);
-  const [columnSizingInfo, setColumnSizingInfo] = useState3({});
-  const notifyColumnResize = useCallback2(() => onColumnResize?.(columnSizing), [
-    onColumnResize,
-    columnSizing
-  ]);
-  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === "string", false, notifyColumnResize);
-  return {
-    columnSizing,
-    columnSizingInfo,
-    setColumnSizing,
-    setColumnSizingInfo
-  };
-};
-
-// packages/ui/react-ui-table/src/deprecated/hooks/useColumnSorting.ts
-import { useState as useState4 } from "react";
-
-// packages/ui/react-ui-table/src/deprecated/components/Table/TableContext.tsx
-import React3, { useContext, createContext } from "react";
-import { raise } from "@dxos/debug";
-var TABLE_NAME = "Table";
-var TableContext = /* @__PURE__ */ createContext(void 0);
-var TableProvider = ({ children, ...value }) => {
-  return /* @__PURE__ */ React3.createElement(TableContext.Provider, {
-    value
-  }, children);
-};
-var useTableContext = () => {
-  return useContext(TableContext) ?? raise(new Error("Missing TableContext"));
-};
-
-// packages/ui/react-ui-table/src/deprecated/hooks/useColumnSorting.ts
-var useColumnSorting = () => {
-  const [columnSorting, setColumnSorting] = useState4([]);
-  const sortColumn = (columnId, sortDirection) => {
-    setColumnSorting([
-      {
-        id: columnId,
-        desc: sortDirection === "desc"
-      }
-    ]);
-  };
-  const clearColumnSorting = () => {
-    setColumnSorting([]);
-  };
-  return {
-    sorting: columnSorting,
-    sortColumn,
-    clearColumnSorting
-  };
-};
-var useSortColumn = (column) => {
-  const { sorting, sortColumn, clearColumnSorting } = useTableContext();
-  const [initialSortDirection, setInitialSortDirection] = useState4();
-  const columnSort = sorting.find((s) => s.id === column.id);
-  const sortDirection = columnSort ? columnSort.desc ? "desc" : "asc" : void 0;
-  const canSort = column.getCanSort();
-  const updateColumnSort = (direction) => {
-    sortColumn(column.id, direction);
-  };
-  const onToggleSort = () => {
-    if (sortDirection === void 0) {
-      return;
-    }
-    if (sortDirection === initialSortDirection) {
-      updateColumnSort(initialSortDirection === "asc" ? "desc" : "asc");
-    } else {
-      clearColumnSorting();
-    }
-  };
-  const onSelectSort = (direction) => {
-    clearColumnSorting();
-    setInitialSortDirection(direction);
-    updateColumnSort(direction);
-  };
-  const onClearSort = () => {
-    clearColumnSorting();
-  };
-  return {
-    canSort,
-    sortDirection,
-    onSelectSort,
-    onToggleSort,
-    onClearSort
-  };
-};
-
-// packages/ui/react-ui-table/src/deprecated/hooks/usePinLastRow.ts
-import { useCallback as useCallback3, useEffect as useEffect2, useState as useState5 } from "react";
-var usePinLastRow = (pinLastRow, table, data) => {
-  const [pinnedRowKey, setPinnedRowKey] = useState5();
-  const pinRow = useCallback3((rowToPin) => {
-    table.resetRowPinning();
-    rowToPin.pin("bottom");
-    setPinnedRowKey(rowToPin.id);
-  }, [
-    table
-  ]);
-  const clearRowPinning = useCallback3(() => {
-    table.resetRowPinning();
-    setPinnedRowKey(void 0);
-  }, [
-    table
-  ]);
-  const pinLastRowCallback = useCallback3(() => {
-    const rows = table.getRowModel().rows;
-    if (rows.length === 0) {
-      return clearRowPinning();
-    }
-    const lastRow = rows[rows.length - 1];
-    if (lastRow.id === pinnedRowKey) {
-      return;
-    }
-    pinRow(lastRow);
-  }, [
-    table,
-    pinnedRowKey
-  ]);
-  useEffect2(() => {
-    if (pinLastRow) {
-      pinLastRowCallback();
-    }
-  }, [
-    data,
-    pinLastRow,
-    pinLastRowCallback
-  ]);
-};
-
-// packages/ui/react-ui-table/src/deprecated/hooks/useRowSelection.ts
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { useCallback as useCallback4 } from "react";
-var useRowSelection = (props) => {
-  const [rowSelection = {}, setRowSelection] = useControllableState({
-    prop: props.rowSelection,
-    onChange: props.onRowSelectionChange,
-    defaultProp: props.defaultRowSelection
-  });
-  const handleRowSelectionChange = useCallback4((updaterOrValue) => {
-    const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
-    if (props.rowsSelectable === "multi") {
-      setRowSelection(nextRowSelection);
-    } else if (props.rowsSelectable) {
-      const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
-      setRowSelection(nextRowSelectionKey ? {
-        [nextRowSelectionKey]: true
-      } : {});
-    } else {
-      setRowSelection({});
-    }
-  }, [
-    props.rowsSelectable,
-    setRowSelection,
-    rowSelection
-  ]);
-  return {
-    rowSelection,
-    handleRowSelectionChange
-  };
-};
-
-// packages/ui/react-ui-table/src/deprecated/components/ColumnMenu/ColumnMenu.tsx
-var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ...props }) => {
-  const title = column.label?.length ? column.label : column.id;
-  const header = props.context.header;
-  const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useSortColumn(header.column);
-  const columnSettingsAnchorRef = useRef2(null);
-  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState6(false);
-  const shouldPreventFocusOnClose = useRef2(false);
-  const onOpenColumnSettings = useCallback5(() => {
-    shouldPreventFocusOnClose.current = true;
-    setIsColumnSettingsOpen(true);
-  }, [
-    shouldPreventFocusOnClose,
-    setIsColumnSettingsOpen
-  ]);
-  const onDropdownCloseAutoFocus = useCallback5((event) => {
-    if (shouldPreventFocusOnClose.current) {
-      event.preventDefault();
-      shouldPreventFocusOnClose.current = false;
-    }
-  }, [
-    shouldPreventFocusOnClose
-  ]);
-  return /* @__PURE__ */ React4.createElement("div", {
-    className: "flex items-center justify-between"
-  }, /* @__PURE__ */ React4.createElement("div", {
-    className: "flex items-center gap-1 truncate",
-    title
-  }, /* @__PURE__ */ React4.createElement(SortIndicator, {
-    direction: sortDirection,
-    onClick: onToggleSort
-  }), /* @__PURE__ */ React4.createElement("div", {
-    className: "truncate"
-  }, title)), /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
-    modal: false
-  }, /* @__PURE__ */ React4.createElement(Popover2.Root, {
-    open: isColumnSettingsOpen,
-    onOpenChange: setIsColumnSettingsOpen,
-    modal: false
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
-    ref: columnSettingsAnchorRef,
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(Popover2.Anchor, {
-    asChild: true
-  }, /* @__PURE__ */ React4.createElement(Button2, {
-    variant: "ghost",
-    "data-testid": "table.column-menu"
-  }, /* @__PURE__ */ React4.createElement(CaretDown2, {
-    className: getSize2(4)
-  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
-    onCloseAutoFocus: onDropdownCloseAutoFocus,
-    sideOffset: 4,
-    collisionPadding: 8
-  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, canSort && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: () => onSelectSort("asc")
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "grow"
-  }, "Sort ascending"), /* @__PURE__ */ React4.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ React4.createElement(ArrowUp, {
-    className: getSize2(4)
-  }))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: () => onSelectSort("desc")
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "grow"
-  }, "Sort descending"), /* @__PURE__ */ React4.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ React4.createElement(ArrowDown, {
-    className: getSize2(4)
-  }))), sortDirection && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: onClearSort
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "grow"
-  }, "Clear sort"), /* @__PURE__ */ React4.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ React4.createElement(X, {
-    className: getSize2(4)
-  })))), columnOrderable && /* @__PURE__ */ React4.createElement(React4.Fragment, null, columnPosition !== "start" && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: () => onColumnReorder(header.column.id, "left")
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "grow"
-  }, "Move left"), /* @__PURE__ */ React4.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ React4.createElement(ArrowLeft, {
-    className: mx2(getSize2(4))
-  }))), columnPosition !== "end" && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: () => onColumnReorder(header.column.id, "right")
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "grow"
-  }, "Move right"), /* @__PURE__ */ React4.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ React4.createElement(ArrowRight, {
-    className: mx2(getSize2(4))
-  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
-    onClick: onOpenColumnSettings,
-    "data-testid": "table.open-column-settings"
-  }, /* @__PURE__ */ React4.createElement("span", {
-    className: "grow"
-  }, "Column settings"), /* @__PURE__ */ React4.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ React4.createElement(GearSix, {
-    className: mx2(getSize2(4), "rotate-90")
-  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, null, /* @__PURE__ */ React4.createElement(Popover2.Viewport, null, /* @__PURE__ */ React4.createElement(ColumnSettings, {
-    ...props,
-    column,
-    onClose: () => setIsColumnSettingsOpen(false)
-  })), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null))))));
-};
-var SortIndicator = ({ direction, onClick }) => {
-  if (direction === void 0) {
-    return null;
-  }
-  let icon;
-  switch (direction) {
-    case "asc":
-      icon = /* @__PURE__ */ React4.createElement(ArrowUp, {
-        className: getSize2(3)
-      });
-      break;
-    case "desc":
-      icon = /* @__PURE__ */ React4.createElement(ArrowDown, {
-        className: getSize2(3)
-      });
-      break;
-  }
-  return /* @__PURE__ */ React4.createElement("div", {
-    onClick,
-    className: "flex items-center cursor-pointer"
-  }, icon);
-};
-
-// packages/ui/react-ui-table/src/deprecated/components/Table/Table.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-import React8, { Fragment, memo, useCallback as useCallback7, useEffect as useEffect3, useState as useState8, useContext as useContext3 } from "react";
-import { useDefaultValue } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-table/src/deprecated/components/Table/TableBody.tsx
-import { useArrowNavigationGroup } from "@fluentui/react-tabster";
-import { flexRender } from "@tanstack/react-table";
-import React6, { useContext as useContext2 } from "react";
-
-// packages/ui/react-ui-table/src/deprecated/components/Table/TableRootContext.ts
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { createContext as createContext2, useRef as useRef3, useState as useState7 } from "react";
-var useTableRootContext = () => {
-  const scrollContextRef = useRef3(null);
-  const [tableCount, setTableCount] = useState7(0);
-  const virtualizer = useVirtualizer({
-    getScrollElement: () => scrollContextRef?.current ?? null,
-    count: tableCount,
-    overscan: 8,
-    estimateSize: () => 40
-  });
-  const dispatch = (action) => {
-    switch (action.type) {
-      case "updateTableCount":
-        setTableCount(action.count);
-        break;
-      default:
-        break;
-    }
-  };
-  return {
-    scrollContextRef,
-    virtualizer,
-    dispatch
-  };
-};
-var TableRootContext = createContext2({});
-
-// packages/ui/react-ui-table/src/deprecated/theme.ts
-import { focusRing, ghostSelected, ghostSelectedCurrent, 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";
-var headPadding = "pli-2 plb-0";
-var gridCellFocusRing = "relative focus-within:outline focus-within:outline-1 outline-primary-500 outline-offset-[-1px]";
-var borderColors = "border-neutral-200 dark:border-neutral-700";
-var stickyRowColors = "bg-neutral-50  dark:bg-neutral-800";
-var tableRoot = ({ fullWidth }, ...etc) => mx3("table-fixed", "text-neutral-800 dark:text-neutral-200", 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", stickyRowColors, ...etc);
-var theadTr = (_props, ...etc) => mx3("group", ...etc);
-var theadTh = ({ border }, ...etc) => mx3("relative", "text-start text-xs select-none truncate", headPadding, border && borderColors, border && "border-t border-b border-l last:border-r", ...etc);
-var theadResizeRoot = ({ isResizing }) => {
-  return mx3("absolute h-full w-[4px] top-0 right-0", "cursor-col-resize", "user-select-none", "touch-action-none", "pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800", !isResizing && "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800", isResizing && "bg-primary-500");
-};
-var tbodyRoot = (_props, ...etc) => mx3(...etc);
-var tbodyTr = ({ canBeCurrent, isPinned }, ...etc) => mx3("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer", isPinned && "sticky z-1 block-end-0", isPinned && stickyRowColors, ...etc);
-var tdRoot = ({ border, isGrid, pinned }, ...etc) => mx3("relative", "focus-within:!bg-neutral-50 dark:focus-within:!bg-neutral-900", flushPadding, border && "border-b border-l last:border-r border-neutral-200 dark:border-neutral-700", pinned && "border-t", isGrid && gridCellFocusRing, ...etc);
-
-// packages/ui/react-ui-table/src/deprecated/components/Cell/Cell.tsx
-import { useFocusableGroup } from "@fluentui/react-tabster";
-import React5, { useCallback as useCallback6 } from "react";
-var CELL_NAME = "Cell";
-var FocusableCell = ({ cell, children }) => {
-  const tableContext = useTableContext();
-  const focusableGroupAttrs = useFocusableGroup({
-    tabBehavior: "limited"
-  });
-  const pinned = tableContext.table.getState().rowPinning?.bottom?.includes(cell.row.id);
-  const className = tdRoot({
-    ...tableContext,
-    pinned
-  }, cell.column.columnDef.meta?.cell?.classNames);
-  const handleKeyDown = useCallback6(({ key, currentTarget }) => {
-    if (key !== "Enter") {
-      return;
-    }
-    const currentRow2 = currentTarget.closest("tr");
-    if (!currentRow2) {
-      return;
-    }
-    const cellIndex = Array.from(currentRow2.cells || []).indexOf(currentTarget);
-    const nextSibling = currentRow2.nextElementSibling;
-    if (!(nextSibling instanceof HTMLTableRowElement)) {
-      let depth = 0;
-      const pollForNewRow = () => {
-        const newNextSibling = currentRow2.nextElementSibling;
-        if (newNextSibling instanceof HTMLTableRowElement) {
-          const nextCell = newNextSibling.cells[cellIndex];
-          const input = nextCell.querySelector("input");
-          if (input) {
-            input.focus();
-          }
-          currentRow2.scrollIntoView({
-            behavior: "smooth",
-            block: "center"
-          });
-        } else if (depth++ < 100) {
-          requestAnimationFrame(pollForNewRow);
-        }
-      };
-      requestAnimationFrame(pollForNewRow);
-    }
-  }, []);
-  return /* @__PURE__ */ React5.createElement("td", {
-    "data-testid": "table.cell",
-    tabIndex: 0,
-    ...focusableGroupAttrs,
-    className,
-    onKeyDown: handleKeyDown
-  }, children);
-};
-var StaticCell = ({ cell, children }) => {
-  const tableContext = useTableContext();
-  return /* @__PURE__ */ React5.createElement("td", {
-    "data-testid": "table.cell",
-    className: tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)
-  }, children);
-};
-var Cell = ({ cell, children }) => {
-  const { isGrid } = useTableContext();
-  const Root = isGrid ? FocusableCell : StaticCell;
-  return /* @__PURE__ */ React5.createElement(Root, {
-    cell
-  }, children);
-};
-Cell.displayName = CELL_NAME;
-
-// packages/ui/react-ui-table/src/deprecated/components/Table/TableBody.tsx
-var TABLE_BODY_NAME = "TableBody";
-var TableBody = ({ rows }) => {
-  const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } = useTableContext();
-  const rowSelection = table.getState().rowSelection;
-  const arrowNavigationAttrs = useArrowNavigationGroup({
-    axis: "grid"
-  });
-  const canBeCurrent = !isGrid && !!onDatumClick;
-  const { virtualizer } = useContext2(TableRootContext);
-  return /* @__PURE__ */ React6.createElement("tbody", isGrid && arrowNavigationAttrs, 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__ */ React6.createElement("tr", {
-      key: keyAccessor ? keyAccessor(row.original) : row.id,
-      className: classNames,
-      "data-index": row.index,
-      "data-testid": "table.data-row",
-      ref: virtualizer.measureElement,
-      ...isCurrent && {
-        "aria-current": "location"
-      },
-      ...isSelected && {
-        "aria-selected": "true"
-      },
-      ...canBeCurrent && {
-        tabIndex: 0,
-        onClick: () => {
-          onDatumClick(row.original);
-        },
-        onKeyUp: ({ key }) => {
-          if (key === "Enter" || key === " ") {
-            onDatumClick(row.original);
-          }
-        }
-      }
-    }, debug && /* @__PURE__ */ React6.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
-      return /* @__PURE__ */ React6.createElement(Cell, {
-        key: cell.id,
-        cell
-      }, flexRender(cell.column.columnDef.cell, {
-        ...cell.getContext()
-      }));
-    }), expand && /* @__PURE__ */ React6.createElement("td", null));
-  }));
-};
-TableBody.displayName = TABLE_BODY_NAME;
-
-// packages/ui/react-ui-table/src/deprecated/components/Table/TableHead.tsx
-import { flexRender as flexRender2 } from "@tanstack/react-table";
-import React7 from "react";
-import { defaultSizeCol } from "@dxos/react-ui-grid";
-var TABLE_HEAD_NAME = "TableHeader";
-var TableHead = (_props) => {
-  const tableContext = useTableContext();
-  const headerGroups = tableContext.table.getHeaderGroups();
-  return /* @__PURE__ */ React7.createElement("thead", {
-    className: theadRoot(tableContext)
-  }, headerGroups.map((headerGroup) => {
-    return (
-      // Group element to hover resize handles.
-      /* @__PURE__ */ React7.createElement("tr", {
-        key: headerGroup.id,
-        className: theadTr(tableContext)
-      }, tableContext.debug && /* @__PURE__ */ React7.createElement("th", {
-        className: "font-mono",
-        style: {
-          width: defaultSizeCol
-        }
-      }, "#"), headerGroup.headers.map((header) => {
-        const isResizing = header.column.getIsResizing();
-        const onResize = header.getResizeHandler();
-        const resizable = header.column.columnDef.meta?.resizable;
-        return /* @__PURE__ */ React7.createElement("th", {
-          key: header.id,
-          style: {
-            width: header.getSize()
-          },
-          className: theadTh(tableContext, header.column.columnDef.meta?.header?.classNames),
-          "data-testid": "table.header-cell"
-        }, !header || header.isPlaceholder ? null : flexRender2(header.column.columnDef.header, header.getContext()), resizable && /* @__PURE__ */ React7.createElement("div", {
-          className: theadResizeRoot({
-            isResizing
-          }),
-          onDoubleClick: header.column.resetSize,
-          onMouseDown: onResize,
-          onTouchStart: onResize
-        }));
-      }), tableContext.expand && /* @__PURE__ */ React7.createElement("th", null))
-    );
-  }));
-};
-TableHead.displayName = TABLE_HEAD_NAME;
-
-// packages/ui/react-ui-table/src/deprecated/components/Table/Table.tsx
-var TableRoot = ({ children }) => {
-  const contextValue = useTableRootContext();
-  return /* @__PURE__ */ React8.createElement(TableRootContext.Provider, {
-    value: contextValue
-  }, children);
-};
-var TableViewport = ({ children, classNames, asChild, ...props }) => {
-  const { scrollContextRef } = useContext3(TableRootContext);
-  const classes = mx4(classNames, "overflow-auto");
-  return asChild ? /* @__PURE__ */ React8.createElement(Slot, {
-    ref: scrollContextRef,
-    className: classes,
-    ...props
-  }, children) : /* @__PURE__ */ React8.createElement("div", {
-    role: "none",
-    className: classes,
-    ref: scrollContextRef,
-    ...props
-  }, children);
-};
-var TablePrimitive = (props) => {
-  const { role, header = true, rowsSelectable, debug, pinLastRow, columnVisibility, onColumnResize, onDataSelectionChange } = props;
-  const columns = useDefaultValue(props.columns, () => []);
-  const incomingData = useDefaultValue(props.data, () => []);
-  const [data, setData] = useState8([
-    ...incomingData
-  ]);
-  const forceUpdate = useCallback7(() => setData([
-    ...incomingData
-  ]), [
-    incomingData
-  ]);
-  useEffect3(() => forceUpdate(), [
-    JSON.stringify(incomingData),
-    forceUpdate
-  ]);
-  const TableProvider2 = TableProvider;
-  const { columnSizing, setColumnSizing, columnSizingInfo, setColumnSizingInfo } = useColumnResizing({
-    columns,
-    onColumnResize
-  });
-  const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
-  const [grouping, handleGroupingChange] = useState8(props.grouping ?? []);
-  useEffect3(() => handleGroupingChange(props.grouping ?? []), [
-    handleGroupingChange,
-    props.grouping
-  ]);
-  const columnSorting = useColumnSorting();
-  const table = useReactTable({
-    // Data
-    meta: {},
-    data,
-    // Columns
-    columns,
-    defaultColumn: {
-      size: 400,
-      maxSize: 1024
-    },
-    // State
-    state: {
-      columnVisibility,
-      columnSizing,
-      columnSizingInfo,
-      sorting: columnSorting.sorting,
-      rowSelection,
-      grouping
-    },
-    // Resize columns
-    columnResizeMode: "onChange",
-    enableColumnResizing: true,
-    onColumnSizingChange: setColumnSizing,
-    onColumnSizingInfoChange: setColumnSizingInfo,
-    // Rows
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    // Grouping
-    getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : void 0,
-    onGroupingChange: handleGroupingChange,
-    enableMultiRowSelection: rowsSelectable === "multi" ? true : void 0,
-    enableRowSelection: rowsSelectable === true ? true : void 0,
-    onRowSelectionChange: handleRowSelectionChange,
-    enableSorting: true,
-    enableColumnPinning: true,
-    // Debug
-    debugTable: debug
-  });
-  useEffect3(() => {
-    onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
-  }, [
-    onDataSelectionChange,
-    rowSelection,
-    table
-  ]);
-  usePinLastRow(pinLastRow, table, data);
-  const expand = false;
-  return /* @__PURE__ */ React8.createElement(TableProvider2, {
-    ...props,
-    ...columnSorting,
-    table,
-    header,
-    expand,
-    isGrid: role === "grid" || role === "treegrid"
-  }, /* @__PURE__ */ React8.createElement(TableImpl, {
-    debug: false,
-    ...props
-  }));
-};
-var TableImpl = (props) => {
-  const { debug, classNames, role, grouping, fullWidth } = props;
-  const { table } = useTableContext();
-  if (debug) {
-    return /* @__PURE__ */ React8.createElement("pre", {
-      className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
-    }, /* @__PURE__ */ React8.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
-  }
-  const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
-  const TableComponent = isResizingColumn ? MemoizedVirtualizedTableContent : VirtualizedTableContent;
-  return /* @__PURE__ */ React8.createElement("table", {
-    role,
-    className: tableRoot(props, classNames),
-    style: {
-      // borderCollapse: 'separate',
-      borderSpacing: 0,
-      ...!fullWidth && {
-        width: table.getTotalSize()
-      }
-    }
-  }, /* @__PURE__ */ React8.createElement(TableHead, null), grouping?.length !== 0 ? /* @__PURE__ */ React8.createElement(TableComponent, null) : /* @__PURE__ */ React8.createElement(GroupedTableContent, null));
-};
-var VirtualizedTableContent = () => {
-  const { table } = useTableContext();
-  const { virtualizer, dispatch } = useContext3(TableRootContext);
-  const centerRows = table.getCenterRows();
-  let pinnedRows = [];
-  useEffect3(() => {
-    dispatch({
-      type: "updateTableCount",
-      count: centerRows.length
-    });
-  }, [
-    centerRows.length
-  ]);
-  try {
-    pinnedRows = table.getBottomRows();
-  } catch (_) {
-  }
-  const { getTotalSize, getVirtualItems } = virtualizer;
-  const virtualRows = getVirtualItems();
-  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
-  ].filter((r) => !!r);
-  return /* @__PURE__ */ React8.createElement(Fragment, null, paddingTop > 0 && /* @__PURE__ */ React8.createElement("tbody", {
-    role: "none"
-  }, /* @__PURE__ */ React8.createElement("tr", {
-    role: "none"
-  }, /* @__PURE__ */ React8.createElement("td", {
-    style: {
-      height: `${paddingTop}px`
-    },
-    role: "none"
-  }))), /* @__PURE__ */ React8.createElement(TableBody, {
-    rows: rowsToRender
-  }), paddingBottom > 0 && /* @__PURE__ */ React8.createElement("tbody", {
-    role: "none"
-  }, /* @__PURE__ */ React8.createElement("tr", {
-    role: "none"
-  }, /* @__PURE__ */ React8.createElement("td", {
-    style: {
-      height: `${paddingBottom}px`
-    },
-    role: "none"
-  }))));
-};
-var MemoizedVirtualizedTableContent = /* @__PURE__ */ memo(VirtualizedTableContent);
-var GroupedTableContent = () => {
-  const { table: { getGroupedRowModel: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext();
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
-    return /* @__PURE__ */ React8.createElement(Fragment, {
-      key: i
-    }, /* @__PURE__ */ React8.createElement("thead", null, /* @__PURE__ */ React8.createElement("tr", null, debug && /* @__PURE__ */ React8.createElement("th", null), /* @__PURE__ */ React8.createElement("th", {
-      // TODO(burdon): Calculate row span.
-      colSpan: getHeaderGroups()[0].headers.length,
-      className: groupTh({})
-    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React8.createElement(TableBody, {
-      rows: row.subRows
-    }));
-  }));
-};
-var Table = {
-  Root: TableRoot,
-  Viewport: TableViewport,
-  Main: TablePrimitive
-};
-
-// packages/ui/react-ui-table/src/deprecated/helpers.tsx
-import { useFocusFinders } from "@fluentui/react-tabster";
-import { Check, ClipboardText, X as X2 } from "@phosphor-icons/react";
-import { createColumnHelper } from "@tanstack/react-table";
-import { format } from "date-fns/format";
-import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import React9, { useCallback as useCallback8, useEffect as useEffect4, useRef as useRef4, useState as useState9 } from "react";
-import { log } from "@dxos/log";
-import { Input as Input2, Tooltip } from "@dxos/react-ui";
-import { defaultSizeRow } from "@dxos/react-ui-grid";
-import { getSize as getSize3, mx as mx5 } from "@dxos/react-ui-theme";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/deprecated/helpers.tsx";
-var createColumnBuilder = () => ({
-  helper: createColumnHelper(),
-  builder: new ColumnBuilder()
-});
-var ComboboxBuilderCell = (cellContext) => {
-  const { model, onUpdate } = cellContext.column.columnDef.meta;
-  return model ? /* @__PURE__ */ React9.createElement(CellCombobox, {
-    model,
-    value: cellContext.getValue(),
-    onValueChange: (value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)
-  }) : null;
-};
-var StringBuilderCell = (cellContext) => {
-  const ref = useRef4(null);
-  const { findPrevFocusable } = useFocusFinders();
-  const { onUpdate, cell } = cellContext.column.columnDef.meta;
-  const initialValue = cellContext.getValue();
-  const getInitialValue = useCallback8(() => {
-    return initialValue?.content ?? initialValue;
-  }, [
-    initialValue
-  ]);
-  const [value, setValue] = useState9(getInitialValue);
-  useEffect4(() => setValue(getInitialValue()), [
-    getInitialValue
-  ]);
-  const handleSave = () => {
-    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
-    if (value !== initialValue) {
-      onUpdate?.(cellContext.row.original, cellContext.column.id, value);
-    }
-  };
-  const handleCancel = () => setValue(initialValue);
-  let placeholder = false;
-  const columns = cellContext.table.getVisibleFlatColumns();
-  if (columns[0].id === cellContext.column.id) {
-    const rowCount = cellContext.table.getRowModel().rows.length;
-    placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
-  }
-  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.TextInput, {
-    ref,
-    variant: "subdued",
-    placeholder: placeholder ? "Add row..." : void 0,
-    classNames: [
-      "is-full",
-      textPadding,
-      cell?.classNames
-    ],
-    value: value ?? "",
-    onBlur: handleSave,
-    onChange: (event) => setValue(event.target.value),
-    onKeyDown: (event) => event.key === "Enter" && handleSave() || event.key === "Escape" && handleCancel(),
-    autoComplete: "off"
-  }));
-};
-var parseNumber = (text) => text?.trim().length ? Number(text) : NaN;
-var displayNumber = (value, digits) => value || value === 0 ? value.toLocaleString(void 0, {
-  minimumFractionDigits: digits ?? 0,
-  maximumFractionDigits: digits ?? 2
-}) : "";
-var NumberBuilderCell = (cellContext) => {
-  const { onUpdate, digits } = cellContext.column.columnDef.meta;
-  const value = cellContext.getValue();
-  const [text, setText] = useState9(displayNumber(value, digits));
-  const { findPrevFocusable } = useFocusFinders();
-  const ref = useRef4(null);
-  useEffect4(() => {
-    (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
-  }, [
-    digits,
-    value
-  ]);
-  const handleEdit = () => setText(value !== void 0 ? String(value) : "");
-  const handleSave = () => {
-    const nextValue = parseNumber(text);
-    if (!isNaN(nextValue)) {
-      onUpdate?.(cellContext.row.original, cellContext.column.id, nextValue);
-      setText(displayNumber(nextValue, digits));
-    } else {
-      setText(displayNumber(value, digits));
-    }
-    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
-  };
-  const _handleCancel = () => {
-    setText(displayNumber(value, digits));
-    ref.current && findPrevFocusable(ref.current)?.focus();
-  };
-  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.TextInput, {
-    ref,
-    variant: "subdued",
-    value: text,
-    classNames: [
-      "is-full text-end font-mono",
-      textPadding
-    ],
-    onBlur: handleSave,
-    onFocus: handleEdit,
-    onChange: ({ target: { value: value2 } }) => setText(value2),
-    onKeyDown: (event) => {
-      return (
-        /* (event.key === 'Escape' && handleCancel()) || */
-        event.key === "Enter" && handleSave()
-      );
-    },
-    autoComplete: "off"
-  }));
-};
-var RowSelectorBuilderCell = (cellContext) => {
-  const { cell } = cellContext.column.columnDef.meta;
-  const { row } = cellContext;
-  const checked = row.getCanSelect() ? row.getIsSelected() : row.getCanSelectSubRows() && (row.getIsSomeSelected() ? "indeterminate" : row.getIsAllSubRowsSelected());
-  return /* @__PURE__ */ React9.createElement("div", {
-    className: "flex justify-center w-full h-full",
-    role: "presentation"
-  }, /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Checkbox, {
-    size: 4,
-    classNames: [
-      cell?.classNames
-    ],
-    checked,
-    onCheckedChange: (event) => {
-      if (row.getCanSelect()) {
-        row.getToggleSelectedHandler()(event);
-      }
-    },
-    disabled: !(row.getCanSelect() || row.getCanSelectSubRows())
-  })));
-};
-var SwitchBuilderCell = (cellContext) => {
-  const { onUpdate } = cellContext.column.columnDef.meta;
-  const value = cellContext.getValue();
-  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Switch, {
-    classNames: "block mli-auto",
-    onClick: (event) => event.stopPropagation(),
-    disabled: !onUpdate,
-    checked: !!value,
-    onCheckedChange: (value2) => {
-      onUpdate?.(cellContext.row.original, cellContext.column.id, !!value2);
-    }
-  }));
-};
-var ColumnBuilder = class {
-  /**
-  * Combobox value
-  */
-  combobox({ label, classNames, model, onUpdate, ...props }) {
-    return {
-      minSize: 100,
-      header: (column) => {
-        return label ?? column.header.id;
-      },
-      cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
-        const cellValue = cellContext.getValue();
-        return /* @__PURE__ */ React9.createElement("div", {
-          className: mx5("truncate", classNames)
-        }, cellValue ? model?.getText(cellValue) : "");
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        model,
-        onUpdate,
-        cell: {
-          classNames,
-          ...props.meta?.cell
-        }
-      }
-    };
-  }
-  /**
-  * String formats.
-  */
-  string({ label, classNames, onUpdate, ...props } = {}) {
-    return {
-      minSize: 100,
-      // TODO(burdon): Default.
-      header: (column) => {
-        return label ?? column.header.id;
-      },
-      cell: onUpdate ? StringBuilderCell : (cell) => {
-        let value = cell.getValue();
-        if (typeof value === "object" && value?.type === "dxos.Text.v0") {
-          value = value.content;
-        }
-        return /* @__PURE__ */ React9.createElement("div", {
-          className: mx5("truncate", textPadding, classNames)
-        }, value);
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        cell: {
-          ...props.meta?.cell,
-          classNames
-        }
-      }
-    };
-  }
-  /**
-  * Number formats.
-  */
-  number({ label, minSize, classNames, digits, onUpdate, ...props } = {}) {
-    return {
-      size: 100,
-      minSize: 100,
-      header: (cell) => label ?? cell.header.id,
-      cell: NumberBuilderCell,
-      ...props,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        digits,
-        header: {
-          ...props.meta?.header
-        },
-        cell: {
-          ...props.meta?.cell,
-          classNames
-        }
-      }
-    };
-  }
-  /**
-  * Date formats.
-  */
-  // TODO(burdon): Date picker (pluggable renderers?)
-  date({ label, format: formatSpec, relative, classNames, ...props } = {}) {
-    return {
-      size: 220,
-      minSize: 100,
-      header: (cell) => label ?? cell.header.id,
-      cell: (cell) => {
-        const value = cell.getValue();
-        try {
-          const str = value ? formatSpec ? format(value, formatSpec) : relative ? formatDistanceToNow(value, {
-            addSuffix: true
-          }) : value.toISOString() : void 0;
-          return /* @__PURE__ */ React9.createElement("div", {
-            className: mx5(textPadding, classNames)
-          }, str);
-        } catch (err) {
-          log.info("formatError", {
-            value
-          }, {
-            F: __dxlog_file,
-            L: 378,
-            S: this,
-            C: (f, a) => f(...a)
-          });
-          return null;
-        }
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames
-        }
-      }
-    };
-  }
-  /**
-  * PublicKey with tooltip.
-  */
-  key({ label, tooltip, classNames, ...props } = {}) {
-    return {
-      size: 94,
-      minSize: 94,
-      header: (cell) => label ?? cell.header.id,
-      cell: (cell) => {
-        const value = cell.getValue();
-        if (!value) {
-          return;
-        }
-        const element = value.truncate();
-        if (!tooltip) {
-          return element;
-        }
-        return /* @__PURE__ */ React9.createElement(Tooltip.Provider, null, /* @__PURE__ */ React9.createElement(Tooltip.Root, null, /* @__PURE__ */ React9.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React9.createElement(Tooltip.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip.Content, {
-          side: "right"
-        }, /* @__PURE__ */ React9.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React9.createElement(ClipboardText, {
-          onClick: (ev) => {
-            ev.stopPropagation();
-            void navigator.clipboard.writeText(value.toHex());
-          }
-        })))));
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames: [
-            "font-mono",
-            textPadding,
-            classNames
-          ]
-        }
-      }
-    };
-  }
-  /**
-  * Row selector
-  */
-  selectRow({ classNames, onUpdate, id = "selectRow" } = {}) {
-    return {
-      id,
-      size: defaultSizeRow,
-      enableResizing: false,
-      meta: {
-        onUpdate,
-        cell: {
-          classNames
-        }
-      },
-      header: ({ table }) => {
-        const { rowsSelectable } = useTableContext();
-        const checked = table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected();
-        return rowsSelectable === "multi" ? /* @__PURE__ */ React9.createElement("div", {
-          className: "flex justify-center w-full h-full",
-          role: "presentation"
-        }, /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Checkbox, {
-          size: 4,
-          classNames: [
-            "mli-auto",
-            classNames
-          ],
-          checked,
-          onCheckedChange: () => table.toggleAllRowsSelected()
-        }))) : null;
-      },
-      cell: RowSelectorBuilderCell
-    };
-  }
-  /**
-  * Switch
-  */
-  switch({ label, classNames, onUpdate, ...props } = {}) {
-    return {
-      size: 50,
-      minSize: 50,
-      header: (column) => label ?? column.header.id,
-      // TODO(zan): Implement sort algorithm.
-      enableSorting: true,
-      cell: SwitchBuilderCell,
-      ...props,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        cell: {
-          ...props.meta?.cell,
-          classNames: [
-            textPadding,
-            classNames
-          ]
-        }
-      }
-    };
-  }
-  /**
-  * Icon based on boolean value.
-  */
-  icon({ label, size, on, off, ...props } = {}) {
-    const IconOn = on?.Icon ?? Check;
-    const IconOff = off?.Icon ?? X2;
-    return {
-      size: size ?? defaultSizeRow,
-      // TODO(zan): Implement sort algorithm.
-      enableSorting: false,
-      header: (column) => /* @__PURE__ */ React9.createElement("div", {
-        className: "justify-center"
-      }, label ?? column.header.id),
-      cell: (cell) => {
-        const value = cell.getValue();
-        if (value) {
-          return /* @__PURE__ */ React9.createElement(IconOn, {
-            className: mx5("block mli-auto", getSize3(6), on?.className ?? "text-green-700")
-          });
-        } else if (value === false) {
-          return /* @__PURE__ */ React9.createElement(IconOff, {
-            className: mx5("block mli-auto", getSize3(6), off?.className ?? "text-red-700")
-          });
-        } else {
-          return null;
-        }
-      },
-      ...props
-    };
-  }
-  /**
-  * This display column type is for nested/unhandled data to appear as JSON.
-  */
-  json({ label, classNames, ...props } = {}) {
-    return {
-      size: 120,
-      minSize: 120,
-      header: (cell) => label ?? cell.header.id,
-      cell: (cell) => {
-        const value = cell.getValue();
-        return /* @__PURE__ */ React9.createElement("div", {
-          className: "overflow-scroll"
-        }, /* @__PURE__ */ React9.createElement("code", {
-          className: "text-xs"
-        }, JSON.stringify(value)));
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames: [
-            "font-mono",
-            textPadding,
-            classNames
-          ]
-        }
-      }
-    };
-  }
-};
-
-// packages/ui/react-ui-table/src/deprecated/schema/column-utils.ts
-import { TypeEnum } from "@dxos/echo-schema";
-import { FormatEnum } from "@dxos/echo-schema";
-import { mapSchemaToFields } from "@dxos/schema";
-var schemaToColumnDefs = (schema) => {
-  const { helper, builder } = createColumnBuilder();
-  return mapSchemaToFields(schema).map(({ property, type, format: format2 }) => {
-    const propertyKey = property.toString();
-    if (!format2) {
-      switch (type) {
-        case TypeEnum.String: {
-          return helper.accessor(propertyKey, builder.string({
-            label: propertyKey,
-            classNames: [
-              property === "id" && "font-mono"
-            ]
-          }));
-        }
-        case TypeEnum.Number: {
-          return helper.accessor(propertyKey, builder.number({
-            label: propertyKey
-          }));
-        }
-        case TypeEnum.Boolean: {
-          return helper.accessor(propertyKey, builder.switch({
-            label: propertyKey
-          }));
-        }
-        default: {
-          throw new Error(`Unhandled scalar type: ${type}`);
-        }
-      }
-    }
-    switch (format2) {
-      case FormatEnum.Date: {
-        return helper.accessor(propertyKey, builder.date({
-          label: propertyKey
-        }));
-      }
-      case FormatEnum.JSON: {
-        return helper.accessor(propertyKey, builder.json({
-          label: propertyKey,
-          id: propertyKey
-        }));
-      }
-      default: {
-        throw new Error(`Unhandled format: ${format2}`);
-      }
-    }
-  });
-};
-export {
-  CellCombobox,
-  ColumnBuilder,
-  ColumnMenu,
-  ColumnSettings,
-  MemoizedVirtualizedTableContent,
-  SortIndicator,
-  TABLE_NAME,
-  Table,
-  TablePrimitive,
-  TableProvider,
-  TableRootContext,
-  createColumnBuilder,
-  currentRow,
-  flushPadding,
-  gridCellFocusRing,
-  groupTh,
-  headPadding,
-  schemaToColumnDefs,
-  selectedRow,
-  tableRoot,
-  tbodyRoot,
-  tbodyTr,
-  tdRoot,
-  textPadding,
-  theadResizeRoot,
-  theadRoot,
-  theadTh,
-  theadTr,
-  translations_default as translations,
-  useColumnResizing,
-  useColumnSorting,
-  usePinLastRow,
-  useRowSelection,
-  useSortColumn,
-  useTableContext,
-  useTableRootContext
-};
-//# sourceMappingURL=index.mjs.map