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

package/dist/lib/browser/chunk-5XLSHLOG.mjs

@@ -0,0 +1,1751 @@
+import {
+  TableView
+} from "./chunk-L2LSB6KV.mjs";
+
+// src/util/dynamic-table.ts
+import { Obj } from "@dxos/echo";
+import { getTypename, toJsonSchema } from "@dxos/echo-schema";
+import { createView, getSchemaFromPropertyDefinitions, ProjectionModel } 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,
+    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" : ""}><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()
+      },
+      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
+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"))
+    })
+  }
+};
+
+// src/util/schema.ts
+import { Schema } 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 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, getValue as getValue2, setValue, getSnapshot, getSchema, 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/model/selection-model.ts
+import { computed, effect, signal } from "@preact/signals-core";
+import { Resource } from "@dxos/context";
+var SelectionModel = class extends Resource {
+  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;
+  }
+};
+
+// src/model/table-sorting.ts
+import { computed as computed2, signal as signal2 } from "@preact/signals-core";
+import orderBy from "lodash.orderby";
+import { getValue, FormatEnum, TypeEnum } 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.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/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/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 {
+  constructor({ view, schema, projection, features = {}, sorting = [], initialSelection = [], 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([]);
+    this._draftRows = signal3([]);
+    //
+    // Data
+    //
+    this.setRows = (obj) => {
+      this._rows.value = obj;
+    };
+    this.getRowCount = () => this._rows.value.length;
+    /**
+    * @reactive
+    */
+    this.getDraftRowCount = () => this._draftRows.value.length;
+    this.getColumnCount = () => this._projection?.fields.length ?? 0;
+    this.insertRow = () => {
+      const result = this._onInsertRow?.();
+      if (result === false && this._draftRows.value.length === 0) {
+        this.createDraftRow();
+      }
+    };
+    this.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;
+    };
+    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 = (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
+          });
+        }
+      }
+    };
+    this.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: 510,
+          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: 516,
+          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: 521,
+            S: this,
+            A: [
+              "error.path === field.path",
+              ""
+            ]
+          });
+          return {
+            valid: false,
+            error: error.message
+          };
+        }
+        return {
+          valid: true
+        };
+      }
+    };
+    this.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);
+      }
+    };
+    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: 139,
+      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: 177,
+      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: 216,
+      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: 239,
+      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);
+  }
+  // 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);
+  }
+  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) || [];
+  }
+  /**
+  * 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 {
+  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;
+  }
+};
+
+// 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, getValue as getValue3, TypeEnum as TypeEnum2 } 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;
+    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 "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-1"><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 field = fields[col];
+        if (!field) {
+          continue;
+        }
+        this.createDataCell(cells, draftRow.data, field, col, row);
+        if (this.model.hasDraftRowValidationError(row, field.path)) {
+          const cellIndex = toPlaneCellIndex({
+            col,
+            row
+          });
+          const cellValue = cells[cellIndex];
+          if (cellValue) {
+            const existingClasses = cellValue.className || "";
+            const draftClasses = "dx-grid__cell--flagged";
+            cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
+          }
+        }
+      }
+    }
+    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
+        })
+      };
+    }
+    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-5XLSHLOG.mjs.map