@dxos/react-ui-table 0.8.4-main.fd6878d → 0.9.0

package/dist/lib/node-esm/chunk-ZOFFI3JJ.mjs

@@ -1,1815 +0,0 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
-import {
-  TableView
-} from "./chunk-NXZ4CJYX.mjs";
-
-// src/util/dynamic-table.ts
-import { Obj } from "@dxos/echo";
-import { getTypename, toJsonSchema } from "@dxos/echo-schema";
-import { ProjectionModel, createView, getSchemaFromPropertyDefinitions } 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 table = Obj.make(TableView, {
-    sizes: {}
-  });
-  const view = createView({
-    typename,
-    jsonSchema,
-    presentation: table,
-    ...properties && {
-      fields: properties.map((property) => property.name)
-    }
-  });
-  const projection = new ProjectionModel(jsonSchema, view.projection);
-  if (properties && projection.fields) {
-    setProperties(view, projection, table, properties);
-  }
-  return {
-    projection,
-    view
-  };
-};
-var setProperties = (view, projection, table, properties) => {
-  for (const property of properties) {
-    const field = projection.fields.find((field2) => field2.path === property.name);
-    if (field) {
-      if (property.size !== void 0) {
-        table.sizes[field.path] = 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
-          }
-        ];
-      }
-    }
-  }
-};
-
-// src/util/signals.ts
-var touch = (value) => value;
-
-// src/util/table.ts
-import { Match } from "effect";
-import { Obj as Obj2 } from "@dxos/echo";
-import { toEffectSchema } from "@dxos/echo-schema";
-import { createViewFromSpace, getSchemaProperties } from "@dxos/schema";
-var createTable = async ({ sizes, ...props }) => {
-  const table = Obj2.make(TableView, {
-    sizes: {}
-  });
-  const { jsonSchema, view } = await createViewFromSpace({
-    ...props,
-    presentation: table
-  });
-  const schema = toEffectSchema(jsonSchema);
-  const shouldIncludeId = props.fields?.find((field) => field === "id") !== void 0;
-  const properties = getSchemaProperties(schema.ast, {}, shouldIncludeId);
-  for (const property of properties) {
-    if (sizes?.[property.name]) {
-      table.sizes[property.name] = sizes[property.name];
-      continue;
-    }
-    Match.type().pipe(Match.when("boolean", () => {
-      table.sizes[property.name] = 100;
-    }), Match.when("number", () => {
-      table.sizes[property.name] = 100;
-    }), Match.orElse(() => {
-    }))(property.type);
-  }
-  return {
-    jsonSchema,
-    schema,
-    view
-  };
-};
-
-// 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",
-  saveDraftRow: "data-table-save-draft-row-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" : ""} data-dx-grid-action="accessory"><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 saveDraftRowButton = {
-  attr: BUTTON_IDENTIFIERS.saveDraftRow,
-  icon: "ph--floppy-disk--regular",
-  render: ({ rowIndex, disabled }) => {
-    return createButton({
-      attr: BUTTON_IDENTIFIERS.saveDraftRow,
-      icon: saveDraftRowButton.icon,
-      disabled,
-      data: {
-        "data-row-index": rowIndex.toString(),
-        "data-variant": "primary"
-      },
-      testId: "table-save-draft-row-button"
-    });
-  },
-  getData: (el) => ({
-    type: "saveDraftRow",
-    rowIndex: Number(el.getAttribute("data-row-index"))
-  })
-};
-var tableButtons = {
-  addColumn: addColumnButton,
-  columnSettings: columnSettingsButton,
-  rowMenu: rowMenuButton,
-  saveDraftRow: saveDraftRowButton,
-  sort: sortButton
-};
-
-// src/util/table-controls.ts
-import { accessoryHandlesPointerdownAttrs } from "@dxos/lit-grid";
-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}" data-dx-grid-action="accessory"/>`;
-};
-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(),
-    ...accessoryHandlesPointerdownAttrs
-  };
-  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"))
-    })
-  }
-};
-
-// src/util/schema.ts
-import { Schema } from "effect";
-import { TypeLiteral, isTypeLiteral } 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 Schema.make(narrowType);
-    }
-  }
-  return void 0;
-};
-
-// 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 { Obj as Obj3, Ref } from "@dxos/echo";
-import { FormatEnum as FormatEnum2, getSchema, getSnapshot, getValue as getValue2, setValue, toEffectSchema as toEffectSchema2 } from "@dxos/echo-schema";
-import { invariant } from "@dxos/invariant";
-import { ObjectId } from "@dxos/keys";
-import { isLiveObject } from "@dxos/live-object";
-import { fullyQualifiedId } from "@dxos/react-client/echo";
-import { formatForEditing, parseValue } from "@dxos/react-ui-form";
-import { ProjectionModel as ProjectionModel2, validateSchema } from "@dxos/schema";
-
-// 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;
-};
-
-// src/model/selection-model.ts
-import { computed, effect, signal } from "@preact/signals-core";
-import { Resource } from "@dxos/context";
-var SelectionModel = class extends Resource {
-  _rows;
-  _selectionMode;
-  _initialSelection;
-  _onSelectionChanged;
-  _selection;
-  _validSelectedIds;
-  _hasSelection;
-  _allSelected;
-  constructor(_rows, _selectionMode, _initialSelection, _onSelectionChanged) {
-    super(), this._rows = _rows, this._selectionMode = _selectionMode, this._initialSelection = _initialSelection, this._onSelectionChanged = _onSelectionChanged, 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;
-        }
-      }
-    };
-    this._selection = signal(new Set(this._initialSelection));
-  }
-  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;
-  }
-  getSelectedRows;
-  isRowIndexSelected;
-  isObjectSelected;
-  //
-  // Manipulation
-  //
-  toggleSelectionForRowIndex;
-  setSelection;
-};
-
-// src/model/table-sorting.ts
-import { computed as computed2, signal as signal2 } from "@preact/signals-core";
-import orderBy from "lodash.orderby";
-import { FormatEnum, TypeEnum, getValue } from "@dxos/echo-schema";
-import { formatForDisplay } from "@dxos/react-ui-form";
-var TableSorting = class {
-  _view;
-  _projection;
-  _displayToDataIndex;
-  _rows;
-  _localSort;
-  _isDirty;
-  sortedRows;
-  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.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._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) {
-        return this._rows.value;
-      }
-      const field = this._projection.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 === TypeEnum.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 === TypeEnum.Boolean) {
-      return !!value;
-    }
-    if (type === TypeEnum.Number) {
-      return value;
-    }
-    if (value == null) {
-      return value;
-    }
-    if (format === FormatEnum.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 === FormatEnum.Ref && field.referencePath) {
-      const refValue = getValue(value.target, field.referencePath);
-      return refValue;
-    }
-    return formatForDisplay({
-      type,
-      format,
-      value
-    });
-  }
-};
-
-// src/model/table-model.ts
-var __dxlog_file = "/__w/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 {
-  _view;
-  _projection;
-  _table;
-  _visibleRange = signal3({
-    start: {
-      row: 0,
-      col: 0
-    },
-    end: {
-      row: 0,
-      col: 0
-    }
-  });
-  _onInsertRow;
-  _onDeleteRows;
-  _onDeleteColumn;
-  _onCellUpdate;
-  _onRowOrderChange;
-  _onRowAction;
-  _rowActions;
-  _features;
-  _rows = signal3([]);
-  _draftRows = signal3([]);
-  _sorting;
-  _pinnedRows;
-  _selection;
-  _columnMeta;
-  constructor({ view, schema, projection, features = {}, sorting = [], initialSelection = [], pinnedRows = {
-    top: [],
-    bottom: []
-  }, rowActions = [], onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
-    super();
-    this._view = view;
-    this._projection = projection ?? new ProjectionModel2(schema, view.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: 141,
-      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, this._projection);
-    if (sorting.length > 0) {
-      const [sort] = sorting;
-      this._sorting.setSort(sort.fieldId, sort.direction);
-    }
-    this._selection = new SelectionModel(this._sorting.sortedRows, this._features.selection.mode ?? "multiple", initialSelection, () => this._onRowOrderChange?.());
-    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 fullyQualifiedId(this._view);
-  }
-  get view() {
-    return this._view;
-  }
-  get table() {
-    invariant(this._table, "Model not initialized", {
-      F: __dxlog_file,
-      L: 179,
-      S: this,
-      A: [
-        "this._table",
-        "'Model not initialized'"
-      ]
-    });
-    return this._table;
-  }
-  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: 218,
-      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() {
-    const presentation = this._view.presentation.target ?? await this._view.presentation.load();
-    invariant(Obj3.instanceOf(TableView, presentation), void 0, {
-      F: __dxlog_file,
-      L: 241,
-      S: this,
-      A: [
-        "Obj.instanceOf(TableView, presentation)",
-        ""
-      ]
-    });
-    this._table = presentation;
-    this.initializeColumnMeta();
-    this.initializeEffects();
-    await this._selection.open(this._ctx);
-  }
-  initializeColumnMeta() {
-    this._columnMeta = computed3(() => {
-      const fields = this._projection?.fields ?? [];
-      const meta = Object.fromEntries(fields.map((field, index) => [
-        index,
-        {
-          size: this.table.sizes[field.path] ?? 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._projection?.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);
-    const draftRowsWatcher = effect2(() => {
-      touch(this._draftRows.value);
-      this._onRowOrderChange?.();
-    });
-    this._ctx.onDispose(draftRowsWatcher);
-  }
-  //
-  // Data
-  //
-  setRows = (obj) => {
-    this._rows.value = obj;
-  };
-  getRowCount = () => this._rows.value.length;
-  /**
-  * @reactive
-  */
-  getDraftRowCount = () => this._draftRows.value.length;
-  // TODO(ZaymonFC): Return .value instead of exposing the signal.
-  get draftRows() {
-    return this._draftRows;
-  }
-  /**
-  * Checks if a specific field path has validation errors for a given draft row.
-  * @param draftRowIndex - The index of the draft row to check
-  * @param fieldPath - The path of the field to check for validation errors
-  * @returns true if the field has validation errors, false otherwise
-  */
-  hasDraftRowValidationError(draftRowIndex, fieldPath) {
-    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
-      return false;
-    }
-    const draftRow = this._draftRows.value[draftRowIndex];
-    const validationErrors = draftRow.validationErrors || [];
-    return validationErrors.some((error) => error.path === fieldPath);
-  }
-  getColumnCount = () => this._projection?.fields.length ?? 0;
-  insertRow = () => {
-    const result = this._onInsertRow?.();
-    if (result === false && this._draftRows.value.length === 0) {
-      this.createDraftRow();
-    }
-  };
-  createDraftRow() {
-    if (!this._projection) {
-      return;
-    }
-    const draftData = {
-      id: ObjectId.random()
-    };
-    const validationErrors = this.validateDraftRowData(draftData);
-    const draftRow = {
-      data: draftData,
-      valid: validationErrors.length === 0,
-      validationErrors
-    };
-    this._draftRows.value = [
-      ...this._draftRows.value,
-      draftRow
-    ];
-  }
-  validateDraftRow(draftRowIndex) {
-    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
-      return;
-    }
-    const draftRow = this._draftRows.value[draftRowIndex];
-    const validationErrors = this.validateDraftRowData(draftRow.data);
-    const updatedDraftRow = {
-      ...draftRow,
-      valid: validationErrors.length === 0,
-      validationErrors
-    };
-    const newDraftRows = [
-      ...this._draftRows.value
-    ];
-    newDraftRows[draftRowIndex] = updatedDraftRow;
-    this._draftRows.value = newDraftRows;
-  }
-  validateDraftRowData(data) {
-    const schema = toEffectSchema2(this._projection.baseSchema);
-    return validateSchema(schema, data) || [];
-  }
-  commitDraftRow = (draftRowIndex) => {
-    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
-      return false;
-    }
-    const draftRow = this._draftRows.value[draftRowIndex];
-    if (!draftRow.valid) {
-      return false;
-    }
-    const success = this._onInsertRow?.(draftRow.data);
-    if (success) {
-      const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
-      this._draftRows.value = newDraftRows;
-    }
-    return success ?? false;
-  };
-  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);
-  };
-  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);
-    }
-  };
-  getCellData = (cell) => {
-    const { col, row, plane } = cell;
-    const fields = this._projection?.fields ?? [];
-    if (col < 0 || col >= fields.length) {
-      return void 0;
-    }
-    const field = fields[col];
-    let value;
-    if (plane === "frozenRowsEnd") {
-      if (row >= 0 && row < this._draftRows.value.length) {
-        value = getValue2(this._draftRows.value[row].data, field.path);
-      } else {
-        return void 0;
-      }
-    } else {
-      const dataIndex = this._sorting.getDataIndex(row);
-      value = getValue2(this._rows.value[dataIndex], field.path);
-    }
-    if (value == null) {
-      return "";
-    }
-    const { props } = this._projection.getFieldProjection(field.id);
-    switch (props.format) {
-      case FormatEnum2.Ref: {
-        if (!field.referencePath) {
-          return "";
-        }
-        return getValue2(value.target, field.referencePath);
-      }
-      default: {
-        return formatForEditing({
-          type: props.type,
-          format: props.format,
-          value
-        });
-      }
-    }
-  };
-  validateCellData = async ({ col, row, plane }, value) => {
-    const fields = this._projection?.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 transformedValue = editorTextToCellValue(props, value);
-    const isDraftRow = plane === "frozenRowsEnd";
-    if (isDraftRow) {
-      const isInvalidDraftRowIndex = row < 0 || row >= this._draftRows.value.length;
-      if (isInvalidDraftRowIndex) {
-        return {
-          valid: false,
-          error: "Invalid draft row index"
-        };
-      }
-      const draftRow = this._draftRows.value[row];
-      const snapshot = {
-        ...draftRow.data
-      };
-      setValue(snapshot, field.path, transformedValue);
-      const validationErrors = this.validateDraftRowData(snapshot);
-      if (validationErrors.length > 0) {
-        const error = validationErrors.find((err) => err.path === field.path);
-        if (error) {
-          return {
-            valid: false,
-            error: error.message
-          };
-        }
-      }
-      return {
-        valid: true
-      };
-    } else {
-      const rowIdx = this._sorting.getDataIndex(row);
-      const currentRow = this._rows.value[rowIdx];
-      invariant(currentRow, "Invalid row index", {
-        F: __dxlog_file,
-        L: 513,
-        S: this,
-        A: [
-          "currentRow",
-          "'Invalid row index'"
-        ]
-      });
-      const snapshot = getSnapshot(currentRow);
-      setValue(snapshot, field.path, transformedValue);
-      const schema = getSchema(currentRow);
-      invariant(schema, void 0, {
-        F: __dxlog_file,
-        L: 519,
-        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: 524,
-          S: this,
-          A: [
-            "error.path === field.path",
-            ""
-          ]
-        });
-        return {
-          valid: false,
-          error: error.message
-        };
-      }
-      return {
-        valid: true
-      };
-    }
-  };
-  setCellData = (cell, value) => {
-    const { col, row, plane } = cell;
-    const fields = this._projection?.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 === FormatEnum2.Ref && !isLiveObject(value)) {
-      return;
-    }
-    if (plane === "frozenRowsEnd") {
-      if (row >= 0 && row < this._draftRows.value.length) {
-        setValue(this._draftRows.value[row].data, field.path, transformedValue);
-        this.validateDraftRow(row);
-      }
-    } else {
-      const rowIdx = this._sorting.getDataIndex(row);
-      setValue(this._rows.value[rowIdx], field.path, transformedValue);
-    }
-  };
-  /**
-  * 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._projection?.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);
-  }
-  /**
-  * Gets the domain-appropriate cell type for a given cell position.
-  * This abstracts away the low-level grid plane concepts and provides domain-specific types.
-  * @param cell - The cell position to classify
-  * @returns The domain-appropriate cell type
-  */
-  getCellType(cell) {
-    switch (cell.plane) {
-      case "frozenRowsEnd":
-        return "draft";
-      case "frozenRowsStart":
-        return "header";
-      case "grid":
-      default:
-        return "standard";
-    }
-  }
-  /**
-  * Convenience method to check if a cell is a draft cell.
-  * @param cell - The cell position to check
-  * @returns true if the cell is a draft cell, false otherwise
-  */
-  isDraftCell(cell) {
-    return this.getCellType(cell) === "draft";
-  }
-  //
-  // Column Operations
-  //
-  deleteColumn(fieldId) {
-    if (!this._projection) {
-      return;
-    }
-    const field = this._projection?.fields.find((field2) => field2.id === fieldId);
-    if (field && this._onDeleteColumn) {
-      this._onDeleteColumn(field.id);
-    }
-  }
-  //
-  // Resize
-  //
-  setColumnWidth(columnIndex, width) {
-    const fields = this._projection?.fields ?? [];
-    if (columnIndex < fields.length) {
-      const newWidth = Math.max(0, width);
-      const field = fields[columnIndex];
-      if (field) {
-        this.table.sizes[field.path] = 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 FormatEnum2.Ref: {
-      if (isLiveObject(value)) {
-        return Ref.make(value);
-      } else {
-        return value;
-      }
-    }
-    case FormatEnum2.SingleSelect: {
-      const ids = extractTagIds(value);
-      if (ids && ids.length > 0) {
-        return ids[0];
-      } else {
-        return value;
-      }
-    }
-    case FormatEnum2.MultiSelect: {
-      const ids = extractTagIds(value);
-      return ids || value;
-    }
-    default: {
-      return parseValue({
-        type: props.type,
-        format: props.format,
-        value
-      });
-    }
-  }
-};
-
-// src/model/modal-controller.ts
-import { signal as signal4 } from "@preact/signals-core";
-import { log } from "@dxos/log";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-table/src/model/modal-controller.ts";
-var ModalController = class {
-  _state = signal4({
-    type: "closed"
-  });
-  _triggerRef = {
-    current: null
-  };
-  get state() {
-    return this._state;
-  }
-  get trigger() {
-    return this._triggerRef;
-  }
-  setTrigger = (trigger) => {
-    this._triggerRef.current = trigger;
-  };
-  showRowMenu = (rowIndex) => {
-    this._state.value = {
-      type: "row",
-      rowIndex
-    };
-  };
-  showColumnMenu = (fieldId) => {
-    this._state.value = {
-      type: "column",
-      fieldId
-    };
-  };
-  showColumnCreator = () => {
-    this._state.value = {
-      type: "columnSettings",
-      mode: {
-        type: "create"
-      }
-    };
-  };
-  showReferencePanel = (targetId, schemaId) => {
-    this._state.value = {
-      type: "refPanel",
-      targetId,
-      typename: schemaId
-    };
-  };
-  openColumnSettings = () => {
-    if (this._state.value.type === "column") {
-      const fieldId = this._state.value.fieldId;
-      requestAnimationFrame(() => {
-        this._state.value = {
-          type: "columnSettings",
-          mode: {
-            type: "edit",
-            fieldId
-          }
-        };
-      });
-    }
-  };
-  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)
-      });
-    }
-  };
-  close = () => {
-    this._state.value = {
-      type: "closed"
-    };
-  };
-};
-
-// src/model/table-presentation.ts
-import { signal as signal5 } from "@preact/signals-core";
-import { isNotNullable } from "effect/Predicate";
-import { Obj as Obj4 } from "@dxos/echo";
-import { FormatEnum as FormatEnum3, TypeEnum as TypeEnum2, getValue as getValue3 } 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 {
-  model;
-  _visibleRange;
-  fieldProjectionCache;
-  constructor(model, _visibleRange = signal5({
-    start: {
-      row: 0,
-      col: 0
-    },
-    end: {
-      row: 0,
-      col: 0
-    }
-  })) {
-    this.model = model;
-    this._visibleRange = _visibleRange;
-    this.fieldProjectionCache = /* @__PURE__ */ new Map();
-  }
-  getCells(range, plane) {
-    this.fieldProjectionCache.clear();
-    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;
-      case "frozenRowsEnd":
-        cells = this.getDraftRowCells(range);
-        break;
-      case "fixedEndStart":
-        cells = this.getDraftSelectCells(range);
-        break;
-      case "fixedEndEnd":
-        cells = this.getDraftActionCells(range);
-        break;
-      default:
-        cells = {};
-    }
-    if (plane === "grid" && this.model.features.dataEditable === false) {
-      Object.values(cells).forEach((cell) => {
-        cell.readonly = "text-select";
-      });
-    }
-    return cells;
-  }
-  /**
-  * Gets a field projection, using cache if available within the current render pass.
-  */
-  getFieldProjection(fieldId) {
-    let projection = this.fieldProjectionCache.get(fieldId);
-    if (!projection) {
-      projection = this.model.projection.getFieldProjection(fieldId);
-      this.fieldProjectionCache.set(fieldId, projection);
-    }
-    return projection;
-  }
-  createDataCell(cells, obj, field, colIndex, displayIndex) {
-    const { props } = this.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 FormatEnum3.Boolean:
-          case FormatEnum3.SingleSelect:
-          case FormatEnum3.MultiSelect: {
-            return "";
-          }
-          case FormatEnum3.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 === TypeEnum2.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" 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 === FormatEnum3.Ref && props.referenceSchema) {
-      const targetObj = getValue3(obj, field.path)?.target;
-      if (targetObj) {
-        const dxn = Obj4.getDXN(targetObj)?.toString();
-        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
-      }
-    }
-    if (props.format === FormatEnum3.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 === FormatEnum3.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 === FormatEnum3.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 = tags;
-        }
-      }
-    }
-    const idx = toPlaneCellIndex({
-      col: colIndex,
-      row: displayIndex
-    });
-    cells[idx] = cell;
-  }
-  getMainGridCells(range) {
-    const cells = {};
-    const fields = this.model.projection?.fields ?? [];
-    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;
-        }
-        this.createDataCell(cells, this.model.rows.value[row], field, col, row);
-      }
-    }
-    return cells;
-  }
-  getDraftRowCells(range) {
-    const cells = {};
-    const fields = this.model.projection?.fields ?? [];
-    const draftRows = this.model.draftRows.value;
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
-      const draftRow = draftRows[row];
-      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-        const cellIndex = toPlaneCellIndex({
-          col,
-          row
-        });
-        const field = fields[col];
-        if (!field) {
-          continue;
-        }
-        this.createDataCell(cells, draftRow.data, field, col, row);
-        if (this.model.hasDraftRowValidationError(row, field.path)) {
-          const cellValue = cells[cellIndex];
-          if (cellValue) {
-            const existingClasses = cellValue.className || "";
-            const draftClasses = "dx-grid__cell--flagged";
-            cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
-          }
-        }
-        cells[cellIndex].className += " !bg-toolbarSurface";
-      }
-    }
-    return cells;
-  }
-  getHeaderCells(range) {
-    const cells = {};
-    const fields = this.model.projection?.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.projection?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT
-        }) : void 0,
-        className: "!bg-toolbarSurface",
-        readonly: true,
-        value: ""
-      }
-    };
-  }
-  getDraftActionCells(range) {
-    const cells = {};
-    const draftRows = this.model.draftRows.value;
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
-      const draftRow = draftRows[row];
-      const disabled = !draftRow.valid;
-      cells[toPlaneCellIndex({
-        col: 0,
-        row
-      })] = {
-        value: "",
-        readonly: true,
-        accessoryHtml: tableButtons.saveDraftRow.render({
-          rowIndex: row,
-          disabled
-        }),
-        className: "!bg-toolbarSurface"
-      };
-    }
-    return cells;
-  }
-  getDraftSelectCells(range) {
-    const cells = {};
-    const draftRows = this.model.draftRows.value;
-    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
-      cells[toPlaneCellIndex({
-        col: 0,
-        row
-      })] = {
-        value: "",
-        readonly: true,
-        className: "!bg-toolbarSurface"
-      };
-    }
-    return cells;
-  }
-};
-var cellClassesForRowSelection = (selected, selectionMode) => {
-  if (!selected) {
-    if (selectionMode === "single") {
-      return [
-        "!cursor-pointer"
-      ];
-    } else {
-      return void 0;
-    }
-  }
-  switch (selectionMode) {
-    case "single":
-      return [
-        "!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer"
-      ];
-    case "multiple":
-      return [
-        "!bg-gridCellSelected"
-      ];
-  }
-};
-
-// src/hooks/useTableModel.ts
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { effect as effect3 } from "@preact/signals-core";
-import orderBy2 from "lodash.orderby";
-import { useEffect, useMemo, useState } from "react";
-import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
-import { useSelected, useSelectionActions } from "@dxos/react-ui-attention";
-import { isNonNullable } from "@dxos/util";
-var useTableModel = ({ view, schema, projection, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
-  var _effect = _useSignals();
-  try {
-    const selected = useSelected(view && fullyQualifiedId2(view), "multi");
-    const initialSelection = useMemo(() => selected, [
-      view
-    ]);
-    const [model, setModel] = useState();
-    useEffect(() => {
-      if (!view || !schema) {
-        return;
-      }
-      let model2;
-      const t = setTimeout(async () => {
-        model2 = new TableModel({
-          view,
-          schema,
-          projection,
-          features,
-          rowActions,
-          initialSelection,
-          onRowAction,
-          ...props
-        });
-        await model2.open();
-        setModel(model2);
-      });
-      return () => {
-        clearTimeout(t);
-        void model2?.close();
-      };
-    }, [
-      view,
-      schema,
-      projection,
-      features,
-      rowActions,
-      initialSelection
-    ]);
-    useEffect(() => {
-      if (rows) {
-        const sortedRows = orderBy2(rows, [
-          (row) => String(row.id)
-        ], [
-          "asc"
-        ]);
-        model?.setRows(sortedRows);
-      }
-    }, [
-      model,
-      rows
-    ]);
-    const { multiSelect, clear } = useSelectionActions([
-      model?.id
-    ].filter(isNonNullable));
-    useEffect(() => {
-      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();
-  }
-};
-
-// src/hooks/useAddRow.ts
-import { useCallback } from "react";
-import { Obj as Obj5 } from "@dxos/echo";
-var useAddRow = ({ space, schema }) => {
-  return useCallback((data) => {
-    if (space && schema) {
-      try {
-        space.db.add(Obj5.make(schema, data ?? {}));
-        return true;
-      } catch (error) {
-        return false;
-      }
-    }
-    return false;
-  }, [
-    space,
-    schema
-  ]);
-};
-
-export {
-  getBaseSchema,
-  makeDynamicTable,
-  touch,
-  createTable,
-  BUTTON_IDENTIFIERS,
-  tableButtons,
-  CONTROL_IDENTIFIERS,
-  CheckboxStory,
-  SwitchStory,
-  tableControls,
-  narrowSchema,
-  TableModel,
-  ModalController,
-  TablePresentation,
-  cellClassesForRowSelection,
-  useTableModel,
-  useAddRow
-};
-//# sourceMappingURL=chunk-ZOFFI3JJ.mjs.map