@dxos/plugin-sheet 0.6.12-main.ed7cda7 → 0.6.12-staging.0b4bb48

package/src/components/Sheet/Sheet.tsx

@@ -60,7 +60,6 @@ import {
 } from './grid';
 import { type GridSize, handleArrowNav, handleNav, useRangeSelect } from './nav';
 import { type SheetContextProps, SheetContextProvider, useSheetContext } from './sheet-context';
-import { useThreads } from './threads';
 import { getRectUnion, getRelativeClientRect, scrollIntoView } from './util';
 import {
   type CellIndex,
@@ -69,9 +68,7 @@ import {
   columnLetter,
   posEquals,
   rangeToA1Notation,
-  addressToIndex,
-  addressFromIndex,
-} from '../../defs';
+} from '../../model';
 import {
   CellEditor,
   type CellRangeNotifier,
@@ -138,16 +135,12 @@ const SheetRoot = ({ children, ...props }: PropsWithChildren<SheetContextProps>)
 
 type SheetMainProps = ThemedClassName<Partial<GridSize>>;
 
-const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numCols }, forwardRef) => {
+const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numColumns }, forwardRef) => {
   const { model, cursor, setCursor, setRange, setEditing } = useSheetContext();
 
   // Scrolling.
   const { rowsRef, columnsRef, contentRef } = useScrollHandlers();
 
-  // Threads.
-  // TODO(Zan): Move this to an extension once we have an extension model.
-  useThreads();
-
   //
   // Order of Row/columns.
   //
@@ -177,21 +170,21 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
   }, [rows, columns]);
 
   const handleMoveRows: SheetRowsProps['onMove'] = (from, to, num = 1) => {
-    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : undefined;
+    const cursorIdx = cursor ? model.addressToIndex(cursor) : undefined;
     const [rows] = model.sheet.rows.splice(from, num);
     model.sheet.rows.splice(to, 0, rows);
     if (cursorIdx) {
-      setCursor(addressFromIndex(model.sheet, cursorIdx));
+      setCursor(model.addressFromIndex(cursorIdx));
     }
     setRows([...model.sheet.rows]);
   };
 
   const handleMoveColumns: SheetColumnsProps['onMove'] = (from, to, num = 1) => {
-    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : undefined;
+    const cursorIdx = cursor ? model.addressToIndex(cursor) : undefined;
     const columns = model.sheet.columns.splice(from, num);
     model.sheet.columns.splice(to, 0, ...columns);
     if (cursorIdx) {
-      setCursor(addressFromIndex(model.sheet, cursorIdx));
+      setCursor(model.addressFromIndex(cursorIdx));
     }
     setColumns([...model.sheet.columns]);
   };
@@ -263,8 +256,8 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         ref={columnsRef}
         columns={columns}
         sizes={columnSizes}
-        selected={cursor?.col}
-        onSelect={(col) => setCursor(cursor?.col === col ? undefined : { row: -1, col })}
+        selected={cursor?.column}
+        onSelect={(column) => setCursor(cursor?.column === column ? undefined : { row: -1, column })}
         onResize={handleResizeColumn}
         onMove={handleMoveColumns}
       />
@@ -274,13 +267,13 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         rows={rows}
         sizes={rowSizes}
         selected={cursor?.row}
-        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, col: -1 })}
+        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, column: -1 })}
         onResize={handleResizeRow}
         onMove={handleMoveRows}
       />
       <SheetGrid
         ref={contentRef}
-        size={{ numRows: numRows ?? rows.length, numCols: numCols ?? columns.length }}
+        size={{ numRows: numRows ?? rows.length, numColumns: numColumns ?? columns.length }}
         rows={rows}
         columns={columns}
         rowSizes={rowSizes}
@@ -885,11 +878,11 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
 
             {/* Grid cells. */}
             {rowRange.map(({ row, top, height }) => {
-              return columnRange.map(({ col, left, width }) => {
+              return columnRange.map(({ column, left, width }) => {
                 const style: CSSProperties = { position: 'absolute', top, left, width, height };
-                const cell: CellAddress = { row, col };
+                const cell = { row, column };
                 const id = addressToA1Notation(cell);
-                const idx = addressToIndex(model.sheet, cell);
+                const idx = model.addressToIndex(cell);
                 const active = posEquals(cursor, cell);
                 if (active && editing) {
                   const value = initialText.current ?? model.getCellText(cell) ?? '';
@@ -1010,46 +1003,16 @@ type SheetCellProps = {
 };
 
 const SheetCell = ({ id, cell, style, active, onSelect }: SheetCellProps) => {
-  const {
-    formatting,
-    editing,
-    setRange,
-    decorations,
-    model: { sheet },
-  } = useSheetContext();
+  const { formatting, editing, setRange } = useSheetContext();
   const { value, classNames } = formatting.getFormatting(cell);
 
-  const decorationsForCell = decorations.getDecorationsForCell(addressToIndex(sheet, cell)) ?? [];
-  const decorationAddedClasses = useMemo(
-    () => decorationsForCell.flatMap((d) => d.classNames ?? []),
-    [decorationsForCell],
-  );
-  const decoratedContent = decorationsForCell.reduce(
-    (children, { decorate }) => {
-      if (!decorate) {
-        return children;
-      }
-      const DecoratorComponent = decorate;
-      return <DecoratorComponent>{children}</DecoratorComponent>;
-    },
-    <div
-      role='none'
-      className={mx(
-        'flex flex-grow bs-full is-full px-2 items-center truncate cursor-pointer',
-        ...decorationAddedClasses,
-      )}
-    >
-      {value}
-    </div>,
-  );
-
   return (
     <div
       {...{ [`data-${CELL_DATA_KEY}`]: id }}
       role='cell'
       style={style}
       className={mx(
-        'border border-gridLine cursor-pointer',
+        'flex w-full h-full px-2 py-1 truncate items-center border border-gridLine cursor-pointer',
         fragments.cell,
         active && ['z-20', fragments.cellSelected],
         classNames,
@@ -1063,7 +1026,7 @@ const SheetCell = ({ id, cell, style, active, onSelect }: SheetCellProps) => {
       }}
       onDoubleClick={() => onSelect?.(cell, true)}
     >
-      {decoratedContent}
+      {value}
     </div>
   );
 };
@@ -1082,11 +1045,10 @@ const GridCellEditor = ({ style, value, onNav, onClose }: GridCellEditorProps) =
       notifier.current?.(rangeToA1Notation(range));
     }
   }, [range]);
-
   const extension = useMemo(
     () => [
       editorKeys({ onNav, onClose }),
-      sheetExtension({ functions: model.graph.getFunctions() }),
+      sheetExtension({ functions: model.functions }),
       rangeExtension((fn) => (notifier.current = fn)),
     ],
     [model],
@@ -1110,13 +1072,12 @@ const GridCellEditor = ({ style, value, onNav, onClose }: GridCellEditorProps) =
 
 const SheetStatusBar = () => {
   const { model, cursor, range } = useSheetContext();
-
   let value;
   let isFormula = false;
   if (cursor) {
     value = model.getCellValue(cursor);
     if (typeof value === 'string' && value.charAt(0) === '=') {
-      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
+      value = model.mapFormulaBindingFromId(model.mapFormulaIndicesToRefs(value));
       isFormula = true;
     } else if (value != null) {
       value = String(value);

package/src/{model/formatting-model.ts → components/Sheet/formatting.ts}

@@ -4,24 +4,17 @@
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
 
-import { type SheetModel } from './sheet-model';
-import { type CellAddress, inRange } from '../defs';
-import { addressToIndex, rangeFromIndex } from '../defs';
-import { ValueTypeEnum } from '../types';
-
-export type CellFormat = {
-  value?: string;
-  classNames?: ClassNameValue;
-};
+import { type SheetModel, type CellAddress, inRange } from '../../model';
+import { ValueTypeEnum } from '../../types';
 
 export class FormattingModel {
-  constructor(private readonly _model: SheetModel) {}
+  constructor(private readonly model: SheetModel) {}
 
   /**
    * Get formatted string value and className for cell.
    */
-  getFormatting(cell: CellAddress): CellFormat {
-    const value = this._model.getValue(cell);
+  getFormatting(cell: CellAddress): { value?: string; classNames?: ClassNameValue } {
+    const value = this.model.getValue(cell);
     if (value === undefined || value === null) {
       return {};
     }
@@ -30,15 +23,15 @@ export class FormattingModel {
     const locales = undefined;
 
     // Cell-specific formatting.
-    const idx = addressToIndex(this._model.sheet, cell);
-    let formatting = this._model.sheet.formatting?.[idx] ?? {};
+    const idx = this.model.addressToIndex(cell);
+    let formatting = this.model.sheet.formatting?.[idx] ?? {};
     const classNames = [...(formatting?.classNames ?? [])];
 
     // Range formatting.
     // TODO(burdon): NOTE: D0 means the D column.
     // TODO(burdon): Cache model formatting (e.g., for ranges). Create class out of this function.
-    for (const [idx, _formatting] of Object.entries(this._model.sheet.formatting)) {
-      const range = rangeFromIndex(this._model.sheet, idx);
+    for (const [idx, _formatting] of Object.entries(this.model.sheet.formatting)) {
+      const range = this.model.rangeFromIndex(idx);
       if (inRange(range, cell)) {
         if (_formatting.classNames) {
           classNames.push(..._formatting.classNames);
@@ -53,7 +46,7 @@ export class FormattingModel {
 
     const defaultNumber = 'justify-end font-mono';
 
-    const type = formatting?.type ?? this._model.getValueType(cell);
+    const type = formatting?.type ?? this.model.getValueType(cell);
     switch (type) {
       case ValueTypeEnum.Boolean: {
         return {
@@ -91,17 +84,17 @@ export class FormattingModel {
       //
 
       case ValueTypeEnum.DateTime: {
-        const date = this._model.toLocalDate(value as number);
+        const date = this.model.toLocalDate(value as number);
         return { value: date.toLocaleString(locales), classNames };
       }
 
       case ValueTypeEnum.Date: {
-        const date = this._model.toLocalDate(value as number);
+        const date = this.model.toLocalDate(value as number);
         return { value: date.toLocaleDateString(locales), classNames };
       }
 
       case ValueTypeEnum.Time: {
-        const date = this._model.toLocalDate(value as number);
+        const date = this.model.toLocalDate(value as number);
         return { value: date.toLocaleTimeString(locales), classNames };
       }
 

package/src/components/Sheet/grid.ts

@@ -4,7 +4,7 @@
 
 import { type MouseEvent, useEffect, useState } from 'react';
 
-import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../defs';
+import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../model';
 
 // export type Bounds = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
 // export type Dimension = Pick<DOMRect, 'width' | 'height'>;
@@ -12,7 +12,7 @@ import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Not
 export type SizeMap = Record<string, number>;
 
 export type RowPosition = { row: number } & Pick<DOMRect, 'top' | 'height'>;
-export type ColumnPosition = { col: number } & Pick<DOMRect, 'left' | 'width'>;
+export type ColumnPosition = { column: number } & Pick<DOMRect, 'left' | 'width'>;
 
 export const axisWidth = 'calc(var(--rail-size)-2px)';
 export const axisHeight = 34;
@@ -88,7 +88,7 @@ export const useGridLayout = ({
         const width = columnSizes?.[idx] ?? defaultWidth;
         const left = x;
         x += width - 1;
-        return { col: i, left, width };
+        return { column: i, left, width };
       }),
     );
   }, [columns, columnSizes]);

package/src/components/Sheet/nav.ts

@@ -5,11 +5,11 @@
 import { type KeyboardEvent, type MouseEventHandler, useState } from 'react';
 
 import { getCellAtPointer } from './grid';
-import { type CellAddress, type CellRange, posEquals } from '../../defs';
+import { type CellAddress, type CellRange, posEquals } from '../../model';
 
 export type GridSize = {
   numRows: number;
-  numCols: number;
+  numColumns: number;
 };
 
 /**
@@ -38,14 +38,14 @@ export const handleNav = (
         break;
       }
       case 'ArrowLeft': {
-        if (opposite.col > 0) {
-          opposite.col -= 1;
+        if (opposite.column > 0) {
+          opposite.column -= 1;
         }
         break;
       }
       case 'ArrowRight': {
-        if (opposite.col < size.numCols - 1) {
-          opposite.col += 1;
+        if (opposite.column < size.numColumns - 1) {
+          opposite.column += 1;
         }
         break;
       }
@@ -64,41 +64,41 @@ export const handleNav = (
 export const handleArrowNav = (
   ev: Pick<KeyboardEvent<HTMLInputElement>, 'key' | 'metaKey'>,
   cursor: CellAddress | undefined,
-  { numRows, numCols }: GridSize,
+  { numRows, numColumns }: GridSize,
 ): CellAddress | undefined => {
   switch (ev.key) {
     case 'ArrowUp':
       if (cursor === undefined) {
-        return { row: 0, col: 0 };
+        return { row: 0, column: 0 };
       } else if (cursor.row > 0) {
-        return { row: ev.metaKey ? 0 : cursor.row - 1, col: cursor.col };
+        return { row: ev.metaKey ? 0 : cursor.row - 1, column: cursor.column };
       }
       break;
     case 'ArrowDown':
       if (cursor === undefined) {
-        return { row: 0, col: 0 };
+        return { row: 0, column: 0 };
       } else if (cursor.row < numRows - 1) {
-        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, col: cursor.col };
+        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, column: cursor.column };
       }
       break;
     case 'ArrowLeft':
       if (cursor === undefined) {
-        return { row: 0, col: 0 };
-      } else if (cursor.col > 0) {
-        return { row: cursor.row, col: ev.metaKey ? 0 : cursor.col - 1 };
+        return { row: 0, column: 0 };
+      } else if (cursor.column > 0) {
+        return { row: cursor.row, column: ev.metaKey ? 0 : cursor.column - 1 };
       }
       break;
     case 'ArrowRight':
       if (cursor === undefined) {
-        return { row: 0, col: 0 };
-      } else if (cursor.col < numCols - 1) {
-        return { row: cursor.row, col: ev.metaKey ? numCols - 1 : cursor.col + 1 };
+        return { row: 0, column: 0 };
+      } else if (cursor.column < numColumns - 1) {
+        return { row: cursor.row, column: ev.metaKey ? numColumns - 1 : cursor.column + 1 };
       }
       break;
     case 'Home':
-      return { row: 0, col: 0 };
+      return { row: 0, column: 0 };
     case 'End':
-      return { row: numRows - 1, col: numCols - 1 };
+      return { row: numRows - 1, column: numColumns - 1 };
   }
 };
 

package/src/components/Sheet/sheet-context.tsx

@@ -2,16 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { type Space } from '@dxos/react-client/echo';
+import { type FunctionType } from '@dxos/plugin-script';
+import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
 
-import { createDecorations } from './decorations';
-import { type CellAddress, type CellRange } from '../../defs';
-import { useSheetModel, useFormattingModel } from '../../hooks';
-import { type FormattingModel, type SheetModel } from '../../model';
+import { FormattingModel } from './formatting';
+import { type CellAddress, type CellRange, defaultFunctions, SheetModel } from '../../model';
 import { type SheetType } from '../../types';
+import { type FunctionContextOptions } from '../ComputeGraph';
+// TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
+import { useComputeGraph } from '../ComputeGraph/graph-context';
+
+// TODO(wittjosiah): Factor out.
+const OBJECT_ID_LENGTH = 60; // 33 (space id) + 26 (object id) + 1 (separator).
 
 export type SheetContextType = {
   model: SheetModel;
@@ -31,9 +36,6 @@ export type SheetContextType = {
   // Events.
   // TODO(burdon): Generalize.
   onInfo?: () => void;
-
-  // Decorations.
-  decorations: ReturnType<typeof createDecorations>;
 };
 
 const SheetContext = createContext<SheetContextType | null>(null);
@@ -48,7 +50,49 @@ export type SheetContextProps = {
   sheet: SheetType;
   space: Space;
   readonly?: boolean;
-} & Pick<SheetContextType, 'onInfo'>;
+} & Pick<SheetContextType, 'onInfo'> &
+  Partial<FunctionContextOptions>;
+
+/**
+ * Map from binding to fully qualified ECHO ID.
+ */
+const mapFormulaBindingToId =
+  (functions: FunctionType[]) =>
+  (formula: string): string => {
+    return formula.replace(/([a-zA-Z0-9]+)\((.*)\)/g, (match, binding, args) => {
+      if (defaultFunctions.find((fn) => fn.name === binding) || binding === 'EDGE') {
+        return match;
+      }
+
+      const fn = functions.find((fn) => fn.binding === binding);
+      if (fn) {
+        return `${fullyQualifiedId(fn)}(${args})`;
+      } else {
+        return match;
+      }
+    });
+  };
+
+/**
+ * Map from fully qualified ECHO ID to binding.
+ */
+const mapFormulaBindingFromId =
+  (functions: FunctionType[]) =>
+  (formula: string): string => {
+    return formula.replace(/([a-zA-Z0-9]+):([a-zA-Z0-9]+)\((.*)\)/g, (match, spaceId, objectId, args) => {
+      const id = `${spaceId}:${objectId}`;
+      if (id.length !== OBJECT_ID_LENGTH) {
+        return match;
+      }
+
+      const fn = functions.find((fn) => fullyQualifiedId(fn) === id);
+      if (fn?.binding) {
+        return `${fn.binding}(${args})`;
+      } else {
+        return match;
+      }
+    });
+  };
 
 export const SheetContextProvider = ({
   children,
@@ -56,17 +100,36 @@ export const SheetContextProvider = ({
   space,
   readonly,
   onInfo,
+  ...options
 }: PropsWithChildren<SheetContextProps>) => {
-  const model = useSheetModel(space, sheet, { readonly });
-  const formatting = useFormattingModel(model);
+  const graph = useComputeGraph(space, options);
 
-  // TODO(Zan): Impl. set range and set cursor that scrolls to that cell or range if it is not visible.
   const [cursor, setCursor] = useState<CellAddress>();
   const [range, setRange] = useState<CellRange>();
   const [editing, setEditing] = useState<boolean>(false);
-  const decorations = useMemo(() => createDecorations(), []);
 
-  return !model || !formatting ? null : (
+  const [[model, formatting] = [], setModels] = useState<[SheetModel, FormattingModel] | undefined>(undefined);
+  useEffect(() => {
+    let model: SheetModel | undefined;
+    let formatting;
+    const t = setTimeout(async () => {
+      model = new SheetModel(graph, sheet, space, { readonly, mapFormulaBindingToId, mapFormulaBindingFromId });
+      await model.initialize();
+      formatting = new FormattingModel(model);
+      setModels([model, formatting]);
+    });
+
+    return () => {
+      clearTimeout(t);
+      void model?.destroy();
+    };
+  }, [graph, readonly]);
+
+  if (!model || !formatting) {
+    return null;
+  }
+
+  return (
     <SheetContext.Provider
       value={{
         model,
@@ -79,7 +142,6 @@ export const SheetContextProvider = ({
         setEditing,
         // TODO(burdon): Change to event.
         onInfo,
-        decorations,
       }}
     >
       {children}

package/src/components/SheetContainer.tsx

@@ -2,84 +2,30 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { useIsDirectlyAttended } from '@dxos/react-ui-attention';
-import { focusRing, mx } from '@dxos/react-ui-theme';
+import { type LayoutCoordinate } from '@dxos/app-framework';
+import { mx } from '@dxos/react-ui-theme';
 
 import { Sheet, type SheetRootProps } from './Sheet';
-import { Toolbar, type ToolbarAction } from './Toolbar';
-
-// TODO(Zan): Factor out, copied this from MarkdownPlugin.
-const attentionFragment = mx(
-  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',
-  'group-focus-within/editor:border-separator',
-);
-
-// TODO(Zan): Factor out, copied this from MarkdownPlugin.
-export const sectionToolbarLayout =
-  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';
-
-const SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string }) => {
-  const dispatch = useIntentDispatcher();
-
-  const id = fullyQualifiedId(sheet);
-  const isDirectlyAttended = useIsDirectlyAttended(id);
-
-  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.
-  const handleAction = useCallback(
-    (action: ToolbarAction) => {
-      switch (action.type) {
-        case 'comment': {
-          // TODO(Zan): We shouldn't hardcode the action ID.
-          void dispatch({
-            action: 'dxos.org/plugin/thread/action/create',
-            data: {
-              cursor: action.anchor,
-              name: action.cellContent,
-              subject: sheet,
-            },
-          });
-        }
-      }
-    },
-    [sheet, dispatch],
-  );
 
+const SheetContainer = ({
+  sheet,
+  space,
+  role,
+  remoteFunctionUrl,
+}: SheetRootProps & { role?: string; coordinate?: LayoutCoordinate }) => {
   return (
-    <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>
-      <Sheet.Root space={space} sheet={sheet}>
-        <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>
-          <Toolbar.Root
-            onAction={handleAction}
-            classNames={mx(
-              role === 'section'
-                ? ['z-[2] group-focus-within/section:visible', !isDirectlyAttended && 'invisible', sectionToolbarLayout]
-                : 'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',
-            )}
-          >
-            {/* TODO(Zan): Restore some of this functionality */}
-            {/* <Toolbar.Styles /> */}
-            {/* <Toolbar.Format /> */}
-            {/* <Toolbar.Alignment /> */}
-            <Toolbar.Separator />
-            <Toolbar.Actions />
-          </Toolbar.Root>
-        </div>
-        <div
-          role='none'
-          className={mx(
-            role === 'section' && 'aspect-square border-is border-bs border-be border-separator',
-            role === 'article' &&
-              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator',
-            focusRing,
-            attentionFragment,
-          )}
-        >
-          <Sheet.Main />
-        </div>
+    <div
+      role='none'
+      className={mx(
+        'flex',
+        role === 'article' && 'row-span-2',
+        role === 'section' && 'aspect-square border-y border-is border-separator',
+      )}
+    >
+      <Sheet.Root sheet={sheet} space={space} remoteFunctionUrl={remoteFunctionUrl}>
+        <Sheet.Main />
       </Sheet.Root>
     </div>
   );