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

package/dist/lib/browser/{chunk-5XLSHLOG.mjs → chunk-ZAOSIG3L.mjs}

@@ -5,7 +5,7 @@ import {
 // src/util/dynamic-table.ts
 import { Obj } from "@dxos/echo";
 import { getTypename, toJsonSchema } from "@dxos/echo-schema";
-import { createView, getSchemaFromPropertyDefinitions, ProjectionModel } from "@dxos/schema";
+import { ProjectionModel, createView, getSchemaFromPropertyDefinitions } from "@dxos/schema";
 var getBaseSchema = ({ typename, properties, jsonSchema, schema }) => {
   if (typename && properties) {
     const schema2 = getSchemaFromPropertyDefinitions(typename, properties);
@@ -111,6 +111,7 @@ var createTable = async ({ sizes, ...props }) => {
   }
   return {
     jsonSchema,
+    schema,
     view
   };
 };
@@ -127,7 +128,7 @@ var BUTTON_IDENTIFIERS = {
 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>`;
+  return `<button ${attr} data-testid="${testId}" class="dx-button is-6 pli-0.5 min-bs-0 absolute inset-block-1 ${positionClass}" ${dataAttrs} ${disabled ? "disabled" : ""} data-dx-grid-action="accessory"><svg data-size="4"><use href="/icons.svg#${icon}"/></svg></button>`;
 };
 var addColumnButton = {
   attr: BUTTON_IDENTIFIERS.newColumn,
@@ -213,7 +214,8 @@ var saveDraftRowButton = {
       icon: saveDraftRowButton.icon,
       disabled,
       data: {
-        "data-row-index": rowIndex.toString()
+        "data-row-index": rowIndex.toString(),
+        "data-variant": "primary"
       },
       testId: "table-save-draft-row-button"
     });
@@ -232,6 +234,7 @@ var tableButtons = {
 };
 
 // src/util/table-controls.ts
+import { accessoryHandlesPointerdownAttrs } from "@dxos/lit-grid";
 var CONTROL_IDENTIFIERS = {
   checkbox: "data-table-checkbox",
   switch: "data-table-switch"
@@ -244,7 +247,7 @@ 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}"/>`;
+  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 = {
@@ -260,7 +263,8 @@ var SwitchStory = ({ colIndex, rowIndex, checked = false, disabled = false }) =>
   const attrs = {
     [CONTROL_IDENTIFIERS.switch]: "",
     "data-row-index": rowIndex.toString(),
-    "data-col-index": colIndex.toString()
+    "data-col-index": colIndex.toString(),
+    ...accessoryHandlesPointerdownAttrs
   };
   return renderInput(BASE_CLASSES.switch, attrs, checked, disabled, true, "table-switch");
 };
@@ -287,7 +291,7 @@ var tableControls = {
 
 // src/util/schema.ts
 import { Schema } from "effect";
-import { isTypeLiteral, TypeLiteral } from "effect/SchemaAST";
+import { TypeLiteral, isTypeLiteral } from "effect/SchemaAST";
 var narrowSchema = (schema, paths) => {
   const ast = schema?.ast;
   if (isTypeLiteral(ast)) {
@@ -304,7 +308,7 @@ var narrowSchema = (schema, paths) => {
 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 { FormatEnum as FormatEnum2, getSchema, getSnapshot, getValue as getValue2, setValue, toEffectSchema as toEffectSchema2 } from "@dxos/echo-schema";
 import { invariant } from "@dxos/invariant";
 import { ObjectId } from "@dxos/keys";
 import { isLiveObject } from "@dxos/live-object";
@@ -312,10 +316,34 @@ import { fullyQualifiedId } from "@dxos/react-client/echo";
 import { formatForEditing, parseValue } from "@dxos/react-ui-form";
 import { ProjectionModel as ProjectionModel2, validateSchema } from "@dxos/schema";
 
+// src/util/tag.ts
+var TAG_PATTERN_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
+var extractTagIds = (value) => {
+  if (typeof value !== "string") {
+    return void 0;
+  }
+  const ids = [];
+  let match;
+  while ((match = TAG_PATTERN_REGEX.exec(value)) !== null) {
+    if (match[2]) {
+      ids.push(match[2]);
+    }
+  }
+  return ids.length > 0 ? ids : void 0;
+};
+
 // src/model/selection-model.ts
 import { computed, effect, signal } from "@preact/signals-core";
 import { Resource } from "@dxos/context";
 var SelectionModel = class extends Resource {
+  _rows;
+  _selectionMode;
+  _initialSelection;
+  _onSelectionChanged;
+  _selection;
+  _validSelectedIds;
+  _hasSelection;
+  _allSelected;
   constructor(_rows, _selectionMode, _initialSelection, _onSelectionChanged) {
     super(), this._rows = _rows, this._selectionMode = _selectionMode, this._initialSelection = _initialSelection, this._onSelectionChanged = _onSelectionChanged, this._validSelectedIds = computed(() => {
       const rows = this._rows.value;
@@ -388,14 +416,29 @@ var SelectionModel = class extends Resource {
   get selectionMode() {
     return this._selectionMode;
   }
+  getSelectedRows;
+  isRowIndexSelected;
+  isObjectSelected;
+  //
+  // Manipulation
+  //
+  toggleSelectionForRowIndex;
+  setSelection;
 };
 
 // src/model/table-sorting.ts
 import { computed as computed2, signal as signal2 } from "@preact/signals-core";
 import orderBy from "lodash.orderby";
-import { getValue, FormatEnum, TypeEnum } from "@dxos/echo-schema";
+import { FormatEnum, TypeEnum, getValue } from "@dxos/echo-schema";
 import { formatForDisplay } from "@dxos/react-ui-form";
 var TableSorting = class {
+  _view;
+  _projection;
+  _displayToDataIndex;
+  _rows;
+  _localSort;
+  _isDirty;
+  sortedRows;
   constructor(rows, _view, _projection) {
     this._view = _view;
     this._projection = _projection;
@@ -555,22 +598,6 @@ var TableSorting = class {
   }
 };
 
-// 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 = {
@@ -582,222 +609,38 @@ var defaultFeatures = {
   schemaEditable: false
 };
 var TableModel = class extends Resource2 {
+  _view;
+  _projection;
+  _table;
+  _visibleRange = signal3({
+    start: {
+      row: 0,
+      col: 0
+    },
+    end: {
+      row: 0,
+      col: 0
+    }
+  });
+  _onInsertRow;
+  _onDeleteRows;
+  _onDeleteColumn;
+  _onCellUpdate;
+  _onRowOrderChange;
+  _onRowAction;
+  _rowActions;
+  _features;
+  _rows = signal3([]);
+  _draftRows = signal3([]);
+  _sorting;
+  _pinnedRows;
+  _selection;
+  _columnMeta;
   constructor({ view, schema, projection, features = {}, sorting = [], initialSelection = [], pinnedRows = {
     top: [],
     bottom: []
   }, rowActions = [], onCellUpdate, onDeleteColumn, onDeleteRows, onInsertRow, onRowOrderChange, onRowAction }) {
     super();
-    this._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 = {
@@ -806,7 +649,7 @@ var TableModel = class extends Resource2 {
     };
     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,
+      L: 141,
       S: this,
       A: [
         "!(this._features.dataEditable && this._features.selection.enabled && this._features.selection.mode === 'single')",
@@ -837,7 +680,7 @@ var TableModel = class extends Resource2 {
   get table() {
     invariant(this._table, "Model not initialized", {
       F: __dxlog_file,
-      L: 177,
+      L: 179,
       S: this,
       A: [
         "this._table",
@@ -876,7 +719,7 @@ var TableModel = class extends Resource2 {
   get columnMeta() {
     invariant(this._columnMeta, void 0, {
       F: __dxlog_file,
-      L: 216,
+      L: 218,
       S: this,
       A: [
         "this._columnMeta",
@@ -902,7 +745,7 @@ var TableModel = class extends Resource2 {
     const presentation = this._view.presentation.target ?? await this._view.presentation.load();
     invariant(Obj3.instanceOf(TableView, presentation), void 0, {
       F: __dxlog_file,
-      L: 239,
+      L: 241,
       S: this,
       A: [
         "Obj.instanceOf(TableView, presentation)",
@@ -970,6 +813,17 @@ var TableModel = class extends Resource2 {
     });
     this._ctx.onDispose(draftRowsWatcher);
   }
+  //
+  // Data
+  //
+  setRows = (obj) => {
+    this._rows.value = obj;
+  };
+  getRowCount = () => this._rows.value.length;
+  /**
+  * @reactive
+  */
+  getDraftRowCount = () => this._draftRows.value.length;
   // TODO(ZaymonFC): Return .value instead of exposing the signal.
   get draftRows() {
     return this._draftRows;
@@ -988,6 +842,13 @@ var TableModel = class extends Resource2 {
     const validationErrors = draftRow.validationErrors || [];
     return validationErrors.some((error) => error.path === fieldPath);
   }
+  getColumnCount = () => this._projection?.fields.length ?? 0;
+  insertRow = () => {
+    const result = this._onInsertRow?.();
+    if (result === false && this._draftRows.value.length === 0) {
+      this.createDraftRow();
+    }
+  };
   createDraftRow() {
     if (!this._projection) {
       return;
@@ -1027,6 +888,187 @@ var TableModel = class extends Resource2 {
     const schema = toEffectSchema2(this._projection.baseSchema);
     return validateSchema(schema, data) || [];
   }
+  commitDraftRow = (draftRowIndex) => {
+    if (draftRowIndex < 0 || draftRowIndex >= this._draftRows.value.length) {
+      return false;
+    }
+    const draftRow = this._draftRows.value[draftRowIndex];
+    if (!draftRow.valid) {
+      return false;
+    }
+    const success = this._onInsertRow?.(draftRow.data);
+    if (success) {
+      const newDraftRows = this._draftRows.value.filter((_, index) => index !== draftRowIndex);
+      this._draftRows.value = newDraftRows;
+    }
+    return success ?? false;
+  };
+  deleteRow = (rowIndex) => {
+    const row = this._sorting.getDataIndex(rowIndex);
+    const obj = this._rows.value[row];
+    const objectsToDelete = [];
+    if (this.features.selection.enabled && this._selection.hasSelection.value) {
+      const selectedRows = this._selection.getSelectedRows();
+      objectsToDelete.push(...selectedRows);
+    } else {
+      objectsToDelete.push(obj);
+    }
+    this._onDeleteRows?.(row, objectsToDelete);
+  };
+  handleRowAction = (actionId, rowIndex) => {
+    if (!this._onRowAction) {
+      return;
+    }
+    const row = this._sorting.getDataIndex(rowIndex);
+    const data = this._rows.value[row];
+    if (data) {
+      this._onRowAction(actionId, data);
+    }
+  };
+  getCellData = (cell) => {
+    const { col, row, plane } = cell;
+    const fields = this._projection?.fields ?? [];
+    if (col < 0 || col >= fields.length) {
+      return void 0;
+    }
+    const field = fields[col];
+    let value;
+    if (plane === "frozenRowsEnd") {
+      if (row >= 0 && row < this._draftRows.value.length) {
+        value = getValue2(this._draftRows.value[row].data, field.path);
+      } else {
+        return void 0;
+      }
+    } else {
+      const dataIndex = this._sorting.getDataIndex(row);
+      value = getValue2(this._rows.value[dataIndex], field.path);
+    }
+    if (value == null) {
+      return "";
+    }
+    const { props } = this._projection.getFieldProjection(field.id);
+    switch (props.format) {
+      case FormatEnum2.Ref: {
+        if (!field.referencePath) {
+          return "";
+        }
+        return getValue2(value.target, field.referencePath);
+      }
+      default: {
+        return formatForEditing({
+          type: props.type,
+          format: props.format,
+          value
+        });
+      }
+    }
+  };
+  validateCellData = async ({ col, row, plane }, value) => {
+    const fields = this._projection?.fields ?? [];
+    if (col < 0 || col >= fields.length) {
+      return {
+        valid: false,
+        error: "Invalid column index"
+      };
+    }
+    const field = fields[col];
+    const { props } = this._projection.getFieldProjection(field.id);
+    const transformedValue = editorTextToCellValue(props, value);
+    const isDraftRow = plane === "frozenRowsEnd";
+    if (isDraftRow) {
+      const isInvalidDraftRowIndex = row < 0 || row >= this._draftRows.value.length;
+      if (isInvalidDraftRowIndex) {
+        return {
+          valid: false,
+          error: "Invalid draft row index"
+        };
+      }
+      const draftRow = this._draftRows.value[row];
+      const snapshot = {
+        ...draftRow.data
+      };
+      setValue(snapshot, field.path, transformedValue);
+      const validationErrors = this.validateDraftRowData(snapshot);
+      if (validationErrors.length > 0) {
+        const error = validationErrors.find((err) => err.path === field.path);
+        if (error) {
+          return {
+            valid: false,
+            error: error.message
+          };
+        }
+      }
+      return {
+        valid: true
+      };
+    } else {
+      const rowIdx = this._sorting.getDataIndex(row);
+      const currentRow = this._rows.value[rowIdx];
+      invariant(currentRow, "Invalid row index", {
+        F: __dxlog_file,
+        L: 513,
+        S: this,
+        A: [
+          "currentRow",
+          "'Invalid row index'"
+        ]
+      });
+      const snapshot = getSnapshot(currentRow);
+      setValue(snapshot, field.path, transformedValue);
+      const schema = getSchema(currentRow);
+      invariant(schema, void 0, {
+        F: __dxlog_file,
+        L: 519,
+        S: this,
+        A: [
+          "schema",
+          ""
+        ]
+      });
+      const validationResult = validateSchema(schema, snapshot);
+      if (validationResult && validationResult.length > 0) {
+        const error = validationResult[0];
+        invariant(error.path === field.path, void 0, {
+          F: __dxlog_file,
+          L: 524,
+          S: this,
+          A: [
+            "error.path === field.path",
+            ""
+          ]
+        });
+        return {
+          valid: false,
+          error: error.message
+        };
+      }
+      return {
+        valid: true
+      };
+    }
+  };
+  setCellData = (cell, value) => {
+    const { col, row, plane } = cell;
+    const fields = this._projection?.fields ?? [];
+    if (col < 0 || col >= fields.length) {
+      return;
+    }
+    const field = fields[col];
+    const { props } = this._projection.getFieldProjection(field.id);
+    const transformedValue = editorTextToCellValue(props, value);
+    if (props.format === FormatEnum2.Ref && !isLiveObject(value)) {
+      return;
+    }
+    if (plane === "frozenRowsEnd") {
+      if (row >= 0 && row < this._draftRows.value.length) {
+        setValue(this._draftRows.value[row].data, field.path, transformedValue);
+        this.validateDraftRow(row);
+      }
+    } else {
+      const rowIdx = this._sorting.getDataIndex(row);
+      setValue(this._rows.value[rowIdx], field.path, transformedValue);
+    }
+  };
   /**
   * Updates a cell's value using a transform function.
   * @param {DxGridPlanePosition} position - The position of the cell to update.
@@ -1144,99 +1186,100 @@ 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"
-        }
-      };
+  _state = signal4({
+    type: "closed"
+  });
+  _triggerRef = {
+    current: null
+  };
+  get state() {
+    return this._state;
+  }
+  get trigger() {
+    return this._triggerRef;
+  }
+  setTrigger = (trigger) => {
+    this._triggerRef.current = trigger;
+  };
+  showRowMenu = (rowIndex) => {
+    this._state.value = {
+      type: "row",
+      rowIndex
     };
-    this.showReferencePanel = (targetId, schemaId) => {
-      this._state.value = {
-        type: "refPanel",
-        targetId,
-        typename: schemaId
-      };
+  };
+  showColumnMenu = (fieldId) => {
+    this._state.value = {
+      type: "column",
+      fieldId
     };
-    this.openColumnSettings = () => {
-      if (this._state.value.type === "column") {
-        const fieldId = this._state.value.fieldId;
-        requestAnimationFrame(() => {
-          this._state.value = {
-            type: "columnSettings",
-            mode: {
-              type: "edit",
-              fieldId
-            }
-          };
-        });
+  };
+  showColumnCreator = () => {
+    this._state.value = {
+      type: "columnSettings",
+      mode: {
+        type: "create"
       }
     };
-    this.openCreateRef = (typename, anchorCell, initialValues, onCreate) => {
-      if (anchorCell) {
-        this._triggerRef.current = anchorCell;
+  };
+  showReferencePanel = (targetId, schemaId) => {
+    this._state.value = {
+      type: "refPanel",
+      targetId,
+      typename: schemaId
+    };
+  };
+  openColumnSettings = () => {
+    if (this._state.value.type === "column") {
+      const fieldId = this._state.value.fieldId;
+      requestAnimationFrame(() => {
         this._state.value = {
-          type: "createRefPanel",
-          typename,
-          initialValues,
-          onCreate
+          type: "columnSettings",
+          mode: {
+            type: "edit",
+            fieldId
+          }
         };
-      } 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 = () => {
+      });
+    }
+  };
+  openCreateRef = (typename, anchorCell, initialValues, onCreate) => {
+    if (anchorCell) {
+      this._triggerRef.current = anchorCell;
       this._state.value = {
-        type: "closed"
+        type: "createRefPanel",
+        typename,
+        initialValues,
+        onCreate
       };
+    } else {
+      log.warn("anchor cell not found while creating new ref", void 0, {
+        F: __dxlog_file2,
+        L: 86,
+        S: this,
+        C: (f, a) => f(...a)
+      });
+    }
+  };
+  close = () => {
+    this._state.value = {
+      type: "closed"
     };
-  }
-  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 { FormatEnum as FormatEnum3, TypeEnum as TypeEnum2, getValue as getValue3 } from "@dxos/echo-schema";
 import { cellClassesForFieldType, formatForDisplay as formatForDisplay2 } from "@dxos/react-ui-form";
 import { toPlaneCellIndex } from "@dxos/react-ui-grid";
 import { mx } from "@dxos/react-ui-theme";
 import { VIEW_FIELD_LIMIT } from "@dxos/schema";
 var TablePresentation = class {
+  model;
+  _visibleRange;
+  fieldProjectionCache;
   constructor(model, _visibleRange = signal5({
     start: {
       row: 0,
@@ -1277,6 +1320,9 @@ var TablePresentation = class {
       case "frozenRowsEnd":
         cells = this.getDraftRowCells(range);
         break;
+      case "fixedEndStart":
+        cells = this.getDraftSelectCells(range);
+        break;
       case "fixedEndEnd":
         cells = this.getDraftActionCells(range);
         break;
@@ -1380,7 +1426,7 @@ var TablePresentation = class {
       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>`;
+        cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-2 block-start-[.2rem]" data-dx-grid-action="accessory"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
       }
     }
     if (props.format === FormatEnum3.Boolean) {
@@ -1445,16 +1491,16 @@ var TablePresentation = class {
     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 cellIndex = toPlaneCellIndex({
-            col,
-            row
-          });
           const cellValue = cells[cellIndex];
           if (cellValue) {
             const existingClasses = cellValue.className || "";
@@ -1462,6 +1508,7 @@ var TablePresentation = class {
             cellValue.className = existingClasses ? `${existingClasses} ${draftClasses}` : draftClasses;
           }
         }
+        cells[cellIndex].className += " !bg-toolbarSurface";
       }
     }
     return cells;
@@ -1593,7 +1640,23 @@ var TablePresentation = class {
         accessoryHtml: tableButtons.saveDraftRow.render({
           rowIndex: row,
           disabled
-        })
+        }),
+        className: "!bg-toolbarSurface"
+      };
+    }
+    return cells;
+  }
+  getDraftSelectCells(range) {
+    const cells = {};
+    const draftRows = this.model.draftRows.value;
+    for (let row = range.start.row; row <= range.end.row && row < draftRows.length; row++) {
+      cells[toPlaneCellIndex({
+        col: 0,
+        row
+      })] = {
+        value: "",
+        readonly: true,
+        className: "!bg-toolbarSurface"
       };
     }
     return cells;
@@ -1748,4 +1811,4 @@ export {
   useTableModel,
   useAddRow
 };
-//# sourceMappingURL=chunk-5XLSHLOG.mjs.map
+//# sourceMappingURL=chunk-ZAOSIG3L.mjs.map