@dxos/plugin-sheet 0.8.4-main.67995b8 → 0.8.4-main.70d3990

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.8.4-main.67995b8",
+  "version": "0.8.4-main.70d3990",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,16 +10,16 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts"
+      "node": "./dist/lib/node-esm/index.mjs"
     },
     "./types": {
+      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
-      "node": "./dist/lib/node-esm/types/index.mjs",
-      "source": "./src/types/index.ts"
+      "node": "./dist/lib/node-esm/types/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -35,10 +35,10 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.1",
-    "@codemirror/language": "^6.10.3",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.34.1",
+    "@codemirror/autocomplete": "^6.19.0",
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.4",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",
@@ -48,81 +48,83 @@
     "@lezer/lezer": "^1.1.2",
     "@lezer/lr": "^1.4.2",
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-context": "1.1.1",
     "codemirror-lang-spreadsheet": "^1.3.0",
     "date-fns": "^3.3.1",
     "lodash.defaultsdeep": "^4.6.1",
     "re-resizable": "^6.9.17",
-    "react-markdown": "^8.0.5",
+    "react-markdown": "^10.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.8.4-main.67995b8",
-    "@dxos/async": "0.8.4-main.67995b8",
-    "@dxos/client": "0.8.4-main.67995b8",
-    "@dxos/compute": "0.8.4-main.67995b8",
-    "@dxos/context": "0.8.4-main.67995b8",
-    "@dxos/debug": "0.8.4-main.67995b8",
-    "@dxos/echo": "0.8.4-main.67995b8",
-    "@dxos/crypto": "0.8.4-main.67995b8",
-    "@dxos/echo-schema": "0.8.4-main.67995b8",
-    "@dxos/functions": "0.8.4-main.67995b8",
-    "@dxos/invariant": "0.8.4-main.67995b8",
-    "@dxos/keys": "0.8.4-main.67995b8",
-    "@dxos/lit-grid": "0.8.4-main.67995b8",
-    "@dxos/live-object": "0.8.4-main.67995b8",
-    "@dxos/log": "0.8.4-main.67995b8",
-    "@dxos/plugin-attention": "0.8.4-main.67995b8",
-    "@dxos/plugin-client": "0.8.4-main.67995b8",
-    "@dxos/plugin-graph": "0.8.4-main.67995b8",
-    "@dxos/plugin-deck": "0.8.4-main.67995b8",
-    "@dxos/plugin-markdown": "0.8.4-main.67995b8",
-    "@dxos/plugin-script": "0.8.4-main.67995b8",
-    "@dxos/plugin-space": "0.8.4-main.67995b8",
-    "@dxos/plugin-stack": "0.8.4-main.67995b8",
-    "@dxos/plugin-thread": "0.8.4-main.67995b8",
-    "@dxos/react-client": "0.8.4-main.67995b8",
-    "@dxos/react-hooks": "0.8.4-main.67995b8",
-    "@dxos/react-ui-editor": "0.8.4-main.67995b8",
-    "@dxos/react-ui-attention": "0.8.4-main.67995b8",
-    "@dxos/react-ui-form": "0.8.4-main.67995b8",
-    "@dxos/react-ui-grid": "0.8.4-main.67995b8",
-    "@dxos/react-ui-list": "0.8.4-main.67995b8",
-    "@dxos/react-ui-menu": "0.8.4-main.67995b8",
-    "@dxos/react-ui-stack": "0.8.4-main.67995b8",
-    "@dxos/schema": "0.8.4-main.67995b8",
-    "@dxos/util": "0.8.4-main.67995b8"
+    "@dxos/app-framework": "0.8.4-main.70d3990",
+    "@dxos/async": "0.8.4-main.70d3990",
+    "@dxos/client": "0.8.4-main.70d3990",
+    "@dxos/compute": "0.8.4-main.70d3990",
+    "@dxos/context": "0.8.4-main.70d3990",
+    "@dxos/crypto": "0.8.4-main.70d3990",
+    "@dxos/echo": "0.8.4-main.70d3990",
+    "@dxos/echo-db": "0.8.4-main.70d3990",
+    "@dxos/debug": "0.8.4-main.70d3990",
+    "@dxos/functions": "0.8.4-main.70d3990",
+    "@dxos/invariant": "0.8.4-main.70d3990",
+    "@dxos/keys": "0.8.4-main.70d3990",
+    "@dxos/lit-grid": "0.8.4-main.70d3990",
+    "@dxos/log": "0.8.4-main.70d3990",
+    "@dxos/live-object": "0.8.4-main.70d3990",
+    "@dxos/plugin-automation": "0.8.4-main.70d3990",
+    "@dxos/plugin-attention": "0.8.4-main.70d3990",
+    "@dxos/plugin-client": "0.8.4-main.70d3990",
+    "@dxos/plugin-deck": "0.8.4-main.70d3990",
+    "@dxos/plugin-graph": "0.8.4-main.70d3990",
+    "@dxos/plugin-markdown": "0.8.4-main.70d3990",
+    "@dxos/plugin-stack": "0.8.4-main.70d3990",
+    "@dxos/plugin-thread": "0.8.4-main.70d3990",
+    "@dxos/plugin-script": "0.8.4-main.70d3990",
+    "@dxos/react-client": "0.8.4-main.70d3990",
+    "@dxos/react-hooks": "0.8.4-main.70d3990",
+    "@dxos/react-ui-editor": "0.8.4-main.70d3990",
+    "@dxos/react-ui-attention": "0.8.4-main.70d3990",
+    "@dxos/react-ui-form": "0.8.4-main.70d3990",
+    "@dxos/react-ui-menu": "0.8.4-main.70d3990",
+    "@dxos/react-ui-grid": "0.8.4-main.70d3990",
+    "@dxos/plugin-space": "0.8.4-main.70d3990",
+    "@dxos/react-ui-list": "0.8.4-main.70d3990",
+    "@dxos/react-ui-stack": "0.8.4-main.70d3990",
+    "@dxos/types": "0.8.4-main.70d3990",
+    "@dxos/util": "0.8.4-main.70d3990",
+    "@dxos/schema": "0.8.4-main.70d3990"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.89.0",
+    "@effect-atom/atom-react": "^0.3.4",
+    "@effect/platform": "0.92.1",
     "@lezer/generator": "^1.7.1",
     "@tldraw/indices": "^2.0.0-alpha.14",
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "@types/react-window": "^1.8.8",
-    "effect": "3.17.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/echo-generator": "0.8.4-main.67995b8",
-    "@dxos/lit-grid": "0.8.4-main.67995b8",
-    "@dxos/random": "0.8.4-main.67995b8",
-    "@dxos/react-ui": "0.8.4-main.67995b8",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.67995b8",
-    "@dxos/react-ui-types": "0.8.4-main.67995b8",
-    "@dxos/react-ui-theme": "0.8.4-main.67995b8",
-    "@dxos/storybook-utils": "0.8.4-main.67995b8",
-    "@dxos/test-utils": "0.8.4-main.67995b8"
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/echo-generator": "0.8.4-main.70d3990",
+    "@dxos/lit-grid": "0.8.4-main.70d3990",
+    "@dxos/random": "0.8.4-main.70d3990",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.70d3990",
+    "@dxos/react-ui-theme": "0.8.4-main.70d3990",
+    "@dxos/react-ui": "0.8.4-main.70d3990",
+    "@dxos/react-ui-types": "0.8.4-main.70d3990",
+    "@dxos/test-utils": "0.8.4-main.70d3990",
+    "@dxos/storybook-utils": "0.8.4-main.70d3990"
   },
   "peerDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
+    "@effect-atom/atom-react": "^0.3.4",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.67995b8",
-    "@dxos/react-ui-theme": "0.8.4-main.67995b8"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.70d3990",
+    "@dxos/react-ui-theme": "0.8.4-main.70d3990"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -2,75 +2,78 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
-import { ClientEvents } from '@dxos/plugin-client';
+import {
+  Capabilities,
+  Events,
+  allOf,
+  contributes,
+  createIntent,
+  defineModule,
+  definePlugin,
+} from '@dxos/app-framework';
+import { AutomationEvents } from '@dxos/plugin-automation';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 import { MarkdownEvents } from '@dxos/plugin-markdown';
-import { SpaceCapabilities } from '@dxos/plugin-space';
-import { defineObjectForm } from '@dxos/plugin-space/types';
+import { type CreateObjectIntent } from '@dxos/plugin-space/types';
 
-import { AnchorSort, Markdown, ReactSurface, IntentResolver, ComputeGraphRegistry } from './capabilities';
+import { AnchorSort, ComputeGraphRegistry, IntentResolver, Markdown, ReactSurface } from './capabilities';
 import { meta } from './meta';
 import { serializer } from './serializer';
 import { translations } from './translations';
-import { SheetAction, SheetType } from './types';
+import { Sheet, SheetAction } from './types';
 
-export const SheetPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/compute-graph-registry`,
-      activatesOn: ClientEvents.ClientReady,
-      activate: ComputeGraphRegistry,
-    }),
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/metadata`,
-      activatesOn: Events.SetupMetadata,
-      activate: () =>
-        contributes(Capabilities.Metadata, {
-          id: SheetType.typename,
-          metadata: {
-            label: (object: SheetType) => object.name,
-            icon: 'ph--grid-nine--regular',
-            serializer,
-            comments: 'anchored',
-          },
-        }),
-    }),
-    defineModule({
-      id: `${meta.id}/module/object-form`,
-      activatesOn: ClientEvents.SetupSchema,
-      activate: () =>
-        contributes(
-          SpaceCapabilities.ObjectForm,
-          defineObjectForm({
-            objectSchema: SheetType,
-            getIntent: (props, options) => createIntent(SheetAction.Create, { ...props, space: options.space }),
-          }),
-        ),
-    }),
-    defineModule({
-      id: `${meta.id}/module/markdown`,
-      activatesOn: MarkdownEvents.SetupExtensions,
-      activate: Markdown,
-    }),
-    defineModule({
-      id: `${meta.id}/module/anchor-sort`,
-      // TODO(wittjosiah): More relevant event?
-      activatesOn: Events.AppGraphReady,
-      activate: AnchorSort,
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      activate: ReactSurface,
-    }),
-    defineModule({
-      id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: IntentResolver,
-    }),
-  ]);
+export const SheetPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/compute-graph-registry`,
+    activatesOn: allOf(ClientEvents.ClientReady, AutomationEvents.ComputeRuntimeReady),
+    activate: ComputeGraphRegistry,
+  }),
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/metadata`,
+    activatesOn: Events.SetupMetadata,
+    activate: () =>
+      contributes(Capabilities.Metadata, {
+        id: Sheet.Sheet.typename,
+        metadata: {
+          label: (object: Sheet.Sheet) => object.name,
+          icon: 'ph--grid-nine--regular',
+          iconHue: 'indigo',
+          serializer,
+          comments: 'anchored',
+          createObjectIntent: ((props) => createIntent(SheetAction.Create, { ...props })) satisfies CreateObjectIntent,
+          addToCollectionOnCreate: true,
+        },
+      }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/schema`,
+    activatesOn: ClientEvents.SetupSchema,
+    activate: () => contributes(ClientCapabilities.Schema, [Sheet.Sheet]),
+  }),
+  defineModule({
+    id: `${meta.id}/module/markdown`,
+    activatesOn: MarkdownEvents.SetupExtensions,
+    activate: Markdown,
+  }),
+  defineModule({
+    id: `${meta.id}/module/anchor-sort`,
+    // TODO(wittjosiah): More relevant event?
+    activatesOn: Events.AppGraphReady,
+    activate: AnchorSort,
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: IntentResolver,
+  }),
+]);

package/src/capabilities/anchor-sort.ts

@@ -2,18 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
-import { getTarget } from '@dxos/react-client/echo';
+import { Capabilities, type Capability, contributes } from '@dxos/app-framework';
+import { Relation } from '@dxos/echo';
 
-import { compareIndexPositions, SheetType } from '../types';
+import { Sheet, compareIndexPositions } from '../types';
 
-export default () =>
+export default (): Capability<typeof Capabilities.AnchorSort> =>
   contributes(Capabilities.AnchorSort, {
-    key: Type.getTypename(SheetType)!,
+    key: Sheet.Sheet.typename,
     sort: (anchorA, anchorB) => {
-      const sheet = getTarget(anchorA) as SheetType;
-      if (sheet !== getTarget(anchorB)) {
+      const sheet = Relation.getTarget(anchorA) as Sheet.Sheet;
+      if (sheet !== Relation.getTarget(anchorB)) {
         return 0;
       }
 

package/src/capabilities/capabilities.ts

@@ -5,10 +5,10 @@
 import { defineCapability } from '@dxos/app-framework';
 import { type ComputeGraphRegistry } from '@dxos/compute';
 
-import { SHEET_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export namespace SheetCapabilities {
   export const ComputeGraphRegistry = defineCapability<ComputeGraphRegistry>(
-    `${SHEET_PLUGIN}/capability/compute-graph-registry`,
+    `${meta.id}/capability/compute-graph-registry`,
   );
 }

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

@@ -2,27 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginContext } from '@dxos/app-framework';
-import { ClientCapabilities } from '@dxos/plugin-client';
+import { type PluginContext, contributes } from '@dxos/app-framework';
+import { AutomationCapabilities } from '@dxos/plugin-automation';
 
 import { SheetCapabilities } from './capabilities';
 
-const isSecure = (protocol: string) => {
-  return protocol === 'https:' || protocol === 'wss:';
-};
+// Locally declare the Automation ComputeRuntime capability by ID to avoid direct import dependency.
 
 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();
-  }
-
   // 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 });
+  const computeRuntimeResolver = context.getCapability(AutomationCapabilities.ComputeRuntime);
+  const computeGraphRegistry = new ComputeGraphRegistry({
+    plugins: defaultPlugins,
+    computeRuntime: computeRuntimeResolver,
+  });
+
   return contributes(SheetCapabilities.ComputeGraphRegistry, computeGraphRegistry);
 };

package/src/capabilities/intent-resolver.ts

@@ -2,16 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, Capabilities, createResolver } from '@dxos/app-framework';
+import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
 
-import { SHEET_PLUGIN } from '../meta';
-import { createSheet, SheetAction } from '../types';
+import { meta } from '../meta';
+import { Sheet, SheetAction } from '../types';
 
 export default () =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: SheetAction.Create,
-      resolve: ({ name }) => ({ data: { object: createSheet({ name }) } }),
+      resolve: ({ name }) => ({ data: { object: Sheet.make({ name }) } }),
     }),
     createResolver({
       intent: SheetAction.InsertAxis,
@@ -26,7 +26,7 @@ export default () =>
           const undoData = model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
           return {
             undoable: {
-              message: [`${axis} dropped label`, { ns: SHEET_PLUGIN }],
+              message: [`${axis} dropped label`, { ns: meta.id }],
               data: { ...undoData, model },
             },
           };

package/src/capabilities/markdown.ts

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginContext } from '@dxos/app-framework';
+import { type PluginContext, contributes } from '@dxos/app-framework';
 import { getSpace } from '@dxos/client/echo';
 import { MarkdownCapabilities } from '@dxos/plugin-markdown';
 
-import { SheetCapabilities } from './capabilities';
 import { computeGraphFacet } from '../extensions';
 
+import { SheetCapabilities } from './capabilities';
+
 export default (context: PluginContext) =>
   contributes(MarkdownCapabilities.Extensions, [
     ({ document: doc }) => {

package/src/capabilities/react-surface.tsx

@@ -4,22 +4,24 @@
 
 import React from 'react';
 
-import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 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 { meta } from '../meta';
+import { Sheet } from '../types';
+
+import { SheetCapabilities } from './capabilities';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${SHEET_PLUGIN}/sheet`,
+      id: `${meta.id}/sheet`,
       role: ['article', 'section'],
-      filter: (data): data is { subject: SheetType } =>
-        Obj.instanceOf(SheetType, data.subject) && !!getSpace(data.subject),
+      filter: (data): data is { subject: Sheet.Sheet } =>
+        Obj.instanceOf(Sheet.Sheet, data.subject) && !!getSpace(data.subject),
       component: ({ data, role }) => {
         const computeGraphRegistry = useCapability(SheetCapabilities.ComputeGraphRegistry);
 
@@ -31,9 +33,9 @@ export default () =>
       },
     }),
     createSurface({
-      id: `${SHEET_PLUGIN}/object-settings`,
+      id: `${meta.id}/object-settings`,
       role: 'object-settings',
-      filter: (data): data is { subject: SheetType } => Obj.instanceOf(SheetType, data.subject),
+      filter: (data): data is { subject: Sheet.Sheet } => Obj.instanceOf(Sheet.Sheet, data.subject),
       component: ({ data }) => <RangeList sheet={data.subject} />,
     }),
   ]);

package/src/components/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -2,7 +2,7 @@
 // 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 { raise } from '@dxos/debug';

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

@@ -2,37 +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 { Obj, Filter } from '@dxos/echo';
-import { FunctionType } from '@dxos/functions';
+import { Filter } from '@dxos/echo';
+import { Function } from '@dxos/functions';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Toolbar, Button, Input } from '@dxos/react-ui';
+import { Button, Input, Toolbar } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { withTheme } from '@dxos/storybook-utils';
 
-import { useComputeGraph } from './ComputeGraphContextProvider';
 import { useSheetModel } from '../../model';
 import { withComputeGraphDecorator } from '../../testing';
-import { createSheet, SheetType } from '../../types';
+import { Sheet } from '../../types';
+
+import { useComputeGraph } from './ComputeGraphContextProvider';
 
 const FUNCTION_NAME = 'TEST';
 
-const Story = () => {
+const DefaultStory = () => {
   const space = useSpace();
   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 +44,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(Function.make({ 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(Function.Function)).run();
       const mapped = graph.mapFunctionBindingToId(text);
       const unmapped = graph.mapFunctionBindingFromId(mapped);
       const internal = graph.mapFormulaToNative(text);
@@ -82,16 +81,18 @@ const Story = () => {
   );
 };
 
-export const Default = {};
+export const Default: Story = {};
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-sheet/functions',
+  render: DefaultStory,
   decorators: [
-    withClientProvider({ types: [FunctionType, SheetType], createIdentity: true, createSpace: true }),
-    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
     withTheme,
+    withClientProvider({ types: [Function.Function, Sheet.Sheet], createIdentity: true, createSpace: true }),
+    withComputeGraphDecorator({ plugins: testFunctionPlugins }),
   ],
-  render: (args: any) => <Story {...args} />,
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -26,9 +26,9 @@ export const FunctionEditor = () => {
   }
 
   return (
-    <div className='flex shrink-0 justify-between items-center px-4 py-1 text-sm bg-toolbarSurface border-bs !border-subduedSeparator'>
+    <div className='flex shrink-0 justify-between items-center pli-4 plb-1 text-sm bg-toolbarSurface border-bs !border-subduedSeparator'>
       <div className='flex gap-4 items-center'>
-        <div className='flex w-16 items-center font-mono'>
+        <div className='flex is-16 items-center font-mono'>
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
         </div>
         <div className='flex gap-2 items-center'>