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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-simple-layout",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.d05673bc65",
   "description": "Simple layout plugin for minimal UI contexts like popover windows.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,20 +31,20 @@
     "@radix-ui/react-context": "1.1.1",
     "@tauri-apps/plugin-deep-link": "^2.2.0",
     "@tauri-apps/plugin-haptics": "^2.3.2",
-    "@dxos/async": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-framework": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-graph": "0.8.4-main.c85a9c8dae",
-    "@dxos/operation": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-menu": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-searchlist": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-mosaic": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-stack": "0.8.4-main.c85a9c8dae",
-    "@dxos/schema": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-toolkit": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae"
+    "@dxos/app-toolkit": "0.8.4-main.d05673bc65",
+    "@dxos/echo": "0.8.4-main.d05673bc65",
+    "@dxos/async": "0.8.4-main.d05673bc65",
+    "@dxos/app-framework": "0.8.4-main.d05673bc65",
+    "@dxos/log": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-attention": "0.8.4-main.d05673bc65",
+    "@dxos/operation": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-graph": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-menu": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-mosaic": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-searchlist": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-stack": "0.8.4-main.d05673bc65",
+    "@dxos/schema": "0.8.4-main.d05673bc65",
+    "@dxos/util": "0.8.4-main.d05673bc65"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -53,23 +53,23 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "^7.1.11",
-    "@dxos/plugin-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-search": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-graph": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-space": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-testing": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-preview": "0.8.4-main.c85a9c8dae",
-    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
-    "@dxos/schema": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/app-graph": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-preview": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-client": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-search": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-space": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-testing": "0.8.4-main.d05673bc65",
+    "@dxos/schema": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui": "0.8.4-main.d05673bc65",
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65",
+    "@dxos/storybook-utils": "0.8.4-main.d05673bc65"
   },
   "peerDependencies": {
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae"
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui": "0.8.4-main.d05673bc65"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -5,21 +5,14 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { LayoutOperation } from '@dxos/app-toolkit';
+import { getCompanionVariant, LayoutOperation, isPinnedWorkspace } from '@dxos/app-toolkit';
 import { Operation, OperationResolver } from '@dxos/operation';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
 
 import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
 
 /** Maximum number of items to keep in navigation history. */
 const MAX_HISTORY_LENGTH = 50;
 
-/** Parse entry ID to extract primary ID and variant. */
-const parseEntryId = (entryId: string) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return { id, variant };
-};
-
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const registry = yield* Capability.get(Capabilities.AtomRegistry);
@@ -51,6 +44,7 @@ export default Capability.makeModule(
       //
       // UpdateComplementary - Controls companion drawer.
       //
+      // TODO(wittjosiah): Not sure if we should be using this for the drawer.
       OperationResolver.make({
         operation: LayoutOperation.UpdateComplementary,
         handler: Effect.fnUntraced(function* (input) {
@@ -59,6 +53,13 @@ export default Capability.makeModule(
               ...state,
               drawerState: 'closed',
             }));
+          } else if (input.subject) {
+            const variant = getCompanionVariant(input.subject);
+            updateState((state) => ({
+              ...state,
+              companionVariant: variant,
+              drawerState: input.state === 'expanded' ? 'expanded' : 'open',
+            }));
           }
         }),
       }),
@@ -116,7 +117,7 @@ export default Capability.makeModule(
             ...state,
             // TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
             //  Ideally this should be worked into the data model in a generic way.
-            previousWorkspace: !state.workspace.startsWith('!') ? state.workspace : state.previousWorkspace,
+            previousWorkspace: !isPinnedWorkspace(state.workspace) ? state.workspace : state.previousWorkspace,
             workspace: input.subject,
             active: undefined,
             // Clear history when switching workspaces.
@@ -145,32 +146,16 @@ export default Capability.makeModule(
         operation: LayoutOperation.Open,
         handler: Effect.fnUntraced(function* (input) {
           const id = input.subject[0];
-          const { id: primaryId, variant } = parseEntryId(id);
-          const state = getState();
-
-          // Only treat as companion when opening a variant of the current workspace/active (e.g. object~comments).
-          // IDs like settings~spaceId are alternate-tree nodes and should navigate main content, not open the drawer.
-          // TODO(wittjosiah): Factor out the change-companion operation from deck to a common layout operation.
-          const isCompanionOfCurrent = variant && (primaryId === state.workspace || primaryId === state.active);
-          if (isCompanionOfCurrent) {
-            updateState((state) => ({
+          updateState((state) => {
+            const newHistory = state.active ? [...state.history, state.active] : state.history;
+            const trimmedHistory =
+              newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
+            return {
               ...state,
-              companionVariant: variant,
-              drawerState: state.drawerState === 'closed' || !state.drawerState ? 'open' : state.drawerState,
-            }));
-          } else {
-            // Regular navigation - update active and history (use full id for alternate-tree nodes).
-            updateState((state) => {
-              const newHistory = state.active ? [...state.history, state.active] : state.history;
-              const trimmedHistory =
-                newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
-              return {
-                ...state,
-                active: id,
-                history: trimmedHistory,
-              };
-            });
-          }
+              active: id,
+              history: trimmedHistory,
+            };
+          });
         }),
       }),
 

package/src/capabilities/react-surface/react-surface.tsx

@@ -9,7 +9,7 @@ import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
 import { Node } from '@dxos/plugin-graph';
 
-import { Home, Workspace } from '../../components';
+import { Home, NavBranch } from '../../components';
 import { meta } from '../../meta';
 
 type SurfaceData = {
@@ -23,18 +23,20 @@ export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
-        id: `${meta.id}/home`,
+        id: `${meta.id}.home`,
         role: 'article',
         filter: (data): data is SurfaceData => data.attendableId === Node.RootId,
         component: () => <Home />,
       }),
       Surface.create({
-        id: `${meta.id}/workspace-article`,
+        id: `${meta.id}.nav-branch`,
         role: 'article',
         position: 'fallback',
-        filter: (data): data is SurfaceData =>
-          ALLOWED_DISPOSITIONS.includes((data.properties as Record<string, any>)?.disposition),
-        component: ({ data }) => <Workspace id={data.attendableId} />,
+        filter: (data): data is SurfaceData => {
+          const props = data.properties as Record<string, any>;
+          return ALLOWED_DISPOSITIONS.includes(props?.disposition) || props?.role === 'branch';
+        },
+        component: ({ data }) => <NavBranch id={data.attendableId} />,
       }),
     ]),
   ),

package/src/capabilities/url-handler/url-handler.ts

@@ -5,17 +5,16 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { LayoutOperation } from '@dxos/app-toolkit';
+import { LayoutOperation, fromUrlPath, getWorkspaceFromPath, toUrlPath } from '@dxos/app-toolkit';
 import { log } from '@dxos/log';
-import { Node } from '@dxos/plugin-graph';
 import { isTauri } from '@dxos/util';
 
 import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
 
 /**
  * URL handler for simple layout that syncs browser URL with layout state.
- * URL format: /{workspace} or /{workspace}/{active}
- * Root is represented as / or /root.
+ * URL paths map directly to qualified graph IDs with the leading `root` segment stripped.
+ * Root is represented as `/`.
  *
  * On mobile Tauri, also listens for deep links via the deep-link plugin.
  */
@@ -25,38 +24,33 @@ export default Capability.makeModule(
 
     /**
      * Handle navigation from a pathname.
-     * Parses path and updates state accordingly.
+     * Restores the qualified graph ID and dispatches layout operations.
      */
     const handlePathNavigation = (pathname: string) => {
       log.info('[UrlHandler] Navigating to path', { pathname });
 
-      // Parse URL segments: /{workspace}/{active}
-      const [_, nextWorkspace, nextActive] = pathname.split('/');
+      const qualifiedId = fromUrlPath(pathname);
+      const workspace = getWorkspaceFromPath(qualifiedId);
 
-      // Determine target workspace (empty or 'root' means Node.RootId).
-      const targetWorkspace = !nextWorkspace || nextWorkspace === 'root' ? Node.RootId : nextWorkspace;
+      invokeSync(LayoutOperation.SwitchWorkspace, { subject: workspace });
 
-      // Navigate via operations (they will update state accordingly).
-      invokeSync(LayoutOperation.SwitchWorkspace, { subject: targetWorkspace });
-      if (nextActive) {
-        invokeSync(LayoutOperation.Open, { subject: [nextActive] });
+      const activeId = qualifiedId !== workspace ? qualifiedId : undefined;
+      if (activeId) {
+        invokeSync(LayoutOperation.Open, { subject: [activeId] });
       }
     };
 
     const onNavigation = handleNavigation(handlePathNavigation);
 
-    // Handle initial URL and listen for browser navigation.
     yield* Effect.sync(() => onNavigation());
     window.addEventListener('popstate', onNavigation);
 
-    // Set up deep link listener for mobile Tauri.
     let unlistenDeepLink: (() => void) | undefined;
     if (isTauri()) {
       yield* Effect.tryPromise({
         try: async () => {
           const { getCurrent, onOpenUrl } = await import('@tauri-apps/plugin-deep-link');
 
-          // Check if app was launched via deep link (cold start).
           const launchUrls = await getCurrent();
           if (launchUrls && launchUrls.length > 0) {
             log.info('[UrlHandler] App launched with deep links', { urls: launchUrls });
@@ -65,7 +59,6 @@ export default Capability.makeModule(
             }
           }
 
-          // Listen for deep links while app is running.
           unlistenDeepLink = await onOpenUrl((urls) => {
             log.info('[UrlHandler] Deep links received', { urls });
             for (const url of urls) {
@@ -82,18 +75,16 @@ export default Capability.makeModule(
       }).pipe(Effect.catchAll(() => Effect.void));
     }
 
-    // Subscribe to state changes to update the URL.
     let lastWorkspace: string | undefined;
     let lastActive: string | undefined;
     const unsubscribe = yield* Capabilities.subscribeAtom(SimpleLayoutStateCapability, (state: SimpleLayoutState) => {
       const { workspace, active } = state;
 
-      // Only update URL if relevant state changed.
       if (workspace !== lastWorkspace || active !== lastActive) {
         lastWorkspace = workspace;
         lastActive = active;
 
-        const path = pathFromState(workspace, active);
+        const path = active ? toUrlPath(active) : toUrlPath(workspace);
         if (window.location.pathname !== path) {
           history.pushState(null, '', `${path}${window.location.search}`);
         }
@@ -110,27 +101,12 @@ export default Capability.makeModule(
   }),
 );
 
-// TODO(wittjosiah): Instead of hardcoding redirect paths, we should either:
-//   1. Validate that the workspace exists in the graph before navigating.
-//   2. Implement more structured routing with explicit route definitions.
 /**
  * Check if a path is a special redirect path that shouldn't be navigated to.
  * These paths are handled by other systems (e.g., OAuth).
  */
 const isRedirectPath = (pathname: string): boolean => pathname.startsWith('/redirect/');
 
-/**
- * Build pathname from layout state. Root workspace is / or /root/{active}.
- */
-const pathFromState = (workspace: string, active: string | undefined): string =>
-  workspace === Node.RootId
-    ? active
-      ? `/${Node.RootId}/${active}`
-      : '/'
-    : active
-      ? `/${workspace}/${active}`
-      : `/${workspace}`;
-
 /**
  * Returns a handler for navigation events (initial load and popstate) that navigates to current pathname.
  */

package/src/components/ContentLoading/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './ContentLoading';

package/src/components/Home/Home.tsx

@@ -16,7 +16,7 @@ import { mx } from '@dxos/ui-theme';
 import { byPosition } from '@dxos/util';
 
 import { meta } from '../../meta';
-import { useLoadDescendents } from '../hooks';
+import { useExpandPath } from '../hooks';
 
 export type HomeProps = {};
 
@@ -28,7 +28,7 @@ export const Home = (_: HomeProps) => {
   const userAccountItem = useItemsByDisposition('user-account')[0];
   const pinnedItems = useItemsByDisposition('pin-end', true);
   const workspaceItems = useItemsByDisposition('workspace');
-  useLoadDescendents(Node.RootId);
+  useExpandPath(Node.RootId);
 
   const items = useMemo(
     () => [...(userAccountItem ? [userAccountItem] : []), ...pinnedItems, ...workspaceItems],
@@ -73,7 +73,7 @@ const WorkspaceTile: MosaicStackTileComponent<Node.Node> = (props) => {
   const isSelected = selectedValue === data.id;
   const cardRef = useRef<HTMLDivElement>(null);
 
-  useLoadDescendents(data.id);
+  useExpandPath(data.id);
 
   const handleSelect = useCallback(
     () => invokePromise(LayoutOperation.SwitchWorkspace, { subject: data.id }),

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

@@ -2,7 +2,7 @@
 // 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';
@@ -15,29 +15,33 @@ import { SearchList, useSearchListItem, useSearchListResults } from '@dxos/react
 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, '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),
   });
 
@@ -46,6 +50,7 @@ export const Workspace = ({ id }: WorkspaceProps) => {
       <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>
@@ -54,7 +59,7 @@ export const Workspace = ({ id }: WorkspaceProps) => {
             <Mosaic.Container asChild>
               <ScrollArea.Root orientation='vertical'>
                 <ScrollArea.Viewport classNames='p-2'>
-                  <Mosaic.Stack items={results} getId={(child) => child.id} Tile={WorkspaceChildTile} />
+                  <Mosaic.Stack items={results} getId={(child) => child.id} Tile={NavBranchTile} />
                 </ScrollArea.Viewport>
               </ScrollArea.Root>
             </Mosaic.Container>
@@ -65,7 +70,7 @@ export const Workspace = ({ id }: WorkspaceProps) => {
   );
 };
 
-const WorkspaceChildTile: MosaicStackTileComponent<Node.Node> = (props) => {
+const NavBranchTile: MosaicStackTileComponent<Node.Node> = (props) => {
   const data = props.data;
   const { t } = useTranslation(meta.id);
   const { invokeSync } = useOperationInvoker();

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

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

package/src/components/SimpleLayout/Drawer.tsx

@@ -5,10 +5,10 @@
 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 { ErrorFallback, Panel } from '@dxos/react-ui';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
 import { Menu, useMenuActions } from '@dxos/react-ui-menu';
 
 import { useCompanions, useDrawerActions, useSimpleLayoutState } from '../../hooks';
@@ -67,12 +67,6 @@ export const Drawer = () => {
 
 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.
@@ -85,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;
       }
@@ -99,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

@@ -13,8 +13,8 @@ import { mx } from '@dxos/ui-theme';
 
 import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '../../hooks';
 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';

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, 'child');
-      // Second level: expand each child.
-      Graph.getConnections(graph, nodeId, 'child').forEach((child) => {
-        Graph.expand(graph, child.id, 'child');
-      });
+      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,7 +35,7 @@ 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);
@@ -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,15 +59,19 @@ 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',
+            };
           }),
         ),
     };

package/src/hooks/useAppBarProps.ts

@@ -102,8 +102,7 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
   }, [graph, invokeSync, 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,