@dxos/plugin-sheet 0.6.11-staging.e6894a4 → 0.6.12-main.15a606f

package/src/components/Sheet/Sheet.tsx

@@ -40,7 +40,7 @@ import { debounce } from '@dxos/async';
 import { fullyQualifiedId, createDocAccessor } from '@dxos/client/echo';
 import { log } from '@dxos/log';
 import { type ThemedClassName } from '@dxos/react-ui';
-import { createAttendableAttributes } from '@dxos/react-ui-attention';
+import { createAttendableAttributes, useHasAttention } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
 import {
@@ -60,6 +60,7 @@ 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,
@@ -68,7 +69,9 @@ import {
   columnLetter,
   posEquals,
   rangeToA1Notation,
-} from '../../model';
+  addressToIndex,
+  addressFromIndex,
+} from '../../defs';
 import {
   CellEditor,
   type CellRangeNotifier,
@@ -112,13 +115,11 @@ import {
  *  - Update formula ranges by selection.
  */
 
-// TODO(burdon): Factor out fragments.
 const fragments = {
   axis: 'bg-axisSurface text-axisText text-xs select-none',
   axisSelected: 'bg-attention text-baseText',
   cell: 'bg-gridCell',
   cellSelected: 'bg-gridCellSelected text-baseText border !border-accentSurface',
-  border: 'border-gridLine',
 };
 
 //
@@ -137,12 +138,16 @@ const SheetRoot = ({ children, ...props }: PropsWithChildren<SheetContextProps>)
 
 type SheetMainProps = ThemedClassName<Partial<GridSize>>;
 
-const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numColumns }, forwardRef) => {
+const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numRows, numCols }, 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.
   //
@@ -172,21 +177,21 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
   }, [rows, columns]);
 
   const handleMoveRows: SheetRowsProps['onMove'] = (from, to, num = 1) => {
-    const cursorIdx = cursor ? model.addressToIndex(cursor) : undefined;
+    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : undefined;
     const [rows] = model.sheet.rows.splice(from, num);
     model.sheet.rows.splice(to, 0, rows);
     if (cursorIdx) {
-      setCursor(model.addressFromIndex(cursorIdx));
+      setCursor(addressFromIndex(model.sheet, cursorIdx));
     }
     setRows([...model.sheet.rows]);
   };
 
   const handleMoveColumns: SheetColumnsProps['onMove'] = (from, to, num = 1) => {
-    const cursorIdx = cursor ? model.addressToIndex(cursor) : undefined;
+    const cursorIdx = cursor ? addressToIndex(model.sheet, cursor) : undefined;
     const columns = model.sheet.columns.splice(from, num);
     model.sheet.columns.splice(to, 0, ...columns);
     if (cursorIdx) {
-      setCursor(model.addressFromIndex(cursorIdx));
+      setCursor(addressFromIndex(model.sheet, cursorIdx));
     }
     setColumns([...model.sheet.columns]);
   };
@@ -244,7 +249,6 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
       role='none'
       className={mx(
         'grid grid-cols-[calc(var(--rail-size)-2px)_1fr] grid-rows-[32px_1fr_32px] bs-full is-full overflow-hidden',
-        fragments.border,
         classNames,
       )}
     >
@@ -259,8 +263,8 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         ref={columnsRef}
         columns={columns}
         sizes={columnSizes}
-        selected={cursor?.column}
-        onSelect={(column) => setCursor(cursor?.column === column ? undefined : { row: -1, column })}
+        selected={cursor?.col}
+        onSelect={(col) => setCursor(cursor?.col === col ? undefined : { row: -1, col })}
         onResize={handleResizeColumn}
         onMove={handleMoveColumns}
       />
@@ -270,13 +274,13 @@ const SheetMain = forwardRef<HTMLDivElement, SheetMainProps>(({ classNames, numR
         rows={rows}
         sizes={rowSizes}
         selected={cursor?.row}
-        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, column: -1 })}
+        onSelect={(row) => setCursor(cursor?.row === row ? undefined : { row, col: -1 })}
         onResize={handleResizeRow}
         onMove={handleMoveRows}
       />
       <SheetGrid
         ref={contentRef}
-        size={{ numRows: numRows ?? rows.length, numColumns: numColumns ?? columns.length }}
+        size={{ numRows: numRows ?? rows.length, numCols: numCols ?? columns.length }}
         rows={rows}
         columns={columns}
         rowSizes={rowSizes}
@@ -425,7 +429,7 @@ const SheetRows = forwardRef<HTMLDivElement, SheetRowsProps>(
       <div className='relative flex grow overflow-hidden'>
         {/* Fixed border. */}
         <div
-          className={mx('z-20 absolute inset-0 border-y pointer-events-none', fragments.border)}
+          className={mx('z-20 absolute inset-0 border-y border-gridLine pointer-events-none')}
           style={{ width: axisWidth }}
         />
 
@@ -520,8 +524,7 @@ const GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onRe
         {...listeners}
         className={mx(
           'flex h-full items-center justify-center cursor-pointer',
-          'border-t focus-visible:outline-none',
-          fragments.border,
+          'border-t border-gridLine focus-visible:outline-none',
           fragments.axis,
           selected && fragments.axisSelected,
           isDragging && fragments.axisSelected,
@@ -588,7 +591,7 @@ const SheetColumns = forwardRef<HTMLDivElement, SheetColumnsProps>(
       <div className='relative flex grow overflow-hidden'>
         {/* Fixed border. */}
         <div
-          className={mx('z-20 absolute inset-0 border-x pointer-events-none', fragments.border)}
+          className={mx('z-20 absolute inset-0 border-x border-gridLine pointer-events-none')}
           style={{ height: axisHeight }}
         />
 
@@ -684,8 +687,7 @@ const GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, o
         {...listeners}
         className={mx(
           'flex h-full items-center justify-center cursor-pointer',
-          'border-l focus-visible:outline-none',
-          fragments.border,
+          'border-l border-gridLine focus-visible:outline-none',
           fragments.axis,
           selected && fragments.axisSelected,
           isDragging && fragments.axisSelected,
@@ -860,18 +862,17 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
     });
 
     // TODO(burdon): Prevent scroll if not attended.
-    const qualifiedSubjectId = fullyQualifiedId(model.sheet);
-    const attendableAttrs = createAttendableAttributes(qualifiedSubjectId);
-    // const attended = useHasAttention(qualifiedSubjectId);
-    const attended = true;
+    const id = fullyQualifiedId(model.sheet);
+    const attendableAttrs = createAttendableAttributes(id);
+    const hasAttention = useHasAttention(id);
 
     return (
       <div ref={containerRef} role='grid' className='relative flex grow overflow-hidden'>
         {/* Fixed border. */}
-        <div className={mx('z-20 absolute inset-0 border pointer-events-none', fragments.border)} />
+        <div className={mx('z-20 absolute inset-0 border border-gridLine pointer-events-none')} />
 
         {/* Grid scroll container. */}
-        <div ref={scrollerRef} className={mx('grow', attended && 'overflow-auto scrollbar-thin')}>
+        <div ref={scrollerRef} className={mx('grow', hasAttention && 'overflow-auto scrollbar-thin')}>
           {/* Scroll content. */}
           <div
             className='relative select-none'
@@ -884,11 +885,11 @@ const SheetGrid = forwardRef<HTMLDivElement, SheetGridProps>(
 
             {/* Grid cells. */}
             {rowRange.map(({ row, top, height }) => {
-              return columnRange.map(({ column, left, width }) => {
+              return columnRange.map(({ col, left, width }) => {
                 const style: CSSProperties = { position: 'absolute', top, left, width, height };
-                const cell = { row, column };
+                const cell: CellAddress = { row, col };
                 const id = addressToA1Notation(cell);
-                const idx = model.addressToIndex(cell);
+                const idx = addressToIndex(model.sheet, cell);
                 const active = posEquals(cursor, cell);
                 if (active && editing) {
                   const value = initialText.current ?? model.getCellText(cell) ?? '';
@@ -1009,19 +1010,47 @@ type SheetCellProps = {
 };
 
 const SheetCell = ({ id, cell, style, active, onSelect }: SheetCellProps) => {
-  const { formatting, editing, setRange } = useSheetContext();
+  const {
+    formatting,
+    editing,
+    setRange,
+    decorations,
+    model: { sheet },
+  } = 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(
-        'flex w-full h-full truncate items-center border cursor-pointer',
-        'px-2 py-1',
+        'border border-gridLine cursor-pointer',
         fragments.cell,
-        fragments.border,
         active && ['z-20', fragments.cellSelected],
         classNames,
       )}
@@ -1034,7 +1063,7 @@ const SheetCell = ({ id, cell, style, active, onSelect }: SheetCellProps) => {
       }}
       onDoubleClick={() => onSelect?.(cell, true)}
     >
-      {value}
+      {decoratedContent}
     </div>
   );
 };
@@ -1053,10 +1082,11 @@ const GridCellEditor = ({ style, value, onNav, onClose }: GridCellEditorProps) =
       notifier.current?.(rangeToA1Notation(range));
     }
   }, [range]);
+
   const extension = useMemo(
     () => [
       editorKeys({ onNav, onClose }),
-      sheetExtension({ functions: model.functions }),
+      sheetExtension({ functions: model.graph.getFunctions() }),
       rangeExtension((fn) => (notifier.current = fn)),
     ],
     [model],
@@ -1080,12 +1110,13 @@ 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.mapFormulaBindingFromId(model.mapFormulaIndicesToRefs(value));
+      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
       isFormula = true;
     } else if (value != null) {
       value = String(value);
@@ -1093,7 +1124,7 @@ const SheetStatusBar = () => {
   }
 
   return (
-    <div className={mx('flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x', fragments.border)}>
+    <div className={mx('flex shrink-0 justify-between items-center px-4 py-1 text-sm border-x border-gridLine')}>
       <div className='flex gap-4 items-center'>
         <div className='flex w-16 items-center font-mono'>
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
@@ -1129,8 +1160,7 @@ const SheetDebug = () => {
     <div
       className={mx(
         'z-20 absolute right-0 top-20 bottom-20 w-[30rem] overflow-auto scrollbar-thin',
-        'border text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80',
-        fragments.border,
+        'border border-gridLine text-xs bg-neutral-50 dark:bg-black text-cyan-500 font-mono p-1 opacity-80',
       )}
     >
       <pre className='whitespace-pre-wrap'>

package/src/components/Sheet/decorations.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { create } from '@dxos/echo-schema';
+
+export type Decoration = {
+  type: string;
+  /**
+   * A wrapping render function to encapsulate cell content. This function is applied between
+   * the cell's border and its padding/layout/content, allowing for custom rendering or
+   * additional elements to be inserted around the cell's main content.
+   */
+  decorate?: (props: { children: React.ReactNode }) => React.ReactNode;
+  /**
+   * An array of CSS class names to be applied to the content of the SheetCell.
+   * These classes can be used to style the cell's content independently of its structure.
+   */
+  classNames?: string[];
+  cellIndex: string;
+};
+
+export const createDecorations = () => {
+  // Reactive object to hold decorations
+  // TODO(Zan): Use CELL ID's to key the decoration map.
+  // TODO(Zan): Consider maintaining an index of decorations by type.
+  const { decorations } = create<{ decorations: Record<string, Decoration[]> }>({ decorations: {} });
+
+  const addDecoration = (cellIndex: string, decorator: Decoration) => {
+    decorations[cellIndex] = [...(decorations[cellIndex] || []), decorator];
+  };
+
+  const removeDecoration = (cellIndex: string, type?: string) => {
+    if (type) {
+      decorations[cellIndex] = (decorations[cellIndex] || []).filter((d) => d.type !== type);
+    } else {
+      delete decorations[cellIndex];
+    }
+  };
+
+  // TODO(Zan): I should check if returning the a value from a map in a deep signal is a reactive slice.
+  const getDecorationsForCell = (cellIndex: string): Decoration[] | undefined => {
+    return decorations[cellIndex];
+  };
+
+  const getAllDecorations = (): Decoration[] => {
+    const result: Decoration[] = [];
+    for (const decoratorArray of Object.values(decorations)) {
+      for (const decorator of decoratorArray) {
+        result.push(decorator);
+      }
+    }
+    return result;
+  };
+
+  return {
+    addDecoration,
+    removeDecoration,
+    getDecorationsForCell,
+    getAllDecorations,
+  } as const;
+};

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 '../../model';
+import { type CellAddress, type CellIndex, addressFromA1Notation, addressToA1Notation } from '../../defs';
 
 // 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 = { column: number } & Pick<DOMRect, 'left' | 'width'>;
+export type ColumnPosition = { col: 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 { column: i, left, width };
+        return { col: 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 '../../model';
+import { type CellAddress, type CellRange, posEquals } from '../../defs';
 
 export type GridSize = {
   numRows: number;
-  numColumns: number;
+  numCols: number;
 };
 
 /**
@@ -38,14 +38,14 @@ export const handleNav = (
         break;
       }
       case 'ArrowLeft': {
-        if (opposite.column > 0) {
-          opposite.column -= 1;
+        if (opposite.col > 0) {
+          opposite.col -= 1;
         }
         break;
       }
       case 'ArrowRight': {
-        if (opposite.column < size.numColumns - 1) {
-          opposite.column += 1;
+        if (opposite.col < size.numCols - 1) {
+          opposite.col += 1;
         }
         break;
       }
@@ -64,41 +64,41 @@ export const handleNav = (
 export const handleArrowNav = (
   ev: Pick<KeyboardEvent<HTMLInputElement>, 'key' | 'metaKey'>,
   cursor: CellAddress | undefined,
-  { numRows, numColumns }: GridSize,
+  { numRows, numCols }: GridSize,
 ): CellAddress | undefined => {
   switch (ev.key) {
     case 'ArrowUp':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
+        return { row: 0, col: 0 };
       } else if (cursor.row > 0) {
-        return { row: ev.metaKey ? 0 : cursor.row - 1, column: cursor.column };
+        return { row: ev.metaKey ? 0 : cursor.row - 1, col: cursor.col };
       }
       break;
     case 'ArrowDown':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
+        return { row: 0, col: 0 };
       } else if (cursor.row < numRows - 1) {
-        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, column: cursor.column };
+        return { row: ev.metaKey ? numRows - 1 : cursor.row + 1, col: cursor.col };
       }
       break;
     case 'ArrowLeft':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.column > 0) {
-        return { row: cursor.row, column: ev.metaKey ? 0 : cursor.column - 1 };
+        return { row: 0, col: 0 };
+      } else if (cursor.col > 0) {
+        return { row: cursor.row, col: ev.metaKey ? 0 : cursor.col - 1 };
       }
       break;
     case 'ArrowRight':
       if (cursor === undefined) {
-        return { row: 0, column: 0 };
-      } else if (cursor.column < numColumns - 1) {
-        return { row: cursor.row, column: ev.metaKey ? numColumns - 1 : cursor.column + 1 };
+        return { row: 0, col: 0 };
+      } else if (cursor.col < numCols - 1) {
+        return { row: cursor.row, col: ev.metaKey ? numCols - 1 : cursor.col + 1 };
       }
       break;
     case 'Home':
-      return { row: 0, column: 0 };
+      return { row: 0, col: 0 };
     case 'End':
-      return { row: numRows - 1, column: numColumns - 1 };
+      return { row: numRows - 1, col: numCols - 1 };
   }
 };
 

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

@@ -2,21 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
+import React, { type PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { type FunctionType } from '@dxos/plugin-script';
-import { fullyQualifiedId, type Space } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 
-import { FormattingModel } from './formatting';
-import { type CellAddress, type CellRange, defaultFunctions, SheetModel } from '../../model';
+import { createDecorations } from './decorations';
+import { type CellAddress, type CellRange } from '../../defs';
+import { useSheetModel, useFormattingModel } from '../../hooks';
+import { type FormattingModel, type 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;
@@ -36,6 +31,9 @@ export type SheetContextType = {
   // Events.
   // TODO(burdon): Generalize.
   onInfo?: () => void;
+
+  // Decorations.
+  decorations: ReturnType<typeof createDecorations>;
 };
 
 const SheetContext = createContext<SheetContextType | null>(null);
@@ -50,49 +48,7 @@ export type SheetContextProps = {
   sheet: SheetType;
   space: Space;
   readonly?: boolean;
-} & 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;
-      }
-    });
-  };
+} & Pick<SheetContextType, 'onInfo'>;
 
 export const SheetContextProvider = ({
   children,
@@ -100,36 +56,17 @@ export const SheetContextProvider = ({
   space,
   readonly,
   onInfo,
-  ...options
 }: PropsWithChildren<SheetContextProps>) => {
-  const graph = useComputeGraph(space, options);
+  const model = useSheetModel(space, sheet, { readonly });
+  const formatting = useFormattingModel(model);
 
+  // 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(), []);
 
-  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 (
+  return !model || !formatting ? null : (
     <SheetContext.Provider
       value={{
         model,
@@ -142,6 +79,7 @@ export const SheetContextProvider = ({
         setEditing,
         // TODO(burdon): Change to event.
         onInfo,
+        decorations,
       }}
     >
       {children}