@dxos/plugin-sheet 0.7.4 → 0.7.5-labs.5f04cf6

package/src/types/types.ts

@@ -0,0 +1,67 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { S } from '@dxos/echo-schema';
+
+import { type CellValue, RowColumnMeta, SheetType } from './schema';
+import { SHEET_PLUGIN } from '../meta';
+import { SheetModel } from '../model';
+
+export type SheetSize = {
+  rows: number;
+  columns: number;
+};
+
+export type CreateSheetOptions = {
+  name?: string;
+  cells?: Record<string, CellValue>;
+} & Partial<SheetSize>;
+
+export namespace SheetAction {
+  const SHEET_ACTION = `${SHEET_PLUGIN}/action`;
+
+  export class Create extends S.TaggedClass<Create>()(`${SHEET_ACTION}/create`, {
+    input: S.Struct({
+      name: S.optional(S.String),
+    }),
+    output: S.Struct({
+      object: SheetType,
+    }),
+  }) {}
+
+  // TODO(wittjosiah): Factor out. This is `DxGridAxis` from `@dxos/react-ui-grid`.
+  const Axis = S.Union(S.Literal('row'), S.Literal('col'));
+
+  export class InsertAxis extends S.TaggedClass<InsertAxis>()(`${SHEET_ACTION}/axis-insert`, {
+    input: S.Struct({
+      // TODO(wittjosiah): S.instanceOf(SheetModel) throws when running tests.
+      model: S.Any.pipe(S.filter((model) => model instanceof SheetModel)) as S.Schema<SheetModel>,
+      axis: Axis,
+      index: S.Number,
+      count: S.optional(S.Number),
+    }),
+    output: S.Void,
+  }) {}
+
+  export const RestoreAxis = S.Struct({
+    axis: Axis,
+    axisIndex: S.String,
+    index: S.Number,
+    axisMeta: RowColumnMeta,
+    values: S.Array(S.Any),
+  });
+
+  export type RestoreAxis = S.Schema.Type<typeof RestoreAxis>;
+
+  export class DropAxis extends S.TaggedClass<DropAxis>()(`${SHEET_ACTION}/axis-drop`, {
+    input: S.Struct({
+      // TODO(wittjosiah): S.instanceOf(SheetModel) throws when running tests.
+      model: S.Any.pipe(S.filter((model) => model instanceof SheetModel)) as S.Schema<SheetModel>,
+      axis: Axis,
+      axisIndex: S.String,
+      deletionData: S.optional(RestoreAxis),
+    }),
+    output: S.Void,
+  }) {}
+}

package/src/{defs → types}/util.ts

@@ -2,10 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { randomBytes } from '@dxos/crypto';
-import { invariant } from '@dxos/invariant';
-import { create } from '@dxos/live-object';
-
 import {
   addressFromA1Notation,
   addressToA1Notation,
@@ -13,13 +9,19 @@ import {
   type CellAddress,
   type CellRange,
   type CompleteCellRange,
-  DEFAULT_COLUMNS,
-  DEFAULT_ROWS,
-  MAX_COLUMNS,
-  MAX_ROWS,
-} from './types';
+} from '@dxos/compute';
+import { randomBytes } from '@dxos/crypto';
+import { invariant } from '@dxos/invariant';
+import { create } from '@dxos/live-object';
+
 import { type CreateSheetOptions, type SheetSize, SheetType } from '../types';
 
+export const MAX_ROWS = 500;
+export const MAX_COLS = 676; // 26^2;
+
+export const DEFAULT_ROWS = 50;
+export const DEFAULT_COLS = 26;
+
 // TODO(burdon): Factor out from dxos/protocols to new common package.
 export class ApiError extends Error {}
 
@@ -31,8 +33,6 @@ export class RangeException extends ApiError {
   }
 }
 
-// TODO(burdon): Factor out to types lib.
-
 /**
  * With a string length of 8, the chance of a collision is 0.02% for a sheet with 10,000 strings.
  */
@@ -57,13 +57,13 @@ export const insertIndices = (indices: string[], i: number, n: number, max: numb
 
 export const initialize = (
   sheet: SheetType,
-  { rows = DEFAULT_ROWS, columns = DEFAULT_COLUMNS }: Partial<SheetSize> = {},
+  { rows = DEFAULT_ROWS, columns = DEFAULT_COLS }: Partial<SheetSize> = {},
 ) => {
   if (!sheet.rows.length) {
     insertIndices(sheet.rows, 0, rows, MAX_ROWS);
   }
   if (!sheet.columns.length) {
-    insertIndices(sheet.columns, 0, columns, MAX_COLUMNS);
+    insertIndices(sheet.columns, 0, columns, MAX_COLS);
   }
 };
 

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

@@ -1,296 +0,0 @@
-import {
-  GridSheet,
-  SheetProvider,
-  completeCellRangeToThreadCursor,
-  useComputeGraph,
-  useSheetContext
-} from "./chunk-E5WQ7U7G.mjs";
-import {
-  addressToA1Notation,
-  alignKey,
-  inRange,
-  isFormula,
-  mapFormulaIndicesToRefs,
-  rangeFromIndex,
-  rangeToA1Notation,
-  rangeToIndex,
-  styleKey
-} from "./chunk-F3HE6D3J.mjs";
-import "./chunk-JXFPOYNA.mjs";
-import {
-  SHEET_PLUGIN
-} from "./chunk-RABELMEQ.mjs";
-
-// packages/plugins/plugin-sheet/src/components/SheetContainer/SheetContainer.tsx
-import React3 from "react";
-import { StackItem } from "@dxos/react-ui-stack";
-
-// packages/plugins/plugin-sheet/src/components/FunctionEditor/FunctionEditor.tsx
-import React from "react";
-import { Icon } from "@dxos/react-ui";
-var FunctionEditor = () => {
-  const { model, cursor, range } = useSheetContext();
-  let value;
-  let formula = false;
-  if (cursor) {
-    value = model.getCellValue(cursor);
-    if (isFormula(value)) {
-      value = model.graph.mapFunctionBindingFromId(mapFormulaIndicesToRefs(model.sheet, value));
-      formula = true;
-    } else if (value != null) {
-      value = String(value);
-    }
-  }
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "flex shrink-0 justify-between items-center px-4 py-1 text-sm attention-surface border-bs !border-separator"
-  }, /* @__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",
-      formula ? "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, { useCallback } from "react";
-import { useIntentDispatcher } from "@dxos/app-framework";
-import { Icon as Icon2, Toolbar as NaturalToolbar, Tooltip, useTranslation } 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 ToolbarRoot = ({ children, role, classNames }) => {
-  const { id, model, cursorFallbackRange, cursor } = useSheetContext();
-  const { hasAttention } = useAttention(id);
-  const dispatch = useIntentDispatcher();
-  const handleAction = useCallback((action) => {
-    switch (action.key) {
-      case "alignment":
-        if (cursorFallbackRange) {
-          const index = model.sheet.ranges?.findIndex((range) => range.key === action.key && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from)) ?? -1;
-          const nextRangeEntity = {
-            range: rangeToIndex(model.sheet, cursorFallbackRange),
-            key: action.key,
-            value: action.value
-          };
-          if (index < 0) {
-            model.sheet.ranges?.push(nextRangeEntity);
-          } else if (model.sheet.ranges[index].value === action.value) {
-            model.sheet.ranges?.splice(index, 1);
-          } else {
-            model.sheet.ranges?.splice(index, 1, nextRangeEntity);
-          }
-        }
-        break;
-      case "style":
-        if (action.unset) {
-          const index = model.sheet.ranges?.findIndex((range) => range.key === action.key && cursorFallbackRange && inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from));
-          if (index >= 0) {
-            model.sheet.ranges?.splice(index, 1);
-          }
-        } else if (cursorFallbackRange) {
-          model.sheet.ranges?.push({
-            range: rangeToIndex(model.sheet, cursorFallbackRange),
-            key: action.key,
-            value: action.value
-          });
-        }
-        break;
-      case "comment": {
-        if (cursorFallbackRange) {
-          void dispatch({
-            action: "dxos.org/plugin/thread/action/create",
-            data: {
-              cursor: completeCellRangeToThreadCursor(cursorFallbackRange),
-              name: action.cellContent,
-              subject: model.sheet
-            }
-          });
-        }
-      }
-    }
-  }, [
-    model.sheet,
-    cursorFallbackRange,
-    cursor,
-    dispatch
-  ]);
-  return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
-    onAction: handleAction
-  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Root, {
-    classNames: [
-      "pli-0.5 attention-surface",
-      !hasAttention && "opacity-20",
-      classNames
-    ]
-  }, children));
-};
-var alignmentOptions = [
-  {
-    value: "start",
-    icon: "ph--text-align-left--regular"
-  },
-  {
-    value: "center",
-    icon: "ph--text-align-center--regular"
-  },
-  {
-    value: "end",
-    icon: "ph--text-align-right--regular"
-  }
-];
-var Alignment = () => {
-  const { cursor, model } = useSheetContext();
-  const { onAction } = useToolbarContext("Alignment");
-  const { t } = useTranslation(SHEET_PLUGIN);
-  const value = cursor ? model.sheet.ranges?.findLast(({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor))?.value : void 0;
-  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
-    type: "single",
-    value: (
-      // TODO(thure): providing `undefined` leaves the last item active which was active rather than showing none.
-      value ?? "never"
-    ),
-    onValueChange: (value2) => onAction?.({
-      key: alignKey,
-      value: value2
-    })
-  }, alignmentOptions.map(({ value: value2, icon }) => /* @__PURE__ */ React2.createElement(ToolbarItem, {
-    itemType: "toggleGroupItem",
-    key: value2,
-    value: value2,
-    icon,
-    "data-testid": `grid.toolbar.${alignKey}.${value2}`
-  }, t("toolbar action label", {
-    key: t(`range key ${alignKey} label`),
-    value: t(`range value ${value2} label`)
-  }))));
-};
-var styleOptions = [
-  {
-    value: "highlight",
-    icon: "ph--highlighter--regular"
-  },
-  {
-    value: "softwrap",
-    icon: "ph--paragraph--regular"
-  }
-];
-var Styles = () => {
-  const { cursorFallbackRange, model } = useSheetContext();
-  const { onAction } = useToolbarContext("Styles");
-  const { t } = useTranslation(SHEET_PLUGIN);
-  const activeValues = cursorFallbackRange ? model.sheet.ranges?.filter(({ range, key }) => key === "style" && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from)).reduce((acc, { value }) => {
-    acc.add(value);
-    return acc;
-  }, /* @__PURE__ */ new Set()) : void 0;
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, styleOptions.map(({ value, icon }) => /* @__PURE__ */ React2.createElement(ToolbarItem, {
-    itemType: "toggle",
-    key: value,
-    pressed: activeValues?.has(value),
-    onPressedChange: (nextPressed) => {
-      onAction?.({
-        key: "style",
-        value,
-        unset: !nextPressed
-      });
-    },
-    icon
-  }, t("toolbar action label", {
-    key: t(`range key ${styleKey} label`),
-    value: t(`range value ${value} label`)
-  }))));
-};
-var Actions = () => {
-  const { onAction } = useToolbarContext("Actions");
-  const { cursorFallbackRange, cursor, model } = useSheetContext();
-  const { t } = useTranslation(SHEET_PLUGIN);
-  const overlapsCommentAnchor = (model.sheet.threads ?? []).filter(nonNullable).filter((thread) => thread.status !== "resolved").some((thread) => {
-    if (!cursorFallbackRange) {
-      return false;
-    }
-    return rangeToIndex(model.sheet, cursorFallbackRange) === thread.anchor;
-  });
-  const tooltipLabelKey = !cursor ? "no cursor label" : overlapsCommentAnchor ? "selection overlaps existing comment label" : "comment label";
-  return /* @__PURE__ */ React2.createElement(ToolbarItem, {
-    itemType: "button",
-    value: "comment",
-    icon: "ph--chat-text--regular",
-    "data-testid": "editor.toolbar.comment",
-    onClick: () => {
-      if (!cursorFallbackRange) {
-        return;
-      }
-      return onAction?.({
-        key: "comment",
-        value: rangeToIndex(model.sheet, cursorFallbackRange),
-        cellContent: model.getCellText(cursorFallbackRange.from)
-      });
-    },
-    disabled: !cursorFallbackRange || overlapsCommentAnchor
-  }, t(tooltipLabelKey));
-};
-var Toolbar = {
-  Root: ToolbarRoot,
-  Separator: ToolbarSeparator,
-  Alignment,
-  Styles,
-  Actions
-};
-
-// packages/plugins/plugin-sheet/src/components/SheetContainer/SheetContainer.tsx
-var SheetContainer = ({ space, sheet, role, ignoreAttention }) => {
-  const graph = useComputeGraph(space);
-  return graph ? /* @__PURE__ */ React3.createElement(SheetProvider, {
-    sheet,
-    graph,
-    ignoreAttention
-  }, /* @__PURE__ */ React3.createElement(StackItem.Content, {
-    toolbar: true,
-    statusbar: true,
-    ...role === "section" && {
-      classNames: "aspect-video"
-    }
-  }, /* @__PURE__ */ React3.createElement(Toolbar.Root, {
-    role
-  }, /* @__PURE__ */ React3.createElement(Toolbar.Styles, null), /* @__PURE__ */ React3.createElement(Toolbar.Alignment, null), /* @__PURE__ */ React3.createElement(Toolbar.Separator, null), /* @__PURE__ */ React3.createElement(Toolbar.Actions, null)), /* @__PURE__ */ React3.createElement(GridSheet, null), /* @__PURE__ */ React3.createElement(FunctionEditor, null))) : null;
-};
-
-// packages/plugins/plugin-sheet/src/components/SheetContainer/index.ts
-var SheetContainer_default = SheetContainer;
-export {
-  SheetContainer_default as default
-};
-//# sourceMappingURL=SheetContainer-KCLT6PEO.mjs.map

package/dist/lib/browser/SheetContainer-KCLT6PEO.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 from 'react';\n\nimport { type Space } from '@dxos/react-client/echo';\nimport { StackItem } from '@dxos/react-ui-stack';\n\nimport { type SheetType } from '../../types';\nimport { useComputeGraph } from '../ComputeGraph';\nimport { FunctionEditor } from '../FunctionEditor';\nimport { GridSheet } from '../GridSheet';\nimport { SheetProvider } from '../SheetContext';\nimport { Toolbar } from '../Toolbar';\n\nexport const SheetContainer = ({\n  space,\n  sheet,\n  role,\n  ignoreAttention,\n}: {\n  space: Space;\n  sheet: SheetType;\n  role?: string;\n  ignoreAttention?: boolean;\n}) => {\n  const graph = useComputeGraph(space);\n\n  return graph ? (\n    <SheetProvider sheet={sheet} graph={graph} ignoreAttention={ignoreAttention}>\n      <StackItem.Content toolbar statusbar {...(role === 'section' && { classNames: 'aspect-video' })}>\n        <Toolbar.Root role={role}>\n          <Toolbar.Styles />\n          <Toolbar.Alignment />\n          <Toolbar.Separator />\n          <Toolbar.Actions />\n        </Toolbar.Root>\n        <GridSheet />\n        <FunctionEditor />\n      </StackItem.Content>\n    </SheetProvider>\n  ) : null;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Icon } from '@dxos/react-ui';\n\nimport { addressToA1Notation, isFormula, mapFormulaIndicesToRefs, rangeToA1Notation } from '../../defs';\nimport { useSheetContext } from '../SheetContext';\n\nexport const FunctionEditor = () => {\n  const { model, cursor, range } = useSheetContext();\n\n  let value;\n  let formula = false;\n  if (cursor) {\n    value = model.getCellValue(cursor);\n    if (isFormula(value)) {\n      value = model.graph.mapFunctionBindingFromId(mapFormulaIndicesToRefs(model.sheet, value));\n      formula = true;\n    } else if (value != null) {\n      value = String(value);\n    }\n  }\n\n  return (\n    <div className='flex shrink-0 justify-between items-center px-4 py-1 text-sm attention-surface border-bs !border-separator'>\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', formula ? '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, useCallback } from 'react';\n\nimport { useIntentDispatcher } from '@dxos/app-framework';\nimport {\n  Icon,\n  type ThemedClassName,\n  Toolbar as NaturalToolbar,\n  type ToolbarButtonProps as NaturalToolbarButtonProps,\n  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,\n  type ToolbarToggleProps as NaturalToolbarToggleProps,\n  Tooltip,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { nonNullable } from '@dxos/util';\n\nimport {\n  alignKey,\n  type AlignKey,\n  type AlignValue,\n  type CommentKey,\n  type CommentValue,\n  inRange,\n  rangeFromIndex,\n  rangeToIndex,\n  styleKey,\n  type StyleKey,\n  type StyleValue,\n} from '../../defs';\nimport { completeCellRangeToThreadCursor } from '../../integrations';\nimport { SHEET_PLUGIN } from '../../meta';\nimport { type SheetType } 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 AlignAction = { key: AlignKey; value: AlignValue };\ntype CommentAction = { key: CommentKey; value: CommentValue; cellContent?: string };\ntype StyleAction = { key: StyleKey; value: StyleValue };\n\nexport type ToolbarAction = StyleAction | AlignAction | CommentAction;\nexport type ToolbarActionAnnotated = ToolbarAction & { unset?: boolean };\n\nexport type ToolbarActionType = ToolbarAction['key'];\n\nexport type ToolbarActionHandler = (action: ToolbarActionAnnotated) => void;\n\nexport type ToolbarProps = ThemedClassName<\n  PropsWithChildren<{\n    role?: string;\n  }>\n>;\n\nconst [ToolbarContextProvider, useToolbarContext] = createContext<{\n  onAction: (action: ToolbarActionAnnotated) => void;\n}>('Toolbar');\n\ntype Range = SheetType['ranges'][number];\n\nconst ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {\n  const { id, model, cursorFallbackRange, cursor } = useSheetContext();\n  const { hasAttention } = useAttention(id);\n  const dispatch = useIntentDispatcher();\n\n  // TODO(Zan): Externalize the toolbar action handler. E.g., Toolbar/keys should both fire events.\n  const handleAction = useCallback(\n    (action: ToolbarActionAnnotated) => {\n      switch (action.key) {\n        case 'alignment':\n          if (cursorFallbackRange) {\n            const index =\n              model.sheet.ranges?.findIndex(\n                (range) =>\n                  range.key === action.key &&\n                  inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),\n              ) ?? -1;\n            const nextRangeEntity = {\n              range: rangeToIndex(model.sheet, cursorFallbackRange),\n              key: action.key,\n              value: action.value,\n            };\n            if (index < 0) {\n              model.sheet.ranges?.push(nextRangeEntity);\n            } else if (model.sheet.ranges![index].value === action.value) {\n              model.sheet.ranges?.splice(index, 1);\n            } else {\n              model.sheet.ranges?.splice(index, 1, nextRangeEntity);\n            }\n          }\n          break;\n        case 'style':\n          if (action.unset) {\n            const index = model.sheet.ranges?.findIndex(\n              (range) =>\n                range.key === action.key &&\n                cursorFallbackRange &&\n                inRange(rangeFromIndex(model.sheet, range.range), cursorFallbackRange.from),\n            );\n            if (index >= 0) {\n              model.sheet.ranges?.splice(index, 1);\n            }\n          } else if (cursorFallbackRange) {\n            model.sheet.ranges?.push({\n              range: rangeToIndex(model.sheet, cursorFallbackRange),\n              key: action.key,\n              value: action.value,\n            });\n          }\n          break;\n        case 'comment': {\n          // TODO(Zan): We shouldn't hardcode the action ID.\n          if (cursorFallbackRange) {\n            void dispatch({\n              action: 'dxos.org/plugin/thread/action/create',\n              data: {\n                cursor: completeCellRangeToThreadCursor(cursorFallbackRange),\n                name: action.cellContent,\n                subject: model.sheet,\n              },\n            });\n          }\n        }\n      }\n    },\n    [model.sheet, cursorFallbackRange, cursor, dispatch],\n  );\n\n  return (\n    <ToolbarContextProvider onAction={handleAction}>\n      <NaturalToolbar.Root classNames={['pli-0.5 attention-surface', !hasAttention && 'opacity-20', classNames]}>\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  disabled?: (state: Range) => boolean;\n};\n\n//\n// Alignment\n//\n\nconst alignmentOptions: ButtonProps<AlignValue>[] = [\n  { value: 'start', icon: 'ph--text-align-left--regular' },\n  { value: 'center', icon: 'ph--text-align-center--regular' },\n  { value: 'end', icon: 'ph--text-align-right--regular' },\n];\n\nconst Alignment = () => {\n  const { cursor, model } = useSheetContext();\n  const { onAction } = useToolbarContext('Alignment');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  // TODO(thure): Can this O(n) call be memoized?\n  const value = cursor\n    ? model.sheet.ranges?.findLast(\n        ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),\n      )?.value\n    : undefined;\n\n  return (\n    <NaturalToolbar.ToggleGroup\n      type='single'\n      value={\n        // TODO(thure): providing `undefined` leaves the last item active which was active rather than showing none.\n        value ?? 'never'\n      }\n      onValueChange={(value: AlignValue) => onAction?.({ key: alignKey, value })}\n    >\n      {alignmentOptions.map(({ value, icon }) => (\n        <ToolbarItem\n          itemType='toggleGroupItem'\n          key={value}\n          value={value}\n          icon={icon}\n          data-testid={`grid.toolbar.${alignKey}.${value}`}\n        >\n          {t('toolbar action label', {\n            key: t(`range key ${alignKey} label`),\n            value: t(`range value ${value} label`),\n          })}\n        </ToolbarItem>\n      ))}\n    </NaturalToolbar.ToggleGroup>\n  );\n};\n\nconst styleOptions: ButtonProps<StyleValue>[] = [\n  { value: 'highlight', icon: 'ph--highlighter--regular' },\n  { value: 'softwrap', icon: 'ph--paragraph--regular' },\n];\n\nconst Styles = () => {\n  const { cursorFallbackRange, model } = useSheetContext();\n  const { onAction } = useToolbarContext('Styles');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  // TODO(thure): Can this O(n) call be memoized?\n  const activeValues = cursorFallbackRange\n    ? model.sheet.ranges\n        ?.filter(\n          ({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursorFallbackRange.from),\n        )\n        .reduce((acc, { value }) => {\n          acc.add(value);\n          return acc;\n        }, new Set())\n    : undefined;\n\n  return (\n    <>\n      {styleOptions.map(({ value, icon }) => (\n        <ToolbarItem\n          itemType='toggle'\n          key={value}\n          pressed={activeValues?.has(value)}\n          onPressedChange={(nextPressed: boolean) => {\n            onAction?.({ key: 'style', value, unset: !nextPressed });\n          }}\n          icon={icon}\n        >\n          {t('toolbar action label', {\n            key: t(`range key ${styleKey} label`),\n            value: t(`range value ${value} label`),\n          })}\n        </ToolbarItem>\n      ))}\n    </>\n  );\n};\n\n//\n// Actions\n//\n\nconst Actions = () => {\n  const { onAction } = useToolbarContext('Actions');\n  const { cursorFallbackRange, cursor, model } = useSheetContext();\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  // TODO(thure): Can this O(n) call be memoized?\n  const overlapsCommentAnchor = (model.sheet.threads ?? [])\n    .filter(nonNullable)\n    .filter((thread) => thread.status !== 'resolved')\n    .some((thread) => {\n      if (!cursorFallbackRange) {\n        return false;\n      }\n      return rangeToIndex(model.sheet, cursorFallbackRange) === thread.anchor;\n    });\n\n  const tooltipLabelKey = !cursor\n    ? 'no cursor label'\n    : overlapsCommentAnchor\n      ? 'selection overlaps existing comment 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 (!cursorFallbackRange) {\n          return;\n        }\n        return onAction?.({\n          key: 'comment',\n          value: rangeToIndex(model.sheet, cursorFallbackRange),\n          cellContent: model.getCellText(cursorFallbackRange.from),\n        });\n      }}\n      disabled={!cursorFallbackRange || overlapsCommentAnchor}\n    >\n      {t(tooltipLabelKey)}\n    </ToolbarItem>\n  );\n};\n\nexport const Toolbar = {\n  Root: ToolbarRoot,\n  Separator: ToolbarSeparator,\n  Alignment,\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", "StackItem", "React", "Icon", "FunctionEditor", "model", "cursor", "range", "useSheetContext", "value", "formula", "getCellValue", "isFormula", "graph", "mapFunctionBindingFromId", "mapFormulaIndicesToRefs", "sheet", "String", "div", "className", "rangeToA1Notation", "addressToA1Notation", "Icon", "icon", "classNames", "span", "createContext", "React", "useCallback", "useIntentDispatcher", "Icon", "Toolbar", "NaturalToolbar", "Tooltip", "useTranslation", "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", "ToolbarRoot", "id", "model", "cursorFallbackRange", "cursor", "useSheetContext", "hasAttention", "useAttention", "dispatch", "useIntentDispatcher", "handleAction", "useCallback", "action", "key", "index", "sheet", "ranges", "findIndex", "range", "inRange", "rangeFromIndex", "from", "nextRangeEntity", "rangeToIndex", "value", "push", "splice", "unset", "data", "completeCellRangeToThreadCursor", "name", "cellContent", "subject", "onAction", "alignmentOptions", "Alignment", "t", "useTranslation", "SHEET_PLUGIN", "findLast", "alignKey", "undefined", "ToggleGroup", "type", "onValueChange", "map", "data-testid", "styleOptions", "Styles", "activeValues", "filter", "reduce", "acc", "add", "Set", "pressed", "has", "onPressedChange", "nextPressed", "styleKey", "Actions", "overlapsCommentAnchor", "threads", "nonNullable", "thread", "status", "some", "anchor", "tooltipLabelKey", "onClick", "getCellText", "disabled", "Toolbar", "Separator", "SheetContainer", "space", "sheet", "role", "ignoreAttention", "graph", "useComputeGraph", "React", "SheetProvider", "StackItem", "Content", "toolbar", "statusbar", "classNames", "Toolbar", "Root", "Styles", "Alignment", "Separator", "Actions", "GridSheet", "FunctionEditor", "SheetContainer"]
-}