@dxos/plugin-sheet 0.6.13-main.09887cd → 0.6.13-main.ed424a1

package/dist/lib/node/{SheetContainer-YSQGJD7K.cjs → SheetContainer-J7XROAMN.cjs}

@@ -26,27 +26,27 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var SheetContainer_YSQGJD7K_exports = {};
-__export(SheetContainer_YSQGJD7K_exports, {
+var SheetContainer_J7XROAMN_exports = {};
+__export(SheetContainer_J7XROAMN_exports, {
   default: () => SheetContainer_default
 });
-module.exports = __toCommonJS(SheetContainer_YSQGJD7K_exports);
-var import_chunk_6F43RV45 = require("./chunk-6F43RV45.cjs");
-var import_chunk_ER3PM7GD = require("./chunk-ER3PM7GD.cjs");
+module.exports = __toCommonJS(SheetContainer_J7XROAMN_exports);
+var import_chunk_AXQZA2YS = require("./chunk-AXQZA2YS.cjs");
+var import_chunk_NZARD7UP = require("./chunk-NZARD7UP.cjs");
 var import_chunk_QIFIGEKV = require("./chunk-QIFIGEKV.cjs");
 var import_chunk_5XPK2V4A = require("./chunk-5XPK2V4A.cjs");
 var import_react = __toESM(require("react"));
-var import_app_framework = require("@dxos/app-framework");
 var import_react2 = __toESM(require("react"));
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_react_context = require("@radix-ui/react-context");
 var import_react3 = __toESM(require("react"));
+var import_app_framework = require("@dxos/app-framework");
 var import_react_ui2 = require("@dxos/react-ui");
 var import_react_ui_attention = require("@dxos/react-ui-attention");
 var import_util = require("@dxos/util");
 var FunctionEditor = () => {
-  const { model, cursor, range } = (0, import_chunk_6F43RV45.useSheetContext)();
+  const { model, cursor, range } = (0, import_chunk_AXQZA2YS.useSheetContext)();
   let value;
   let isFormula = false;
   if (cursor) {
@@ -64,7 +64,7 @@ var FunctionEditor = () => {
     className: "flex gap-4 items-center"
   }, /* @__PURE__ */ import_react2.default.createElement("div", {
     className: "flex w-16 items-center font-mono"
-  }, range && (0, import_chunk_6F43RV45.rangeToA1Notation)(range) || cursor && (0, import_chunk_6F43RV45.addressToA1Notation)(cursor)), /* @__PURE__ */ import_react2.default.createElement("div", {
+  }, range && (0, import_chunk_AXQZA2YS.rangeToA1Notation)(range) || cursor && (0, import_chunk_AXQZA2YS.addressToA1Notation)(cursor)), /* @__PURE__ */ import_react2.default.createElement("div", {
     className: "flex gap-2 items-center"
   }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Icon, {
     icon: "ph--function--regular",
@@ -102,11 +102,74 @@ var ToolbarItem = ({ itemType, icon, children, ...props }) => {
 };
 var [ToolbarContextProvider, useToolbarContext] = (0, import_react_context.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 } = (0, import_chunk_6F43RV45.useSheetContext)();
+var ToolbarRoot = ({ children, role, classNames }) => {
+  const { id, model, range, cursor } = (0, import_chunk_AXQZA2YS.useSheetContext)();
   const { hasAttention } = (0, import_react_ui_attention.useAttention)(id);
+  const dispatch = (0, import_app_framework.useIntentDispatcher)();
+  const handleAction = (0, import_react3.useCallback)((action) => {
+    switch (action.key) {
+      case "align":
+        if (cursor) {
+          const index = model.sheet.ranges?.findIndex((range2) => range2.key === action.key && (0, import_chunk_AXQZA2YS.inRange)(range2.range, cursor));
+          const nextRange = range ? {
+            from: range.from,
+            to: range.to ?? range.from
+          } : {
+            from: cursor,
+            to: cursor
+          };
+          const nextRangeEntity = {
+            range: nextRange,
+            key: action.key,
+            value: action.value
+          };
+          if (index < 0) {
+            model.sheet.ranges?.push(nextRangeEntity);
+          } else {
+            model.sheet.ranges?.splice(index, 1, nextRangeEntity);
+          }
+        }
+        break;
+      case "style":
+        if (action.value === "unset") {
+          const index = model.sheet.ranges?.findIndex((range2) => range2.key === action.key);
+          if (index >= 0) {
+            model.sheet.ranges?.splice(index, 1);
+          }
+        } else if (range || cursor) {
+          const nextRange = range ? {
+            from: range.from,
+            to: range.to ?? range.from
+          } : {
+            from: cursor,
+            to: cursor
+          };
+          model.sheet.ranges?.push({
+            range: nextRange,
+            key: action.key,
+            value: action.value
+          });
+        }
+        break;
+      case "comment": {
+        void dispatch({
+          action: "dxos.org/plugin/thread/action/create",
+          data: {
+            cursor: action.value,
+            name: action.cellContent,
+            subject: model.sheet
+          }
+        });
+      }
+    }
+  }, [
+    model.sheet,
+    range,
+    cursor,
+    dispatch
+  ]);
   return /* @__PURE__ */ import_react3.default.createElement(ToolbarContextProvider, {
-    onAction
+    onAction: handleAction
   }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.Root, {
     classNames: [
       ...role === "section" ? [
@@ -120,98 +183,79 @@ var ToolbarRoot = ({ children, onAction, role, 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 } = (0, import_react_ui2.useTranslation)(import_chunk_QIFIGEKV.SHEET_PLUGIN);
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.ToggleGroup, {
-    type: "single"
-  }, formatOptions.map(({ value, getState, icon }) => /* @__PURE__ */ import_react3.default.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: "start",
+    icon: "ph--text-align-left--regular"
   },
   {
     value: "center",
-    icon: "ph--text-align-center--regular",
-    getState: (state) => false
+    icon: "ph--text-align-center--regular"
   },
   {
-    value: "right",
-    icon: "ph--text-align-right--regular",
-    getState: (state) => false
+    value: "end",
+    icon: "ph--text-align-right--regular"
   }
 ];
 var Alignment = () => {
+  const { cursor, model } = (0, import_chunk_AXQZA2YS.useSheetContext)();
   const { onAction } = useToolbarContext("Alignment");
   const { t } = (0, import_react_ui2.useTranslation)(import_chunk_QIFIGEKV.SHEET_PLUGIN);
+  const value = (0, import_react3.useMemo)(() => cursor ? model.sheet.ranges?.find(({ range, key }) => key === "alignment" && (0, import_chunk_AXQZA2YS.inRange)(range, cursor))?.value : void 0, [
+    cursor,
+    model.sheet.ranges
+  ]);
   return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Toolbar.ToggleGroup, {
     type: "single",
-    // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
-    // disabled={state?.blockType === 'codeblock'}
-    onValueChange: (value) => onAction?.({
-      type: "align",
-      value
+    value,
+    onValueChange: (value2) => onAction?.({
+      key: "align",
+      value: value2
     })
-  }, alignmentOptions.map(({ value, getState, icon }) => /* @__PURE__ */ import_react3.default.createElement(ToolbarItem, {
+  }, alignmentOptions.map(({ value: value2, icon }) => /* @__PURE__ */ import_react3.default.createElement(ToolbarItem, {
     itemType: "toggleGroupItem",
-    key: value,
-    value,
+    key: value2,
+    value: value2,
     icon
-  }, t(`toolbar ${value} label`))));
+  }, t(`toolbar ${value2} label`))));
 };
 var styleOptions = [
   {
     value: "highlight",
-    icon: "ph--highlighter--regular",
-    getState: (state) => false
+    icon: "ph--highlighter--regular"
   }
 ];
 var Styles = () => {
+  const { cursor, model } = (0, import_chunk_AXQZA2YS.useSheetContext)();
   const { onAction } = useToolbarContext("Styles");
   const { t } = (0, import_react_ui2.useTranslation)(import_chunk_QIFIGEKV.SHEET_PLUGIN);
-  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, styleOptions.map(({ value, getState, icon }) => /* @__PURE__ */ import_react3.default.createElement(ToolbarItem, {
+  const activeValues = (0, import_react3.useMemo)(() => cursor ? model.sheet.ranges?.filter(({ range, key }) => key === "style" && (0, import_chunk_AXQZA2YS.inRange)(range, cursor)).reduce((acc, { value }) => {
+    acc.add(value);
+    return acc;
+  }, /* @__PURE__ */ new Set()) : void 0, [
+    cursor,
+    model.sheet.ranges
+  ]);
+  return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, styleOptions.map(({ value, icon }) => /* @__PURE__ */ import_react3.default.createElement(ToolbarItem, {
     itemType: "toggle",
     key: value,
+    pressed: activeValues?.has(value),
     onPressedChange: (nextPressed) => onAction?.({
-      type: "style",
-      value: nextPressed ? "highlight" : "unset"
+      key: "style",
+      value: nextPressed ? value : "unset"
     }),
     icon
   }, t(`toolbar ${value} label`))));
 };
 var Actions = () => {
   const { onAction } = useToolbarContext("Actions");
-  const { cursor, range, model } = (0, import_chunk_6F43RV45.useSheetContext)();
+  const { cursor, range, model } = (0, import_chunk_AXQZA2YS.useSheetContext)();
   const { t } = (0, import_react_ui2.useTranslation)(import_chunk_QIFIGEKV.SHEET_PLUGIN);
   const overlapsCommentAnchor = (model.sheet.threads ?? []).filter(import_util.nonNullable).filter((thread) => thread.status !== "resolved").some((thread) => {
     if (!cursor) {
       return false;
     }
-    return (0, import_chunk_6F43RV45.addressToIndex)(model.sheet, cursor) === thread.anchor;
+    return (0, import_chunk_AXQZA2YS.addressToIndex)(model.sheet, cursor) === thread.anchor;
   });
   const hasCursor = !!cursor;
   const cursorOnly = hasCursor && !range && !overlapsCommentAnchor;
@@ -226,8 +270,8 @@ var Actions = () => {
         return;
       }
       return onAction?.({
-        type: "comment",
-        anchor: (0, import_chunk_6F43RV45.addressToIndex)(model.sheet, cursor),
+        key: "comment",
+        value: (0, import_chunk_AXQZA2YS.addressToIndex)(model.sheet, cursor),
         cellContent: model.getCellText(cursor)
       });
     },
@@ -238,39 +282,19 @@ var Toolbar = {
   Root: ToolbarRoot,
   Separator: ToolbarSeparator,
   Alignment,
-  Format,
   Styles,
   Actions
 };
 var SheetContainer = ({ graph, sheet, role }) => {
-  const dispatch = (0, import_app_framework.useIntentDispatcher)();
-  const handleAction = (0, import_react.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__ */ import_react.default.createElement(import_chunk_6F43RV45.SheetProvider, {
+  return /* @__PURE__ */ import_react.default.createElement(import_chunk_AXQZA2YS.SheetProvider, {
     sheet,
     graph
   }, /* @__PURE__ */ import_react.default.createElement(Toolbar.Root, {
-    onAction: handleAction,
     role
-  }, /* @__PURE__ */ import_react.default.createElement(Toolbar.Styles, null), /* @__PURE__ */ import_react.default.createElement(Toolbar.Format, null), /* @__PURE__ */ import_react.default.createElement(Toolbar.Alignment, null), /* @__PURE__ */ import_react.default.createElement(Toolbar.Separator, null), /* @__PURE__ */ import_react.default.createElement(Toolbar.Actions, null)), /* @__PURE__ */ import_react.default.createElement("div", {
+  }, /* @__PURE__ */ import_react.default.createElement(Toolbar.Styles, null), /* @__PURE__ */ import_react.default.createElement(Toolbar.Alignment, null), /* @__PURE__ */ import_react.default.createElement(Toolbar.Separator, null), /* @__PURE__ */ import_react.default.createElement(Toolbar.Actions, null)), /* @__PURE__ */ import_react.default.createElement("div", {
     role: "none",
     className: "border-bs border-separator grid cols-1 rows-[1fr_min-content] min-bs-0"
-  }, /* @__PURE__ */ import_react.default.createElement(import_chunk_6F43RV45.GridSheet, null), /* @__PURE__ */ import_react.default.createElement(FunctionEditor, null)));
+  }, /* @__PURE__ */ import_react.default.createElement(import_chunk_AXQZA2YS.GridSheet, null), /* @__PURE__ */ import_react.default.createElement(FunctionEditor, null)));
 };
 var SheetContainer_default = SheetContainer;
-//# sourceMappingURL=SheetContainer-YSQGJD7K.cjs.map
+//# sourceMappingURL=SheetContainer-J7XROAMN.cjs.map

package/dist/lib/node/SheetContainer-J7XROAMN.cjs.map

@@ -0,0 +1,7 @@
+{
+  "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 { FunctionEditor } from '../FunctionEditor';\nimport { GridSheet } from '../GridSheet';\nimport { SheetProvider, type SheetProviderProps } from '../SheetContext';\nimport { Toolbar } from '../Toolbar';\n\nexport const SheetContainer = ({ graph, sheet, role }: SheetProviderProps & { role?: string }) => {\n  return (\n    <SheetProvider sheet={sheet} graph={graph}>\n      <Toolbar.Root role={role}>\n        <Toolbar.Styles />\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, useCallback, useMemo } from 'react';\n\nimport { useIntentDispatcher } from '@dxos/app-framework';\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 {\n  addressToIndex,\n  type AlignKey,\n  type AlignValue,\n  type CommentKey,\n  type CommentValue,\n  inRange,\n  type StyleKey,\n  type StyleValue,\n} from '../../defs';\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;\n\nexport type ToolbarActionType = ToolbarAction['key'];\n\nexport type ToolbarActionHandler = (action: ToolbarAction) => void;\n\nexport type ToolbarProps = ThemedClassName<\n  PropsWithChildren<{\n    role?: string;\n  }>\n>;\n\nconst [ToolbarContextProvider, useToolbarContext] = createContext<{ onAction: (action: ToolbarAction) => void }>(\n  'Toolbar',\n);\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\ntype Range = SheetType['ranges'][number];\n\nconst ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {\n  const { id, model, range, cursor } = useSheetContext();\n  const { hasAttention } = useAttention(id);\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.key) {\n        case 'align':\n          if (cursor) {\n            const index = model.sheet.ranges?.findIndex(\n              (range) => range.key === action.key && inRange(range.range, cursor),\n            );\n            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };\n            const nextRangeEntity = {\n              range: nextRange as Range['range'],\n              key: action.key,\n              value: action.value,\n            };\n            if (index < 0) {\n              model.sheet.ranges?.push(nextRangeEntity);\n            } else {\n              model.sheet.ranges?.splice(index, 1, nextRangeEntity);\n            }\n          }\n          break;\n        case 'style':\n          if (action.value === 'unset') {\n            const index = model.sheet.ranges?.findIndex((range) => range.key === action.key);\n            if (index >= 0) {\n              model.sheet.ranges?.splice(index, 1);\n            }\n          } else if (range || cursor) {\n            const nextRange = range ? { from: range.from, to: range.to ?? range.from } : { from: cursor, to: cursor };\n            model.sheet.ranges?.push({\n              range: nextRange as Range['range'],\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          void dispatch({\n            action: 'dxos.org/plugin/thread/action/create',\n            data: {\n              cursor: action.value,\n              name: action.cellContent,\n              subject: model.sheet,\n            },\n          });\n        }\n      }\n    },\n    [model.sheet, range, cursor, dispatch],\n  );\n\n  return (\n    <ToolbarContextProvider onAction={handleAction}>\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  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  const value = useMemo(\n    () =>\n      cursor\n        ? model.sheet.ranges?.find(({ range, key }) => key === 'alignment' && inRange(range, cursor))?.value\n        : undefined,\n    [cursor, model.sheet.ranges],\n  );\n\n  return (\n    <NaturalToolbar.ToggleGroup\n      type='single'\n      value={value}\n      onValueChange={(value: AlignValue) => onAction?.({ key: 'align', value })}\n    >\n      {alignmentOptions.map(({ value, 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>[] = [{ value: 'highlight', icon: 'ph--highlighter--regular' }];\n\nconst Styles = () => {\n  const { cursor, model } = useSheetContext();\n  const { onAction } = useToolbarContext('Styles');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  const activeValues = useMemo(\n    () =>\n      cursor\n        ? model.sheet.ranges\n            ?.filter(({ range, key }) => key === 'style' && inRange(range, cursor))\n            .reduce((acc, { value }) => {\n              acc.add(value);\n              return acc;\n            }, new Set())\n        : undefined,\n    [cursor, model.sheet.ranges],\n  );\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) => onAction?.({ key: 'style', value: nextPressed ? value : 'unset' })}\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          key: 'comment',\n          value: 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  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": ["import_react", "import_react_ui", "FunctionEditor", "model", "cursor", "range", "useSheetContext", "value", "isFormula", "getCellValue", "charAt", "graph", "mapFunctionBindingFromId", "mapFormulaIndicesToRefs", "String", "React", "div", "className", "mx", "rangeToA1Notation", "addressToA1Notation", "Icon", "icon", "classNames", "span", "buttonStyles", "tooltipProps", "side", "ToolbarSeparator", "role", "ToolbarItem", "itemType", "children", "props", "Invoker", "NaturalToolbar", "ToggleGroupItem", "Toggle", "Button", "Tooltip", "Root", "Trigger", "asChild", "variant", "size", "Portal", "Content", "Arrow", "ToolbarContextProvider", "useToolbarContext", "createContext", "sectionToolbarLayout", "ToolbarRoot", "id", "hasAttention", "useAttention", "dispatch", "useIntentDispatcher", "handleAction", "useCallback", "action", "key", "index", "sheet", "ranges", "findIndex", "inRange", "nextRange", "from", "to", "nextRangeEntity", "push", "splice", "data", "name", "cellContent", "subject", "onAction", "alignmentOptions", "Alignment", "t", "useTranslation", "SHEET_PLUGIN", "useMemo", "find", "undefined", "ToggleGroup", "type", "onValueChange", "map", "styleOptions", "Styles", "activeValues", "filter", "reduce", "acc", "add", "Set", "pressed", "has", "onPressedChange", "nextPressed", "Actions", "overlapsCommentAnchor", "threads", "nonNullable", "thread", "status", "some", "addressToIndex", "anchor", "hasCursor", "cursorOnly", "tooltipLabelKey", "data-testid", "onClick", "getCellText", "disabled", "Toolbar", "Separator", "SheetContainer", "SheetProvider", "GridSheet"]
+}