@dxos/plugin-sheet 0.6.13-main.548ca8d → 0.6.13-staging.1e988a3

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/translations.ts

@@ -16,12 +16,7 @@ export default [
         'toolbar left label': 'Align left',
         'toolbar left center': 'Align center',
         'toolbar left right': 'Align right',
-        'selection overlaps existing comment label': 'Selected cell already has a comment',
-        'comment label': 'Add comment',
-        'comment ranges not supported label': 'Commenting on ranges is not yet supported',
-        'no cursor label': 'Select a cell to comment',
-        'open comment for sheet cell': 'View comments for cell',
       },
     },
   },
-] as const;
+];

package/src/types.ts

@@ -9,13 +9,9 @@ import type {
   SurfaceProvides,
   TranslationsProvides,
 } from '@dxos/app-framework';
-import { ref, S, TypedObject } from '@dxos/echo-schema';
+import { create, S, TypedObject } from '@dxos/echo-schema';
 import { type SchemaProvides } from '@dxos/plugin-client';
-import { type MarkdownExtensionProvides } from '@dxos/plugin-markdown';
-import { type SpaceInitProvides } from '@dxos/plugin-space';
-import { ThreadType } from '@dxos/plugin-space/types';
 import { type StackProvides } from '@dxos/plugin-stack';
-import { FieldValueType } from '@dxos/schema';
 
 import { SHEET_PLUGIN } from './meta';
 
@@ -25,26 +21,13 @@ export enum SheetAction {
   CREATE = `${SHEET_ACTION}/create`,
 }
 
-// TODO(Zan): Move this to the plugin-space plugin or another common location
-// when we implement comments in sheets.
-// This is currently duplicated in a few places.
-type ThreadProvides<T> = {
-  thread: {
-    predicate: (obj: any) => obj is T;
-    createSort: (obj: T) => (anchorA: string | undefined, anchorB: string | undefined) => number;
-  };
-};
-
 export type SheetPluginProvides = SurfaceProvides &
   IntentResolverProvides &
   GraphBuilderProvides &
-  MarkdownExtensionProvides &
   MetadataRecordsProvides &
   TranslationsProvides &
   SchemaProvides &
-  SpaceInitProvides &
-  StackProvides &
-  ThreadProvides<SheetType>;
+  StackProvides;
 
 export type CellScalarValue = number | string | boolean | null;
 
@@ -52,15 +35,41 @@ export const CellValue = S.Struct({
   // TODO(burdon): How to store dates (datetime, date, time), percentages, etc.
   //  Consider import/export; natural access for other plugins. Special handling for currency (precision).
   // TODO(burdon): Automerge (long string) or short string or number.
+  // TODO(burdon): Arrays?
   value: S.Any,
 });
 
 export type CellValue = S.Schema.Type<typeof CellValue>;
 
-// TODO(burdon): IMPORTANT: Reconcile with Field definition.
+/**
+ * https://www.tutorialsteacher.com/typescript/typescript-number
+ */
+// TODO(burdon): Format vs. value.
+export enum ValueTypeEnum {
+  Null = 0,
+  Number = 1,
+  Boolean = 2,
+  String = 3,
+
+  // Special numbers.
+  Percent = 10,
+  Currency = 11,
+
+  // Dates.
+  DateTime = 20,
+  Date = 21,
+  Time = 22,
+
+  // Validated string types.
+  // TODO(burdon): Define effect types.
+  URL = 30,
+  DID = 31,
+}
+
+export const ValueType = S.Enums(ValueTypeEnum);
+
 export const Formatting = S.Struct({
-  range: S.String,
-  type: S.optional(S.Enums(FieldValueType)),
+  type: S.optional(ValueType),
   format: S.optional(S.String),
   precision: S.optional(S.Number),
   classNames: S.optional(S.Array(S.String)),
@@ -74,11 +83,13 @@ 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' })({
-  name: S.optional(S.String),
+  title: S.optional(S.String),
 
   // Sparse map of cells referenced by index.
-  cells: S.mutable(S.Record({ key: S.String, value: S.mutable(CellValue) })),
+  cells: S.mutable(S.Record(S.String, S.mutable(CellValue))),
 
   // Ordered row indices.
   rows: S.mutable(S.Array(S.String)),
@@ -87,25 +98,15 @@ export class SheetType extends TypedObject({ typename: 'dxos.org/type/SheetType'
   columns: S.mutable(S.Array(S.String)),
 
   // Row metadata referenced by index.
-  rowMeta: S.mutable(S.Record({ key: S.String, value: S.mutable(RowColumnMeta) })),
+  rowMeta: S.mutable(S.Record(S.String, S.mutable(RowColumnMeta))),
 
   // Column metadata referenced by index.
-  columnMeta: S.mutable(S.Record({ key: S.String, value: S.mutable(RowColumnMeta) })),
+  columnMeta: S.mutable(S.Record(S.String, S.mutable(RowColumnMeta))),
 
-  // TODO(burdon): Change to array.
   // Cell formatting referenced by indexed range.
-  formatting: S.mutable(S.Array(Formatting)),
-
-  // Threads associated with the sheet
-  threads: S.optional(S.mutable(S.Array(ref(ThreadType)))),
+  formatting: S.mutable(S.Record(S.String, S.mutable(Formatting))),
 }) {}
 
-export type SheetSize = {
-  rows: number;
-  columns: number;
-};
-
-export type CreateSheetOptions = {
-  name?: string;
-  cells?: Record<string, CellValue>;
-} & Partial<SheetSize>;
+// TODO(burdon): Fix defaults.
+export const createSheet = (title?: string): SheetType =>
+  create(SheetType, { title, cells: {}, rows: [], columns: [], rowMeta: {}, columnMeta: {}, formatting: {} });

package/dist/lib/browser/SheetContainer-NDNIS44E.mjs

@@ -1,265 +0,0 @@
-import {
-  GridSheet,
-  SheetProvider,
-  addressToA1Notation,
-  addressToIndex,
-  rangeToA1Notation,
-  useSheetContext
-} from "./chunk-AQSGDA4X.mjs";
-import "./chunk-GKI67SEF.mjs";
-import {
-  SHEET_PLUGIN
-} from "./chunk-D3QTX46O.mjs";
-import "./chunk-GSV5QNLD.mjs";
-
-// packages/plugins/plugin-sheet/src/components/SheetContainer/SheetContainer.tsx
-import React3, { useCallback } from "react";
-import { useIntentDispatcher } from "@dxos/app-framework";
-
-// packages/plugins/plugin-sheet/src/components/FunctionEditor/FunctionEditor.tsx
-import React from "react";
-import { Icon } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
-var FunctionEditor = () => {
-  const { model, cursor, range } = useSheetContext();
-  let value;
-  let isFormula = false;
-  if (cursor) {
-    value = model.getCellValue(cursor);
-    if (typeof value === "string" && value.charAt(0) === "=") {
-      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));
-      isFormula = true;
-    } else if (value != null) {
-      value = String(value);
-    }
-  }
-  return /* @__PURE__ */ React.createElement("div", {
-    className: mx("flex shrink-0 justify-between items-center px-4 py-1 text-sm border-bs !border-separator attention-surface")
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex gap-4 items-center"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex w-16 items-center font-mono"
-  }, range && rangeToA1Notation(range) || cursor && addressToA1Notation(cursor)), /* @__PURE__ */ React.createElement("div", {
-    className: "flex gap-2 items-center"
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--function--regular",
-    classNames: [
-      "text-greenText",
-      isFormula ? "visible" : "invisible"
-    ]
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "font-mono"
-  }, value))));
-};
-
-// packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
-import { createContext } from "@radix-ui/react-context";
-import React2 from "react";
-import { Icon as Icon2, Toolbar as NaturalToolbar, useTranslation, Tooltip } from "@dxos/react-ui";
-import { useAttention } from "@dxos/react-ui-attention";
-import { nonNullable } from "@dxos/util";
-var buttonStyles = "min-bs-0 p-2";
-var tooltipProps = {
-  side: "bottom",
-  classNames: "z-10"
-};
-var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
-  role: "separator",
-  className: "grow"
-});
-var ToolbarItem = ({ itemType, icon, children, ...props }) => {
-  const Invoker = itemType === "toggleGroupItem" ? NaturalToolbar.ToggleGroupItem : itemType === "toggle" ? NaturalToolbar.Toggle : NaturalToolbar.Button;
-  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Invoker, {
-    variant: "ghost",
-    ...props,
-    classNames: buttonStyles
-  }, /* @__PURE__ */ React2.createElement(Icon2, {
-    icon,
-    size: 5
-  }), /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
-};
-var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var sectionToolbarLayout = "bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity";
-var ToolbarRoot = ({ children, onAction, role, classNames }) => {
-  const { id } = useSheetContext();
-  const { hasAttention } = useAttention(id);
-  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
-    onAction
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Root, {
-    classNames: [
-      ...role === "section" ? [
-        "z-[2] group-focus-within/section:visible",
-        !hasAttention && "invisible",
-        sectionToolbarLayout
-      ] : [
-        "attention-surface"
-      ],
-      classNames
-    ]
-  }, children));
-};
-var formatOptions = [
-  {
-    value: "date",
-    icon: "ph--calendar--regular",
-    getState: (state) => false
-  },
-  {
-    value: "currency",
-    icon: "ph--currency-dollar--regular",
-    getState: (state) => false
-  }
-];
-var Format = () => {
-  const { onAction } = useToolbarContext("Format");
-  const { t } = useTranslation(SHEET_PLUGIN);
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
-    type: "single"
-  }, formatOptions.map(({ value, getState, icon }) => /* @__PURE__ */ React2.createElement(ToolbarItem, {
-    itemType: "toggleGroupItem",
-    key: value,
-    value,
-    icon,
-    onClick: () => onAction?.({
-      type: "format",
-      value
-    })
-  }, t(`toolbar ${value} label`))));
-};
-var alignmentOptions = [
-  {
-    value: "left",
-    icon: "ph--text-align-left--regular",
-    getState: (state) => false
-  },
-  {
-    value: "center",
-    icon: "ph--text-align-center--regular",
-    getState: (state) => false
-  },
-  {
-    value: "right",
-    icon: "ph--text-align-right--regular",
-    getState: (state) => false
-  }
-];
-var Alignment = () => {
-  const { onAction } = useToolbarContext("Alignment");
-  const { t } = useTranslation(SHEET_PLUGIN);
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
-    type: "single",
-    // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-    // disabled={state?.blockType === 'codeblock'}
-    onValueChange: (value) => onAction?.({
-      type: "align",
-      value
-    })
-  }, alignmentOptions.map(({ value, getState, icon }) => /* @__PURE__ */ React2.createElement(ToolbarItem, {
-    itemType: "toggleGroupItem",
-    key: value,
-    value,
-    icon
-  }, t(`toolbar ${value} label`))));
-};
-var styleOptions = [
-  {
-    value: "highlight",
-    icon: "ph--highlighter--regular",
-    getState: (state) => false
-  }
-];
-var Styles = () => {
-  const { onAction } = useToolbarContext("Styles");
-  const { t } = useTranslation(SHEET_PLUGIN);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, styleOptions.map(({ value, getState, icon }) => /* @__PURE__ */ React2.createElement(ToolbarItem, {
-    itemType: "toggle",
-    key: value,
-    onPressedChange: (nextPressed) => onAction?.({
-      type: "style",
-      value: nextPressed ? "highlight" : "unset"
-    }),
-    icon
-  }, t(`toolbar ${value} label`))));
-};
-var Actions = () => {
-  const { onAction } = useToolbarContext("Actions");
-  const { cursor, range, model } = useSheetContext();
-  const { t } = useTranslation(SHEET_PLUGIN);
-  const overlapsCommentAnchor = (model.sheet.threads ?? []).filter(nonNullable).filter((thread) => thread.status !== "resolved").some((thread) => {
-    if (!cursor) {
-      return false;
-    }
-    return addressToIndex(model.sheet, cursor) === thread.anchor;
-  });
-  const hasCursor = !!cursor;
-  const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
-  const tooltipLabelKey = !hasCursor ? "no cursor label" : overlapsCommentAnchor ? "selection overlaps existing comment label" : range ? "comment ranges not supported label" : "comment label";
-  return /* @__PURE__ */ React2.createElement(ToolbarItem, {
-    itemType: "button",
-    value: "comment",
-    icon: "ph--chat-text--regular",
-    "data-testid": "editor.toolbar.comment",
-    onClick: () => {
-      if (!cursor) {
-        return;
-      }
-      return onAction?.({
-        type: "comment",
-        anchor: addressToIndex(model.sheet, cursor),
-        cellContent: model.getCellText(cursor)
-      });
-    },
-    disabled: !cursorOnly || overlapsCommentAnchor
-  }, t(tooltipLabelKey));
-};
-var Toolbar = {
-  Root: ToolbarRoot,
-  Separator: ToolbarSeparator,
-  Alignment,
-  Format,
-  Styles,
-  Actions
-};
-
-// packages/plugins/plugin-sheet/src/components/SheetContainer/SheetContainer.tsx
-var SheetContainer = ({ graph, sheet, role }) => {
-  const dispatch = useIntentDispatcher();
-  const handleAction = useCallback((action) => {
-    switch (action.type) {
-      case "comment": {
-        void dispatch({
-          action: "dxos.org/plugin/thread/action/create",
-          data: {
-            cursor: action.anchor,
-            name: action.cellContent,
-            subject: sheet
-          }
-        });
-      }
-    }
-  }, [
-    sheet,
-    dispatch
-  ]);
-  return /* @__PURE__ */ React3.createElement(SheetProvider, {
-    sheet,
-    graph
-  }, /* @__PURE__ */ React3.createElement(Toolbar.Root, {
-    onAction: handleAction,
-    role
-  }, /* @__PURE__ */ React3.createElement(Toolbar.Styles, null), /* @__PURE__ */ React3.createElement(Toolbar.Format, null), /* @__PURE__ */ React3.createElement(Toolbar.Alignment, null), /* @__PURE__ */ React3.createElement(Toolbar.Separator, null), /* @__PURE__ */ React3.createElement(Toolbar.Actions, null)), /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: "border-bs border-separator grid cols-1 rows-[1fr_min-content] min-bs-0"
-  }, /* @__PURE__ */ React3.createElement(GridSheet, null), /* @__PURE__ */ React3.createElement(FunctionEditor, null)));
-};
-
-// packages/plugins/plugin-sheet/src/components/SheetContainer/index.ts
-var SheetContainer_default = SheetContainer;
-export {
-  SheetContainer_default as default
-};
-//# sourceMappingURL=SheetContainer-NDNIS44E.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/SheetContainer/SheetContainer.tsx", "../../../src/components/FunctionEditor/FunctionEditor.tsx", "../../../src/components/Toolbar/Toolbar.tsx", "../../../src/components/SheetContainer/index.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { useIntentDispatcher } from '@dxos/app-framework';\n\nimport { FunctionEditor } from '../FunctionEditor';\nimport { GridSheet } from '../GridSheet';\nimport { SheetProvider, type SheetProviderProps } from '../SheetContext';\nimport { Toolbar, type ToolbarAction } from '../Toolbar';\n\nexport const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {\n  const dispatch = useIntentDispatcher();\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    <SheetProvider sheet={sheet} graph={graph}>\n      <Toolbar.Root onAction={handleAction} role={role}>\n        <Toolbar.Styles />\n        <Toolbar.Format />\n        <Toolbar.Alignment />\n        <Toolbar.Separator />\n        <Toolbar.Actions />\n      </Toolbar.Root>\n      <div role='none' className='border-bs border-separator grid cols-1 rows-[1fr_min-content] min-bs-0'>\n        <GridSheet />\n        <FunctionEditor />\n      </div>\n    </SheetProvider>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Icon } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { addressToA1Notation, rangeToA1Notation } from '../../defs';\nimport { useSheetContext } from '../SheetContext';\n\nexport const FunctionEditor = () => {\n  const { model, cursor, range } = useSheetContext();\n\n  let value;\n  let isFormula = false;\n  if (cursor) {\n    value = model.getCellValue(cursor);\n    if (typeof value === 'string' && value.charAt(0) === '=') {\n      value = model.graph.mapFunctionBindingFromId(model.mapFormulaIndicesToRefs(value));\n      isFormula = true;\n    } else if (value != null) {\n      value = String(value);\n    }\n  }\n\n  return (\n    <div\n      className={mx(\n        'flex shrink-0 justify-between items-center px-4 py-1 text-sm border-bs !border-separator attention-surface',\n      )}\n    >\n      <div className='flex gap-4 items-center'>\n        <div className='flex w-16 items-center font-mono'>\n          {(range && rangeToA1Notation(range)) || (cursor && addressToA1Notation(cursor))}\n        </div>\n        <div className='flex gap-2 items-center'>\n          <Icon icon='ph--function--regular' classNames={['text-greenText', isFormula ? 'visible' : 'invisible']} />\n          <span className='font-mono'>{value}</span>\n        </div>\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport {\n  Icon,\n  Toolbar as NaturalToolbar,\n  useTranslation,\n  Tooltip,\n  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,\n  type ToolbarButtonProps as NaturalToolbarButtonProps,\n  type ToolbarToggleProps as NaturalToolbarToggleProps,\n  type ThemedClassName,\n} from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { nonNullable } from '@dxos/util';\n\nimport { addressToIndex } from '../../defs';\nimport { SHEET_PLUGIN } from '../../meta';\nimport { type Formatting } from '../../types';\nimport { useSheetContext } from '../SheetContext';\n\n//\n// Buttons\n//\n\nconst buttonStyles = 'min-bs-0 p-2';\nconst tooltipProps = { side: 'bottom' as const, classNames: 'z-10' };\n\nconst ToolbarSeparator = () => <div role='separator' className='grow' />;\n\n//\n// ToolbarItem\n//\n\ntype ToolbarItemProps =\n  | (NaturalToolbarButtonProps & { itemType: 'button'; icon: string })\n  | (NaturalToolbarToggleGroupItemProps & { itemType: 'toggleGroupItem'; icon: string })\n  | (NaturalToolbarToggleProps & { itemType: 'toggle'; icon: string });\n\nexport const ToolbarItem = ({ itemType, icon, children, ...props }: ToolbarItemProps) => {\n  const Invoker =\n    itemType === 'toggleGroupItem'\n      ? NaturalToolbar.ToggleGroupItem\n      : itemType === 'toggle'\n        ? NaturalToolbar.Toggle\n        : NaturalToolbar.Button;\n  return (\n    <Tooltip.Root>\n      <Tooltip.Trigger asChild>\n        {/* TODO(thure): type the props spread better. */}\n        <Invoker variant='ghost' {...(props as any)} classNames={buttonStyles}>\n          <Icon icon={icon} size={5} />\n          <span className='sr-only'>{children}</span>\n        </Invoker>\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// Root\n//\n\ntype AlignValue = 'left' | 'center' | 'right' | 'unset';\ntype AlignAction = { type: 'align'; value: AlignValue };\n\ntype CommentAction = { type: 'comment'; anchor: string; cellContent?: string };\n\ntype FormatValue = 'date' | 'currency' | 'unset';\ntype FormatAction = { type: 'format'; value: FormatValue };\n\ntype StyleValue = 'highlight' | 'unset';\ntype StyleAction = { type: 'style'; value: StyleValue };\n\nexport type ToolbarAction = StyleAction | AlignAction | FormatAction | CommentAction;\n\nexport type ToolbarActionType = ToolbarAction['type'];\n\nexport type ToolbarActionHandler = (action: ToolbarAction) => void;\n\nexport type ToolbarProps = ThemedClassName<\n  PropsWithChildren<{\n    onAction?: ToolbarActionHandler;\n    role?: string;\n  }>\n>;\n\nconst [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');\n\n// TODO(Zan): Factor out, copied this from MarkdownPlugin.\nconst sectionToolbarLayout =\n  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';\n\nconst ToolbarRoot = ({ children, onAction, role, classNames }: ToolbarProps) => {\n  const { id } = useSheetContext();\n  const { hasAttention } = useAttention(id);\n\n  return (\n    <ToolbarContextProvider onAction={onAction}>\n      <NaturalToolbar.Root\n        classNames={[\n          ...(role === 'section'\n            ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]\n            : ['attention-surface']),\n          classNames,\n        ]}\n      >\n        {children}\n      </NaturalToolbar.Root>\n    </ToolbarContextProvider>\n  );\n};\n\n// TODO(burdon): Generalize.\n// TODO(burdon): Detect and display current state.\ntype ButtonProps<T> = {\n  value: T;\n  icon: string;\n  getState: (state: Formatting) => boolean;\n  disabled?: (state: Formatting) => boolean;\n};\n\n//\n// Alignment\n//\n\nconst formatOptions: ButtonProps<FormatValue>[] = [\n  { value: 'date', icon: 'ph--calendar--regular', getState: (state) => false },\n  { value: 'currency', icon: 'ph--currency-dollar--regular', 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(({ value, getState, icon }) => (\n        <ToolbarItem\n          itemType='toggleGroupItem'\n          key={value}\n          value={value}\n          icon={icon}\n          onClick={() => onAction?.({ type: 'format', value })}\n        >\n          {t(`toolbar ${value} label`)}\n        </ToolbarItem>\n      ))}\n    </NaturalToolbar.ToggleGroup>\n  );\n};\n\nconst alignmentOptions: ButtonProps<AlignValue>[] = [\n  { value: 'left', icon: 'ph--text-align-left--regular', getState: (state) => false },\n  { value: 'center', icon: 'ph--text-align-center--regular', getState: (state) => false },\n  { value: 'right', icon: 'ph--text-align-right--regular', 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      // disabled={state?.blockType === 'codeblock'}\n      onValueChange={(value: AlignValue) => onAction?.({ type: 'align', value })}\n    >\n      {alignmentOptions.map(({ value, getState, icon }) => (\n        <ToolbarItem itemType='toggleGroupItem' key={value} value={value} icon={icon}>\n          {t(`toolbar ${value} label`)}\n        </ToolbarItem>\n      ))}\n    </NaturalToolbar.ToggleGroup>\n  );\n};\n\nconst styleOptions: ButtonProps<StyleValue>[] = [\n  { value: 'highlight', icon: 'ph--highlighter--regular', getState: (state) => false },\n];\n\nconst Styles = () => {\n  const { onAction } = useToolbarContext('Styles');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  return (\n    <>\n      {styleOptions.map(({ value, getState, icon }) => (\n        <ToolbarItem\n          itemType='toggle'\n          key={value}\n          onPressedChange={(nextPressed: boolean) =>\n            onAction?.({ type: 'style', value: nextPressed ? 'highlight' : 'unset' })\n          }\n          icon={icon}\n        >\n          {t(`toolbar ${value} label`)}\n        </ToolbarItem>\n      ))}\n    </>\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    <ToolbarItem\n      itemType='button'\n      value='comment'\n      icon='ph--chat-text--regular'\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    </ToolbarItem>\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 { SheetContainer } from './SheetContainer';\n\nexport default SheetContainer;\n"],
-  "mappings": "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",
-  "names": ["React", "useCallback", "useIntentDispatcher", "React", "Icon", "mx", "FunctionEditor", "model", "cursor", "range", "useSheetContext", "value", "isFormula", "getCellValue", "charAt", "graph", "mapFunctionBindingFromId", "mapFormulaIndicesToRefs", "String", "div", "className", "mx", "rangeToA1Notation", "addressToA1Notation", "Icon", "icon", "classNames", "span", "createContext", "React", "Icon", "Toolbar", "NaturalToolbar", "useTranslation", "Tooltip", "useAttention", "nonNullable", "buttonStyles", "tooltipProps", "side", "classNames", "ToolbarSeparator", "React", "div", "role", "className", "ToolbarItem", "itemType", "icon", "children", "props", "Invoker", "NaturalToolbar", "ToggleGroupItem", "Toggle", "Button", "Tooltip", "Root", "Trigger", "asChild", "variant", "Icon", "size", "span", "Portal", "Content", "Arrow", "ToolbarContextProvider", "useToolbarContext", "createContext", "sectionToolbarLayout", "ToolbarRoot", "onAction", "id", "useSheetContext", "hasAttention", "useAttention", "formatOptions", "value", "getState", "state", "Format", "t", "useTranslation", "SHEET_PLUGIN", "ToggleGroup", "type", "map", "key", "onClick", "alignmentOptions", "Alignment", "onValueChange", "styleOptions", "Styles", "onPressedChange", "nextPressed", "Actions", "cursor", "range", "model", "overlapsCommentAnchor", "sheet", "threads", "filter", "nonNullable", "thread", "status", "some", "addressToIndex", "anchor", "hasCursor", "cursorOnly", "tooltipLabelKey", "data-testid", "cellContent", "getCellText", "disabled", "Toolbar", "Separator", "SheetContainer", "graph", "sheet", "role", "dispatch", "useIntentDispatcher", "handleAction", "useCallback", "action", "type", "data", "cursor", "anchor", "name", "cellContent", "subject", "React", "SheetProvider", "Toolbar", "Root", "onAction", "Styles", "Format", "Alignment", "Separator", "Actions", "div", "className", "GridSheet", "FunctionEditor", "SheetContainer"]
-}