@dxos/plugin-sheet 0.6.13 → 0.6.14-main.1366248

package/package.json

@@ -1,39 +1,33 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.13",
+  "version": "0.6.14-main.1366248",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "sideEffects": true,
+  "imports": {
+    "#hyperformula": {
+      "types": "hyperformula",
+      "default": "./dist/vendor/hyperformula.mjs"
+    }
+  },
   "exports": {
     ".": {
+      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": {
-        "default": "./dist/lib/node/index.cjs"
-      },
-      "types": "./dist/types/src/index.d.ts"
+      "node": "./dist/lib/node-esm/index.mjs"
     },
     "./meta": {
+      "types": "./dist/types/src/meta.d.ts",
       "browser": "./dist/lib/browser/meta.mjs",
-      "node": {
-        "default": "./dist/lib/node/meta.cjs"
-      },
-      "types": "./dist/types/src/meta.d.ts"
-    },
-    "./testing": {
-      "browser": "./dist/lib/browser/testing.mjs",
-      "node": {
-        "default": "./dist/lib/node/testing.cjs"
-      },
-      "types": "./dist/types/src/testing.d.ts"
+      "node": "./dist/lib/node-esm/meta.mjs"
     },
     "./types": {
+      "types": "./dist/types/src/types.d.ts",
       "browser": "./dist/lib/browser/types.mjs",
-      "node": {
-        "default": "./dist/lib/node/types.cjs"
-      },
-      "types": "./dist/types/src/types.d.ts"
+      "node": "./dist/lib/node-esm/types.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -42,9 +36,6 @@
       "meta": [
         "dist/types/src/meta.d.ts"
       ],
-      "testing": [
-        "dist/types/src/testing.d.ts"
-      ],
       "types": [
         "dist/types/src/types.d.ts"
       ]
@@ -55,50 +46,58 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.0",
-    "@codemirror/language": "^6.10.2",
+    "@codemirror/autocomplete": "^6.18.1",
+    "@codemirror/language": "^6.10.3",
     "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.29.1",
+    "@codemirror/view": "^6.34.1",
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/modifiers": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@lezer/common": "^1.2.1",
-    "@lezer/highlight": "^1.2.0",
+    "@effect/schema": "^0.75.1",
+    "@lezer/common": "^1.2.2",
+    "@lezer/highlight": "^1.2.1",
     "@lezer/lezer": "^1.1.2",
     "@lezer/lr": "^1.4.2",
     "@preact/signals-core": "^1.6.0",
     "@radix-ui/react-context": "^1.0.0",
     "@tanstack/react-virtual": "^3.9.0",
     "codemirror-lang-spreadsheet": "^1.3.0",
+    "date-fns": "^3.3.1",
     "hyperformula": "^2.7.1",
     "lodash.defaultsdeep": "^4.6.1",
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.13",
-    "@dxos/async": "0.6.13",
-    "@dxos/client": "0.6.13",
-    "@dxos/context": "0.6.13",
-    "@dxos/crypto": "0.6.13",
-    "@dxos/debug": "0.6.13",
-    "@dxos/echo-schema": "0.6.13",
-    "@dxos/invariant": "0.6.13",
-    "@dxos/keys": "0.6.13",
-    "@dxos/log": "0.6.13",
-    "@dxos/plugin-client": "0.6.13",
-    "@dxos/plugin-graph": "0.6.13",
-    "@dxos/plugin-script": "0.6.13",
-    "@dxos/plugin-space": "0.6.13",
-    "@dxos/plugin-stack": "0.6.13",
-    "@dxos/react-client": "0.6.13",
-    "@dxos/react-ui-attention": "0.6.13",
-    "@dxos/react-ui-editor": "0.6.13",
-    "@dxos/util": "0.6.13"
+    "@dxos/app-framework": "0.6.14-main.1366248",
+    "@dxos/async": "0.6.14-main.1366248",
+    "@dxos/client": "0.6.14-main.1366248",
+    "@dxos/context": "0.6.14-main.1366248",
+    "@dxos/crypto": "0.6.14-main.1366248",
+    "@dxos/debug": "0.6.14-main.1366248",
+    "@dxos/echo-schema": "0.6.14-main.1366248",
+    "@dxos/invariant": "0.6.14-main.1366248",
+    "@dxos/keys": "0.6.14-main.1366248",
+    "@dxos/log": "0.6.14-main.1366248",
+    "@dxos/plugin-attention": "0.6.14-main.1366248",
+    "@dxos/plugin-client": "0.6.14-main.1366248",
+    "@dxos/plugin-graph": "0.6.14-main.1366248",
+    "@dxos/plugin-markdown": "0.6.14-main.1366248",
+    "@dxos/plugin-script": "0.6.14-main.1366248",
+    "@dxos/plugin-space": "0.6.14-main.1366248",
+    "@dxos/react-client": "0.6.14-main.1366248",
+    "@dxos/plugin-stack": "0.6.14-main.1366248",
+    "@dxos/react-hooks": "0.6.14-main.1366248",
+    "@dxos/react-ui-attention": "0.6.14-main.1366248",
+    "@dxos/react-ui-data": "0.6.14-main.1366248",
+    "@dxos/react-ui-editor": "0.6.14-main.1366248",
+    "@dxos/react-ui-grid": "0.6.14-main.1366248",
+    "@dxos/react-ui-list": "0.6.14-main.1366248",
+    "@dxos/schema": "0.6.14-main.1366248",
+    "@dxos/util": "0.6.14-main.1366248"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
-    "@phosphor-icons/react": "^2.1.5",
     "@tldraw/indices": "^2.0.0-alpha.14",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~18.2.0",
@@ -106,20 +105,20 @@
     "@types/react-window": "^1.8.8",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "^5.3.4",
-    "@dxos/echo-generator": "0.6.13",
-    "@dxos/random": "0.6.13",
-    "@dxos/react-ui": "0.6.13",
-    "@dxos/react-ui-theme": "0.6.13",
-    "@dxos/react-ui-types": "0.6.13",
-    "@dxos/storybook-utils": "0.6.13"
+    "vite": "5.4.7",
+    "@dxos/echo-generator": "0.6.14-main.1366248",
+    "@dxos/random": "0.6.14-main.1366248",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248",
+    "@dxos/react-ui": "0.6.14-main.1366248",
+    "@dxos/react-ui-syntax-highlighter": "0.6.14-main.1366248",
+    "@dxos/storybook-utils": "0.6.14-main.1366248",
+    "@dxos/react-ui-types": "0.6.14-main.1366248"
   },
-  "optionalDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@dxos/react-ui-theme": "0.6.13",
-    "@dxos/react-ui": "0.6.13"
+  "peerDependencies": {
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.6.14-main.1366248",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -2,84 +2,72 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconProps, GridNine } from '@phosphor-icons/react';
 import React from 'react';
 
-import {
-  NavigationAction,
-  parseIntentPlugin,
-  resolvePlugin,
-  type PluginDefinition,
-  type LayoutCoordinate,
-} from '@dxos/app-framework';
-import { create } from '@dxos/echo-schema';
+import { NavigationAction, parseIntentPlugin, resolvePlugin, type PluginDefinition } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
 import { parseClientPlugin } from '@dxos/plugin-client';
-import { type ActionGroup, createExtension, isActionGroup } from '@dxos/plugin-graph';
+import { createExtension, isActionGroup, type ActionGroup } from '@dxos/plugin-graph';
 import { FunctionType } from '@dxos/plugin-script/types';
 import { SpaceAction } from '@dxos/plugin-space';
 import { getSpace, isEchoObject } from '@dxos/react-client/echo';
+import { Icon } from '@dxos/react-ui';
 
-import {
-  createComputeGraph,
-  CustomPlugin,
-  CustomPluginTranslations,
-  SheetContainer,
-  type ComputeGraph,
-} from './components';
-// TODO(wittjosiah): Refactor. These are not exported from ./components due to depending on ECHO.
-import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations } from './components/ComputeGraph/edge-function';
-import { ComputeGraphContextProvider } from './components/ComputeGraph/graph-context';
+import { ComputeGraphContextProvider, RangeList, SheetContainer } from './components';
+import { type ComputeGraphRegistry } from './compute-graph';
+import { compareIndexPositions, createSheet } from './defs';
+import { computeGraphFacet } from './extensions';
 import meta, { SHEET_PLUGIN } from './meta';
-import { SheetModel } from './model';
+import { serializer } from './serializer';
 import translations from './translations';
-import { createSheet, SheetAction, type SheetPluginProvides, SheetType } from './types';
+import { SheetAction, SheetType, type SheetPluginProvides } from './types';
 
 export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
-  let remoteFunctionUrl: string | undefined;
-
-  const graphs = create<Record<string, ComputeGraph>>({});
-  const setGraph = (key: string, graph: ComputeGraph) => {
-    graphs[key] = graph;
-  };
+  let computeGraphRegistry: ComputeGraphRegistry | undefined;
 
   return {
     meta,
     ready: async (plugins) => {
       const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-      if (!client) {
-        return;
-      }
-
+      invariant(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 = 'https';
         remoteFunctionUrl = url.toString();
       }
+
+      // Async import removes direct dependency on hyperformula.
+      const { defaultPlugins, ComputeGraphRegistry } = await import('./compute-graph');
+      computeGraphRegistry = new ComputeGraphRegistry({ plugins: defaultPlugins, remoteFunctionUrl });
     },
     provides: {
       context: ({ children }) => {
-        return (
-          <ComputeGraphContextProvider graphs={graphs} setGraph={setGraph}>
-            {children}
-          </ComputeGraphContextProvider>
-        );
+        invariant(computeGraphRegistry);
+        return <ComputeGraphContextProvider registry={computeGraphRegistry}>{children}</ComputeGraphContextProvider>;
       },
       metadata: {
         records: {
           [SheetType.typename]: {
-            label: (object: any) => (object instanceof SheetType ? object.title : undefined),
+            label: (object: any) => (object instanceof SheetType ? object.name : undefined),
             placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
-            icon: (props: IconProps) => <GridNine {...props} />,
-            iconSymbol: 'ph--grid-nine--regular',
+            icon: 'ph--grid-nine--regular',
+            serializer,
           },
         },
       },
       translations,
       echo: {
         // TODO(wittjosiah): Factor out to common package/plugin.
-        //   FunctionType is currently registered here in case script plugin isn't enabled.
+        //  FunctionType is currently registered here in case script plugin isn't enabled.
         schema: [SheetType, FunctionType],
       },
+      space: {
+        onSpaceCreate: {
+          label: ['create sheet label', { ns: SHEET_PLUGIN }],
+          action: SheetAction.CREATE,
+        },
+      },
       graph: {
         builder: (plugins) => {
           const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
@@ -113,8 +101,7 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
                   },
                   properties: {
                     label: ['create sheet label', { ns: SHEET_PLUGIN }],
-                    icon: (props: IconProps) => <GridNine {...props} />,
-                    iconSymbol: 'ph--grid-nine--regular',
+                    icon: 'ph--grid-nine--regular',
                     testId: 'sheetPlugin.createObject',
                   },
                 },
@@ -123,6 +110,16 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
           });
         },
       },
+      markdown: {
+        extensions: ({ document: doc }) => {
+          invariant(computeGraphRegistry);
+          const space = getSpace(doc);
+          if (space) {
+            const computeGraph = computeGraphRegistry.getOrCreateGraph(space);
+            return computeGraphFacet.of(computeGraph);
+          }
+        },
+      },
       stack: {
         creators: [
           {
@@ -130,7 +127,8 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
             testId: 'sheetPlugin.createSection',
             type: ['plugin name', { ns: SHEET_PLUGIN }],
             label: ['create sheet section label', { ns: SHEET_PLUGIN }],
-            icon: (props: any) => <GridNine {...props} />,
+            // TODO(thure): Refactor to use strings
+            icon: (props: any) => <Icon icon='ph--grid-nine--regular' {...props} />,
             intent: {
               plugin: SHEET_PLUGIN,
               action: SheetAction.CREATE,
@@ -138,25 +136,34 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
           },
         ],
       },
+      thread: {
+        predicate: (data) => data instanceof SheetType,
+        createSort: (sheet) => (indexA, indexB) =>
+          !indexA || !indexB ? 0 : compareIndexPositions(sheet, indexA, indexB),
+      },
       surface: {
-        component: ({ data, role = 'never' }) => {
-          // TODO(burdon): Standardize wrapper (with room for toolbar).
-          const space = isEchoObject(data.object) && getSpace(data.object);
-          if (space && data.object instanceof SheetType) {
-            switch (role) {
-              case 'article':
-              case 'section': {
-                return (
-                  <SheetContainer
-                    sheet={data.object}
-                    space={space}
-                    role={role}
-                    coordinate={data.coordinate as LayoutCoordinate}
-                    remoteFunctionUrl={remoteFunctionUrl}
-                  />
-                );
+        component: ({ data, role }) => {
+          const space = isEchoObject(data.object) ? getSpace(data.object) : undefined;
+          if (!space) {
+            return null;
+          }
+
+          switch (role) {
+            case 'article':
+            case 'section':
+              if (data.object instanceof SheetType) {
+                return <SheetContainer space={space} sheet={data.object} role={role} />;
               }
-            }
+
+              return null;
+            case 'complementary--settings':
+              if (data.subject instanceof SheetType) {
+                return {
+                  node: <RangeList sheet={data.subject} />,
+                };
+              }
+
+              return null;
           }
 
           return null;
@@ -166,23 +173,27 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
         resolver: async (intent) => {
           switch (intent.action) {
             case SheetAction.CREATE: {
-              const space = intent.data?.space;
-              const sheet = createSheet();
-              const graph =
-                graphs[space.id] ??
-                createComputeGraph(
-                  [
-                    { plugin: EdgeFunctionPlugin, translations: EdgeFunctionPluginTranslations },
-                    // TODO(wittjosiah): Remove. Needed for current test sheet generated data.
-                    { plugin: CustomPlugin, translations: CustomPluginTranslations },
-                  ],
-                  space,
-                  { remoteFunctionUrl },
-                );
-              const model = new SheetModel(graph, sheet);
-              await model.initialize();
-              await model.destroy();
-              return { data: sheet };
+              return { data: createSheet() };
+            }
+            case SheetAction.INSERT_AXIS: {
+              const { model, axis, index, count } = intent.data as SheetAction.InsertAxis;
+              const _indices = model[axis === 'col' ? 'insertColumns' : 'insertRows'](index, count);
+              return;
+            }
+            case SheetAction.DROP_AXIS: {
+              if (!intent.undo) {
+                const { model, axis, axisIndex } = intent.data as SheetAction.DropAxis;
+                const undoData = model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+                return {
+                  undoable: {
+                    message: translations[0]['en-US'][SHEET_PLUGIN][`${axis} dropped label`],
+                    data: { ...undoData, model },
+                  },
+                };
+              } else {
+                const { model, ...undoData } = intent.data as SheetAction.DropAxisRestore;
+                model[undoData.axis === 'col' ? 'restoreColumn' : 'restoreRow'](undoData);
+              }
             }
           }
         },

package/src/components/ComputeGraph/ComputeGraphContextProvider.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { createContext, type PropsWithChildren, useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+import { type Space } from '@dxos/react-client/echo';
+import { useAsyncState } from '@dxos/react-hooks';
+
+import { type ComputeGraph, type ComputeGraphRegistry } from '../../compute-graph';
+
+export type ComputeGraphContextType = {
+  registry: ComputeGraphRegistry;
+};
+
+/**
+ * The compute graph context manages a ComputeGraph for each space.
+ */
+export const ComputeGraphContext = createContext<ComputeGraphContextType | undefined>(undefined);
+
+export const ComputeGraphContextProvider = ({ registry, children }: PropsWithChildren<ComputeGraphContextType>) => {
+  return <ComputeGraphContext.Provider value={{ registry }}>{children}</ComputeGraphContext.Provider>;
+};
+
+export const useComputeGraph = (space?: Space): ComputeGraph | undefined => {
+  const { registry } = useContext(ComputeGraphContext) ?? raise(new Error('Missing ComputeGraphContext'));
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph = registry.getOrCreateGraph(space);
+      await graph.open();
+      return graph;
+    }
+  }, [space, registry]);
+
+  return graph;
+};

package/src/components/ComputeGraph/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './async-function';
-export * from './custom';
-export * from './graph';
+export * from './ComputeGraphContextProvider';

package/src/components/FunctionEditor/FunctionEditor.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Icon } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { addressToA1Notation, isFormula, rangeToA1Notation } from '../../defs';
+import { useSheetContext } from '../SheetContext';
+
+export const FunctionEditor = () => {
+  const { model, cursor, range } = useSheetContext();
+
+  let value;
+  let formula = false;
+  if (cursor) {
+    value = model.getCellValue(cursor);
+    if (isFormula(value)) {
+      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
+      formula = true;
+    } else if (value != null) {
+      value = String(value);
+    }
+  }
+
+  return (
+    <div
+      className={mx(
+        'flex shrink-0 justify-between items-center px-4 py-1 text-sm border-bs !border-separator attention-surface',
+      )}
+    >
+      <div className='flex gap-4 items-center'>
+        <div className='flex w-16 items-center font-mono'>
+          {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
+        </div>
+        <div className='flex gap-2 items-center'>
+          <Icon icon='ph--function--regular' classNames={['text-greenText', formula ? 'visible' : 'invisible']} />
+          <span className='font-mono'>{value}</span>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/FunctionEditor/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './FunctionEditor';

package/src/components/GridSheet/GridSheet.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { GridSheet } from './GridSheet';
+import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
+import translations from '../../translations';
+import { SheetType } from '../../types';
+import { useComputeGraph } from '../ComputeGraph';
+import { SheetProvider } from '../SheetContext';
+
+export const Basic = () => {
+  const space = useSpace();
+  const graph = useComputeGraph(space);
+  const sheet = useTestSheet(space, graph, { cells: createTestCells() });
+  if (!sheet || !graph) {
+    return null;
+  }
+
+  return (
+    <SheetProvider graph={graph} sheet={sheet}>
+      <GridSheet />
+    </SheetProvider>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-sheet/GridSheet',
+  component: GridSheet,
+  decorators: [
+    withClientProvider({ types: [SheetType], createSpace: true }),
+    withComputeGraphDecorator(),
+    withTheme,
+    withLayout({ fullscreen: true, tooltips: true }),
+  ],
+  parameters: { translations },
+};
+
+export default meta;