@dxos/plugin-sheet 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/extensions/compute.stories.tsx

@@ -11,7 +11,7 @@ import { PublicKey } from '@dxos/keys';
 import { useSpace } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { useTextEditor } from '@dxos/react-ui-editor';
 import {
   createBasicExtensions,
@@ -22,10 +22,10 @@ import {
 } from '@dxos/ui-editor';
 import { isNonNullable } from '@dxos/util';
 
-import { GridSheet, SheetProvider, useComputeGraph } from '../components';
+import { Sheet, useComputeGraph } from '../components';
 import { useSheetModel } from '../model';
 import { useTestSheet, withComputeGraphDecorator } from '../testing';
-import { Sheet } from '../types';
+import { Sheet as SheetType } from '../types';
 
 import { compute, computeGraphFacet } from './compute';
 
@@ -63,7 +63,7 @@ const DefaultStory = ({ text }: EditorProps) => {
     [computeGraph, themeMode],
   );
 
-  return <div className='is-[40rem] overflow-hidden' ref={parentRef} {...focusAttributes} />;
+  return <div className='w-[40rem] overflow-hidden' ref={parentRef} {...focusAttributes} />;
 };
 
 const Grid = () => {
@@ -87,10 +87,10 @@ const Grid = () => {
   }
 
   return (
-    <div className='flex is-[40rem] overflow-hidden'>
-      <SheetProvider graph={graph} sheet={sheet}>
-        <GridSheet />
-      </SheetProvider>
+    <div className='flex w-[40rem] overflow-hidden'>
+      <Sheet.Root graph={graph} sheet={sheet} attendableId='test'>
+        <Sheet.Content />
+      </Sheet.Root>
     </div>
   );
 };
@@ -105,11 +105,12 @@ const GraphStory = (props: EditorProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-sheet/extensions',
+  title: 'plugins/plugin-sheet/extensions/compute',
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withClientProvider({
-      types: [Sheet.Sheet],
+      types: [SheetType.Sheet],
       createIdentity: true,
       createSpace: true,
     }),

package/src/extensions/editor/sheet-extension.ts

@@ -33,30 +33,30 @@ const highlightStyles = HighlightStyle.define([
   // Function.
   {
     tag: tags.name,
-    class: 'text-accentText',
+    class: 'text-accent-text',
   },
   // Range.
   {
     tag: tags.tagName,
-    class: 'text-pinkText',
+    class: 'text-pink-text',
   },
   // Values.
   {
     tag: tags.number,
-    class: 'text-tealText',
+    class: 'text-teal-text',
   },
   {
     tag: tags.bool,
-    class: 'text-tealText',
+    class: 'text-teal-text',
   },
   {
     tag: tags.string,
-    class: 'text-tealText',
+    class: 'text-teal-text',
   },
   // Error.
   {
     tag: tags.invalid,
-    class: 'text-unAccent',
+    class: 'text-un-accent',
   },
 ]);
 
@@ -97,7 +97,7 @@ export const sheetExtension = ({ debug, functions = [] }: SheetExtensionOptions)
 
         const title = document.createElement('h2');
         title.innerText = name;
-        title.className = 'text-lg font-mono text-accentText';
+        title.className = 'text-lg font-mono text-accent-text';
         root.appendChild(title);
 
         if (description) {
@@ -110,7 +110,7 @@ export const sheetExtension = ({ debug, functions = [] }: SheetExtensionOptions)
         if (syntax) {
           const detail = document.createElement('pre');
           detail.innerText = syntax;
-          detail.className = 'whitespace-pre-wrap text-greenText';
+          detail.className = 'whitespace-pre-wrap text-green-text';
           root.appendChild(detail);
         }
 
@@ -169,8 +169,8 @@ export const sheetExtension = ({ debug, functions = [] }: SheetExtensionOptions)
       icons: false,
       tooltipClass: () =>
         mx(
-          '!-left-[1px] !top-[33px] !-m-0 border !border-bs-0 [&>ul]:!min-w-[198px]',
-          '[&>ul>li[aria-selected]]:!bg-accentSurface',
+          '!-left-[1px] !top-[33px] !-m-0 border border-h-0! [&>ul]:!min-w-[198px]',
+          '[&>ul>li[aria-selected]]:!bg-accent-surface',
           'border-separator',
         ),
     }),

package/src/integrations/thread-ranges.ts

@@ -5,13 +5,13 @@
 import * as Effect from 'effect/Effect';
 import { useCallback, useEffect, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker, useOperationResolver } from '@dxos/app-framework/react';
+import { useOperationInvoker, useOperationResolver } from '@dxos/app-framework/ui';
+import { COMPANION_PREFIX, LayoutOperation } from '@dxos/app-toolkit';
 import { debounce } from '@dxos/async';
 import { type CellAddress, type CompleteCellRange, inRange } from '@dxos/compute';
 import { Obj, Relation } from '@dxos/echo';
 import { OperationResolver } from '@dxos/operation';
-import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from '@dxos/plugin-deck/types';
+import { DeckOperation } from '@dxos/plugin-deck/types';
 import { ThreadOperation } from '@dxos/plugin-thread/types';
 import { Filter, Query, useQuery } from '@dxos/react-client/echo';
 import { type DxGridElement, type GridContentProps } from '@dxos/react-ui-grid';
@@ -38,13 +38,12 @@ export const parseThreadAnchorAsCellRange = (cursor: string): CompleteCellRange
 };
 
 export const useUpdateFocusedCellOnThreadSelection = (grid: DxGridElement | null) => {
-  const { model, setActiveRefs } = useSheetContext();
-  const sheetId = Obj.getDXN(model.sheet).toString();
+  const { attendableId: sheetId, model, setActiveRefs } = useSheetContext();
 
   const scrollIntoViewHandler = useMemo(
     () =>
       OperationResolver.make({
-        operation: Common.LayoutOperation.ScrollIntoView,
+        operation: LayoutOperation.ScrollIntoView,
         position: 'hoist',
         filter: (input) => input.subject === sheetId && !!input.cursor,
         handler: (input) =>
@@ -88,12 +87,10 @@ export const useSelectThreadOnCellFocus = () => {
       });
 
       if (closestThread) {
-        const primary = Obj.getDXN(model.sheet).toString();
         void (async () => {
           await invokePromise(ThreadOperation.Select, { current: Relation.getDXN(closestThread).toString() });
           await invokePromise(DeckOperation.ChangeCompanion, {
-            primary,
-            companion: `${primary}${ATTENDABLE_PATH_SEPARATOR}comments`,
+            companion: `${COMPANION_PREFIX}comments`,
           });
         })();
       }

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/sheet',
+  id: 'org.dxos.plugin.sheet',
   name: 'Sheet',
   description: trim`
     Full-featured spreadsheet application with over 400 built-in formulas for calculations and data analysis.

package/src/model/sheet-model.ts

@@ -122,8 +122,8 @@ export class SheetModel extends Resource {
    */
   protected override async _open(): Promise<void> {
     log('initialize', { id: this.id });
-    Obj.change(this._sheet, (s) => {
-      initialize(s);
+    Obj.change(this._sheet, (obj) => {
+      initialize(obj);
     });
 
     this._graph.update.on((event) => {
@@ -184,8 +184,8 @@ export class SheetModel extends Resource {
 
   insertRows(i: number, n = 1): string[] {
     let idx: string[] = [];
-    Obj.change(this._sheet, (s) => {
-      idx = insertIndices(s.rows, i, n, MAX_ROWS);
+    Obj.change(this._sheet, (obj) => {
+      idx = insertIndices(obj.rows, i, n, MAX_ROWS);
     });
     this.reset();
     return idx;
@@ -193,8 +193,8 @@ export class SheetModel extends Resource {
 
   insertColumns(i: number, n = 1): string[] {
     let idx: string[] = [];
-    Obj.change(this._sheet, (s) => {
-      idx = insertIndices(s.columns, i, n, MAX_COLS);
+    Obj.change(this._sheet, (obj) => {
+      idx = insertIndices(obj.columns, i, n, MAX_COLS);
     });
     this.reset();
     return idx;
@@ -208,9 +208,9 @@ export class SheetModel extends Resource {
     const values = this.getCellValues(range).flat();
     const index = this._sheet.rows.indexOf(rowIndex);
     this.clear(range);
-    Obj.change(this._sheet, (s) => {
-      s.rows.splice(index, 1);
-      delete s.rowMeta[rowIndex];
+    Obj.change(this._sheet, (obj) => {
+      obj.rows.splice(index, 1);
+      delete obj.rowMeta[rowIndex];
     });
     this.reset();
     return { axis: 'row', index, axisIndex: rowIndex, axisMeta: this._sheet.rowMeta[rowIndex], values };
@@ -224,39 +224,41 @@ export class SheetModel extends Resource {
     const values = this.getCellValues(range).flat();
     const index = this._sheet.columns.indexOf(colIndex);
     this.clear(range);
-    Obj.change(this._sheet, (s) => {
-      s.columns.splice(index, 1);
-      delete s.columnMeta[colIndex];
+    Obj.change(this._sheet, (obj) => {
+      obj.columns.splice(index, 1);
+      delete obj.columnMeta[colIndex];
     });
     this.reset();
     return { axis: 'col', index, axisIndex: colIndex, axisMeta: this._sheet.rowMeta[colIndex], values };
   }
 
   restoreRow({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis): void {
-    Obj.change(this._sheet, (s) => {
-      s.rows.splice(index, 0, axisIndex);
+    Obj.change(this._sheet, (obj) => {
+      obj.rows.splice(index, 0, axisIndex);
       values.forEach((value, col) => {
         if (value) {
-          s.cells[`${s.columns[col]}@${axisIndex}`] = { value };
+          obj.cells[`${obj.columns[col]}@${axisIndex}`] = { value };
         }
       });
+
       if (axisMeta) {
-        s.rowMeta[axisIndex] = axisMeta;
+        obj.rowMeta[axisIndex] = axisMeta;
       }
     });
     this.reset();
   }
 
   restoreColumn({ index, axisIndex, axisMeta, values }: SheetAction.RestoreAxis): void {
-    Obj.change(this._sheet, (s) => {
-      s.columns.splice(index, 0, axisIndex);
+    Obj.change(this._sheet, (obj) => {
+      obj.columns.splice(index, 0, axisIndex);
       values.forEach((value, row) => {
         if (value) {
-          s.cells[`${axisIndex}@${s.rows[row]}`] = { value };
+          obj.cells[`${axisIndex}@${obj.rows[row]}`] = { value };
         }
       });
+
       if (axisMeta) {
-        s.columnMeta[axisIndex] = axisMeta;
+        obj.columnMeta[axisIndex] = axisMeta;
       }
     });
     this.reset();
@@ -275,10 +277,10 @@ export class SheetModel extends Resource {
     const topLeft = getTopLeft(range);
     const values = this._iterRange(range, () => null);
     this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
-    Obj.change(this._sheet, (s) => {
+    Obj.change(this._sheet, (obj) => {
       this._iterRange(range, (cell) => {
         const idx = addressToIndex(this._sheet, cell);
-        delete s.cells[idx];
+        delete obj.cells[idx];
       });
     });
   }
@@ -286,10 +288,10 @@ export class SheetModel extends Resource {
   cut(range: CellRange): void {
     invariant(this._node);
     this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
-    Obj.change(this._sheet, (s) => {
+    Obj.change(this._sheet, (obj) => {
       this._iterRange(range, (cell) => {
         const idx = addressToIndex(this._sheet, cell);
-        delete s.cells[idx];
+        delete obj.cells[idx];
       });
     });
   }
@@ -303,12 +305,12 @@ export class SheetModel extends Resource {
     invariant(this._node);
     if (!this._node.graph.hf.isClipboardEmpty()) {
       const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
-      Obj.change(this._sheet, (s) => {
+      Obj.change(this._sheet, (obj) => {
         for (const change of changes) {
           if (change instanceof ExportedCellChange) {
             const { address, newValue } = change;
             const idx = addressToIndex(this._sheet, { row: address.row, col: address.col });
-            s.cells[idx] = { value: newValue };
+            obj.cells[idx] = { value: newValue };
           }
         }
       });
@@ -402,14 +404,14 @@ export class SheetModel extends Resource {
     // Reallocate if > current bounds.
     let refresh = false;
     if (cell.row >= this._sheet.rows.length) {
-      Obj.change(this._sheet, (s) => {
-        insertIndices(s.rows, cell.row, 1, MAX_ROWS);
+      Obj.change(this._sheet, (obj) => {
+        insertIndices(obj.rows, cell.row, 1, MAX_ROWS);
       });
       refresh = true;
     }
     if (cell.col >= this._sheet.columns.length) {
-      Obj.change(this._sheet, (s) => {
-        insertIndices(s.columns, cell.col, 1, MAX_COLS);
+      Obj.change(this._sheet, (obj) => {
+        insertIndices(obj.columns, cell.col, 1, MAX_COLS);
       });
       refresh = true;
     }
@@ -427,16 +429,16 @@ export class SheetModel extends Resource {
     // Insert into sheet.
     const idx = addressToIndex(this._sheet, cell);
     if (value === undefined || value === null) {
-      Obj.change(this._sheet, (s) => {
-        delete s.cells[idx];
+      Obj.change(this._sheet, (obj) => {
+        delete obj.cells[idx];
       });
     } else {
       if (isFormula(value)) {
         value = this._graph.mapFunctionBindingToId(mapFormulaRefsToIndices(this._sheet, value));
       }
 
-      Obj.change(this._sheet, (s) => {
-        s.cells[idx] = { value };
+      Obj.change(this._sheet, (obj) => {
+        obj.cells[idx] = { value };
       });
     }
   }

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run storybook-react:serve-e2e -- --port=9005',
+    command: 'pnpm storybook dev --ci --quiet --port=9005 --config-dir=.storybook',
     port: 9005,
     reuseExistingServer: false,
   },

package/src/playwright/sheet.spec.ts

@@ -15,7 +15,7 @@ test.describe('plugin-sheet', () => {
 
   test.beforeEach(async ({ browser }) => {
     const setup = await setupPage(browser, {
-      url: storybookUrl('plugins-plugin-sheet-sheetcontainer--spec', 9005),
+      url: storybookUrl('plugins-plugin-sheet-containers-sheetcontainer--spec', 9005),
       viewportSize: { width: 1280, height: 720 },
     });
     page = setup.page;

package/src/translations.ts

@@ -16,6 +16,7 @@ export const translations = [
         'typename label_one': 'Sheet',
         'typename label_other': 'Sheets',
         'object name placeholder': 'New sheet',
+        'add object label': 'Add sheet',
         'rename object label': 'Rename sheet',
         'delete object label': 'Delete sheet',
         'object deleted label': 'Sheet deleted',

package/src/types/Sheet.ts

@@ -2,6 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+// @import-as-namespace
+
 import * as Schema from 'effect/Schema';
 
 import { addressFromA1Notation, isFormula } from '@dxos/compute';
@@ -62,7 +64,7 @@ export const Sheet = Schema.Struct({
   ranges: Schema.Array(Range).pipe(FormInputAnnotation.set(false)),
 }).pipe(
   Type.object({
-    typename: 'dxos.org/type/Sheet',
+    typename: 'org.dxos.type.sheet',
     version: '0.1.0',
   }),
 );

package/src/types/capabilities.ts

@@ -9,6 +9,6 @@ import { meta } from '../meta';
 
 export namespace SheetCapabilities {
   export const ComputeGraphRegistry = Capability.make<ComputeGraphRegistry>(
-    `${meta.id}/capability/compute-graph-registry`,
+    `${meta.id}.capability.compute-graph-registry`,
   );
 }

package/src/types/sheet-range-types.ts

@@ -34,14 +34,14 @@ export const cellClassNameForRange = ({ key, value }: Sheet.Sheet['ranges'][numb
       }
 
     case commentKey:
-      return 'bg-gridComment';
+      return 'bg-grid-comment';
 
     case styleKey:
       switch (value) {
         case 'highlight':
-          return '!bg-gridHighlight';
+          return 'bg-grid-highlight!';
         case 'softwrap':
-          return '!whitespace-normal';
+          return 'whitespace-normal!';
         default:
           return undefined;
       }

package/src/types/types.ts

@@ -4,10 +4,7 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Capability } from '@dxos/app-framework';
 import { Operation } from '@dxos/operation';
-import { SpaceSchema } from '@dxos/react-client/echo';
-import { Collection } from '@dxos/schema';
 
 import { meta } from '../meta';
 
@@ -28,27 +25,14 @@ export namespace SheetAction {
   export type RestoreAxis = Schema.Schema.Type<typeof RestoreAxis>;
 }
 
-const SHEET_OPERATION = `${meta.id}/operation`;
+const SHEET_OPERATION = `${meta.id}.operation`;
 
 // TODO(wittjosiah): Factor out. This is `DxGridAxis` from `@dxos/react-ui-grid`.
 const Axis = Schema.Union(Schema.Literal('row'), Schema.Literal('col'));
 
 export namespace SheetOperation {
-  export const OnCreateSpace = Operation.make({
-    meta: { key: `${SHEET_OPERATION}/on-create-space`, name: 'On Create Space' },
-    services: [Capability.Service],
-    schema: {
-      input: Schema.Struct({
-        space: SpaceSchema,
-        rootCollection: Collection.Collection,
-        isDefault: Schema.optional(Schema.Boolean),
-      }),
-      output: Schema.Void,
-    },
-  });
-
   export const InsertAxis = Operation.make({
-    meta: { key: `${SHEET_OPERATION}/axis-insert`, name: 'Insert Axis' },
+    meta: { key: `${SHEET_OPERATION}.axis-insert`, name: 'Insert Axis' },
     schema: {
       input: Schema.Struct({
         model: Schema.Any,
@@ -71,7 +55,7 @@ export namespace SheetOperation {
   export type DropAxisOutput = Schema.Schema.Type<typeof DropAxisOutput>;
 
   export const DropAxis = Operation.make({
-    meta: { key: `${SHEET_OPERATION}/axis-drop`, name: 'Drop Axis' },
+    meta: { key: `${SHEET_OPERATION}.axis-drop`, name: 'Drop Axis' },
     schema: {
       input: Schema.Struct({
         model: Schema.Any,
@@ -86,7 +70,7 @@ export namespace SheetOperation {
    * Restore a dropped axis (inverse of DropAxis).
    */
   export const RestoreAxis = Operation.make({
-    meta: { key: `${SHEET_OPERATION}/restore-axis`, name: 'Restore Axis' },
+    meta: { key: `${SHEET_OPERATION}.restore-axis`, name: 'Restore Axis' },
     schema: {
       input: Schema.Struct({
         model: Schema.Any.annotations({ description: 'The sheet model.' }),