@dxos/plugin-simple-layout 0.8.4-main.d05673bc65 → 0.8.4-main.fcfe5033a5

package/src/components/SimpleLayout/AppBar.tsx

@@ -5,16 +5,17 @@
 import { type Atom, useAtomValue } from '@effect-atom/atom-react';
 import React, { Fragment } from 'react';
 
-import { IconButton, Popover, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+import { IconButton, Popover, Toolbar, useTranslation } from '@dxos/react-ui';
 import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
-import { mx, osTranslations } from '@dxos/ui-theme';
+import { composable, composableProps, osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
 
-import { meta } from '../../meta';
 import { useMobileLayout } from '../MobileLayout';
 
 const APP_BAR_NAME = 'SimpleLayout.AppBar';
 
-export type AppBarProps = ThemedClassName<{
+export type AppBarProps = {
   /** Title/label to display in the banner. */
   title?: string;
   /** Action graph atom for the dropdown menu. */
@@ -27,68 +28,67 @@ export type AppBarProps = ThemedClassName<{
   onAction?: ActionExecutor;
   /** Callback when back button is clicked. */
   onBack?: () => void;
-}>;
+};
 
 /**
  * AppBar component that renders a title, optional back button, and actions dropdown.
  */
-export const AppBar = ({
-  classNames,
-  title,
-  actions,
-  showBackButton,
-  popoverAnchorId,
-  onAction,
-  onBack,
-}: AppBarProps) => {
-  const { t } = useTranslation(meta.id);
-  const menu = useMenuActions(actions);
-  const actionsValue = useAtomValue(actions);
-  const hasActions = actionsValue.nodes.length > 0;
-  const { keyboardOpen } = useMobileLayout(APP_BAR_NAME);
+export const AppBar = composable<HTMLDivElement, AppBarProps>(
+  ({ classNames, title, actions, showBackButton, popoverAnchorId, onAction, onBack, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const menuActions = useMenuActions(actions);
+    const actionsValue = useAtomValue(actions);
+    const hasActions = actionsValue.nodes.length > 0;
+    const { keyboardOpen } = useMobileLayout(APP_BAR_NAME);
 
-  // Fall back to app name if no title provided.
-  const displayTitle = title ?? t('current app name', { ns: osTranslations });
+    // Fall back to app name if no title provided.
+    const displayTitle = title ?? t('current-app.name', { ns: osTranslations });
 
-  // Wrap the menu trigger with Popover.Anchor when the popoverAnchorId is set.
-  const AnchorRoot = popoverAnchorId ? Popover.Anchor : Fragment;
+    // Wrap the menu trigger with Popover.Anchor when the popoverAnchorId is set.
+    const AnchorRoot = popoverAnchorId ? Popover.Anchor : Fragment;
 
-  return (
-    <Toolbar.Root
-      role='banner'
-      classNames={mx(
-        'grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center',
-        'dx-density-fine',
-        classNames,
-      )}
-    >
-      {keyboardOpen ? (
-        <IconButton variant='ghost' icon='ph--x--regular' iconOnly label={t('done label')} />
-      ) : showBackButton ? (
-        <IconButton variant='ghost' icon='ph--caret-left--regular' iconOnly label={t('back label')} onClick={onBack} />
-      ) : (
-        <div />
-      )}
-      <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
-      {hasActions ? (
-        <AnchorRoot>
-          <Menu.Root {...menu} caller={meta.id} onAction={onAction}>
-            <Menu.Trigger asChild>
-              <IconButton
-                variant='ghost'
-                icon='ph--dots-three-vertical--regular'
-                iconOnly
-                label={t('actions menu label')}
-              />
-            </Menu.Trigger>
-            <Menu.Content />
-          </Menu.Root>
-        </AnchorRoot>
-      ) : (
-        <span />
-      )}
-    </Toolbar.Root>
-  );
-};
+    return (
+      <Toolbar.Root
+        {...composableProps(props, {
+          role: 'banner',
+          classNames: 'grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center dx-density-fine',
+        })}
+        ref={forwardedRef}
+      >
+        {keyboardOpen ? (
+          <IconButton variant='ghost' icon='ph--x--regular' iconOnly label={t('done.label')} />
+        ) : showBackButton ? (
+          <IconButton
+            variant='ghost'
+            icon='ph--caret-left--regular'
+            iconOnly
+            label={t('back.label')}
+            onClick={onBack}
+          />
+        ) : (
+          <div />
+        )}
+        <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
+        {hasActions ? (
+          <AnchorRoot>
+            <Menu.Root {...menuActions} caller={meta.id} onAction={onAction}>
+              <Menu.Trigger asChild>
+                <IconButton
+                  variant='ghost'
+                  icon='ph--dots-three-vertical--regular'
+                  iconOnly
+                  label={t('actions-menu.label')}
+                />
+              </Menu.Trigger>
+              <Menu.Content />
+            </Menu.Root>
+          </AnchorRoot>
+        ) : (
+          <span />
+        )}
+      </Toolbar.Root>
+    );
+  },
+);
 
 AppBar.displayName = APP_BAR_NAME;

package/src/components/SimpleLayout/Drawer.tsx

@@ -5,14 +5,15 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { getCompanionVariant } from '@dxos/app-toolkit';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { type Node, useNode } from '@dxos/plugin-graph';
 import { ErrorFallback, Panel } from '@dxos/react-ui';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { Menu, useMenuActions } from '@dxos/react-ui-menu';
 
-import { useCompanions, useDrawerActions, useSimpleLayoutState } from '../../hooks';
-import { ContentLoading } from '../ContentLoading';
+import { useCompanions, useDrawerActions, useSimpleLayoutState } from '#hooks';
+
+import { Loading } from '../Loading';
 
 const DRAWER_NAME = 'SimpleLayout.Drawer';
 
@@ -23,7 +24,7 @@ export const Drawer = () => {
   const { graph } = useAppGraph();
   const { state: layoutState } = useSimpleLayoutState();
 
-  const placeholder = useMemo(() => <ContentLoading />, []);
+  const placeholder = useMemo(() => <Loading />, []);
 
   // Get all companions for the current active (primary) item.
   const activeId = layoutState.active ?? layoutState.workspace;
@@ -35,31 +36,38 @@ export const Drawer = () => {
   const parentNode = useNode(graph, activeId);
 
   // Build Surface data for the companion content.
-  const data = useMemo(() => {
-    return (
-      node && {
-        attendableId: companionId,
-        subject: node.data,
-        companionTo: parentNode?.data,
-        properties: node.properties,
-        variant,
-      }
-    );
+  const data = useMemo<AppSurface.ArticleData | undefined>(() => {
+    if (!node || !companionId) {
+      return undefined;
+    }
+    return {
+      attendableId: companionId,
+      subject: node.data,
+      companionTo: parentNode?.data,
+      properties: node.properties,
+      variant,
+    };
   }, [companionId, node, parentNode, variant]);
 
   // Get drawer actions (tabs + toolbar buttons).
   const { actions, onAction } = useDrawerActions(DRAWER_NAME);
-  const menu = useMenuActions(actions);
+  const menuActions = useMenuActions(actions);
 
   return (
     <Panel.Root>
       <Panel.Toolbar>
-        <Menu.Root {...menu} alwaysActive onAction={onAction}>
-          <Menu.Toolbar density='coarse' />
+        <Menu.Root {...menuActions} alwaysActive onAction={onAction}>
+          <Menu.Toolbar />
         </Menu.Root>
       </Panel.Toolbar>
-      <Panel.Content asChild>
-        <Surface.Surface role='article' data={data} limit={1} fallback={ErrorFallback} placeholder={placeholder} />
+      <Panel.Content>
+        <Surface.Surface
+          type={AppSurface.Article}
+          data={data}
+          limit={1}
+          fallback={ErrorFallback}
+          placeholder={placeholder}
+        />
       </Panel.Content>
     </Panel.Root>
   );
@@ -79,7 +87,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
 
     // Try to find companion matching the preferred variant.
     if (preferredVariant) {
-      const preferred = companions.find((c) => getCompanionVariant(c.id) === preferredVariant);
+      const preferred = companions.find((c) => getLinkedVariant(c.id) === preferredVariant);
       if (preferred) {
         return preferred;
       }
@@ -90,7 +98,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
   }, [companions, preferredVariant]);
 
   const companionId = selectedCompanion?.id;
-  const variant = companionId ? getCompanionVariant(companionId) : undefined;
+  const variant = companionId ? getLinkedVariant(companionId) : undefined;
 
   return { selectedCompanion, companionId, variant };
 };

package/src/components/SimpleLayout/Main.tsx

@@ -5,17 +5,16 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
-import { ErrorFallback } from '@dxos/react-ui';
+import { ErrorFallback, Panel } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { mx } from '@dxos/ui-theme';
 
-import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '../../hooks';
-import { ContentLoading } from '../ContentLoading';
+import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '#hooks';
+
 import { useExpandPath } from '../hooks';
+import { Loading } from '../Loading';
 import { useMobileLayout } from '../MobileLayout';
-
 import { AppBar } from './AppBar';
 import { NavBar } from './NavBar';
 
@@ -32,7 +31,7 @@ export const Main = () => {
   const { actions, onAction } = useNavbarActions();
   const appBarProps = useAppBarProps();
 
-  const placeholder = useMemo(() => <ContentLoading />, []);
+  const placeholder = useMemo(() => <Loading />, []);
 
   const { graph } = useAppGraph();
   const node = useNode(graph, id);
@@ -53,29 +52,26 @@ export const Main = () => {
   const showNavBar = !keyboardOpen && !state.isPopover && state.drawerState === 'closed';
 
   return (
-    <div
-      role='none'
-      className={mx(
-        'h-full grid overflow-hidden bg-toolbar-surface',
-        showNavBar
-          ? 'grid-rows-[var(--dx-rail-action)_1fr_var(--dx-toolbar-size)]'
-          : 'grid-rows-[var(--dx-rail-action)_1fr]',
-      )}
-      {...attentionAttrs}
-    >
-      <AppBar {...appBarProps} />
-      <article className='h-full overflow-hidden bg-base-surface'>
+    <Panel.Root {...attentionAttrs} className='dx-document'>
+      <Panel.Toolbar asChild>
+        <AppBar {...appBarProps} />
+      </Panel.Toolbar>
+      <Panel.Content role='article' className='bg-base-surface'>
         <Surface.Surface
           key={id}
-          role='article'
+          type={AppSurface.Article}
           data={data}
           limit={1}
           fallback={ErrorFallback}
           placeholder={placeholder}
         />
-      </article>
-      {showNavBar && <NavBar classNames='border-y border-subdued-separator' actions={actions} onAction={onAction} />}
-    </div>
+      </Panel.Content>
+      {showNavBar && (
+        <Panel.Statusbar asChild>
+          <NavBar actions={actions} onAction={onAction} />
+        </Panel.Statusbar>
+      )}
+    </Panel.Root>
   );
 };
 

package/src/components/SimpleLayout/NavBar.stories.tsx

@@ -7,12 +7,11 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 import { type Mock, expect, fn, screen, userEvent, within } from 'storybook/test';
 
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ActionGraphProps, createGapSeparator, createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
 import { translations } from '../../translations';
-
 import { NavBar } from './NavBar';
 
 const MAIN_MENU_GROUP_ID = 'navbar-main-menu';

package/src/components/SimpleLayout/NavBar.tsx

@@ -5,30 +5,29 @@
 import { type Atom } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { type ThemedClassName } from '@dxos/react-ui';
 import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
-import { mx } from '@dxos/ui-theme';
+import { composable, composableProps } from '@dxos/ui-theme';
 
 const NAVBAR_NAME = 'SimpleLayout.NavBar';
 
-export type NavBarProps = ThemedClassName<{
+export type NavBarProps = {
   /** Action graph atom for the toolbar. */
   actions: Atom.Atom<ActionGraphProps>;
   /** Action executor callback. */
   onAction?: ActionExecutor;
-}>;
+};
 
 /**
  * Presentational navbar component that renders a toolbar from an action graph.
  */
-export const NavBar = ({ classNames, actions, onAction }: NavBarProps) => {
-  const menu = useMenuActions(actions);
+export const NavBar = composable<HTMLDivElement, NavBarProps>(({ actions, onAction, ...props }, forwardedRef) => {
+  const menuActions = useMenuActions(actions);
 
   return (
-    <Menu.Root {...menu} alwaysActive onAction={onAction}>
-      <Menu.Toolbar density='coarse' classNames={mx(classNames)} />
+    <Menu.Root {...menuActions} alwaysActive onAction={onAction}>
+      <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
     </Menu.Root>
   );
-};
+});
 
 NavBar.displayName = NAVBAR_NAME;

package/src/components/SimpleLayout/SimpleLayout.stories.tsx

@@ -5,80 +5,69 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 import { Collection } from '@dxos/echo';
-import { ClientOperation, ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { SearchPlugin } from '@dxos/plugin-search';
 import { SpacePlugin } from '@dxos/plugin-space';
-import { SpaceOperation } from '@dxos/plugin-space/types';
 import { corePlugins } from '@dxos/plugin-testing';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { translations as searchTranslation } from '@dxos/react-ui-searchlist';
+import { translations as searchTranslation } from '@dxos/react-ui-search';
+import { withLayout } from '@dxos/react-ui/testing';
+
+import { ReactRoot, ReactSurface, State } from '#capabilities';
+import { meta as pluginMeta } from '#meta';
+import { SimpleLayoutEvents } from '#types';
 
-import { OperationResolver, type SimpleLayoutStateOptions, State } from '../../capabilities';
-import { meta as pluginMeta } from '../../meta';
 import { type SimpleLayoutPluginOptions } from '../../SimpleLayoutPlugin';
 import { translations } from '../../translations';
-
 import { SimpleLayout } from './SimpleLayout';
 
-const TestPlugin = Plugin.define<SimpleLayoutPluginOptions>(pluginMeta).pipe(
-  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
-  Plugin.addModule(({ isPopover = false }) => ({
-    id: Capability.getModuleTag(State),
-    activatesOn: ActivationEvents.Startup,
-    activatesAfter: [AppActivationEvents.LayoutReady],
-    activate: () => State({ initialState: { isPopover } } satisfies SimpleLayoutStateOptions),
-  })),
-  Plugin.addModule({
-    id: 'setup',
-    activatesOn: ActivationEvents.OperationInvokerReady,
-    activate: Effect.fnUntraced(function* () {
-      const { invoke } = yield* Capability.get(Capabilities.OperationInvoker);
-      yield* invoke(ClientOperation.CreateIdentity, {});
-      const { space: work } = yield* invoke(SpaceOperation.Create, { name: 'Work Space' });
-      const { space: sharedProject } = yield* invoke(SpaceOperation.Create, { name: 'Shared Project' });
-
-      // Add collections to Work Space.
-      yield* invoke(SpaceOperation.AddObject, {
-        target: work.db,
-        object: Collection.make({ name: 'Projects', objects: [] }),
-      });
-      yield* invoke(SpaceOperation.AddObject, {
-        target: work.db,
-        object: Collection.make({ name: 'Documents', objects: [] }),
-      });
-
-      // Add collections to Shared Project.
-      yield* invoke(SpaceOperation.AddObject, {
-        target: sharedProject.db,
-        object: Collection.make({ name: 'Tasks', objects: [] }),
-      });
-      yield* invoke(SpaceOperation.AddObject, {
-        target: sharedProject.db,
-        object: Collection.make({ name: 'Notes', objects: [] }),
-      });
-    }),
-  }),
-  Plugin.make,
-);
-
-const createPluginManager = ({ isPopover }: { isPopover: boolean }) => {
+const createPluginManager = ({ isPopover }: { isPopover?: boolean }) => {
   return withPluginManager({
+    setupEvents: [AppActivationEvents.SetupSettings],
     plugins: [
       ...corePlugins(),
       ClientPlugin({
         types: [Collection.Collection],
+        onClientInitialized: ({ client }) =>
+          Effect.gen(function* () {
+            yield* Effect.promise(() => client.halo.createIdentity());
+          }),
       }),
+
       SearchPlugin(),
       SpacePlugin({}),
-      TestPlugin({ isPopover }),
+
+      // TODO(burdon): This should be factored ouf from SimpleLayoutPlugin.
+      Plugin.define<SimpleLayoutPluginOptions>(pluginMeta).pipe(
+        Plugin.addModule(({ isPopover = false }) => ({
+          id: Capability.getModuleTag(State),
+          activatesOn: ActivationEvents.Startup,
+          firesAfterActivation: [SimpleLayoutEvents.StateReady, AppActivationEvents.LayoutReady],
+          activate: () => State({ initialState: { isPopover } }),
+        })),
+        Plugin.addModule({
+          id: Capability.getModuleTag(ReactRoot),
+          activatesOn: ActivationEvents.Startup,
+          activate: ReactRoot,
+        }),
+        Plugin.addModule({
+          id: Capability.getModuleTag(ReactSurface),
+          activatesOn: ActivationEvents.Startup,
+          activate: ReactSurface,
+        }),
+        Plugin.make,
+      )({ isPopover }),
     ],
   });
 };
 
+/**
+ * NOTE: To expose to iphone on network:
+ * `moon run storybook-react:serve dev -H 0.0.0.0`
+ */
 const meta = {
   title: 'plugins/plugin-simple-layout/components/SimpleLayout',
   component: SimpleLayout,
@@ -92,22 +81,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-/**
- * NOTE: To expose to iphone on network:
- * `moon run storybook-react:serve dev -H 0.0.0.0`
- */
 export const Default: Story = {
-  decorators: [
-    withTheme(),
-    withLayout({ layout: 'column', classNames: 'relative' }),
-    createPluginManager({ isPopover: false }),
-  ],
+  decorators: [withLayout({ layout: 'column', classNames: 'relative' }), createPluginManager({})],
 };
 
 export const Popover: Story = {
-  decorators: [
-    withTheme(),
-    withLayout({ layout: 'column', classNames: 'relative' }),
-    createPluginManager({ isPopover: true }),
-  ],
+  decorators: [withLayout({ layout: 'column', classNames: 'relative' }), createPluginManager({ isPopover: true })],
 };

package/src/components/SimpleLayout/SimpleLayout.tsx

@@ -2,58 +2,57 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
 import { Splitter, type SplitterMode } from '@dxos/react-ui';
 import { Mosaic } from '@dxos/react-ui-mosaic';
 
-import { useSimpleLayoutState } from '../../hooks';
+import { useSimpleLayoutState } from '#hooks';
+
+import { DebugOverlay } from '../DebugOverlay';
 import { Dialog } from '../Dialog';
 import { MobileLayout } from '../MobileLayout';
 import { PopoverContent, PopoverRoot } from '../Popover';
-
 import { Drawer } from './Drawer';
 import { Main } from './Main';
 
-// TODO(burdon): Mobile/Desktop variance?
 export const SimpleLayout = () => {
   const { state } = useSimpleLayoutState();
   const [keyboardOpen, setKeyboardOpen] = useState(false);
-  const [splitterMode, setSplitterMode] = useState<SplitterMode>('upper');
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('top');
 
   const drawerRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (keyboardOpen) {
-      // Determine which panel has focus and expand that one.
-      const activeElement = document.activeElement;
-      const drawerHasFocus = drawerRef.current?.contains(activeElement);
-      setSplitterMode(drawerHasFocus ? 'lower' : 'upper');
-    } else {
-      setSplitterMode(state.drawerState === 'closed' ? 'upper' : state.drawerState === 'open' ? 'both' : 'lower');
+
+  // Restore Splitter mode when keyboard closes.
+  useLayoutEffect(() => {
+    if (!keyboardOpen) {
+      setSplitterMode(state.drawerState === 'closed' ? 'top' : state.drawerState === 'open' ? 'split' : 'bottom');
     }
   }, [state.drawerState, keyboardOpen]);
 
   return (
-    <Mosaic.Root classNames='contents'>
-      <MobileLayout.Root
-        classNames='bg-toolbar-surface'
-        onKeyboardOpenChange={(keyboardOpen: boolean) => setKeyboardOpen(keyboardOpen)}
-      >
-        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
-          <PopoverRoot>
-            <Splitter.Root mode={splitterMode} ratio={0.55}>
-              <Splitter.Panel position='upper'>
-                <Main />
-              </Splitter.Panel>
-              <Splitter.Panel position='lower' ref={drawerRef}>
-                <Drawer />
-              </Splitter.Panel>
-            </Splitter.Root>
-            <Dialog />
-            <PopoverContent />
-          </PopoverRoot>
-        </MobileLayout.Panel>
-      </MobileLayout.Root>
-    </Mosaic.Root>
+    <DebugOverlay.Root enabled={false}>
+      <PopoverRoot>
+        <Mosaic.Root>
+          <MobileLayout.Root
+            classNames='dx-container grid relative bg-toolbar-surface'
+            onKeyboardOpenChange={(nextKeyboardOpen) => setKeyboardOpen(nextKeyboardOpen)}
+          >
+            <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'top' }}>
+              <Splitter.Root mode={splitterMode} ratio={0.55}>
+                <Splitter.Panel position='top'>
+                  <Main />
+                </Splitter.Panel>
+                <Splitter.Panel position='bottom' ref={drawerRef}>
+                  <Drawer />
+                </Splitter.Panel>
+              </Splitter.Root>
+              <Dialog />
+              <PopoverContent />
+            </MobileLayout.Panel>
+          </MobileLayout.Root>
+        </Mosaic.Root>
+      </PopoverRoot>
+    </DebugOverlay.Root>
   );
 };

package/src/components/hooks.ts

@@ -4,9 +4,9 @@
 
 import { useEffect } from 'react';
 
-import { expandAttendableId } from '@dxos/react-ui-attention';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Graph } from '@dxos/plugin-graph';
+import { expandAttendableId } from '@dxos/react-ui-attention';
 
 /**
  * Expand graph nodes along the full path from root to the given node ID.

package/src/components/index.ts

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ContentLoading';
+export * from './DebugOverlay';
 export * from './Home';
+export * from './Loading';
 export * from './MobileLayout';
 export * from './Popover';
 export * from './SimpleLayout';