@dxos/plugin-sheet 0.8.4-main.9735255 → 0.8.4-main.abd8ff62ef

package/src/components/ComputeGraph/compute-graph.stories.tsx

@@ -5,25 +5,26 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { testFunctionPlugins } from '@dxos/compute/testing';
+import { Operation } from '@dxos/compute';
+import { testFunctionPlugins } from '@dxos/compute-hyperformula/testing';
 import { Filter } from '@dxos/echo';
-import { Function } from '@dxos/functions';
-import { useSpace } from '@dxos/react-client/echo';
+import { Obj } from '@dxos/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Button, Input, Toolbar } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/react-ui/testing';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 
-import { useSheetModel } from '../../model';
-import { withComputeGraphDecorator } from '../../testing';
-import { Sheet } from '../../types';
+import { withComputeGraphDecorator } from '#testing';
+import { Sheet } from '#types';
 
+import { useSheetModel } from '../../model';
 import { useComputeGraph } from './ComputeGraphContextProvider';
 
 const FUNCTION_NAME = 'TEST';
 
 const DefaultStory = () => {
-  const space = useSpace();
+  const [space] = useSpaces();
   const graph = useComputeGraph(space);
   const [sheet, setSheet] = useState<Sheet.Sheet>();
   const [text, setText] = useState(`${FUNCTION_NAME}(100)`);
@@ -44,14 +45,14 @@ const DefaultStory = () => {
         setResult({ functions: { standard: f1.length, echo: f2.length } });
       });
 
-      space.db.add(Function.make({ name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
+      space.db.add(Obj.make(Operation.PersistentOperation, { name: 'test', version: '0.0.1', binding: FUNCTION_NAME }));
     }
   }, [space, graph]);
 
   const inputRef = useRef<HTMLInputElement | null>(null);
   const handleTest = async () => {
     if (space && graph) {
-      const objects = await space.db.query(Filter.type(Function.Function)).run();
+      const objects = await space.db.query(Filter.type(Operation.PersistentOperation)).run();
       const mapped = graph.mapFunctionBindingToId(text);
       const unmapped = graph.mapFunctionBindingFromId(mapped);
       const internal = graph.mapFormulaToNative(text);
@@ -74,9 +75,7 @@ const DefaultStory = () => {
         </Input.Root>
         <Button onClick={handleTest}>Test</Button>
       </Toolbar.Root>
-      <SyntaxHighlighter language='json'>
-        {JSON.stringify({ space: space?.id, graph: graph?.id, sheet: sheet?.id, model: model?.id, result }, null, 2)}
-      </SyntaxHighlighter>
+      <JsonHighlighter data={{ space: space?.id, graph: graph?.id, sheet: sheet?.id, model: model?.id, result }} />
     </div>
   );
 };
@@ -84,11 +83,15 @@ const DefaultStory = () => {
 export const Default: Story = {};
 
 const meta = {
-  title: 'plugins/plugin-sheet/functions',
+  title: 'plugins/plugin-sheet/components/functions',
   render: DefaultStory,
   decorators: [
-    withTheme,
-    withClientProvider({ types: [Function.Function, Sheet.Sheet], createIdentity: true, createSpace: true }),
+    withTheme(),
+    withClientProvider({
+      types: [Operation.PersistentOperation, Sheet.Sheet],
+      createIdentity: true,
+      createSpace: true,
+    }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
   ],
 } satisfies Meta<typeof DefaultStory>;

package/src/components/Sheet/Sheet.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { SheetContent } from '../SheetContent';
+import { SheetRoot } from '../SheetRoot';
+import { SheetStatusbar } from '../SheetStatusbar';
+import { SheetToolbar } from '../SheetToolbar';
+
+export { useSheetContext, type SheetContextValue, type SheetRootProps } from '../SheetRoot';
+export { type SheetContentProps } from '../SheetContent';
+export { type SheetToolbarProps } from '../SheetToolbar';
+export { type SheetStatusbarProps } from '../SheetStatusbar';
+
+export const Sheet = {
+  Root: SheetRoot,
+  Toolbar: SheetToolbar,
+  Content: SheetContent,
+  Statusbar: SheetStatusbar,
+};

package/src/components/Sheet/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Sheet';

package/src/components/{GridSheet → SheetContent}/SheetCellEditor.stories.tsx

@@ -6,17 +6,18 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
-import { defaultFunctions } from '@dxos/compute';
-import { getRegisteredFunctionNames } from '@dxos/compute/testing';
+import { defaultFunctions } from '@dxos/compute-hyperformula';
+import { getRegisteredFunctionNames } from '@dxos/compute-hyperformula/testing';
 import { Obj } from '@dxos/echo';
 import { createDocAccessor } from '@dxos/echo-db';
 import { useAsyncEffect } from '@dxos/react-hooks';
-import { withTheme } from '@dxos/react-ui/testing';
 import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
+import { withTheme } from '@dxos/react-ui/testing';
 import { automerge } from '@dxos/ui-editor';
 
+import { Sheet } from '#types';
+
 import { sheetExtension } from '../../extensions';
-import { Sheet } from '../../types';
 
 const DefaultStory = ({ value, ...props }: CellEditorProps) => {
   const extensions = useMemo(() => {
@@ -38,9 +39,9 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
     const space = await client.spaces.create();
 
     const sheet = Sheet.make();
-    Obj.change(sheet, (s) => {
-      s.name = 'Test';
-      s.cells[cell] = { value };
+    Obj.update(sheet, (sheet) => {
+      sheet.name = 'Test';
+      sheet.cells[cell] = { value };
     });
     space.db.add(sheet);
     setObject(sheet);
@@ -61,9 +62,9 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-sheet/CellEditor',
+  title: 'plugins/plugin-sheet/components/CellEditor',
 
-  decorators: [withTheme],
+  decorators: [withTheme()],
   component: CellEditor,
   render: DefaultStory,
 } satisfies Meta<typeof DefaultStory>;

package/src/components/{GridSheet/GridSheet.stories.tsx → SheetContent/SheetContent.stories.tsx}

@@ -5,23 +5,23 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { testFunctionPlugins } from '@dxos/compute/testing';
-import { OperationPlugin, RuntimePlugin } from '@dxos/plugin-testing';
-import { useSpace } from '@dxos/react-client/echo';
+import { testFunctionPlugins } from '@dxos/compute-hyperformula/testing';
+import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
-import { translations } from '../../translations';
-import { Sheet } from '../../types';
-import { useComputeGraph } from '../ComputeGraph';
-import { SheetProvider } from '../SheetContext';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '#testing';
+import { translations } from '#translations';
+import { Sheet } from '#types';
 
-import { GridSheet } from './GridSheet';
+import { useComputeGraph } from '../ComputeGraph';
+import { SheetRoot } from '../SheetRoot';
+import { SheetContent } from './SheetContent';
 
 export const Basic = () => {
-  const space = useSpace();
+  const [space] = useSpaces();
   const graph = useComputeGraph(space);
   const sheet = useTestSheet(space, graph, { cells: createTestCells() });
   if (!sheet || !graph) {
@@ -29,19 +29,20 @@ export const Basic = () => {
   }
 
   return (
-    <SheetProvider graph={graph} sheet={sheet} ignoreAttention>
-      <div role='none' className='grid bs-full is-full'>
-        <GridSheet />
+    <SheetRoot graph={graph} sheet={sheet} attendableId='test' ignoreAttention>
+      <div role='none' className='grid h-full w-full'>
+        <SheetContent />
       </div>
-    </SheetProvider>
+    </SheetRoot>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-sheet/GridSheet',
-  component: GridSheet,
+  title: 'plugins/plugin-sheet/components/SheetContent',
+  component: SheetContent,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withPluginManager({
@@ -52,7 +53,7 @@ const meta = {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof GridSheet>;
+} satisfies Meta<typeof SheetContent>;
 
 export default meta;
 

package/src/components/{GridSheet/GridSheet.tsx → SheetContent/SheetContent.tsx}

@@ -8,13 +8,14 @@ import React, {
   type MouseEvent,
   type WheelEvent,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
-import { type CellRange, rangeToA1Notation } from '@dxos/compute';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { type CellRange, rangeToA1Notation } from '@dxos/compute-hyperformula';
 import { Obj } from '@dxos/echo';
 import { defaultColSize, defaultRowSize } from '@dxos/lit-grid';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
@@ -32,13 +33,15 @@ import {
   editorKeys,
   parseCellIndex,
 } from '@dxos/react-ui-grid';
+import { composable, composableProps } from '@dxos/ui-theme';
 
-import { type RangeController, rangeExtension, sheetExtension } from '../../extensions';
-import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
-import { meta } from '../../meta';
-import { DEFAULT_COLS, DEFAULT_ROWS, SheetOperation } from '../../types';
-import { useSheetContext } from '../SheetContext';
+import { meta } from '#meta';
+import { SheetOperation } from '#operations';
+import { DEFAULT_COLS, DEFAULT_ROWS, SheetCapabilities } from '#types';
 
+import { type RangeController, rangeExtension, sheetExtension } from '../../extensions';
+import { useSelectThreadOnCellFocus } from '../../integrations';
+import { useSheetContext } from '../SheetRoot';
 import { colLabelCell, rowLabelCell, useSheetModelDxGridProps } from './util';
 
 const inertPosition: DxGridPosition = { plane: 'grid', col: 0, row: 0 };
@@ -69,10 +72,24 @@ const sheetRowDefault = {
   grid: { size: defaultRowSize, resizeable: true },
 };
 
-export const GridSheet = () => {
+export type SheetContentProps = {};
+
+export const SheetContent = composable<HTMLDivElement, SheetContentProps>((props, forwardedRef) => {
   const { t } = useTranslation(meta.id);
-  const { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs, ignoreAttention } =
-    useSheetContext();
+  const {
+    id,
+    attendableId,
+    model,
+    editing,
+    setCursor,
+    setRange,
+    cursor,
+    cursorFallbackRange,
+    activeRefs,
+    setActiveRefs,
+    ignoreAttention,
+  } = useSheetContext();
+
   // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us
   //  a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
   const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
@@ -128,7 +145,7 @@ export const GridSheet = () => {
 
   const handleAxisResize = useCallback<NonNullable<GridContentProps['onAxisResize']>>(
     ({ axis, size, index: numericIndex }) => {
-      Obj.change(model.sheet, (sheet) => {
+      Obj.update(model.sheet, (sheet) => {
         if (axis === 'row') {
           const rowId = sheet.rows[parseInt(numericIndex)];
           sheet.rowMeta[rowId] ??= {};
@@ -313,23 +330,31 @@ export const GridSheet = () => {
     [model],
   );
 
-  useUpdateFocusedCellOnThreadSelection(dxGrid);
+  const [gridInstances] = useCapabilities(SheetCapabilities.GridInstances);
+  useEffect(() => {
+    if (dxGrid && gridInstances) {
+      gridInstances.register(attendableId, dxGrid, setActiveRefs);
+      return () => gridInstances.unregister(attendableId);
+    }
+  }, [dxGrid, gridInstances, attendableId, setActiveRefs]);
+
   useSelectThreadOnCellFocus();
 
   return (
-    // TODO(thure): Why are Table’s and Sheet’s editor boxes off by 1px?
-    <div role='none' className='relative min-bs-0 [&_.cm-editor]:!border-lb [&_.cm-editor]:!border-transparent'>
+    <div ref={forwardedRef} {...composableProps(props, { classNames: 'relative min-h-0' })}>
       <GridCellEditor getCellContent={getCellContent} extensions={extensions} onBlur={handleBlur} />
       <Grid.Content
+        className='[--dx-grid-base:var(--base-surface)] [&_.dx-grid]:absolute [&_.dx-grid]:inset-0'
         initialCells={initialCells}
         limitColumns={DEFAULT_COLS}
         limitRows={DEFAULT_ROWS}
         columns={columns}
         rows={rows}
-        // TODO(burdon): `col` vs. `column`?
         columnDefault={sheetColDefault}
         rowDefault={sheetRowDefault}
+        activeRefs={activeRefs}
         frozen={frozen}
+        overscroll='trap'
         onAxisResize={handleAxisResize}
         onSelect={handleSelect}
         onFocus={handleFocus}
@@ -337,9 +362,6 @@ export const GridSheet = () => {
         onKeyDown={handleKeyDown}
         onContextMenu={handleContextMenu}
         onClick={handleClick}
-        overscroll='trap'
-        className='[--dx-grid-base:var(--baseSurface)] [&_.dx-grid]:absolute [&_.dx-grid]:inset-0'
-        activeRefs={activeRefs}
         ref={setDxGrid}
       />
       <DropdownMenu.Root
@@ -355,27 +377,25 @@ export const GridSheet = () => {
               data-testid={`grid.${contextMenuAxis}.insert-before`}
             >
               <Icon
-                size={5}
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-left--regular' : 'ph--rows-plus-top--regular'}
               />
-              <span>{t(`add ${contextMenuAxis} before label`)}</span>
+              <span>{t(`add-${contextMenuAxis}-before.label`)}</span>
             </DropdownMenu.Item>
             <DropdownMenu.Item
               onClick={() => handleAxisMenuAction('insert-after')}
               data-testid={`grid.${contextMenuAxis}.insert-after`}
             >
               <Icon
-                size={5}
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-right--regular' : 'ph--rows-plus-bottom--regular'}
               />
-              <span>{t(`add ${contextMenuAxis} after label`)}</span>
+              <span>{t(`add-${contextMenuAxis}-after.label`)}</span>
             </DropdownMenu.Item>
             <DropdownMenu.Item
               onClick={() => handleAxisMenuAction('drop')}
               data-testid={`grid.${contextMenuAxis}.drop`}
             >
-              <Icon size={5} icon='ph--backspace--regular' />
-              <span>{t(`delete ${contextMenuAxis} label`)}</span>
+              <Icon icon='ph--backspace--regular' />
+              <span>{t(`delete-${contextMenuAxis}.label`)}</span>
             </DropdownMenu.Item>
           </DropdownMenu.Viewport>
           <DropdownMenu.Arrow />
@@ -383,4 +403,4 @@ export const GridSheet = () => {
       </DropdownMenu.Root>
     </div>
   );
-};
+});

package/src/components/{RangeList → SheetContent}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './RangeList';
+export * from './SheetContent';

package/src/components/{GridSheet → SheetContent}/util.ts

@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { inRange } from '@dxos/compute';
+import { inRange } from '@dxos/compute-hyperformula';
 import { createDocAccessor } from '@dxos/echo-db';
 import { cellClassesForFieldType, parseValue } from '@dxos/react-ui-form';
 import {
@@ -21,8 +21,9 @@ import {
 } from '@dxos/react-ui-grid';
 import { mx } from '@dxos/ui-theme';
 
+import { cellClassNameForRange, rangeFromIndex } from '#types';
+
 import { type SheetModel } from '../../model';
-import { cellClassNameForRange, rangeFromIndex } from '../../types';
 
 const createDxGridColumns = (model: SheetModel): DxGridAxisMeta => {
   return model.sheet.columns.reduce(
@@ -96,13 +97,13 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: '!bg-toolbarSurface text-subdued text-end pie-1',
+  className: '!bg-toolbar-surface text-subdued text-end pe-1',
   resizeHandle: 'row',
 });
 
 export const colLabelCell = (col: number) => ({
   value: colToA1Notation(col),
-  className: '!bg-toolbarSurface text-subdued',
+  className: '!bg-toolbar-surface text-subdued',
   resizeHandle: 'col',
 });
 
@@ -114,7 +115,7 @@ const cellGetter = (model: SheetModel) => {
         return getGridCells(nextBounds);
       case 'fixedStartStart': {
         return {
-          '0,0': { className: '!bg-toolbarSurface' },
+          '0,0': { className: '!bg-toolbar-surface' },
         };
       }
       case 'frozenColsStart':

package/src/components/{SheetContext/SheetContext.tsx → SheetRoot/SheetRoot.tsx}

@@ -4,9 +4,13 @@
 
 import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
-import { type CellAddress, type CellRange, type CompleteCellRange, type ComputeGraph } from '@dxos/compute';
-import { Obj } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
+import {
+  type CellAddress,
+  type CellRange,
+  type CompleteCellRange,
+  type ComputeGraph,
+} from '@dxos/compute-hyperformula';
+import { raise } from '@dxos/debug';
 import {
   Grid,
   type GridContentProps,
@@ -15,12 +19,13 @@ import {
   useGridContext,
 } from '@dxos/react-ui-grid';
 
+import { type Sheet } from '#types';
+
 import { type SheetModel, useSheetModel } from '../../model';
-import { type Sheet } from '../../types';
 
 export type SheetContextValue = {
   id: string;
-
+  attendableId: string;
   model: SheetModel;
 
   // Cursor state.
@@ -39,29 +44,62 @@ export type SheetContextValue = {
   activeRefs: GridContentProps['activeRefs'];
   setActiveRefs: (activeRefs: GridContentProps['activeRefs']) => void;
 
+  // Flags
+  ignoreAttention?: boolean;
+
   // Events.
   // TODO(burdon): Generalize.
   onInfo?: () => void;
-
-  // Flags
-  ignoreAttention?: boolean;
 };
 
+// TODO(burdon): Use radix context.
 const SheetContext = createContext<SheetContextValue | undefined>(undefined);
 
 export const useSheetContext = (): SheetContextValue => {
-  const context = useContext(SheetContext);
-  invariant(context);
-  return context;
+  return useContext(SheetContext) ?? raise(new Error('Missing SheetContext'));
+};
+
+export type SheetRootProps = {
+  graph: ComputeGraph;
+  sheet: Sheet.Sheet;
+  attendableId: string;
+  readonly?: boolean;
+  ignoreAttention?: boolean;
+} & Pick<SheetContextValue, 'onInfo'>;
+
+export const SheetRoot = ({
+  children,
+  graph,
+  sheet,
+  attendableId,
+  readonly,
+  ignoreAttention,
+  onInfo,
+}: PropsWithChildren<SheetRootProps>) => {
+  const model = useSheetModel(graph, sheet, { readonly });
+  if (!model) {
+    return null;
+  }
+
+  return (
+    <Grid.Root id={attendableId}>
+      <SheetProviderImpl model={model} attendableId={attendableId} onInfo={onInfo} ignoreAttention={ignoreAttention}>
+        {children}
+      </SheetProviderImpl>
+    </Grid.Root>
+  );
 };
 
 const SheetProviderImpl = ({
   __gridScope,
   children,
+  attendableId,
   ignoreAttention,
   model,
   onInfo,
-}: GridScopedProps<PropsWithChildren<Pick<SheetContextValue, 'ignoreAttention' | 'model' | 'onInfo'>>>) => {
+}: GridScopedProps<
+  PropsWithChildren<Pick<SheetContextValue, 'attendableId' | 'ignoreAttention' | 'model' | 'onInfo'>>
+>) => {
   const { id, editing, setEditing } = useGridContext('SheetProvider', __gridScope);
 
   const [cursor, setCursorInternal] = useState<CellAddress>();
@@ -92,6 +130,7 @@ const SheetProviderImpl = ({
     <SheetContext.Provider
       value={{
         id,
+        attendableId,
         model,
         editing,
         setEditing,
@@ -102,38 +141,12 @@ const SheetProviderImpl = ({
         cursorFallbackRange,
         activeRefs,
         setActiveRefs,
+        ignoreAttention,
         // TODO(burdon): Change to event.
         onInfo,
-        ignoreAttention,
       }}
     >
       {children}
     </SheetContext.Provider>
   );
 };
-
-export type SheetProviderProps = {
-  graph: ComputeGraph;
-  sheet: Sheet.Sheet;
-  readonly?: boolean;
-  ignoreAttention?: boolean;
-} & Pick<SheetContextValue, 'onInfo'>;
-
-export const SheetProvider = ({
-  children,
-  graph,
-  sheet,
-  readonly,
-  ignoreAttention,
-  onInfo,
-}: PropsWithChildren<SheetProviderProps>) => {
-  const model = useSheetModel(graph, sheet, { readonly });
-
-  return !model ? null : (
-    <Grid.Root id={Obj.getDXN(sheet).toString()}>
-      <SheetProviderImpl model={model} onInfo={onInfo} ignoreAttention={ignoreAttention}>
-        {children}
-      </SheetProviderImpl>
-    </Grid.Root>
-  );
-};

package/src/components/{GridSheet → SheetRoot}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './GridSheet';
+export * from './SheetRoot';

package/src/components/{FunctionEditor/FunctionEditor.tsx → SheetStatusbar/SheetStatusbar.tsx}

@@ -4,13 +4,18 @@
 
 import React from 'react';
 
-import { addressToA1Notation, isFormula, rangeToA1Notation } from '@dxos/compute';
+import { addressToA1Notation, isFormula, rangeToA1Notation } from '@dxos/compute-hyperformula';
 import { Icon } from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
 
-import { mapFormulaIndicesToRefs } from '../../types';
-import { useSheetContext } from '../SheetContext';
+import { mapFormulaIndicesToRefs } from '#types';
 
-export const FunctionEditor = () => {
+import { useSheetContext } from '../SheetRoot';
+
+export type SheetStatusbarProps = {};
+
+export const SheetStatusbar = composable<HTMLDivElement, SheetStatusbarProps>((props, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
   const { model, cursor, range } = useSheetContext();
 
   let value;
@@ -26,16 +31,23 @@ export const FunctionEditor = () => {
   }
 
   return (
-    <div className='flex shrink-0 justify-between items-center pli-4 plb-1 text-sm bg-toolbarSurface border-bs !border-subduedSeparator'>
+    <div
+      ref={forwardedRef}
+      {...rest}
+      className={mx(
+        'flex shrink-0 justify-between items-center px-4 py-1 text-sm bg-toolbar-surface border-y !border-subdued-separator',
+        className,
+      )}
+    >
       <div className='flex gap-4 items-center'>
-        <div className='flex is-16 items-center font-mono'>
+        <div className='flex w-16 items-center font-mono'>
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
         </div>
         <div className='flex gap-2 items-center'>
-          <Icon icon='ph--function--regular' classNames={['text-greenText', formula ? 'visible' : 'invisible']} />
+          <Icon icon='ph--function--regular' classNames={['text-green-text', formula ? 'visible' : 'invisible']} />
           <span className='font-mono'>{value}</span>
         </div>
       </div>
     </div>
   );
-};
+});

package/src/components/{FunctionEditor → SheetStatusbar}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './FunctionEditor';
+export * from './SheetStatusbar';