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

package/src/model/table-presentation.test.ts

@@ -3,17 +3,18 @@
 //
 
 import { Schema } from 'effect';
-import { describe, expect, it, beforeEach } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 
-import { Obj, Ref } from '@dxos/echo';
+import { Filter, Query } from '@dxos/echo';
 import { TypedObject } from '@dxos/echo-schema';
 import { live } from '@dxos/live-object';
 import { createEchoSchema } from '@dxos/live-object/testing';
-import { createView, ViewProjection } from '@dxos/schema';
+import { createView } from '@dxos/schema';
+
+import { Table } from '../types';
 
 import { TableModel, type TableModelProps } from './table-model';
 import { TablePresentation } from './table-presentation';
-import { TableType } from '../types';
 
 describe('TablePresentation', () => {
   describe('row reactivity', () => {
@@ -97,8 +98,11 @@ class Test extends TypedObject({ typename: 'example.com/type/Test', version: '0.
 
 const createTableModel = (props: Partial<TableModelProps> = {}): TableModel => {
   const schema = createEchoSchema(Test);
-  const view = createView({ name: 'Test', typename: schema.typename, jsonSchema: schema.jsonSchema });
-  const projection = new ViewProjection(schema.jsonSchema, view);
-  const table = Obj.make(TableType, { view: Ref.make(view) });
-  return new TableModel({ id: table.id, view, projection, ...props });
+  const table = Table.make();
+  const view = createView({
+    query: Query.select(Filter.type(schema)),
+    jsonSchema: schema.jsonSchema,
+    presentation: table,
+  });
+  return new TableModel({ view, schema: schema.jsonSchema, ...props });
 };

package/src/model/table-presentation.ts

@@ -5,28 +5,32 @@
 import { signal } from '@preact/signals-core';
 import { isNotNullable } from 'effect/Predicate';
 
-import { FormatEnum, getObjectDXN, getValue, TypeEnum } from '@dxos/echo-schema';
+import { Obj } from '@dxos/echo';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
 import { cellClassesForFieldType, formatForDisplay } from '@dxos/react-ui-form';
 import {
+  type DxGridCellValue,
   type DxGridPlane,
   type DxGridPlaneCells,
   type DxGridPlaneRange,
-  type DxGridCellValue,
   toPlaneCellIndex,
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/react-ui-theme';
-import { VIEW_FIELD_LIMIT, type FieldType } from '@dxos/schema';
+import { type FieldType, VIEW_FIELD_LIMIT } from '@dxos/schema';
 
-import { type SelectionMode } from './selection-model';
-import { type TableRow, type TableModel } from './table-model';
 import { tableButtons, tableControls } from '../util';
 
+import { type SelectionMode } from './selection-model';
+import { type TableModel, type TableRow } from './table-model';
+
 /**
  * Presentation layer for a table component, handling cell rendering and grid display logic.
  * Manages rendering of table cells, headers, selection columns, and action columns across
  * different grid planes.
  */
 export class TablePresentation<T extends TableRow = TableRow> {
+  private fieldProjectionCache = new Map<string, ReturnType<typeof this.model.projection.getFieldProjection>>();
+
   constructor(
     private readonly model: TableModel<T>,
     private readonly _visibleRange = signal<DxGridPlaneRange>({
@@ -36,6 +40,9 @@ export class TablePresentation<T extends TableRow = TableRow> {
   ) {}
 
   public getCells(range: DxGridPlaneRange, plane: DxGridPlane): DxGridPlaneCells {
+    // Clear cache at the start of each render pass
+    this.fieldProjectionCache.clear();
+
     let cells: DxGridPlaneCells;
 
     switch (plane) {
@@ -58,12 +65,21 @@ export class TablePresentation<T extends TableRow = TableRow> {
       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) => {
+      Object.values<DxGridCellValue>(cells).forEach((cell) => {
         cell.readonly = 'text-select';
       });
     }
@@ -71,155 +87,180 @@ export class TablePresentation<T extends TableRow = TableRow> {
     return cells;
   }
 
-  private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
-    const cells: DxGridPlaneCells = {};
-    const fields = this.model.view?.fields ?? [];
+  /**
+   * Gets a field projection, using cache if available within the current render pass.
+   */
+  private getFieldProjection(fieldId: string) {
+    let projection = this.fieldProjectionCache.get(fieldId);
+    if (!projection) {
+      projection = this.model.projection.getFieldProjection(fieldId);
+      this.fieldProjectionCache.set(fieldId, projection);
+    }
+    return projection;
+  }
 
-    const addCell = (obj: T, field: FieldType, colIndex: number, displayIndex: number): void => {
-      const { props } = this.model.projection.getFieldProjection(field.id);
+  private createDataCell(
+    cells: DxGridPlaneCells,
+    obj: T,
+    field: FieldType,
+    colIndex: number,
+    displayIndex: number,
+  ): void {
+    const { props } = this.getFieldProjection(field.id);
+
+    const cell: DxGridCellValue = {
+      get value() {
+        const value = getValue(obj, field.path);
+        if (value == null) {
+          return '';
+        }
 
-      const cell: DxGridCellValue = {
-        get value() {
-          const value = getValue(obj, field.path);
-          if (value == null) {
-            return '';
-          }
+        if (props.type === 'array') {
+          return '';
+        }
 
-          if (props.type === 'array') {
+        switch (props.format) {
+          case FormatEnum.Boolean:
+          case FormatEnum.SingleSelect:
+          case FormatEnum.MultiSelect: {
             return '';
           }
-
-          switch (props.format) {
-            case FormatEnum.Boolean:
-            case FormatEnum.SingleSelect:
-            case FormatEnum.MultiSelect: {
-              return '';
+          case FormatEnum.Ref: {
+            if (!field.referencePath) {
+              return ''; // TODO(burdon): Show error.
             }
-            case FormatEnum.Ref: {
-              if (!field.referencePath) {
-                return ''; // TODO(burdon): Show error.
-              }
 
-              return getValue(value.target, field.referencePath);
-            }
+            return getValue(value.target, field.referencePath);
+          }
 
-            default: {
-              return formatForDisplay({ type: props.type, format: props.format, value });
-            }
+          default: {
+            return formatForDisplay({ 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());
-      }
+    const classes = [];
+    const formatClasses = cellClassesForFieldType(props);
 
-      if (props.type === TypeEnum.Array) {
-        const targetArray = getValue(obj, field.path);
-        if (targetArray && Array.isArray(targetArray)) {
-          // TODO(ZaymonFC): For arrays of objects, objects should have a 'label' annotation on the field
-          // that can be used to render tags.
-          // TODO(ZaymonFC): Move to util.
-          const getLabel = (value: any) => {
-            // If the value is falsy, return undefined
-            // If the object is an array, check for 'name' property
-            // If the object is a primitive type (string, number, boolean) stringify
-            // If the object is an array return 'Array'
-            if (!value) {
-              return undefined;
-            }
-            if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-              return String(value);
-            }
-            if (Array.isArray(value)) {
-              return 'Array';
-            }
-            if (typeof value === 'object' && value.name) {
-              return value.name;
-            }
-            if (typeof value === 'object' && value.value) {
-              return `${value.value}`;
-            }
-            return 'Object';
-          };
-
-          const tags = targetArray
-            .map(getLabel)
-            .filter(isNotNullable)
-            .map((title) => {
-              return `<span class="dx-tag rounded-xl" data-hue="neutral">${title}</span>`;
-            })
-            .join('');
+    if (formatClasses) {
+      classes.push(formatClasses);
+    }
 
-          cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1 overflow-x-auto">${tags}</div>`;
-        }
-      }
+    const rowSelectionClasses = cellClassesForRowSelection(
+      this.model.selection.isObjectSelected(obj),
+      this.model.selection.selectionMode,
+    );
 
-      if (props.format === FormatEnum.Ref && props.referenceSchema) {
-        const targetObj = getValue(obj, field.path)?.target;
-        if (targetObj) {
-          const dxn = getObjectDXN(targetObj)?.toString();
-          cell.accessoryHtml = `<dx-ref-tag refId=${dxn} class="dx-button is-6 pli-[3px] pbe-[2px] min-bs-0 absolute inline-end-1"><dx-icon icon="ph--link-simple--regular"/></dx-ref-tag>`;
-        }
+    if (rowSelectionClasses) {
+      classes.push(rowSelectionClasses);
+    }
+
+    cell.className = mx(classes);
+
+    // Arrays.
+    if (props.type === TypeEnum.Array) {
+      const targetArray = getValue(obj, field.path);
+      if (targetArray && Array.isArray(targetArray)) {
+        // TODO(ZaymonFC): For arrays of objects, objects should have a 'label' annotation on the field
+        // that can be used to render tags.
+        // TODO(ZaymonFC): Move to util.
+        const getLabel = (value: any) => {
+          // If the value is falsy, return undefined
+          // If the object is an array, check for 'name' property
+          // If the object is a primitive type (string, number, boolean) stringify
+          // If the object is an array return 'Array'
+          if (!value) {
+            return undefined;
+          }
+          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 === FormatEnum.Boolean) {
-        const value = getValue(obj, field.path);
-        cell.accessoryHtml = tableControls.switch.render({
-          colIndex,
-          rowIndex: displayIndex,
-          checked: value ?? false,
-        });
-        cell.readonly = 'no-text-select';
+    // References.
+    if (props.format === FormatEnum.Ref && props.referenceSchema) {
+      const targetObj = getValue(obj, field.path)?.target;
+      if (targetObj) {
+        const dxn = Obj.getDXN(targetObj)?.toString();
+        cell.accessoryHtml = `<dx-anchor 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-anchor>`;
       }
+    }
 
-      if (props.format === FormatEnum.SingleSelect) {
-        const value = 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>`;
-          }
+    // Booleans.
+    if (props.format === FormatEnum.Boolean) {
+      const value = getValue(obj, field.path);
+      cell.accessoryHtml = tableControls.switch.render({
+        colIndex,
+        rowIndex: displayIndex,
+        checked: value ?? false,
+      });
+      cell.readonly = 'no-text-select';
+    }
+
+    // Single-Selects.
+    if (props.format === FormatEnum.SingleSelect) {
+      const value = 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 === FormatEnum.MultiSelect) {
-        const values = getValue(obj, field.path) as string[] | undefined;
-        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(' ');
+    // Multi-Selects.
+    if (props.format === FormatEnum.MultiSelect) {
+      const values = getValue(obj, field.path) as string[] | undefined;
+      const options = this.model.projection.getFieldProjection(field.id).props.options;
+      if (options && values && values.length > 0) {
+        const tags = values
+          .map((value) => {
+            const option = options.find((o) => o.id === value);
+            if (option) {
+              return `<span class="dx-tag" data-hue="${option.color}">${option.title}</span>`;
+            }
+            return null;
+          })
+          .filter(Boolean)
+          .join('');
 
-          if (tags) {
-            cell.accessoryHtml = `<div role='none' class="flex flex-row gap-1">${tags}</div>`;
-          }
+        if (tags) {
+          cell.accessoryHtml = tags;
         }
       }
+    }
 
-      const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
-      cells[idx] = cell;
-    };
+    const idx = toPlaneCellIndex({ col: colIndex, row: displayIndex });
+    cells[idx] = cell;
+  }
+
+  private getMainGridCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    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++) {
@@ -228,7 +269,48 @@ export class TablePresentation<T extends TableRow = TableRow> {
           continue;
         }
 
-        addCell(this.model.rows.value[row], field, col, row);
+        this.createDataCell(cells, this.model.rows.value[row], field, col, row);
+      }
+    }
+
+    return cells;
+  }
+
+  private getDraftRowCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const fields = this.model.projection?.fields ?? [];
+    const draftRows = this.model.draftRows.value;
+
+    // Return cells of the CTA row if no draft row is active
+    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;
+            }
+          }
+        }
       }
     }
 
@@ -237,7 +319,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
   private getHeaderCells(range: DxGridPlaneRange): DxGridPlaneCells {
     const cells: DxGridPlaneCells = {};
-    const fields = this.model.view?.fields ?? [];
+    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;
@@ -245,14 +327,14 @@ export class TablePresentation<T extends TableRow = TableRow> {
 
       cells[toPlaneCellIndex({ col, row: 0 })] = {
         // TODO(burdon): Use same logic as form for fallback title.
-        value: props.title ?? field.path,
-        readonly: true,
+        value: '',
         resizeHandle: 'col',
         accessoryHtml: `
+          <span class="grow min-is-0 truncate">${props.title ?? field.path}</span>
           ${direction !== undefined ? tableButtons.sort.render({ fieldId: field.id, direction }) : ''}
           ${tableButtons.columnSettings.render({ fieldId: field.id })}
         `,
-        className: '!bg-toolbarSurface',
+        className: '!bg-toolbarSurface !text-description [&>div]:flex [&>div]:items-stretch',
       };
     }
 
@@ -321,7 +403,7 @@ export class TablePresentation<T extends TableRow = TableRow> {
       [toPlaneCellIndex({ col: 0, row: 0 })]: {
         accessoryHtml: this.model.features.schemaEditable
           ? tableButtons.addColumn.render({
-              disabled: (this.model.view?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
+              disabled: (this.model.projection?.fields?.length ?? 0) >= VIEW_FIELD_LIMIT,
             })
           : undefined,
         className: '!bg-toolbarSurface',
@@ -330,6 +412,49 @@ export class TablePresentation<T extends TableRow = TableRow> {
       },
     };
   }
+
+  private getDraftActionCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const draftRows = this.model.draftRows.value;
+
+    // Return cells of the CTA row if no draft row is active
+    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;
+  }
+
+  private getDraftIconCells(range: DxGridPlaneRange): DxGridPlaneCells {
+    const cells: DxGridPlaneCells = {};
+    const draftRows = this.model.draftRows.value;
+
+    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;
+  }
 }
 
 export const cellClassesForRowSelection = (selected: boolean, selectionMode: SelectionMode) => {
@@ -344,7 +469,7 @@ export const cellClassesForRowSelection = (selected: boolean, selectionMode: Sel
   switch (selectionMode) {
     case 'single':
       // TODO(ZaymonFC): @thure, do we need a grid version of 'currentRelated'?
-      return ['!bg-currentRelated hover:bg-hoverSurface', '!cursor-pointer'];
+      return ['!bg-currentRelated dx-grid__cell--no-focus-unfurl hover:bg-hoverSurface !cursor-pointer'];
     case 'multiple':
       return ['!bg-gridCellSelected'];
   }

package/src/model/table-sorting.ts

@@ -2,15 +2,24 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed, signal, type Signal, type ReadonlySignal } from '@preact/signals-core';
+import { type ReadonlySignal, type Signal, computed, signal } from '@preact/signals-core';
 import orderBy from 'lodash.orderby';
 
-import { getValue, FormatEnum, TypeEnum, type SortDirectionType, type FieldSortType } from '@dxos/echo-schema';
+import { FormatEnum, TypeEnum, getValue } from '@dxos/echo-schema';
 import { formatForDisplay } from '@dxos/react-ui-form';
-import type { PropertyType, FieldType, ViewProjection, ViewType } from '@dxos/schema';
+import type {
+  DataType,
+  FieldSortType,
+  FieldType,
+  ProjectionModel,
+  PropertyType,
+  SortDirectionType,
+} from '@dxos/schema';
 
 import { type TableRow } from './table-model';
 
+// TODO(wittjosiah): Remove. Use ordering in queries instead.
+
 /**
  * Represents the local sort state.
  * - undefined: No local sort set, fallback to view sort.
@@ -49,13 +58,13 @@ export class TableSorting<T extends TableRow> {
 
   constructor(
     rows: Signal<T[]>,
-    private readonly _view: ViewType | undefined,
-    private readonly _projection: ViewProjection,
+    private readonly _view: DataType.View,
+    private readonly _projection: ProjectionModel,
   ) {
     this._rows = rows;
     this._isDirty = computed(() => {
       const local = this._localSort.value;
-      const viewSort = this._view?.query.sort?.[0];
+      const viewSort = this._view.sort?.[0];
       if (local?.type === 'cleared') {
         return viewSort !== undefined;
       }
@@ -83,7 +92,7 @@ export class TableSorting<T extends TableRow> {
       return local.sort;
     }
 
-    return this._view?.query.sort?.[0];
+    return this._view.sort?.[0];
   }
 
   /**
@@ -106,7 +115,7 @@ export class TableSorting<T extends TableRow> {
   }
 
   public toggleSort(fieldId: string): void {
-    if (!this._view || !this.sorting || this.sorting.fieldId !== fieldId) {
+    if (!this.sorting || this.sorting.fieldId !== fieldId) {
       return;
     }
 
@@ -127,11 +136,11 @@ export class TableSorting<T extends TableRow> {
   }
 
   public save(): void {
-    if (this._view && this._localSort.value !== undefined) {
+    if (this._localSort.value !== undefined) {
       if (this._localSort.value.type === 'active') {
-        this._view.query.sort = [this._localSort.value.sort];
+        this._view.sort = [this._localSort.value.sort];
       } else {
-        this._view.query.sort = [];
+        this._view.sort = [];
       }
       this._localSort.value = undefined;
     }
@@ -145,11 +154,11 @@ export class TableSorting<T extends TableRow> {
     return computed(() => {
       this._displayToDataIndex.clear();
       const sort = this.sorting;
-      if (!sort || !this._view) {
+      if (!sort) {
         return this._rows.value;
       }
 
-      const field = this._view.fields.find((f) => f.id === sort.fieldId);
+      const field = this._projection.fields.find((f) => f.id === sort.fieldId);
       if (!field) {
         return this._rows.value;
       }

package/src/playwright/playwright.config.ts

@@ -0,0 +1,17 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { defineConfig } from '@playwright/test';
+
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...e2ePreset(import.meta.dirname),
+  // TODO(wittjosiah): Avoid hard-coding ports.
+  webServer: {
+    command: 'moon run storybook:serve-e2e -- --port=9004',
+    port: 9004,
+    reuseExistingServer: false,
+  },
+});