@dxos/plugin-simple-layout 0.8.4-main.3eb6e50203 → 0.8.4-main.422d1c7879

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

@@ -5,82 +5,71 @@
 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 { ClientOperation, ClientPlugin } from '@dxos/plugin-client';
+import { AppActivationEvents } from '@dxos/app-toolkit';
+import { Collection } from '@dxos/echo';
+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 { Collection } from '@dxos/schema';
+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/SimpleLayout',
+  title: 'plugins/plugin-simple-layout/components/SimpleLayout',
   component: SimpleLayout,
   parameters: {
     layout: 'fullscreen',
@@ -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-toolbarSurface'
-        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

@@ -6,21 +6,21 @@ import { useEffect } from 'react';
 
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Graph } from '@dxos/plugin-graph';
+import { expandAttendableId } from '@dxos/react-ui-attention';
 
 /**
- * Hook to expand graph nodes two levels deep when directly linked to.
+ * Expand graph nodes along the full path from root to the given node ID.
+ * Walks each progressive prefix, ensuring ancestor nodes are materialized
+ * before attempting to access their children.
  */
-export const useLoadDescendents = (nodeId?: string) => {
+export const useExpandPath = (nodeId?: string) => {
   const { graph } = useAppGraph();
 
   useEffect(() => {
     if (nodeId) {
-      // First level: expand the node itself.
-      Graph.expand(graph, nodeId, 'outbound');
-      // Second level: expand each child.
-      Graph.getConnections(graph, nodeId, 'outbound').forEach((child) => {
-        Graph.expand(graph, child.id, 'outbound');
-      });
+      for (const prefix of expandAttendableId(nodeId)) {
+        Graph.expand(graph, prefix, 'child');
+      }
     }
   }, [nodeId, graph]);
 };

package/src/components/index.ts

@@ -2,9 +2,10 @@
 // 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';
-export * from './Workspace';
+export * from './NavBranch';

package/src/hooks/actions.ts

@@ -5,25 +5,24 @@
 import { type Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
-import { type Capabilities } from '@dxos/app-framework';
-import { type AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { type AppCapabilities } from '@dxos/app-toolkit';
 import { Node } from '@dxos/plugin-graph';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { type ActionGraphProps } from '@dxos/react-ui-menu';
 import { byPosition } from '@dxos/util';
 
-import { type SimpleLayoutState } from '../types';
+import { type SimpleLayoutState } from '#types';
 
 // TODO(wittjosiah): Factor out to shared location with plugin-deck.
-export const PLANK_COMPANION_TYPE = 'dxos.org/plugin/deck/plank-companion';
+export const PLANK_COMPANION_TYPE = 'org.dxos.plugin.deck.plank-companion';
 
 export type CompanionActionsConfig = {
   /** Prefix for companion action IDs (e.g. 'navbar' or 'drawer') */
   idPrefix: string;
   /** Optional: highlight companion with this variant */
   selectedVariant?: string;
-  /** invokeSync function for dispatching operations */
-  invokeSync: Capabilities.OperationInvoker['invokeSync'];
+  /** State updater for toggling the drawer. */
+  updateState: (fn: (state: SimpleLayoutState) => SimpleLayoutState) => void;
 };
 
 /**
@@ -37,14 +36,14 @@ export const createCompanionActions = (
   get: (atom: Atom.Atom<any>) => any,
   config: CompanionActionsConfig,
 ): Pick<ActionGraphProps, 'nodes' | 'edges'> => {
-  const { idPrefix, selectedVariant, invokeSync } = config;
+  const { idPrefix, selectedVariant, updateState } = config;
 
   // Derive activeId from state atom.
   const state = get(stateAtom);
   const activeId = state.active ?? state.workspace;
 
   // Get companions from graph connections for activeId.
-  const activeConnections = activeId ? get(graph.connections(activeId)) : [];
+  const activeConnections = activeId ? get(graph.connections(activeId, 'child')) : [];
   const companions = activeConnections
     .filter((node: Node.Node) => node.type === PLANK_COMPANION_TYPE)
     .toSorted((a: Node.Node, b: Node.Node) => byPosition(a.properties, b.properties));
@@ -52,12 +51,8 @@ export const createCompanionActions = (
   const nodes: ActionGraphProps['nodes'] = [];
   const edges: ActionGraphProps['edges'] = [];
 
-  // Add companion actions.
-  // TODO(burdon): Cap at 6 items.
   companions.forEach((companion: Node.Node) => {
-    // Extract variant for highlighting if needed.
-    const [, companionVariant] = companion.id.split(ATTENDABLE_PATH_SEPARATOR);
-
+    const companionVariant = getLinkedVariant(companion.id);
     const companionAction = {
       id: `${idPrefix}-companion-${companion.id}`,
       type: Node.ActionType,
@@ -65,20 +60,24 @@ export const createCompanionActions = (
         icon: companion.properties.icon ?? 'ph--placeholder--regular',
         label: companion.properties.label,
         iconOnly: true,
-        // Conditionally add variant highlighting.
         ...(selectedVariant !== undefined && {
           variant: selectedVariant === companionVariant ? 'primary' : 'ghost',
         }),
       },
       data: () =>
         Effect.sync(() =>
-          invokeSync(LayoutOperation.Open, {
-            subject: [companion.id],
+          updateState((current) => {
+            const closing = current.companionVariant === companionVariant && current.drawerState !== 'closed';
+            return {
+              ...current,
+              companionVariant: closing ? undefined : companionVariant,
+              drawerState: closing ? 'closed' : 'open',
+            };
           }),
         ),
     };
     nodes.push(companionAction);
-    edges.push({ source: 'root', target: companionAction.id });
+    edges.push({ source: 'root', target: companionAction.id, relation: 'child' });
   });
 
   return { nodes, edges };

package/src/hooks/useAppBarProps.ts

@@ -14,9 +14,9 @@ import { Graph, Node, useActionRunner, useNode } from '@dxos/plugin-graph';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type ActionGraphProps } from '@dxos/react-ui-menu';
 
-import { type AppBarProps } from '../components';
-import { meta } from '../meta';
-import { SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+import { type AppBarProps } from '#components';
+import { meta } from '#meta';
+import { SimpleLayoutState as SimpleLayoutStateCapability } from '#types';
 
 /**
  * Hook that computes all AppBar props from the app graph.
@@ -27,7 +27,7 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
   const stateAtom = useCapability(SimpleLayoutStateCapability);
   const state = useAtomValue(stateAtom);
   const { graph } = useAppGraph();
-  const { invokeSync } = useOperationInvoker();
+  const { invokePromise } = useOperationInvoker();
   const runAction = useActionRunner();
 
   // Derive activeId from state.
@@ -49,10 +49,14 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
           ['list-item', 'list-item-primary', 'heading-list-item'].includes(action.properties.disposition),
         );
         const nodes: ActionGraphProps['nodes'] = filtered as ActionGraphProps['nodes'];
-        const edges: ActionGraphProps['edges'] = filtered.map((action) => ({ source: 'root', target: action.id }));
+        const edges: ActionGraphProps['edges'] = filtered.map((action) => ({
+          source: 'root',
+          target: action.id,
+          relation: 'child',
+        }));
 
         // Add alternate-tree action (e.g. Settings) from the workspace node.
-        const workspaceConnections = state.workspace ? get(graph.connections(state.workspace)) : [];
+        const workspaceConnections = state.workspace ? get(graph.connections(state.workspace, 'child')) : [];
         const alternateTreeNode = workspaceConnections.find(
           (node: Node.Node) => node.properties.disposition === 'alternate-tree',
         );
@@ -60,14 +64,14 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
           const settingsAction = {
             id: `appbar-settings-${alternateTreeNode.id}`,
             type: Node.ActionType,
-            data: () => Effect.sync(() => invokeSync(LayoutOperation.Open, { subject: [alternateTreeNode.id] })),
+            data: () => Effect.promise(() => invokePromise(LayoutOperation.Open, { subject: [alternateTreeNode.id] })),
             properties: {
               label: alternateTreeNode.properties.label ?? alternateTreeNode.id,
               icon: alternateTreeNode.properties.icon ?? 'ph--placeholder--regular',
             },
           };
           nodes.push(settingsAction);
-          edges.push({ source: 'root', target: settingsAction.id });
+          edges.push({ source: 'root', target: settingsAction.id, relation: 'child' });
         }
 
         return { nodes, edges };
@@ -87,19 +91,18 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
 
       // If history is empty and this is a workspace, go to home.
       if (state.history.length === 0 && isWorkspace) {
-        invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
       } else {
         // Otherwise, close (which will pop from history or clear active).
-        invokeSync(LayoutOperation.Close, { subject: [state.active] });
+        void invokePromise(LayoutOperation.Close, { subject: [state.active] });
       }
     } else {
-      invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+      void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
     }
-  }, [graph, invokeSync, state.active, state.history.length]);
+  }, [graph, invokePromise, state.active, state.history.length]);
 
   // Compute popover anchor ID.
-  const popoverAnchorId =
-    node && state.popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? state.popoverAnchorId : undefined;
+  const popoverAnchorId = node && state.popoverAnchorId === `${meta.id}:${node.id}` ? state.popoverAnchorId : undefined;
 
   return {
     title,

package/src/hooks/useCompanions.ts

@@ -16,7 +16,7 @@ import { PLANK_COMPANION_TYPE } from './actions';
  */
 export const useCompanions = (nodeId?: string) => {
   const { graph } = useAppGraph();
-  const nodes = useConnections(graph, nodeId);
+  const nodes = useConnections(graph, nodeId, 'child');
   const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
   return useMemo(() => companions.toSorted((a, b) => byPosition(a.properties, b.properties)), [companions]);
 };

package/src/hooks/useDrawerActions.ts

@@ -6,15 +6,15 @@ import { Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 import { useMemo } from 'react';
 
-import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { useCapability } from '@dxos/app-framework/ui';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Node, useActionRunner } from '@dxos/plugin-graph';
 import { useTranslation } from '@dxos/react-ui';
 import { type ActionExecutor, type ActionGraphProps, createGapSeparator } from '@dxos/react-ui-menu';
 
-import { useMobileLayout } from '../components';
-import { meta } from '../meta';
-import { SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+import { useMobileLayout } from '#components';
+import { meta } from '#meta';
+import { SimpleLayoutState as SimpleLayoutStateCapability } from '#types';
 
 import { createCompanionActions } from './actions';
 import { useSimpleLayoutState } from './useSimpleLayoutState';
@@ -34,7 +34,6 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
   const stateAtom = useCapability(SimpleLayoutStateCapability);
   const { graph } = useAppGraph();
   const runAction = useActionRunner();
-  const { invokeSync } = useOperationInvoker();
   const { updateState } = useSimpleLayoutState();
   const { keyboardOpen } = useMobileLayout(consumerName);
 
@@ -48,8 +47,8 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
         // Add companion tab actions.
         const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
           idPrefix: 'drawer',
-          selectedVariant: state.companionVariant,
-          invokeSync,
+          selectedVariant: state.drawerState !== 'closed' ? state.companionVariant : undefined,
+          updateState,
         });
 
         // Add gap separator before toolbar buttons.
@@ -65,14 +64,14 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
             type: Node.ActionType,
             properties: {
               icon: isExpanded ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular',
-              label: isExpanded ? t('collapse drawer label') : t('expand drawer label'),
+              label: isExpanded ? t('collapse-drawer.label') : t('expand-drawer.label'),
               iconOnly: true,
             },
             data: () =>
               Effect.sync(() => updateState((state) => ({ ...state, drawerState: isExpanded ? 'open' : 'expanded' }))),
           };
           nodes.push(toggleExpandAction);
-          edges.push({ source: 'root', target: toggleExpandAction.id });
+          edges.push({ source: 'root', target: toggleExpandAction.id, relation: 'child' });
         }
 
         // Add close button.
@@ -81,17 +80,20 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
           type: Node.ActionType,
           properties: {
             icon: 'ph--x--regular',
-            label: t('close drawer label'),
+            label: t('close-drawer.label'),
             iconOnly: true,
           },
-          data: () => Effect.sync(() => updateState((state) => ({ ...state, drawerState: 'closed' }))),
+          data: () =>
+            Effect.sync(() =>
+              updateState((state) => ({ ...state, drawerState: 'closed', companionVariant: undefined })),
+            ),
         };
         nodes.push(closeAction);
-        edges.push({ source: 'root', target: closeAction.id });
+        edges.push({ source: 'root', target: closeAction.id, relation: 'child' });
 
         return { nodes, edges };
       }),
-    [graph, stateAtom, invokeSync, updateState, keyboardOpen, t],
+    [graph, stateAtom, updateState, keyboardOpen, t],
   );
 
   return { actions: actionsAtom, onAction: runAction };

package/src/hooks/useNavbarActions.ts

@@ -5,7 +5,7 @@
 import { Atom } from '@effect-atom/atom-react';
 import { useMemo } from 'react';
 
-import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { useCapability } from '@dxos/app-framework/ui';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Node, useActionRunner } from '@dxos/plugin-graph';
 import { useTranslation } from '@dxos/react-ui';
@@ -16,10 +16,11 @@ import {
   createMenuItemGroup,
 } from '@dxos/react-ui-menu';
 
-import { meta } from '../meta';
-import { SimpleLayoutState } from '../types';
+import { meta } from '#meta';
+import { SimpleLayoutState } from '#types';
 
 import { createCompanionActions } from './actions';
+import { useSimpleLayoutState } from './useSimpleLayoutState';
 
 const MAIN_MENU_GROUP_ID = 'navbar-main-menu';
 
@@ -38,8 +39,8 @@ export const useNavbarActions = (): NavbarActions => {
   const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
   const runAction = useActionRunner();
-  const { invokeSync } = useOperationInvoker();
   const stateAtom = useCapability(SimpleLayoutState);
+  const { updateState } = useSimpleLayoutState();
 
   // Create a computed atom that derives everything from graph connections and state.
   const actionsAtom = useMemo(
@@ -48,7 +49,7 @@ export const useNavbarActions = (): NavbarActions => {
         // Add companion actions.
         const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
           idPrefix: 'navbar',
-          invokeSync,
+          updateState,
         });
 
         // Add gap separator.
@@ -61,25 +62,25 @@ export const useNavbarActions = (): NavbarActions => {
           variant: 'dropdownMenu',
           icon: 'ph--list--regular',
           iconOnly: true,
-          label: t('main menu label'),
+          label: t('main-menu.label'),
           testId: 'simpleLayoutPlugin.addSpace',
         });
         nodes.push(mainMenuGroup);
-        edges.push({ source: 'root', target: mainMenuGroup.id });
+        edges.push({ source: 'root', target: mainMenuGroup.id, relation: 'child' });
 
-        // Get menu actions from root connections.
-        const rootConnections = get(graph.connections(Node.RootId));
-        const menuActions = rootConnections.filter((node) => node.properties.disposition === 'menu');
+        // Get menu actions from root actions (on 'action' edge relation).
+        const rootActions = get(graph.actions(Node.RootId));
+        const menuActions = rootActions.filter((node) => node.properties.disposition === 'menu');
 
         // Add menu actions as children of the dropdown group.
         menuActions.forEach((menuAction) => {
           nodes.push(menuAction as ActionGraphProps['nodes'][number]);
-          edges.push({ source: MAIN_MENU_GROUP_ID, target: menuAction.id });
+          edges.push({ source: MAIN_MENU_GROUP_ID, target: menuAction.id, relation: 'child' });
         });
 
         return { nodes, edges };
       }),
-    [graph, stateAtom, invokeSync, t],
+    [graph, stateAtom, updateState, t],
   );
 
   return { actions: actionsAtom, onAction: runAction };

package/src/hooks/useSimpleLayoutState.ts

@@ -7,7 +7,7 @@ import { useCallback, useContext } from 'react';
 
 import { useCapability } from '@dxos/app-framework/ui';
 
-import { SimpleLayoutState } from '../types';
+import { SimpleLayoutState } from '#types';
 
 export type UseSimpleLayoutState = {
   state: SimpleLayoutState;

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/simple-layout',
+  id: 'org.dxos.plugin.simple-layout',
   name: 'Simple Layout',
   description: trim`
     Minimal layout plugin for simplified UI contexts like popover windows.