@dxos/plugin-sheet 0.8.4-main.ae835ea → 0.8.4-main.bc2380dfbc

package/src/capabilities/markdown.ts

@@ -2,22 +2,30 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type PluginContext, contributes } from '@dxos/app-framework';
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
 import { getSpace } from '@dxos/client/echo';
 import { MarkdownCapabilities } from '@dxos/plugin-markdown';
 
+import { SheetCapabilities } from '#types';
+
 import { computeGraphFacet } from '../extensions';
 
-import { SheetCapabilities } from './capabilities';
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    // Get context for lazy capability access in callbacks.
+    const capabilities = yield* Capability.Service;
 
-export default (context: PluginContext) =>
-  contributes(MarkdownCapabilities.Extensions, [
-    ({ document: doc }) => {
-      const computeGraphRegistry = context.getCapability(SheetCapabilities.ComputeGraphRegistry);
-      const space = getSpace(doc);
-      if (space) {
-        const computeGraph = computeGraphRegistry.getOrCreateGraph(space);
-        return computeGraphFacet.of(computeGraph);
-      }
-    },
-  ]);
+    return Capability.contributes(MarkdownCapabilities.Extensions, [
+      ({ document: doc }) => {
+        const computeGraphRegistry = capabilities.get(SheetCapabilities.ComputeGraphRegistry);
+        const space = getSpace(doc);
+        if (space) {
+          const computeGraph = computeGraphRegistry.getOrCreateGraph(space);
+          return computeGraphFacet.of(computeGraph);
+        }
+      },
+    ]);
+  }),
+);

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+import { SheetOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, SheetOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -2,39 +2,48 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useCapability } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { getSpace } from '@dxos/react-client/echo';
 
-import { ComputeGraphContextProvider, RangeList, SheetContainer } from '../components';
-import { meta } from '../meta';
-import { Sheet } from '../types';
+import { RangeList, SheetArticle } from '#containers';
+import { Sheet, SheetCapabilities } from '#types';
 
-import { SheetCapabilities } from './capabilities';
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'sheet',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        role: ['article', 'section'],
+        filter: (data): data is { attendableId: string; subject: Sheet.Sheet } =>
+          typeof data.attendableId === 'string' &&
+          Obj.instanceOf(Sheet.Sheet, data.subject) &&
+          !!Obj.getDatabase(data.subject),
+        component: ({ data, role }) => {
+          const computeGraphRegistry = useCapability(SheetCapabilities.ComputeGraphRegistry);
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${meta.id}/sheet`,
-      role: ['article', 'section'],
-      filter: (data): data is { subject: Sheet.Sheet } =>
-        Obj.instanceOf(Sheet.Sheet, data.subject) && !!getSpace(data.subject),
-      component: ({ data, role }) => {
-        const computeGraphRegistry = useCapability(SheetCapabilities.ComputeGraphRegistry);
-
-        return (
-          <ComputeGraphContextProvider registry={computeGraphRegistry}>
-            <SheetContainer space={getSpace(data.subject)!} sheet={data.subject} role={role} />
-          </ComputeGraphContextProvider>
-        );
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/object-settings`,
-      role: 'object-settings',
-      filter: (data): data is { subject: Sheet.Sheet } => Obj.instanceOf(Sheet.Sheet, data.subject),
-      component: ({ data }) => <RangeList sheet={data.subject} />,
-    }),
-  ]);
+          return (
+            <SheetArticle
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              space={getSpace(data.subject)!}
+              registry={computeGraphRegistry}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'object-properties',
+        filter: AppSurface.object(AppSurface.ObjectProperties, Sheet.Sheet),
+        component: ({ data }) => <RangeList sheet={data.subject} />,
+      }),
+    ]),
+  ),
+);

package/src/capabilities/state.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+
+import { SheetCapabilities } from '#types';
+
+const createGridRegistry = (): SheetCapabilities.GridRegistry => {
+  const grids = new Map<string, SheetCapabilities.GridEntry>();
+  return {
+    register: (attendableId, grid, setActiveRefs) => {
+      grids.set(attendableId, { grid, setActiveRefs });
+    },
+    unregister: (attendableId) => {
+      grids.delete(attendableId);
+    },
+    get: (attendableId) => grids.get(attendableId),
+  };
+};
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const gridInstances = createGridRegistry();
+    return Capability.contributes(SheetCapabilities.GridInstances, gridInstances);
+  }),
+);

package/src/capabilities/undo-mappings.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability, UndoMapping } from '@dxos/app-framework';
+
+import { meta } from '#meta';
+import { SheetOperation } from '#types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.UndoMapping, [
+      UndoMapping.make({
+        operation: SheetOperation.DropAxis,
+        inverse: SheetOperation.RestoreAxis,
+        deriveContext: (input, output) => ({
+          model: input.model,
+          axis: output.axis,
+          axisIndex: output.axisIndex,
+          index: output.index,
+          axisMeta: output.axisMeta,
+          values: output.values,
+        }),
+        message: ['axis-dropped.label', { ns: meta.id }],
+      }),
+    ]),
+  ),
+);

package/src/components/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, createContext, useContext } from 'react';
 
-import { type ComputeGraph, type ComputeGraphRegistry } from '@dxos/compute';
+import { type ComputeGraph, type ComputeGraphRegistry } from '@dxos/compute-hyperformula';
 import { raise } from '@dxos/debug';
 import { type Space } from '@dxos/react-client/echo';
 import { useAsyncState } from '@dxos/react-hooks';

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

@@ -5,25 +5,25 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { testFunctionPlugins } from '@dxos/compute/testing';
-import { Filter } from '@dxos/echo';
-import { Function } from '@dxos/functions';
-import { useSpace } from '@dxos/react-client/echo';
+import { Operation } from '@dxos/compute';
+import { testFunctionPlugins } from '@dxos/compute-hyperformula/testing';
+import { Filter, 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 +44,20 @@ 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, {
+          [Obj.Meta]: { version: '0.0.1' },
+          name: 'test',
+          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 +80,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 +88,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,16 +6,18 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
 import { Client } from '@dxos/client';
-import { createDocAccessor } from '@dxos/client/echo';
-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 { automerge } from '@dxos/react-ui-editor';
 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(() => {
@@ -37,8 +39,10 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
     const space = await client.spaces.create();
 
     const sheet = Sheet.make();
-    sheet.name = 'Test';
-    sheet.cells[cell] = { value };
+    Obj.update(sheet, (sheet) => {
+      sheet.name = 'Test';
+      sheet.cells[cell] = { value };
+    });
     space.db.add(sheet);
     setObject(sheet);
   }, [value]);
@@ -58,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 { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { testFunctionPlugins } from '@dxos/compute/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,30 +29,31 @@ 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 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({
-      plugins: [IntentPlugin()],
+      plugins: [OperationPlugin(), RuntimePlugin()],
     }),
   ],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof GridSheet>;
+} satisfies Meta<typeof SheetContent>;
 
 export default meta;