@dxos/plugin-simple-layout 0.8.4-main.52d7546f51 → 0.8.4-main.6fa680abb7

package/src/components/{Workspace/Workspace.tsx → NavBranch/NavBranch.tsx}

@@ -2,65 +2,76 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { type Node, useConnections } from '@dxos/plugin-graph';
-import { Avatar, Icon, Layout, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card, Mosaic, type StackTileComponent } from '@dxos/react-ui-mosaic';
+import { Avatar, Icon, Panel, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
 import { SearchList, useSearchListItem, useSearchListResults } from '@dxos/react-ui-searchlist';
 import { mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
-import { useLoadDescendents } from '../hooks';
+import { useExpandPath } from '../hooks';
 
-export type WorkspaceProps = {
+export type NavBranchProps = {
   id: string;
 };
 
 /**
- * Displays the contents of a workspace disposition graph node as a searchable list.
- * Shows direct children of the workspace with icons and labels,
- * allowing users to filter via search and navigate by selecting an item.
+ * Renders the children of a graph branch node as a searchable mosaic list.
+ * Used for any node with `role: 'branch'` or a workspace disposition, including
+ * spaces, collection sections, type sections, and schema nodes.
  */
-export const Workspace = ({ id }: WorkspaceProps) => {
+export const NavBranch = ({ id }: NavBranchProps) => {
   const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
 
-  // Expand the workspace node to load its children.
-  useLoadDescendents(id);
+  useExpandPath(id);
 
-  // Get direct children of the workspace node.
-  const children = useConnections(graph, id, 'outbound');
+  const children = useConnections(graph, id, 'child');
+
+  // TODO(wittjosiah): Move alternate-tree nodes to a non-child relation so they don't need filtering.
+  const visibleChildren = useMemo(
+    () => children.filter((node) => node.properties.disposition !== 'alternate-tree'),
+    [children],
+  );
 
   const { results, handleSearch } = useSearchListResults({
-    items: children,
+    items: visibleChildren,
     extract: (child) => toLocalizedString(child.properties.label, t),
   });
 
   return (
-    <Layout.Main toolbar>
-      <SearchList.Root onSearch={handleSearch}>
-        <Toolbar.Root>
-          <SearchList.Input placeholder={t('search placeholder')} autoFocus />
-        </Toolbar.Root>
-        <SearchList.Content>
-          <Mosaic.Container asChild>
-            <ScrollArea.Root orientation='vertical'>
-              <ScrollArea.Viewport classNames='p-2'>
-                <Mosaic.Stack items={results} getId={(child) => child.id} Tile={WorkspaceChildTile} />
-              </ScrollArea.Viewport>
-            </ScrollArea.Root>
-          </Mosaic.Container>
-        </SearchList.Content>
-      </SearchList.Root>
-    </Layout.Main>
+    <SearchList.Root onSearch={handleSearch}>
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            {/* TODO(wittjosiah): Search should be pluggable. Must support searching via ECHO query inside a space. */}
+            <SearchList.Input placeholder={t('search placeholder')} autoFocus />
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <SearchList.Content>
+            <Mosaic.Container asChild>
+              <ScrollArea.Root orientation='vertical'>
+                <ScrollArea.Viewport classNames='p-2'>
+                  <Mosaic.Stack items={results} getId={(child) => child.id} Tile={NavBranchTile} />
+                </ScrollArea.Viewport>
+              </ScrollArea.Root>
+            </Mosaic.Container>
+          </SearchList.Content>
+        </Panel.Content>
+      </Panel.Root>
+    </SearchList.Root>
   );
 };
 
-const WorkspaceChildTile: StackTileComponent<Node.Node> = ({ data }) => {
+const NavBranchTile: MosaicStackTileComponent<Node.Node> = (props) => {
+  const data = props.data;
   const { t } = useTranslation(meta.id);
   const { invokeSync } = useOperationInvoker();
   const ref = useRef<HTMLDivElement>(null);
@@ -97,7 +108,7 @@ const WorkspaceChildTile: StackTileComponent<Node.Node> = ({ data }) => {
       fullWidth
       tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
       data-selected={isSelected}
-      classNames={mx('dx-focus-ring', isSelected && 'bg-hoverOverlay')}
+      classNames={mx('dx-focus-ring', isSelected && 'bg-hover-overlay')}
       onClick={handleSelect}
     >
       <Card.Toolbar density='coarse'>

package/src/components/{Workspace → NavBranch}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './Workspace';
+export * from './NavBranch';

package/src/components/Popover/Popover.tsx

@@ -6,8 +6,9 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
+import { useObjectNavigate } from '@dxos/app-toolkit/ui';
 import { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Card } from '@dxos/react-ui';
 
 import { useSimpleLayoutState } from '../../hooks';
 import { meta } from '../../meta';
@@ -53,10 +54,15 @@ export const PopoverRoot = ({ children }: PropsWithChildren) => {
   );
 };
 
+// Extracts the subject from popover content if it has one, otherwise returns the content as-is.
+const getPopoverSubject = (content: unknown): unknown =>
+  content && typeof content === 'object' && 'subject' in content ? (content as { subject: unknown }).subject : content;
+
 export const PopoverContent = () => {
   const { t } = useTranslation(meta.id);
   const { state, updateState } = useSimpleLayoutState();
   const { setOpen } = useLayoutPopoverContext('PopoverContent');
+  const handleNavigate = useObjectNavigate(getPopoverSubject(state.popoverContent));
 
   const handleClose = useCallback(() => {
     setOpen(false);
@@ -102,12 +108,16 @@ export const PopoverContent = () => {
         <Popover.Viewport>
           {state.popoverKind === 'base' && <Surface.Surface role='popover' data={state.popoverContent} limit={1} />}
           {state.popoverKind === 'card' && (
-            <Card.Root border={false} classNames='popover-card-max-width'>
+            <Card.Root border={false} classNames='dx-card-popover'>
               <Card.Toolbar>
                 {/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
                 <span />
-                {state.popoverTitle ? <Card.Title>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
-                <Card.Close onClick={handleClose} />
+                {state.popoverTitle ? (
+                  <Card.Title onClick={handleNavigate}>{toLocalizedString(state.popoverTitle, t)}</Card.Title>
+                ) : (
+                  <span />
+                )}
+                <Card.CloseIconButton onClick={handleClose} />
               </Card.Toolbar>
               <Surface.Surface role='card--content' data={state.popoverContent} limit={1} />
             </Card.Root>

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

@@ -35,7 +35,7 @@ const buildDefaultActions = (): ActionGraphProps => {
     }),
   ];
   result.nodes.push(...actions);
-  result.edges.push(...actions.map((a) => ({ source: 'root', target: a.id })));
+  result.edges.push(...actions.map((a) => ({ source: 'root', target: a.id, relation: 'child' })));
   return result;
 };
 
@@ -53,7 +53,7 @@ const DefaultStory = ({ actions: actionsProp, ...props }: StoryProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/AppBar',
+  title: 'plugins/plugin-simple-layout/components/AppBar',
   render: DefaultStory,
   decorators: [
     withTheme(),

package/src/components/SimpleLayout/AppBar.tsx

@@ -6,13 +6,7 @@ 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 {
-  type ActionExecutor,
-  type ActionGraphProps,
-  DropdownMenu,
-  MenuProvider,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
+import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
 import { mx, osTranslations } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
@@ -63,8 +57,8 @@ export const AppBar = ({
     <Toolbar.Root
       role='banner'
       classNames={mx(
-        'grid grid-cols-[var(--rail-size)_1fr_var(--rail-size)] bs-[var(--rail-action)] items-center',
-        'density-fine',
+        'grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center',
+        'dx-density-fine',
         classNames,
       )}
     >
@@ -78,18 +72,17 @@ export const AppBar = ({
       <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
       {hasActions ? (
         <AnchorRoot>
-          <MenuProvider {...menu} onAction={onAction}>
-            <DropdownMenu.Root caller={meta.id}>
-              <DropdownMenu.Trigger asChild>
-                <IconButton
-                  variant='ghost'
-                  icon='ph--dots-three-vertical--regular'
-                  iconOnly
-                  label={t('actions menu label')}
-                />
-              </DropdownMenu.Trigger>
-            </DropdownMenu.Root>
-          </MenuProvider>
+          <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 />

package/src/components/SimpleLayout/Drawer.tsx

@@ -5,14 +5,13 @@
 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 { type Node, useNode } from '@dxos/plugin-graph';
-import { Layout } from '@dxos/react-ui';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
-import { MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+import { ErrorFallback, Panel } from '@dxos/react-ui';
+import { Menu, useMenuActions } from '@dxos/react-ui-menu';
 
 import { useCompanions, useDrawerActions, useSimpleLayoutState } from '../../hooks';
-import { ContentError } from '../ContentError';
 import { ContentLoading } from '../ContentLoading';
 
 const DRAWER_NAME = 'SimpleLayout.Drawer';
@@ -53,23 +52,21 @@ export const Drawer = () => {
   const menu = useMenuActions(actions);
 
   return (
-    <Layout.Main toolbar>
-      <MenuProvider {...menu} onAction={onAction} alwaysActive>
-        <ToolbarMenu density='coarse' />
-      </MenuProvider>
-      <Surface.Surface role='article' data={data} limit={1} fallback={ContentError} placeholder={placeholder} />
-    </Layout.Main>
+    <Panel.Root>
+      <Panel.Toolbar>
+        <Menu.Root {...menu} alwaysActive onAction={onAction}>
+          <Menu.Toolbar density='coarse' />
+        </Menu.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <Surface.Surface role='article' data={data} limit={1} fallback={ErrorFallback} placeholder={placeholder} />
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
 Drawer.displayName = DRAWER_NAME;
 
-/** Parse entry ID to extract primary ID and variant. */
-const parseEntryId = (entryId: string) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return { id, variant };
-};
-
 /**
  * Resolves which companion to show based on variant preference.
  * Falls back to first available if preferred variant not available.
@@ -82,10 +79,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
 
     // Try to find companion matching the preferred variant.
     if (preferredVariant) {
-      const preferred = companions.find((c) => {
-        const { variant } = parseEntryId(c.id);
-        return variant === preferredVariant;
-      });
+      const preferred = companions.find((c) => getCompanionVariant(c.id) === preferredVariant);
       if (preferred) {
         return preferred;
       }
@@ -96,7 +90,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
   }, [companions, preferredVariant]);
 
   const companionId = selectedCompanion?.id;
-  const { variant } = parseEntryId(companionId ?? '');
+  const variant = companionId ? getCompanionVariant(companionId) : undefined;
 
   return { selectedCompanion, companionId, variant };
 };

package/src/components/SimpleLayout/Main.tsx

@@ -7,14 +7,14 @@ import React, { useMemo } from 'react';
 import { Surface } from '@dxos/app-framework/ui';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
+import { ErrorFallback } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/ui-theme';
 
 import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '../../hooks';
-import { ContentError } from '../ContentError';
 import { ContentLoading } from '../ContentLoading';
-import { useLoadDescendents } from '../hooks';
-import { useMobileLayout } from '../MobileLayout/MobileLayout';
+import { useExpandPath } from '../hooks';
+import { useMobileLayout } from '../MobileLayout';
 
 import { AppBar } from './AppBar';
 import { NavBar } from './NavBar';
@@ -47,8 +47,7 @@ export const Main = () => {
     );
   }, [id, node, node?.data, node?.properties, state.popoverAnchorId]);
 
-  // Ensures that children are loaded so that they are available to navigate to.
-  useLoadDescendents(id);
+  useExpandPath(id);
 
   // TODO(burdon): BUG: When showing ANY statusbar the size progressively shrinks when the keyboard opens/closes.
   const showNavBar = !keyboardOpen && !state.isPopover && state.drawerState === 'closed';
@@ -57,23 +56,25 @@ export const Main = () => {
     <div
       role='none'
       className={mx(
-        'bs-full grid overflow-hidden bg-toolbarSurface',
-        showNavBar ? 'grid-rows-[var(--rail-action)_1fr_var(--toolbar-size)]' : 'grid-rows-[var(--rail-action)_1fr]',
+        '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='bs-full overflow-hidden bg-baseSurface'>
+      <article className='h-full overflow-hidden bg-base-surface'>
         <Surface.Surface
           key={id}
           role='article'
           data={data}
           limit={1}
-          fallback={ContentError}
+          fallback={ErrorFallback}
           placeholder={placeholder}
         />
       </article>
-      {showNavBar && <NavBar classNames='border-bs border-subduedSeparator' actions={actions} onAction={onAction} />}
+      {showNavBar && <NavBar classNames='border-y border-subdued-separator' actions={actions} onAction={onAction} />}
     </div>
   );
 };

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

@@ -7,7 +7,7 @@ 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 { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ActionGraphProps, createGapSeparator, createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
 import { withRegistry } from '@dxos/storybook-utils';
 
@@ -39,7 +39,7 @@ const buildCompanionOnlyActions = (): ActionGraphProps => {
     }),
   ];
   result.nodes.push(...companions);
-  result.edges.push(...companions.map((c) => ({ source: 'root', target: c.id })));
+  result.edges.push(...companions.map((c) => ({ source: 'root', target: c.id, relation: 'child' })));
   return result;
 };
 
@@ -81,18 +81,18 @@ const buildDefaultActions = (): ActionGraphProps => {
   ];
   result.nodes.push(...companions, ...gapSeparator.nodes, mainMenuGroup, ...menuActions);
   result.edges.push(
-    ...companions.map((c) => ({ source: 'root', target: c.id })),
+    ...companions.map((c) => ({ source: 'root', target: c.id, relation: 'child' })),
     ...gapSeparator.edges,
-    { source: 'root', target: mainMenuGroup.id },
-    ...menuActions.map((action) => ({ source: MAIN_MENU_GROUP_ID, target: action.id })),
+    { source: 'root', target: mainMenuGroup.id, relation: 'child' },
+    ...menuActions.map((action) => ({ source: MAIN_MENU_GROUP_ID, target: action.id, relation: 'child' })),
   );
   return result;
 };
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/NavBar',
+  title: 'plugins/plugin-simple-layout/components/NavBar',
   component: NavBar,
-  decorators: [withTheme(), withRegistry],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withRegistry],
   parameters: {
     layout: 'fullscreen',
     translations,
@@ -106,7 +106,7 @@ type Story = StoryObj<typeof meta>;
 const DefaultStory = ({ onAction }: { onAction: (action: { id: string }) => void }) => {
   const actions = useMemo(() => Atom.make(buildDefaultActions()).pipe(Atom.keepAlive), []);
 
-  return <NavBar classNames='border-bs border-separator' actions={actions} onAction={onAction} />;
+  return <NavBar classNames='border-y border-separator' actions={actions} onAction={onAction} />;
 };
 
 export const Default: Story = {

package/src/components/SimpleLayout/NavBar.tsx

@@ -6,13 +6,7 @@ import { type Atom } from '@effect-atom/atom-react';
 import React from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import {
-  type ActionExecutor,
-  type ActionGraphProps,
-  MenuProvider,
-  ToolbarMenu,
-  useMenuActions,
-} from '@dxos/react-ui-menu';
+import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
 import { mx } from '@dxos/ui-theme';
 
 const NAVBAR_NAME = 'SimpleLayout.NavBar';
@@ -31,9 +25,9 @@ export const NavBar = ({ classNames, actions, onAction }: NavBarProps) => {
   const menu = useMenuActions(actions);
 
   return (
-    <MenuProvider {...menu} onAction={onAction} alwaysActive>
-      <ToolbarMenu density='coarse' classNames={mx(classNames)} />
-    </MenuProvider>
+    <Menu.Root {...menu} alwaysActive onAction={onAction}>
+      <Menu.Toolbar density='coarse' classNames={mx(classNames)} />
+    </Menu.Root>
   );
 };
 

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

@@ -8,6 +8,7 @@ import * as Effect from 'effect/Effect';
 import { ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+import { Collection } from '@dxos/echo';
 import { ClientOperation, ClientPlugin } from '@dxos/plugin-client';
 import { SearchPlugin } from '@dxos/plugin-search';
 import { SpacePlugin } from '@dxos/plugin-space';
@@ -15,7 +16,6 @@ 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 { OperationResolver, type SimpleLayoutStateOptions, State } from '../../capabilities';
 import { meta as pluginMeta } from '../../meta';
@@ -80,7 +80,7 @@ const createPluginManager = ({ isPopover }: { isPopover: boolean }) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-simple-layout/SimpleLayout',
+  title: 'plugins/plugin-simple-layout/components/SimpleLayout',
   component: SimpleLayout,
   parameters: {
     layout: 'fullscreen',

package/src/components/SimpleLayout/SimpleLayout.tsx

@@ -36,7 +36,7 @@ export const SimpleLayout = () => {
   return (
     <Mosaic.Root classNames='contents'>
       <MobileLayout.Root
-        classNames='bg-toolbarSurface'
+        classNames='bg-toolbar-surface'
         onKeyboardOpenChange={(keyboardOpen: boolean) => setKeyboardOpen(keyboardOpen)}
       >
         <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>

package/src/components/hooks.ts

@@ -4,23 +4,23 @@
 
 import { useEffect } from 'react';
 
+import { expandAttendableId } from '@dxos/react-ui-attention';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Graph } from '@dxos/plugin-graph';
 
 /**
- * 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

@@ -7,4 +7,4 @@ export * from './Home';
 export * from './MobileLayout';
 export * from './Popover';
 export * from './SimpleLayout';
-export * from './Workspace';
+export * from './NavBranch';

package/src/hooks/actions.ts

@@ -5,25 +5,23 @@
 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, getCompanionVariant } from '@dxos/app-toolkit';
 import { Node } from '@dxos/plugin-graph';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
 import { type ActionGraphProps } from '@dxos/react-ui-menu';
 import { byPosition } from '@dxos/util';
 
 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 +35,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 +50,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 = getCompanionVariant(companion.id);
     const companionAction = {
       id: `${idPrefix}-companion-${companion.id}`,
       type: Node.ActionType,
@@ -65,20 +59,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 };