@dxos/plugin-sheet 0.6.14-main.8b352a0 → 0.6.14-staging.54a8bab

package/dist/types/src/types.d.ts

@@ -1,11 +1,41 @@
-import type { GraphBuilderProvides, IntentResolverProvides, MetadataRecordsProvides, SurfaceProvides, TranslationsProvides } from '@dxos/app-framework';
+import type { GraphBuilderProvides, IntentResolverProvides, MetadataRecordsProvides, SurfaceProvides, TranslationsProvides, IntentData } from '@dxos/app-framework';
 import { ref, S } 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 { type StackProvides } from '@dxos/plugin-stack';
+import { type DxGridAxis } from '@dxos/react-ui-grid';
+import { type SheetModel } from './model';
 export declare enum SheetAction {
-    CREATE = "dxos.org/plugin/sheet/action/create"
+    CREATE = "dxos.org/plugin/sheet/action/create",
+    INSERT_AXIS = "dxos.org/plugin/sheet/action/axis-insert",
+    DROP_AXIS = "dxos.org/plugin/sheet/action/axis-drop"
+}
+export type RestoreAxis = {
+    axis: DxGridAxis;
+    axisIndex: string;
+    index: number;
+    axisMeta?: S.Schema.Type<typeof RowColumnMeta>;
+    values: CellScalarValue[];
+};
+export declare namespace SheetAction {
+    type Create = IntentData<{
+        sheet: SheetType;
+    }>;
+    type InsertAxis = IntentData<{
+        model: SheetModel;
+        axis: DxGridAxis;
+        index: number;
+        count?: number;
+    }>;
+    type DropAxis = IntentData<{
+        model: SheetModel;
+        axis: DxGridAxis;
+        axisIndex: string;
+    }>;
+    type DropAxisRestore = IntentData<RestoreAxis & {
+        model: SheetModel;
+    }>;
 }
 type ThreadProvides<T> = {
     thread: {
@@ -48,9 +78,9 @@ declare const SheetType_base: import("@dxos/echo-schema").AbstractTypedObject<{
         };
     };
     ranges: {
+        readonly key: string;
         readonly value: string;
         readonly range: string;
-        readonly key: string;
     }[];
     threads?: import("@dxos/echo-schema").Ref<{
         name?: string | undefined;

package/dist/types/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAMxD,oBAAY,WAAW;IACrB,MAAM,wCAA2B;CAClC;AAKD,KAAK,cAAc,CAAC,CAAC,IAAI;IACvB,MAAM,EAAE;QACN,SAAS,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;KAC9F,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAC/C,sBAAsB,GACtB,oBAAoB,GACpB,yBAAyB,GACzB,uBAAuB,GACvB,oBAAoB,GACpB,cAAc,GACd,iBAAiB,GACjB,aAAa,GACb,cAAc,CAAC,SAAS,CAAC,CAAC;AAE5B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;AAE/D,eAAO,MAAM,SAAS;;EAKpB,CAAC;AAEH,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC;AAGxD,eAAO,MAAM,KAAK;;;;EAIhB,CAAC;AAEH,MAAM,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC;AAGhD,eAAO,MAAM,aAAa;;EAExB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqCgR,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAvoB,CAAC;;oBAA8D,CAAC;uBAAyC,CAAC;wBAAwD,CAAC;;;;;;;;2BAAsP,CAAC;qBAAuC,CAAC;;iBAA8C,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;AAlC15B,qBAAa,SAAU,SAAQ,cAuB7B;CAAG;AAEL,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.14-main.8b352a0",
+  "version": "0.6.14-staging.54a8bab",
   "description": "Braneframe sketch plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -69,32 +69,32 @@
     "re-resizable": "^6.9.17",
     "react-markdown": "^8.0.5",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.6.14-main.8b352a0",
-    "@dxos/async": "0.6.14-main.8b352a0",
-    "@dxos/client": "0.6.14-main.8b352a0",
-    "@dxos/crypto": "0.6.14-main.8b352a0",
-    "@dxos/context": "0.6.14-main.8b352a0",
-    "@dxos/debug": "0.6.14-main.8b352a0",
-    "@dxos/echo-schema": "0.6.14-main.8b352a0",
-    "@dxos/invariant": "0.6.14-main.8b352a0",
-    "@dxos/keys": "0.6.14-main.8b352a0",
-    "@dxos/log": "0.6.14-main.8b352a0",
-    "@dxos/plugin-attention": "0.6.14-main.8b352a0",
-    "@dxos/plugin-client": "0.6.14-main.8b352a0",
-    "@dxos/plugin-graph": "0.6.14-main.8b352a0",
-    "@dxos/plugin-markdown": "0.6.14-main.8b352a0",
-    "@dxos/plugin-space": "0.6.14-main.8b352a0",
-    "@dxos/plugin-script": "0.6.14-main.8b352a0",
-    "@dxos/plugin-stack": "0.6.14-main.8b352a0",
-    "@dxos/react-client": "0.6.14-main.8b352a0",
-    "@dxos/react-hooks": "0.6.14-main.8b352a0",
-    "@dxos/react-ui-attention": "0.6.14-main.8b352a0",
-    "@dxos/react-ui-editor": "0.6.14-main.8b352a0",
-    "@dxos/react-ui-data": "0.6.14-main.8b352a0",
-    "@dxos/react-ui-grid": "0.6.14-main.8b352a0",
-    "@dxos/schema": "0.6.14-main.8b352a0",
-    "@dxos/util": "0.6.14-main.8b352a0",
-    "@dxos/react-ui-list": "0.6.14-main.8b352a0"
+    "@dxos/app-framework": "0.6.14-staging.54a8bab",
+    "@dxos/async": "0.6.14-staging.54a8bab",
+    "@dxos/client": "0.6.14-staging.54a8bab",
+    "@dxos/crypto": "0.6.14-staging.54a8bab",
+    "@dxos/debug": "0.6.14-staging.54a8bab",
+    "@dxos/context": "0.6.14-staging.54a8bab",
+    "@dxos/echo-schema": "0.6.14-staging.54a8bab",
+    "@dxos/invariant": "0.6.14-staging.54a8bab",
+    "@dxos/keys": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-attention": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-client": "0.6.14-staging.54a8bab",
+    "@dxos/log": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-graph": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-markdown": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-script": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-space": "0.6.14-staging.54a8bab",
+    "@dxos/plugin-stack": "0.6.14-staging.54a8bab",
+    "@dxos/react-client": "0.6.14-staging.54a8bab",
+    "@dxos/react-hooks": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-data": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-editor": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-attention": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-grid": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-list": "0.6.14-staging.54a8bab",
+    "@dxos/util": "0.6.14-staging.54a8bab",
+    "@dxos/schema": "0.6.14-staging.54a8bab"
   },
   "devDependencies": {
     "@lezer/generator": "^1.7.1",
@@ -106,19 +106,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.6.14-main.8b352a0",
-    "@dxos/random": "0.6.14-main.8b352a0",
-    "@dxos/react-ui-syntax-highlighter": "0.6.14-main.8b352a0",
-    "@dxos/react-ui": "0.6.14-main.8b352a0",
-    "@dxos/react-ui-theme": "0.6.14-main.8b352a0",
-    "@dxos/storybook-utils": "0.6.14-main.8b352a0",
-    "@dxos/react-ui-types": "0.6.14-main.8b352a0"
+    "@dxos/echo-generator": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui": "0.6.14-staging.54a8bab",
+    "@dxos/random": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-syntax-highlighter": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-theme": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-types": "0.6.14-staging.54a8bab",
+    "@dxos/storybook-utils": "0.6.14-staging.54a8bab"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.6.14-main.8b352a0",
-    "@dxos/react-ui-theme": "0.6.14-main.8b352a0"
+    "@dxos/react-ui": "0.6.14-staging.54a8bab",
+    "@dxos/react-ui-theme": "0.6.14-staging.54a8bab"
   },
   "publishConfig": {
     "access": "public"

package/src/SheetPlugin.tsx

@@ -175,6 +175,26 @@ export const SheetPlugin = (): PluginDefinition<SheetPluginProvides> => {
             case SheetAction.CREATE: {
               return { data: createSheet() };
             }
+            case SheetAction.INSERT_AXIS: {
+              const { model, axis, index, count } = intent.data as SheetAction.InsertAxis;
+              const _indices = model[axis === 'col' ? 'insertColumns' : 'insertRows'](index, count);
+              return;
+            }
+            case SheetAction.DROP_AXIS: {
+              if (!intent.undo) {
+                const { model, axis, axisIndex } = intent.data as SheetAction.DropAxis;
+                const undoData = model[axis === 'col' ? 'dropColumn' : 'dropRow'](axisIndex);
+                return {
+                  undoable: {
+                    message: translations[0]['en-US'][SHEET_PLUGIN][`${axis} dropped label`],
+                    data: { ...undoData, model },
+                  },
+                };
+              } else {
+                const { model, ...undoData } = intent.data as SheetAction.DropAxisRestore;
+                model[undoData.axis === 'col' ? 'restoreColumn' : 'restoreRow'](undoData);
+              }
+            }
           }
         },
       },

package/src/components/GridSheet/GridSheet.tsx

@@ -13,6 +13,7 @@ import React, {
   useState,
 } from 'react';
 
+import { useIntentDispatcher } from '@dxos/app-framework';
 import { DropdownMenu, Icon, useTranslation } from '@dxos/react-ui';
 import { useAttention } from '@dxos/react-ui-attention';
 import {
@@ -31,6 +32,7 @@ import { DEFAULT_COLUMNS, DEFAULT_ROWS, rangeToA1Notation, type CellRange } from
 import { rangeExtension, sheetExtension, type RangeController } from '../../extensions';
 import { useSelectThreadOnCellFocus, useUpdateFocusedCellOnThreadSelection } from '../../integrations';
 import { SHEET_PLUGIN } from '../../meta';
+import { SheetAction } from '../../types';
 import { useSheetContext } from '../SheetContext';
 
 const inertPosition: DxGridPosition = { plane: 'grid', col: 0, row: 0 };
@@ -61,6 +63,8 @@ export const GridSheet = () => {
     useSheetContext();
   // NOTE(thure): using `useState` instead of `useRef` works with refs provided by `@lit/react` and gives us a reliable dependency for `useEffect` whereas `useLayoutEffect` does not guarantee the element will be defined.
   const [dxGrid, setDxGrid] = useState<DxGridElement | null>(null);
+  const [extraplanarFocus, setExtraplanarFocus] = useState<DxGridPosition | null>(null);
+  const dispatch = useIntentDispatcher();
   const rangeController = useRef<RangeController>();
   const { hasAttention } = useAttention(id);
 
@@ -68,8 +72,15 @@ export const GridSheet = () => {
     (event: FocusEvent) => {
       if (!editing) {
         const cell = closestCell(event.target);
-        if (cell && cell.plane === 'grid') {
-          setCursor({ col: cell.col, row: cell.row });
+        if (cell) {
+          if (cell.plane === 'grid') {
+            setCursor({ col: cell.col, row: cell.row });
+            setExtraplanarFocus(null);
+          } else {
+            setExtraplanarFocus(cell);
+          }
+        } else {
+          setExtraplanarFocus(null);
         }
       }
     },
@@ -144,6 +155,34 @@ export const GridSheet = () => {
     [hasAttention],
   );
 
+  const selectEntireAxis = useCallback(
+    (pos: DxGridPosition) => {
+      switch (pos.plane) {
+        case 'frozenRowsStart':
+          return dxGrid?.setSelection({
+            start: { col: pos.col, row: 0, plane: 'grid' },
+            end: { col: pos.col, row: model.sheet.rows.length - 1, plane: 'grid' },
+          });
+        case 'frozenColsStart':
+          return dxGrid?.setSelection({
+            start: { row: pos.row, col: 0, plane: 'grid' },
+            end: { row: pos.row, col: model.sheet.columns.length - 1, plane: 'grid' },
+          });
+      }
+    },
+    [dxGrid, model.sheet],
+  );
+
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      const cell = closestCell(event.target);
+      if (cell) {
+        selectEntireAxis(cell);
+      }
+    },
+    [selectEntireAxis],
+  );
+
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       switch (event.key) {
@@ -151,6 +190,16 @@ export const GridSheet = () => {
         case 'Delete':
           event.preventDefault();
           return cursorFallbackRange && model.clear(cursorFallbackRange);
+        case 'Enter':
+        case 'Space':
+          if (dxGrid && extraplanarFocus) {
+            switch (extraplanarFocus.plane) {
+              case 'frozenRowsStart':
+              case 'frozenColsStart':
+                event.preventDefault();
+                return selectEntireAxis(extraplanarFocus);
+            }
+          }
       }
       if (event.metaKey || event.ctrlKey) {
         switch (event.key) {
@@ -176,7 +225,7 @@ export const GridSheet = () => {
         }
       }
     },
-    [cursorFallbackRange, model, cursor],
+    [cursorFallbackRange, model, cursor, extraplanarFocus, selectEntireAxis],
   );
 
   const contextMenuAnchorRef = useRef<HTMLButtonElement | null>(null);
@@ -193,20 +242,31 @@ export const GridSheet = () => {
   }, []);
 
   const handleAxisMenuAction = useCallback(
-    (operation: 'add-before' | 'add-after' | 'remove') => {
+    (operation: 'insert-before' | 'insert-after' | 'drop') => {
       switch (operation) {
-        case 'add-before':
-        case 'add-after':
-          model[contextMenuAxis === 'col' ? 'insertColumns' : 'insertRows'](
-            contextMenuOpen![contextMenuAxis] + (operation === 'add-before' ? 0 : 1),
-            1,
-          );
+        case 'insert-before':
+        case 'insert-after':
+          return dispatch({
+            action: SheetAction.INSERT_AXIS,
+            data: {
+              model,
+              axis: contextMenuAxis,
+              index: contextMenuOpen![contextMenuAxis] + (operation === 'insert-before' ? 0 : 1),
+            } satisfies SheetAction.InsertAxis,
+          });
           break;
-        case 'remove':
-        // console.warn('[model does not implement]');
+        case 'drop':
+          return dispatch({
+            action: SheetAction.DROP_AXIS,
+            data: {
+              model,
+              axis: contextMenuAxis,
+              axisIndex: model.sheet[contextMenuAxis === 'row' ? 'rows' : 'columns'][contextMenuOpen![contextMenuAxis]],
+            } satisfies SheetAction.DropAxis,
+          });
       }
     },
-    [contextMenuAxis, contextMenuOpen, model],
+    [contextMenuAxis, contextMenuOpen, model, dispatch],
   );
 
   const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
@@ -257,6 +317,7 @@ export const GridSheet = () => {
         onWheelCapture={handleWheel}
         onKeyDown={handleKeyDown}
         onContextMenu={handleContextMenu}
+        onClick={handleClick}
         overscroll='inline'
         className='[--dx-grid-base:var(--surface-bg)]'
         activeRefs={activeRefs}
@@ -270,21 +331,21 @@ export const GridSheet = () => {
         <DropdownMenu.VirtualTrigger virtualRef={contextMenuAnchorRef} />
         <DropdownMenu.Content side={contextMenuAxis === 'col' ? 'bottom' : 'right'} sideOffset={4} collisionPadding={8}>
           <DropdownMenu.Viewport>
-            <DropdownMenu.Item onClick={() => handleAxisMenuAction('add-before')}>
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('insert-before')}>
               <Icon
                 size={5}
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-left--regular' : 'ph--rows-plus-top--regular'}
               />
               <span>{t(`add ${contextMenuAxis} before label`)}</span>
             </DropdownMenu.Item>
-            <DropdownMenu.Item onClick={() => handleAxisMenuAction('add-after')}>
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('insert-after')}>
               <Icon
                 size={5}
                 icon={contextMenuAxis === 'col' ? 'ph--columns-plus-right--regular' : 'ph--rows-plus-bottom--regular'}
               />
               <span>{t(`add ${contextMenuAxis} after label`)}</span>
             </DropdownMenu.Item>
-            <DropdownMenu.Item disabled onClick={() => handleAxisMenuAction('remove')}>
+            <DropdownMenu.Item onClick={() => handleAxisMenuAction('drop')}>
               <Icon size={5} icon='ph--backspace--regular' />
               <span>{t(`delete ${contextMenuAxis} label`)}</span>
             </DropdownMenu.Item>

package/src/components/GridSheet/util.ts

@@ -67,16 +67,18 @@ const projectCellProps = (model: SheetModel, col: number, row: number): DxGridCe
     })
     .map((thread) => fullyQualifiedId(thread!))
     .join(' ');
-  const type = model.getValueType(address);
+
+  const description = model.getValueDescription(address);
+  const type = description?.type;
+  const format = description?.format;
   const classNames = ranges?.map(cellClassNameForRange).reverse();
 
   return {
-    value: parseValue(type, rawValue),
-    className: mx(cellClassesForFieldType(type), threadRefs && commentedClassName, classNames),
+    value: parseValue({ type, format, value: rawValue }),
+    className: mx(cellClassesForFieldType({ type, format }), threadRefs && commentedClassName, classNames),
     dataRefs: threadRefs,
   };
 };
-
 const gridCellGetter = (model: SheetModel) => {
   // TODO(thure): Actually use the cache.
   const cachedGridCells: DxGridPlaneCells = {};
@@ -140,7 +142,11 @@ export const useSheetModelDxGridProps = (
       dxGrid?.requestUpdate('initialCells');
     };
     cellsAccessor.handle.addListener('change', handleCellsUpdate);
-    return () => cellsAccessor.handle.removeListener('change', handleCellsUpdate);
+    const unsubscribe = model.graph.update.on(handleCellsUpdate);
+    return () => {
+      cellsAccessor.handle.removeListener('change', handleCellsUpdate);
+      unsubscribe();
+    };
   }, [model, dxGrid]);
 
   useEffect(() => {
@@ -158,7 +164,7 @@ export const useSheetModelDxGridProps = (
       columnMetaAccessor.handle.removeListener('change', handleColumnMetaUpdate);
       rowMetaAccessor.handle.removeListener('change', handleRowMetaUpdate);
     };
-  }, [model]);
+  }, [model, dxGrid]);
 
   return { columns, rows };
 };

package/src/components/SheetContainer/SheetContainer.stories.tsx

@@ -11,6 +11,7 @@ import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { SheetContainer } from './SheetContainer';
 import { createTestCells, useTestSheet, withComputeGraphDecorator } from '../../testing';
+import translations from '../../translations';
 import { SheetType } from '../../types';
 import { useComputeGraph } from '../ComputeGraph';
 
@@ -38,6 +39,7 @@ const meta: Meta = {
       classNames: 'grid grid-cols-1 grid-rows-[min-content_minmax(0,1fr)_min-content]',
     }),
   ],
+  parameters: { translations },
 };
 
 export default meta;

package/src/components/Toolbar/Toolbar.tsx

@@ -3,7 +3,7 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+import React, { type PropsWithChildren, useCallback } from 'react';
 
 import { useIntentDispatcher } from '@dxos/app-framework';
 import {
@@ -28,6 +28,7 @@ import {
   inRange,
   rangeFromIndex,
   rangeToIndex,
+  styleKey,
   type StyleKey,
   type StyleValue,
 } from '../../defs';
@@ -89,10 +90,11 @@ type CommentAction = { key: CommentKey; value: CommentValue; cellContent?: strin
 type StyleAction = { key: StyleKey; value: StyleValue };
 
 export type ToolbarAction = StyleAction | AlignAction | CommentAction;
+export type ToolbarActionAnnotated = ToolbarAction & { unset?: boolean };
 
 export type ToolbarActionType = ToolbarAction['key'];
 
-export type ToolbarActionHandler = (action: ToolbarAction) => void;
+export type ToolbarActionHandler = (action: ToolbarActionAnnotated) => void;
 
 export type ToolbarProps = ThemedClassName<
   PropsWithChildren<{
@@ -100,9 +102,9 @@ export type ToolbarProps = ThemedClassName<
   }>
 >;
 
-const [ToolbarContextProvider, useToolbarContext] = createContext<{ onAction: (action: ToolbarAction) => void }>(
-  'Toolbar',
-);
+const [ToolbarContextProvider, useToolbarContext] = createContext<{
+  onAction: (action: ToolbarActionAnnotated) => void;
+}>('Toolbar');
 
 // TODO(Zan): Factor out, copied this from MarkdownPlugin.
 const sectionToolbarLayout =
@@ -117,13 +119,16 @@ const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
 
   // TODO(Zan): Externalize the toolbar action handler. E.g., Toolbar/keys should both fire events.
   const handleAction = useCallback(
-    (action: ToolbarAction) => {
+    (action: ToolbarActionAnnotated) => {
       switch (action.key) {
         case 'alignment':
-          if (cursor && cursorFallbackRange) {
-            const index = model.sheet.ranges?.findIndex(
-              (range) => range.key === action.key && inRange(rangeFromIndex(model.sheet, range.range), cursor),
-            );
+          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,
@@ -131,14 +136,21 @@ const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
             };
             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.value === 'unset') {
-            const index = model.sheet.ranges?.findIndex((range) => range.key === action.key);
+          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);
             }
@@ -172,6 +184,7 @@ const ToolbarRoot = ({ children, role, classNames }: ToolbarProps) => {
     <ToolbarContextProvider onAction={handleAction}>
       <NaturalToolbar.Root
         classNames={[
+          'pli-0.5',
           ...(role === 'section'
             ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]
             : ['attention-surface']),
@@ -207,20 +220,20 @@ const Alignment = () => {
   const { onAction } = useToolbarContext('Alignment');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const value = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges?.find(
-            ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
-          )?.value
-        : undefined,
-    [cursor, model.sheet.ranges],
-  );
+  // TODO(thure): Can this O(n) call be memoized?
+  const value = cursor
+    ? model.sheet.ranges?.findLast(
+        ({ range, key }) => key === alignKey && inRange(rangeFromIndex(model.sheet, range), cursor),
+      )?.value
+    : undefined;
 
   return (
     <NaturalToolbar.ToggleGroup
       type='single'
-      value={value}
+      value={
+        // TODO(thure): providing `undefined` leaves the last item active which was active rather than showing none.
+        value ?? 'never'
+      }
       onValueChange={(value: AlignValue) => onAction?.({ key: alignKey, value })}
     >
       {alignmentOptions.map(({ value, icon }) => (
@@ -235,25 +248,27 @@ const Alignment = () => {
   );
 };
 
-const styleOptions: ButtonProps<StyleValue>[] = [{ value: 'highlight', icon: 'ph--highlighter--regular' }];
+const styleOptions: ButtonProps<StyleValue>[] = [
+  { value: 'highlight', icon: 'ph--highlighter--regular' },
+  { value: 'softwrap', icon: 'ph--paragraph--regular' },
+];
 
 const Styles = () => {
-  const { cursor, model } = useSheetContext();
+  const { cursorFallbackRange, model } = useSheetContext();
   const { onAction } = useToolbarContext('Styles');
   const { t } = useTranslation(SHEET_PLUGIN);
 
-  const activeValues = useMemo(
-    () =>
-      cursor
-        ? model.sheet.ranges
-            ?.filter(({ range, key }) => key === 'style' && inRange(rangeFromIndex(model.sheet, range), cursor))
-            .reduce((acc, { value }) => {
-              acc.add(value);
-              return acc;
-            }, new Set())
-        : undefined,
-    [cursor, model.sheet.ranges],
-  );
+  // TODO(thure): Can this O(n) call be memoized?
+  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;
+        }, new Set())
+    : undefined;
 
   return (
     <>
@@ -262,10 +277,15 @@ const Styles = () => {
           itemType='toggle'
           key={value}
           pressed={activeValues?.has(value)}
-          onPressedChange={(nextPressed: boolean) => onAction?.({ key: 'style', value: nextPressed ? value : 'unset' })}
+          onPressedChange={(nextPressed: boolean) => {
+            onAction?.({ key: 'style', value, unset: !nextPressed });
+          }}
           icon={icon}
         >
-          {t(`toolbar ${value} label`)}
+          {t('toolbar action label', {
+            key: t(`range key ${styleKey} label`),
+            value: t(`range value ${value} label`),
+          })}
         </ToolbarItem>
       ))}
     </>
@@ -281,6 +301,7 @@ const Actions = () => {
   const { cursorFallbackRange, cursor, model } = useSheetContext();
   const { t } = useTranslation(SHEET_PLUGIN);
 
+  // TODO(thure): Can this O(n) call be memoized?
   const overlapsCommentAnchor = (model.sheet.threads ?? [])
     .filter(nonNullable)
     .filter((thread) => thread.status !== 'resolved')
@@ -304,16 +325,16 @@ const Actions = () => {
       icon='ph--chat-text--regular'
       data-testid='editor.toolbar.comment'
       onClick={() => {
-        if (!(cursorFallbackRange && cursor)) {
+        if (!cursorFallbackRange) {
           return;
         }
         return onAction?.({
           key: 'comment',
           value: rangeToIndex(model.sheet, cursorFallbackRange),
-          cellContent: model.getCellText(cursor),
+          cellContent: model.getCellText(cursorFallbackRange.from),
         });
       }}
-      disabled={!cursor || overlapsCommentAnchor}
+      disabled={!cursorFallbackRange || overlapsCommentAnchor}
     >
       {t(tooltipLabelKey)}
     </ToolbarItem>