@dxos/plugin-sheet 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/capabilities/compute-graph-registry.ts

@@ -2,27 +2,41 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type PluginContext, contributes } from '@dxos/app-framework';
-import { ClientCapabilities } from '@dxos/plugin-client';
+import * as Effect from 'effect/Effect';
 
-import { SheetCapabilities } from './capabilities';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Operation, ServiceResolver } from '@dxos/compute';
+import { type SpaceId } from '@dxos/keys';
 
-const isSecure = (protocol: string) => {
-  return protocol === 'https:' || protocol === 'wss:';
-};
+import { SheetCapabilities } from '#types';
 
-export default async (context: PluginContext) => {
-  const client = context.getCapability(ClientCapabilities.Client);
-  let remoteFunctionUrl: string | undefined;
-  if (client.config.values.runtime?.services?.edge?.url) {
-    const url = new URL('/functions', client.config.values.runtime?.services?.edge?.url);
-    url.protocol = isSecure(url.protocol) ? 'https' : 'http';
-    remoteFunctionUrl = url.toString();
-  }
+/**
+ * Builds the per-space compute graph registry by adapting the shared
+ * {@link Capabilities.ProcessManagerRuntime} into a
+ * {@link FunctionsRuntimeProvider} that resolves {@link Operation.Service}
+ * from the space's service layer.
+ */
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const processManagerRuntime = yield* Capability.get(Capabilities.ProcessManagerRuntime);
 
-  // TODO(wittjosiah): This can probably be a module level import now due to lazy capability loading.
-  // Async import removes direct dependency on hyperformula.
-  const { defaultPlugins, ComputeGraphRegistry } = await import('@dxos/compute');
-  const computeGraphRegistry = new ComputeGraphRegistry({ plugins: defaultPlugins, remoteFunctionUrl });
-  return contributes(SheetCapabilities.ComputeGraphRegistry, computeGraphRegistry);
-};
+    // Async import removes direct dependency on hyperformula.
+    const { defaultPlugins, ComputeGraphRegistry } = yield* Effect.tryPromise(
+      () => import('@dxos/compute-hyperformula'),
+    );
+
+    const computeGraphRegistry = new ComputeGraphRegistry({
+      plugins: defaultPlugins,
+      computeRuntime: {
+        getRuntime: (spaceId: SpaceId) => ({
+          runPromise: <A, E>(effect: Effect.Effect<A, E, Operation.Service>) =>
+            processManagerRuntime.runPromise(
+              effect.pipe(Effect.provide(ServiceResolver.provide({ space: spaceId }, Operation.Service))),
+            ),
+        }),
+      },
+    });
+
+    return Capability.contributes(SheetCapabilities.ComputeGraphRegistry, computeGraphRegistry);
+  }),
+);

package/src/capabilities/create-object.ts

@@ -0,0 +1,33 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+import { Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+
+import { Sheet } from '#types';
+
+import { getSheetsPath } from '../paths';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+      id: Type.getTypename(Sheet.Sheet),
+      createObject: (props, options) =>
+        Effect.gen(function* () {
+          const object = Sheet.make(props);
+          return yield* Operation.invoke(SpaceOperation.AddObject, {
+            object,
+            target: options.target,
+            hidden: true,
+            targetNodeId: options.targetNodeId ?? getSheetsPath(options.db.spaceId),
+          });
+        }),
+    });
+  }),
+);

package/src/capabilities/index.ts

@@ -2,12 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { type AppCapabilities } from '@dxos/app-toolkit';
+import { OperationHandlerSet } from '@dxos/compute';
 
-export const AnchorSort = lazy(() => import('./anchor-sort'));
-export const ComputeGraphRegistry = lazy(() => import('./compute-graph-registry'));
-export const IntentResolver = lazy(() => import('./intent-resolver'));
-export const Markdown = lazy(() => import('./markdown'));
-export const ReactSurface = lazy(() => import('./react-surface'));
-
-export * from './capabilities';
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const NavigationResolver = Capability.lazy('NavigationResolver', () => import('./navigation-resolver'));
+export const AnchorSort = Capability.lazy('AnchorSort', () => import('./anchor-sort'));
+// The contributed capability type references Operation types from @dxos/compute, so the lazy
+// wrapper needs an explicit annotation to keep the inferred type portable (TS2883).
+export const CommentConfig: Capability.LazyCapability<
+  void,
+  Capability.Capability<typeof AppCapabilities.CommentConfig>
+> = Capability.lazy('CommentConfig', () => import('./comment-config'));
+export const ComputeGraphRegistry = Capability.lazy('ComputeGraphRegistry', () => import('./compute-graph-registry'));
+export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const Markdown = Capability.lazy('MarkdownExtension', () => import('./markdown-extension'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const SheetState = Capability.lazy('SheetState', () => import('./state'));
+export const UndoMappings = Capability.lazy('UndoMappings', () => import('./undo-mappings'));

package/src/capabilities/markdown-extension.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { getSpace } from '@dxos/client/echo';
+import { MarkdownCapabilities } from '@dxos/plugin-markdown/types';
+
+import { SheetCapabilities } from '#types';
+
+import { computeGraphFacet } from '../extensions';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    // Get context for lazy capability access in callbacks.
+    const capabilities = yield* Capability.Service;
+
+    return Capability.contributes(MarkdownCapabilities.ExtensionProvider, [
+      ({ 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/navigation-resolver.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, createTypeSectionPathResolver } from '@dxos/app-toolkit';
+
+import { Sheet } from '#types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(AppCapabilities.NavigationPathResolver, createTypeSectionPathResolver(Sheet.Sheet));
+  }),
+);

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 { SHEET_PLUGIN } from '../meta';
-import { SheetType } 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: `${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);
-
-        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 (
+            <SheetArticle
+              role={role}
+              subject={data.subject}
+              attendableId={data.attendableId}
+              space={getSpace(data.subject)!}
+              registry={computeGraphRegistry}
+            />
+          );
+        },
+      }),
+      Surface.create({
+        id: 'objectProperties',
+        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

@@ -2,38 +2,36 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+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, Obj } from '@dxos/echo';
-import { FunctionType } from '@dxos/functions';
-import { useSpace } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Button, Input, Toolbar } from '@dxos/react-ui';
-import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { withTheme } from '@dxos/storybook-utils';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { useSheetModel } from '../../model';
-import { withComputeGraphDecorator } from '../../testing';
-import { SheetType, createSheet } from '../../types';
+import { withComputeGraphDecorator } from '#testing';
+import { Sheet } from '#types';
 
+import { useSheetModel } from '../../model';
 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]);
@@ -46,14 +44,20 @@ 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, {
+          [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(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);
@@ -76,23 +80,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-client';
+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 { ProcessManagerPlugin } 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 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: [ProcessManagerPlugin()],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof SheetContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;