@dxos/plugin-sheet 0.6.13-main.548ca8d → 0.6.13-main.ed424a1

package/dist/lib/node-esm/SheetContainer-YWQVKHQB.mjs.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": ["React", "React", "Icon", "mx", "FunctionEditor", "model", "cursor", "range", "useSheetContext", "value", "isFormula", "getCellValue", "charAt", "graph", "mapFunctionBindingFromId", "mapFormulaIndicesToRefs", "String", "div", "className", "mx", "rangeToA1Notation", "addressToA1Notation", "Icon", "icon", "classNames", "span", "createContext", "React", "useCallback", "useMemo", "useIntentDispatcher", "Icon", "Toolbar", "NaturalToolbar", "useTranslation", "Tooltip", "useAttention", "nonNullable", "buttonStyles", "tooltipProps", "side", "classNames", "ToolbarSeparator", "React", "div", "role", "className", "ToolbarItem", "itemType", "icon", "children", "props", "Invoker", "NaturalToolbar", "ToggleGroupItem", "Toggle", "Button", "Tooltip", "Root", "Trigger", "asChild", "variant", "Icon", "size", "span", "Portal", "Content", "Arrow", "ToolbarContextProvider", "useToolbarContext", "createContext", "sectionToolbarLayout", "ToolbarRoot", "id", "model", "range", "cursor", "useSheetContext", "hasAttention", "useAttention", "dispatch", "useIntentDispatcher", "handleAction", "useCallback", "action", "key", "index", "sheet", "ranges", "findIndex", "inRange", "nextRange", "from", "to", "nextRangeEntity", "value", "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", "graph", "sheet", "role", "React", "SheetProvider", "Toolbar", "Root", "Styles", "Alignment", "Separator", "Actions", "div", "className", "GridSheet", "FunctionEditor", "SheetContainer"]
+}

package/dist/lib/node-esm/{chunk-ELTFPX5B.mjs → chunk-BPXXIAOQ.mjs}

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
   SheetType
-} from "./chunk-ZVLLQ2PJ.mjs";
+} from "./chunk-WFDTY3IC.mjs";
 import {
   SHEET_PLUGIN
 } from "./chunk-VCYJWE3O.mjs";
@@ -134,7 +134,7 @@ var createSheet = ({ name, cells, ...size } = {}) => {
     columns: [],
     rowMeta: {},
     columnMeta: {},
-    formatting: []
+    ranges: []
   });
   initialize(sheet, size);
   if (cells) {
@@ -157,13 +157,6 @@ var addressFromIndex = (sheet, idx) => {
     row: sheet.rows.indexOf(row)
   };
 };
-var rangeFromIndex = (sheet, idx) => {
-  const [from, to] = idx.split(":").map((index) => addressFromIndex(sheet, index));
-  return {
-    from,
-    to
-  };
-};
 var closest = (cursor, cells) => {
   let closestCell2;
   let closestDistance = Number.MAX_SAFE_INTEGER;
@@ -186,6 +179,34 @@ var compareIndexPositions = (sheet, indexA, indexB) => {
   }
 };
 
+// packages/plugins/plugin-sheet/src/defs/sheet-range-types.ts
+var cellClassNameForRange = ({ key, value }) => {
+  switch (key) {
+    case "align":
+      switch (value) {
+        case "start":
+          return "text-start";
+        case "center":
+          return "text-center";
+        case "end":
+          return "text-end";
+        default:
+          return void 0;
+      }
+    case "comment":
+      return "bg-gridComment";
+    case "style":
+      switch (value) {
+        case "highlight":
+          return "bg-gridHighlight";
+        default:
+          return void 0;
+      }
+    default:
+      return void 0;
+  }
+};
+
 // packages/plugins/plugin-sheet/src/extensions/compute.ts
 import { syntaxTree } from "@codemirror/language";
 import { RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
@@ -411,13 +432,14 @@ import { useAsyncState } from "@dxos/react-hooks";
 import React4 from "react";
 
 // packages/plugins/plugin-sheet/src/components/GridSheet/GridSheet.tsx
-import React3, { useCallback as useCallback2, useMemo as useMemo4, useRef } from "react";
+import React3, { useCallback as useCallback2, useMemo as useMemo3, useRef } from "react";
 import { useAttention } from "@dxos/react-ui-attention";
 import { Grid as Grid2, editorKeys, GridCellEditor, closestCell } from "@dxos/react-ui-grid";
 
 // packages/plugins/plugin-sheet/src/components/GridSheet/util.ts
 import { useEffect, useLayoutEffect, useState } from "react";
 import { createDocAccessor } from "@dxos/react-client/echo";
+import { parseValue, cellClassesForFieldType } from "@dxos/react-ui-data";
 import { colToA1Notation, rowToA1Notation } from "@dxos/react-ui-grid";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var dxGridCellIndexToSheetCellAddress = (index) => {
@@ -453,7 +475,26 @@ var createDxGridRows = (model) => {
     grid: {}
   });
 };
-var gridCellGetter = (model, formatting) => {
+var projectCellProps = (model, col, row) => {
+  const address = {
+    col,
+    row
+  };
+  const rawValue = model.getValue(address);
+  if (rawValue === void 0 || rawValue === null) {
+    return {
+      value: ""
+    };
+  }
+  const ranges = model.sheet.ranges?.filter(({ range }) => inRange(range, address));
+  const type = model.getValueType(address);
+  const classNames = ranges?.map(cellClassNameForRange).reverse();
+  return {
+    value: parseValue(type, rawValue),
+    className: mx2(cellClassesForFieldType(type), classNames)
+  };
+};
+var gridCellGetter = (model) => {
   const cachedGridCells = {};
   return (nextBounds) => {
     [
@@ -464,16 +505,10 @@ var gridCellGetter = (model, formatting) => {
       ].forEach((_2, r0) => {
         const col = nextBounds.start.col + c0;
         const row = nextBounds.start.row + r0;
-        const cell = formatting.getFormatting({
-          col,
-          row
-        });
+        const cell = projectCellProps(model, col, row);
         if (cell.value) {
           cachedGridCells;
-          cachedGridCells[`${col},${row}`] = {
-            value: cell.value,
-            className: mx2(cell.classNames)
-          };
+          cachedGridCells[`${col},${row}`] = cell;
         }
       });
     });
@@ -489,8 +524,8 @@ var colLabelCell = (col) => ({
   value: colToA1Notation(col),
   resizeHandle: "col"
 });
-var cellGetter = (model, formatting) => {
-  const getGridCells = gridCellGetter(model, formatting);
+var cellGetter = (model) => {
+  const getGridCells = gridCellGetter(model);
   return (nextBounds, plane) => {
     switch (plane) {
       case "grid":
@@ -516,7 +551,7 @@ var cellGetter = (model, formatting) => {
     }
   };
 };
-var useSheetModelDxGridProps = (dxGridRef, model, formatting) => {
+var useSheetModelDxGridProps = (dxGridRef, model) => {
   const [columns, setColumns] = useState(createDxGridColumns(model));
   const [rows, setRows] = useState(createDxGridColumns(model));
   useLayoutEffect(() => {
@@ -524,7 +559,7 @@ var useSheetModelDxGridProps = (dxGridRef, model, formatting) => {
       "cells"
     ]);
     if (dxGridRef.current) {
-      dxGridRef.current.getCells = cellGetter(model, formatting);
+      dxGridRef.current.getCells = cellGetter(model);
     }
     const handleCellsUpdate = () => {
       dxGridRef.current?.requestUpdate("initialCells");
@@ -532,8 +567,7 @@ var useSheetModelDxGridProps = (dxGridRef, model, formatting) => {
     cellsAccessor.handle.addListener("change", handleCellsUpdate);
     return () => cellsAccessor.handle.removeListener("change", handleCellsUpdate);
   }, [
-    model,
-    formatting
+    model
   ]);
   useEffect(() => {
     const columnMetaAccessor = createDocAccessor(model.sheet, [
@@ -563,8 +597,8 @@ var useSheetModelDxGridProps = (dxGridRef, model, formatting) => {
   };
 };
 
-// packages/plugins/plugin-sheet/src/hooks/useFormattingModel.ts
-import { useMemo } from "react";
+// packages/plugins/plugin-sheet/src/hooks/useSheetModel.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // packages/plugins/plugin-sheet/src/model/decorations.ts
 import { create as create2 } from "@dxos/echo-schema";
@@ -605,118 +639,6 @@ var createDecorations = () => {
   };
 };
 
-// packages/plugins/plugin-sheet/src/model/formatting-model.ts
-import { FieldValueType } from "@dxos/schema";
-var FormattingModel = class {
-  constructor(_model) {
-    this._model = _model;
-  }
-  /**
-  * Get formatted string value and className for cell.
-  */
-  getFormatting(cell) {
-    const value = this._model.getValue(cell);
-    if (value === void 0 || value === null) {
-      return {};
-    }
-    const locales = void 0;
-    const idx = addressToIndex(this._model.sheet, cell);
-    let formatting = this._model.sheet.formatting.find?.(({ range }) => range === idx);
-    const classNames = [
-      ...formatting?.classNames ?? []
-    ];
-    for (const [idx2, _formatting] of Object.entries(this._model.sheet.formatting)) {
-      const range = rangeFromIndex(this._model.sheet, idx2);
-      if (inRange(range, cell)) {
-        if (_formatting.classNames) {
-          classNames.push(..._formatting.classNames);
-        }
-        if (_formatting.type) {
-          formatting = _formatting;
-        }
-      }
-    }
-    const defaultNumber = "justify-end font-mono";
-    const type = formatting?.type ?? this._model.getValueType(cell);
-    switch (type) {
-      case FieldValueType.Boolean: {
-        return {
-          value: value.toLocaleString().toUpperCase(),
-          classNames: [
-            ...classNames,
-            value ? "!text-greenText" : "!text-orangeText"
-          ]
-        };
-      }
-      //
-      // Numbers.
-      //
-      case FieldValueType.Number: {
-        return {
-          value: value.toLocaleString(locales),
-          classNames: [
-            ...classNames,
-            defaultNumber
-          ]
-        };
-      }
-      case FieldValueType.Percent: {
-        return {
-          value: value * 100 + "%",
-          classNames: [
-            ...classNames,
-            defaultNumber
-          ]
-        };
-      }
-      case FieldValueType.Currency: {
-        return {
-          value: value.toLocaleString(locales, {
-            style: "currency",
-            currency: "USD",
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2
-          }),
-          classNames: [
-            ...classNames,
-            defaultNumber
-          ]
-        };
-      }
-      //
-      // Dates.
-      //
-      case FieldValueType.DateTime: {
-        const date = this._model.toLocalDate(value);
-        return {
-          value: date.toLocaleString(locales),
-          classNames
-        };
-      }
-      case FieldValueType.Date: {
-        const date = this._model.toLocalDate(value);
-        return {
-          value: date.toLocaleDateString(locales),
-          classNames
-        };
-      }
-      case FieldValueType.Time: {
-        const date = this._model.toLocalDate(value);
-        return {
-          value: date.toLocaleTimeString(locales),
-          classNames
-        };
-      }
-      default: {
-        return {
-          value: String(value),
-          classNames
-        };
-      }
-    }
-  }
-};
-
 // packages/plugins/plugin-sheet/src/model/sheet-model.ts
 import { Event } from "@dxos/async";
 import { Resource } from "@dxos/context";
@@ -724,17 +646,17 @@ import { getTypename } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { PublicKey } from "@dxos/keys";
 import { log } from "@dxos/log";
-import { FieldValueType as FieldValueType2 } from "@dxos/schema";
+import { FieldValueType } from "@dxos/schema";
 import { DetailedCellError, ExportedCellChange } from "#hyperformula";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-sheet/src/model/sheet-model.ts";
 var typeMap = {
-  BOOLEAN: FieldValueType2.Boolean,
-  NUMBER_RAW: FieldValueType2.Number,
-  NUMBER_PERCENT: FieldValueType2.Percent,
-  NUMBER_CURRENCY: FieldValueType2.Currency,
-  NUMBER_DATETIME: FieldValueType2.DateTime,
-  NUMBER_DATE: FieldValueType2.Date,
-  NUMBER_TIME: FieldValueType2.Time
+  BOOLEAN: FieldValueType.Boolean,
+  NUMBER_RAW: FieldValueType.Number,
+  NUMBER_PERCENT: FieldValueType.Percent,
+  NUMBER_CURRENCY: FieldValueType.Currency,
+  NUMBER_DATETIME: FieldValueType.DateTime,
+  NUMBER_DATE: FieldValueType.Date,
+  NUMBER_TIME: FieldValueType.Time
 };
 var getTopLeft = (range) => {
   const to = range.to ?? range.from;
@@ -1205,15 +1127,7 @@ var SheetModel = class extends Resource {
   }
 };
 
-// packages/plugins/plugin-sheet/src/hooks/useFormattingModel.ts
-var useFormattingModel = (model) => {
-  return useMemo(() => model && new FormattingModel(model), [
-    model
-  ]);
-};
-
 // packages/plugins/plugin-sheet/src/hooks/useSheetModel.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
 var useSheetModel = (graph, sheet, { readonly } = {}) => {
   const [model, setModel] = useState2();
   useEffect2(() => {
@@ -1242,7 +1156,7 @@ var useSheetModel = (graph, sheet, { readonly } = {}) => {
 
 // packages/plugins/plugin-sheet/src/hooks/threads.ts
 import { effect } from "@preact/signals-core";
-import { useCallback, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import { useCallback, useEffect as useEffect3, useMemo } from "react";
 import { LayoutAction, useIntentDispatcher, useIntentResolver } from "@dxos/app-framework";
 import { debounce as debounce2 } from "@dxos/async";
 import { fullyQualifiedId } from "@dxos/react-client/echo";
@@ -1267,11 +1181,11 @@ var useUpdateFocusedCellOnThreadSelection = (model, grid) => {
 };
 var useSelectThreadOnCellFocus = (model, cursor) => {
   const dispatch = useIntentDispatcher();
-  const activeThreads = useMemo2(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
+  const activeThreads = useMemo(() => model.sheet.threads?.filter((thread) => !!thread && thread.status === "active") ?? [], [
     // TODO(thure): Surely we can find a better dependency for this…
     JSON.stringify(model.sheet.threads)
   ]);
-  const activeThreadAddresses = useMemo2(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => addressFromIndex(model.sheet, anchor)), [
+  const activeThreadAddresses = useMemo(() => activeThreads.map((thread) => thread.anchor).filter((anchor) => anchor !== void 0).map((anchor) => addressFromIndex(model.sheet, anchor)), [
     activeThreads,
     model.sheet
   ]);
@@ -1299,7 +1213,7 @@ var useSelectThreadOnCellFocus = (model, cursor) => {
     activeThreadAddresses,
     model.sheet
   ]);
-  const debounced = useMemo2(() => {
+  const debounced = useMemo(() => {
     return debounce2((cellCoords) => requestAnimationFrame(() => selectClosestThread(cellCoords)), 50);
   }, [
     selectClosestThread
@@ -1324,10 +1238,10 @@ var createThreadDecoration = (cellIndex, threadId, sheetId) => {
   };
 };
 var useThreadDecorations = (model, decorations) => {
-  const sheet = useMemo2(() => model.sheet, [
+  const sheet = useMemo(() => model.sheet, [
     model.sheet
   ]);
-  const sheetId = useMemo2(() => fullyQualifiedId(sheet), [
+  const sheetId = useMemo(() => fullyQualifiedId(sheet), [
     sheet
   ]);
   useEffect3(() => {
@@ -1361,7 +1275,7 @@ var useThreadDecorations = (model, decorations) => {
 };
 
 // packages/plugins/plugin-sheet/src/components/SheetContext/SheetContext.tsx
-import React2, { createContext as createContext2, useContext, useMemo as useMemo3, useState as useState3 } from "react";
+import React2, { createContext as createContext2, useContext, useMemo as useMemo2, useState as useState3 } from "react";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { fullyQualifiedId as fullyQualifiedId2 } from "@dxos/react-client/echo";
 import { Grid, useGridContext } from "@dxos/react-ui-grid";
@@ -1371,7 +1285,7 @@ var useSheetContext = () => {
   const context = useContext(SheetContext);
   invariant4(context, void 0, {
     F: __dxlog_file3,
-    L: 46,
+    L: 45,
     S: void 0,
     A: [
       "context",
@@ -1380,9 +1294,9 @@ var useSheetContext = () => {
   });
   return context;
 };
-var SheetProviderImpl = ({ model, formatting, onInfo, children, __gridScope }) => {
+var SheetProviderImpl = ({ model, onInfo, children, __gridScope }) => {
   const { id, editing, setEditing } = useGridContext("SheetProvider", __gridScope);
-  const decorations = useMemo3(() => createDecorations(), []);
+  const decorations = useMemo2(() => createDecorations(), []);
   const [cursor, setCursor] = useState3();
   const [range, setRange] = useState3();
   useSelectThreadOnCellFocus(model, cursor);
@@ -1391,7 +1305,6 @@ var SheetProviderImpl = ({ model, formatting, onInfo, children, __gridScope }) =
     value: {
       id,
       model,
-      formatting,
       editing,
       setEditing,
       cursor,
@@ -1408,12 +1321,10 @@ var SheetProvider = ({ children, graph, sheet, readonly, onInfo }) => {
   const model = useSheetModel(graph, sheet, {
     readonly
   });
-  const formatting = useFormattingModel(model);
-  return !model || !formatting ? null : /* @__PURE__ */ React2.createElement(Grid.Root, {
+  return !model ? null : /* @__PURE__ */ React2.createElement(Grid.Root, {
     id: fullyQualifiedId2(sheet)
   }, /* @__PURE__ */ React2.createElement(SheetProviderImpl, {
     model,
-    formatting,
     onInfo
   }, children));
 };
@@ -1454,17 +1365,19 @@ var sheetColDefault = {
   }
 };
 var GridSheet = () => {
-  const { id, model, formatting, editing, setEditing, setCursor, setRange } = useSheetContext();
+  const { id, model, editing, setEditing, setCursor, setRange } = useSheetContext();
   const dxGrid = useRef(null);
   const rangeNotifier = useRef();
   const { hasAttention } = useAttention(id);
   const handleFocus = useCallback2((event) => {
     if (!editing) {
       const cell = closestCell(event.target);
-      setCursor(cell && cell.plane === "grid" ? {
-        col: cell.col,
-        row: cell.row
-      } : void 0);
+      if (cell && cell.plane === "grid") {
+        setCursor({
+          col: cell.col,
+          row: cell.row
+        });
+      }
     }
   }, [
     editing
@@ -1534,8 +1447,8 @@ var GridSheet = () => {
   }, [
     hasAttention
   ]);
-  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model, formatting);
-  const extension = useMemo4(() => [
+  const { columns, rows } = useSheetModelDxGridProps(dxGrid, model);
+  const extension = useMemo3(() => [
     editorKeys({
       onClose: handleClose,
       ...editing?.initialContent && {
@@ -1580,7 +1493,7 @@ var GridSheet = () => {
 };
 
 // packages/plugins/plugin-sheet/src/components/index.ts
-var SheetContainer = React4.lazy(() => import("./SheetContainer-M7WRMZDU.mjs"));
+var SheetContainer = React4.lazy(() => import("./SheetContainer-YWQVKHQB.mjs"));
 
 // packages/plugins/plugin-sheet/src/hooks/useComputeGraph.ts
 var useComputeGraph = (space) => {
@@ -1602,6 +1515,7 @@ export {
   ComputeGraphContextProvider,
   addressToA1Notation,
   rangeToA1Notation,
+  inRange,
   createSheet,
   addressToIndex,
   compareIndexPositions,
@@ -1612,4 +1526,4 @@ export {
   GridSheet,
   SheetContainer
 };
-//# sourceMappingURL=chunk-ELTFPX5B.mjs.map
+//# sourceMappingURL=chunk-BPXXIAOQ.mjs.map