@dxos/react-ui-table 0.8.3 → 0.8.4-main.28f8d3d

package/dist/lib/node-esm/index.mjs

@@ -1,1722 +1,96 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
-  TableSchema,
-  TableType
-} from "./chunk-GBT6GD4G.mjs";
-
-// packages/ui/react-ui-table/src/translations.ts
-var translationKey = "table";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "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 label": "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",
-        "create new object label": "Create new object \u201C{{text}}\u201D",
-        "save view label": "Save changes to view"
-      }
-    }
-  }
-];
-
-// packages/ui/react-ui-table/src/components/Table/Table.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { forwardRef, useCallback as useCallback5, useImperativeHandle, useState as useState3, useMemo as useMemo5, useEffect as useEffect3 } from "react";
-import { getValue as getValue4 } from "@dxos/echo-schema";
-import { invariant as invariant4 } from "@dxos/invariant";
-import { Filter } from "@dxos/react-client/echo";
-import { useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { useAttention } from "@dxos/react-ui-attention";
-import { closestCell, Grid, gridSeparatorInlineEnd, gridSeparatorBlockEnd } from "@dxos/react-ui-grid";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-import { isNotFalsy, safeParseInt } from "@dxos/util";
-
-// packages/ui/react-ui-table/src/components/Table/ColumnActionsMenu.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-import { DropdownMenu, useTranslation } from "@dxos/react-ui";
-var ColumnActionsMenu = ({ model, modals }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    const state = modals.state.value;
-    if (state?.type !== "column") {
-      return null;
-    }
-    const currentSort = model.sorting?.sorting;
-    const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
-    return /* @__PURE__ */ React.createElement(DropdownMenu.Root, {
-      modal: false,
-      open: true,
-      onOpenChange: modals.close
-    }, /* @__PURE__ */ React.createElement(DropdownMenu.VirtualTrigger, {
-      virtualRef: modals.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, {
-      "data-testid": "column-sort-descending",
-      onClick: () => model.sorting?.setSort(state.fieldId, "desc")
-    }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
-      "data-testid": "column-sort-ascending",
-      onClick: () => model.sorting?.setSort(state.fieldId, "asc")
-    }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
-      "data-testid": "column-clear-sort",
-      onClick: () => model.sorting?.clearSort()
-    }, t("column action clear sorting")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
-      "data-testid": "column-delete",
-      onClick: () => model.deleteColumn(state.fieldId)
-    }, t("column action delete")), model.features.schemaEditable && /* @__PURE__ */ React.createElement(DropdownMenu.Item, {
-      "data-testid": "column-settings",
-      onClick: () => modals.openColumnSettings()
-    }, t("column action settings"))), /* @__PURE__ */ React.createElement(DropdownMenu.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// packages/ui/react-ui-table/src/components/Table/ColumnSettings.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2, { useCallback, useEffect, useMemo, useState } from "react";
-import { Popover } from "@dxos/react-ui";
-import { FieldEditor } from "@dxos/react-ui-form";
-var ColumnSettings = ({ model, modals, onNewColumn }) => {
-  var _effect = _useSignals2();
-  try {
-    const [newField, setNewField] = useState();
-    const state = modals.state.value;
-    const space = model?.space;
-    useEffect(() => {
-      if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
-        setNewField(model.projection.createFieldProjection());
-        requestAnimationFrame(() => {
-          onNewColumn();
-        });
-      } else {
-        setNewField(void 0);
-      }
-    }, [
-      model?.projection,
-      state
-    ]);
-    const existingField = useMemo(() => {
-      if (state?.type === "columnSettings") {
-        const { mode } = state;
-        if (mode.type === "edit") {
-          return model?.view?.fields.find((f) => f.id === mode.fieldId);
-        }
-      }
-      return void 0;
-    }, [
-      model?.view?.fields,
-      state
-    ]);
-    const field = existingField ?? newField;
-    const handleSave = useCallback(() => {
-      modals.close();
-    }, [
-      modals
-    ]);
-    const handleCancel = useCallback(() => {
-      if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
-        model?.projection?.deleteFieldProjection(newField.id);
-      }
-    }, [
-      model?.projection,
-      state,
-      newField
-    ]);
-    if (!model?.view || !model.projection || !field) {
-      return null;
-    }
-    return /* @__PURE__ */ React2.createElement(Popover.Root, {
-      modal: false,
-      open: state?.type === "columnSettings"
-    }, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React2.createElement(Popover.Portal, null, /* @__PURE__ */ React2.createElement(Popover.Content, {
-      classNames: "md:is-64"
-    }, /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(FieldEditor, {
-      view: model.view,
-      projection: model.projection,
-      field,
-      registry: space?.db.schemaRegistry,
-      onSave: handleSave,
-      onCancel: handleCancel
-    })), /* @__PURE__ */ React2.createElement(Popover.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// packages/ui/react-ui-table/src/components/Table/CreateRefPanel.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { Schema } from "effect";
-import React3, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import { live } from "@dxos/react-client/echo";
-import { Popover as Popover2 } from "@dxos/react-ui";
-import { Form } from "@dxos/react-ui-form";
-import { useGridContext } from "@dxos/react-ui-grid";
-var CreateRefPanel = ({ model, modals, __gridScope }) => {
-  var _effect = _useSignals3();
-  try {
-    const { id: gridId } = useGridContext("TableCellEditor", __gridScope);
-    const space = model?.space;
-    const state = modals.state.value;
-    const schema = useMemo2(() => {
-      if (!space || state?.type !== "createRefPanel") {
-        return;
-      }
-      const [schema2] = space.db.schemaRegistry.query({
-        typename: state.typename
-      }).runSync();
-      if (schema2) {
-        const omit = Schema.omit("id");
-        return omit(schema2);
-      }
-    }, [
-      space,
-      state
-    ]);
-    const handleSave = useCallback2((values) => {
-      if (!model || !space || state?.type !== "createRefPanel") {
-        return;
-      }
-      const [schema2] = space.db.schemaRegistry.query({
-        typename: state.typename
-      }).runSync();
-      if (schema2) {
-        const obj = space.db.add(live(schema2, values));
-        state.onCreate?.(obj);
-      }
-      void modals.close();
-    }, [
-      modals,
-      space,
-      state
-    ]);
-    const handleCancel = useCallback2(() => {
-      if (model) {
-        modals.close();
-      }
-    }, [
-      modals
-    ]);
-    if (!model?.view || !model.projection) {
-      return null;
-    }
-    return /* @__PURE__ */ React3.createElement(Popover2.Root, {
-      modal: false,
-      open: state?.type === "createRefPanel" && !!schema,
-      onOpenChange: (nextOpen) => {
-        if (model && !nextOpen) {
-          return modals.close();
-        }
-      }
-    }, /* @__PURE__ */ React3.createElement(Popover2.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React3.createElement(Popover2.Portal, null, /* @__PURE__ */ React3.createElement(Popover2.Content, {
-      classNames: "md:is-64",
-      "data-grid": gridId
-    }, /* @__PURE__ */ React3.createElement(Popover2.Viewport, null, state?.type === "createRefPanel" && schema && /* @__PURE__ */ React3.createElement(Form, {
-      schema,
-      values: state.initialValues ?? {},
-      onSave: handleSave,
-      onCancel: handleCancel
-    })), /* @__PURE__ */ React3.createElement(Popover2.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// packages/ui/react-ui-table/src/components/Table/RowActionsMenu.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4 from "react";
-import { DropdownMenu as DropdownMenu2, useTranslation as useTranslation2 } from "@dxos/react-ui";
-var RowActionsMenu = ({ model, modals }) => {
-  var _effect = _useSignals4();
-  try {
-    const { t } = useTranslation2(translationKey);
-    const hasSelection = model.selection.hasSelection.value;
-    const state = modals.state.value;
-    if (state?.type !== "row") {
-      return null;
-    }
-    return /* @__PURE__ */ React4.createElement(DropdownMenu2.Root, {
-      modal: false,
-      open: true,
-      onOpenChange: modals.close
-    }, /* @__PURE__ */ React4.createElement(DropdownMenu2.VirtualTrigger, {
-      virtualRef: modals.trigger
-    }), /* @__PURE__ */ React4.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu2.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React4.createElement(DropdownMenu2.Item, {
-      "data-testid": "row-menu-delete",
-      onClick: () => model.deleteRow(state.rowIndex)
-    }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React4.createElement(DropdownMenu2.Item, {
-      key: action.id,
-      "data-testid": `row-action-${action.id}`,
-      onClick: () => {
-        modals.close();
-        model.handleRowAction(action.id, state.rowIndex);
-      }
-    }, t(action.translationKey)))), /* @__PURE__ */ React4.createElement(DropdownMenu2.Arrow, null)));
-  } finally {
-    _effect.f();
-  }
-};
-
-// packages/ui/react-ui-table/src/model/table-model.ts
-import { computed as computed3, effect as effect2, signal as signal3 } from "@preact/signals-core";
-import { Resource as Resource2 } from "@dxos/context";
-import { FormatEnum as FormatEnum3, getValue as getValue2, setValue, getSnapshot, getSchema } from "@dxos/echo-schema";
-import { invariant } from "@dxos/invariant";
-import { isLiveObject, makeRef } from "@dxos/live-object";
-import { formatForEditing, parseValue } from "@dxos/react-ui-form";
-import { validateSchema } from "@dxos/schema";
-
-// packages/ui/react-ui-table/src/model/selection-model.ts
-import { computed, effect, signal } from "@preact/signals-core";
-import { Resource } from "@dxos/context";
-
-// packages/ui/react-ui-table/src/util/dynamic-table.ts
-import { Obj, Ref } from "@dxos/echo";
-import { getTypename, toJsonSchema } from "@dxos/echo-schema";
-import { createView, getSchemaFromPropertyDefinitions, ViewProjection } from "@dxos/schema";
-var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
-  if (typename && properties) {
-    const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
-    return {
-      typename: schema2.typename,
-      jsonSchema: schema2.jsonSchema
-    };
-  } else if (schema) {
-    return {
-      typename: getTypename(schema),
-      jsonSchema: toJsonSchema(schema)
-    };
-  } else if (typename && jsonSchema) {
-    return {
-      typename,
-      jsonSchema
-    };
-  } else {
-    throw new Error("invalid properties");
-  }
-};
-var makeDynamicTable = ({ typename, jsonSchema, properties }) => {
-  const view = createView({
-    name: "dynamic-table",
-    typename,
-    jsonSchema,
-    ...properties && {
-      fields: properties.map((property) => property.name)
-    }
-  });
-  const table = Obj.make(TableType, {
-    name: "dynamic-table",
-    view: Ref.make(view)
-  });
-  const projection = new ViewProjection(jsonSchema, view);
-  if (properties && view.fields) {
-    setProperties(view, projection, properties);
-  }
-  return {
-    table,
-    projection
-  };
-};
-var setProperties = (view, projection, properties) => {
-  for (const property of properties) {
-    const field = view.fields.find((field2) => field2.path === property.name);
-    if (field) {
-      if (property.size !== void 0) {
-        field.size = property.size;
-      }
-      if (property.title !== void 0) {
-        const fieldProjection = projection.getFieldProjection(field.id);
-        projection.setFieldProjection({
-          ...fieldProjection,
-          props: {
-            ...fieldProjection.props,
-            title: property.title
-          }
-        });
-      }
-      if (property.sort) {
-        const fieldId = field.id;
-        view.query.sort = [
-          {
-            fieldId,
-            direction: property.sort
-          }
-        ];
-      }
-    }
-  }
-};
-
-// packages/ui/react-ui-table/src/util/signals.ts
-var touch = (value) => value;
-
-// packages/ui/react-ui-table/src/util/table.ts
-import { Schema as Schema2 } from "effect";
-import { Format, FormatEnum, Ref as Ref2, TypedObject, TypeEnum } from "@dxos/echo-schema";
-import { PublicKey } from "@dxos/react-client";
-import { live as live2 } from "@dxos/react-client/echo";
-import { createFieldId, createView as createView2, getSchemaProperties, ViewProjection as ViewProjection2 } from "@dxos/schema";
-var initializeTable = async ({ client, space, table, typename, initialRow = true }) => {
-  if (typename) {
-    const schema = await space.db.graph.getSchemaByTypename(typename, space.db);
-    if (!schema) {
-      throw new Error(`Schema not found: ${typename}`);
-    }
-    const fields = getSchemaProperties(schema.ast).map((prop) => prop.name);
-    table.view = Ref2.make(createView2({
-      // TODO(ZaymonFC): Don't hardcode name?
-      name: "View",
-      typename: schema.typename,
-      jsonSchema: schema.jsonSchema,
-      fields
-    }));
-    return schema;
-  } else {
-    const [schema] = await space.db.schemaRegistry.register([
-      createContactSchema()
-    ]);
-    const fields = ContactFields;
-    table.view = Ref2.make(createView2({
-      name: "View",
-      typename: schema.typename,
-      jsonSchema: schema.jsonSchema,
-      fields
-    }));
-    createProjection(schema, table.view.target);
-    if (initialRow) {
-      space.db.add(live2(schema, {}));
-    }
-    return schema;
-  }
-};
-var createContactSchema = () => TypedObject({
-  typename: `example.com/type/${PublicKey.random().truncate()}`,
-  version: "0.1.0"
-})({
-  name: Schema2.optional(Schema2.String).annotations({
-    title: "Name"
-  }),
-  active: Schema2.optional(Schema2.Boolean).annotations({
-    title: "Active"
-  }),
-  email: Schema2.optional(Format.Email),
-  salary: Schema2.optional(Format.Currency()).annotations({
-    title: "Salary"
-  })
-});
-var ContactFields = [
-  "name",
-  "email",
-  "salary",
-  "active"
-];
-var createProjection = (schema, view) => {
-  const projection = new ViewProjection2(schema.jsonSchema, view);
-  projection.setFieldProjection({
-    field: {
-      id: view.fields.find((f) => f.path === "salary").id,
-      path: "salary",
-      size: 150
-    }
-  });
-  projection.setFieldProjection({
-    field: {
-      id: view.fields.find((f) => f.path === "active").id,
-      path: "active",
-      size: 100
-    }
-  });
-  projection.setFieldProjection({
-    field: {
-      id: createFieldId(),
-      path: "manager",
-      referencePath: "name"
-    },
-    props: {
-      property: "manager",
-      type: TypeEnum.Ref,
-      format: FormatEnum.Ref,
-      referenceSchema: schema.typename,
-      title: "Manager"
-    }
-  });
-  return projection;
-};
-
-// packages/ui/react-ui-table/src/util/table-buttons.ts
-var BUTTON_IDENTIFIERS = {
-  columnSettings: "data-table-column-settings-button",
-  newColumn: "data-table-new-column-button",
-  referencedCell: "data-table-ref-cell-button",
-  rowMenu: "data-table-row-menu-button",
-  sort: "data-table-sort-button"
-};
-var createButton = ({ attr, data, disabled = false, icon, testId, type = "primary" }) => {
-  const dataAttrs = Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
-  const positionClass = type === "primary" ? "inline-end-2" : "inline-end-9";
-  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? "disabled" : ""}><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
-};
-var addColumnButton = {
-  attr: BUTTON_IDENTIFIERS.newColumn,
-  icon: "ph--plus--regular",
-  render: ({ disabled }) => {
-    return createButton({
-      attr: BUTTON_IDENTIFIERS.newColumn,
-      icon: addColumnButton.icon,
-      disabled,
-      data: {},
-      testId: "table-new-column-button"
-    });
-  },
-  getData: (_el) => ({
-    type: "newColumn"
-  })
-};
-var columnSettingsButton = {
-  attr: BUTTON_IDENTIFIERS.columnSettings,
-  icon: "ph--caret-down--regular",
-  render: ({ fieldId }) => {
-    return createButton({
-      attr: BUTTON_IDENTIFIERS.columnSettings,
-      icon: columnSettingsButton.icon,
-      data: {
-        "data-field-id": fieldId
-      },
-      testId: "table-column-settings-button"
-    });
-  },
-  getData: (el) => ({
-    type: "columnSettings",
-    fieldId: el.getAttribute("data-field-id")
-  })
-};
-var rowMenuButton = {
-  attr: BUTTON_IDENTIFIERS.rowMenu,
-  icon: "ph--dots-three--regular",
-  render: ({ rowIndex }) => {
-    return createButton({
-      attr: BUTTON_IDENTIFIERS.rowMenu,
-      icon: rowMenuButton.icon,
-      data: {
-        "data-row-index": rowIndex.toString()
-      },
-      testId: "table-row-menu-button"
-    });
-  },
-  getData: (el) => ({
-    type: "rowMenu",
-    rowIndex: Number(el.getAttribute("data-row-index"))
-  })
-};
-var sortButton = {
-  attr: BUTTON_IDENTIFIERS.sort,
-  icon: "ph--sort-ascending--regular",
-  render: ({ fieldId, direction }) => {
-    return createButton({
-      attr: BUTTON_IDENTIFIERS.sort,
-      icon: direction === "desc" ? "ph--sort-descending--regular" : "ph--sort-ascending--regular",
-      data: {
-        "data-field-id": fieldId,
-        "data-direction": direction ?? ""
-      },
-      testId: "table-sort-button",
-      // TODO(ZaymonFC): All buttons should be rendered into an absolutely positioned flex container.
-      // This is a bit hacky.
-      type: "secondary"
-    });
-  },
-  getData: (el) => ({
-    type: "sort",
-    fieldId: el.getAttribute("data-field-id"),
-    direction: el.getAttribute("data-direction")
-  })
-};
-var tableButtons = {
-  addColumn: addColumnButton,
-  columnSettings: columnSettingsButton,
-  rowMenu: rowMenuButton,
-  sort: sortButton
-};
-
-// packages/ui/react-ui-table/src/util/table-controls.ts
-var CONTROL_IDENTIFIERS = {
-  checkbox: "data-table-checkbox",
-  switch: "data-table-switch"
-};
-var BASE_CLASSES = {
-  checkbox: "absolute inset-block-[.375rem] inline-end-[.375rem] dx-checkbox",
-  switch: "absolute inset-block-[.25rem] inline-end-[.25rem] dx-checkbox--switch"
-};
-var renderAttributes = (data) => {
-  return Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
-};
-var renderInput = (baseClass, attrs, checked = false, disabled = false, preventToggle = false, testId) => {
-  return `<input type="checkbox" class="${baseClass}" ${renderAttributes(attrs)} ${checked ? "checked" : ""} ${preventToggle ? 'onclick="return false"' : ""} ${disabled ? "disabled" : ""} data-testid="${testId}"/>`;
-};
-var CheckboxStory = ({ rowIndex, header = false, checked = false, disabled = false }) => {
-  const attrs = {
-    [CONTROL_IDENTIFIERS.checkbox]: "",
-    "data-row-index": rowIndex.toString(),
-    ...header && {
-      "data-header": ""
-    }
-  };
-  return renderInput(BASE_CLASSES.checkbox, attrs, checked, disabled, true, "table-selection");
-};
-var SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = false }) => {
-  const attrs = {
-    [CONTROL_IDENTIFIERS.switch]: "",
-    "data-row-index": rowIndex.toString(),
-    "data-col-index": colIndex.toString()
-  };
-  return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, "table-switch");
-};
-var tableControls = {
-  checkbox: {
-    attr: CONTROL_IDENTIFIERS.checkbox,
-    render: CheckboxStory,
-    getData: (el) => ({
-      type: "checkbox",
-      rowIndex: Number(el.getAttribute("data-row-index")),
-      header: el.hasAttribute("data-header")
-    })
-  },
-  switch: {
-    attr: CONTROL_IDENTIFIERS.switch,
-    render: SwitchStory,
-    getData: (el) => ({
-      type: "switch",
-      rowIndex: Number(el.getAttribute("data-row-index")),
-      colIndex: Number(el.getAttribute("data-col-index"))
-    })
-  }
-};
-
-// packages/ui/react-ui-table/src/util/schema.ts
-import { Schema as Schema3 } from "effect";
-import { isTypeLiteral, TypeLiteral } from "effect/SchemaAST";
-var narrowSchema = (schema, paths) => {
-  const ast = schema?.ast;
-  if (isTypeLiteral(ast)) {
-    const propertySignatures = ast.propertySignatures.filter((signature) => paths.includes(signature.name.toString()));
-    if (propertySignatures.length > 0) {
-      const narrowType = new TypeLiteral(propertySignatures, []);
-      return Schema3.make(narrowType);
-    }
-  }
-  return void 0;
-};
-
-// packages/ui/react-ui-table/src/model/selection-model.ts
-var SelectionModel = class extends Resource {
-  constructor(_rows, _selectionMode, _onSelectionChanged) {
-    super(), this._rows = _rows, this._selectionMode = _selectionMode, this._onSelectionChanged = _onSelectionChanged, this._selection = signal(/* @__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.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 {
-        if (this._selectionMode === "single") {
-          newSelection.clear();
-        }
-        newSelection.add(row.id);
-      }
-      this._selection.value = newSelection;
-    }, this.setSelection = (mode) => {
-      switch (mode) {
-        case "all": {
-          this._selection.value = new Set(this._rows.value.map((row) => row.id));
-          break;
-        }
-        case "none": {
-          this._selection.value = /* @__PURE__ */ new Set();
-          break;
-        }
-      }
-    };
-  }
-  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;
-  }
-  get selectionMode() {
-    return this._selectionMode;
-  }
-};
-
-// packages/ui/react-ui-table/src/model/table-sorting.ts
-import { computed as computed2, signal as signal2 } from "@preact/signals-core";
-import orderBy from "lodash.orderby";
-import { getValue, FormatEnum as FormatEnum2, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
-import { formatForDisplay } from "@dxos/react-ui-form";
-var TableSorting = class {
-  constructor(rows, _view, _projection) {
-    this._view = _view;
-    this._projection = _projection;
-    this._displayToDataIndex = /* @__PURE__ */ new Map();
-    this._localSort = signal2(void 0);
-    this._rows = rows;
-    this._isDirty = computed2(() => {
-      const local = this._localSort.value;
-      const viewSort = this._view?.query.sort?.[0];
-      if (local?.type === "cleared") {
-        return viewSort !== void 0;
-      }
-      if (local?.type === "active") {
-        if (!viewSort) {
-          return true;
-        }
-        return local.sort.fieldId !== viewSort.fieldId || local.sort.direction !== viewSort.direction;
-      }
-      return false;
-    });
-    this.sortedRows = this.initialiseSortedRows();
-  }
-  /**
-  * @reactive
-  * @returns Local sort if present, falls back to view sort.
-  */
-  get sorting() {
-    const local = this._localSort.value;
-    if (local?.type === "cleared") {
-      return void 0;
-    }
-    if (local?.type === "active") {
-      return local.sort;
-    }
-    return this._view?.query.sort?.[0];
-  }
-  /**
-  * @reactive
-  * @returns Whether local sort differs from view sort.
-  */
-  get isDirty() {
-    return this._isDirty.value;
-  }
-  getDataIndex(displayIndex) {
-    return this._displayToDataIndex.get(displayIndex) ?? displayIndex;
-  }
-  setSort(fieldId, direction) {
-    this._localSort.value = {
-      type: "active",
-      sort: {
-        fieldId,
-        direction
-      }
-    };
-  }
-  toggleSort(fieldId) {
-    if (!this._view || !this.sorting || this.sorting.fieldId !== fieldId) {
-      return;
-    }
-    switch (this.sorting.direction) {
-      case "asc": {
-        this.setSort(fieldId, "desc");
-        break;
-      }
-      case "desc": {
-        this.setSort(fieldId, "asc");
-        break;
-      }
-    }
-  }
-  clearSort() {
-    this._localSort.value = {
-      type: "cleared"
-    };
-  }
-  save() {
-    if (this._view && this._localSort.value !== void 0) {
-      if (this._localSort.value.type === "active") {
-        this._view.query.sort = [
-          this._localSort.value.sort
-        ];
-      } else {
-        this._view.query.sort = [];
-      }
-      this._localSort.value = void 0;
-    }
-  }
-  //
-  // Initialisation.
-  //
-  initialiseSortedRows() {
-    return computed2(() => {
-      this._displayToDataIndex.clear();
-      const sort = this.sorting;
-      if (!sort || !this._view) {
-        return this._rows.value;
-      }
-      const field = this._view.fields.find((f) => f.id === sort.fieldId);
-      if (!field) {
-        return this._rows.value;
-      }
-      const { props } = this._projection.getFieldProjection(field.id);
-      const dataWithIndices = this._rows.value.map((item, index) => {
-        const sortValue = this.getSortValue(props, field, item);
-        const isEmpty = !(props.type === TypeEnum2.Boolean) && (sortValue == null || sortValue === "");
-        return {
-          item,
-          index,
-          value: sortValue,
-          isEmpty
-        };
-      });
-      const ordered = orderBy(dataWithIndices, [
-        "isEmpty",
-        "value"
-      ], [
-        "asc",
-        sort.direction
-      ]);
-      ordered.forEach(({ index: dataIndex }, displayIndex) => {
-        if (displayIndex !== dataIndex) {
-          this._displayToDataIndex.set(displayIndex, dataIndex);
-        }
-      });
-      return ordered.map(({ item }) => item);
-    });
-  }
-  getSortValue(props, field, item) {
-    const { type, format } = props;
-    const value = getValue(item, field.path);
-    if (type === TypeEnum2.Boolean) {
-      return !!value;
-    }
-    if (type === TypeEnum2.Number) {
-      return value;
-    }
-    if (value == null) {
-      return value;
-    }
-    if (format === FormatEnum2.SingleSelect) {
-      const options = props.options;
-      if (!options) {
-        return void 0;
-      }
-      const option = options.find((option2) => option2.id === value);
-      return option ? options.indexOf(option) : void 0;
-    }
-    if (format === FormatEnum2.Ref && field.referencePath) {
-      const refValue = getValue(value.target, field.referencePath);
-      return refValue;
-    }
-    return formatForDisplay({
-      type,
-      format,
-      value
-    });
-  }
-};
-
-// packages/ui/react-ui-table/src/util/tag.ts
-var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
-var extractTagIds = (value) => {
-  if (typeof value !== "string") {
-    return void 0;
-  }
-  const ids = [];
-  let match;
-  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
-    if (match[2]) {
-      ids.push(match[2]);
-    }
-  }
-  return ids.length > 0 ? ids : void 0;
-};
-
-// packages/ui/react-ui-table/src/model/table-model.ts
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
-var defaultFeatures = {
-  selection: {
-    enabled: true,
-    mode: "multiple"
-  },
-  dataEditable: false,
-  schemaEditable: false
-};
-var TableModel = class extends Resource2 {
-  constructor({ id, space, view, projection, features = {}, sorting = [], pinnedRows = {
-    top: [],
-    bottom: []
-  }, rowActions = [], onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
-    super();
-    this._visibleRange = signal3({
-      start: {
-        row: 0,
-        col: 0
-      },
-      end: {
-        row: 0,
-        col: 0
-      }
-    });
-    this._rows = signal3([]);
-    //
-    // Data
-    //
-    this.setRows = (obj) => {
-      this._rows.value = obj;
-    };
-    this.getRowCount = () => this._rows.value.length;
-    this.getColumnCount = () => this._view?.fields.length ?? 0;
-    this.insertRow = (rowIndex) => {
-      const row = rowIndex !== void 0 ? this._sorting.getDataIndex(rowIndex) : this._rows.value.length;
-      this._onInsertRow?.(row);
-    };
-    this.deleteRow = (rowIndex) => {
-      const row = this._sorting.getDataIndex(rowIndex);
-      const obj = this._rows.value[row];
-      const objectsToDelete = [];
-      if (this.features.selection.enabled && this._selection.hasSelection.value) {
-        const selectedRows = this._selection.getSelectedRows();
-        objectsToDelete.push(...selectedRows);
-      } else {
-        objectsToDelete.push(obj);
-      }
-      this._onDeleteRows?.(row, objectsToDelete);
-    };
-    this.handleRowAction = (actionId, rowIndex) => {
-      if (!this._onRowAction) {
-        return;
-      }
-      const row = this._sorting.getDataIndex(rowIndex);
-      const data = this._rows.value[row];
-      if (data) {
-        this._onRowAction(actionId, data);
-      }
-    };
-    this.getCellData = ({ col, row }) => {
-      const fields = this._view?.fields ?? [];
-      if (col < 0 || col >= fields.length) {
-        return void 0;
-      }
-      const field = fields[col];
-      const dataIndex = this._sorting.getDataIndex(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.target, field.referencePath);
-        }
-        default: {
-          return formatForEditing({
-            type: props.type,
-            format: props.format,
-            value
-          });
-        }
-      }
-    };
-    this.validateCellData = async ({ col, row }, value) => {
-      const rowIdx = this._sorting.getDataIndex(row);
-      const fields = this._view?.fields ?? [];
-      if (col < 0 || col >= fields.length) {
-        return {
-          valid: false,
-          error: "Invalid column index"
-        };
-      }
-      const field = fields[col];
-      const { props } = this._projection.getFieldProjection(field.id);
-      const currentRow = this._rows.value[rowIdx];
-      invariant(currentRow, "Invalid row index", {
-        F: __dxlog_file,
-        L: 355,
-        S: this,
-        A: [
-          "currentRow",
-          "'Invalid row index'"
-        ]
-      });
-      const snapshot = getSnapshot(currentRow);
-      const transformedValue = editorTextToCellValue(props, value);
-      setValue(snapshot, field.path, transformedValue);
-      const schema = getSchema(currentRow);
-      invariant(schema, void 0, {
-        F: __dxlog_file,
-        L: 365,
-        S: this,
-        A: [
-          "schema",
-          ""
-        ]
-      });
-      const validationResult = validateSchema(schema, snapshot);
-      if (validationResult && validationResult.length > 0) {
-        const error = validationResult[0];
-        invariant(error.path === field.path, void 0, {
-          F: __dxlog_file,
-          L: 370,
-          S: this,
-          A: [
-            "error.path === field.path",
-            ""
-          ]
-        });
-        return {
-          valid: false,
-          error: error.message
-        };
-      }
-      return {
-        valid: true
-      };
-    };
-    this.setCellData = ({ col, row }, value) => {
-      const rowIdx = this._sorting.getDataIndex(row);
-      const fields = this._view?.fields ?? [];
-      if (col < 0 || col >= fields.length) {
-        return;
-      }
-      const field = fields[col];
-      const { props } = this._projection.getFieldProjection(field.id);
-      const transformedValue = editorTextToCellValue(props, value);
-      if (props.format === FormatEnum3.Ref && !isLiveObject(value)) {
-        return;
-      }
-      setValue(this._rows.value[rowIdx], field.path, transformedValue);
-    };
-    this._id = id;
-    this._space = space;
-    this._view = view;
-    this._projection = projection;
-    this._features = {
-      ...defaultFeatures,
-      ...features
-    };
-    invariant(!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === "single"), "Single selection is not compatible with editable tables.", {
-      F: __dxlog_file,
-      L: 126,
-      S: this,
-      A: [
-        "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
-        "'Single selection is not compatible with editable tables.'"
-      ]
-    });
-    this._sorting = new TableSorting(this._rows, this._view, projection);
-    if (sorting.length > 0) {
-      const [sort] = sorting;
-      this._sorting.setSort(sort.fieldId, sort.direction);
-    }
-    this._pinnedRows = pinnedRows;
-    this._rowActions = rowActions;
-    this._onInsertRow = onInsertRow;
-    this._onDeleteRows = onDeleteRows;
-    this._onDeleteColumn = onDeleteColumn;
-    this._onCellUpdate = onCellUpdate;
-    this._onRowOrderChange = onRowOrderChange;
-    this._onRowAction = onRowAction;
-  }
-  get id() {
-    return this._id;
-  }
-  get space() {
-    return this._space;
-  }
-  get view() {
-    return this._view;
-  }
-  get projection() {
-    return this._projection;
-  }
-  get rows() {
-    return this._sorting.sortedRows;
-  }
-  get features() {
-    return this._features;
-  }
-  /**
-  * @reactive
-  */
-  get sorting() {
-    return this._sorting;
-  }
-  /**
-  * Gets the row data at the specified display index.
-  */
-  getRowAt(displayIndex) {
-    if (displayIndex < 0 || displayIndex >= this._sorting.sortedRows.value.length) {
-      return void 0;
-    }
-    return this._sorting.sortedRows.value[displayIndex];
-  }
-  get pinnedRows() {
-    return this._pinnedRows;
-  }
-  get columnMeta() {
-    invariant(this._columnMeta, void 0, {
-      F: __dxlog_file,
-      L: 195,
-      S: this,
-      A: [
-        "this._columnMeta",
-        ""
-      ]
-    });
-    return this._columnMeta;
-  }
-  get selection() {
-    return this._selection;
-  }
-  /** @reactive */
-  get isViewDirty() {
-    return this._sorting.isDirty;
-  }
-  get rowActions() {
-    return this._rowActions;
-  }
-  //
-  // Initialisation
-  //
-  async _open() {
-    this.initializeColumnMeta();
-    this.initializeEffects();
-    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? "multiple", () => this._onRowOrderChange?.());
-    await this._selection.open(this._ctx);
-  }
-  initializeColumnMeta() {
-    this._columnMeta = computed3(() => {
-      const fields = this._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
-          }
-        }
-      };
-    });
-  }
-  initializeEffects() {
-    const rowOrderWatcher = effect2(() => {
-      touch(this._sorting.sortedRows.value);
-      this._onRowOrderChange?.();
-    });
-    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._sorting.sortedRows.value[row];
-          this._view?.fields.forEach((field) => touch(getValue2(obj, field.path)));
-          this._onCellUpdate?.({
-            row,
-            col: start.col,
-            plane: "grid"
-          });
-        }));
-      }
-      return () => rowEffects.forEach((cleanup) => cleanup());
-    });
-    this._ctx.onDispose(rowEffectManager);
-  }
-  /**
-  * Updates a cell's value using a transform function.
-  * @param {DxGridPlanePosition} position - The position of the cell to update.
-  * @param {(value: any) => any} update - A function that takes the current value and returns the updated value.
-  */
-  updateCellData({ col, row }, update) {
-    const dataRow = this._sorting.getDataIndex(row);
-    const fields = this._view?.fields ?? [];
-    const field = fields[col];
-    const value = getValue2(this._rows.value[dataRow], field.path);
-    const updatedValue = update(value);
-    setValue(this._rows.value[dataRow], field.path, updatedValue);
-  }
-  //
-  // Column Operations
-  //
-  deleteColumn(fieldId) {
-    if (!this._view) {
-      return;
-    }
-    const field = this._view?.fields.find((field2) => field2.id === fieldId);
-    if (field && this._onDeleteColumn) {
-      this._onDeleteColumn(field.id);
-    }
-  }
-  //
-  // Resize
-  //
-  setColumnWidth(columnIndex, width) {
-    const fields = this._view?.fields ?? [];
-    if (columnIndex < fields.length) {
-      const newWidth = Math.max(0, width);
-      const field = fields[columnIndex];
-      if (field) {
-        field.size = newWidth;
-      }
-    }
-  }
-  //
-  // 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);
-  }
-  //
-  // View operations
-  //
-  saveView() {
-    this._sorting.save();
-  }
-};
-var editorTextToCellValue = (props, value) => {
-  switch (props.format) {
-    case FormatEnum3.Ref: {
-      if (isLiveObject(value)) {
-        return makeRef(value);
-      } else {
-        return value;
-      }
-    }
-    case FormatEnum3.SingleSelect: {
-      const ids = extractTagIds(value);
-      if (ids && ids.length > 0) {
-        return ids[0];
-      } else {
-        return value;
-      }
-    }
-    case FormatEnum3.MultiSelect: {
-      const ids = extractTagIds(value);
-      return ids || value;
-    }
-    default: {
-      return parseValue({
-        type: props.type,
-        format: props.format,
-        value
-      });
-    }
-  }
-};
-
-// packages/ui/react-ui-table/src/model/modal-controller.ts
-import { signal as signal4 } from "@preact/signals-core";
-import { log } from "@dxos/log";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
-var ModalController = class {
-  constructor() {
-    this._state = signal4({
-      type: "closed"
-    });
-    this._triggerRef = {
-      current: null
-    };
-    this.setTrigger = (trigger) => {
-      this._triggerRef.current = trigger;
-    };
-    this.showRowMenu = (rowIndex) => {
-      this._state.value = {
-        type: "row",
-        rowIndex
-      };
-    };
-    this.showColumnMenu = (fieldId) => {
-      this._state.value = {
-        type: "column",
-        fieldId
-      };
-    };
-    this.showColumnCreator = () => {
-      this._state.value = {
-        type: "columnSettings",
-        mode: {
-          type: "create"
-        }
-      };
-    };
-    this.showReferencePanel = (targetId, schemaId) => {
-      this._state.value = {
-        type: "refPanel",
-        targetId,
-        typename: schemaId
-      };
-    };
-    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.openCreateRef = (typename, anchorCell, initialValues, onCreate) => {
-      if (anchorCell) {
-        this._triggerRef.current = anchorCell;
-        this._state.value = {
-          type: "createRefPanel",
-          typename,
-          initialValues,
-          onCreate
-        };
-      } else {
-        log.warn("anchor cell not found while creating new ref", void 0, {
-          F: __dxlog_file2,
-          L: 86,
-          S: this,
-          C: (f, a) => f(...a)
-        });
-      }
-    };
-    this.close = () => {
-      this._state.value = {
-        type: "closed"
-      };
-    };
-  }
-  get state() {
-    return this._state;
-  }
-  get trigger() {
-    return this._triggerRef;
-  }
-};
+  BUTTON_IDENTIFIERS,
+  CONTROL_IDENTIFIERS,
+  CheckboxStory,
+  ModalController,
+  SwitchStory,
+  TableModel,
+  TablePresentation,
+  cellClassesForRowSelection,
+  createTable,
+  getBaseSchema,
+  makeDynamicTable,
+  narrowSchema,
+  tableButtons,
+  tableControls,
+  touch,
+  useAddRow,
+  useTableModel
+} from "./chunk-ZOFFI3JJ.mjs";
+import "./chunk-NXZ4CJYX.mjs";
 
-// packages/ui/react-ui-table/src/model/table-presentation.ts
-import { signal as signal5 } from "@preact/signals-core";
-import { isNotNullable } from "effect/Predicate";
-import { FormatEnum as FormatEnum4, getObjectDXN, getValue as getValue3, TypeEnum as TypeEnum3 } from "@dxos/echo-schema";
-import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
-import { toPlaneCellIndex } from "@dxos/react-ui-grid";
-import { mx } from "@dxos/react-ui-theme";
-import { VIEW_FIELD_LIMIT } from "@dxos/schema";
-var TablePresentation = class {
-  constructor(model, _visibleRange = signal5({
-    start: {
-      row: 0,
-      col: 0
-    },
-    end: {
-      row: 0,
-      col: 0
-    }
-  })) {
-    this.model = model;
-    this._visibleRange = _visibleRange;
-  }
-  getCells(range, plane) {
-    let cells;
-    switch (plane) {
-      case "grid":
-        this._visibleRange.value = range;
-        cells = this.getMainGridCells(range);
-        break;
-      case "frozenRowsStart":
-        cells = this.getHeaderCells(range);
-        break;
-      case "frozenColsStart":
-        cells = this.getSelectionColumnCells(range);
-        break;
-      case "frozenColsEnd":
-        cells = this.getActionColumnCells(range);
-        break;
-      case "fixedStartStart":
-        cells = this.getSelectAllCell();
-        break;
-      case "fixedStartEnd":
-        cells = this.getNewColumnCell();
-        break;
-      default:
-        cells = {};
-    }
-    if (plane === "grid" && this.model.features.dataEditable === false) {
-      Object.values(cells).forEach((cell) => {
-        cell.readonly = "text-select";
-      });
-    }
-    return cells;
-  }
-  getMainGridCells(range) {
-    const cells = {};
-    const fields = this.model.view?.fields ?? [];
-    const addCell = (obj, field, colIndex, displayIndex) => {
-      const { props } = this.model.projection.getFieldProjection(field.id);
-      const cell = {
-        get value() {
-          const value = getValue3(obj, field.path);
-          if (value == null) {
-            return "";
-          }
-          if (props.type === "array") {
-            return "";
-          }
-          switch (props.format) {
-            case FormatEnum4.Boolean:
-            case FormatEnum4.SingleSelect:
-            case FormatEnum4.MultiSelect: {
-              return "";
-            }
-            case FormatEnum4.Ref: {
-              if (!field.referencePath) {
-                return "";
-              }
-              return getValue3(value.target, field.referencePath);
-            }
-            default: {
-              return formatForDisplay2({
-                type: props.type,
-                format: props.format,
-                value
-              });
-            }
-          }
-        }
-      };
-      const classes = [];
-      const formatClasses = cellClassesForFieldType({
-        type: props.type,
-        format: props.format
-      });
-      if (formatClasses) {
-        classes.push(formatClasses);
-      }
-      const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj), this.model.selection.selectionMode);
-      if (rowSelectionClasses) {
-        classes.push(rowSelectionClasses);
-      }
-      if (classes.length > 0) {
-        cell.className = mx(classes.flat());
-      }
-      if (props.type === TypeEnum3.Array) {
-        const targetArray = getValue3(obj, field.path);
-        if (targetArray && Array.isArray(targetArray)) {
-          const getLabel = (value) => {
-            if (!value) {
-              return void 0;
-            }
-            if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-              return String(value);
-            }
-            if (Array.isArray(value)) {
-              return "Array";
-            }
-            if (typeof value === "object" && value.name) {
-              return value.name;
-            }
-            if (typeof value === "object" && value.value) {
-              return `${value.value}`;
-            }
-            return "Object";
-          };
-          const tags = targetArray.map(getLabel).filter(isNotNullable).map((title) => {
-            return `<span class="dx-tag rounded-xl" data-hue="neutral">${title}</span>`;
-          }).join("");
-          cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
-        }
-      }
-      if (props.format === FormatEnum4.Ref && props.referenceSchema) {
-        const targetObj = getValue3(obj, field.path)?.target;
-        if (targetObj) {
-          const dxn = getObjectDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
-        }
-      }
-      if (props.format === FormatEnum4.Boolean) {
-        const value = getValue3(obj, field.path);
-        cell.accessoryHtml = tableControls.switch.render({
-          colIndex,
-          rowIndex: displayIndex,
-          checked: value ?? false
-        });
-        cell.readonly = "no-text-select";
-      }
-      if (props.format === FormatEnum4.SingleSelect) {
-        const value = getValue3(obj, field.path);
-        const options = this.model.projection.getFieldProjection(field.id).props.options;
-        if (options) {
-          const option = options.find((o) => o.id === value);
-          if (option) {
-            cell.accessoryHtml = `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
-          }
-        }
-      }
-      if (props.format === FormatEnum4.MultiSelect) {
-        const values = getValue3(obj, field.path);
-        const options = this.model.projection.getFieldProjection(field.id).props.options;
-        if (options && values && values.length > 0) {
-          const tags = values.map((value) => {
-            const option = options.find((o) => o.id === value);
-            if (option) {
-              return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
-            }
-            return null;
-          }).filter(Boolean).join(" ");
-          if (tags) {
-            cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1">${tags}</div>`;
-          }
-        }
-      }
-      const idx = toPlaneCellIndex({
-        col: colIndex,
-        row: displayIndex
-      });
-      cells[idx] = cell;
-    };
-    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
-      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-        const field = fields[col];
-        if (!field) {
-          continue;
-        }
-        addCell(this.model.rows.value[row], field, col, row);
-      }
-    }
-    return cells;
-  }
-  getHeaderCells(range) {
-    const cells = {};
-    const fields = this.model.view?.fields ?? [];
-    for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-      const { field, props } = this.model.projection.getFieldProjection(fields[col].id);
-      const sorting = this.model.sorting?.sorting;
-      const direction = sorting?.fieldId === field.id ? sorting.direction : void 0;
-      cells[toPlaneCellIndex({
-        col,
-        row: 0
-      })] = {
-        // TODO(burdon): Use same logic as form for fallback title.
-        value: props.title ?? field.path,
-        readonly: true,
-        resizeHandle: "col",
-        accessoryHtml: `
-          ${direction !== void 0 ? tableButtons.sort.render({
-          fieldId: field.id,
-          direction
-        }) : ""}
-          ${tableButtons.columnSettings.render({
-          fieldId: field.id
-        })}
-        `,
-        className: "!bg-toolbarSurface"
-      };
-    }
-    return cells;
-  }
-  getSelectionColumnCells(range) {
-    const cells = {};
-    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
-      const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
-      cells[toPlaneCellIndex({
-        col: 0,
-        row
-      })] = {
-        value: "",
-        readonly: "no-text-select",
-        className: classes ? mx(classes) : void 0,
-        accessoryHtml: tableControls.checkbox.render({
-          rowIndex: row,
-          checked: isSelected
-        })
-      };
-    }
-    return cells;
-  }
-  getActionColumnCells(range) {
-    const cells = {};
-    for (let row = range.start.row; row <= range.end.row && row < this.model.getRowCount(); row++) {
-      const isSelected = this.model.selection.isRowIndexSelected(row);
-      const classes = cellClassesForRowSelection(isSelected, this.model.selection.selectionMode);
-      cells[toPlaneCellIndex({
-        col: 0,
-        row
-      })] = {
-        value: "",
-        readonly: true,
-        className: classes ? mx(classes) : void 0,
-        accessoryHtml: tableButtons.rowMenu.render({
-          rowIndex: row
-        })
-      };
-    }
-    return cells;
-  }
-  getSelectAllCell() {
-    if (!this.model.features.selection.enabled || this.model.selection.selectionMode === "single") {
-      return {
-        [toPlaneCellIndex({
-          col: 0,
-          row: 0
-        })]: {
-          className: "!bg-toolbarSurface",
-          readonly: true,
-          value: ""
-        }
-      };
-    }
-    return {
-      [toPlaneCellIndex({
-        col: 0,
-        row: 0
-      })]: {
-        accessoryHtml: tableControls.checkbox.render({
-          rowIndex: 0,
-          header: true,
-          checked: this.model.selection.allRowsSeleted.value
-        }),
-        className: "!bg-toolbarSurface",
-        readonly: true,
-        value: ""
-      }
-    };
-  }
-  getNewColumnCell() {
-    return {
-      [toPlaneCellIndex({
-        col: 0,
-        row: 0
-      })]: {
-        accessoryHtml: this.model.features.schemaEditable ? tableButtons.addColumn.render({
-          disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
-        }) : void 0,
-        className: "!bg-toolbarSurface",
-        readonly: true,
-        value: ""
+// src/translations.ts
+var translationKey = "react-ui-table";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "object placeholder": "New table",
+        "create object label": "Create table",
+        "table name placeholder": "Table name",
+        "settings title": "Table settings",
+        "table schema label": "Record type",
+        "new schema": "New record type",
+        "continue label": "Continue",
+        "create stack section label": "Create table",
+        "add row label": "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",
+        "create new object label": "Create new object \u201C{{text}}\u201D",
+        "save view label": "Save changes to view"
       }
-    };
-  }
-};
-var cellClassesForRowSelection = (selected, selectionMode) => {
-  if (!selected) {
-    if (selectionMode === "single") {
-      return [
-        "!cursor-pointer"
-      ];
-    } else {
-      return void 0;
     }
   }
-  switch (selectionMode) {
-    case "single":
-      return [
-        "!bg-currentRelated hover:bg-hoverSurface",
-        "!cursor-pointer"
-      ];
-    case "multiple":
-      return [
-        "!bg-gridCellSelected"
-      ];
-  }
-};
+];
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
-import { FormatEnum as FormatEnum5, TypeEnum as TypeEnum4 } from "@dxos/echo-schema";
+// src/components/Table/Table.tsx
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import React8, { forwardRef, useCallback as useCallback5, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo5, useState as useState4 } from "react";
+import { Filter } from "@dxos/echo";
+import { getValue } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
+import { getSpace as getSpace2 } from "@dxos/react-client/echo";
+import { useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { useAttention } from "@dxos/react-ui-attention";
+import { Grid, closestCell, gridSeparatorBlockEnd, gridSeparatorInlineEnd } from "@dxos/react-ui-grid";
+import { mx } from "@dxos/react-ui-theme";
+import { isNotFalsy, safeParseInt } from "@dxos/util";
+
+// src/components/TableCellEditor/TableCellEditor.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { FormatEnum, TypeEnum } from "@dxos/echo-schema";
+import { invariant as invariant2 } from "@dxos/invariant";
 import { useThemeContext } from "@dxos/react-ui";
 import { createMarkdownExtensions } from "@dxos/react-ui-editor";
-import { cellQuery, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext4, GridCellEditor } from "@dxos/react-ui-grid";
-import { tagPickerExtension, createLinks } from "@dxos/react-ui-tag-picker";
+import { GridCellEditor, cellQuery, editorKeys, parseCellIndex as parseCellIndex2, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
+import { createLinks, tagPicker } from "@dxos/react-ui-tag-picker";
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/CellValidationMessage.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5 from "react";
-import { useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
-var CellValidationMessage = ({ validationError, __gridScope }) => {
-  var _effect = _useSignals5();
+// src/components/TableCellEditor/CellValidationMessage.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React from "react";
+import { useGridContext } from "@dxos/react-ui-grid";
+var CellValidationMessage = ({ validationError, variant = "error", __gridScope }) => {
+  var _effect = _useSignals();
   try {
-    const { editing, editBox: box } = useGridContext2("GridSheetCellEditor", __gridScope);
+    const { editing, editBox: box } = useGridContext("GridSheetCellEditor", __gridScope);
     if (!editing || !validationError) {
       return null;
     }
-    return /* @__PURE__ */ React5.createElement("div", {
+    const bgClass = variant === "error" ? "bg-errorSurface" : "bg-warningSurface";
+    const textClass = variant === "error" ? "text-errorSurfaceText" : "text-warningSurfaceText";
+    return /* @__PURE__ */ React.createElement("div", {
       role: "none",
-      className: "absolute bg-errorSurface text-errorSurfaceText rounded-bs-sm text-xs p-1",
+      className: `absolute ${bgClass} ${textClass} rounded-bs-sm text-xs p-1`,
       style: {
         ...{
           "--dx-gridCellWidth": `${box?.inlineSize ?? 200}px`
@@ -1732,108 +106,7 @@ var CellValidationMessage = ({ validationError, __gridScope }) => {
   }
 };
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef } from "react";
-import { getSnapshot as getSnapshot2 } from "@dxos/echo-schema";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { Popover as Popover3 } from "@dxos/react-ui";
-import { Form as Form2 } from "@dxos/react-ui-form";
-import { parseCellIndex, useGridContext as useGridContext3 } from "@dxos/react-ui-grid";
-import { getDeep, setDeep } from "@dxos/util";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
-var FormCellEditor = ({ fieldProjection, model, schema, __gridScope }) => {
-  var _effect = _useSignals6();
-  try {
-    const { editing, setEditing } = useGridContext3("ArrayEditor", __gridScope);
-    const cellRef = useRef(null);
-    useEffect2(() => {
-      if (editing && editing.cellElement) {
-        cellRef.current = editing.cellElement;
-      }
-    }, [
-      editing?.cellElement
-    ]);
-    const narrowedSchema = useMemo3(() => {
-      if (!schema) {
-        return void 0;
-      }
-      return narrowSchema(schema, [
-        fieldProjection.field.path
-      ]);
-    }, [
-      JSON.stringify(schema),
-      fieldProjection.field.path
-    ]);
-    const originalRow = useMemo3(() => {
-      if (model && editing) {
-        const cell = parseCellIndex(editing.index);
-        const row = model.getRowAt(cell.row);
-        invariant2(row, void 0, {
-          F: __dxlog_file3,
-          L: 47,
-          S: void 0,
-          A: [
-            "row",
-            ""
-          ]
-        });
-        return row;
-      }
-      return void 0;
-    }, [
-      model,
-      editing
-    ]);
-    const formValues = useMemo3(() => {
-      if (originalRow) {
-        return getSnapshot2(originalRow);
-      }
-    }, [
-      originalRow
-    ]);
-    const handleSave = useCallback3((values) => {
-      const path = fieldProjection.field.path;
-      const value = getDeep(values, [
-        path
-      ]);
-      setDeep(originalRow, [
-        path
-      ], value);
-      setEditing(null);
-    }, [
-      fieldProjection.field.path,
-      originalRow
-    ]);
-    const handleOpenChange = useCallback3((nextOpen) => {
-      if (nextOpen === false) {
-        setEditing(null);
-      }
-    }, [
-      setEditing
-    ]);
-    if (!editing) {
-      return null;
-    }
-    return /* @__PURE__ */ React6.createElement(Popover3.Root, {
-      open: editing !== null,
-      onOpenChange: handleOpenChange
-    }, /* @__PURE__ */ React6.createElement(Popover3.VirtualTrigger, {
-      virtualRef: cellRef
-    }), /* @__PURE__ */ React6.createElement(Popover3.Content, {
-      tabIndex: -1,
-      classNames: "popover-card-width"
-    }, /* @__PURE__ */ React6.createElement(Popover3.Arrow, null), /* @__PURE__ */ React6.createElement(Popover3.Viewport, null, /* @__PURE__ */ React6.createElement(Form2, {
-      values: formValues,
-      schema: narrowedSchema,
-      onSave: handleSave
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// packages/ui/react-ui-table/src/components/TableCellEditor/extension.ts
+// src/components/TableCellEditor/extension.ts
 import { autocompletion, pickedCompletion } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
 var completion = ({ debug, onQuery, onMatch }) => {
@@ -1872,28 +145,136 @@ var completion = ({ debug, onQuery, onMatch }) => {
   ];
 };
 
-// packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
+// src/components/TableCellEditor/FormCellEditor.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import React2, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getSnapshot } from "@dxos/echo-schema";
+import { invariant } from "@dxos/invariant";
+import { Popover } from "@dxos/react-ui";
+import { Form } from "@dxos/react-ui-form";
+import { parseCellIndex, useGridContext as useGridContext2 } from "@dxos/react-ui-grid";
+import { getDeep, setDeep } from "@dxos/util";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/FormCellEditor.tsx";
+var FormCellEditor = ({ fieldProjection, model, schema, onSave, __gridScope }) => {
+  var _effect = _useSignals2();
+  try {
+    const { editing: contextEditing, setEditing } = useGridContext2("ArrayEditor", __gridScope);
+    const [editing, setLocalEditing] = useState(false);
+    const anchorRef = useRef(null);
+    useEffect(() => {
+      if (contextEditing && contextEditing.cellElement) {
+        anchorRef.current = contextEditing.cellElement.querySelector(".dx-grid__cell__content");
+        setLocalEditing(true);
+      } else {
+        anchorRef.current = null;
+        setLocalEditing(false);
+      }
+    }, [
+      contextEditing
+    ]);
+    const narrowedSchema = useMemo(() => {
+      if (!schema) {
+        return void 0;
+      }
+      return narrowSchema(schema, [
+        fieldProjection.field.path
+      ]);
+    }, [
+      JSON.stringify(schema),
+      fieldProjection.field.path
+    ]);
+    const originalRow = useMemo(() => {
+      if (model && contextEditing) {
+        const cell = parseCellIndex(contextEditing.index);
+        const row = model.getRowAt(cell.row);
+        invariant(row, void 0, {
+          F: __dxlog_file,
+          L: 55,
+          S: void 0,
+          A: [
+            "row",
+            ""
+          ]
+        });
+        return row;
+      }
+      return void 0;
+    }, [
+      model,
+      contextEditing
+    ]);
+    const formValues = useMemo(() => {
+      if (originalRow) {
+        return getSnapshot(originalRow);
+      }
+    }, [
+      originalRow
+    ]);
+    const handleSave = useCallback((values) => {
+      const path = fieldProjection.field.path;
+      const value = getDeep(values, [
+        path
+      ]);
+      setDeep(originalRow, [
+        path
+      ], value);
+      setEditing(null);
+      setLocalEditing(false);
+      onSave?.();
+    }, [
+      fieldProjection.field.path,
+      originalRow
+    ]);
+    const handleOpenChange = useCallback((nextOpen) => {
+      if (nextOpen === false) {
+        setEditing(null);
+        onSave?.();
+      }
+      setLocalEditing(nextOpen);
+    }, []);
+    if (!editing) {
+      return null;
+    }
+    return /* @__PURE__ */ React2.createElement(Popover.Root, {
+      open: editing,
+      onOpenChange: handleOpenChange
+    }, /* @__PURE__ */ React2.createElement(Popover.VirtualTrigger, {
+      virtualRef: anchorRef
+    }), /* @__PURE__ */ React2.createElement(Popover.Content, {
+      tabIndex: -1,
+      classNames: "popover-card-width density-fine"
+    }, /* @__PURE__ */ React2.createElement(Popover.Arrow, null), /* @__PURE__ */ React2.createElement(Popover.Viewport, null, /* @__PURE__ */ React2.createElement(Form, {
+      values: formValues,
+      schema: narrowedSchema,
+      onSave: handleSave
+    }))));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/TableCellEditor/TableCellEditor.tsx
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/TableCellEditor/TableCellEditor.tsx";
 var newValue = Symbol.for("newValue");
 var createOption = (text) => ({
   [newValue]: true,
   text
 });
 var isCreateOption = (data) => typeof data === "object" && data[newValue];
-var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gridScope }) => {
-  var _effect = _useSignals7();
+var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onSave, onQuery, __gridScope }) => {
+  var _effect = _useSignals3();
   try {
-    const { editing } = useGridContext4("TableValueEditor", __gridScope);
-    const fieldProjection = useMemo4(() => {
+    const { editing } = useGridContext3("TableValueEditor", __gridScope);
+    const fieldProjection = useMemo2(() => {
       if (!model || !editing) {
         return;
       }
       const { col } = parseCellIndex2(editing.index);
-      const field = model.projection.view.fields[col];
+      const field = model.projection.fields[col];
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
-      invariant3(fieldProjection2, void 0, {
-        F: __dxlog_file4,
-        L: 74,
+      invariant2(fieldProjection2, void 0, {
+        F: __dxlog_file2,
+        L: 76,
         S: void 0,
         A: [
           "fieldProjection",
@@ -1905,43 +286,51 @@ var TableValueEditor = ({ model, modals, schema, onEnter, onFocus, onQuery, __gr
       model,
       editing
     ]);
-    if (fieldProjection?.props.type === TypeEnum4.Array) {
-      return /* @__PURE__ */ React7.createElement(FormCellEditor, {
+    if (fieldProjection?.props.type === TypeEnum.Array || fieldProjection?.props.format === FormatEnum.SingleSelect) {
+      return /* @__PURE__ */ React3.createElement(FormCellEditor, {
         fieldProjection,
         model,
         schema,
-        __gridScope
+        __gridScope,
+        onSave
       });
     }
-    return /* @__PURE__ */ React7.createElement(TableCellEditor, {
+    return /* @__PURE__ */ React3.createElement(TableCellEditor, {
       model,
       modals,
       onEnter,
       onFocus,
       onQuery,
+      onSave,
       __gridScope
     });
   } finally {
     _effect.f();
   }
 };
-var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }) => {
-  var _effect = _useSignals7();
+var editorSlots = {
+  scroller: {
+    className: "!plb-[--dx-grid-cell-editor-padding-block]"
+  }
+};
+var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, onSave, __gridScope }) => {
+  var _effect = _useSignals3();
   try {
-    const { id: gridId, editing, setEditing } = useGridContext4("TableCellEditor", __gridScope);
+    const { id: gridId, editing, setEditing } = useGridContext3("TableCellEditor", __gridScope);
     const suppressNextBlur = useRef2(false);
     const { themeMode } = useThemeContext();
-    const [_validationError, setValidationError] = useState2(null);
-    const fieldProjection = useMemo4(() => {
+    const [validationError, setValidationError] = useState2(null);
+    const [validationVariant, setValidationVariant] = useState2("error");
+    const fieldProjection = useMemo2(() => {
       if (!model || !editing) {
         return;
       }
       const { col } = parseCellIndex2(editing.index);
-      const field = model.projection.view.fields[col];
+      const field = model.projection.fields[col];
       const fieldProjection2 = model.projection.getFieldProjection(field.id);
-      invariant3(fieldProjection2, void 0, {
-        F: __dxlog_file4,
-        L: 116,
+      invariant2(fieldProjection2, void 0, {
+        F: __dxlog_file2,
+        L: 135,
         S: void 0,
         A: [
           "fieldProjection",
@@ -1953,20 +342,53 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       model,
       editing
     ]);
-    const handleEnter = useCallback4(async (value) => {
+    useEffect2(() => {
+      if (!model || !editing || !fieldProjection) {
+        setValidationError(null);
+        return;
+      }
+      const cell = parseCellIndex2(editing.index);
+      const { row, col } = cell;
+      if (model.isDraftCell(cell)) {
+        const field = model.projection.fields[col];
+        const hasValidationError = model.hasDraftRowValidationError(row, field.path);
+        if (hasValidationError) {
+          const draftRows = model.draftRows.value;
+          if (row >= 0 && row < draftRows.length) {
+            const draftRow = draftRows[row];
+            const validationError2 = draftRow.validationErrors?.find((error) => error.path === field.path);
+            if (validationError2) {
+              setValidationError(validationError2.message);
+              setValidationVariant("warning");
+            }
+          }
+        } else {
+          setValidationError(null);
+        }
+      } else {
+        setValidationError(null);
+      }
+    }, [
+      model,
+      editing,
+      fieldProjection
+    ]);
+    const handleEnter = useCallback2(async (value) => {
       if (!model || !editing) {
         return;
       }
       const cell = parseCellIndex2(editing.index);
-      const result = await model.validateCellData(cell, value);
-      if (result.valid) {
+      const validationResult = await model.validateCellData(cell, value);
+      if (validationResult.valid) {
         setValidationError(null);
         model.setCellData(cell, value);
         onEnter?.(cell);
         onFocus?.();
         setEditing(null);
+        onSave?.();
       } else {
-        setValidationError(result.error);
+        setValidationError(validationResult.error);
+        setValidationVariant("error");
       }
     }, [
       model,
@@ -1975,7 +397,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       onFocus,
       setEditing
     ]);
-    const handleBlur = useCallback4(async (value) => {
+    const handleBlur = useCallback2(async (value) => {
       if (!model || !editing) {
         return;
       }
@@ -1986,7 +408,7 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       model,
       editing
     ]);
-    const handleClose = useCallback4(async (value, event) => {
+    const handleClose = useCallback2(async (value, event) => {
       if (!model || !editing || !fieldProjection) {
         return;
       }
@@ -1997,16 +419,19 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
           setValidationError(null);
           model.setCellData(cell, value);
           setEditing(null);
+          onSave?.();
           onEnter?.(cell);
           if (event && onFocus) {
-            onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
+            onFocus(determineNavigationAxis(event), determineNavigationDelta(event), cell);
           }
         } else {
           setValidationError(result.error);
+          setValidationVariant("error");
         }
       } else {
         setValidationError(null);
         setEditing(null);
+        onSave?.();
         if (event && onFocus) {
           onFocus(determineNavigationAxis(event), determineNavigationDelta(event));
         }
@@ -2017,9 +442,10 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
       onFocus,
       onEnter,
       fieldProjection,
-      setEditing
+      setEditing,
+      onSave
     ]);
-    const extension = useMemo4(() => {
+    const extension = useMemo2(() => {
       if (!fieldProjection) {
         return [];
       }
@@ -2032,15 +458,15 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
         })
       ];
       const format = fieldProjection.props.format;
-      if (format === FormatEnum5.SingleSelect || format === FormatEnum5.MultiSelect) {
+      if (format === FormatEnum.SingleSelect || format === FormatEnum.MultiSelect) {
         extension2.push(createMarkdownExtensions({
           themeMode
         }));
         const options = fieldProjection.props.options || [];
-        const mode = format === FormatEnum5.SingleSelect ? "single-select" : "multi-select";
-        extension2.push(tagPickerExtension({
+        const mode = format === FormatEnum.SingleSelect ? "single-select" : "multi-select";
+        extension2.push(tagPicker({
           mode,
-          inGrid: true,
+          keymap: false,
           onSearch: (text, selectedIds) => {
             return options.filter((option) => selectedIds.indexOf(option.id) === -1 && (text.length === 0 || option.title.toLowerCase().includes(text.toLowerCase()))).map((option) => ({
               id: option.id,
@@ -2062,135 +488,373 @@ var TableCellEditor = ({ model, modals, onEnter, onFocus, onQuery, __gridScope }
           }
         }));
       }
-      if (onQuery) {
-        switch (fieldProjection.props.format) {
-          case FormatEnum5.Ref: {
-            extension2.push([
-              completion({
-                onQuery: (text) => onQuery(fieldProjection, text),
-                onMatch: (data) => {
-                  if (model && editing && modals) {
-                    if (isCreateOption(data)) {
-                      const { field, props } = fieldProjection;
-                      if (props.referenceSchema) {
-                        suppressNextBlur.current = true;
-                        modals.openCreateRef(props.referenceSchema, document.querySelector(cellQuery(editing.index, gridId)), {
-                          [field.referencePath]: data.text
-                        }, (data2) => {
-                          void handleEnter(data2);
-                        });
-                      }
-                    } else {
-                      void handleEnter(data);
-                    }
-                  }
-                }
-              })
-            ]);
-            break;
-          }
-        }
+      if (onQuery) {
+        switch (fieldProjection.props.format) {
+          case FormatEnum.Ref: {
+            extension2.push([
+              completion({
+                onQuery: (text) => onQuery(fieldProjection, text),
+                onMatch: (data) => {
+                  if (model && editing && modals) {
+                    if (isCreateOption(data)) {
+                      const { field, props } = fieldProjection;
+                      if (props.referenceSchema) {
+                        suppressNextBlur.current = true;
+                        modals.openCreateRef(props.referenceSchema, document.querySelector(cellQuery(editing.index, gridId)), {
+                          [field.referencePath]: data.text
+                        }, (data2) => {
+                          void handleEnter(data2);
+                        });
+                      }
+                    } else {
+                      void handleEnter(data);
+                    }
+                  }
+                }
+              })
+            ]);
+            break;
+          }
+        }
+      }
+      return extension2;
+    }, [
+      model,
+      modals,
+      editing,
+      fieldProjection,
+      handleClose,
+      themeMode
+    ]);
+    const getCellContent = useCallback2(() => {
+      if (model && editing) {
+        const cell = parseCellIndex2(editing.index);
+        const { col } = cell;
+        const field = model.projection.fields[col];
+        const fieldProjection2 = model.projection.getFieldProjection(field.id);
+        if (fieldProjection2?.props.format === FormatEnum.SingleSelect || fieldProjection2?.props.format === FormatEnum.MultiSelect) {
+          const value2 = model.getCellData(cell);
+          if (value2 !== void 0) {
+            const options = fieldProjection2.props.options || [];
+            if (fieldProjection2.props.format === FormatEnum.MultiSelect) {
+              const tagItems = value2.split(",").map((id) => {
+                const option = options.find((o) => o.id === id);
+                if (option) {
+                  return {
+                    id,
+                    label: option.title,
+                    hue: option.color
+                  };
+                }
+                return void 0;
+              }).filter((item) => item !== void 0);
+              return createLinks(tagItems);
+            } else {
+              const option = options.find((o) => o.id === value2);
+              if (option) {
+                const tagItem = {
+                  id: value2,
+                  label: option.title,
+                  hue: option.color
+                };
+                return createLinks([
+                  tagItem
+                ]);
+              }
+            }
+          }
+          return "";
+        }
+        const value = model.getCellData(cell);
+        return value !== void 0 ? String(value) : "";
+      }
+    }, [
+      model,
+      editing
+    ]);
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(CellValidationMessage, {
+      validationError,
+      variant: validationVariant,
+      __gridScope
+    }), /* @__PURE__ */ React3.createElement(GridCellEditor, {
+      extension,
+      getCellContent,
+      onBlur: handleBlur,
+      slots: editorSlots
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+var determineNavigationAxis = ({ key }) => {
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowDown":
+    case "Enter": {
+      return "row";
+    }
+    case "ArrowLeft":
+    case "ArrowRight":
+    case "Tab":
+      return "col";
+  }
+};
+var determineNavigationDelta = ({ key, shift }) => {
+  switch (key) {
+    case "ArrowUp":
+    case "ArrowLeft":
+      return -1;
+    case "ArrowDown":
+    case "ArrowRight":
+      return 1;
+  }
+  return shift ? -1 : 1;
+};
+
+// src/components/Table/ColumnActionsMenu.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+import React4 from "react";
+import { DropdownMenu, useTranslation } from "@dxos/react-ui";
+var ColumnActionsMenu = ({ model, modals }) => {
+  var _effect = _useSignals4();
+  try {
+    const { t } = useTranslation(translationKey);
+    const state = modals.state.value;
+    if (state?.type !== "column") {
+      return null;
+    }
+    const currentSort = model.sorting?.sorting;
+    const isCurrentColumnSorted = currentSort?.fieldId === state.fieldId;
+    return /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
+      modal: false,
+      open: true,
+      onOpenChange: modals.close
+    }, /* @__PURE__ */ React4.createElement(DropdownMenu.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, (!isCurrentColumnSorted || currentSort?.direction === "asc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-sort-descending",
+      onClick: () => model.sorting?.setSort(state.fieldId, "desc")
+    }, t("column action sort descending")), (!isCurrentColumnSorted || currentSort?.direction === "desc") && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-sort-ascending",
+      onClick: () => model.sorting?.setSort(state.fieldId, "asc")
+    }, t("column action sort ascending")), isCurrentColumnSorted && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-clear-sort",
+      onClick: () => model.sorting?.clearSort()
+    }, t("column action clear sorting")), model.getColumnCount() > 1 && model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-delete",
+      onClick: () => model.deleteColumn(state.fieldId)
+    }, t("column action delete")), model.features.schemaEditable && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+      "data-testid": "column-settings",
+      onClick: () => modals.openColumnSettings()
+    }, t("column action settings"))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Table/ColumnSettings.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import React5, { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useState as useState3 } from "react";
+import { Popover as Popover2 } from "@dxos/react-ui";
+import { FieldEditor } from "@dxos/react-ui-form";
+var ColumnSettings = ({ registry, model, modals, onNewColumn }) => {
+  var _effect = _useSignals5();
+  try {
+    const [newField, setNewField] = useState3();
+    const state = modals.state.value;
+    useEffect3(() => {
+      if (state?.type === "columnSettings" && state.mode.type === "create" && model?.projection) {
+        setNewField(model.projection.createFieldProjection());
+        requestAnimationFrame(() => {
+          onNewColumn();
+        });
+      } else {
+        setNewField(void 0);
+      }
+    }, [
+      model?.projection,
+      state
+    ]);
+    const existingField = useMemo3(() => {
+      if (state?.type === "columnSettings") {
+        const { mode } = state;
+        if (mode.type === "edit") {
+          return model?.projection?.fields.find((f) => f.id === mode.fieldId);
+        }
+      }
+      return void 0;
+    }, [
+      model?.projection?.fields,
+      state
+    ]);
+    const field = existingField ?? newField;
+    const handleSave = useCallback3(() => {
+      modals.close();
+    }, [
+      modals
+    ]);
+    const handleCancel = useCallback3(() => {
+      if (state?.type === "columnSettings" && state.mode.type === "create" && newField) {
+        model?.projection.deleteFieldProjection(newField.id);
+      }
+    }, [
+      model?.projection,
+      state,
+      newField
+    ]);
+    if (!model?.projection || !field) {
+      return null;
+    }
+    return /* @__PURE__ */ React5.createElement(Popover2.Root, {
+      modal: false,
+      open: state?.type === "columnSettings"
+    }, /* @__PURE__ */ React5.createElement(Popover2.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ React5.createElement(Popover2.Portal, null, /* @__PURE__ */ React5.createElement(Popover2.Content, {
+      classNames: "md:is-64"
+    }, /* @__PURE__ */ React5.createElement(Popover2.Viewport, null, /* @__PURE__ */ React5.createElement(FieldEditor, {
+      projection: model.projection,
+      field,
+      registry,
+      onSave: handleSave,
+      onCancel: handleCancel
+    })), /* @__PURE__ */ React5.createElement(Popover2.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Table/CreateRefPanel.tsx
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import { Schema } from "effect";
+import React6, { useCallback as useCallback4, useMemo as useMemo4 } from "react";
+import { live } from "@dxos/live-object";
+import { getSpace } from "@dxos/react-client/echo";
+import { Popover as Popover3 } from "@dxos/react-ui";
+import { Form as Form2 } from "@dxos/react-ui-form";
+import { useGridContext as useGridContext4 } from "@dxos/react-ui-grid";
+var CreateRefPanel = ({ model, modals, __gridScope }) => {
+  var _effect = _useSignals6();
+  try {
+    const { id: gridId } = useGridContext4("TableCellEditor", __gridScope);
+    const space = model && getSpace(model?.view);
+    const state = modals.state.value;
+    const schema = useMemo4(() => {
+      if (!space || state?.type !== "createRefPanel") {
+        return;
+      }
+      const [schema2] = space.db.schemaRegistry.query({
+        typename: state.typename
+      }).runSync();
+      if (schema2) {
+        const omit = Schema.omit("id");
+        return omit(schema2);
       }
-      return extension2;
     }, [
-      model,
+      space,
+      state
+    ]);
+    const handleSave = useCallback4((values) => {
+      if (!model || !space || state?.type !== "createRefPanel") {
+        return;
+      }
+      const [schema2] = space.db.schemaRegistry.query({
+        typename: state.typename
+      }).runSync();
+      if (schema2) {
+        const obj = space.db.add(live(schema2, values));
+        state.onCreate?.(obj);
+      }
+      void modals.close();
+    }, [
       modals,
-      editing,
-      fieldProjection,
-      handleClose,
-      themeMode
+      space,
+      state
     ]);
-    const getCellContent = useCallback4(() => {
-      if (model && editing) {
-        const cell = parseCellIndex2(editing.index);
-        const { col } = cell;
-        const field = model.projection.view.fields[col];
-        const fieldProjection2 = model.projection.getFieldProjection(field.id);
-        if (fieldProjection2?.props.format === FormatEnum5.SingleSelect || fieldProjection2?.props.format === FormatEnum5.MultiSelect) {
-          const value2 = model.getCellData(cell);
-          if (value2 !== void 0) {
-            const options = fieldProjection2.props.options || [];
-            if (fieldProjection2.props.format === FormatEnum5.MultiSelect && Array.isArray(value2)) {
-              const tagItems = value2.map((id) => {
-                const option = options.find((o) => o.id === id);
-                if (option) {
-                  return {
-                    id,
-                    label: option.title,
-                    hue: option.color
-                  };
-                }
-                return void 0;
-              }).filter((item) => item !== void 0);
-              return createLinks(tagItems);
-            } else {
-              const option = options.find((o) => o.id === value2);
-              if (option) {
-                const tagItem = {
-                  id: value2,
-                  label: option.title,
-                  hue: option.color
-                };
-                return createLinks([
-                  tagItem
-                ]);
-              }
-            }
-          }
-          return "";
-        }
-        const value = model.getCellData(cell);
-        return value !== void 0 ? String(value) : "";
+    const handleCancel = useCallback4(() => {
+      if (model) {
+        modals.close();
       }
     }, [
-      model,
-      editing
+      modals
     ]);
-    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(CellValidationMessage, {
-      validationError: _validationError,
-      __gridScope
-    }), /* @__PURE__ */ React7.createElement(GridCellEditor, {
-      extension,
-      getCellContent,
-      onBlur: handleBlur
-    }));
+    if (!model?.projection) {
+      return null;
+    }
+    return /* @__PURE__ */ React6.createElement(Popover3.Root, {
+      modal: false,
+      open: state?.type === "createRefPanel" && !!schema,
+      onOpenChange: (nextOpen) => {
+        if (model && !nextOpen) {
+          return modals.close();
+        }
+      }
+    }, /* @__PURE__ */ React6.createElement(Popover3.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ React6.createElement(Popover3.Portal, null, /* @__PURE__ */ React6.createElement(Popover3.Content, {
+      classNames: "md:is-64",
+      "data-grid": gridId
+    }, /* @__PURE__ */ React6.createElement(Popover3.Viewport, null, state?.type === "createRefPanel" && schema && /* @__PURE__ */ React6.createElement(Form2, {
+      schema,
+      values: state.initialValues ?? {},
+      onSave: handleSave,
+      onCancel: handleCancel
+    })), /* @__PURE__ */ React6.createElement(Popover3.Arrow, null))));
   } finally {
     _effect.f();
   }
 };
-var determineNavigationAxis = ({ key }) => {
-  switch (key) {
-    case "ArrowUp":
-    case "ArrowDown":
-    case "Enter": {
-      return "row";
+
+// src/components/Table/RowActionsMenu.tsx
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import React7 from "react";
+import { DropdownMenu as DropdownMenu2, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
+var RowActionsMenu = ({ model, modals }) => {
+  var _effect = _useSignals7();
+  try {
+    const { t } = useTranslation2(translationKey);
+    const hasSelection = model.selection.hasSelection.value;
+    const state = modals.state.value;
+    if (state?.type !== "row") {
+      return null;
     }
-    case "ArrowLeft":
-    case "ArrowRight":
-    case "Tab":
-      return "col";
-  }
-};
-var determineNavigationDelta = ({ key, shift }) => {
-  switch (key) {
-    case "ArrowUp":
-    case "ArrowLeft":
-      return -1;
-    case "ArrowDown":
-    case "ArrowRight":
-      return 1;
+    return /* @__PURE__ */ React7.createElement(DropdownMenu2.Root, {
+      modal: false,
+      open: true,
+      onOpenChange: modals.close
+    }, /* @__PURE__ */ React7.createElement(DropdownMenu2.VirtualTrigger, {
+      virtualRef: modals.trigger
+    }), /* @__PURE__ */ React7.createElement(DropdownMenu2.Content, null, /* @__PURE__ */ React7.createElement(DropdownMenu2.Viewport, null, model.features.dataEditable !== false && /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+      "data-testid": "row-menu-delete",
+      onClick: () => model.deleteRow(state.rowIndex)
+    }, t(hasSelection ? "bulk delete row label" : "delete row label")), model.rowActions?.map((action) => /* @__PURE__ */ React7.createElement(DropdownMenu2.Item, {
+      key: action.id,
+      "data-testid": `row-action-${action.id}`,
+      onClick: () => {
+        modals.close();
+        model.handleRowAction(action.id, state.rowIndex);
+      }
+    }, toLocalizedString(action.label, t)))), /* @__PURE__ */ React7.createElement(DropdownMenu2.Arrow, null)));
+  } finally {
+    _effect.f();
   }
-  return shift ? -1 : 1;
 };
 
-// packages/ui/react-ui-table/src/components/Table/Table.tsx
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
-var TableRoot = ({ children, role }) => {
+// src/components/Table/Table.tsx
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
+var TableRoot = ({ children, role = "article" }) => {
   var _effect = _useSignals8();
   try {
     return /* @__PURE__ */ React8.createElement("div", {
       role: "none",
-      className: mx2("relative !border-separator", role === "section" ? "attention-surface overflow-hidden [&_.dx-grid]:max-is-[--dx-grid-content-inline-size]" : "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:bs-0 [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]")
+      className: mx("relative !border-separator [&_.dx-grid]:max-is-[--dx-grid-content-inline-size] [&_.dx-grid]:max-bs-[--dx-grid-content-block-size]", role === "card--popover" && "popover-card-height", role === "section" && "attention-surface", role === "card--intrinsic" && "[&_.dx-grid]:bs-[--dx-grid-content-block-size]", [
+        "card--popover",
+        "section",
+        "card--extrinsic"
+      ].includes(role) && "overflow-hidden", [
+        "article",
+        "slide"
+      ].includes(role) && "flex flex-col [&_.dx-grid]:grow [&_.dx-grid]:bs-0")
     }, children);
   } finally {
     _effect.f();
@@ -2199,24 +863,27 @@ var TableRoot = ({ children, role }) => {
 var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttention, schema, client, onRowClick }, forwardedRef) => {
   var _effect = _useSignals8();
   try {
-    const [dxGrid, setDxGrid] = useState3(null);
+    const [dxGrid, setDxGrid] = useState4(null);
     const { hasAttention } = useAttention(model?.id ?? "table");
     const { t } = useTranslation3(translationKey);
     const modals = useMemo5(() => new ModalController(), []);
+    const draftRowCount = model?.getDraftRowCount() ?? 0;
     const frozen = useMemo5(() => {
       const noActionColumn = model?.features.dataEditable === false && model?.features.schemaEditable === false && model.rowActions.length === 0;
       return {
         frozenRowsStart: 1,
+        frozenRowsEnd: draftRowCount,
         frozenColsStart: model?.features.selection.enabled ? 1 : 0,
         frozenColsEnd: noActionColumn ? 0 : 1
       };
     }, [
-      model
+      model,
+      draftRowCount
     ]);
     const getCells = useCallback5((range, plane) => presentation?.getCells(range, plane) ?? {}, [
       presentation
     ]);
-    useEffect3(() => {
+    useEffect4(() => {
       if (!presentation || !dxGrid) {
         return;
       }
@@ -2233,19 +900,42 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       return {
         update: (cell) => {
           if (cell) {
-            dxGrid.updateIfWithinBounds(cell);
+            dxGrid.updateIfWithinBounds(cell, true);
           } else {
             dxGrid.updateCells(true);
             dxGrid.requestUpdate();
           }
+        },
+        focusDraft: () => {
+          requestAnimationFrame(() => {
+            dxGrid.setFocus({
+              plane: "frozenRowsEnd",
+              col: 0,
+              row: 0
+            });
+            dxGrid.refocus();
+          });
         }
       };
     }, [
       presentation,
       dxGrid
     ]);
+    const handleSaveDraftRow = useCallback5((rowIndex = 0) => {
+      if (model && dxGrid) {
+        const didCommitSuccessfully = model.commitDraftRow(rowIndex);
+        if (didCommitSuccessfully) {
+          requestAnimationFrame(() => {
+            dxGrid.scrollToEndRow();
+          });
+        }
+      }
+    }, [
+      model,
+      dxGrid
+    ]);
     const handleGridClick = useCallback5((event) => {
-      const rowIndex = safeParseInt(event.target.ariaRowIndex ?? "");
+      const rowIndex = safeParseInt(event.target.closest("[aria-rowindex]")?.ariaRowIndex ?? "");
       if (rowIndex != null) {
         if (onRowClick) {
           const row = model?.getRowAt(rowIndex);
@@ -2284,6 +974,10 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
             model?.sorting?.toggleSort(data.fieldId);
             break;
           }
+          case "saveDraftRow": {
+            handleSaveDraftRow();
+            break;
+          }
         }
         return;
       }
@@ -2317,31 +1011,35 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       }
     }, [
       model,
-      modals
-    ]);
-    const handleFocus = useCallback5((increment, delta) => {
-      if (dxGrid) {
-        dxGrid.refocus(increment, delta);
-      }
-    }, [
+      modals,
       dxGrid
     ]);
-    const handleEnter = useCallback5((cell) => {
-      if (!model?.features.dataEditable) {
-        return;
-      }
-      if (model && cell.row === model.getRowCount() - 1) {
-        model.insertRow(cell.row);
-        if (dxGrid) {
-          requestAnimationFrame(() => {
-            dxGrid?.scrollToRow(cell.row + 1);
-            dxGrid?.refocus("row", 1);
+    const handleFocus = useCallback5((increment, delta, cell) => {
+      if (dxGrid && model) {
+        if (cell?.plane === "grid" && cell?.row >= model.getRowCount() - 1) {
+          if (draftRowCount < 1) {
+            model.insertRow();
+          }
+          dxGrid.setFocus({
+            plane: "frozenRowsEnd",
+            col: 0,
+            row: 0
+          });
+        } else if (cell?.plane === "frozenRowsEnd" && increment === "row") {
+          handleSaveDraftRow(cell.row);
+          model.insertRow();
+          dxGrid.setFocus({
+            plane: "frozenRowsEnd",
+            col: 0,
+            row: 0
           });
+        } else {
+          dxGrid.refocus(increment, delta);
         }
       }
     }, [
-      model,
-      dxGrid
+      dxGrid,
+      model
     ]);
     const handleKeyDown = useCallback5((event) => {
       if (!model?.features.dataEditable) {
@@ -2354,7 +1052,11 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       switch (event.key) {
         case "Backspace":
         case "Delete": {
-          model.setCellData(cell, void 0);
+          try {
+            model.setCellData(cell, void 0);
+            event.preventDefault();
+          } catch {
+          }
           break;
         }
       }
@@ -2388,10 +1090,10 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
     ]);
     const handleQuery = useCallback5(async ({ field, props }, text) => {
       if (model && props.referenceSchema && field.referencePath) {
-        const space = model.space;
-        invariant4(space, void 0, {
-          F: __dxlog_file5,
-          L: 311,
+        const space = getSpace2(model.view);
+        invariant3(space, void 0, {
+          F: __dxlog_file3,
+          L: 336,
           S: void 0,
           A: [
             "space",
@@ -2408,7 +1110,7 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
         if (schema2) {
           const { objects } = await space.db.query(Filter.type(schema2)).run();
           const options = objects.map((obj) => {
-            const value = getValue4(obj, field.referencePath);
+            const value = getValue(obj, field.referencePath);
             if (!value || typeof value !== "string") {
               return void 0;
             }
@@ -2434,6 +1136,12 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       client,
       t
     ]);
+    const handleSave = useCallback5(() => {
+      dxGrid?.updateCells(true);
+      dxGrid?.requestUpdate();
+    }, [
+      dxGrid
+    ]);
     if (!model || !modals) {
       return /* @__PURE__ */ React8.createElement("span", {
         role: "none",
@@ -2446,20 +1154,19 @@ var TableMain = /* @__PURE__ */ forwardRef(({ model, presentation, ignoreAttenti
       model,
       modals,
       schema,
-      onEnter: handleEnter,
       onFocus: handleFocus,
-      onQuery: handleQuery
+      onQuery: handleQuery,
+      onSave: handleSave
     }), /* @__PURE__ */ React8.createElement(Grid.Content, {
-      className: mx2("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
+      className: mx("[--dx-grid-base:var(--baseSurface)]", gridSeparatorInlineEnd, gridSeparatorBlockEnd),
       frozen,
-      // getCells={getCells}
       columns: model.columnMeta.value,
       limitRows: model.getRowCount() ?? 0,
-      limitColumns: model.view?.fields?.length ?? 0,
+      limitColumns: model.projection.fields.length,
       overscroll: "trap",
       onAxisResize: handleAxisResize,
       onClick: handleGridClick,
-      onKeyDown: handleKeyDown,
+      onKeyDownCapture: handleKeyDown,
       onWheelCapture: handleWheel,
       ref: setDxGrid
     }), /* @__PURE__ */ React8.createElement(RowActionsMenu, {
@@ -2485,116 +1192,33 @@ var Table = {
   Main: TableMain
 };
 
-// packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import React9, { useRef as useRef3, useMemo as useMemo6, useCallback as useCallback6 } from "react";
-import { useDefaultValue } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-table/src/hooks/useTableModel.ts
+// src/components/Table/DynamicTable.tsx
 import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import { effect as effect3 } from "@preact/signals-core";
-import orderBy2 from "lodash.orderby";
-import { useEffect as useEffect4, useState as useState4 } from "react";
-import { fullyQualifiedId, getSpace } from "@dxos/react-client/echo";
-import { useSelectionActions } from "@dxos/react-ui-attention";
-import { isNonNullable } from "@dxos/util";
-var useTableModel = ({ table, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
+import React9, { useCallback as useCallback6, useMemo as useMemo6, useRef as useRef3 } from "react";
+import { useDefaultValue } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema: _jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
   var _effect = _useSignals9();
   try {
-    const [model, setModel] = useState4();
-    useEffect4(() => {
-      if (!table || !projection) {
-        return;
-      }
-      let model2;
-      const t = setTimeout(async () => {
-        model2 = new TableModel({
-          id: fullyQualifiedId(table),
-          space: getSpace(table),
-          view: table.view?.target,
-          projection,
-          features,
-          rowActions,
-          onRowAction,
-          ...props
-        });
-        await model2.open();
-        setModel(model2);
-      });
-      return () => {
-        clearTimeout(t);
-        void model2?.close();
-      };
-    }, [
-      table,
-      projection,
-      table?.view?.target,
-      features,
-      rowActions
-    ]);
-    useEffect4(() => {
-      if (rows) {
-        const sortedRows = orderBy2(rows, [
-          (row) => String(row.id)
-        ], [
-          "asc"
-        ]);
-        model?.setRows(sortedRows);
-      }
-    }, [
-      model,
-      rows
-    ]);
-    const { multiSelect, clear } = useSelectionActions([
-      table?.id,
-      table?.view?.target?.query.typename
-    ].filter(isNonNullable));
-    useEffect4(() => {
-      if (!model) {
-        return;
-      }
-      const unsubscribe = effect3(() => {
-        const selectedItems = [
-          ...model.selection.selection.value
-        ];
-        multiSelect(selectedItems);
-        onSelectionChanged?.(selectedItems);
-      });
-      return () => {
-        clear();
-        unsubscribe();
-      };
-    }, [
-      model,
-      onSelectionChanged
-    ]);
-    return model;
-  } finally {
-    _effect.f();
-  }
-};
-
-// packages/ui/react-ui-table/src/components/Table/DynamicTable.tsx
-var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, properties, jsonSchema, schema, rowActions, onRowClick, onRowAction, ...props }) => {
-  var _effect = _useSignals10();
-  try {
-    const { table, projection } = useMemo6(() => {
-      const props2 = getBaseSchema({
-        typename: name,
-        properties,
-        jsonSchema,
-        schema
-      });
-      return makeDynamicTable({
-        ...props2,
-        properties
-      });
-    }, [
+    const { typename, jsonSchema } = useMemo6(() => getBaseSchema({
+      typename: name,
+      properties,
+      jsonSchema: _jsonSchema,
+      schema
+    }), [
       name,
       properties,
-      schema,
-      jsonSchema
+      _jsonSchema,
+      schema
+    ]);
+    const { projection, view } = useMemo6(() => makeDynamicTable({
+      typename,
+      jsonSchema,
+      properties
+    }), [
+      typename,
+      jsonSchema,
+      properties
     ]);
     const tableRef = useRef3(null);
     const handleCellUpdate = useCallback6((cell) => {
@@ -2610,8 +1234,9 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
       dataEditable: false
     }));
     const model = useTableModel({
-      table,
       rows,
+      view,
+      schema: jsonSchema,
       projection,
       features,
       rowActions,
@@ -2628,7 +1253,7 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
     ]);
     return /* @__PURE__ */ React9.createElement("div", {
       role: "none",
-      className: mx3("is-full bs-full grow grid", classNames)
+      className: mx2("is-full bs-full grow grid", classNames)
     }, /* @__PURE__ */ React9.createElement("div", {
       role: "none",
       className: "grid min-bs-0 overflow-hidden"
@@ -2644,12 +1269,12 @@ var DynamicTable = ({ classNames, name = "example.com/dynamic-table", rows, prop
   }
 };
 
-// packages/ui/react-ui-table/src/components/TableToolbar/TableToolbar.tsx
-import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
+// src/components/TableToolbar/TableToolbar.tsx
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
 import { Rx } from "@effect-rx/rx-react";
 import React10, { useMemo as useMemo7 } from "react";
-import { live as live3 } from "@dxos/live-object";
-import { createGapSeparator, createMenuAction, MenuProvider, ToolbarMenu, useMenuActions } from "@dxos/react-ui-menu";
+import { live as live2 } from "@dxos/live-object";
+import { MenuProvider, ToolbarMenu, createGapSeparator, createMenuAction, useMenuActions } from "@dxos/react-ui-menu";
 import { rxFromSignal } from "@dxos/react-ui-menu";
 var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.make((get) => {
   const add = createMenuAction("add-row", onAdd, {
@@ -2697,9 +1322,9 @@ var createTableToolbarActions = ({ state, onAdd, onSave, customActions }) => Rx.
   };
 });
 var TableToolbar = ({ classNames, viewDirty, attendableId, onAdd, onSave, customActions }) => {
-  var _effect = _useSignals11();
+  var _effect = _useSignals10();
   try {
-    const state = useMemo7(() => live3({
+    const state = useMemo7(() => live2({
       viewDirty
     }), []);
     const actionsCreator = useMemo7(() => createTableToolbarActions({
@@ -2734,18 +1359,17 @@ export {
   Table,
   TableModel,
   TablePresentation,
-  TableSchema,
   TableToolbar,
-  TableType,
   cellClassesForRowSelection,
+  createTable,
   getBaseSchema,
-  initializeTable,
   makeDynamicTable,
   narrowSchema,
   tableButtons,
   tableControls,
   touch,
-  translations_default as translations,
+  translations,
+  useAddRow,
   useTableModel
 };
 //# sourceMappingURL=index.mjs.map