@dxos/plugin-sheet 0.9.0 → 0.9.1-staging.ee54ba693a

package/dx.config.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Config2 } from '@dxos/app-framework/config';
+import { trim } from '@dxos/util';
+
+export default Config2.make({
+  plugin: {
+    key: 'org.dxos.plugin.sheet',
+    name: 'Sheet',
+    author: 'DXOS',
+    description: trim`
+      Full-featured spreadsheet for DXOS Composer backed by ECHO for local-first, real-time collaborative editing.
+      Cells, row/column metadata, and range-based formatting are all stored as ECHO objects and replicated to peers instantly.
+
+      Formula evaluation is powered by HyperFormula, providing over 400 built-in functions covering arithmetic, statistics,
+      text manipulation, date/time, financial, and logical operations. Formulas are stored with internal cell indices and
+      translated to A1-notation on display, keeping references stable across row and column insertions.
+
+      The plugin integrates with plugin-markdown to expose formula results inside document fenced code blocks, and
+      contributes anchor-navigation support so other plugins can scroll and highlight specific cell ranges by DXN reference.
+      AI agents can invoke sheet operations — insert/drop axes, scroll to anchor, and read or write cell values — through
+      the standard operations framework.
+    `,
+    icon: { key: 'ph--grid-nine--regular', hue: 'indigo' },
+    source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-sheet',
+    spec: 'PLUGIN.mdl',
+    screenshots: [{ dark: 'https://dxos.network/plugin-details-sheet-dark.png' }],
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.9.0",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -49,6 +49,11 @@
       "node": "./dist/lib/neutral/SheetPlugin.node.mjs",
       "default": "./dist/lib/neutral/SheetPlugin.mjs"
     },
+    "#skills": {
+      "source": "./src/skills/index.ts",
+      "types": "./dist/types/src/skills/index.d.ts",
+      "default": "./dist/lib/neutral/skills/index.mjs"
+    },
     "#testing": "./src/testing/index.ts",
     "#translations": {
       "source": "./src/translations.ts",
@@ -82,6 +87,7 @@
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
+    "dx.config.ts",
     "src",
     "PLUGIN.mdl"
   ],
@@ -93,70 +99,71 @@
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
     "codemirror-lang-spreadsheet": "^1.3.0",
-    "@dxos/app-framework": "0.9.0",
-    "@dxos/client": "0.9.0",
-    "@dxos/compute": "0.9.0",
-    "@dxos/async": "0.9.0",
-    "@dxos/context": "0.9.0",
-    "@dxos/app-toolkit": "0.9.0",
-    "@dxos/compute-hyperformula": "0.9.0",
-    "@dxos/crypto": "0.9.0",
-    "@dxos/debug": "0.9.0",
-    "@dxos/echo": "0.9.0",
-    "@dxos/echo-client": "0.9.0",
-    "@dxos/echo-react": "0.9.0",
-    "@dxos/invariant": "0.9.0",
-    "@dxos/keys": "0.9.0",
-    "@dxos/lit-grid": "0.9.0",
-    "@dxos/log": "0.9.0",
-    "@dxos/plugin-client": "0.9.0",
-    "@dxos/plugin-graph": "0.9.0",
-    "@dxos/plugin-comments": "0.9.0",
-    "@dxos/plugin-space": "0.9.0",
-    "@dxos/react-client": "0.9.0",
-    "@dxos/plugin-markdown": "0.9.0",
-    "@dxos/react-hooks": "0.9.0",
-    "@dxos/react-ui-editor": "0.9.0",
-    "@dxos/react-ui-attention": "0.9.0",
-    "@dxos/react-ui-form": "0.9.0",
-    "@dxos/react-ui-list": "0.9.0",
-    "@dxos/react-ui-grid": "0.9.0",
-    "@dxos/react-ui-menu": "0.9.0",
-    "@dxos/types": "0.9.0",
-    "@dxos/ui-editor": "0.9.0",
-    "@dxos/util": "0.9.0"
+    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
+    "@dxos/app-toolkit": "0.9.1-staging.ee54ba693a",
+    "@dxos/client": "0.9.1-staging.ee54ba693a",
+    "@dxos/compute": "0.9.1-staging.ee54ba693a",
+    "@dxos/compute-hyperformula": "0.9.1-staging.ee54ba693a",
+    "@dxos/context": "0.9.1-staging.ee54ba693a",
+    "@dxos/async": "0.9.1-staging.ee54ba693a",
+    "@dxos/crypto": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo": "0.9.1-staging.ee54ba693a",
+    "@dxos/debug": "0.9.1-staging.ee54ba693a",
+    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo-react": "0.9.1-staging.ee54ba693a",
+    "@dxos/lit-grid": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/keys": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-comments": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-markdown": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo-doc": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-hooks": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-form": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-space": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-grid": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-list": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-menu": "0.9.1-staging.ee54ba693a",
+    "@dxos/schema": "0.9.1-staging.ee54ba693a",
+    "@dxos/types": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-editor": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-editor": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
+    "@effect/platform": "0.96.2",
     "@lezer/generator": "^1.8.0",
     "@tldraw/indices": "^2.0.0-alpha.14",
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/echo-generator": "0.9.0",
-    "@dxos/lit-grid": "0.9.0",
-    "@dxos/plugin-testing": "0.9.0",
-    "@dxos/random": "0.9.0",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/storybook-utils": "0.9.0",
-    "@dxos/react-ui-syntax-highlighter": "0.9.0",
-    "@dxos/test-utils": "0.9.0",
-    "@dxos/ui-theme": "0.9.0",
-    "@dxos/ui-types": "0.9.0"
+    "@dxos/echo-generator": "0.9.1-staging.ee54ba693a",
+    "@dxos/lit-grid": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-testing": "0.9.1-staging.ee54ba693a",
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-syntax-highlighter": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/test-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-types": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/ui-theme": "0.9.0"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.test.ts

@@ -12,7 +12,7 @@ import { SheetPlugin } from '#plugin';
 
 import { meta } from './meta';
 
-const moduleId = (name: string) => `${meta.id}.module.${name}`;
+const moduleId = (name: string) => `${meta.profile.key}.module.${name}`;
 
 describe('SheetPlugin', () => {
   test('modules activate on the expected events', async ({ expect }) => {

package/src/SheetPlugin.tsx

@@ -9,16 +9,15 @@ import { MarkdownEvents } from '@dxos/plugin-markdown';
 
 import {
   AnchorSort,
-  AppGraphBuilder,
-  NavigationResolver,
   CommentConfig,
   ComputeGraphRegistry,
   CreateObject,
   Markdown,
   OperationHandler,
-  UndoMappings,
   ReactSurface,
   SheetState,
+  SkillDefinition,
+  UndoMappings,
 } from '#capabilities';
 import { meta } from '#meta';
 import { translations } from '#translations';
@@ -28,8 +27,7 @@ import { Sheet } from '#types';
 import pluginSpec from '../PLUGIN.mdl?raw';
 
 export const SheetPlugin = Plugin.define(meta).pipe(
-  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
-  AppPlugin.addNavigationResolverModule({ activate: NavigationResolver }),
+  AppPlugin.addSkillDefinitionModule({ activate: SkillDefinition }),
   AppPlugin.addCommentConfigModule({ activate: CommentConfig }),
   AppPlugin.addCreateObjectModule({ activate: CreateObject }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
@@ -55,7 +53,7 @@ export const SheetPlugin = Plugin.define(meta).pipe(
     activate: AnchorSort,
   }),
   AppPlugin.addPluginAssetModule({
-    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
   }),
   Plugin.make,
 );

package/src/capabilities/comment-config.ts

@@ -11,12 +11,7 @@ import { Type } from '@dxos/echo';
 import { SheetOperation } from '#types';
 import { Sheet } from '#types';
 
-// NOTE: Explicit annotation required: d.ts emit cannot portably name the inferred @dxos/compute types (TS2883).
-const activate: () => Effect.Effect<
-  Capability.Capability<typeof AppCapabilities.CommentConfig>,
-  never,
-  Capability.Service
-> = Effect.fnUntraced(function* () {
+const activate = Effect.fnUntraced(function* () {
   const config: AppCapabilities.CommentConfig = {
     id: Type.getTypename(Sheet.Sheet),
     comments: 'anchored',

package/src/capabilities/create-object.ts

@@ -12,8 +12,6 @@ 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, {
@@ -24,8 +22,7 @@ export default Capability.makeModule(
           return yield* Operation.invoke(SpaceOperation.AddObject, {
             object,
             target: options.target,
-            hidden: true,
-            targetNodeId: options.targetNodeId ?? getSheetsPath(options.db.spaceId),
+            targetNodeId: options.targetNodeId,
           });
         }),
     });

package/src/capabilities/index.ts

@@ -3,18 +3,10 @@
 //
 
 import { Capability } from '@dxos/app-framework';
-import { type AppCapabilities } from '@dxos/app-toolkit';
 import { OperationHandlerSet } from '@dxos/compute';
 
-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 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'));
@@ -24,4 +16,5 @@ export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHan
 );
 export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
 export const SheetState = Capability.lazy('SheetState', () => import('./state'));
+export const SkillDefinition = Capability.lazy('SkillDefinition', () => import('./skill-definition'));
 export const UndoMappings = Capability.lazy('UndoMappings', () => import('./undo-mappings'));

package/src/capabilities/react-surface.tsx

@@ -20,11 +20,10 @@ export default Capability.makeModule(() =>
       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),
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Sheet.Sheet, (data) => !!Obj.getDatabase(data.subject)),
+          AppSurface.object(AppSurface.Section, Sheet.Sheet, (data) => !!Obj.getDatabase(data.subject)),
+        ),
         component: ({ data, role }) => {
           const computeGraphRegistry = useCapability(SheetCapabilities.ComputeGraphRegistry);
 

package/src/capabilities/skill-definition.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+
+import { SheetSkill } from '#skills';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(Capability.contributes(AppCapabilities.SkillDefinition, SheetSkill)),
+);

package/src/capabilities/undo-mappings.ts

@@ -23,7 +23,7 @@ export default Capability.makeModule(() =>
           axisMeta: output.axisMeta,
           values: output.values,
         }),
-        message: ['axis-dropped.label', { ns: meta.id }],
+        message: ['axis-dropped.label', { ns: meta.profile.key }],
       }),
     ]),
   ),

package/src/components/Sheet/Sheet.tsx

@@ -7,7 +7,7 @@ import { SheetRoot } from '../SheetRoot';
 import { SheetStatusbar } from '../SheetStatusbar';
 import { SheetToolbar } from '../SheetToolbar';
 
-export { useSheetContext, type SheetContextValue, type SheetRootProps } from '../SheetRoot';
+export { type SheetContextValue, type SheetRootProps, useSheetContext } from '../SheetRoot';
 export { type SheetContentProps } from '../SheetContent';
 export { type SheetToolbarProps } from '../SheetToolbar';
 export { type SheetStatusbarProps } from '../SheetStatusbar';

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

@@ -9,7 +9,7 @@ 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 { Doc } from '@dxos/echo-doc';
 import { useAsyncEffect } from '@dxos/react-hooks';
 import { CellEditor, type CellEditorProps } from '@dxos/react-ui-grid';
 import { withTheme } from '@dxos/react-ui/testing';
@@ -54,7 +54,7 @@ const AutomergeStory = ({ value, ...props }: CellEditorProps) => {
 
     const functionNames = getRegisteredFunctionNames();
     const functions = defaultFunctions.filter(({ name }) => functionNames.includes(name));
-    const accessor = createDocAccessor(object, ['cells', cell, 'value']);
+    const accessor = Doc.createAccessor(object, ['cells', cell, 'value']);
     return [automerge(accessor), sheetExtension({ functions })];
   }, [object]);
 

package/src/components/SheetContent/SheetContent.tsx

@@ -75,7 +75,7 @@ const sheetRowDefault = {
 export type SheetContentProps = {};
 
 export const SheetContent = composable<HTMLDivElement, SheetContentProps>((props, forwardedRef) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const {
     id,
     attendableId,

package/src/components/SheetContent/util.ts

@@ -5,7 +5,7 @@
 import { useEffect, useState } from 'react';
 
 import { inRange } from '@dxos/compute-hyperformula';
-import { createDocAccessor } from '@dxos/echo-client';
+import { Doc } from '@dxos/echo-doc';
 import { cellClassesForFieldType, parseValue } from '@dxos/react-ui-form';
 import {
   type DxGridAxisMeta,
@@ -97,13 +97,13 @@ const gridCellGetter = (model: SheetModel) => {
 
 export const rowLabelCell = (row: number) => ({
   value: rowToA1Notation(row),
-  className: '!bg-toolbar-surface text-subdued text-end pe-1',
+  className: 'bg-axis-surface! text-axis-text text-end pe-1',
   resizeHandle: 'row',
 });
 
 export const colLabelCell = (col: number) => ({
   value: colToA1Notation(col),
-  className: '!bg-toolbar-surface text-subdued',
+  className: 'bg-axis-surface! text-axis-text',
   resizeHandle: 'col',
 });
 
@@ -115,7 +115,7 @@ const cellGetter = (model: SheetModel) => {
         return getGridCells(nextBounds);
       case 'fixedStartStart': {
         return {
-          '0,0': { className: '!bg-toolbar-surface' },
+          '0,0': { className: 'bg-axis-surface!' },
         };
       }
       case 'frozenColsStart':
@@ -144,7 +144,7 @@ export const useSheetModelDxGridProps = (
   const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridRows(model));
 
   useEffect(() => {
-    const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
+    const cellsAccessor = Doc.createAccessor(model.sheet, ['cells']);
     if (dxGrid) {
       dxGrid.getCells = cellGetter(model);
     }
@@ -160,8 +160,8 @@ export const useSheetModelDxGridProps = (
   }, [model, dxGrid]);
 
   useEffect(() => {
-    const columnMetaAccessor = createDocAccessor(model.sheet, ['columnMeta']);
-    const rowMetaAccessor = createDocAccessor(model.sheet, ['rowMeta']);
+    const columnMetaAccessor = Doc.createAccessor(model.sheet, ['columnMeta']);
+    const rowMetaAccessor = Doc.createAccessor(model.sheet, ['rowMeta']);
     const handleColumnMetaUpdate = () => {
       setColumns(createDxGridColumns(model));
     };

package/src/components/SheetToolbar/align.ts

@@ -50,7 +50,7 @@ export const useAlignState = (stateAtom: ToolbarStateAtom) => {
 
 const createAlignGroupAction = (value?: AlignValue) =>
   createMenuItemGroup('align', {
-    label: ['align.label', { ns: meta.id }],
+    label: ['align.label', { ns: meta.profile.key }],
     variant: 'toggleGroup',
     selectCardinality: 'single',
     value: `${alignKey}--${value}`,
@@ -104,7 +104,7 @@ const createAlignActions = ({ model, state, stateAtom, registry, cursorFallbackR
         key: alignKey,
         value: alignValue as AlignValue,
         checked: state[alignKey] === alignValue,
-        label: [`range-value.${alignValue}.label`, { ns: meta.id }],
+        label: [`range-value.${alignValue}.label`, { ns: meta.profile.key }],
         icon,
         testId: `grid.toolbar.${alignKey}.${alignValue}`,
       },

package/src/components/SheetToolbar/style.ts

@@ -119,7 +119,7 @@ const createStyleActions = ({ model, state, stateAtom, registry, cursorFallbackR
         key: 'style',
         value: styleValue as StyleValue,
         icon,
-        label: [`range-value.${styleValue}.label`, { ns: meta.id }],
+        label: [`range-value.${styleValue}.label`, { ns: meta.profile.key }],
         checked: !!state[styleValue as StyleValue],
       },
     );

package/src/containers/RangeList/RangeList.tsx

@@ -8,7 +8,7 @@ import React, { useCallback } from 'react';
 import { rangeToA1Notation } from '@dxos/compute-hyperformula';
 import { useObject } from '@dxos/echo-react';
 import { Input, Message, useTranslation } from '@dxos/react-ui';
-import { List } from '@dxos/react-ui-list';
+import { OrderedList } from '@dxos/react-ui-list';
 
 import { meta } from '#meta';
 import { rangeFromIndex } from '#types';
@@ -19,7 +19,7 @@ export type RangeListProps = {
 };
 
 export const RangeList = ({ sheet: sheetProp }: RangeListProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const [sheet, updateSheet] = useObject(sheetProp);
   // TODO(thure): Implement similar to comments, #8121
   const handleSelectRange = (range: Sheet.Range) => {};
@@ -37,28 +37,44 @@ export const RangeList = ({ sheet: sheetProp }: RangeListProps) => {
       <Input.Root>
         <Input.Label>{t('range-list.heading')}</Input.Label>
       </Input.Root>
-      {sheet.ranges.length < 1 ? (
+      {sheet.ranges.length === 0 ? (
         <Message.Root>
           <Message.Title>{t('no-ranges.message')}</Message.Title>
         </Message.Root>
       ) : (
-        <List.Root<Sheet.Range> items={sheet.ranges} isItem={Schema.is(Sheet.Range)}>
-          {({ items: ranges }) =>
-            ranges.map((range, i) => (
-              <List.Item key={i} item={range}>
-                <List.ItemDragHandle />
-                <List.ItemTitle onClick={() => handleSelectRange(range)}>
-                  {t('range.title', {
-                    position: rangeToA1Notation(rangeFromIndex(sheetProp, range.range)),
-                    key: t(`range-key.${range.key}.label`),
-                    value: t(`range-value.${range.value}.label`),
-                  })}
-                </List.ItemTitle>
-                <List.ItemDeleteButton onClick={() => handleDeleteRange(range)} />
-              </List.Item>
-            ))
-          }
-        </List.Root>
+        <OrderedList.Root<Sheet.Range> items={sheet.ranges} isItem={Schema.is(Sheet.Range)}>
+          {({ items: ranges }) => (
+            <OrderedList.Content>
+              {ranges.map((range) => {
+                // Use the range's underlying cell range string as the stable id so deletes /
+                // re-renders don't shift row identity by array position. Reorder is not
+                // wired (DX-8121); add `OrderedList.DragHandle` + a real id strategy when it
+                // lands. We avoid `OrderedList.Title` because there's no disclosure panel
+                // for it to control here.
+                const id = range.range;
+                return (
+                  <OrderedList.Item
+                    key={id}
+                    id={id}
+                    item={range}
+                    hover
+                    classNames='flex items-center cursor-pointer'
+                    onClick={() => handleSelectRange(range)}
+                  >
+                    <div className='flex grow items-center truncate px-2'>
+                      {t('range.title', {
+                        position: rangeToA1Notation(rangeFromIndex(sheetProp, range.range)),
+                        key: t(`range-key.${range.key}.label`),
+                        value: t(`range-value.${range.value}.label`),
+                      })}
+                    </div>
+                    <OrderedList.DeleteButton onClick={() => handleDeleteRange(range)} />
+                  </OrderedList.Item>
+                );
+              })}
+            </OrderedList.Content>
+          )}
+        </OrderedList.Root>
       )}
     </>
   );

package/src/containers/SheetArticle/SheetArticle.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { type ComputeGraphRegistry } from '@dxos/compute-hyperformula';
 import { type Space } from '@dxos/react-client/echo';
 import { Panel } from '@dxos/react-ui';
@@ -41,7 +41,7 @@ const SheetArticleInner = ({
 
   return (
     <Sheet.Root graph={graph} sheet={sheet} attendableId={attendableId!} ignoreAttention={ignoreAttention}>
-      <Panel.Root classNames={role === 'section' && 'aspect-aquare'}>
+      <Panel.Root classNames={role === AppSurface.Section.role && 'aspect-square'}>
         <Panel.Toolbar asChild>
           <Sheet.Toolbar />
         </Panel.Toolbar>

package/src/index.ts

@@ -4,5 +4,4 @@
 
 export * from './meta';
 export * from './operations';
-export * from './paths';
 export * from './types';

package/src/meta.ts

@@ -3,29 +3,7 @@
 //
 
 import { Plugin } from '@dxos/app-framework';
-import { DXN } from '@dxos/keys';
-import { trim } from '@dxos/util';
 
-export const meta = Plugin.makeMeta({
-  key: DXN.make('org.dxos.plugin.sheet'),
-  name: 'Sheet',
-  author: 'DXOS',
-  description: trim`
-    Full-featured spreadsheet for DXOS Composer backed by ECHO for local-first, real-time collaborative editing.
-    Cells, row/column metadata, and range-based formatting are all stored as ECHO objects and replicated to peers instantly.
+import config from '../dx.config';
 
-    Formula evaluation is powered by HyperFormula, providing over 400 built-in functions covering arithmetic, statistics,
-    text manipulation, date/time, financial, and logical operations. Formulas are stored with internal cell indices and
-    translated to A1-notation on display, keeping references stable across row and column insertions.
-
-    The plugin integrates with plugin-markdown to expose formula results inside document fenced code blocks, and
-    contributes anchor-navigation support so other plugins can scroll and highlight specific cell ranges by DXN reference.
-    AI agents can invoke sheet operations — insert/drop axes, scroll to anchor, and read or write cell values — through
-    the standard operations framework.
-  `,
-  icon: 'ph--grid-nine--regular',
-  iconHue: 'indigo',
-  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-sheet',
-  spec: 'PLUGIN.mdl',
-  screenshots: ['https://dxos.network/plugin-details-sheet-dark.png'],
-});
+export const meta = Plugin.getMetaFromConfig(config);

package/src/operations/create.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { CollectionModel } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { Database, Obj } from '@dxos/echo';
+
+import { Sheet, SheetOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof SheetOperation.Create> = SheetOperation.Create.pipe(
+  Operation.withHandler(
+    Effect.fn(function* ({ name, rows, columns }) {
+      const object = yield* Database.add(Sheet.make({ name, rows, columns }));
+      yield* CollectionModel.add({ object }).pipe(Effect.catchTag('EntityNotFoundError', () => Effect.void));
+      yield* Database.flush();
+      return { id: Obj.getURI(object) };
+    }),
+  ),
+);
+
+export default handler;