@dxos/plugin-sheet 0.6.10 → 0.6.11-staging.e6894a4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.10",
+  "version": "0.6.11-staging.e6894a4",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -21,6 +21,13 @@
       },
       "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"
+    },
     "./types": {
       "browser": "./dist/lib/browser/types.mjs",
       "node": {
@@ -35,6 +42,9 @@
       "meta": [
         "dist/types/src/meta.d.ts"
       ],
+      "testing": [
+        "dist/types/src/testing.d.ts"
+      ],
       "types": [
         "dist/types/src/types.d.ts"
       ]
@@ -66,25 +76,25 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.10",
-    "@dxos/client": "0.6.10",
-    "@dxos/async": "0.6.10",
-    "@dxos/context": "0.6.10",
-    "@dxos/crypto": "0.6.10",
-    "@dxos/echo-schema": "0.6.10",
-    "@dxos/keys": "0.6.10",
-    "@dxos/debug": "0.6.10",
-    "@dxos/invariant": "0.6.10",
-    "@dxos/log": "0.6.10",
-    "@dxos/plugin-client": "0.6.10",
-    "@dxos/plugin-script": "0.6.10",
-    "@dxos/plugin-space": "0.6.10",
-    "@dxos/plugin-graph": "0.6.10",
-    "@dxos/plugin-stack": "0.6.10",
-    "@dxos/react-client": "0.6.10",
-    "@dxos/react-ui-attention": "0.6.10",
-    "@dxos/react-ui-editor": "0.6.10",
-    "@dxos/util": "0.6.10"
+    "@dxos/async": "0.6.11-staging.e6894a4",
+    "@dxos/client": "0.6.11-staging.e6894a4",
+    "@dxos/context": "0.6.11-staging.e6894a4",
+    "@dxos/crypto": "0.6.11-staging.e6894a4",
+    "@dxos/app-framework": "0.6.11-staging.e6894a4",
+    "@dxos/debug": "0.6.11-staging.e6894a4",
+    "@dxos/echo-schema": "0.6.11-staging.e6894a4",
+    "@dxos/keys": "0.6.11-staging.e6894a4",
+    "@dxos/log": "0.6.11-staging.e6894a4",
+    "@dxos/invariant": "0.6.11-staging.e6894a4",
+    "@dxos/plugin-client": "0.6.11-staging.e6894a4",
+    "@dxos/plugin-graph": "0.6.11-staging.e6894a4",
+    "@dxos/plugin-script": "0.6.11-staging.e6894a4",
+    "@dxos/plugin-space": "0.6.11-staging.e6894a4",
+    "@dxos/react-client": "0.6.11-staging.e6894a4",
+    "@dxos/react-ui-attention": "0.6.11-staging.e6894a4",
+    "@dxos/plugin-stack": "0.6.11-staging.e6894a4",
+    "@dxos/util": "0.6.11-staging.e6894a4",
+    "@dxos/react-ui-editor": "0.6.11-staging.e6894a4"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -97,19 +107,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "^5.3.4",
-    "@dxos/echo-generator": "0.6.10",
-    "@dxos/random": "0.6.10",
-    "@dxos/react-ui-theme": "0.6.10",
-    "@dxos/react-ui-types": "0.6.10",
-    "@dxos/react-ui": "0.6.10",
-    "@dxos/storybook-utils": "0.6.10"
+    "@dxos/echo-generator": "0.6.11-staging.e6894a4",
+    "@dxos/random": "0.6.11-staging.e6894a4",
+    "@dxos/react-ui": "0.6.11-staging.e6894a4",
+    "@dxos/storybook-utils": "0.6.11-staging.e6894a4",
+    "@dxos/react-ui-theme": "0.6.11-staging.e6894a4",
+    "@dxos/react-ui-types": "0.6.11-staging.e6894a4"
   },
   "optionalDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@dxos/react-ui": "0.6.10",
-    "@dxos/react-ui-theme": "0.6.10"
+    "@dxos/react-ui": "0.6.11-staging.e6894a4",
+    "@dxos/react-ui-theme": "0.6.11-staging.e6894a4"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -19,7 +19,13 @@ import { FunctionType } from '@dxos/plugin-script/types';
 import { SpaceAction } from '@dxos/plugin-space';
 import { getSpace, isEchoObject } from '@dxos/react-client/echo';
 
-import { createComputeGraph, SheetContainer, type ComputeGraph } from './components';
+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';
@@ -61,6 +67,7 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
       metadata: {
         records: {
           [SheetType.typename]: {
+            label: (object: any) => (object instanceof SheetType ? object.title : undefined),
             placeholder: ['sheet title placeholder', { ns: SHEET_PLUGIN }],
             icon: (props: IconProps) => <GridNine {...props} />,
             iconSymbol: 'ph--grid-nine--regular',
@@ -120,11 +127,14 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
         creators: [
           {
             id: 'create-stack-section-sheet',
-            testId: 'sheetPlugin.createSectionSpaceSheet',
+            testId: 'sheetPlugin.createSection',
             type: ['plugin name', { ns: SHEET_PLUGIN }],
             label: ['create sheet section label', { ns: SHEET_PLUGIN }],
             icon: (props: any) => <GridNine {...props} />,
-            intent: { plugin: SHEET_PLUGIN, action: SheetAction.CREATE },
+            intent: {
+              plugin: SHEET_PLUGIN,
+              action: SheetAction.CREATE,
+            },
           },
         ],
       },
@@ -155,7 +165,11 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
               const graph =
                 graphs[space.id] ??
                 createComputeGraph(
-                  [{ plugin: EdgeFunctionPlugin, translations: EdgeFunctionPluginTranslations }],
+                  [
+                    { plugin: EdgeFunctionPlugin, translations: EdgeFunctionPluginTranslations },
+                    // TODO(wittjosiah): Remove. Needed for current test sheet generated data.
+                    { plugin: CustomPlugin, translations: CustomPluginTranslations },
+                  ],
                   space,
                   { remoteFunctionUrl },
                 );

package/src/components/CellEditor/extension.ts

@@ -32,30 +32,30 @@ const highlightStyles = HighlightStyle.define([
   // Function.
   {
     tag: tags.name,
-    class: 'text-primary-500',
+    class: 'text-accentText',
   },
   // Range.
   {
     tag: tags.tagName,
-    class: 'text-pink-500',
+    class: 'text-pinkText',
   },
   // Values.
   {
     tag: tags.number,
-    class: 'text-teal-500',
+    class: 'text-tealText',
   },
   {
     tag: tags.bool,
-    class: 'text-teal-500',
+    class: 'text-tealText',
   },
   {
     tag: tags.string,
-    class: 'text-teal-500',
+    class: 'text-tealText',
   },
   // Error.
   {
     tag: tags.invalid,
-    class: 'text-neutral-500',
+    class: 'text-unAccent',
   },
 ]);
 
@@ -92,7 +92,7 @@ export const sheetExtension = ({ functions = [] }: SheetExtensionOptions): Exten
 
         const title = document.createElement('h2');
         title.innerText = name;
-        title.className = 'text-lg font-mono text-primary-500';
+        title.className = 'text-lg font-mono text-accentText';
         root.appendChild(title);
 
         if (description) {
@@ -105,7 +105,7 @@ export const sheetExtension = ({ functions = [] }: SheetExtensionOptions): Exten
         if (syntax) {
           const detail = document.createElement('pre');
           detail.innerText = syntax;
-          detail.className = 'whitespace-pre-wrap text-green-500';
+          detail.className = 'whitespace-pre-wrap text-greenText';
           root.appendChild(detail);
         }
 
@@ -168,8 +168,8 @@ export const sheetExtension = ({ functions = [] }: SheetExtensionOptions): Exten
           // TODO(burdon): Factor out fragments.
           // TODO(burdon): Size to make width same as column.
           '!-left-[1px] !top-[33px] !-m-0 border !border-t-0 [&>ul]:!min-w-[198px]',
-          '[&>ul>li[aria-selected]]:!bg-primary-700',
-          'border-neutral-200 dark:border-neutral-700',
+          '[&>ul>li[aria-selected]]:!bg-accentSurface',
+          'border-separator',
         ),
     }),
     keymap.of([
@@ -242,6 +242,12 @@ export const rangeExtension = (onInit: (notifier: CellRangeNotifier) => void): E
                 break;
               }
 
+              case 'CloseParen': {
+                // Mark but keep looking.
+                activeRange = { from, to: from };
+                break;
+              }
+
               case 'RangeToken':
               case 'CellToken':
                 activeRange = { from, to };

package/src/components/ComputeGraph/edge-function.ts

@@ -8,6 +8,7 @@ import { type InterpreterState } from 'hyperformula/typings/interpreter/Interpre
 import { type ProcedureAst } from 'hyperformula/typings/parser';
 
 import { Filter, getMeta } from '@dxos/client/echo';
+import { log } from '@dxos/log';
 import { getUserFunctionUrlInMetadata } from '@dxos/plugin-script/edge';
 import { FunctionType } from '@dxos/plugin-script/types';
 import { nonNullable } from '@dxos/util';
@@ -35,15 +36,18 @@ export class EdgeFunctionPlugin extends FunctionPluginAsync {
           objects: [fn],
         } = await space.db.query(Filter.schema(FunctionType, { binding })).run();
         if (!fn) {
+          log.info('Function not found', { binding });
           return new CellError(ErrorType.REF, 'Function not found');
         }
 
         if (subscribe) {
           const unsubscribe = effect(() => {
+            log.info('function changed', { fn });
             const _ = fn?.version;
 
-            // If the function changes, force a recalculation.
-            this.runAsyncFunction(ast, state, handler(false), { ttl: 0 });
+            // TODO(wittjosiah): `ttl` should be 0 to force a recalculation when a new version is deployed.
+            //  This needs a ttl to prevent a binding change from causing the function not to be found.
+            this.runAsyncFunction(ast, state, handler(false), { ttl: EDGE_FUNCTION_TTL });
           });
 
           this.context.createSubscription(ast.procedureName, unsubscribe);

package/src/components/ComputeGraph/graph-context.tsx

@@ -7,6 +7,7 @@ import React, { createContext, type PropsWithChildren, useContext, useEffect } f
 import { type Space } from '@dxos/react-client/echo';
 
 import { type FunctionContextOptions } from './async-function';
+import { CustomPlugin, CustomPluginTranslations } from './custom';
 import { EdgeFunctionPlugin, EdgeFunctionPluginTranslations } from './edge-function';
 import { createComputeGraph, type ComputeGraph } from './graph';
 
@@ -29,7 +30,15 @@ export const useComputeGraph = (space: Space, options?: Partial<FunctionContextO
   const { graphs, setGraph } = useContext(ComputeGraphContext);
   const graph =
     graphs[space.id] ??
-    createComputeGraph([{ plugin: EdgeFunctionPlugin, translations: EdgeFunctionPluginTranslations }], space, options);
+    createComputeGraph(
+      [
+        { plugin: EdgeFunctionPlugin, translations: EdgeFunctionPluginTranslations },
+        // TODO(wittjosiah): Remove. Needed for current test sheet generated data.
+        { plugin: CustomPlugin, translations: CustomPluginTranslations },
+      ],
+      space,
+      options,
+    );
 
   useEffect(() => {
     if (!graphs[space.id]) {

package/src/components/Sheet/Sheet.stories.tsx

@@ -18,8 +18,8 @@ import { withTheme, withFullscreen } from '@dxos/storybook-utils';
 import { Sheet } from './Sheet';
 import { type SizeMap } from './grid';
 import { useSheetContext } from './sheet-context';
-import { SheetModel } from '../../model';
-import { ValueTypeEnum, type CellValue, createSheet, SheetType } from '../../types';
+import { createTestSheet, testSheetName } from '../../testing';
+import { ValueTypeEnum, SheetType } from '../../types';
 import { type ComputeGraph, createComputeGraph } from '../ComputeGraph';
 // TODO(wittjosiah): Refactor. This is not exported from ./components due to depending on ECHO.
 import { ComputeGraphContext, ComputeGraphContextProvider, useComputeGraph } from '../ComputeGraph/graph-context';
@@ -99,8 +99,6 @@ const SheetWithToolbar = ({ debug, space }: { debug?: boolean; space: Space }) =
   );
 };
 
-const testSheetName = 'test';
-
 const withGraphDecorator: Decorator = (Story) => {
   const [graphs, setGraphs] = useState<Record<string, ComputeGraph>>({});
 
@@ -263,34 +261,6 @@ const Cell = ({ className, label }: { className?: string; label: string }) => (
   <div className={mx('flex items-center justify-center border', className)}>{label}</div>
 );
 
-const createCells = (): Record<string, CellValue> => ({
-  B1: { value: 'Qty' },
-  B3: { value: 1 },
-  B4: { value: 2 },
-  B5: { value: 3 },
-  B7: { value: 'Total' },
-
-  C1: { value: 'Price' },
-  C3: { value: 2_000 },
-  C4: { value: 2_500 },
-  C5: { value: 3_000 },
-  C7: { value: '=SUMPRODUCT(B2:B6, C2:C6)' },
-  // C8: { value: '=C7*CRYPTO(D7)' },
-  C8: { value: '=C7*TEST()' },
-
-  D7: { value: 'USD' },
-  D8: { value: 'BTC' },
-
-  E3: { value: '=TODAY()' },
-  E4: { value: '=NOW()' },
-
-  F1: { value: `=${testSheetName}!A1` }, // Ref test sheet.
-  F3: { value: true },
-  F4: { value: false },
-  F5: { value: '8%' },
-  F6: { value: '$10000' },
-});
-
 const useTestSheet = () => {
   const { graphs, setGraph } = useContext(ComputeGraphContext);
   const [sheet, setSheet] = useState<EchoReactiveObject<SheetType>>();
@@ -307,13 +277,7 @@ const useTestSheet = () => {
         setGraph(space.id, graph);
       }
 
-      const sheet = createSheet();
-      const model = new SheetModel(graph, sheet);
-      await model.initialize();
-      model.setValues(createCells());
-      model.sheet.columnMeta[model.sheet.columns[0]] = { size: 100 };
-      await model.destroy();
-
+      const sheet = await createTestSheet({ graph });
       space.db.add(sheet);
       setSheet(sheet);
     });

package/src/components/Sheet/Sheet.tsx

@@ -114,11 +114,11 @@ import {
 
 // TODO(burdon): Factor out fragments.
 const fragments = {
-  axis: 'bg-neutral-50 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200 text-xs select-none',
-  axisSelected: 'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white',
-  cell: 'dark:bg-neutral-850',
-  cellSelected: 'bg-neutral-50 dark:bg-neutral-900 text-black dark:text-white border !border-primary-500',
-  border: 'border-neutral-200 dark:border-neutral-700',
+  axis: 'bg-axisSurface text-axisText text-xs select-none',
+  axisSelected: 'bg-attention text-baseText',
+  cell: 'bg-gridCell',
+  cellSelected: 'bg-gridCellSelected text-baseText border !border-accentSurface',
+  border: 'border-gridLine',
 };
 
 //
@@ -345,7 +345,7 @@ const GridCorner = (props: { className?: string } & Pick<DOMAttributes<HTMLDivEl
 
 const MovingOverlay = ({ label }: { label: string }) => {
   return (
-    <div className='flex w-full h-full justify-center items-center text-sm p-1 bg-primary-500/50 cursor-pointer'>
+    <div className='flex w-full h-full justify-center items-center text-sm p-1 bg-gridOverlay cursor-pointer'>
       {label}
     </div>
   );
@@ -532,11 +532,11 @@ const GridRowCell = ({ idx, index, label, size, resize, selected, onSelect, onRe
 
         {/* Drop indicator. */}
         {over?.id === idx && !isDragging && (
-          <div className='z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-primary-500' />
+          <div className='z-20 absolute top-0 w-full min-h-[4px] border-b-4 border-accentSurface' />
         )}
 
         {/* Resize indicator. */}
-        {resizing && <div className='z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-primary-500' />}
+        {resizing && <div className='z-20 absolute bottom-0 w-full min-h-[4px] border-b-4 border-accentSurface' />}
       </div>
     </Resizable>
   );
@@ -696,11 +696,11 @@ const GridColumnCell = ({ idx, index, label, size, resize, selected, onSelect, o
 
         {/* Drop indicator. */}
         {over?.id === idx && !isDragging && (
-          <div className='z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-primary-500' />
+          <div className='z-20 absolute left-0 h-full min-w-[4px] border-l-4 border-accentSurface' />
         )}
 
         {/* Resize indicator. */}
-        {resizing && <div className='z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-primary-500' />}
+        {resizing && <div className='z-20 absolute right-0 h-full min-h-[4px] border-l-4 border-accentSurface' />}
       </div>
     </Resizable>
   );
@@ -991,7 +991,7 @@ const SelectionOverlay = ({ root }: { root: HTMLDivElement }) => {
     <div
       role='none'
       style={bounds}
-      className='z-10 absolute pointer-events-none bg-primary-500/20 border border-primary-500/50'
+      className='z-10 absolute pointer-events-none bg-gridSelectionOverlay border border-gridOverlay'
     />
   );
 };
@@ -1099,7 +1099,7 @@ const SheetStatusBar = () => {
           {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}
         </div>
         <div className='flex gap-2 items-center'>
-          <FunctionIcon className={mx('text-green-500', isFormula ? 'visible' : 'invisible')} />
+          <FunctionIcon className={mx('text-greenText', isFormula ? 'visible' : 'invisible')} />
           <span className='font-mono'>{value}</span>
         </div>
       </div>

package/src/components/Sheet/formatting.ts

@@ -51,7 +51,7 @@ export class FormattingModel {
       case ValueTypeEnum.Boolean: {
         return {
           value: (value as boolean).toLocaleString().toUpperCase(),
-          classNames: [...classNames, value ? '!text-green-500' : '!text-orange-500'],
+          classNames: [...classNames, value ? '!text-greenText' : '!text-orangeText'],
         };
       }
 

package/src/components/SheetContainer.tsx

@@ -14,6 +14,7 @@ const SheetContainer = ({
   space,
   role,
   coordinate = { part: 'main', entryId: '' },
+  remoteFunctionUrl,
 }: SheetRootProps & { role?: string; coordinate?: LayoutCoordinate }) => {
   return (
     <div
@@ -25,7 +26,7 @@ const SheetContainer = ({
         coordinate.part !== 'solo' && 'border-is border-separator',
       )}
     >
-      <Sheet.Root sheet={sheet} space={space}>
+      <Sheet.Root sheet={sheet} space={space} remoteFunctionUrl={remoteFunctionUrl}>
         <Sheet.Main />
       </Sheet.Root>
     </div>

package/src/testing.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type ComputeGraph, createComputeGraph } from './components';
+import { SheetModel } from './model';
+import { createSheet, type CellValue } from './types';
+
+export const testSheetName = 'test';
+
+export const createCells = (): Record<string, CellValue> => ({
+  B1: { value: 'Qty' },
+  B3: { value: 1 },
+  B4: { value: 2 },
+  B5: { value: 3 },
+  B7: { value: 'Total' },
+
+  C1: { value: 'Price' },
+  C3: { value: 2_000 },
+  C4: { value: 2_500 },
+  C5: { value: 3_000 },
+  C7: { value: '=SUMPRODUCT(B2:B6, C2:C6)' },
+  // C8: { value: '=C7*CRYPTO(D7)' },
+  C8: { value: '=C7*TEST()' },
+
+  D7: { value: 'USD' },
+  D8: { value: 'BTC' },
+
+  E3: { value: '=TODAY()' },
+  E4: { value: '=NOW()' },
+
+  F1: { value: `=${testSheetName}!A1` }, // Ref test sheet.
+  F3: { value: true },
+  F4: { value: false },
+  F5: { value: '8%' },
+  F6: { value: '$10000' },
+});
+
+export const createTestSheet = async ({
+  name,
+  graph = createComputeGraph(),
+}: { name?: string; graph?: ComputeGraph } = {}) => {
+  const sheet = createSheet(name);
+  const model = new SheetModel(graph, sheet);
+  await model.initialize();
+  model.setValues(createCells());
+  model.sheet.columnMeta[model.sheet.columns[0]] = { size: 100 };
+  await model.destroy();
+  return sheet;
+};

package/src/types.ts

@@ -83,6 +83,8 @@ export const RowColumnMeta = S.Struct({
 });
 
 // TODO(burdon): Index to all updates when rows/columns are inserted/deleted.
+// TODO(wittjosiah): Migrate typename to remove `Type` suffix.
+// TODO(wittjosiah): Rename title to name to align with other schemas.
 export class SheetType extends TypedObject({ typename: 'dxos.org/type/SheetType', version: '0.1.0' })({
   title: S.optional(S.String),