@dxos/react-ui-table 0.9.1-staging.ee54ba693a → 0.11.0

package/dist/lib/browser/chunk-K4J2CKTZ.mjs

@@ -1,1751 +0,0 @@
-// src/util/query-ast.ts
-var extractOrder = (queryAst) => {
-  if (queryAst.type === "order") {
-    return queryAst.order;
-  }
-  if (queryAst.type === "options") {
-    return extractOrder(queryAst.query);
-  }
-  if (queryAst.type === "from") {
-    return extractOrder(queryAst.query);
-  }
-  return void 0;
-};
-
-// src/util/sort.ts
-import { Format } from "@dxos/echo";
-var getSortValue = (value, format) => {
-  if (value === void 0 || value === null) {
-    return null;
-  }
-  const isDateFormat = format === Format.TypeFormat.DateTime || format === Format.TypeFormat.Date;
-  if (isDateFormat) {
-    const date = new Date(value);
-    if (!isNaN(date.getTime())) {
-      return date.getTime();
-    }
-    return String(value);
-  }
-  if (format === Format.TypeFormat.Number || format === Format.TypeFormat.Integer || format === Format.TypeFormat.Currency || format === Format.TypeFormat.Percent || format === Format.TypeFormat.Duration) {
-    const num = typeof value === "number" ? value : Number(value);
-    if (!isNaN(num)) {
-      return num;
-    }
-    return String(value);
-  }
-  if (typeof value === "string") {
-    return value;
-  }
-  if (typeof value === "number") {
-    return value;
-  }
-  return String(value);
-};
-var compareValues = (aValue, bValue, format, direction) => {
-  if (aValue === void 0 || aValue === null) {
-    return bValue === void 0 || bValue === null ? 0 : 1;
-  }
-  if (bValue === void 0 || bValue === null) {
-    return -1;
-  }
-  const aSortValue = getSortValue(aValue, format);
-  const bSortValue = getSortValue(bValue, format);
-  let comparison = 0;
-  if (typeof aSortValue === "number" && typeof bSortValue === "number") {
-    comparison = aSortValue - bSortValue;
-  } else if (typeof aSortValue === "string" && typeof bSortValue === "string") {
-    comparison = aSortValue.localeCompare(bSortValue);
-  } else {
-    comparison = String(aSortValue).localeCompare(String(bSortValue));
-  }
-  return direction === "desc" ? -comparison : comparison;
-};
-
-// 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: _type = "primary" }) => {
-  const dataAttrs = Object.entries(data).map(([k, v]) => `${k}="${v}"`).join(" ");
-  return `<button ${attr} data-testid="${testId}" class="dx-button w-6 aspect-square px-0.5 min-h-0" ${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,
-        "data-variant": "ghost"
-      },
-      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-y-[.375rem] end-[.375rem] dx-checkbox",
-  switch: "absolute inset-y-[.25rem] 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/model/table-view-state.ts
-import * as Schema from "effect/Schema";
-import { QueryAST } from "@dxos/echo";
-import { defineViewState } from "@dxos/react-ui-attention";
-var FieldSortSchema = Schema.Struct({
-  fieldId: Schema.String,
-  direction: QueryAST.OrderDirection
-});
-var tableSortAspect = defineViewState({
-  key: "table-sort",
-  backend: "local",
-  schema: Schema.UndefinedOr(FieldSortSchema),
-  defaultValue: () => void 0
-});
-
-// src/model/table-model.ts
-import { Atom as Atom2 } from "@effect-atom/atom-react";
-import { Resource as Resource2 } from "@dxos/context";
-import { Format as Format2, Obj, Order, Query, Ref, Type } from "@dxos/echo";
-import { toEffectSchema } from "@dxos/echo/JsonSchema";
-import { getSnapshot } from "@dxos/echo/Obj";
-import { SchemaEx } from "@dxos/effect";
-import { invariant } from "@dxos/invariant";
-import { EntityId } from "@dxos/keys";
-import { formatForEditing, parseValue } from "@dxos/react-ui-form";
-import { 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 { Atom } from "@effect-atom/atom-react";
-import { Resource } from "@dxos/context";
-var SelectionModel = class extends Resource {
-  _registry;
-  _rows;
-  _selection;
-  _validSelectedIds;
-  _hasSelection;
-  _allSelected;
-  _selectionMode;
-  _onSelectionChanged;
-  constructor(registry, rows, selectionMode, initialSelection, onSelectionChanged) {
-    super();
-    this._registry = registry;
-    this._rows = rows;
-    this._selectionMode = selectionMode;
-    this._onSelectionChanged = onSelectionChanged;
-    this._selection = Atom.make(new Set(initialSelection));
-    this._validSelectedIds = Atom.make((get) => {
-      const rows2 = get(this._rows);
-      if (!rows2) {
-        return /* @__PURE__ */ new Set();
-      }
-      const validIds = new Set(rows2.map((row) => row.id));
-      const selection = get(this._selection);
-      return new Set([
-        ...selection
-      ].filter((id) => validIds.has(id)));
-    });
-    this._hasSelection = Atom.make((get) => get(this._validSelectedIds).size > 0);
-    this._allSelected = Atom.make((get) => {
-      const rows2 = get(this._rows);
-      if (rows2.length === 0) {
-        return false;
-      }
-      const selection = get(this._selection);
-      return rows2.every((row) => selection.has(row.id));
-    });
-  }
-  async _open() {
-    const selectionUnsubscribe = this._registry.subscribe(this._selection, () => {
-      this._onSelectionChanged?.();
-    });
-    this._ctx.onDispose(selectionUnsubscribe);
-  }
-  //
-  // Getters
-  //
-  /** Get the selection atom for reactive access. */
-  get selectionAtom() {
-    return this._selection;
-  }
-  /** Get the current selection value. */
-  get selection() {
-    return this._registry.get(this._selection);
-  }
-  /** Get the hasSelection atom for reactive access. */
-  get hasSelectionAtom() {
-    return this._hasSelection;
-  }
-  /** Check if there is any selection. */
-  get hasSelection() {
-    return this._registry.get(this._hasSelection);
-  }
-  /** Get the allRowsSelected atom for reactive access. */
-  get allRowsSelectedAtom() {
-    return this._allSelected;
-  }
-  /** Check if all rows are selected. */
-  get allRowsSelected() {
-    return this._registry.get(this._allSelected);
-  }
-  get selectionMode() {
-    return this._selectionMode;
-  }
-  getSelectedRows = () => {
-    const selectedIds = this._registry.get(this._validSelectedIds);
-    return this._registry.get(this._rows).filter((row) => selectedIds.has(row.id));
-  };
-  isRowIndexSelected = (rowIndex) => {
-    const row = this._registry.get(this._rows)[rowIndex];
-    return this._registry.get(this._selection).has(row.id);
-  };
-  isObjectSelected = (object) => {
-    return this._registry.get(this._selection).has(object.id);
-  };
-  //
-  // Manipulation
-  //
-  toggleSelectionForRowIndex = (rowIndex) => {
-    const row = this._registry.get(this._rows)[rowIndex];
-    const currentSelection = this._registry.get(this._selection);
-    const newSelection = new Set(currentSelection);
-    if (newSelection.has(row.id)) {
-      newSelection.delete(row.id);
-    } else {
-      if (this._selectionMode === "single") {
-        newSelection.clear();
-      }
-      newSelection.add(row.id);
-    }
-    this._registry.set(this._selection, newSelection);
-  };
-  setSelection = (mode) => {
-    switch (mode) {
-      case "all": {
-        this._registry.set(this._selection, new Set(this._registry.get(this._rows).map((row) => row.id)));
-        break;
-      }
-      case "none": {
-        this._registry.set(this._selection, /* @__PURE__ */ new Set());
-        break;
-      }
-    }
-  };
-};
-
-// src/model/table-model.ts
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-table/src/model/table-model.ts";
-var createEchoChangeCallback = (table) => ({
-  table: (mutate) => Obj.update(table, (table2) => mutate(table2)),
-  row: (row, mutate) => {
-    if (Obj.isObject(row)) {
-      Obj.update(row, (row2) => mutate(row2));
-    } else {
-      mutate(row);
-    }
-  }
-});
-var createDirectChangeCallback = (table) => ({
-  table: (mutate) => mutate(table),
-  row: (row, mutate) => mutate(row)
-});
-var defaultFeatures = {
-  selection: {
-    enabled: true,
-    mode: "multiple"
-  },
-  dataEditable: false,
-  schemaEditable: false
-};
-var TableModel = class extends Resource2 {
-  _registry;
-  _object;
-  _projection;
-  _db;
-  _change;
-  _visibleRange;
-  _onInsertRow;
-  _onDeleteRows;
-  _onColumnDelete;
-  _onCellUpdate;
-  _onRowOrderChange;
-  _onRowAction;
-  _rowActions;
-  _features;
-  _rows;
-  _draftRows;
-  // Optional per-context UI state manager; when present the column sort is view-state-backed.
-  _viewState;
-  // Per-user sort state - backed by the `tableSortAspect` view state (keyed by table URI) when a
-  // ViewStateManager is provided, else an ephemeral atom. Changes are local until saved to the view.
-  _inMemorySort;
-  // Derived atom for persisted sort from view.query.ast.
-  _persistedSort;
-  // Derived atom for current sort (in-memory takes precedence over persisted).
-  _sorting;
-  // Derived atom for sorted rows (used by rows getter and SelectionModel).
-  _sortedRows;
-  // Derived atom for viewDirty state.
-  _viewDirty;
-  _pinnedRows;
-  _selection;
-  _columnMeta;
-  // Counter atom that increments when cells are updated - allows UI to react to cell changes.
-  _cellUpdateCounter;
-  constructor({ registry, object, projection, db, viewState, change, features = {}, initialSelection = [], pinnedRows = {
-    top: [],
-    bottom: []
-  }, rowActions = [], onCellUpdate, onColumnDelete, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
-    super();
-    this._registry = registry;
-    this._object = object;
-    this._viewState = viewState;
-    this._projection = projection;
-    this._projection.normalizeView();
-    this._db = db;
-    this._change = change ?? createEchoChangeCallback(object);
-    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.", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 99, S: this, A: ["!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')", "'Single selection is not compatible with editable tables.'"] });
-    this._visibleRange = Atom2.make({
-      start: {
-        row: 0,
-        col: 0
-      },
-      end: {
-        row: 0,
-        col: 0
-      }
-    });
-    this._rows = Atom2.make([]);
-    this._draftRows = Atom2.make([]);
-    this._inMemorySort = this._viewState ? this._viewState.atom(tableSortAspect, this.id) : Atom2.make(void 0);
-    this._cellUpdateCounter = Atom2.make(0);
-    this._persistedSort = Atom2.make((get) => {
-      const view = get(this._object.view.atom);
-      if (!view) {
-        return void 0;
-      }
-      const viewSnapshot = Obj.getSnapshot(view);
-      const ast = viewSnapshot.query.ast;
-      const orders = extractOrder(ast);
-      if (orders && orders.length > 0) {
-        const firstOrder = orders[0];
-        if (firstOrder.kind === "property") {
-          const field = this._projection.getFields().find((f) => f.path === firstOrder.property);
-          if (field) {
-            return {
-              fieldId: field.id,
-              direction: firstOrder.direction
-            };
-          }
-        }
-      }
-      return void 0;
-    });
-    this._sorting = Atom2.make((get) => {
-      const inMemorySort = get(this._inMemorySort);
-      return inMemorySort ?? get(this._persistedSort);
-    });
-    this._sortedRows = Atom2.make((get) => {
-      const rows = get(this._rows);
-      const sort = get(this._sorting);
-      if (!sort || rows.length === 0) {
-        return rows;
-      }
-      const field = this._projection.getFields().find((f) => f.id === sort.fieldId);
-      if (!field) {
-        return rows;
-      }
-      const fieldProjection = this._projection.getFieldProjection(field.id);
-      const sorted = [
-        ...rows
-      ].sort((a, b) => {
-        const aValue = SchemaEx.getValue(a, field.path);
-        const bValue = SchemaEx.getValue(b, field.path);
-        return compareValues(aValue, bValue, fieldProjection.props.format, sort.direction);
-      });
-      return sorted;
-    });
-    this._selection = new SelectionModel(this._registry, this._sortedRows, this._features.selection.mode ?? "multiple", initialSelection, () => this._onRowOrderChange?.());
-    this._viewDirty = Atom2.make((get) => {
-      const inMemorySort = get(this._inMemorySort);
-      if (!inMemorySort) {
-        return false;
-      }
-      const persisted = get(this._persistedSort);
-      if (!persisted) {
-        return true;
-      }
-      return inMemorySort.fieldId !== persisted.fieldId || inMemorySort.direction !== persisted.direction;
-    });
-    this._pinnedRows = pinnedRows;
-    this._rowActions = rowActions;
-    this._onInsertRow = onInsertRow;
-    this._onDeleteRows = onDeleteRows;
-    this._onColumnDelete = onColumnDelete;
-    this._onCellUpdate = onCellUpdate;
-    this._onRowOrderChange = onRowOrderChange;
-    this._onRowAction = onRowAction;
-  }
-  get id() {
-    return Obj.getURI(this._object);
-  }
-  get view() {
-    const view = this._object.view.target;
-    invariant(view, "Table model not initialized", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 197, S: this, A: ["view", "'Table model not initialized'"] });
-    return view;
-  }
-  get table() {
-    return this._object;
-  }
-  get projection() {
-    return this._projection;
-  }
-  get db() {
-    return this._db;
-  }
-  /**
-  * Atom for reactive access to rows with in-memory sorting applied.
-  */
-  get rows() {
-    return this._sortedRows;
-  }
-  /**
-  * Gets rows with in-memory sorting applied.
-  * In-memory sort is local to this instance until saved.
-  */
-  getRows() {
-    return this._registry.get(this._sortedRows);
-  }
-  /** Atom for reactive access to cell changes. */
-  get cellUpdate() {
-    return this._cellUpdateCounter;
-  }
-  /**
-  * Change a row using the configured change callback.
-  * Use this instead of directly mutating to ensure consistent mutation handling.
-  */
-  changeRow(row, mutate) {
-    this._change.row(row, mutate);
-  }
-  get features() {
-    return this._features;
-  }
-  /**
-  * Gets the current sort state.
-  * Priority: in-memory sort (local changes) > persisted sort (from query AST).
-  */
-  getSorting() {
-    return this._registry.get(this._sorting);
-  }
-  /**
-  * Gets the row data at the specified display index.
-  */
-  getRowAt(displayIndex) {
-    const sortedRows = this._registry.get(this._sortedRows);
-    if (displayIndex < 0 || displayIndex >= sortedRows.length) {
-      return void 0;
-    }
-    return sortedRows[displayIndex];
-  }
-  get pinnedRows() {
-    return this._pinnedRows;
-  }
-  get columnMeta() {
-    invariant(this._columnMeta, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 251, S: this, A: ["this._columnMeta", ""] });
-    return this._columnMeta;
-  }
-  get selection() {
-    return this._selection;
-  }
-  get rowActions() {
-    return this._rowActions;
-  }
-  //
-  // Initialisation
-  //
-  async _open() {
-    await this._object.view.load();
-    this.initializeColumnMeta();
-    this.initializeEffects();
-    await this._selection.open(this._ctx);
-  }
-  initializeColumnMeta() {
-    invariant(this._object.view.target, "View must be loaded before initializing column meta", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 270, S: this, A: ["this._object.view.target", "'View must be loaded before initializing column meta'"] });
-    this._columnMeta = Atom2.make((get) => {
-      const fields = get(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: 32,
-            resizeable: false
-          }
-        }
-      };
-    });
-  }
-  initializeEffects() {
-    const rowsUnsubscribe = this._registry.subscribe(this._rows, () => {
-      this._onRowOrderChange?.();
-    });
-    this._ctx.onDispose(rowsUnsubscribe);
-    const rowSubscriptions = /* @__PURE__ */ new Map();
-    const visibleRangeUnsubscribe = this._registry.subscribe(this._visibleRange, () => {
-      for (const [id, unsub] of rowSubscriptions) {
-        unsub();
-        rowSubscriptions.delete(id);
-      }
-      const { start, end } = this._registry.get(this._visibleRange);
-      const sortedRows = this._registry.get(this._sortedRows);
-      for (let row = start.row; row <= end.row && row < sortedRows.length; row++) {
-        const obj = sortedRows[row];
-        if (Obj.isObject(obj) && !rowSubscriptions.has(obj.id)) {
-          const unsub = Obj.subscribe(obj, () => {
-            this._registry.set(this._cellUpdateCounter, this._registry.get(this._cellUpdateCounter) + 1);
-            this._onCellUpdate?.({
-              row,
-              col: start.col,
-              plane: "grid"
-            });
-          });
-          rowSubscriptions.set(obj.id, unsub);
-        }
-      }
-    });
-    this._ctx.onDispose(() => {
-      visibleRangeUnsubscribe();
-      for (const unsub of rowSubscriptions.values()) {
-        unsub();
-      }
-    });
-    const draftRowsUnsubscribe = this._registry.subscribe(this._draftRows, () => {
-      this._onRowOrderChange?.();
-    });
-    this._ctx.onDispose(draftRowsUnsubscribe);
-  }
-  //
-  // Data
-  //
-  setRows = (obj) => {
-    this._registry.set(this._rows, obj);
-  };
-  getRowCount = () => this._registry.get(this._sortedRows).length;
-  getDraftRowCount() {
-    return this._registry.get(this._draftRows).length;
-  }
-  /** Atom for reactive access to draft rows. */
-  get draftRows() {
-    return this._draftRows;
-  }
-  /** Gets the current draft rows. */
-  getDraftRows() {
-    return this._registry.get(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._registry.get(this._draftRows).length) {
-      return false;
-    }
-    const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
-    const validationErrors = draftRow.validationErrors || [];
-    return validationErrors.some((error) => error.path === fieldPath);
-  }
-  getColumnCount = () => this._projection?.getFields().length ?? 0;
-  insertRow = () => {
-    const result = this._onInsertRow?.();
-    if (result === "draft" && this._registry.get(this._draftRows).length === 0) {
-      this.createDraftRow();
-    }
-    return result ?? "final";
-  };
-  createDraftRow() {
-    if (!this._projection) {
-      return;
-    }
-    const draftData = {
-      id: EntityId.random()
-    };
-    const validationErrors = this.validateDraftRowData(draftData);
-    const draftRow = {
-      data: draftData,
-      valid: validationErrors.length === 0,
-      validationErrors
-    };
-    this._registry.set(this._draftRows, [
-      ...this._registry.get(this._draftRows),
-      draftRow
-    ]);
-  }
-  validateDraftRow(draftRowIndex) {
-    if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) {
-      return;
-    }
-    const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
-    const validationErrors = this.validateDraftRowData(draftRow.data);
-    const updatedDraftRow = {
-      ...draftRow,
-      valid: validationErrors.length === 0,
-      validationErrors
-    };
-    const newDraftRows = [
-      ...this._registry.get(this._draftRows)
-    ];
-    newDraftRows[draftRowIndex] = updatedDraftRow;
-    this._registry.set(this._draftRows, newDraftRows);
-  }
-  validateDraftRowData(data) {
-    const schema = toEffectSchema(this._projection.baseSchema);
-    return validateSchema(schema, data) || [];
-  }
-  commitDraftRow = (draftRowIndex) => {
-    if (draftRowIndex < 0 || draftRowIndex >= this._registry.get(this._draftRows).length) {
-      return false;
-    }
-    const draftRow = this._registry.get(this._draftRows)[draftRowIndex];
-    if (!draftRow.valid) {
-      return false;
-    }
-    const insertRowResult = this._onInsertRow?.(draftRow.data);
-    if (insertRowResult === "final") {
-      const newDraftRows = this._registry.get(this._draftRows).filter((_, index) => index !== draftRowIndex);
-      this._registry.set(this._draftRows, newDraftRows);
-    }
-    return insertRowResult === "final";
-  };
-  deleteRow = (rowIndex) => {
-    const sortedRows = this._registry.get(this._sortedRows);
-    const obj = sortedRows[rowIndex];
-    const objectsToDelete = [];
-    if (this.features.selection.enabled && this._selection.hasSelection) {
-      const selectedRows = this._selection.getSelectedRows();
-      objectsToDelete.push(...selectedRows);
-    } else if (obj) {
-      objectsToDelete.push(obj);
-    }
-    if (objectsToDelete.length > 0) {
-      this._onDeleteRows?.(rowIndex, objectsToDelete);
-    }
-  };
-  handleRowAction = (actionId, rowIndex) => {
-    if (!this._onRowAction) {
-      return;
-    }
-    const sortedRows = this._registry.get(this._sortedRows);
-    const data = sortedRows[rowIndex];
-    if (data) {
-      this._onRowAction(actionId, data);
-    }
-  };
-  getCellData = (cell) => {
-    const { col, row, plane } = cell;
-    const fields = this._projection?.getFields() ?? [];
-    if (col < 0 || col >= fields.length) {
-      return void 0;
-    }
-    const field = fields[col];
-    let value;
-    if (plane === "frozenRowsEnd") {
-      if (row >= 0 && row < this._registry.get(this._draftRows).length) {
-        value = SchemaEx.getValue(this._registry.get(this._draftRows)[row].data, field.path);
-      } else {
-        return void 0;
-      }
-    } else {
-      const sortedRows = this._registry.get(this._sortedRows);
-      value = SchemaEx.getValue(sortedRows[row], field.path);
-    }
-    if (value == null) {
-      return "";
-    }
-    const { props } = this._projection.getFieldProjection(field.id);
-    switch (props.format) {
-      case Format2.TypeFormat.Ref: {
-        if (!field.referencePath) {
-          return "";
-        }
-        return SchemaEx.getValue(value.target, field.referencePath);
-      }
-      default: {
-        return formatForEditing({
-          type: props.type,
-          format: props.format,
-          value
-        });
-      }
-    }
-  };
-  validateCellData = async ({ col, row, plane }, value) => {
-    const fields = this._projection?.getFields() ?? [];
-    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._registry.get(this._draftRows).length;
-      if (isInvalidDraftRowIndex) {
-        return {
-          valid: false,
-          error: "Invalid draft row index"
-        };
-      }
-      const draftRow = this._registry.get(this._draftRows)[row];
-      const snapshot = {
-        ...draftRow.data
-      };
-      SchemaEx.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 currentRow = this._registry.get(this._rows)[row];
-      invariant(currentRow, "Invalid row index", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 544, S: this, A: ["currentRow", "'Invalid row index'"] });
-      const snapshot = {
-        ...getSnapshot(currentRow)
-      };
-      SchemaEx.setValue(snapshot, field.path, transformedValue);
-      const type = Obj.getType(currentRow);
-      invariant(type, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 551, S: this, A: ["type", ""] });
-      const schema = Type.getSchema(type);
-      const validationResult = validateSchema(schema, snapshot);
-      if (validationResult && validationResult.length > 0) {
-        const error = validationResult.find((err) => err.path === field.path);
-        if (error) {
-          return {
-            valid: false,
-            error: error.message
-          };
-        }
-      }
-      return {
-        valid: true
-      };
-    }
-  };
-  setCellData = (cell, value) => {
-    const { col, row, plane } = cell;
-    const fields = this._projection?.getFields() ?? [];
-    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 === Format2.TypeFormat.Ref && !Obj.isObject(value)) {
-      return;
-    }
-    if (plane === "frozenRowsEnd") {
-      if (row >= 0 && row < this._registry.get(this._draftRows).length) {
-        SchemaEx.setValue(this._registry.get(this._draftRows)[row].data, field.path, transformedValue);
-        this.validateDraftRow(row);
-      }
-    } else {
-      const sortedRows = this._registry.get(this._sortedRows);
-      const rowData = sortedRows[row];
-      this._change.row(rowData, (mutableRow) => {
-        SchemaEx.setValue(mutableRow, 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 fields = this._projection?.getFields() ?? [];
-    const field = fields[col];
-    const sortedRows = this._registry.get(this._sortedRows);
-    const rowData = sortedRows[row];
-    const value = SchemaEx.getValue(rowData, field.path);
-    const updatedValue = update(value);
-    this._change.row(rowData, (mutableRow) => {
-      SchemaEx.setValue(mutableRow, 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?.getFields().find((field2) => field2.id === fieldId);
-    if (field && this._onColumnDelete) {
-      this._onColumnDelete(field.id);
-    }
-  }
-  //
-  // Resize
-  //
-  setColumnWidth(columnIndex, width) {
-    const fields = this._projection?.getFields() ?? [];
-    if (columnIndex < fields.length) {
-      const newWidth = Math.max(0, width);
-      const field = fields[columnIndex];
-      if (field) {
-        this._change.table((mutableTable) => {
-          mutableTable.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);
-  }
-  //
-  // Sort operations
-  //
-  /**
-  * Sets the sort order for a field in-memory (local to this instance).
-  * Use saveView() to persist the sort to the view query.
-  */
-  setSort(fieldId, direction) {
-    const field = this._projection.getFields().find((f) => f.id === fieldId);
-    if (!field) {
-      return;
-    }
-    this._writeSort({
-      fieldId,
-      direction
-    });
-  }
-  /**
-  * Writes the per-user sort, routing through the ViewStateManager (so the `local` backend persists)
-  * when one is configured, otherwise updating the ephemeral atom directly.
-  */
-  _writeSort(value) {
-    if (this._viewState) {
-      this._viewState.set(tableSortAspect, this.id, value);
-    } else {
-      this._registry.set(this._inMemorySort, value);
-    }
-  }
-  /**
-  * Toggles the sort direction for a field in-memory.
-  */
-  toggleSort(fieldId) {
-    const currentSort = this.getSorting();
-    if (!currentSort || currentSort.fieldId !== fieldId) {
-      this.setSort(fieldId, "asc");
-      return;
-    }
-    const newDirection = currentSort.direction === "asc" ? "desc" : "asc";
-    this.setSort(fieldId, newDirection);
-  }
-  /**
-  * Clears the in-memory sort order.
-  */
-  clearSort() {
-    this._writeSort(void 0);
-  }
-  /**
-  * Saves the current in-memory sort to the view query AST.
-  * This persists the sort so it becomes the default for all viewers.
-  */
-  saveView() {
-    const view = this.view;
-    const inMemorySort = this._registry.get(this._inMemorySort);
-    const viewSnapshot = Obj.getSnapshot(view);
-    const currentQuery = Query.fromAst(viewSnapshot.query.ast);
-    const baseQuery = this._getBaseQuery(currentQuery);
-    if (inMemorySort) {
-      const field = this._projection.getFields().find((f) => f.id === inMemorySort.fieldId);
-      if (field) {
-        const newQuery = baseQuery.orderBy(Order.property(field.path, inMemorySort.direction));
-        Obj.update(view, (view2) => {
-          view2.query.ast = newQuery.ast;
-        });
-      }
-    } else {
-      Obj.update(view, (view2) => {
-        view2.query.ast = baseQuery.ast;
-      });
-    }
-    this._writeSort(void 0);
-  }
-  /**
-  * Extracts the base query without order clauses.
-  */
-  _getBaseQuery(query) {
-    const ast = query.ast;
-    if (ast.type === "order") {
-      return Query.fromAst(ast.query);
-    }
-    return query;
-  }
-  /**
-  * Checks if the view has unsaved changes (in-memory sort differs from persisted sort).
-  */
-  getViewDirty() {
-    return this._registry.get(this._viewDirty);
-  }
-};
-var editorTextToCellValue = (props, value) => {
-  switch (props.format) {
-    case Format2.TypeFormat.Ref: {
-      if (Obj.isObject(value)) {
-        return Ref.make(value);
-      } else {
-        return value;
-      }
-    }
-    case Format2.TypeFormat.SingleSelect: {
-      const ids = extractTagIds(value);
-      if (ids && ids.length > 0) {
-        return ids[0];
-      } else {
-        return value;
-      }
-    }
-    case Format2.TypeFormat.MultiSelect: {
-      const ids = extractTagIds(value);
-      return ids || value;
-    }
-    default: {
-      return parseValue({
-        type: props.type,
-        format: props.format,
-        value
-      });
-    }
-  }
-};
-
-// src/model/table-presentation.ts
-import { Atom as Atom3 } from "@effect-atom/atom-react";
-import * as Predicate from "effect/Predicate";
-import { Obj as Obj2 } from "@dxos/echo";
-import { Format as Format3, TypeEnum } from "@dxos/echo/Format";
-import { SchemaEx as SchemaEx2 } from "@dxos/effect";
-import { cellClassesForFieldType, formatForDisplay } from "@dxos/react-ui-form";
-import { toPlaneCellIndex } from "@dxos/react-ui-grid";
-import { VIEW_FIELD_LIMIT } from "@dxos/schema";
-import { mx } from "@dxos/ui-theme";
-var TablePresentation = class {
-  model;
-  _registry;
-  _visibleRange;
-  fieldProjectionCache = /* @__PURE__ */ new Map();
-  constructor(registry, model) {
-    this.model = model;
-    this._registry = registry;
-    this._visibleRange = Atom3.make({
-      start: {
-        row: 0,
-        col: 0
-      },
-      end: {
-        row: 0,
-        col: 0
-      }
-    });
-  }
-  getCells(range, plane) {
-    this.fieldProjectionCache.clear();
-    let cells;
-    switch (plane) {
-      case "grid":
-        this._registry.set(this._visibleRange, 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.getDraftIconCells(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 = SchemaEx2.getValue(obj, field.path);
-        if (value == null) {
-          return "";
-        }
-        if (props.type === "array") {
-          return "";
-        }
-        switch (props.format) {
-          case Format3.TypeFormat.Boolean:
-          case Format3.TypeFormat.SingleSelect:
-          case Format3.TypeFormat.MultiSelect: {
-            return "";
-          }
-          case Format3.TypeFormat.Ref: {
-            if (!field.referencePath) {
-              return "";
-            }
-            return SchemaEx2.getValue(value.target, field.referencePath);
-          }
-          default: {
-            return formatForDisplay({
-              type: props.type,
-              format: props.format,
-              value
-            });
-          }
-        }
-      }
-    };
-    const classes = [];
-    const formatClasses = cellClassesForFieldType(props);
-    if (formatClasses) {
-      classes.push(formatClasses);
-    }
-    const rowSelectionClasses = cellClassesForRowSelection(this.model.selection.isObjectSelected(obj), this.model.selection.selectionMode);
-    if (rowSelectionClasses) {
-      classes.push(rowSelectionClasses);
-    }
-    cell.className = mx(classes);
-    if (props.type === TypeEnum.Array) {
-      const targetArray = SchemaEx2.getValue(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(Predicate.isNotNullable).map((title) => {
-          return `<span class="dx-tag" data-hue="neutral">${title}</span>`;
-        }).join("");
-        cell.accessoryHtml = `<div class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
-      }
-    }
-    if (props.format === Format3.TypeFormat.Ref && props.referenceSchema) {
-      const targetObj = SchemaEx2.getValue(obj, field.path)?.target;
-      if (targetObj) {
-        const uri = Obj2.getURI(targetObj);
-        cell.accessoryHtml = `<div role="none" class="absolute end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><dx-anchor uri=${uri} class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-anchor></div>`;
-      }
-    }
-    if (props.format === Format3.TypeFormat.URL) {
-      const value = SchemaEx2.getValue(obj, field.path);
-      const href = typeof value === "string" ? safeHttpUrl(value) : void 0;
-      if (href) {
-        cell.accessoryHtml = `<div role="none" class="absolute end-0 inset-y-0 p-(--dx-grid-cell-content-padding-block)"><a href="${escapeHtmlAttribute(href)}" target="_blank" rel="noopener noreferrer" class="dx-button w-6 aspect-square min-h-0" data-dx-grid-action="accessory"><dx-icon icon="ph--arrow-square-out--regular"/></a></div>`;
-      }
-    }
-    if (props.format === Format3.TypeFormat.Boolean) {
-      const value = SchemaEx2.getValue(obj, field.path);
-      cell.accessoryHtml = tableControls.switch.render({
-        colIndex,
-        rowIndex: displayIndex,
-        checked: value ?? false
-      });
-      cell.readonly = "no-text-select";
-    }
-    if (props.format === Format3.TypeFormat.SingleSelect) {
-      const value = SchemaEx2.getValue(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 === Format3.TypeFormat.MultiSelect) {
-      const values = SchemaEx2.getValue(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?.getFields() ?? [];
-    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.getRows()[row], field, col, row);
-      }
-    }
-    return cells;
-  }
-  getDraftRowCells(range) {
-    const cells = {};
-    const fields = this.model.projection?.getFields() ?? [];
-    const draftRows = this.model.getDraftRows();
-    if (draftRows.length === 0) {
-      for (let col = range.start.col; col <= range.end.col && col < fields.length; col++) {
-        cells[toPlaneCellIndex({
-          col,
-          row: 0
-        })] = {
-          value: "",
-          readonly: true,
-          className: "dx-grid__row--cta__cell"
-        };
-      }
-    } else {
-      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;
-            }
-          }
-        }
-      }
-    }
-    return cells;
-  }
-  getHeaderCells(range) {
-    const cells = {};
-    const fields = this.model.projection?.getFields() ?? [];
-    const currentSort = this.model.getSorting();
-    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 direction = currentSort?.fieldId === field.id ? currentSort.direction : void 0;
-      cells[toPlaneCellIndex({
-        col,
-        row: 0
-      })] = {
-        // TODO(burdon): Use same logic as form for fallback title.
-        value: "",
-        resizeHandle: "col",
-        accessoryHtml: `
-          <span class="grow min-w-0 truncate">${props.title ?? field.path}</span>
-          ${direction !== void 0 ? tableButtons.sort.render({
-          fieldId: field.id,
-          direction
-        }) : ""}
-          ${tableButtons.columnSettings.render({
-          fieldId: field.id
-        })}
-        `,
-        className: "bg-axis-surface! text-axis-text! [&>div]:flex [&>div]:items-stretch"
-      };
-    }
-    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-axis-surface!",
-          readonly: true,
-          value: ""
-        }
-      };
-    }
-    return {
-      [toPlaneCellIndex({
-        col: 0,
-        row: 0
-      })]: {
-        accessoryHtml: tableControls.checkbox.render({
-          rowIndex: 0,
-          header: true,
-          checked: this.model.selection.allRowsSelected
-        }),
-        className: "bg-axis-surface!",
-        readonly: true,
-        value: ""
-      }
-    };
-  }
-  getNewColumnCell() {
-    return {
-      [toPlaneCellIndex({
-        col: 0,
-        row: 0
-      })]: {
-        accessoryHtml: this.model.features.schemaEditable ? tableButtons.addColumn.render({
-          disabled: (this.model.projection?.getFields()?.length ?? 0) >= VIEW_FIELD_LIMIT
-        }) : void 0,
-        className: "bg-axis-surface!",
-        readonly: true,
-        value: ""
-      }
-    };
-  }
-  getDraftActionCells(range) {
-    const cells = {};
-    const draftRows = this.model.getDraftRows();
-    if (draftRows.length === 0) {
-      cells[toPlaneCellIndex({
-        col: 0,
-        row: 0
-      })] = {
-        value: "",
-        className: "dx-grid__row--cta__cell",
-        readonly: true
-      };
-    } else {
-      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;
-  }
-  getDraftIconCells(range) {
-    const cells = {};
-    const draftRows = this.model.getDraftRows();
-    for (let row = range.start.row; row <= range.end.row; row++) {
-      cells[toPlaneCellIndex({
-        col: 0,
-        row
-      })] = {
-        value: "",
-        readonly: true,
-        accessoryHtml: '<dx-icon icon="ph--plus--regular" class="contents"></dx-icon>',
-        className: mx("[&>div]:grid [&>div]:place-content-center", draftRows.length < 1 && "dx-grid__row--cta__cell")
-      };
-    }
-    return cells;
-  }
-};
-var safeHttpUrl = (value) => {
-  try {
-    const normalized = /^https?:\/\//i.test(value) ? value : `https://${value}`;
-    const url = new URL(normalized);
-    return url.protocol === "http:" || url.protocol === "https:" ? url.href : void 0;
-  } catch {
-    return void 0;
-  }
-};
-var escapeHtmlAttribute = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-var cellClassesForRowSelection = (selected, selectionMode) => {
-  if (!selected) {
-    if (selectionMode === "single") {
-      return [
-        "cursor-pointer!"
-      ];
-    } else {
-      return void 0;
-    }
-  }
-  switch (selectionMode) {
-    case "single":
-      return [
-        "dx-grid__cell--no-focus-unfurl bg-current-surface! hover:bg-hover-surface cursor-pointer!"
-      ];
-    case "multiple":
-      return [
-        "bg-grid-cell-selected!"
-      ];
-  }
-};
-
-// src/hooks/useAddRow.ts
-import { useCallback } from "react";
-import { Obj as Obj3 } from "@dxos/echo";
-var useAddRow = ({ db, schema }) => {
-  return useCallback((data) => {
-    if (db && schema) {
-      try {
-        db.add(Obj3.make(schema, data ?? {}));
-        return "final";
-      } catch (error) {
-        return "draft";
-      }
-    }
-    return "final";
-  }, [
-    db,
-    schema
-  ]);
-};
-
-// src/hooks/useProjectionModel.ts
-import { useState } from "react";
-import { Type as Type2 } from "@dxos/echo";
-import { useAsyncEffect } from "@dxos/react-ui";
-import { ProjectionModel, createEchoChangeCallback as createEchoChangeCallback2 } from "@dxos/schema";
-var useProjectionModel = (schema, table, registry) => {
-  const [projection, setProjection] = useState();
-  useAsyncEffect(async () => {
-    if (schema && table) {
-      const view = await table.view.load();
-      const jsonSchema = schema.jsonSchema;
-      const change = createEchoChangeCallback2(view, Type2.getDatabase(schema) != null ? schema : void 0);
-      const projection2 = new ProjectionModel({
-        registry,
-        view,
-        baseSchema: jsonSchema,
-        change
-      });
-      projection2.normalizeView();
-      setProjection(projection2);
-    }
-  }, [
-    schema,
-    table,
-    registry
-  ]);
-  return projection;
-};
-
-// src/hooks/useTableModel.ts
-import { RegistryContext } from "@effect-atom/atom-react";
-import { useContext, useEffect, useMemo, useState as useState2 } from "react";
-import { Obj as Obj4 } from "@dxos/echo";
-import { useSelection, useSelectionActions, useViewStateManagerOptional } from "@dxos/react-ui-attention";
-var useTableModel = ({ object, projection, db, rows, rowActions, features, onSelectionChanged, onRowAction, ...props }) => {
-  const registry = useContext(RegistryContext);
-  const viewState = useViewStateManagerOptional();
-  const selected = useSelection(object && Obj4.getURI(object), "multi");
-  const initialSelection = useMemo(() => selected, [
-    object
-  ]);
-  const [model, setModel] = useState2();
-  useEffect(() => {
-    if (!object || !projection) {
-      return;
-    }
-    let model2;
-    const t = setTimeout(async () => {
-      model2 = new TableModel({
-        registry,
-        object,
-        projection,
-        db,
-        viewState,
-        change: createEchoChangeCallback(object),
-        features,
-        rowActions,
-        initialSelection,
-        onRowAction,
-        ...props
-      });
-      await model2.open();
-      setModel(model2);
-    });
-    return () => {
-      clearTimeout(t);
-      void model2?.close();
-    };
-  }, [
-    registry,
-    viewState,
-    object,
-    projection,
-    features,
-    rowActions,
-    initialSelection
-  ]);
-  useEffect(() => {
-    if (rows && model) {
-      model.setRows(rows);
-    }
-  }, [
-    model,
-    rows
-  ]);
-  const { multi, clear } = useSelectionActions(model?.id);
-  useEffect(() => {
-    if (!model) {
-      return;
-    }
-    const unsubscribe = registry.subscribe(model.selection.selectionAtom, () => {
-      const selectedItems = [
-        ...model.selection.selection
-      ];
-      multi(selectedItems);
-      onSelectionChanged?.(selectedItems);
-    });
-    return () => {
-      clear();
-      unsubscribe();
-    };
-  }, [
-    registry,
-    model,
-    onSelectionChanged
-  ]);
-  return model;
-};
-
-export {
-  extractOrder,
-  getSortValue,
-  compareValues,
-  BUTTON_IDENTIFIERS,
-  tableButtons,
-  CONTROL_IDENTIFIERS,
-  CheckboxStory,
-  SwitchStory,
-  tableControls,
-  FieldSortSchema,
-  tableSortAspect,
-  createEchoChangeCallback,
-  createDirectChangeCallback,
-  TableModel,
-  TablePresentation,
-  cellClassesForRowSelection,
-  useAddRow,
-  useProjectionModel,
-  useTableModel
-};
-//# sourceMappingURL=chunk-K4J2CKTZ.mjs.map