@dxos/plugin-sheet 0.6.14-main.8b352a0 → 0.6.14-staging.8758a12

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":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACpB,UAAU,EACX,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;AACxD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,oBAAY,WAAW;IACrB,MAAM,wCAA2B;IACjC,WAAW,6CAAgC;IAC3C,SAAS,2CAA8B;CACxC;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,UAAU,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,aAAa,CAAC,CAAC;IAC/C,MAAM,EAAE,eAAe,EAAE,CAAC;CAC3B,CAAC;AAEF,yBAAiB,WAAW,CAAC;IAC3B,KAAY,MAAM,GAAG,UAAU,CAAC;QAAE,KAAK,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IACtD,KAAY,UAAU,GAAG,UAAU,CAAC;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,IAAI,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5G,KAAY,QAAQ,GAAG,UAAU,CAAC;QAAE,KAAK,EAAE,UAAU,CAAC;QAAC,IAAI,EAAE,UAAU,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC9F,KAAY,eAAe,GAAG,UAAU,CAAC,WAAW,GAAG;QAAE,KAAK,EAAE,UAAU,CAAA;KAAE,CAAC,CAAC;CAC/E;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkBuB,CAAC;;oBACoB,CAAC;uBAG9C,CADA;wBACM,CAAC;;;;;;;;2BAYE,CAAC;qBACsB,CAAC;;iBAEf,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAnBjJ,CAAC;;oBACoB,CAAC;uBAG9C,CADA;wBACM,CAAC;;;;;;;;2BAYE,CAAC;qBACsB,CAAC;;iBAEf,CAAC;sBAA4E,CAAC;;;mBAAwE,CAAC;;;;;;;;AAlC3K,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-sheet",
-  "version": "0.6.14-main.8b352a0",
+  "version": "0.6.14-staging.8758a12",
   "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.8758a12",
+    "@dxos/async": "0.6.14-staging.8758a12",
+    "@dxos/context": "0.6.14-staging.8758a12",
+    "@dxos/crypto": "0.6.14-staging.8758a12",
+    "@dxos/debug": "0.6.14-staging.8758a12",
+    "@dxos/echo-schema": "0.6.14-staging.8758a12",
+    "@dxos/invariant": "0.6.14-staging.8758a12",
+    "@dxos/client": "0.6.14-staging.8758a12",
+    "@dxos/keys": "0.6.14-staging.8758a12",
+    "@dxos/log": "0.6.14-staging.8758a12",
+    "@dxos/plugin-attention": "0.6.14-staging.8758a12",
+    "@dxos/plugin-graph": "0.6.14-staging.8758a12",
+    "@dxos/plugin-script": "0.6.14-staging.8758a12",
+    "@dxos/plugin-client": "0.6.14-staging.8758a12",
+    "@dxos/plugin-space": "0.6.14-staging.8758a12",
+    "@dxos/plugin-markdown": "0.6.14-staging.8758a12",
+    "@dxos/react-client": "0.6.14-staging.8758a12",
+    "@dxos/react-ui-attention": "0.6.14-staging.8758a12",
+    "@dxos/plugin-stack": "0.6.14-staging.8758a12",
+    "@dxos/react-hooks": "0.6.14-staging.8758a12",
+    "@dxos/react-ui-data": "0.6.14-staging.8758a12",
+    "@dxos/react-ui-editor": "0.6.14-staging.8758a12",
+    "@dxos/react-ui-grid": "0.6.14-staging.8758a12",
+    "@dxos/schema": "0.6.14-staging.8758a12",
+    "@dxos/util": "0.6.14-staging.8758a12",
+    "@dxos/react-ui-list": "0.6.14-staging.8758a12"
   },
   "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.8758a12",
+    "@dxos/random": "0.6.14-staging.8758a12",
+    "@dxos/react-ui": "0.6.14-staging.8758a12",
+    "@dxos/react-ui-syntax-highlighter": "0.6.14-staging.8758a12",
+    "@dxos/react-ui-theme": "0.6.14-staging.8758a12",
+    "@dxos/react-ui-types": "0.6.14-staging.8758a12",
+    "@dxos/storybook-utils": "0.6.14-staging.8758a12"
   },
   "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.8758a12",
+    "@dxos/react-ui-theme": "0.6.14-staging.8758a12"
   },
   "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 {
@@ -21,7 +22,8 @@ import {
   Grid,
   GridCellEditor,
   type DxGridElement,
-  type EditorKeysProps,
+  type EditorKeyHandler,
+  type EditorBlurHandler,
   type GridContentProps,
   type DxGridPosition,
 } from '@dxos/react-ui-grid';
@@ -31,6 +33,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 };
@@ -57,10 +60,12 @@ const sheetColDefault = { frozenColsStart: { size: 48, readonly: true }, grid: {
 
 export const GridSheet = () => {
   const { t } = useTranslation(SHEET_PLUGIN);
-  const { id, model, editing, setEditing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } =
-    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 { id, model, editing, setCursor, setRange, cursor, cursorFallbackRange, activeRefs } = 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 +73,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);
         }
       }
     },
@@ -77,29 +89,27 @@ export const GridSheet = () => {
   );
 
   // TODO(burdon): Validate formula before closing: hf.validateFormula();
-  const handleClose = useCallback<NonNullable<EditorKeysProps['onClose']> | NonNullable<EditorKeysProps['onNav']>>(
-    (value, { key, shift }) => {
-      if (value !== undefined) {
-        model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
+  const handleClose = useCallback<EditorKeyHandler>(
+    (_value, event) => {
+      if (event) {
+        const { key, shift } = event;
+        const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
+          ? 'row'
+          : ['Tab', 'ArrowLeft', 'ArrowRight'].includes(key)
+            ? 'col'
+            : undefined;
+        const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
+        dxGrid?.refocus(axis, delta);
       }
-      setEditing(null);
-      const axis = ['Enter', 'ArrowUp', 'ArrowDown'].includes(key)
-        ? 'row'
-        : ['Tab', 'ArrowLeft', 'ArrowRight'].includes(key)
-          ? 'col'
-          : undefined;
-      const delta = key.startsWith('Arrow') ? (['ArrowUp', 'ArrowLeft'].includes(key) ? -1 : 1) : shift ? -1 : 1;
-      dxGrid?.refocus(axis, delta);
     },
     [model, editing, dxGrid],
   );
 
-  const handleBlur = useCallback(
-    (value?: string) => {
+  const handleBlur = useCallback<EditorBlurHandler>(
+    (value) => {
       if (value !== undefined) {
         model.setValue(dxGridCellIndexToSheetCellAddress(editing!.index), value);
       }
-      setEditing(null);
     },
     [model, editing],
   );
@@ -144,6 +154,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 +189,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 +224,7 @@ export const GridSheet = () => {
         }
       }
     },
-    [cursorFallbackRange, model, cursor],
+    [cursorFallbackRange, model, cursor, extraplanarFocus, selectEntireAxis],
   );
 
   const contextMenuAnchorRef = useRef<HTMLButtonElement | null>(null);
@@ -193,20 +241,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,7 +316,8 @@ export const GridSheet = () => {
         onWheelCapture={handleWheel}
         onKeyDown={handleKeyDown}
         onContextMenu={handleContextMenu}
-        overscroll='inline'
+        onClick={handleClick}
+        overscroll='trap'
         className='[--dx-grid-base:var(--surface-bg)]'
         activeRefs={activeRefs}
         ref={setDxGrid}
@@ -270,21 +330,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 = {};
@@ -129,7 +131,7 @@ export const useSheetModelDxGridProps = (
   model: SheetModel,
 ): Pick<GridContentProps, 'columns' | 'rows'> => {
   const [columns, setColumns] = useState<DxGridAxisMeta>(createDxGridColumns(model));
-  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridColumns(model));
+  const [rows, setRows] = useState<DxGridAxisMeta>(createDxGridRows(model));
 
   useEffect(() => {
     const cellsAccessor = createDocAccessor(model.sheet, ['cells']);
@@ -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;