@dxos/react-ui-editor 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.8.4-main.21d9917",
+  "version": "0.8.4-main.2244d791bb",
   "description": "Text editor components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -63,32 +63,32 @@
     "lodash.merge": "^4.6.2",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/app-graph": "0.8.4-main.21d9917",
-    "@dxos/async": "0.8.4-main.21d9917",
-    "@dxos/client": "0.8.4-main.21d9917",
-    "@dxos/context": "0.8.4-main.21d9917",
-    "@dxos/debug": "0.8.4-main.21d9917",
-    "@dxos/display-name": "0.8.4-main.21d9917",
-    "@dxos/echo": "0.8.4-main.21d9917",
-    "@dxos/echo-db": "0.8.4-main.21d9917",
-    "@dxos/invariant": "0.8.4-main.21d9917",
-    "@dxos/lit-ui": "0.8.4-main.21d9917",
-    "@dxos/protocols": "0.8.4-main.21d9917",
-    "@dxos/log": "0.8.4-main.21d9917",
-    "@dxos/react-ui-menu": "0.8.4-main.21d9917",
-    "@dxos/react-hooks": "0.8.4-main.21d9917",
-    "@dxos/react-ui-mosaic": "0.8.4-main.21d9917",
-    "@dxos/ui": "0.8.4-main.21d9917",
-    "@dxos/util": "0.8.4-main.21d9917",
-    "@dxos/ui-editor": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917"
+    "@dxos/app-graph": "0.8.4-main.2244d791bb",
+    "@dxos/async": "0.8.4-main.2244d791bb",
+    "@dxos/context": "0.8.4-main.2244d791bb",
+    "@dxos/debug": "0.8.4-main.2244d791bb",
+    "@dxos/display-name": "0.8.4-main.2244d791bb",
+    "@dxos/echo": "0.8.4-main.2244d791bb",
+    "@dxos/client": "0.8.4-main.2244d791bb",
+    "@dxos/echo-db": "0.8.4-main.2244d791bb",
+    "@dxos/lit-ui": "0.8.4-main.2244d791bb",
+    "@dxos/invariant": "0.8.4-main.2244d791bb",
+    "@dxos/log": "0.8.4-main.2244d791bb",
+    "@dxos/protocols": "0.8.4-main.2244d791bb",
+    "@dxos/react-hooks": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-mosaic": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-menu": "0.8.4-main.2244d791bb",
+    "@dxos/ui-editor": "0.8.4-main.2244d791bb",
+    "@dxos/ui": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "devDependencies": {
     "@automerge/automerge": "3.2.3",
     "@automerge/automerge-repo": "2.5.1",
     "@automerge/automerge-repo-network-broadcastchannel": "2.5.1",
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@types/chai": "^4.2.15",
     "@types/chai-dom": "^1.11.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -99,7 +99,7 @@
     "@types/react-test-renderer": "^17.0.2",
     "chai": "^4.4.1",
     "chai-dom": "^1.11.0",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "happy-dom": "^13.3.1",
     "jsdom": "^27.0.0",
     "mocha": "^10.6.0",
@@ -109,29 +109,29 @@
     "vite": "7.1.9",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
-    "@dxos/echo": "0.8.4-main.21d9917",
-    "@dxos/config": "0.8.4-main.21d9917",
-    "@dxos/echo-atom": "0.8.4-main.21d9917",
-    "@dxos/keyboard": "0.8.4-main.21d9917",
-    "@dxos/random": "0.8.4-main.21d9917",
-    "@dxos/react-client": "0.8.4-main.21d9917",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.21d9917",
-    "@dxos/react-ui-attention": "0.8.4-main.21d9917",
-    "@dxos/storybook-utils": "0.8.4-main.21d9917",
-    "@dxos/schema": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917",
-    "@dxos/ui-types": "0.8.4-main.21d9917"
+    "@dxos/config": "0.8.4-main.2244d791bb",
+    "@dxos/echo-atom": "0.8.4-main.2244d791bb",
+    "@dxos/echo": "0.8.4-main.2244d791bb",
+    "@dxos/random": "0.8.4-main.2244d791bb",
+    "@dxos/keyboard": "0.8.4-main.2244d791bb",
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-attention": "0.8.4-main.2244d791bb",
+    "@dxos/storybook-utils": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb",
+    "@dxos/ui-types": "0.8.4-main.2244d791bb",
+    "@dxos/schema": "0.8.4-main.2244d791bb"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917",
-    "@dxos/react-client": "0.8.4-main.21d9917"
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Editor/Editor.stories.tsx

@@ -53,7 +53,7 @@ const withExtensions: Decorator<EditorContentProps> = (Story, { args }) => {
 const meta = {
   title: 'ui/react-ui-editor/Editor',
   component: Editor.Content,
-  decorators: [withExtensions, withTheme, withLayout({ layout: 'column' }), withAttention],
+  decorators: [withExtensions, withTheme(), withLayout({ layout: 'column' }), withAttention()],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Editor/Editor.tsx

@@ -84,6 +84,8 @@ EditorRoot.displayName = 'Editor.Root';
 // Viewport
 //
 
+const EDITOR_VIEWPORT_NAME = 'Editor.Viewport';
+
 type EditorViewportProps = ThemedClassName<PropsWithChildren<{}>>;
 
 /**
@@ -97,12 +99,14 @@ const EditorViewport = ({ classNames, children }: EditorViewportProps) => {
   );
 };
 
-EditorViewport.displayName = 'Editor.Viewport';
+EditorViewport.displayName = EDITOR_VIEWPORT_NAME;
 
 //
 // Content
 //
 
+const EDITOR_CONTENT_NAME = 'Editor.Content';
+
 type EditorContentProps = Omit<NaturalEditorContentProps, 'ref'>;
 
 /**
@@ -110,7 +114,7 @@ type EditorContentProps = Omit<NaturalEditorContentProps, 'ref'>;
  * Automatically registers the editor controller with the context.
  */
 const EditorContent = ({ extensions: providedExtensions, ...props }: EditorContentProps) => {
-  const { extensions: additionalExtensions = [], setController } = useEditorContext(EditorContent.displayName);
+  const { extensions: additionalExtensions = [], setController } = useEditorContext(EDITOR_CONTENT_NAME);
 
   const extensions = useMemo(
     () => [additionalExtensions, providedExtensions].filter(isNonNullable).flat(),
@@ -120,12 +124,14 @@ const EditorContent = ({ extensions: providedExtensions, ...props }: EditorConte
   return <NaturalEditorContent {...props} extensions={extensions} ref={setController} />;
 };
 
-EditorContent.displayName = 'Editor.Content';
+EditorContent.displayName = EDITOR_CONTENT_NAME;
 
 //
 // Toolbar
 //
 
+const EDITOR_TOOLBAR_NAME = 'Editor.Toolbar';
+
 type EditorToolbarProps = Omit<NaturalEditorToolbarProps, 'getView' | 'state'>;
 
 /**
@@ -133,7 +139,7 @@ type EditorToolbarProps = Omit<NaturalEditorToolbarProps, 'getView' | 'state'>;
  * Automatically connects to the editor view through context.
  */
 const EditorToolbar = (props: EditorToolbarProps) => {
-  const { controller, state } = useEditorContext(EditorToolbar.displayName);
+  const { controller, state } = useEditorContext(EDITOR_TOOLBAR_NAME);
 
   // TODO(burdon): Fix invariant.
   const getView = useCallback(() => {
@@ -144,7 +150,7 @@ const EditorToolbar = (props: EditorToolbarProps) => {
   return <NaturalEditorToolbar {...props} getView={getView} state={state} />;
 };
 
-EditorToolbar.displayName = 'Editor.Toolbar';
+EditorToolbar.displayName = EDITOR_TOOLBAR_NAME;
 
 //
 // Editor

package/src/components/EditorMenuProvider/EditorMenuProvider.tsx

@@ -78,10 +78,8 @@ export const EditorMenuProvider = ({
       root,
       DX_ANCHOR_ACTIVATE as any,
       (event: DxAnchorActivate) => {
-        const { trigger, refId } = event;
-
-        // If this has a `refId`, then it’s probably a URL or DXN and out of scope for this component.
-        if (!refId) {
+        const { trigger, dxn } = event;
+        if (!dxn) {
           triggerRef.current = trigger as HTMLButtonElement;
           if (onActivate) {
             onActivate({ view: viewRef.current!, trigger: trigger.getAttribute('data-trigger') ?? undefined });
@@ -115,7 +113,7 @@ export const EditorMenuProvider = ({
       <Popover.Portal>
         <Popover.Content
           align='start'
-          classNames={tx('menu.content', 'menu--exotic-unfocusable', { elevation: 'positioned' }, [
+          classNames={tx('menu.content', { elevation: 'positioned' }, [
             'overflow-y-auto',
             !menuGroups.length && 'hidden',
           ])}
@@ -132,7 +130,7 @@ export const EditorMenuProvider = ({
           }}
           onOpenAutoFocus={(event) => event.preventDefault()}
         >
-          <Popover.Viewport classNames={tx('menu.viewport', 'menu__viewport--exotic-unfocusable', {})}>
+          <Popover.Viewport classNames={tx('menu.viewport', {})}>
             <Menu groups={menuGroups} currentItem={currentItem} onSelect={handleSelect} />
           </Popover.Viewport>
           <Popover.Arrow />
@@ -162,7 +160,7 @@ const Menu = ({ groups, currentItem, onSelect }: MenuProps) => {
       {groups.map((group, index) => (
         <Fragment key={group.id}>
           <MenuGroup group={group} currentItem={currentItem} onSelect={onSelect} />
-          {index < groups.length - 1 && <div className={tx('menu.separator', 'menu__item', {})} />}
+          {index < groups.length - 1 && <div className={tx('menu.separator', {})} />}
         </Fragment>
       ))}
     </ul>
@@ -185,7 +183,7 @@ const MenuGroup = ({ group, currentItem, onSelect }: MenuGroupProps) => {
   return (
     <>
       {group.label && (
-        <div className={tx('menu.groupLabel', 'menu__group__label', {})}>
+        <div className={tx('menu.groupLabel', {})}>
           <span>{toLocalizedString(group.label, t)}</span>
         </div>
       )}
@@ -221,11 +219,7 @@ const MenuItem = ({ item, current, onSelect }: MenuItemProps) => {
   const handleSelect = useCallback(() => onSelect?.(item), [item, onSelect]);
 
   return (
-    <li
-      ref={listRef}
-      className={tx('menu.item', 'menu__item--exotic-unfocusable', {}, [current && 'bg-hoverSurface'])}
-      onClick={handleSelect}
-    >
+    <li ref={listRef} className={tx('menu.item', {}, [current && 'bg-hoverSurface'])} onClick={handleSelect}>
       {item.icon && <Icon icon={item.icon} size={5} />}
       <span className='grow truncate'>{toLocalizedString(item.label, t)}</span>
     </li>

package/src/components/EditorPreviewProvider/EditorPreviewProvider.tsx

@@ -32,16 +32,16 @@ export const EditorPreviewProvider = ({ children, onLookup }: EditorPreviewProvi
 
   const handleActivate = useCallback(
     (event: DxAnchorActivate) => {
-      const { refId, label, trigger: dxTrigger } = event;
+      const { dxn, label, trigger } = event;
       setValue((value) => ({
         ...value,
-        link: { label, ref: refId },
+        link: { label, dxn },
         pending: true,
       }));
 
-      triggerRef.current = dxTrigger;
+      triggerRef.current = trigger;
       queueMicrotask(() => setOpen(true));
-      void onLookup?.({ label, ref: refId }).then((target) =>
+      void onLookup?.({ label, dxn }).then((target) =>
         setValue((value) => ({
           ...value,
           target: target ?? undefined,
@@ -68,9 +68,7 @@ export const EditorPreviewProvider = ({ children, onLookup }: EditorPreviewProvi
     <EditorPreviewContextProvider pending={value.pending} link={value.link} target={value.target}>
       <Popover.Root open={open} onOpenChange={setOpen}>
         <Popover.VirtualTrigger virtualRef={triggerRef as unknown as RefObject<HTMLButtonElement>} />
-
-        {/* Content */}
-        <div ref={setRoot} role='none' className='contents'>
+        <div role='none' className='contents' ref={setRoot}>
           {children}
         </div>
       </Popover.Root>

package/src/components/EditorToolbar/EditorToolbar.tsx

@@ -55,7 +55,6 @@ export type EditorToolbarProps = ThemedClassName<
   } & (EditorToolbarActionGraphProps & EditorToolbarFeatureFlags)
 >;
 
-// TODO(burdon): Remove role dependency.
 export const EditorToolbar = memo(({ classNames, role, attendableId, onAction, ...props }: EditorToolbarProps) => {
   const menuProps = useEditorToolbarActionGraph(props);
 

package/src/stories/Automerge.stories.tsx

@@ -16,7 +16,7 @@ import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
 import { useClientStory, withMultiClientProvider } from '@dxos/react-client/testing';
 import { Button, useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { render } from '@dxos/storybook-utils';
 import { createBasicExtensions, createDataExtensions, createThemeExtensions } from '@dxos/ui-editor';
 
@@ -137,6 +137,7 @@ const EchoStory = () => {
 const meta = {
   title: 'ui/react-ui-editor/Automerge',
   component: Editor as any,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -149,14 +150,12 @@ type Story = StoryObj<typeof meta>;
 
 // TODO(burdon): ERROR: factories.ts:126 Error: Non-base58 character
 export const Default: Story = {
-  decorators: [withTheme],
   render: render(DefaultStory),
 };
 
 // TODO(burdon): Failing (doesn't sync)
 export const WithEcho: Story = {
   decorators: [
-    withTheme,
     withMultiClientProvider({
       numClients: 2,
       createIdentity: true,

package/src/stories/CommandDialog.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type KeyboardEvent, useState } from 'react';
 
 import { type Button, IconButton, Input } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { editorWidth, join } from '@dxos/ui-editor';
 import { mx } from '@dxos/ui-theme';
 
@@ -68,7 +68,7 @@ const CommandDialog = ({ onAction }: { onAction: (action?: any) => void }) => {
 const meta = {
   title: 'ui/react-ui-editor/CommandDialog',
   render: () => <EditorStory text={join('# Command', '', '')} extensions={[]} />,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/Comments.stories.tsx

@@ -9,7 +9,7 @@ import React, { type FC, useContext, useMemo } from 'react';
 import { keySymbols, parseShortcut } from '@dxos/keyboard';
 import { PublicKey } from '@dxos/keys';
 import { log } from '@dxos/log';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import { type Comment, annotations, comments, createExternalCommentSync } from '@dxos/ui-editor';
 
@@ -20,7 +20,7 @@ import { EditorStory, content, longText } from './components';
 const meta = {
   title: 'ui/react-ui-editor/Comments',
   component: EditorStory,
-  decorators: [withRegistry, withTheme],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/EditorToolbar.stories.tsx

@@ -8,7 +8,7 @@ import React, { useCallback, useContext, useState } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import {
   type EditorInputMode,
@@ -91,7 +91,7 @@ const DefaultStory = ({ autoFocus, initialValue, placeholder }: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/EditorToolbar',
   render: DefaultStory,
-  decorators: [withRegistry, withTheme],
+  decorators: [withRegistry, withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/stories/Experimental.stories.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 import { log } from '@dxos/log';
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { blast, defaultOptions, dropFile, join, typewriter } from '@dxos/ui-editor';
 
 import { EditorStory, content } from './components';
@@ -16,7 +16,7 @@ import { EditorStory, content } from './components';
 const meta = {
   title: 'ui/react-ui-editor/Experimental',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/Markdown.stories.tsx

@@ -6,7 +6,7 @@ import { markdown } from '@codemirror/lang-markdown';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { decorateMarkdown, image, join, linkTooltip, table } from '@dxos/ui-editor';
 
 import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, text } from './components';
@@ -14,7 +14,7 @@ import { EditorStory, content, defaultExtensions, headings, renderLinkTooltip, t
 const meta = {
   title: 'ui/react-ui-editor/Markdown',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/Outliner.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo, useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
 import { deleteItem, hashtag, join, listItemToString, outliner, treeFacet } from '@dxos/ui-editor';
 
@@ -68,7 +68,7 @@ const DefaultStory = ({ text }: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/Outliner',
   render: DefaultStory,
-  decorators: [withTheme, withAttention],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withAttention()],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/Popover.stories.tsx

@@ -8,7 +8,7 @@ import React, { useCallback, useState } from 'react';
 import { Obj, Query } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { TestSchema, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
 import { Domino, mx } from '@dxos/ui';
 import { insertAtCursor, insertAtLineStart, join } from '@dxos/ui-editor';
@@ -103,7 +103,7 @@ const LinkStory = (args: StoryProps) => {
 const meta = {
   title: 'ui/react-ui-editor/Popover',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/Preview.stories.tsx

@@ -11,7 +11,7 @@ import { createPortal } from 'react-dom';
 import { invariant } from '@dxos/invariant';
 import { faker } from '@dxos/random';
 import { Popover } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Card } from '@dxos/react-ui-mosaic';
 import {
   type PreviewBlock,
@@ -28,9 +28,9 @@ import { type EditorController, EditorPreviewProvider, useEditorPreview } from '
 
 import { EditorStory } from './components';
 
-const handlePreviewLookup = async ({ label, ref }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
+const handlePreviewLookup = async ({ dxn, label }: PreviewLinkRef): Promise<PreviewLinkTarget> => {
   // Random text.
-  faker.seed(ref.split('').reduce((acc: number, char: string) => acc + char.charCodeAt(0), 1));
+  faker.seed(dxn.split('').reduce((acc: number, char: string) => acc + char.charCodeAt(0), 1));
   const text = Array.from({ length: 2 }, () => faker.lorem.paragraphs()).join('\n\n');
   return {
     label,
@@ -51,6 +51,9 @@ const useRefTarget = (link: PreviewLinkRef): PreviewLinkTarget | undefined => {
 
 const PreviewCard = () => {
   const { target } = useEditorPreview('PreviewCard');
+  if (!target) {
+    return null;
+  }
 
   return (
     <Popover.Portal>
@@ -59,16 +62,14 @@ const PreviewCard = () => {
           <Card.Root border={false}>
             <Card.Toolbar>
               <Card.Icon toolbar icon='ph--file-text--regular' />
-              <Card.Title>{target?.label}</Card.Title>
+              <Card.Title>{target.label}</Card.Title>
               <Popover.Close asChild>
                 <Card.Close />
               </Popover.Close>
             </Card.Toolbar>
-            {target && (
-              <Card.Row>
-                <Card.Text variant='description'>{target.text}</Card.Text>
-              </Card.Row>
-            )}
+            <Card.Row>
+              <Card.Text variant='description'>{target.text}</Card.Text>
+            </Card.Row>
           </Card.Root>
         </Popover.Viewport>
         <Popover.Arrow />
@@ -101,7 +102,7 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
       }
 
       const link = getLinkRef(view.state, node);
-      if (link?.ref !== action.link.ref) {
+      if (link?.dxn !== action.link.dxn) {
         return;
       }
 
@@ -180,7 +181,7 @@ const PreviewBlockComponent = ({ link, el, view }: { link: PreviewLinkRef; el: H
 const meta = {
   title: 'ui/react-ui-editor/Preview',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },
@@ -217,7 +218,7 @@ export const Default: Story = {
             setPreviewBlocks((prev) => [...prev, block]);
           },
           removeBlockContainer: (block) => {
-            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.ref !== block.link.ref));
+            setPreviewBlocks((prev) => prev.filter(({ link: prevLink }) => prevLink.dxn !== block.link.dxn));
           },
         }),
       ];
@@ -230,7 +231,7 @@ export const Default: Story = {
         <PreviewCard />
         {controller?.view &&
           previewBlocks.map(({ link, el }) => (
-            <PreviewBlockComponent key={link.ref} link={link} el={el} view={controller.view!} />
+            <PreviewBlockComponent key={link.dxn} link={link} el={el} view={controller.view!} />
           ))}
       </EditorPreviewProvider>
     );

package/src/stories/Tags.stories.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   type XmlWidgetRegistry,
   type XmlWidgetState,
@@ -87,7 +87,7 @@ const text = trim`
 const meta = {
   title: 'ui/react-ui-editor/Tags',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/TextEditor.stories.tsx

@@ -8,7 +8,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { log } from '@dxos/log';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   InputModeExtensions,
   decorateMarkdown,
@@ -37,7 +37,7 @@ import {
 const meta = {
   title: 'ui/react-ui-editor/TextEditor',
   component: EditorStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
     controls: { disable: true },

package/src/stories/Theme.stories.tsx

@@ -46,7 +46,7 @@ const DefaultStory = () => {
 const meta: Meta<typeof DefaultStory> = {
   title: 'ui/react-ui-editor/Theme',
   component: DefaultStory,
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },