@dxos/react-ui-table 0.6.14-main.f49f251 → 0.6.14-staging.4b6f9cf

package/dist/lib/browser/index.mjs

@@ -1,1480 +1,1401 @@
+import {
+  TableType
+} from "./chunk-A5W4XWPD.mjs";
+
 // packages/ui/react-ui-table/src/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"
+        "object placeholder": "New table",
+        "create object label": "Create table",
+        "table name placeholder": "Table name",
+        "settings title": "Table settings",
+        "table schema label": "Schema",
+        "new schema": "New schema",
+        "continue label": "Continue",
+        "create stack section label": "Create table",
+        "add row": "Add row",
+        "create comment": "Create thread",
+        "column action sort descending": "Sort Descending",
+        "column action sort ascending": "Sort Ascending",
+        "column action clear sorting": "Clear Sorting",
+        "column action settings": "Column Settings",
+        "column action delete": "Delete Column",
+        "delete row label": "Delete row",
+        "bulk delete row label": "Delete selected rows",
+        "column deleted label": "Column deleted",
+        "new column button label": "Create column"
       }
     }
   }
 ];
 
-// packages/ui/react-ui-table/src/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 }) => {
+// packages/ui/react-ui-table/src/components/Table/Table.tsx
+import React5, { forwardRef, useCallback as useCallback3, useImperativeHandle, useState as useState2 } from "react";
+import { getValue } from "@dxos/echo-schema";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { Filter, getSpace as getSpace2, fullyQualifiedId } from "@dxos/react-client/echo";
+import { useAttention } from "@dxos/react-ui-attention";
+import { Grid, closestCell } from "@dxos/react-ui-grid";
+import { StackItem } from "@dxos/react-ui-stack";
+import { mx } from "@dxos/react-ui-theme";
+import { isNotFalsy } from "@dxos/util";
+
+// packages/ui/react-ui-table/src/components/Table/ColumnActionsMenu.tsx
+import React from "react";
+import { DropdownMenu, useTranslation } from "@dxos/react-ui";
+var ColumnActionsMenu = ({ model }) => {
   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)));
+  const state = model?.modalController.state.value;
+  if (!model || state?.type !== "column") {
+    return null;
+  }
+  const currentSort = model.sorting;
+  const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
+  return /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
+    modal: false,
+    open: state?.type === "column",
+    onOpenChange: model.modalController.close
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ React.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => model.setSort(state.fieldId, "desc")
+  }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => model.setSort(state.fieldId, "asc")
+  }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => model.clearSort()
+  }, t("column action clear sorting")), model.getColumnCount() > 1 && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => model.deleteColumn(state.fieldId)
+  }, t("column action delete")), /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
+    onClick: () => model.modalController.openColumnSettings()
+  }, t("column action settings"))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))));
 };
 
-// packages/ui/react-ui-table/src/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/components/ColumnMenu/ColumnSettings.tsx
-import React2, { useRef, useState as useState2 } from "react";
-import { Button, Input, Select, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { FieldValueTypes } from "@dxos/schema";
-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;
+// packages/ui/react-ui-table/src/components/Table/ColumnSettings.tsx
+import React2, { useCallback, useEffect, useMemo, useState } from "react";
+import { getSpace } from "@dxos/react-client/echo";
+import { DropdownMenu as DropdownMenu2 } from "@dxos/react-ui";
+import { FieldEditor } from "@dxos/react-ui-data";
+var ColumnSettings = ({ model }) => {
+  const [newField, setNewField] = useState();
+  const state = model?.modalController.state.value;
+  const space = getSpace(model?.table);
+  useEffect(() => {
+    if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
+      setNewField(model.projection.createFieldProjection());
+    } else {
+      setNewField(void 0);
     }
-    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
-    if (current) {
-      if (current.type !== "ref") {
-        propRef.current?.focus();
-        return;
+  }, [
+    model?.projection,
+    state
+  ]);
+  const existingField = useMemo(() => {
+    if (state?.type === "columnSettings") {
+      const { mode } = state;
+      if (mode.type === "edit") {
+        return model?.table?.view?.fields.find((f) => f.id === mode.fieldId);
       }
     }
-    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, FieldValueTypes.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/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);
+    return void 0;
   }, [
-    columns,
-    setColumnSizing
+    model?.table?.view?.fields,
+    state
   ]);
-  const [columnSizingInfo, setColumnSizingInfo] = useState3({});
-  const notifyColumnResize = useCallback2(() => onColumnResize?.(columnSizing), [
-    onColumnResize,
-    columnSizing
+  const field = existingField ?? newField;
+  const handleClose = useCallback(() => {
+    model?.modalController.close();
+  }, [
+    model?.modalController
   ]);
-  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === "string", false, notifyColumnResize);
-  return {
-    columnSizing,
-    columnSizingInfo,
-    setColumnSizing,
-    setColumnSizingInfo
-  };
+  const handleCancel = useCallback(() => {
+    if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
+      model?.projection?.deleteFieldProjection(newField.id);
+    }
+  }, [
+    model?.projection,
+    state,
+    newField
+  ]);
+  if (!model?.table?.view || !model.projection || !field) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(DropdownMenu2.Root, {
+    modal: false,
+    open: state?.type === "columnSettings"
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu2.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ React2.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu2.Content, {
+    classNames: "md:is-64"
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu2.Viewport, null, /* @__PURE__ */ React2.createElement(FieldEditor, {
+    view: model.table.view,
+    projection: model.projection,
+    field,
+    registry: space?.db.schemaRegistry,
+    onClose: handleClose,
+    onCancel: handleCancel
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu2.Arrow, null))));
 };
 
-// packages/ui/react-ui-table/src/hooks/useColumnSorting.ts
-import { useState as useState4 } from "react";
-
-// packages/ui/react-ui-table/src/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/components/Table/RowActionsMenu.tsx
+import React3 from "react";
+import { DropdownMenu as DropdownMenu3, useTranslation as useTranslation2 } from "@dxos/react-ui";
+var RowActionsMenu = ({ model }) => {
+  const { t } = useTranslation2(translationKey);
+  const state = model.modalController.state.value;
+  const hasSelection = model.selection.hasSelection.value;
+  if (state?.type !== "row") {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(DropdownMenu3.Root, {
+    modal: false,
+    open: true,
+    onOpenChange: model.modalController.close
+  }, /* @__PURE__ */ React3.createElement(DropdownMenu3.VirtualTrigger, {
+    virtualRef: model.modalController.trigger
+  }), /* @__PURE__ */ React3.createElement(DropdownMenu3.Content, null, /* @__PURE__ */ React3.createElement(DropdownMenu3.Viewport, null, /* @__PURE__ */ React3.createElement(DropdownMenu3.Item, {
+    onClick: () => model.deleteRow(state.rowIndex)
+  }, t(hasSelection ? "bulk delete row label" : "delete row label"))), /* @__PURE__ */ React3.createElement(DropdownMenu3.Arrow, null)));
 };
 
-// packages/ui/react-ui-table/src/hooks/useColumnSorting.ts
-var useColumnSorting = () => {
-  const [columnSorting, setColumnSorting] = useState4([]);
-  const sortColumn = (columnId, sortDirection) => {
-    setColumnSorting([
-      {
-        id: columnId,
-        desc: sortDirection === "desc"
+// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
+import React4, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import { FormatEnum as FormatEnum2 } from "@dxos/echo-schema";
+import { invariant } from "@dxos/invariant";
+import { editorKeys, GridCellEditor, useGridContext } from "@dxos/react-ui-grid";
+
+// packages/ui/react-ui-table/src/components/TableCellEditor/extension.ts
+import { autocompletion, pickedCompletion } from "@codemirror/autocomplete";
+import { EditorView } from "@codemirror/view";
+var completion = ({ onQuery, onMatch }) => {
+  return [
+    EditorView.theme({
+      ".cm-completionDialog": {
+        width: "var(--dx-gridCellWidth)"
       }
-    ]);
-  };
-  const clearColumnSorting = () => {
-    setColumnSorting([]);
-  };
-  return {
-    sorting: columnSorting,
-    sortColumn,
-    clearColumnSorting
-  };
+    }),
+    autocompletion({
+      icons: false,
+      activateOnTyping: true,
+      override: [
+        async (context) => {
+          const text = context.state.doc.toString();
+          return {
+            from: 0,
+            options: await onQuery(text)
+          };
+        }
+      ],
+      // TODO(burdon): Consts from grid (to line-up with grid).
+      tooltipClass: () => "cm-completionDialog !mt-[8px] !-ml-[4px] [&>ul]:!max-h-[264px]",
+      optionClass: () => "flex h-[33px] items-center"
+    }),
+    // Check for accepted completion metadata in the transaction.
+    EditorView.updateListener.of((update) => {
+      update.transactions.forEach((tr) => {
+        const completion2 = tr.annotation(pickedCompletion);
+        if (completion2) {
+          onMatch(completion2.data);
+        }
+      });
+    })
+  ];
 };
-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();
-  };
+
+// packages/ui/react-ui-table/src/util/grid.ts
+var fromGridCell = ({ col, row }) => {
+  return `${col},${row}`;
+};
+var toGridCell = (cell) => {
+  const [col, row] = cell.split(",").map(Number);
   return {
-    canSort,
-    sortDirection,
-    onSelectSort,
-    onToggleSort,
-    onClearSort
+    row,
+    col
   };
 };
 
-// packages/ui/react-ui-table/src/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);
-  }, [
+// packages/ui/react-ui-table/src/util/signals.ts
+var touch = (value) => value;
+
+// packages/ui/react-ui-table/src/util/table.ts
+import { AST, Format, FormatEnum, S, TypedObject, TypeEnum } from "@dxos/echo-schema";
+import { log } from "@dxos/log";
+import { PublicKey } from "@dxos/react-client";
+import { create } from "@dxos/react-client/echo";
+import { createFieldId, createView, ViewProjection } from "@dxos/schema";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/util/table.ts";
+var initializeTable = ({ space, table }) => {
+  log.info("initializeTable", {
     table
-  ]);
-  const pinLastRowCallback = useCallback3(() => {
-    const rows = table.getRowModel().rows;
-    if (rows.length === 0) {
-      return clearRowPinning();
+  }, {
+    F: __dxlog_file,
+    L: 26,
+    S: void 0,
+    C: (f, a) => f(...a)
+  });
+  const ContactSchema = TypedObject({
+    typename: `example.com/type/${PublicKey.random().truncate()}`,
+    version: "0.1.0"
+  })({
+    name: S.optional(S.String).annotations({
+      [AST.TitleAnnotationId]: "Name"
+    }),
+    email: S.optional(Format.Email),
+    salary: S.optional(Format.Currency()).annotations({
+      [AST.TitleAnnotationId]: "Salary"
+    })
+  });
+  const contactSchema = space.db.schemaRegistry.addSchema(ContactSchema);
+  table.view = createView({
+    name: "Test",
+    typename: contactSchema.typename,
+    jsonSchema: contactSchema.jsonSchema,
+    fields: [
+      "name",
+      "email",
+      "salary"
+    ]
+  });
+  const projection = new ViewProjection(contactSchema, table.view);
+  projection.setFieldProjection({
+    field: {
+      id: table.view.fields[2].id,
+      path: "salary",
+      size: 150
+    }
+  });
+  projection.setFieldProjection({
+    field: {
+      id: createFieldId(),
+      path: "manager",
+      referencePath: "name"
+    },
+    props: {
+      property: "manager",
+      type: TypeEnum.Ref,
+      format: FormatEnum.Ref,
+      referenceSchema: contactSchema.typename,
+      title: "Manager"
     }
-    const lastRow = rows[rows.length - 1];
-    if (lastRow.id === pinnedRowKey) {
+  });
+  space.db.add(create(contactSchema, {}));
+  return contactSchema;
+};
+
+// packages/ui/react-ui-table/src/util/table-buttons.ts
+var TABLE_ATTRS = {
+  columnSettings: "data-table-column-settings-button",
+  rowMenu: "data-table-row-menu-button",
+  newColumn: "data-table-new-column-button"
+};
+var ICONS = {
+  columnSettings: "ph--caret-down--regular",
+  rowMenu: "ph--dots-three--regular",
+  newColumn: "ph--plus--regular"
+};
+var createButtonHtml = ({ button, value = "", disabled = false }) => {
+  const buttonClasses = "ch-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 inline-end-2";
+  return `<button class="${buttonClasses}" ${TABLE_ATTRS[button]}="${value}" ${disabled ? "disabled" : ""}><svg><use href="/icons.svg#${ICONS[button]}"/></svg></button>`;
+};
+var tableButtons = {
+  columnSettings: {
+    attr: TABLE_ATTRS.columnSettings,
+    icon: ICONS.columnSettings,
+    render: ({ fieldId }) => createButtonHtml({
+      button: "columnSettings",
+      value: fieldId
+    })
+  },
+  rowMenu: {
+    attr: TABLE_ATTRS.rowMenu,
+    icon: ICONS.rowMenu,
+    render: ({ rowIndex }) => createButtonHtml({
+      button: "rowMenu",
+      value: rowIndex.toString()
+    })
+  },
+  addColumn: {
+    attr: TABLE_ATTRS.newColumn,
+    icon: ICONS.newColumn,
+    render: ({ disabled } = {}) => createButtonHtml({
+      button: "newColumn",
+      disabled
+    })
+  }
+};
+
+// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+var TableCellEditor = ({ model, onEnter, onFocus, onQuery, __gridScope }) => {
+  const { editing } = useGridContext("TableCellEditor", __gridScope);
+  const fieldProjection = useMemo2(() => {
+    if (!model || !editing) {
       return;
     }
-    pinRow(lastRow);
+    const { col } = toGridCell(editing.index);
+    const field = model.projection.view.fields[col];
+    const fieldProjection2 = model.projection.getFieldProjection(field.id);
+    invariant(fieldProjection2, void 0, {
+      F: __dxlog_file2,
+      L: 49,
+      S: void 0,
+      A: [
+        "fieldProjection",
+        ""
+      ]
+    });
+    return fieldProjection2;
   }, [
-    table,
-    pinnedRowKey
+    model,
+    editing
   ]);
-  useEffect2(() => {
-    if (pinLastRow) {
-      pinLastRowCallback();
+  const handleClose = useCallback2((value, event) => {
+    if (!model || !editing || !fieldProjection) {
+      return;
+    }
+    const cell = toGridCell(editing.index);
+    onEnter?.(cell);
+    if (event && onFocus) {
+      onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
     }
   }, [
-    data,
-    pinLastRow,
-    pinLastRowCallback
+    model,
+    editing,
+    onFocus,
+    onEnter,
+    fieldProjection,
+    determineNavigationAxis,
+    determineNavigationDelta
   ]);
-};
-
-// packages/ui/react-ui-table/src/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({});
+  const handleBlur = useCallback2((value) => {
+    if (!model || !editing) {
+      return;
+    }
+    const cell = toGridCell(editing.index);
+    if (value !== void 0) {
+      model.setCellData(cell, value);
     }
   }, [
-    props.rowsSelectable,
-    setRowSelection,
-    rowSelection
+    model,
+    editing
   ]);
-  return {
-    rowSelection,
-    handleRowSelectionChange
-  };
-};
-
-// packages/ui/react-ui-table/src/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);
+  const extension = useMemo2(() => {
+    if (!fieldProjection) {
+      return [];
+    }
+    const extension2 = [
+      editorKeys({
+        onClose: handleClose,
+        ...editing?.initialContent && {
+          onNav: handleClose
+        }
+      })
+    ];
+    if (onQuery) {
+      switch (fieldProjection.props.format) {
+        case FormatEnum2.Ref: {
+          extension2.push([
+            completion({
+              onQuery: (text) => onQuery(fieldProjection, text),
+              onMatch: (data) => {
+                if (model && editing) {
+                  const cell = toGridCell(editing.index);
+                  model.setCellData(cell, data);
+                  onEnter?.(cell);
+                  onFocus?.();
+                }
+              }
+            })
+          ]);
+          break;
+        }
+      }
+    }
+    return extension2;
   }, [
-    shouldPreventFocusOnClose,
-    setIsColumnSettingsOpen
+    model,
+    editing,
+    fieldProjection,
+    handleClose
   ]);
-  const onDropdownCloseAutoFocus = useCallback5((event) => {
-    if (shouldPreventFocusOnClose.current) {
-      event.preventDefault();
-      shouldPreventFocusOnClose.current = false;
+  const getCellContent = useCallback2(() => {
+    if (model && editing) {
+      const value = model.getCellData(toGridCell(editing.index));
+      return value !== void 0 ? String(value) : "";
     }
   }, [
-    shouldPreventFocusOnClose
+    model,
+    editing
   ]);
-  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))))));
+  return /* @__PURE__ */ React4.createElement(GridCellEditor, {
+    extension,
+    getCellContent,
+    onBlur: handleBlur
+  });
 };
-var SortIndicator = ({ direction, onClick }) => {
-  if (direction === void 0) {
-    return null;
+var determineNavigationAxis = ({ key }) => {
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowDown":
+    case "Enter": {
+      return "row";
+    }
+    case "ArrowLeft":
+    case "ArrowRight":
+    case "Tab":
+      return "col";
   }
-  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;
+};
+var determineNavigationDelta = ({ key, shift }) => {
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowLeft":
+      return -1;
+    case "ArrowDown":
+    case "ArrowRight":
+      return 1;
   }
-  return /* @__PURE__ */ React4.createElement("div", {
-    onClick,
-    className: "flex items-center cursor-pointer"
-  }, icon);
+  return shift ? -1 : 1;
 };
 
 // packages/ui/react-ui-table/src/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/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/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/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/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 domAttributes = 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,
-    ...domAttributes,
-    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 __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+var inlineEndLine = "[&>.dx-grid]:relative [&>.dx-grid]:after:absolute [&>.dx-grid]:after:inset-block-0 [&>.dx-grid]:after:-inline-end-px [&>.dx-grid]:after:is-px [&>.dx-grid]:after:bg-separator";
+var blockEndLine = "[&>.dx-grid]:before:absolute [&>.dx-grid]:before:inset-inline-0 [&>.dx-grid]:before:-block-end-px [&>.dx-grid]:before:bs-px [&>.dx-grid]:before:bg-separator";
+var frozen = {
+  frozenRowsStart: 1,
+  frozenColsStart: 1,
+  frozenColsEnd: 1
 };
-var Cell = ({ cell, children }) => {
-  const { isGrid } = useTableContext();
-  const Root = isGrid ? FocusableCell : StaticCell;
-  return /* @__PURE__ */ React5.createElement(Root, {
-    cell
+var TableRoot = ({ children }) => {
+  return /* @__PURE__ */ React5.createElement(StackItem.Content, {
+    toolbar: true,
+    contentSize: "intrinsic",
+    classNames: "relative"
   }, children);
 };
-Cell.displayName = CELL_NAME;
-
-// packages/ui/react-ui-table/src/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 domAttributes = useArrowNavigationGroup({
-    axis: "grid"
-  });
-  const canBeCurrent = !isGrid && !!onDatumClick;
-  const { virtualizer } = useContext2(TableRootContext);
-  return /* @__PURE__ */ React6.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__ */ 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);
-          }
+var TableMain = /* @__PURE__ */ forwardRef(({ model }, forwardedRef) => {
+  const [dxGrid, setDxGrid] = useState2(null);
+  const { hasAttention } = useAttention(model?.table ? fullyQualifiedId(model.table) : "table");
+  useImperativeHandle(forwardedRef, () => {
+    if (!model || !dxGrid) {
+      return {};
+    }
+    dxGrid.getCells = model.getCells.bind(model);
+    return {
+      update: (cell) => {
+        if (cell) {
+          dxGrid.updateIfWithinBounds(cell);
+        } else {
+          dxGrid.updateCells(true);
         }
       }
-    }, 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/components/Table/TableHead.tsx
-import { flexRender as flexRender2 } from "@tanstack/react-table";
-import React7 from "react";
-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: 32
-        }
-      }, "#"), 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/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
+    };
+  }, [
+    model,
+    dxGrid
   ]);
-  const forceUpdate = useCallback7(() => setData([
-    ...incomingData
-  ]), [
-    incomingData
+  const handleFocus = (increment, delta) => {
+    dxGrid?.refocus(increment, delta);
+  };
+  const handleEnter = useCallback3((cell) => {
+    if (model && cell.row === model.getRowCount() - 1) {
+      model.insertRow(cell.row);
+    }
+  }, [
+    model
   ]);
-  useEffect3(() => forceUpdate(), [
-    JSON.stringify(incomingData),
-    forceUpdate
+  const handleKeyDown = useCallback3((event) => {
+    const cell = closestCell(event.target);
+    if (!model || !cell) {
+      return;
+    }
+    switch (event.key) {
+      case "Backspace":
+      case "Delete": {
+        model.setCellData(cell, void 0);
+        break;
+      }
+    }
+  }, [
+    model
   ]);
-  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 handleAxisResize = useCallback3((event) => {
+    if (event.axis === "col") {
+      const columnIndex = parseInt(event.index, 10);
+      model?.setColumnWidth(columnIndex, event.size);
+    }
+  }, [
+    model
   ]);
-  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));
+  const handleWheel = useCallback3((event) => {
+    if (!hasAttention) {
+      event.stopPropagation();
+    }
   }, [
-    onDataSelectionChange,
-    rowSelection,
-    table
+    hasAttention
   ]);
-  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()
+  const handleQuery = useCallback3(async ({ field, props }, _text) => {
+    if (model && props.referenceSchema && field.referencePath) {
+      const space = getSpace2(model.table);
+      invariant2(space, void 0, {
+        F: __dxlog_file3,
+        L: 150,
+        S: void 0,
+        A: [
+          "space",
+          ""
+        ]
+      });
+      const schema = space.db.schemaRegistry.getSchema(props.referenceSchema);
+      if (schema) {
+        const { objects } = await space.db.query(Filter.schema(schema)).run();
+        return objects.map((obj) => {
+          const value = getValue(obj, field.referencePath);
+          if (!value || typeof value !== "string") {
+            return void 0;
+          }
+          return {
+            label: value,
+            data: obj
+          };
+        }).filter(isNotFalsy);
       }
     }
-  }, /* @__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
-    });
+    return [];
   }, [
-    centerRows.length
+    model
   ]);
-  try {
-    pinnedRows = table.getBottomRows();
-  } catch (_) {
+  if (!model) {
+    return /* @__PURE__ */ React5.createElement("span", {
+      role: "none",
+      className: "attention-surface"
+    });
   }
-  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
-    }));
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Grid.Root, {
+    id: model.table.id ?? "table-grid"
+  }, /* @__PURE__ */ React5.createElement(TableCellEditor, {
+    model,
+    onEnter: handleEnter,
+    onFocus: handleFocus,
+    onQuery: handleQuery
+  }), /* @__PURE__ */ React5.createElement(Grid.Content, {
+    onWheelCapture: handleWheel,
+    className: mx("[--dx-grid-base:var(--surface-bg)] [&_.dx-grid]:bs-min [&_.dx-grid]:shrink [&_.dx-grid]:max-is-max", inlineEndLine, blockEndLine),
+    frozen,
+    columns: model.columnMeta.value,
+    limitRows: model.getRowCount() ?? 0,
+    limitColumns: model.table.view?.fields?.length ?? 0,
+    onAxisResize: handleAxisResize,
+    onClick: model?.handleGridClick,
+    onKeyDown: handleKeyDown,
+    overscroll: "trap",
+    ref: setDxGrid
+  })), /* @__PURE__ */ React5.createElement(RowActionsMenu, {
+    model
+  }), /* @__PURE__ */ React5.createElement(ColumnActionsMenu, {
+    model
+  }), /* @__PURE__ */ React5.createElement(ColumnSettings, {
+    model
   }));
-};
+});
 var Table = {
   Root: TableRoot,
-  Viewport: TableViewport,
-  Main: TablePrimitive
+  Main: TableMain
 };
 
-// packages/ui/react-ui-table/src/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 { 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/helpers.tsx";
-var createColumnBuilder = () => ({
-  helper: createColumnHelper(),
-  builder: new ColumnBuilder()
+// packages/ui/react-ui-table/src/components/Toolbar/Toolbar.tsx
+import { ChatText, RowsPlusBottom } from "@phosphor-icons/react";
+import { createContext } from "@radix-ui/react-context";
+import React7 from "react";
+import { Toolbar as NaturalToolbar2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+
+// packages/ui/react-ui-table/src/components/Toolbar/common.tsx
+import React6 from "react";
+import { Toolbar as NaturalToolbar, Tooltip } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+var iconStyles = getSize(5);
+var buttonStyles = "min-bs-0 p-2";
+var tooltipProps = {
+  side: "top",
+  classNames: "z-10"
+};
+var ToolbarSeparator = () => /* @__PURE__ */ React6.createElement("div", {
+  role: "separator",
+  className: "grow"
 });
-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 ToolbarButton = ({ Icon, children, ...props }) => {
+  return /* @__PURE__ */ React6.createElement(Tooltip.Root, null, /* @__PURE__ */ React6.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React6.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    ...props,
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React6.createElement(Icon, {
+    className: iconStyles
+  }), /* @__PURE__ */ React6.createElement("span", {
+    className: "sr-only"
+  }, children))), /* @__PURE__ */ React6.createElement(Tooltip.Portal, null, /* @__PURE__ */ React6.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React6.createElement(Tooltip.Arrow, 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,
+
+// packages/ui/react-ui-table/src/components/Toolbar/Toolbar.tsx
+var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
+var ToolbarRoot = ({ classNames, children, onAction }) => {
+  return /* @__PURE__ */ React7.createElement(ToolbarContextProvider, {
+    onAction
+  }, /* @__PURE__ */ React7.createElement(NaturalToolbar2.Root, {
     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"
-  }));
+      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1",
+      classNames
+    ]
+  }, children));
 };
-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 Editing = () => {
+  const { onAction } = useToolbarContext("Editing");
+  const { t } = useTranslation3(translationKey);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ToolbarButton, {
+    value: "add-row",
+    Icon: RowsPlusBottom,
+    "data-testid": "table.toolbar.add-row",
+    onClick: () => onAction?.({
+      type: "add-row"
+    })
+  }, t("add row")));
 };
-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 Actions = () => {
+  const { onAction } = useToolbarContext("Actions");
+  const { t } = useTranslation3(translationKey);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(ToolbarButton, {
+    value: "comment",
+    Icon: ChatText,
+    "data-testid": "table.toolbar.comment",
+    onClick: () => onAction?.({
+      type: "comment"
+    })
+  }, t("create comment")));
 };
-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 Toolbar = {
+  Root: ToolbarRoot,
+  Editing,
+  Actions,
+  Separator: ToolbarSeparator
 };
-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
-        }
+
+// packages/ui/react-ui-table/src/hooks/useTableModel.ts
+import { useEffect as useEffect2, useState as useState3 } from "react";
+
+// packages/ui/react-ui-table/src/model/table-model.ts
+import { computed as computed2, effect as effect2, signal as signal3 } from "@preact/signals-core";
+import orderBy from "lodash.orderby";
+import { Resource as Resource2 } from "@dxos/context";
+import { getValue as getValue2, setValue, FormatEnum as FormatEnum3 } from "@dxos/echo-schema";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { PublicKey as PublicKey2 } from "@dxos/react-client";
+import { cellClassesForFieldType, cellClassesForRowSelection, formatForDisplay, formatForEditing, parseValue } from "@dxos/react-ui-data";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+import { VIEW_FIELD_LIMIT } from "@dxos/schema";
+
+// packages/ui/react-ui-table/src/model/modal-controller.ts
+import { signal } from "@preact/signals-core";
+var ModalController = class {
+  constructor() {
+    this._state = signal({
+      type: "closed"
+    });
+    this._triggerRef = {
+      current: null
+    };
+    this.handleClick = (event) => {
+      const target = event.target;
+      const rowButton = target.closest(`button[${tableButtons.rowMenu.attr}]`);
+      if (rowButton) {
+        this._triggerRef.current = rowButton;
+        this._state.value = {
+          type: "row",
+          rowIndex: Number(rowButton.getAttribute(tableButtons.rowMenu.attr))
+        };
+        return true;
+      }
+      const columnButton = target.closest(`button[${tableButtons.columnSettings.attr}]`);
+      if (columnButton) {
+        const fieldId = columnButton.getAttribute(tableButtons.columnSettings.attr);
+        this._triggerRef.current = columnButton;
+        this._state.value = {
+          type: "column",
+          fieldId
+        };
+        return true;
       }
+      const addColumnButton = target.closest(`button[${tableButtons.addColumn.attr}]`);
+      if (addColumnButton) {
+        this._triggerRef.current = addColumnButton;
+        this._state.value = {
+          type: "columnSettings",
+          mode: {
+            type: "create"
+          }
+        };
+        return true;
+      }
+      return false;
     };
-  }
-  /**
-  * 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?.__typename === "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
-        }
+    this.openColumnSettings = () => {
+      if (this._state.value.type === "column") {
+        const fieldId = this._state.value.fieldId;
+        requestAnimationFrame(() => {
+          this._state.value = {
+            type: "columnSettings",
+            mode: {
+              type: "edit",
+              fieldId
+            }
+          };
+        });
       }
     };
+    this.close = () => {
+      this._state.value = {
+        type: "closed"
+      };
+    };
   }
-  /**
-  * 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
-        }
+  get state() {
+    return this._state;
+  }
+  get trigger() {
+    return this._triggerRef;
+  }
+};
+
+// packages/ui/react-ui-table/src/model/selection-model.ts
+import { computed, effect, signal as signal2 } from "@preact/signals-core";
+import { Resource } from "@dxos/context";
+var SelectionModel = class extends Resource {
+  constructor(_rows, _onSelectionChanged) {
+    super();
+    this._rows = _rows;
+    this._onSelectionChanged = _onSelectionChanged;
+    this._selection = signal2(/* @__PURE__ */ new Set());
+    this._validSelectedIds = computed(() => {
+      const rows = this._rows.value;
+      if (!rows) {
+        return /* @__PURE__ */ new Set();
+      }
+      const validIds = new Set(rows.map((row) => row.id));
+      return new Set([
+        ...this._selection.value
+      ].filter((id) => validIds.has(id)));
+    });
+    this._hasSelection = computed(() => this._validSelectedIds.value.size > 0);
+    this._allSelected = computed(() => {
+      const rows = this._rows.value;
+      if (rows.length === 0) {
+        return false;
+      }
+      return rows.length !== 0 || rows.every((row) => this._selection.value.has(row.id));
+    });
+    this.getSelectedRows = () => {
+      const selectedIds = this._validSelectedIds.value;
+      return this._rows.value.filter((row) => selectedIds.has(row.id));
+    };
+    this.isRowIndexSelected = (rowIndex) => {
+      const row = this._rows.value[rowIndex];
+      return this._selection.value.has(row.id);
+    };
+    this.isObjectSelected = (object) => {
+      return this._selection.value.has(object.id);
+    };
+    this.toggleSelectionForRowIndex = (rowIndex) => {
+      const row = this._rows.value[rowIndex];
+      const newSelection = new Set(this._selection.value);
+      if (newSelection.has(row.id)) {
+        newSelection.delete(row.id);
+      } else {
+        newSelection.add(row.id);
       }
+      this._selection.value = newSelection;
+    };
+    this.setSelection = (mode) => {
+      this._selection.value = mode === "all" ? new Set(this._rows.value.map((row) => row.id)) : /* @__PURE__ */ new Set();
     };
   }
-  /**
-  * 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: 377,
-            S: this,
-            C: (f, a) => f(...a)
-          });
-          return null;
-        }
+  async _open() {
+    const selectionWatcher = effect(() => {
+      touch(this._selection.value);
+      this._onSelectionChanged?.();
+    });
+    this._ctx.onDispose(selectionWatcher);
+  }
+  //
+  // Getters
+  //
+  get selection() {
+    return this._selection;
+  }
+  get hasSelection() {
+    return this._hasSelection;
+  }
+  get allRowsSeleted() {
+    return this._allSelected;
+  }
+};
+
+// packages/ui/react-ui-table/src/util/table-controls.ts
+var checkboxAttributes = {
+  checkbox: "data-table-checkbox",
+  header: "data-table-header"
+};
+var renderCheckbox = ({ rowIndex, header = false, checked = false, disabled = false }) => {
+  const baseClasses = "absolute inset-block-[6px] inline-end-[6px]";
+  const { attributes } = tableControls.checkbox;
+  return `<input type="checkbox" class="${baseClasses}" ${attributes.checkbox}="${rowIndex}" ${header ? attributes.header : ""} ${checked ? "checked" : ""} ${disabled ? "disabled" : ""}/>`;
+};
+var tableControls = {
+  checkbox: {
+    attributes: checkboxAttributes,
+    render: renderCheckbox
+  }
+};
+
+// packages/ui/react-ui-table/src/model/table-model.ts
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
+var TableModel = class extends Resource2 {
+  constructor({ table, projection, sorting = [], pinnedRows = {
+    top: [],
+    bottom: []
+  }, onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChanged }) {
+    super();
+    this.id = `table-model-${PublicKey2.random().truncate()}`;
+    this._visibleRange = signal3({
+      start: {
+        row: 0,
+        col: 0
       },
-      ...props,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames
+      end: {
+        row: 0,
+        col: 0
+      }
+    });
+    /**
+    * Maps display indices to data indices.
+    * Used for translating between sorted/displayed order and original data order.
+    * Keys are display indices, values are corresponding data indices.
+    */
+    this._displayToDataIndex = /* @__PURE__ */ new Map();
+    this._sorting = signal3(void 0);
+    this._rows = signal3([]);
+    this._modalController = new ModalController();
+    //
+    // Get Cells
+    //
+    this.getCells = (range, plane) => {
+      switch (plane) {
+        case "grid": {
+          this._visibleRange.value = range;
+          return this.getMainGridCells(range);
+        }
+        case "frozenRowsStart": {
+          return this.getHeaderCells(range);
+        }
+        case "frozenColsStart": {
+          return this.getSelectionColumnCells(range);
+        }
+        case "frozenColsEnd": {
+          return this.getActionColumnCells(range);
+        }
+        case "fixedStartStart": {
+          return this.getSelectAllCell();
+        }
+        case "fixedStartEnd": {
+          return this.getNewColumnCell();
+        }
+        default: {
+          return {};
         }
       }
     };
-  }
-  /**
-  * 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;
+    this.getMainGridCells = (range) => {
+      const values = {};
+      const fields = this._table.view?.fields ?? [];
+      const addCell = (obj, field, colIndex, displayIndex) => {
+        const { props } = this._projection.getFieldProjection(field.id);
+        const value = {
+          get value() {
+            const value2 = getValue2(obj, field.path);
+            if (value2 == null) {
+              return "";
+            }
+            switch (props.format) {
+              case FormatEnum3.Ref: {
+                if (!field.referencePath) {
+                  return "";
+                }
+                return getValue2(value2, field.referencePath);
+              }
+              default: {
+                return formatForDisplay({
+                  type: props.type,
+                  format: props.format,
+                  value: value2
+                });
+              }
+            }
+          }
+        };
+        const classes = [];
+        const formatClasses = cellClassesForFieldType({
+          type: props.type,
+          format: props.format
+        });
+        if (formatClasses) {
+          classes.push(formatClasses);
+        }
+        const rowSelectionClasses = cellClassesForRowSelection(this._selection.isObjectSelected(obj));
+        if (rowSelectionClasses) {
+          classes.push(rowSelectionClasses);
         }
-        const element = value.truncate();
-        if (!tooltip) {
-          return element;
+        if (classes.length > 0) {
+          value.className = mx2(classes.flat());
         }
-        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());
+        const idx = fromGridCell({
+          col: colIndex,
+          row: displayIndex
+        });
+        values[idx] = value;
+      };
+      for (let row = range.start.row; row <= range.end.row && row < this._sortedRows.value.length; row++) {
+        for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+          const field = fields[col];
+          if (!field) {
+            continue;
           }
-        })))));
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames: [
-            "font-mono",
-            textPadding,
-            classNames
-          ]
+          addCell(this._sortedRows.value[row], field, col, row);
         }
       }
+      return values;
     };
-  }
-  /**
-  * Row selector
-  */
-  selectRow({ classNames, onUpdate, id = "selectRow" } = {}) {
-    return {
-      id,
-      size: 32,
-      enableResizing: false,
-      meta: {
-        onUpdate,
-        cell: {
-          classNames
+    this.getHeaderCells = (range) => {
+      const values = {};
+      const fields = this.table.view?.fields ?? [];
+      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
+        const { field, props } = this._projection.getFieldProjection(fields[col].id);
+        values[fromGridCell({
+          col,
+          row: 0
+        })] = {
+          value: props.title ?? field.path,
+          readonly: true,
+          resizeHandle: "col",
+          accessoryHtml: tableButtons.columnSettings.render({
+            fieldId: field.id
+          })
+        };
+      }
+      return values;
+    };
+    this.getSelectionColumnCells = (range) => {
+      const values = {};
+      for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
+        const isSelected = this._selection.isRowIndexSelected(row);
+        const classes = cellClassesForRowSelection(isSelected);
+        values[fromGridCell({
+          col: 0,
+          row
+        })] = {
+          value: "",
+          readonly: true,
+          className: classes ? mx2(classes) : void 0,
+          accessoryHtml: tableControls.checkbox.render({
+            rowIndex: row,
+            checked: isSelected
+          })
+        };
+      }
+      return values;
+    };
+    this.getActionColumnCells = (range) => {
+      const values = {};
+      for (let row = range.start.row; row <= range.end.row && row < this._rows.value.length; row++) {
+        const isSelected = this._selection.isRowIndexSelected(row);
+        const classes = cellClassesForRowSelection(isSelected);
+        values[fromGridCell({
+          col: 0,
+          row
+        })] = {
+          value: "",
+          readonly: true,
+          className: classes ? mx2(classes) : void 0,
+          accessoryHtml: tableButtons.rowMenu.render({
+            rowIndex: row
+          })
+        };
+      }
+      return values;
+    };
+    this.getSelectAllCell = () => {
+      return {
+        [fromGridCell({
+          col: 0,
+          row: 0
+        })]: {
+          value: "",
+          accessoryHtml: tableControls.checkbox.render({
+            rowIndex: 0,
+            header: true,
+            checked: this._selection.allRowsSeleted.value
+          }),
+          readonly: true
         }
-      },
-      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
-          ]
+    this.getNewColumnCell = () => {
+      return {
+        [fromGridCell({
+          col: 0,
+          row: 0
+        })]: {
+          value: "",
+          accessoryHtml: tableButtons.addColumn.render({
+            disabled: (this._table.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
+          }),
+          readonly: true
         }
+      };
+    };
+    //
+    // Data
+    //
+    this.setRows = (obj) => {
+      this._rows.value = obj;
+    };
+    this.getRowCount = () => this._rows.value.length;
+    this.getColumnCount = () => this.table.view?.fields.length ?? 0;
+    this.insertRow = (rowIndex) => {
+      const row = rowIndex !== void 0 ? this._displayToDataIndex.get(rowIndex) ?? rowIndex : this._rows.value.length;
+      this._onInsertRow?.(row);
+    };
+    this.deleteRow = (rowIndex) => {
+      const row = this._displayToDataIndex.get(rowIndex) ?? rowIndex;
+      const obj = this._rows.value[row];
+      const objectsToDelete = [];
+      if (this._selection.hasSelection.value) {
+        const selectedRows = this._selection.getSelectedRows();
+        objectsToDelete.push(...selectedRows);
+      } else {
+        objectsToDelete.push(obj);
       }
+      this._onDeleteRows?.(row, objectsToDelete);
     };
-  }
-  /**
-  * Icon based on boolean value.
-  */
-  icon({ label, size, on, off, ...props } = {}) {
-    const IconOn = on?.Icon ?? Check;
-    const IconOff = off?.Icon ?? X2;
-    return {
-      size: size ?? 32,
-      // 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")
+    this.getCellData = ({ col, row }) => {
+      const fields = this.table.view?.fields ?? [];
+      if (col < 0 || col >= fields.length) {
+        return void 0;
+      }
+      const field = fields[col];
+      const dataIndex = this._displayToDataIndex.get(row) ?? row;
+      const value = getValue2(this._rows.value[dataIndex], field.path);
+      if (value == null) {
+        return "";
+      }
+      const { props } = this._projection.getFieldProjection(field.id);
+      switch (props.format) {
+        case FormatEnum3.Ref: {
+          if (!field.referencePath) {
+            return "";
+          }
+          return getValue2(value, field.referencePath);
+        }
+        default: {
+          return formatForEditing({
+            type: props.type,
+            format: props.format,
+            value
           });
-        } 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
-          ]
+    this.setCellData = ({ col, row }, value) => {
+      const rowIdx = this._displayToDataIndex.get(row) ?? row;
+      const fields = this.table.view?.fields ?? [];
+      if (col < 0 || col >= fields.length) {
+        return;
+      }
+      const field = fields[col];
+      const { props } = this._projection.getFieldProjection(field.id);
+      switch (props.format) {
+        case FormatEnum3.Ref: {
+          setValue(this._rows.value[rowIdx], field.path, value);
+          break;
+        }
+        default: {
+          setValue(this._rows.value[rowIdx], field.path, parseValue({
+            type: props.type,
+            format: props.format,
+            value
+          }));
+          break;
+        }
+      }
+    };
+    //
+    // Interactions
+    //
+    this.handleGridClick = (event) => {
+      if (!this._modalController.handleClick(event)) {
+        const target = event.target;
+        const selectionCheckbox = target.closest(`input[${tableControls.checkbox.attributes.checkbox}]`);
+        if (selectionCheckbox) {
+          const isHeader = selectionCheckbox.hasAttribute(tableControls.checkbox.attributes.header);
+          if (isHeader) {
+            if (this._selection.allRowsSeleted.value) {
+              this._selection.setSelection("none");
+            } else {
+              this._selection.setSelection("all");
+            }
+          } else {
+            const rowIndex = Number(selectionCheckbox.getAttribute(tableControls.checkbox.attributes.checkbox));
+            this._selection.toggleSelectionForRowIndex(rowIndex);
+          }
         }
       }
     };
+    this._table = table;
+    this._projection = projection;
+    this._sorting.value = sorting.at(0);
+    this._pinnedRows = pinnedRows;
+    this._onInsertRow = onInsertRow;
+    this._onDeleteRows = onDeleteRows;
+    this._onDeleteColumn = onDeleteColumn;
+    this._onCellUpdate = onCellUpdate;
+    this._onRowOrderChanged = onRowOrderChanged;
   }
-};
-
-// packages/ui/react-ui-table/src/schema/column-utils.ts
-import { FieldValueType, mapSchemaToFields } from "@dxos/schema";
-var schemaToColumnDefs = (schema) => {
-  const { helper, builder } = createColumnBuilder();
-  const classified = mapSchemaToFields(schema);
-  return classified.map(([name, type]) => {
-    const propertyKey = name.toString();
-    let column;
-    switch (type) {
-      case FieldValueType.String: {
-        column = builder.string({
-          label: propertyKey,
-          classNames: [
-            name === "id" && "font-mono"
-          ]
-        });
-        break;
+  get table() {
+    return this._table;
+  }
+  get projection() {
+    return this._projection;
+  }
+  get pinnedRows() {
+    return this._pinnedRows;
+  }
+  get columnMeta() {
+    invariant3(this._columnMeta, void 0, {
+      F: __dxlog_file4,
+      L: 124,
+      S: this,
+      A: [
+        "this._columnMeta",
+        ""
+      ]
+    });
+    return this._columnMeta;
+  }
+  get sorting() {
+    return this._sorting.value;
+  }
+  get modalController() {
+    return this._modalController;
+  }
+  get selection() {
+    return this._selection;
+  }
+  //
+  // Initialisation
+  //
+  async _open() {
+    this.initializeColumnMeta();
+    this.initializeSorting();
+    this.initializeEffects();
+    this._selection = new SelectionModel(this._sortedRows, () => this._onRowOrderChanged?.());
+    await this._selection.open(this._ctx);
+  }
+  initializeColumnMeta() {
+    this._columnMeta = computed2(() => {
+      const fields = this._table.view?.fields ?? [];
+      const meta = Object.fromEntries(fields.map((field, index) => [
+        index,
+        {
+          size: field?.size ?? 256,
+          resizeable: true
+        }
+      ]));
+      return {
+        grid: meta,
+        frozenColsStart: {
+          0: {
+            size: 30,
+            resizeable: false
+          }
+        },
+        frozenColsEnd: {
+          0: {
+            size: 40,
+            resizeable: false
+          }
+        }
+      };
+    });
+  }
+  initializeSorting() {
+    this._sortedRows = computed2(() => {
+      this._displayToDataIndex.clear();
+      const sort = this._sorting.value;
+      if (!sort) {
+        return this._rows.value;
       }
-      case FieldValueType.Number: {
-        column = builder.number({
-          label: propertyKey
-        });
-        break;
+      const field = this._table.view?.fields.find((field2) => field2.id === sort.fieldId);
+      if (!field) {
+        return this._rows.value;
       }
-      case FieldValueType.Boolean: {
-        column = builder.switch({
-          label: propertyKey
-        });
-        break;
+      const dataWithIndices = this._rows.value.map((item, index) => {
+        const value = getValue2(item, field.path);
+        return {
+          item,
+          index,
+          value,
+          isEmpty: value == null || value === ""
+        };
+      });
+      const sorted = orderBy(dataWithIndices, [
+        "isEmpty",
+        "value"
+      ], [
+        "asc",
+        sort.direction
+      ]);
+      for (let displayIndex = 0; displayIndex < sorted.length; displayIndex++) {
+        const { index: dataIndex } = sorted[displayIndex];
+        if (displayIndex !== dataIndex) {
+          this._displayToDataIndex.set(displayIndex, dataIndex);
+        }
       }
-      case FieldValueType.Date: {
-        column = builder.date({
-          label: propertyKey
-        });
-        break;
+      return sorted.map(({ item }) => item);
+    });
+  }
+  initializeEffects() {
+    const rowOrderWatcher = effect2(() => {
+      touch(this._sortedRows.value);
+      this._onRowOrderChanged?.();
+    });
+    this._ctx.onDispose(rowOrderWatcher);
+    const rowEffectManager = effect2(() => {
+      const { start, end } = touch(this._visibleRange.value);
+      const rowEffects = [];
+      for (let row = start.row; row <= end.row; row++) {
+        rowEffects.push(effect2(() => {
+          const obj = this._sortedRows.value[row];
+          this?._table?.view?.fields.forEach((field) => touch(getValue2(obj, field.path)));
+          this._onCellUpdate?.({
+            row,
+            col: start.col
+          });
+        }));
       }
-      case FieldValueType.JSON: {
-        column = builder.json({
-          label: propertyKey,
-          id: propertyKey
-        });
-        break;
+      return () => rowEffects.forEach((cleanup) => cleanup());
+    });
+    this._ctx.onDispose(rowEffectManager);
+  }
+  //
+  // Column Operations
+  //
+  deleteColumn(fieldId) {
+    if (!this.table.view) {
+      return;
+    }
+    const field = this.table.view.fields.find((field2) => field2.id === fieldId);
+    if (field && this._onDeleteColumn) {
+      if (this._sorting.value?.fieldId === fieldId) {
+        this.clearSort();
       }
-      default: {
-        throw new Error(`Unhandled column type: ${type}`);
+      this._onDeleteColumn(field.id);
+    }
+  }
+  //
+  // Resize
+  //
+  setColumnWidth(columnIndex, width) {
+    const fields = this.table.view?.fields ?? [];
+    if (columnIndex < fields.length) {
+      const newWidth = Math.max(0, width);
+      const field = fields[columnIndex];
+      if (field) {
+        field.size = newWidth;
       }
     }
-    return helper.accessor(propertyKey, column);
-  });
+  }
+  //
+  // Sorting
+  //
+  setSort(fieldId, direction) {
+    this._sorting.value = {
+      fieldId,
+      direction
+    };
+  }
+  clearSort() {
+    this._sorting.value = void 0;
+  }
+  //
+  // Pinning
+  //
+  // TODO(burdon): Change to setPinned(on/off).
+  pinRow(rowIndex, side) {
+    this._pinnedRows[side].push(rowIndex);
+  }
+  unpinRow(rowIndex) {
+    this._pinnedRows.top = this._pinnedRows.top.filter((index) => index !== rowIndex);
+    this._pinnedRows.bottom = this._pinnedRows.bottom.filter((index) => index !== rowIndex);
+  }
+};
+
+// packages/ui/react-ui-table/src/hooks/useTableModel.ts
+var useTableModel = ({ objects, table, projection, ...props }) => {
+  const [model, setModel] = useState3();
+  useEffect2(() => {
+    if (!table || !projection) {
+      return;
+    }
+    let model2;
+    const t = setTimeout(async () => {
+      model2 = new TableModel({
+        table,
+        projection,
+        ...props
+      });
+      await model2.open();
+      setModel(model2);
+    });
+    return () => {
+      clearTimeout(t);
+      void model2?.close();
+    };
+  }, [
+    table,
+    projection
+  ]);
+  useEffect2(() => {
+    if (objects) {
+      model?.setRows(objects);
+    }
+  }, [
+    model,
+    objects
+  ]);
+  return model;
 };
 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,
+  TableType,
+  Toolbar,
+  fromGridCell,
+  initializeTable,
+  tableButtons,
+  toGridCell,
+  touch,
   translations_default as translations,
-  useColumnResizing,
-  useColumnSorting,
-  usePinLastRow,
-  useRowSelection,
-  useSortColumn,
-  useTableContext,
-  useTableRootContext
+  useTableModel,
+  useToolbarContext
 };
 //# sourceMappingURL=index.mjs.map