@dxos/plugin-sheet 0.8.3 → 0.8.4-main.1c7ec43d41

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,38 +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 { SheetCapabilities } from './capabilities';
-import { ComputeGraphContextProvider, RangeList, SheetContainer } from '../components';
-import { SHEET_PLUGIN } from '../meta';
-import { SheetType } from '../types';
+import { RangeList, SheetContainer } from '#containers';
+import { Sheet, SheetCapabilities } from '#types';
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${SHEET_PLUGIN}/sheet`,
-      role: ['article', 'section'],
-      filter: (data): data is { subject: SheetType } =>
-        Obj.instanceOf(SheetType, data.subject) && !!getSpace(data.subject),
-      component: ({ data, role }) => {
-        const computeGraphRegistry = useCapability(SheetCapabilities.ComputeGraphRegistry);
+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) &&
+          !!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: `${SHEET_PLUGIN}/object-settings`,
-      role: 'object-settings',
-      filter: (data): data is { subject: SheetType } => Obj.instanceOf(SheetType, data.subject),
-      component: ({ data }) => <RangeList sheet={data.subject} />,
-    }),
-  ]);
+          return (
+            <SheetContainer
+              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 { type GridEntry, type GridRegistry, SheetCapabilities } from '#types';
+
+const createGridRegistry = (): GridRegistry => {
+  const grids = new Map<string, 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 '#operations';
+
+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

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren, useContext } from 'react';
+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

@@ -2,37 +2,37 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { testFunctionPlugins } from '@dxos/compute/testing';
-import { Obj, Filter } from '@dxos/echo';
-import { FunctionType } from '@dxos/functions';
-import { useSpace } from '@dxos/react-client/echo';
+import { Operation } from '@dxos/compute';
+import { testFunctionPlugins } from '@dxos/compute-hyperformula/testing';
+import { Filter } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Toolbar, Button, Input } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { withTheme } from '@dxos/storybook-utils';
+import { Button, Input, Toolbar } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { withComputeGraphDecorator } from '#testing';
+import { Sheet } from '#types';
 
-import { useComputeGraph } from './ComputeGraphContextProvider';
 import { useSheetModel } from '../../model';
-import { withComputeGraphDecorator } from '../../testing';
-import { createSheet, SheetType } from '../../types';
+import { useComputeGraph } from './ComputeGraphContextProvider';
 
 const FUNCTION_NAME = 'TEST';
 
-const Story = () => {
-  const space = useSpace();
+const DefaultStory = () => {
+  const [space] = useSpaces();
   const graph = useComputeGraph(space);
-  const [sheet, setSheet] = useState<SheetType>();
+  const [sheet, setSheet] = useState<Sheet.Sheet>();
   const [text, setText] = useState(`${FUNCTION_NAME}(100)`);
   const [result, setResult] = useState<any>();
   const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (space) {
-      const sheet = space.db.add(createSheet());
+      const sheet = space.db.add(Sheet.make());
       setSheet(sheet);
     }
   }, [space]);
@@ -45,14 +45,14 @@ const Story = () => {
         setResult({ functions: { standard: f1.length, echo: f2.length } });
       });
 
-      space.db.add(Obj.make(FunctionType, { 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(FunctionType)).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);
@@ -75,23 +75,27 @@ const Story = () => {
         </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>
   );
 };
 
-export const Default = {};
+export const Default: Story = {};
 
-const meta: Meta = {
-  title: 'plugins/plugin-sheet/functions',
+const meta = {
+  title: 'plugins/plugin-sheet/components/functions',
+  render: DefaultStory,
   decorators: [
-    withClientProvider({ types: [FunctionType, SheetType], createIdentity: true, createSpace: true }),
+    withTheme(),
+    withClientProvider({
+      types: [Operation.PersistentOperation, Sheet.Sheet],
+      createIdentity: true,
+      createSpace: true,
+    }),
     withComputeGraphDecorator({ plugins: testFunctionPlugins }),
-    withTheme,
   ],
-  render: (args: any) => <Story {...args} />,
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;

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/SheetContent/SheetCellEditor.stories.tsx

@@ -0,0 +1,95 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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-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 { 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';
+
+const DefaultStory = ({ value, ...props }: CellEditorProps) => {
+  const extensions = useMemo(() => {
+    const functionNames = getRegisteredFunctionNames();
+    const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
+    return [sheetExtension({ functions })];
+  }, []);
+
+  return <CellEditor {...props} value={value} extensions={extensions} />;
+};
+
+const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
+  const cell = 'A1';
+  const [object, setObject] = useState<Sheet.Sheet>();
+  useAsyncEffect(async () => {
+    const client = new Client({ types: [Sheet.Sheet] });
+    await client.initialize();
+    await client.halo.createIdentity();
+    const space = await client.spaces.create();
+
+    const sheet = Sheet.make();
+    Obj.update(sheet, (sheet) => {
+      sheet.name = 'Test';
+      sheet.cells[cell] = { value };
+    });
+    space.db.add(sheet);
+    setObject(sheet);
+  }, [value]);
+
+  const extensions = useMemo(() => {
+    if (!object) {
+      return [];
+    }
+
+    const functionNames = getRegisteredFunctionNames();
+    const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
+    const accessor = createDocAccessor(object, ['cells', cell, 'value']);
+    return [automerge(accessor), sheetExtension({ functions })];
+  }, [object]);
+
+  return <CellEditor {...props} value={value} extensions={extensions} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-sheet/components/CellEditor',
+
+  decorators: [withTheme()],
+  component: CellEditor,
+  render: DefaultStory,
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const AutoComplete: Story = {
+  args: {
+    value: '=SUM',
+  },
+};
+
+export const Formatting: Story = {
+  args: {
+    value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
+  },
+};
+
+export const Automerge: Story = {
+  render: AutomergeStory,
+  args: {
+    value: '=SUM(A1:A2, 100, TRUE, "100", SUM(A1:A2, B1:B2))',
+  },
+};

package/src/components/SheetContent/SheetContent.stories.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+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-hyperformula/testing';
+import { useSpaces } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/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 { SheetRoot } from '../SheetRoot';
+import { SheetContent } from './SheetContent';
+
+export const Basic = () => {
+  const [space] = useSpaces();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!sheet || !graph) {
+    return null;
+  }
+
+  return (
+    <SheetRoot graph={graph} sheet={sheet} attendableId='test' ignoreAttention>
+      <div role='none' className='grid h-full w-full'>
+        <SheetContent />
+      </div>
+    </SheetRoot>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-sheet/components/SheetContent',
+  component: SheetContent,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withClientProvider({ types: [Sheet.Sheet], createSpace: true }),
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
+    withPluginManager({
+      plugins: [OperationPlugin(), RuntimePlugin()],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof SheetContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;