@dxos/plugin-sheet 0.6.12-main.78ddbdf → 0.6.12-main.89e9959

package/src/graph/testing/test-builder.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Client, type ClientOptions } from '@dxos/client';
+import { type Context, Resource } from '@dxos/context';
+import { invariant } from '@dxos/invariant';
+
+import { type ComputeGraphOptions, ComputeGraphRegistry } from '../compute-graph-registry';
+
+export type TestBuilderOptions = ClientOptions & ComputeGraphOptions;
+
+// TODO(burdon): Reconcile with @dxos/client/testing.
+export class TestBuilder extends Resource {
+  private _client?: Client;
+  private _registry?: ComputeGraphRegistry;
+
+  constructor(private readonly _options: TestBuilderOptions = {}) {
+    super();
+  }
+
+  get ctx(): Context {
+    return this._ctx;
+  }
+
+  get client(): Client {
+    invariant(this._client);
+    return this._client;
+  }
+
+  get registry(): ComputeGraphRegistry {
+    invariant(this._registry);
+    return this._registry;
+  }
+
+  override async _open() {
+    const client = new Client(this._options);
+    await client.initialize();
+    await client.halo.createIdentity();
+    this._client = client;
+    this._ctx.onDispose(async () => {
+      await client.destroy();
+      this._client = undefined;
+    });
+
+    const registry = new ComputeGraphRegistry(this._options);
+    await registry.open();
+    this._registry = registry;
+    this._ctx.onDispose(async () => {
+      await registry.close();
+      this._registry = undefined;
+    });
+  }
+}

package/src/graph/{custom-function.ts → testing/test-plugin.ts}

@@ -8,14 +8,30 @@ import { type ProcedureAst } from 'hyperformula/typings/parser';
 import { getDeep } from '@dxos/util';
 
 import { FunctionArgumentType } from '#hyperformula';
-import { type AsyncFunction, FunctionPluginAsync } from './async-function';
-import { parseNumberString } from './util';
+import { type ComputeGraphPlugin } from '../compute-graph-registry';
+import { type AsyncFunction, AsyncFunctionPlugin } from '../functions';
+import { parseNumberString } from '../util';
 
 /**
+ * Testing functions run locally (not run via EDGE).
  * https://hyperformula.handsontable.com/guide/custom-functions.html#add-a-simple-custom-function
  */
-export class CustomPlugin extends FunctionPluginAsync {
+export class TestPlugin extends AsyncFunctionPlugin {
+  /**
+   * Simple local function returns input value.
+   */
   test(ast: ProcedureAst, state: InterpreterState) {
+    const handler: AsyncFunction = async (_value) => {
+      return _value;
+    };
+
+    return this.runAsyncFunction(ast, state, handler);
+  }
+
+  /**
+   * Simple local function returns random number.
+   */
+  random(ast: ProcedureAst, state: InterpreterState) {
     const handler: AsyncFunction = async () => {
       return Math.random();
     };
@@ -23,6 +39,9 @@ export class CustomPlugin extends FunctionPluginAsync {
     return this.runAsyncFunction(ast, state, handler);
   }
 
+  /**
+   * Async HTTP function.
+   */
   crypto(ast: ProcedureAst, state: InterpreterState) {
     const handler: AsyncFunction = async (_currency) => {
       const currency = (_currency || 'USD').toUpperCase();
@@ -40,9 +59,15 @@ export class CustomPlugin extends FunctionPluginAsync {
   }
 }
 
-CustomPlugin.implementedFunctions = {
+TestPlugin.implementedFunctions = {
   TEST: {
     method: 'test',
+    parameters: [{ argumentType: FunctionArgumentType.NUMBER, optionalArg: false }],
+    isVolatile: true,
+  },
+
+  RANDOM: {
+    method: 'random',
     parameters: [],
     isVolatile: true,
   },
@@ -54,13 +79,22 @@ CustomPlugin.implementedFunctions = {
   },
 };
 
-export const CustomPluginTranslations = {
+export const TestPluginTranslations = {
   enGB: {
-    TEST: 'TEST',
-    CRYPTO: 'CRYPTO',
+    TEST: 'Returns input value',
+    RANDOM: 'Random number',
+    CRYPTO: 'Crypto token value',
   },
   enUS: {
-    TEST: 'TEST',
-    CRYPTO: 'CRYPTO',
+    TEST: 'Returns input value',
+    RANDOM: 'Random number',
+    CRYPTO: 'Crypto token value',
   },
 };
+
+export const testFunctionPlugins: ComputeGraphPlugin[] = [
+  {
+    plugin: TestPlugin,
+    translations: TestPluginTranslations,
+  },
+];

package/src/hooks/hooks.stories.tsx

@@ -14,14 +14,14 @@ import { withTheme } from '@dxos/storybook-utils';
 import { ComputeGraphContextProvider } from '../components';
 import { createSheet } from '../defs';
 import { useComputeGraph, useSheetModel } from '../hooks';
-import { withGraphDecorator } from '../testing';
+import { withComputeGraphDecorator } from '../testing';
 import { SheetType } from '../types';
 
 const Story = () => {
   const space = useSpace();
   const graph = useComputeGraph(space);
   const [sheet, setSheet] = useState<SheetType>();
-  const model = useSheetModel(space, sheet);
+  const model = useSheetModel(graph, sheet);
   useEffect(() => {
     if (space) {
       const sheet = space.db.add(createSheet());
@@ -41,7 +41,7 @@ export default {
   component: ComputeGraphContextProvider,
   decorators: [
     withClientProvider({ types: [SheetType], createIdentity: true, createSpace: true }),
-    withGraphDecorator,
+    withComputeGraphDecorator(),
     withTheme,
   ],
   render: (args: any) => <Story {...args} />,

package/src/hooks/useComputeGraph.ts

@@ -16,5 +16,13 @@ import { type ComputeGraph } from '../graph';
  */
 export const useComputeGraph = (space?: Space): ComputeGraph | undefined => {
   const { registry } = useContext(ComputeGraphContext) ?? raise(new Error('Missing ComputeGraphContext'));
-  return useAsyncState(async () => space && registry.getOrCreateGraph(space), [space, registry]);
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph = registry.getOrCreateGraph(space);
+      await graph.open();
+      return graph;
+    }
+  }, [space, registry]);
+
+  return graph;
 };

package/src/hooks/useSheetModel.ts

@@ -4,9 +4,7 @@
 
 import { useEffect, useState } from 'react';
 
-import { type Space } from '@dxos/react-client/echo';
-
-import { useComputeGraph } from './useComputeGraph';
+import { type ComputeGraph } from '../graph';
 import { SheetModel } from '../model';
 import { type SheetType } from '../types';
 
@@ -15,14 +13,13 @@ export type UseSheetModelOptions = {
 };
 
 export const useSheetModel = (
-  space?: Space,
+  graph?: ComputeGraph,
   sheet?: SheetType,
   { readonly }: UseSheetModelOptions = {},
 ): SheetModel | undefined => {
-  const graph = useComputeGraph(space);
   const [model, setModel] = useState<SheetModel>();
   useEffect(() => {
-    if (!space || !graph || !sheet) {
+    if (!graph || !sheet) {
       return;
     }
 
@@ -37,7 +34,7 @@ export const useSheetModel = (
       clearTimeout(t);
       void model?.close();
     };
-  }, [space, sheet, graph, readonly]);
+  }, [graph, sheet, readonly]);
 
   return model;
 };

package/src/model/sheet-model.test.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { afterEach, beforeEach, describe, expect, test } from 'vitest';
+
+import { Trigger } from '@dxos/async';
+import { FunctionType } from '@dxos/plugin-script/types';
+
+import { SheetModel } from './sheet-model';
+import { createSheet, addressFromA1Notation } from '../defs';
+import { TestBuilder, testFunctionPlugins } from '../graph/testing';
+import { type CellScalarValue } from '../types';
+
+// TODO(burdon): GPT("prompt", inputs); e.g., with large text cells.
+
+describe('SheetModel', () => {
+  let testBuilder: TestBuilder;
+  beforeEach(async () => {
+    testBuilder = new TestBuilder({ types: [FunctionType], plugins: testFunctionPlugins });
+    await testBuilder.open();
+  });
+  afterEach(async () => {
+    await testBuilder.close();
+  });
+
+  test('async function', async () => {
+    const space = await testBuilder.client.spaces.create();
+    const graph = testBuilder.registry.createGraph(space);
+    await graph.open();
+
+    // TODO(burdon): Create via factory.
+    const sheet = createSheet({ rows: 5, columns: 5 });
+    const model = new SheetModel(graph, sheet);
+    await model.open();
+    testBuilder.ctx.onDispose(() => model.close());
+
+    // Trigger waits for function invocation.
+    const trigger = new Trigger<CellScalarValue>();
+    model.setValue(addressFromA1Notation('A1'), '=TEST(100)');
+    model.update.once((update) => {
+      const { type } = update;
+      if (type === 'valuesUpdated') {
+        const value = model.getValue(addressFromA1Notation('A1'));
+        trigger.wake(value);
+      }
+    });
+
+    // Initial value will be null.
+    const v1 = model.getValue(addressFromA1Notation('A1'));
+    expect(v1).to.be.null;
+    expect(graph.context.info.invocations.TEST).not.to.exist;
+
+    // Wait until async update triggered.
+    const v2 = await trigger.wait();
+    expect(v2).to.eq(100);
+    expect(graph.context.info.invocations.TEST).to.eq(1);
+  });
+});

package/src/model/sheet-model.ts

@@ -8,6 +8,7 @@ import { type SimpleDate, type SimpleDateTime } from 'hyperformula/typings/DateT
 
 import { Event } from '@dxos/async';
 import { Resource } from '@dxos/context';
+import { getTypename } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
@@ -22,7 +23,7 @@ import {
   MAX_ROWS,
 } from '../defs';
 import { addressFromIndex, addressToIndex, initialize, insertIndices, ReadonlyException } from '../defs';
-import { type ComputeNode, type ComputeGraph, createSheetName } from '../graph';
+import { type ComputeNode, type ComputeGraph, createSheetName, type ComputeNodeEvent } from '../graph';
 import { type CellScalarValue, type CellValue, type SheetType, ValueTypeEnum } from '../types';
 
 const typeMap: Record<string, ValueTypeEnum> = {
@@ -60,13 +61,14 @@ export type SheetModelOptions = {
  *
  * [ComputeGraphContext] > [SheetContext]:[SheetModel] > [Sheet.Root]
  */
-// TODO(burdon): Factor out commonality with ComputeNode.
+// TODO(burdon): Factor out commonality with ComputeNode. Factor out HF.
 export class SheetModel extends Resource {
   public readonly id = `model-${PublicKey.random().truncate()}`;
 
-  public readonly update = new Event();
+  // Wraps compute node.
+  public readonly update = new Event<ComputeNodeEvent>();
 
-  private readonly _node: ComputeNode;
+  private _node?: ComputeNode;
 
   constructor(
     private readonly _graph: ComputeGraph,
@@ -74,9 +76,6 @@ export class SheetModel extends Resource {
     private readonly _options: SheetModelOptions = {},
   ) {
     super();
-    // TODO(burdon): SheetModel should extend ComputeNode and be constructed via the graph.
-    this._node = this._graph.getOrCreateNode(createSheetName(this._sheet.id));
-    this.reset();
   }
 
   get graph() {
@@ -104,12 +103,16 @@ export class SheetModel extends Resource {
   protected override async _open() {
     log('initialize', { id: this.id });
     initialize(this._sheet);
-    this.reset();
 
-    // TODO(burdon): Event hierarchy?
+    // TODO(burdon): SheetModel should extend ComputeNode and be constructed via the graph.
+    this._node = this._graph.getOrCreateNode(createSheetName({ type: getTypename(this._sheet)!, id: this._sheet.id }));
+    await this._node.open();
+
     // Listen for model updates (e.g., async calculations).
-    const unsubscribe = this._graph.update.on(() => this.update.emit());
+    const unsubscribe = this._node.update.on((event) => this.update.emit(event));
     this._ctx.onDispose(unsubscribe);
+
+    this.reset();
   }
 
   /**
@@ -118,8 +121,10 @@ export class SheetModel extends Resource {
    * @deprecated
    */
   reset() {
-    this._node.hf.clearSheet(this._node.sheetId);
+    invariant(this._node);
+    this._node.graph.hf.clearSheet(this._node.sheetId);
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
+      invariant(this._node);
       const { col, row } = addressFromIndex(this._sheet, key);
       if (typeof value === 'string' && value.charAt(0) === '=') {
         value = this._graph.mapFormulaToNative(
@@ -127,7 +132,7 @@ export class SheetModel extends Resource {
         );
       }
 
-      this._node.hf.setCellContents({ sheet: this._node.sheetId, row, col }, value);
+      this._node.graph.hf.setCellContents({ sheet: this._node.sheetId, row, col }, value);
     });
   }
 
@@ -139,7 +144,7 @@ export class SheetModel extends Resource {
    */
   // TODO(burdon): Remove.
   recalculate() {
-    this._node.hf.rebuildAndRecalculate();
+    this._node?.graph.hf.rebuildAndRecalculate();
   }
 
   insertRows(i: number, n = 1) {
@@ -161,9 +166,10 @@ export class SheetModel extends Resource {
    * Clear range of values.
    */
   clear(range: CellRange) {
+    invariant(this._node);
     const topLeft = getTopLeft(range);
     const values = this._iterRange(range, () => null);
-    this._node.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
+    this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
     this._iterRange(range, (cell) => {
       const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
@@ -171,7 +177,8 @@ export class SheetModel extends Resource {
   }
 
   cut(range: CellRange) {
-    this._node.hf.cut(toModelRange(this._node.sheetId, range));
+    invariant(this._node);
+    this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
     this._iterRange(range, (cell) => {
       const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
@@ -179,12 +186,14 @@ export class SheetModel extends Resource {
   }
 
   copy(range: CellRange) {
-    this._node.hf.copy(toModelRange(this._node.sheetId, range));
+    invariant(this._node);
+    this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
   }
 
   paste(cell: CellAddress) {
-    if (!this._node.hf.isClipboardEmpty()) {
-      const changes = this._node.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
+    invariant(this._node);
+    if (!this._node.graph.hf.isClipboardEmpty()) {
+      const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
       for (const change of changes) {
         if (change instanceof ExportedCellChange) {
           const { address, newValue } = change;
@@ -197,16 +206,18 @@ export class SheetModel extends Resource {
 
   // TODO(burdon): Display undo/redo state.
   undo() {
-    if (this._node.hf.isThereSomethingToUndo()) {
-      this._node.hf.undo();
-      this.update.emit();
+    invariant(this._node);
+    if (this._node.graph.hf.isThereSomethingToUndo()) {
+      this._node.graph.hf.undo();
+      // this.update.emit();
     }
   }
 
   redo() {
-    if (this._node.hf.isThereSomethingToRedo()) {
-      this._node.hf.redo();
-      this.update.emit();
+    invariant(this._node);
+    if (this._node.graph.hf.isThereSomethingToRedo()) {
+      this._node.graph.hf.redo();
+      // this.update.emit();
     }
   }
 
@@ -246,7 +257,8 @@ export class SheetModel extends Resource {
    */
   getValue(cell: CellAddress): CellScalarValue {
     // Applies rounding and post-processing.
-    const value = this._node.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
+    invariant(this._node);
+    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
     if (value instanceof DetailedCellError) {
       return value.toString();
     }
@@ -258,8 +270,9 @@ export class SheetModel extends Resource {
    * Get value type.
    */
   getValueType(cell: CellAddress): ValueTypeEnum {
+    invariant(this._node);
     const addr = toSimpleCellAddress(this._node.sheetId, cell);
-    const type = this._node.hf.getCellValueDetailedType(addr);
+    const type = this._node.graph.hf.getCellValueDetailedType(addr);
     return typeMap[type];
   }
 
@@ -267,6 +280,7 @@ export class SheetModel extends Resource {
    * Sets the value, updating the sheet and engine.
    */
   setValue(cell: CellAddress, value: CellScalarValue) {
+    invariant(this._node);
     if (this._options.readonly) {
       throw new ReadonlyException();
     }
@@ -288,7 +302,7 @@ export class SheetModel extends Resource {
     }
 
     // Insert into engine.
-    this._node.hf.setCellContents({ sheet: this._node.sheetId, row: cell.row, col: cell.col }, [
+    this._node.graph.hf.setCellContents({ sheet: this._node.sheetId, row: cell.row, col: cell.col }, [
       [typeof value === 'string' && value.charAt(0) === '=' ? this._graph.mapFormulaToNative(value) : value],
     ]);
 
@@ -386,14 +400,17 @@ export class SheetModel extends Resource {
   }
 
   toDateTime(num: number): SimpleDateTime {
-    return this._node.hf.numberToDateTime(num) as SimpleDateTime;
+    invariant(this._node);
+    return this._node.graph.hf.numberToDateTime(num) as SimpleDateTime;
   }
 
   toDate(num: number): SimpleDate {
-    return this._node.hf.numberToDate(num) as SimpleDate;
+    invariant(this._node);
+    return this._node.graph.hf.numberToDate(num) as SimpleDate;
   }
 
   toTime(num: number): SimpleDate {
-    return this._node.hf.numberToTime(num) as SimpleDate;
+    invariant(this._node);
+    return this._node.graph.hf.numberToTime(num) as SimpleDate;
   }
 }

package/src/testing/testing.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import type { Decorator } from '@storybook/react';
+import { type Decorator } from '@storybook/react';
 import React, { useState } from 'react';
 
 import { type Space } from '@dxos/react-client/echo';
@@ -10,14 +10,13 @@ import { useAsyncState } from '@dxos/react-hooks';
 
 import { ComputeGraphContextProvider } from '../components';
 import { createSheet } from '../defs';
-import { type ComputeGraph, ComputeGraphRegistry } from '../graph';
+import { type ComputeGraph, type ComputeGraphOptions, ComputeGraphRegistry } from '../graph';
 import { type CellValue, type CreateSheetOptions } from '../types';
 
-export const testSheetName = 'test';
+const testSheetName = 'test';
 
-// TODO(thure): Remove this from the `/testing` entrypoint.
-export const createCells = (): Record<string, CellValue> => ({
-  B1: { value: 'Qty' },
+export const createTestCells = (): Record<string, CellValue> => ({
+  B1: { value: 'Qty2' },
   B3: { value: 1 },
   B4: { value: 2 },
   B5: { value: 3 },
@@ -45,7 +44,7 @@ export const createCells = (): Record<string, CellValue> => ({
 });
 
 export const useTestSheet = (space?: Space, graph?: ComputeGraph, options?: CreateSheetOptions) => {
-  return useAsyncState(async () => {
+  const [sheet] = useAsyncState(async () => {
     if (!space || !graph) {
       return;
     }
@@ -54,13 +53,16 @@ export const useTestSheet = (space?: Space, graph?: ComputeGraph, options?: Crea
     space.db.add(sheet);
     return sheet;
   }, [space, graph]);
+  return sheet;
 };
 
-export const withGraphDecorator: Decorator = (Story) => {
-  const [registry] = useState(new ComputeGraphRegistry());
-  return (
-    <ComputeGraphContextProvider registry={registry}>
-      <Story />
-    </ComputeGraphContextProvider>
-  );
-};
+export const withComputeGraphDecorator =
+  (options?: ComputeGraphOptions): Decorator =>
+  (Story) => {
+    const [registry] = useState(new ComputeGraphRegistry(options));
+    return (
+      <ComputeGraphContextProvider registry={registry}>
+        <Story />
+      </ComputeGraphContextProvider>
+    );
+  };

package/src/types.ts

@@ -102,7 +102,7 @@ export const RowColumnMeta = S.Struct({
 // 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),
+  name: S.optional(S.String),
 
   // Sparse map of cells referenced by index.
   cells: S.mutable(S.Record(S.String, S.mutable(CellValue))),
@@ -132,6 +132,6 @@ export type SheetSize = {
 };
 
 export type CreateSheetOptions = {
-  // TODO(burdon): Standardize as name.
-  title?: string;
+  name?: string;
+  cells?: Record<string, CellValue>;
 } & Partial<SheetSize>;

package/dist/lib/browser/SheetContainer-V4GCCZTX.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/SheetContainer.tsx", "../../../src/components/Toolbar/Toolbar.tsx", "../../../src/components/Toolbar/common.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { useIntentDispatcher } from '@dxos/app-framework';\nimport { fullyQualifiedId } from '@dxos/react-client/echo';\nimport { useIsDirectlyAttended } from '@dxos/react-ui-attention';\nimport { focusRing, mx } from '@dxos/react-ui-theme';\n\nimport { Sheet, type SheetRootProps } from './Sheet';\nimport { Toolbar, type ToolbarAction } from './Toolbar';\n\n// TODO(Zan): Factor out, copied this from MarkdownPlugin.\nconst attentionFragment = mx(\n  'group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface',\n  'group-focus-within/editor:border-separator',\n);\n\n// TODO(Zan): Factor out, copied this from MarkdownPlugin.\nexport const sectionToolbarLayout =\n  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';\n\nconst SheetContainer = ({ sheet, space, role }: SheetRootProps & { role?: string }) => {\n  const dispatch = useIntentDispatcher();\n\n  const id = fullyQualifiedId(sheet);\n  const isDirectlyAttended = useIsDirectlyAttended(id);\n\n  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.\n  const handleAction = useCallback(\n    (action: ToolbarAction) => {\n      switch (action.type) {\n        case 'comment': {\n          // TODO(Zan): We shouldn't hardcode the action ID.\n          void dispatch({\n            action: 'dxos.org/plugin/thread/action/create',\n            data: {\n              cursor: action.anchor,\n              name: action.cellContent,\n              subject: sheet,\n            },\n          });\n        }\n      }\n    },\n    [sheet, dispatch],\n  );\n\n  return (\n    <div role='none' className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}>\n      <Sheet.Root space={space} sheet={sheet}>\n        <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>\n          <Toolbar.Root\n            onAction={handleAction}\n            classNames={mx(\n              role === 'section'\n                ? ['z-[2] group-focus-within/section:visible', !isDirectlyAttended && 'invisible', sectionToolbarLayout]\n                : 'group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator',\n            )}\n          >\n            {/* TODO(Zan): Restore some of this functionality */}\n            {/* <Toolbar.Styles /> */}\n            {/* <Toolbar.Format /> */}\n            {/* <Toolbar.Alignment /> */}\n            <Toolbar.Separator />\n            <Toolbar.Actions />\n          </Toolbar.Root>\n        </div>\n        <div\n          role='none'\n          className={mx(\n            role === 'section' && 'aspect-square border-is border-bs border-be border-separator',\n            role === 'article' &&\n              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator',\n            focusRing,\n            attentionFragment,\n          )}\n        >\n          <Sheet.Main />\n        </div>\n      </Sheet.Root>\n    </div>\n  );\n};\n\nexport default SheetContainer;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  type Icon,\n  Calendar,\n  ChatText,\n  CurrencyDollar,\n  Eraser,\n  HighlighterCircle,\n  TextAlignCenter,\n  TextAlignLeft,\n  TextAlignRight,\n} from '@phosphor-icons/react';\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport {\n  DensityProvider,\n  ElevationProvider,\n  Toolbar as NaturalToolbar,\n  type ThemedClassName,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { nonNullable } from '@dxos/util';\n\nimport { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';\nimport { addressToIndex } from '../../defs';\nimport { SHEET_PLUGIN } from '../../meta';\nimport { type Formatting } from '../../types';\nimport { useSheetContext } from '../Sheet/sheet-context';\n\n//\n// Root\n//\n\nexport type ToolbarAction =\n  | { type: 'clear' }\n  | { type: 'highlight' }\n  | { type: 'left' }\n  | { type: 'center' }\n  | { type: 'right' }\n  | { type: 'date' }\n  | { type: 'currency' }\n  | { type: 'comment'; anchor: string; cellContent?: string };\n\nexport type ToolbarActionType = ToolbarAction['type'];\n\nexport type ToolbarActionHandler = (action: ToolbarAction) => void;\n\nexport type ToolbarProps = ThemedClassName<\n  PropsWithChildren<{\n    onAction?: ToolbarActionHandler;\n  }>\n>;\n\nconst [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');\n\nconst ToolbarRoot = ({ children, onAction, classNames }: ToolbarProps) => {\n  return (\n    <ToolbarContextProvider onAction={onAction}>\n      <DensityProvider density='fine'>\n        <ElevationProvider elevation='chrome'>\n          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1', classNames]}>\n            {children}\n          </NaturalToolbar.Root>\n        </ElevationProvider>\n      </DensityProvider>\n    </ToolbarContextProvider>\n  );\n};\n\n// TODO(burdon): Generalize.\n// TODO(burdon): Detect and display current state.\ntype ButtonProps = {\n  type: ToolbarActionType;\n  Icon: Icon;\n  getState: (state: Formatting) => boolean;\n  disabled?: (state: Formatting) => boolean;\n};\n\n//\n// Alignment\n//\n\nconst formatOptions: ButtonProps[] = [\n  { type: 'date', Icon: Calendar, getState: (state) => false },\n  { type: 'currency', Icon: CurrencyDollar, getState: (state) => false },\n];\n\nconst Format = () => {\n  const { onAction } = useToolbarContext('Format');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  return (\n    <NaturalToolbar.ToggleGroup\n      type='single'\n      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}\n    >\n      {formatOptions.map(({ type, getState, Icon }) => (\n        <ToolbarToggleButton\n          key={type}\n          value={type}\n          Icon={Icon}\n          // disabled={state?.blockType === 'codeblock'}\n          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}\n          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}\n        >\n          {t(`toolbar ${type} label`)}\n        </ToolbarToggleButton>\n      ))}\n    </NaturalToolbar.ToggleGroup>\n  );\n};\n\nconst alignmentOptions: ButtonProps[] = [\n  { type: 'left', Icon: TextAlignLeft, getState: (state) => false },\n  { type: 'center', Icon: TextAlignCenter, getState: (state) => false },\n  { type: 'right', Icon: TextAlignRight, getState: (state) => false },\n];\n\nconst Alignment = () => {\n  const { onAction } = useToolbarContext('Alignment');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  return (\n    <NaturalToolbar.ToggleGroup\n      type='single'\n      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}\n    >\n      {alignmentOptions.map(({ type, getState, Icon }) => (\n        <ToolbarToggleButton\n          key={type}\n          value={type}\n          Icon={Icon}\n          // disabled={state?.blockType === 'codeblock'}\n          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}\n          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}\n        >\n          {t(`toolbar ${type} label`)}\n        </ToolbarToggleButton>\n      ))}\n    </NaturalToolbar.ToggleGroup>\n  );\n};\n\nconst styleOptions: ButtonProps[] = [\n  { type: 'clear', Icon: Eraser, getState: (state) => false },\n  { type: 'highlight', Icon: HighlighterCircle, getState: (state) => false },\n];\n\nconst Styles = () => {\n  const { onAction } = useToolbarContext('Alignment');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  return (\n    <NaturalToolbar.ToggleGroup\n      type='single'\n      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}\n    >\n      {styleOptions.map(({ type, getState, Icon }) => (\n        <ToolbarToggleButton\n          key={type}\n          value={type}\n          Icon={Icon}\n          // disabled={state?.blockType === 'codeblock'}\n          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}\n          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}\n        >\n          {t(`toolbar ${type} label`)}\n        </ToolbarToggleButton>\n      ))}\n    </NaturalToolbar.ToggleGroup>\n  );\n};\n\n//\n// Actions\n//\n\nconst Actions = () => {\n  const { onAction } = useToolbarContext('Actions');\n  const { cursor, range, model } = useSheetContext();\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  const overlapsCommentAnchor = (model.sheet.threads ?? [])\n    .filter(nonNullable)\n    .filter((thread) => thread.status !== 'resolved')\n    .some((thread) => {\n      if (!cursor) {\n        return false;\n      }\n      return addressToIndex(model.sheet, cursor) === thread.anchor;\n    });\n\n  const hasCursor = !!cursor;\n  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;\n\n  const tooltipLabelKey = !hasCursor\n    ? 'no cursor label'\n    : overlapsCommentAnchor\n      ? 'selection overlaps existing comment label'\n      : range\n        ? 'comment ranges not supported label'\n        : 'comment label';\n\n  return (\n    <ToolbarButton\n      value='comment'\n      Icon={ChatText}\n      data-testid='editor.toolbar.comment'\n      onClick={() => {\n        if (!cursor) {\n          return;\n        }\n        return onAction?.({\n          type: 'comment',\n          anchor: addressToIndex(model.sheet, cursor),\n          cellContent: model.getCellText(cursor),\n        });\n      }}\n      disabled={!cursorOnly || overlapsCommentAnchor}\n    >\n      {t(tooltipLabelKey)}\n    </ToolbarButton>\n  );\n};\n\nexport const Toolbar = {\n  Root: ToolbarRoot,\n  Separator: ToolbarSeparator,\n  Alignment,\n  Format,\n  Styles,\n  Actions,\n};\n\nexport { useToolbarContext };\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Icon } from '@phosphor-icons/react';\nimport React from 'react';\n\nimport {\n  Toolbar as NaturalToolbar,\n  Tooltip,\n  type ToolbarButtonProps as NaturalToolbarButtonProps,\n  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,\n} from '@dxos/react-ui';\nimport { getSize } from '@dxos/react-ui-theme';\n\n// TODO(burdon): Factor out in common with react-ui-editor.\n\nexport const iconStyles = getSize(5);\nexport const buttonStyles = 'min-bs-0 p-2';\nexport const tooltipProps = { side: 'top' as const, classNames: 'z-10' };\n\nexport const ToolbarSeparator = () => <div role='separator' className='grow' />;\n\n//\n// ToolbarButton\n//\n\ntype ToolbarButtonProps = NaturalToolbarButtonProps & { Icon: Icon };\n\nexport const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {\n  return (\n    <Tooltip.Root>\n      <Tooltip.Trigger asChild>\n        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>\n          <Icon className={iconStyles} />\n          <span className='sr-only'>{children}</span>\n        </NaturalToolbar.Button>\n      </Tooltip.Trigger>\n      <Tooltip.Portal>\n        <Tooltip.Content {...tooltipProps}>\n          {children}\n          <Tooltip.Arrow />\n        </Tooltip.Content>\n      </Tooltip.Portal>\n    </Tooltip.Root>\n  );\n};\n\n//\n// ToolbarToggleButton\n//\n\nexport type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & { Icon: Icon };\n\nexport const ToolbarToggleButton = ({ Icon, children, ...props }: ToolbarToggleButtonProps) => {\n  return (\n    <Tooltip.Root>\n      <Tooltip.Trigger asChild>\n        <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>\n          <Icon className={iconStyles} />\n          <span className='sr-only'>{children}</span>\n        </NaturalToolbar.ToggleGroupItem>\n      </Tooltip.Trigger>\n      <Tooltip.Portal>\n        <Tooltip.Content {...tooltipProps}>\n          {children}\n          <Tooltip.Arrow />\n        </Tooltip.Content>\n      </Tooltip.Portal>\n    </Tooltip.Root>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["React", "useCallback", "useIntentDispatcher", "fullyQualifiedId", "useIsDirectlyAttended", "focusRing", "mx", "Calendar", "ChatText", "CurrencyDollar", "Eraser", "HighlighterCircle", "TextAlignCenter", "TextAlignLeft", "TextAlignRight", "createContext", "React", "DensityProvider", "ElevationProvider", "Toolbar", "NaturalToolbar", "useTranslation", "nonNullable", "React", "Toolbar", "NaturalToolbar", "Tooltip", "getSize", "iconStyles", "getSize", "buttonStyles", "tooltipProps", "side", "classNames", "ToolbarSeparator", "div", "role", "className", "ToolbarButton", "Icon", "children", "props", "Tooltip", "Root", "Trigger", "asChild", "NaturalToolbar", "Button", "variant", "span", "Portal", "Content", "Arrow", "ToolbarToggleButton", "ToggleGroupItem", "ToolbarContextProvider", "useToolbarContext", "createContext", "ToolbarRoot", "children", "onAction", "classNames", "React", "DensityProvider", "density", "ElevationProvider", "elevation", "NaturalToolbar", "Root", "formatOptions", "type", "Icon", "Calendar", "getState", "state", "CurrencyDollar", "Format", "t", "useTranslation", "SHEET_PLUGIN", "ToggleGroup", "map", "ToolbarToggleButton", "key", "value", "onClick", "alignmentOptions", "TextAlignLeft", "TextAlignCenter", "TextAlignRight", "Alignment", "styleOptions", "Eraser", "HighlighterCircle", "Styles", "Actions", "cursor", "range", "model", "useSheetContext", "overlapsCommentAnchor", "sheet", "threads", "filter", "nonNullable", "thread", "status", "some", "addressToIndex", "anchor", "hasCursor", "cursorOnly", "tooltipLabelKey", "ToolbarButton", "ChatText", "data-testid", "cellContent", "getCellText", "disabled", "Toolbar", "Separator", "ToolbarSeparator", "attentionFragment", "mx", "sectionToolbarLayout", "SheetContainer", "sheet", "space", "role", "dispatch", "useIntentDispatcher", "id", "fullyQualifiedId", "isDirectlyAttended", "useIsDirectlyAttended", "handleAction", "useCallback", "action", "type", "data", "cursor", "anchor", "name", "cellContent", "subject", "React", "div", "className", "undefined", "Sheet", "Root", "Toolbar", "onAction", "classNames", "Separator", "Actions", "focusRing", "Main"]
-}