@dxos/plugin-sheet 0.6.12-main.78ddbdf → 0.6.12-main.89e9959

package/dist/lib/browser/{SheetContainer-V4GCCZTX.mjs → SheetContainer-LG77O4RM.mjs}

@@ -2,18 +2,18 @@ import {
   Sheet,
   addressToIndex,
   useSheetContext
-} from "./chunk-U2JHW3L6.mjs";
-import "./chunk-T3NJFTD4.mjs";
+} from "./chunk-CHQAW4F4.mjs";
+import "./chunk-WZMOZKQZ.mjs";
 import {
   SHEET_PLUGIN
 } from "./chunk-QILRZNE5.mjs";
-import "./chunk-6ZMQVB4Z.mjs";
+import "./chunk-GSV5QNLD.mjs";
 
 // packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
 import React3, { useCallback } from "react";
 import { useIntentDispatcher } from "@dxos/app-framework";
 import { fullyQualifiedId } from "@dxos/react-client/echo";
-import { useIsDirectlyAttended } from "@dxos/react-ui-attention";
+import { useAttendableAttributes, useAttention } from "@dxos/react-ui-attention";
 import { focusRing, mx } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-sheet/src/components/Toolbar/Toolbar.tsx
@@ -209,12 +209,12 @@ var Toolbar = {
 };
 
 // packages/plugins/plugin-sheet/src/components/SheetContainer.tsx
-var attentionFragment = mx("group-focus-within/editor:attention-surface group-[[aria-current]]/editor:attention-surface", "group-focus-within/editor:border-separator");
 var sectionToolbarLayout = "bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity";
-var SheetContainer = ({ sheet, space, role }) => {
+var SheetContainer = ({ graph, sheet, role }) => {
   const dispatch = useIntentDispatcher();
   const id = fullyQualifiedId(sheet);
-  const isDirectlyAttended = useIsDirectlyAttended(id);
+  const attendableAttrs = useAttendableAttributes(id);
+  const { hasAttention } = useAttention(id);
   const handleAction = useCallback((action) => {
     switch (action.type) {
       case "comment": {
@@ -234,9 +234,10 @@ var SheetContainer = ({ sheet, space, role }) => {
   ]);
   return /* @__PURE__ */ React3.createElement("div", {
     role: "none",
-    className: role === "article" ? "row-span-2 grid grid-rows-subgrid" : void 0
+    className: role === "article" ? "row-span-2 grid grid-rows-subgrid" : void 0,
+    ...role === "article" && attendableAttrs
   }, /* @__PURE__ */ React3.createElement(Sheet.Root, {
-    space,
+    graph,
     sheet
   }, /* @__PURE__ */ React3.createElement("div", {
     role: "none",
@@ -245,12 +246,12 @@ var SheetContainer = ({ sheet, space, role }) => {
     onAction: handleAction,
     classNames: mx(role === "section" ? [
       "z-[2] group-focus-within/section:visible",
-      !isDirectlyAttended && "invisible",
+      !hasAttention && "invisible",
       sectionToolbarLayout
-    ] : "group-focus-within/editor:border-separator group-[[aria-current]]/editor:border-separator")
+    ] : "attention-surface")
   }, /* @__PURE__ */ React3.createElement(Toolbar.Separator, null), /* @__PURE__ */ React3.createElement(Toolbar.Actions, null))), /* @__PURE__ */ React3.createElement("div", {
     role: "none",
-    className: mx(role === "section" && "aspect-square border-is border-bs border-be border-separator", role === "article" && "flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator", focusRing, attentionFragment)
+    className: mx(role === "section" && "aspect-square border-is border-bs border-be border-separator", role === "article" && "flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator attention-surface", focusRing)
   }, /* @__PURE__ */ React3.createElement(Sheet.Main, null))));
 };
 var SheetContainer_default = SheetContainer;
@@ -258,4 +259,4 @@ export {
   SheetContainer_default as default,
   sectionToolbarLayout
 };
-//# sourceMappingURL=SheetContainer-V4GCCZTX.mjs.map
+//# sourceMappingURL=SheetContainer-LG77O4RM.mjs.map

package/dist/lib/browser/SheetContainer-LG77O4RM.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/SheetContainer.tsx", "../../../src/components/Toolbar/Toolbar.tsx", "../../../src/components/Toolbar/common.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback } from 'react';\n\nimport { useIntentDispatcher } from '@dxos/app-framework';\nimport { fullyQualifiedId } from '@dxos/react-client/echo';\nimport { useAttendableAttributes, useAttention } from '@dxos/react-ui-attention';\nimport { focusRing, mx } from '@dxos/react-ui-theme';\n\nimport { Sheet, type SheetRootProps } from './Sheet';\nimport { Toolbar, type ToolbarAction } from './Toolbar';\n\n// TODO(Zan): Factor out, copied this from MarkdownPlugin.\nexport const sectionToolbarLayout =\n  'bs-[--rail-action] bg-[--sticky-bg] sticky block-start-0 __-block-start-px transition-opacity';\n\nconst SheetContainer = ({ graph, sheet, role }: SheetRootProps & { role?: string }) => {\n  const dispatch = useIntentDispatcher();\n\n  const id = fullyQualifiedId(sheet);\n  const attendableAttrs = useAttendableAttributes(id);\n  const { hasAttention } = useAttention(id);\n\n  // TODO(Zan): Centralise the toolbar action handler. Current implementation in stories.\n  const handleAction = useCallback(\n    (action: ToolbarAction) => {\n      switch (action.type) {\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.anchor,\n              name: action.cellContent,\n              subject: sheet,\n            },\n          });\n        }\n      }\n    },\n    [sheet, dispatch],\n  );\n\n  return (\n    <div\n      role='none'\n      className={role === 'article' ? 'row-span-2 grid grid-rows-subgrid' : undefined}\n      {...(role === 'article' && attendableAttrs)}\n    >\n      <Sheet.Root graph={graph} sheet={sheet}>\n        <div role='none' className={mx('flex flex-0 justify-center overflow-x-auto')}>\n          <Toolbar.Root\n            onAction={handleAction}\n            classNames={mx(\n              role === 'section'\n                ? ['z-[2] group-focus-within/section:visible', !hasAttention && 'invisible', sectionToolbarLayout]\n                : 'attention-surface',\n            )}\n          >\n            {/* TODO(Zan): Restore some of this functionality */}\n            {/* <Toolbar.Styles /> */}\n            {/* <Toolbar.Format /> */}\n            {/* <Toolbar.Alignment /> */}\n            <Toolbar.Separator />\n            <Toolbar.Actions />\n          </Toolbar.Root>\n        </div>\n        <div\n          role='none'\n          className={mx(\n            role === 'section' && 'aspect-square border-is border-bs border-be border-separator',\n            role === 'article' &&\n              'flex is-full overflow-hidden focus-visible:ring-inset row-span-1 data-[toolbar=disabled]:pbs-2 data-[toolbar=disabled]:row-span-2 border-bs border-separator attention-surface',\n            focusRing,\n          )}\n        >\n          <Sheet.Main />\n        </div>\n      </Sheet.Root>\n    </div>\n  );\n};\n\nexport default SheetContainer;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  type Icon,\n  Calendar,\n  ChatText,\n  CurrencyDollar,\n  Eraser,\n  HighlighterCircle,\n  TextAlignCenter,\n  TextAlignLeft,\n  TextAlignRight,\n} from '@phosphor-icons/react';\nimport { createContext } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport {\n  DensityProvider,\n  ElevationProvider,\n  Toolbar as NaturalToolbar,\n  type ThemedClassName,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { nonNullable } from '@dxos/util';\n\nimport { ToolbarButton, ToolbarSeparator, ToolbarToggleButton } from './common';\nimport { addressToIndex } from '../../defs';\nimport { SHEET_PLUGIN } from '../../meta';\nimport { type Formatting } from '../../types';\nimport { useSheetContext } from '../Sheet/sheet-context';\n\n//\n// Root\n//\n\nexport type ToolbarAction =\n  | { type: 'clear' }\n  | { type: 'highlight' }\n  | { type: 'left' }\n  | { type: 'center' }\n  | { type: 'right' }\n  | { type: 'date' }\n  | { type: 'currency' }\n  | { type: 'comment'; anchor: string; cellContent?: string };\n\nexport type ToolbarActionType = ToolbarAction['type'];\n\nexport type ToolbarActionHandler = (action: ToolbarAction) => void;\n\nexport type ToolbarProps = ThemedClassName<\n  PropsWithChildren<{\n    onAction?: ToolbarActionHandler;\n  }>\n>;\n\nconst [ToolbarContextProvider, useToolbarContext] = createContext<ToolbarProps>('Toolbar');\n\nconst ToolbarRoot = ({ children, onAction, classNames }: ToolbarProps) => {\n  return (\n    <ToolbarContextProvider onAction={onAction}>\n      <DensityProvider density='fine'>\n        <ElevationProvider elevation='chrome'>\n          <NaturalToolbar.Root classNames={['is-full shrink-0 overflow-x-auto overflow-y-hidden p-1', classNames]}>\n            {children}\n          </NaturalToolbar.Root>\n        </ElevationProvider>\n      </DensityProvider>\n    </ToolbarContextProvider>\n  );\n};\n\n// TODO(burdon): Generalize.\n// TODO(burdon): Detect and display current state.\ntype ButtonProps = {\n  type: ToolbarActionType;\n  Icon: Icon;\n  getState: (state: Formatting) => boolean;\n  disabled?: (state: Formatting) => boolean;\n};\n\n//\n// Alignment\n//\n\nconst formatOptions: ButtonProps[] = [\n  { type: 'date', Icon: Calendar, getState: (state) => false },\n  { type: 'currency', Icon: CurrencyDollar, getState: (state) => false },\n];\n\nconst Format = () => {\n  const { onAction } = useToolbarContext('Format');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  return (\n    <NaturalToolbar.ToggleGroup\n      type='single'\n      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}\n    >\n      {formatOptions.map(({ type, getState, Icon }) => (\n        <ToolbarToggleButton\n          key={type}\n          value={type}\n          Icon={Icon}\n          // disabled={state?.blockType === 'codeblock'}\n          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}\n          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}\n        >\n          {t(`toolbar ${type} label`)}\n        </ToolbarToggleButton>\n      ))}\n    </NaturalToolbar.ToggleGroup>\n  );\n};\n\nconst alignmentOptions: ButtonProps[] = [\n  { type: 'left', Icon: TextAlignLeft, getState: (state) => false },\n  { type: 'center', Icon: TextAlignCenter, getState: (state) => false },\n  { type: 'right', Icon: TextAlignRight, getState: (state) => false },\n];\n\nconst Alignment = () => {\n  const { onAction } = useToolbarContext('Alignment');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  return (\n    <NaturalToolbar.ToggleGroup\n      type='single'\n      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}\n    >\n      {alignmentOptions.map(({ type, getState, Icon }) => (\n        <ToolbarToggleButton\n          key={type}\n          value={type}\n          Icon={Icon}\n          // disabled={state?.blockType === 'codeblock'}\n          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}\n          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}\n        >\n          {t(`toolbar ${type} label`)}\n        </ToolbarToggleButton>\n      ))}\n    </NaturalToolbar.ToggleGroup>\n  );\n};\n\nconst styleOptions: ButtonProps[] = [\n  { type: 'clear', Icon: Eraser, getState: (state) => false },\n  { type: 'highlight', Icon: HighlighterCircle, getState: (state) => false },\n];\n\nconst Styles = () => {\n  const { onAction } = useToolbarContext('Alignment');\n  const { t } = useTranslation(SHEET_PLUGIN);\n\n  return (\n    <NaturalToolbar.ToggleGroup\n      type='single'\n      // value={cellStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}\n    >\n      {styleOptions.map(({ type, getState, Icon }) => (\n        <ToolbarToggleButton\n          key={type}\n          value={type}\n          Icon={Icon}\n          // disabled={state?.blockType === 'codeblock'}\n          // onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}\n          onClick={() => onAction?.({ type: type as Exclude<typeof type, 'comment'> })}\n        >\n          {t(`toolbar ${type} label`)}\n        </ToolbarToggleButton>\n      ))}\n    </NaturalToolbar.ToggleGroup>\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    <ToolbarButton\n      value='comment'\n      Icon={ChatText}\n      data-testid='editor.toolbar.comment'\n      onClick={() => {\n        if (!cursor) {\n          return;\n        }\n        return onAction?.({\n          type: 'comment',\n          anchor: addressToIndex(model.sheet, cursor),\n          cellContent: model.getCellText(cursor),\n        });\n      }}\n      disabled={!cursorOnly || overlapsCommentAnchor}\n    >\n      {t(tooltipLabelKey)}\n    </ToolbarButton>\n  );\n};\n\nexport const Toolbar = {\n  Root: ToolbarRoot,\n  Separator: ToolbarSeparator,\n  Alignment,\n  Format,\n  Styles,\n  Actions,\n};\n\nexport { useToolbarContext };\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type Icon } from '@phosphor-icons/react';\nimport React from 'react';\n\nimport {\n  Toolbar as NaturalToolbar,\n  Tooltip,\n  type ToolbarButtonProps as NaturalToolbarButtonProps,\n  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,\n} from '@dxos/react-ui';\nimport { getSize } from '@dxos/react-ui-theme';\n\n// TODO(burdon): Factor out in common with react-ui-editor.\n\nexport const iconStyles = getSize(5);\nexport const buttonStyles = 'min-bs-0 p-2';\nexport const tooltipProps = { side: 'top' as const, classNames: 'z-10' };\n\nexport const ToolbarSeparator = () => <div role='separator' className='grow' />;\n\n//\n// ToolbarButton\n//\n\ntype ToolbarButtonProps = NaturalToolbarButtonProps & { Icon: Icon };\n\nexport const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {\n  return (\n    <Tooltip.Root>\n      <Tooltip.Trigger asChild>\n        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>\n          <Icon className={iconStyles} />\n          <span className='sr-only'>{children}</span>\n        </NaturalToolbar.Button>\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// ToolbarToggleButton\n//\n\nexport type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & { Icon: Icon };\n\nexport const ToolbarToggleButton = ({ Icon, children, ...props }: ToolbarToggleButtonProps) => {\n  return (\n    <Tooltip.Root>\n      <Tooltip.Trigger asChild>\n        <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>\n          <Icon className={iconStyles} />\n          <span className='sr-only'>{children}</span>\n        </NaturalToolbar.ToggleGroupItem>\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"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "useIntentDispatcher", "fullyQualifiedId", "useAttendableAttributes", "useAttention", "focusRing", "mx", "Calendar", "ChatText", "CurrencyDollar", "Eraser", "HighlighterCircle", "TextAlignCenter", "TextAlignLeft", "TextAlignRight", "createContext", "React", "DensityProvider", "ElevationProvider", "Toolbar", "NaturalToolbar", "useTranslation", "nonNullable", "React", "Toolbar", "NaturalToolbar", "Tooltip", "getSize", "iconStyles", "getSize", "buttonStyles", "tooltipProps", "side", "classNames", "ToolbarSeparator", "div", "role", "className", "ToolbarButton", "Icon", "children", "props", "Tooltip", "Root", "Trigger", "asChild", "NaturalToolbar", "Button", "variant", "span", "Portal", "Content", "Arrow", "ToolbarToggleButton", "ToggleGroupItem", "ToolbarContextProvider", "useToolbarContext", "createContext", "ToolbarRoot", "children", "onAction", "classNames", "React", "DensityProvider", "density", "ElevationProvider", "elevation", "NaturalToolbar", "Root", "formatOptions", "type", "Icon", "Calendar", "getState", "state", "CurrencyDollar", "Format", "t", "useTranslation", "SHEET_PLUGIN", "ToggleGroup", "map", "ToolbarToggleButton", "key", "value", "onClick", "alignmentOptions", "TextAlignLeft", "TextAlignCenter", "TextAlignRight", "Alignment", "styleOptions", "Eraser", "HighlighterCircle", "Styles", "Actions", "cursor", "range", "model", "useSheetContext", "overlapsCommentAnchor", "sheet", "threads", "filter", "nonNullable", "thread", "status", "some", "addressToIndex", "anchor", "hasCursor", "cursorOnly", "tooltipLabelKey", "ToolbarButton", "ChatText", "data-testid", "cellContent", "getCellText", "disabled", "Toolbar", "Separator", "ToolbarSeparator", "sectionToolbarLayout", "SheetContainer", "graph", "sheet", "role", "dispatch", "useIntentDispatcher", "id", "fullyQualifiedId", "attendableAttrs", "useAttendableAttributes", "hasAttention", "useAttention", "handleAction", "useCallback", "action", "type", "data", "cursor", "anchor", "name", "cellContent", "subject", "React", "div", "className", "undefined", "Sheet", "Root", "mx", "Toolbar", "onAction", "classNames", "Separator", "Actions", "focusRing", "Main"]
+}

package/dist/lib/browser/{chunk-U2JHW3L6.mjs → chunk-CHQAW4F4.mjs}

@@ -1,13 +1,13 @@
 import {
   SheetType,
   ValueTypeEnum
-} from "./chunk-T3NJFTD4.mjs";
+} from "./chunk-WZMOZKQZ.mjs";
 import {
   SHEET_PLUGIN
 } from "./chunk-QILRZNE5.mjs";
 import {
   createSheetName
-} from "./chunk-6ZMQVB4Z.mjs";
+} from "./chunk-GSV5QNLD.mjs";
 
 // packages/plugins/plugin-sheet/src/components/Sheet/Sheet.tsx
 import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
@@ -21,7 +21,7 @@ import { useResizeDetector } from "react-resize-detector";
 import { debounce as debounce2 } from "@dxos/async";
 import { fullyQualifiedId as fullyQualifiedId2, createDocAccessor } from "@dxos/client/echo";
 import { log as log2 } from "@dxos/log";
-import { createAttendableAttributes, useHasAttention } from "@dxos/react-ui-attention";
+import { ATTENABLE_ATTRIBUTE, useAttendableAttributes, useAttention, useAttentionPath } from "@dxos/react-ui-attention";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-sheet/src/components/Sheet/grid.ts
@@ -56,7 +56,7 @@ var addressFromA1Notation = (ref) => {
   const match = ref.match(/([A-Z]+)(\d+)/);
   invariant(match, `Invalid notation: ${ref}`, {
     F: __dxlog_file,
-    L: 39,
+    L: 40,
     S: void 0,
     A: [
       "match",
@@ -131,9 +131,9 @@ var initialize = (sheet, { rows = DEFAULT_ROWS, columns = DEFAULT_COLUMNS } = {}
     insertIndices(sheet.columns, 0, columns, MAX_COLUMNS);
   }
 };
-var createSheet = ({ title, ...size } = {}) => {
+var createSheet = ({ name, cells, ...size } = {}) => {
   const sheet = create(SheetType, {
-    title,
+    name,
     cells: {},
     rows: [],
     columns: [],
@@ -142,6 +142,14 @@ var createSheet = ({ title, ...size } = {}) => {
     formatting: {}
   });
   initialize(sheet, size);
+  if (cells) {
+    Object.entries(cells).forEach(([key, { value }]) => {
+      const idx = addressToIndex(sheet, addressFromA1Notation(key));
+      sheet.cells[idx] = {
+        value
+      };
+    });
+  }
   return sheet;
 };
 var addressToIndex = (sheet, cell) => {
@@ -536,15 +544,22 @@ var ComputeGraphContextProvider = ({ registry, children }) => {
 };
 
 // packages/plugins/plugin-sheet/src/components/index.ts
-var SheetContainer = React2.lazy(() => import("./SheetContainer-V4GCCZTX.mjs"));
+var SheetContainer = React2.lazy(() => import("./SheetContainer-LG77O4RM.mjs"));
 
 // packages/plugins/plugin-sheet/src/hooks/useComputeGraph.ts
 var useComputeGraph = (space) => {
   const { registry } = useContext(ComputeGraphContext) ?? raise(new Error("Missing ComputeGraphContext"));
-  return useAsyncState(async () => space && registry.getOrCreateGraph(space), [
+  const [graph] = useAsyncState(async () => {
+    if (space) {
+      const graph2 = registry.getOrCreateGraph(space);
+      await graph2.open();
+      return graph2;
+    }
+  }, [
     space,
     registry
   ]);
+  return graph;
 };
 
 // packages/plugins/plugin-sheet/src/hooks/useFormattingModel.ts
@@ -664,6 +679,7 @@ var FormattingModel = class {
 // packages/plugins/plugin-sheet/src/model/sheet-model.ts
 import { Event } from "@dxos/async";
 import { Resource } from "@dxos/context";
+import { getTypename } from "@dxos/echo-schema";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { PublicKey } from "@dxos/keys";
 import { log } from "@dxos/log";
@@ -702,8 +718,6 @@ var SheetModel = class extends Resource {
     this._options = _options;
     this.id = `model-${PublicKey.random().truncate()}`;
     this.update = new Event();
-    this._node = this._graph.getOrCreateNode(createSheetName(this._sheet.id));
-    this.reset();
   }
   get graph() {
     return this._graph;
@@ -728,14 +742,19 @@ var SheetModel = class extends Resource {
       id: this.id
     }, {
       F: __dxlog_file2,
-      L: 105,
+      L: 104,
       S: this,
       C: (f, a) => f(...a)
     });
     initialize(this._sheet);
-    this.reset();
-    const unsubscribe = this._graph.update.on(() => this.update.emit());
+    this._node = this._graph.getOrCreateNode(createSheetName({
+      type: getTypename(this._sheet),
+      id: this._sheet.id
+    }));
+    await this._node.open();
+    const unsubscribe = this._node.update.on((event) => this.update.emit(event));
     this._ctx.onDispose(unsubscribe);
+    this.reset();
   }
   /**
   * Update engine.
@@ -743,13 +762,31 @@ var SheetModel = class extends Resource {
   * @deprecated
   */
   reset() {
-    this._node.hf.clearSheet(this._node.sheetId);
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 124,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.clearSheet(this._node.sheetId);
     Object.entries(this._sheet.cells).forEach(([key, { value }]) => {
+      invariant2(this._node, void 0, {
+        F: __dxlog_file2,
+        L: 127,
+        S: this,
+        A: [
+          "this._node",
+          ""
+        ]
+      });
       const { col, row } = addressFromIndex(this._sheet, key);
       if (typeof value === "string" && value.charAt(0) === "=") {
         value = this._graph.mapFormulaToNative(this._graph.mapFunctionBindingFromId(this.mapFormulaIndicesToRefs(value)));
       }
-      this._node.hf.setCellContents({
+      this._node.graph.hf.setCellContents({
         sheet: this._node.sheetId,
         row,
         col
@@ -764,7 +801,7 @@ var SheetModel = class extends Resource {
   */
   // TODO(burdon): Remove.
   recalculate() {
-    this._node.hf.rebuildAndRecalculate();
+    this._node?.graph.hf.rebuildAndRecalculate();
   }
   insertRows(i, n = 1) {
     insertIndices(this._sheet.rows, i, n, MAX_ROWS);
@@ -782,27 +819,63 @@ var SheetModel = class extends Resource {
   * Clear range of values.
   */
   clear(range) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 169,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
     const topLeft = getTopLeft(range);
     const values = this._iterRange(range, () => null);
-    this._node.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
+    this._node.graph.hf.setCellContents(toSimpleCellAddress(this._node.sheetId, topLeft), values);
     this._iterRange(range, (cell) => {
       const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
     });
   }
   cut(range) {
-    this._node.hf.cut(toModelRange(this._node.sheetId, range));
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 180,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.cut(toModelRange(this._node.sheetId, range));
     this._iterRange(range, (cell) => {
       const idx = addressToIndex(this._sheet, cell);
       delete this._sheet.cells[idx];
     });
   }
   copy(range) {
-    this._node.hf.copy(toModelRange(this._node.sheetId, range));
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 189,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    this._node.graph.hf.copy(toModelRange(this._node.sheetId, range));
   }
   paste(cell) {
-    if (!this._node.hf.isClipboardEmpty()) {
-      const changes = this._node.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 194,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (!this._node.graph.hf.isClipboardEmpty()) {
+      const changes = this._node.graph.hf.paste(toSimpleCellAddress(this._node.sheetId, cell));
       for (const change of changes) {
         if (change instanceof ExportedCellChange) {
           const { address, newValue } = change;
@@ -819,15 +892,31 @@ var SheetModel = class extends Resource {
   }
   // TODO(burdon): Display undo/redo state.
   undo() {
-    if (this._node.hf.isThereSomethingToUndo()) {
-      this._node.hf.undo();
-      this.update.emit();
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 209,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (this._node.graph.hf.isThereSomethingToUndo()) {
+      this._node.graph.hf.undo();
     }
   }
   redo() {
-    if (this._node.hf.isThereSomethingToRedo()) {
-      this._node.hf.redo();
-      this.update.emit();
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 217,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    if (this._node.graph.hf.isThereSomethingToRedo()) {
+      this._node.graph.hf.redo();
     }
   }
   /**
@@ -861,7 +950,16 @@ var SheetModel = class extends Resource {
   * Gets the regular or computed value from the engine.
   */
   getValue(cell) {
-    const value = this._node.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 260,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    const value = this._node.graph.hf.getCellValue(toSimpleCellAddress(this._node.sheetId, cell));
     if (value instanceof DetailedCellError) {
       return value.toString();
     }
@@ -871,14 +969,32 @@ var SheetModel = class extends Resource {
   * Get value type.
   */
   getValueType(cell) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 273,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
     const addr = toSimpleCellAddress(this._node.sheetId, cell);
-    const type = this._node.hf.getCellValueDetailedType(addr);
+    const type = this._node.graph.hf.getCellValueDetailedType(addr);
     return typeMap[type];
   }
   /**
   * Sets the value, updating the sheet and engine.
   */
   setValue(cell, value) {
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 283,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
     if (this._options.readonly) {
       throw new ReadonlyException();
     }
@@ -894,7 +1010,7 @@ var SheetModel = class extends Resource {
     if (refresh) {
       this.reset();
     }
-    this._node.hf.setCellContents({
+    this._node.graph.hf.setCellContents({
       sheet: this._node.sheetId,
       row: cell.row,
       col: cell.col
@@ -969,7 +1085,7 @@ var SheetModel = class extends Resource {
   mapFormulaRefsToIndices(formula) {
     invariant2(formula.charAt(0) === "=", void 0, {
       F: __dxlog_file2,
-      L: 358,
+      L: 372,
       S: this,
       A: [
         "formula.charAt(0) === '='",
@@ -986,7 +1102,7 @@ var SheetModel = class extends Resource {
   mapFormulaIndicesToRefs(formula) {
     invariant2(formula.charAt(0) === "=", void 0, {
       F: __dxlog_file2,
-      L: 368,
+      L: 382,
       S: this,
       A: [
         "formula.charAt(0) === '='",
@@ -1010,13 +1126,40 @@ var SheetModel = class extends Resource {
     return new Date(year, month - 1, day, hours, minutes, seconds);
   }
   toDateTime(num) {
-    return this._node.hf.numberToDateTime(num);
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 403,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToDateTime(num);
   }
   toDate(num) {
-    return this._node.hf.numberToDate(num);
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 408,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToDate(num);
   }
   toTime(num) {
-    return this._node.hf.numberToTime(num);
+    invariant2(this._node, void 0, {
+      F: __dxlog_file2,
+      L: 413,
+      S: this,
+      A: [
+        "this._node",
+        ""
+      ]
+    });
+    return this._node.graph.hf.numberToTime(num);
   }
 };
 
@@ -1029,11 +1172,10 @@ var useFormattingModel = (model) => {
 
 // packages/plugins/plugin-sheet/src/hooks/useSheetModel.ts
 import { useEffect as useEffect2, useState as useState3 } from "react";
-var useSheetModel = (space, sheet, { readonly } = {}) => {
-  const graph = useComputeGraph(space);
+var useSheetModel = (graph, sheet, { readonly } = {}) => {
   const [model, setModel] = useState3();
   useEffect2(() => {
-    if (!space || !graph || !sheet) {
+    if (!graph || !sheet) {
       return;
     }
     let model2;
@@ -1049,9 +1191,8 @@ var useSheetModel = (space, sheet, { readonly } = {}) => {
       void model2?.close();
     };
   }, [
-    space,
-    sheet,
     graph,
+    sheet,
     readonly
   ]);
   return model;
@@ -1073,8 +1214,8 @@ var useSheetContext = () => {
   });
   return context;
 };
-var SheetContextProvider = ({ children, sheet, space, readonly, onInfo }) => {
-  const model = useSheetModel(space, sheet, {
+var SheetContextProvider = ({ children, graph, sheet, readonly, onInfo }) => {
+  const model = useSheetModel(graph, sheet, {
     readonly
   });
   const formatting = useFormattingModel(model);
@@ -1456,10 +1597,10 @@ var CellEditor = ({ value, extension, autoFocus, onBlur, variant = "legacy", box
 // packages/plugins/plugin-sheet/src/components/CellEditor/extension.ts
 import { acceptCompletion, autocompletion, completionStatus, startCompletion } from "@codemirror/autocomplete";
 import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
-import { Facet } from "@codemirror/state";
 import { ViewPlugin, keymap as keymap2 } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
 import { spreadsheet } from "codemirror-lang-spreadsheet";
+import { singleValueFacet } from "@dxos/react-ui-editor/state";
 import { mx } from "@dxos/react-ui-theme";
 var highlightStyles = HighlightStyle.define([
   // Function.
@@ -1491,7 +1632,7 @@ var highlightStyles = HighlightStyle.define([
     class: "text-unAccent"
   }
 ]);
-var languageFacet = Facet.define();
+var languageFacet = singleValueFacet();
 var sheetExtension = ({ functions = [] }) => {
   const { extension, language } = spreadsheet({
     idiom: "en-US",
@@ -1608,7 +1749,7 @@ var rangeExtension = (onInit) => {
     update(view2) {
       const { anchor } = view2.state.selection.ranges[0];
       activeRange = void 0;
-      const [language] = view2.state.facet(languageFacet);
+      const language = view2.state.facet(languageFacet);
       const { topNode } = language.parser.parse(view2.state.doc.toString());
       visitTree(topNode, ({ type, from, to }) => {
         if (from <= anchor && to >= anchor) {
@@ -2172,7 +2313,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         id: model.id
       }, {
         F: __dxlog_file4,
-        L: 737,
+        L: 738,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -2290,8 +2431,7 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
     columnSizes
   });
   const id = fullyQualifiedId2(model.sheet);
-  const attendableAttrs = createAttendableAttributes(id);
-  const hasAttention = useHasAttention(id);
+  const { hasAttention } = useAttention(id);
   return /* @__PURE__ */ React6.createElement("div", {
     ref: containerRef,
     role: "grid",
@@ -2378,13 +2518,25 @@ var SheetGrid = /* @__PURE__ */ forwardRef(({ size, rows, columns, rowSizes, col
         }
       });
     });
-  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement("input", {
+  }))), /* @__PURE__ */ createPortal(/* @__PURE__ */ React6.createElement(SheetInput, {
     ref: inputRef,
-    autoFocus: true,
+    id,
+    onKeyDown: handleKeyDown
+  }), document.body));
+});
+var SheetInput = /* @__PURE__ */ forwardRef(({ id, onKeyDown }, forwardedRef) => {
+  const path = useAttentionPath();
+  const attendableAttrs = useAttendableAttributes(id);
+  return path.toReversed().reduce((acc, part) => {
+    return /* @__PURE__ */ React6.createElement("div", {
+      [ATTENABLE_ATTRIBUTE]: part
+    }, acc);
+  }, /* @__PURE__ */ React6.createElement("input", {
+    ref: forwardedRef,
     className: "absolute w-[1px] h-[1px] bg-transparent outline-none border-none caret-transparent",
-    onKeyDown: handleKeyDown,
+    onKeyDown,
     ...attendableAttrs
-  }), document.body));
+  }));
 });
 var SelectionOverlay = ({ root }) => {
   const { range } = useSheetContext();
@@ -2545,8 +2697,9 @@ export {
   createSheet,
   addressToIndex,
   compareIndexPositions,
+  useComputeGraph,
   useSheetContext,
   Sheet,
   SheetContainer
 };
-//# sourceMappingURL=chunk-U2JHW3L6.mjs.map
+//# sourceMappingURL=chunk-CHQAW4F4.mjs.map