@dxos/plugin-navtree 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/dist/lib/browser/{react-surface-M3CAS7ZP.mjs → react-surface-HGA3TAQU.mjs}

@@ -3,8 +3,8 @@ import {
   CommandsTrigger,
   NavTreeContainer,
   NavTreeDocumentTitle
-} from "./chunk-UM2C5XK3.mjs";
-import "./chunk-TLQLMZXU.mjs";
+} from "./chunk-MFAWMFJC.mjs";
+import "./chunk-33VLL4IJ.mjs";
 import {
   COMMANDS_DIALOG,
   NAVTREE_PLUGIN
@@ -48,4 +48,4 @@ var react_surface_default = () => contributes(Capabilities.ReactSurface, [
 export {
   react_surface_default as default
 };
-//# sourceMappingURL=react-surface-M3CAS7ZP.mjs.map
+//# sourceMappingURL=react-surface-HGA3TAQU.mjs.map

package/dist/lib/browser/{state-3UBYOTQT.mjs → state-R2UMYAHN.mjs}

@@ -1,6 +1,6 @@
 import {
   NavTreeCapabilities
-} from "./chunk-TLQLMZXU.mjs";
+} from "./chunk-33VLL4IJ.mjs";
 import {
   NAVTREE_PLUGIN
 } from "./chunk-IEW3JD5C.mjs";
@@ -111,4 +111,4 @@ var state_default = (context) => {
 export {
   state_default as default
 };
-//# sourceMappingURL=state-3UBYOTQT.mjs.map
+//# sourceMappingURL=state-R2UMYAHN.mjs.map

package/dist/types/src/components/NavTreeContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavTreeContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/NavTreeContainer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAsBrE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAOnD,eAAO,MAAM,SAAS,wBAAwB,CAAC;AAgC/C,MAAM,MAAM,qBAAqB,GAAG;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;AAErC,eAAO,MAAM,gBAAgB,+DAA2C,qBAAqB,uBA6P3F,CAAC"}
+{"version":3,"file":"NavTreeContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/NavTreeContainer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAsBrE,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAOnD,eAAO,MAAM,SAAS,wBAAwB,CAAC;AAgC/C,MAAM,MAAM,qBAAqB,GAAG;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,GAAG,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;AAErC,eAAO,MAAM,gBAAgB,+DAA2C,qBAAqB,uBA2P3F,CAAC"}

package/dist/types/src/components/NavTreeItem/NavTreeItemAction.d.ts

@@ -1,4 +1,4 @@
-import React, { type MutableRefObject } from 'react';
+import React from 'react';
 import { type Action, type Node } from '@dxos/app-graph';
 import { type ActionProperties } from '../../types';
 export type NavTreeItemActionMenuProps = ActionProperties & {
@@ -6,7 +6,6 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
     caller?: string;
     monolithic?: boolean;
     menuActions?: Action[];
-    suppressNextTooltip?: MutableRefObject<boolean>;
 };
 export declare const NavTreeItemActionDropdownMenu: ({ parent, label, icon, testId, menuActions, caller, }: NavTreeItemActionMenuProps) => React.JSX.Element;
 export declare const NavTreeItemMonolithicAction: ({ parent, properties: { disabled, caller, testId, icon, variant, iconOnly }, data: invoke, baseLabel, }: Action & {

package/dist/types/src/components/NavTreeItem/NavTreeItemAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavTreeItemAction.d.ts","sourceRoot":"","sources":["../../../../../src/components/NavTreeItem/NavTreeItemAction.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,gBAAgB,EAAU,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAMzD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,MAAM,0BAA0B,GAAG,gBAAgB,GAAG;IAC1D,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC;AAaF,eAAO,MAAM,6BAA6B,GAAI,uDAO3C,0BAA0B,sBA2B5B,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,yGAKzC,MAAM,GAAG;IAAE,MAAM,EAAE,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,sBA0BnF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,qDAAqD,0BAA0B,sBAWhH,CAAC"}
+{"version":3,"file":"NavTreeItemAction.d.ts","sourceRoot":"","sources":["../../../../../src/components/NavTreeItem/NavTreeItemAction.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAMzD,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpD,MAAM,MAAM,0BAA0B,GAAG,gBAAgB,GAAG;IAC1D,MAAM,EAAE,IAAI,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAaF,eAAO,MAAM,6BAA6B,GAAI,uDAO3C,0BAA0B,sBAoB5B,CAAC;AAEF,eAAO,MAAM,2BAA2B,GAAI,yGAKzC,MAAM,GAAG;IAAE,MAAM,EAAE,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,sBA0BnF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,qDAAqD,0BAA0B,sBAWhH,CAAC"}

package/dist/types/src/components/Sidebar/L0Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"L0Menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sidebar/L0Menu.tsx"],"names":[],"mappings":"AAaA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAY5C,OAAO,EAA8B,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AA4QhF,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,QAAQ,EAAE,CAAC;IACxB,aAAa,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;IAC3B,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;IACzB,eAAe,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,4EAA4E,WAAW,sBAyF7G,CAAC"}
+{"version":3,"file":"L0Menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sidebar/L0Menu.tsx"],"names":[],"mappings":"AAaA,OAAO,KASN,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAY5C,OAAO,EAA8B,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AA4QhF,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,QAAQ,EAAE,CAAC;IACxB,aAAa,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;IAC3B,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;IACzB,eAAe,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3B,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACnB,IAAI,EAAE,MAAM,EAAE,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,4EAA4E,WAAW,sBAuF7G,CAAC"}

package/dist/types/src/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAI5C,eAAO,MAAM,kBAAkB,GAAI,OAAO,IAAI,SAW7C,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/hooks.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAI5C,eAAO,MAAM,kBAAkB,GAAI,OAAO,IAAI,SAU7C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.2-main.fbd8ed0",
+  "version": "0.8.2-staging.4d6ad0f",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,34 +25,35 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@preact/signals-core": "^1.6.0",
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-core": "^1.9.0",
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
     "effect": "^3.13.3",
-    "@dxos/app-framework": "0.8.2-main.fbd8ed0",
-    "@dxos/app-graph": "0.8.2-main.fbd8ed0",
-    "@dxos/async": "0.8.2-main.fbd8ed0",
-    "@dxos/debug": "0.8.2-main.fbd8ed0",
-    "@dxos/echo": "0.8.2-main.fbd8ed0",
-    "@dxos/invariant": "0.8.2-main.fbd8ed0",
-    "@dxos/keyboard": "0.8.2-main.fbd8ed0",
-    "@dxos/live-object": "0.8.2-main.fbd8ed0",
-    "@dxos/echo-schema": "0.8.2-main.fbd8ed0",
-    "@dxos/local-storage": "0.8.2-main.fbd8ed0",
-    "@dxos/log": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-deck": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-graph": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-observability": "0.8.2-main.fbd8ed0",
-    "@dxos/protocols": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-attention": "0.8.2-main.fbd8ed0",
-    "@dxos/react-client": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-menu": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-list": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-stack": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-searchlist": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-tabs": "0.8.2-main.fbd8ed0",
-    "@dxos/util": "0.8.2-main.fbd8ed0"
+    "@dxos/app-framework": "0.8.2-staging.4d6ad0f",
+    "@dxos/app-graph": "0.8.2-staging.4d6ad0f",
+    "@dxos/async": "0.8.2-staging.4d6ad0f",
+    "@dxos/echo-schema": "0.8.2-staging.4d6ad0f",
+    "@dxos/keyboard": "0.8.2-staging.4d6ad0f",
+    "@dxos/echo": "0.8.2-staging.4d6ad0f",
+    "@dxos/debug": "0.8.2-staging.4d6ad0f",
+    "@dxos/live-object": "0.8.2-staging.4d6ad0f",
+    "@dxos/local-storage": "0.8.2-staging.4d6ad0f",
+    "@dxos/log": "0.8.2-staging.4d6ad0f",
+    "@dxos/plugin-deck": "0.8.2-staging.4d6ad0f",
+    "@dxos/invariant": "0.8.2-staging.4d6ad0f",
+    "@dxos/plugin-graph": "0.8.2-staging.4d6ad0f",
+    "@dxos/plugin-observability": "0.8.2-staging.4d6ad0f",
+    "@dxos/protocols": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-menu": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-list": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-attention": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-searchlist": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-stack": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-tabs": "0.8.2-staging.4d6ad0f",
+    "@dxos/util": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-client": "0.8.2-staging.4d6ad0f"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -63,14 +64,14 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/plugin-attention": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-storybook-layout": "0.8.2-main.fbd8ed0",
-    "@dxos/echo-signals": "0.8.2-main.fbd8ed0",
-    "@dxos/plugin-theme": "0.8.2-main.fbd8ed0",
-    "@dxos/random": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui": "0.8.2-main.fbd8ed0",
-    "@dxos/storybook-utils": "0.8.2-main.fbd8ed0"
+    "@dxos/plugin-attention": "0.8.2-staging.4d6ad0f",
+    "@dxos/echo-signals": "0.8.2-staging.4d6ad0f",
+    "@dxos/plugin-storybook-layout": "0.8.2-staging.4d6ad0f",
+    "@dxos/plugin-theme": "0.8.2-staging.4d6ad0f",
+    "@dxos/random": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-theme": "0.8.2-staging.4d6ad0f",
+    "@dxos/storybook-utils": "0.8.2-staging.4d6ad0f"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -79,8 +80,8 @@
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0"
+    "@dxos/react-ui": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-theme": "0.8.2-staging.4d6ad0f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/NavTree/NavTree.stories.tsx

@@ -80,7 +80,7 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
-        <div className={mx(container, 'm-2 bg-groupSurface')}>
+        <div className={mx(container, 'm-2 bg-activeSurface')}>
           <Input.Root>
             <Input.Label>Level 1 (group)</Input.Label>
           </Input.Root>

package/src/components/NavTreeContainer.tsx

@@ -100,24 +100,22 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph],
   );
 
-  // TODO(wittjosiah): Graph is currently expanded eagerly. See graph plugin.
-  // const loadDescendents = useCallback(
-  //   (node: Node) => {
-  //     graph.expand(node.id, 'outbound');
-  //     // Load one level deeper, which resolves some juddering observed on open/close.
-  //     graph.getConnections(node.id, 'outbound').forEach((child) => {
-  //       graph.expand(child.id, 'outbound');
-  //     });
-  //   },
-  //   [graph],
-  // );
+  const loadDescendents = useCallback(
+    (node: Node) => {
+      graph.expand(node.id, 'outbound');
+      // Load one level deeper, which resolves some juddering observed on open/close.
+      graph.getConnections(node.id, 'outbound').forEach((child) => {
+        graph.expand(child.id, 'outbound');
+      });
+    },
+    [graph],
+  );
 
   const handleOpenChange = useCallback(
     ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
       // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
       setItem(path, 'open', open);
-      // TODO(wittjosiah): Graph is currently expanded eagerly. See graph plugin.
-      // graph.expand(id, 'outbound');
+      graph.expand(id, 'outbound');
     },
     [graph],
   );
@@ -284,7 +282,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       useItems,
       tab,
       getActions,
-      // loadDescendents,
+      loadDescendents,
       renderItemEnd,
       popoverAnchorId,
       topbar,
@@ -302,7 +300,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [
       tab,
       getActions,
-      // loadDescendents,
+      loadDescendents,
       renderItemEnd,
       popoverAnchorId,
       topbar,

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type MutableRefObject, useRef } from 'react';
+import React from 'react';
 
 import { type Action, type Node } from '@dxos/app-graph';
 import { useTranslation, toLocalizedString, IconButton, useDensityContext } from '@dxos/react-ui';
@@ -17,7 +17,6 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
   caller?: string;
   monolithic?: boolean;
   menuActions?: Action[];
-  suppressNextTooltip?: MutableRefObject<boolean>;
 };
 
 const fallbackIcon = 'ph--placeholder--regular';
@@ -40,16 +39,10 @@ export const NavTreeItemActionDropdownMenu = ({
   caller,
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-  const suppressNextTooltip = useRef<boolean>(false);
   const density = useDensityContext();
   return (
     <MenuProvider>
-      <DropdownMenu.Root
-        group={parent}
-        items={menuActions as MenuItem[]}
-        caller={caller}
-        suppressNextTooltip={suppressNextTooltip}
-      >
+      <DropdownMenu.Root group={parent} items={menuActions as MenuItem[]} caller={caller}>
         <DropdownMenu.Trigger asChild>
           <IconButton
             {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
@@ -59,7 +52,6 @@ export const NavTreeItemActionDropdownMenu = ({
             iconOnly
             label={toLocalizedString(label, t)}
             data-testid={testId}
-            suppressNextTooltip={suppressNextTooltip}
           />
         </DropdownMenu.Trigger>
       </DropdownMenu.Root>

package/src/components/Sidebar/L0Menu.tsx

@@ -231,8 +231,8 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
           'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded',
           // TODO(burdon): Create reusable button/component and/or create var for size.
           pinned
-            ? 'bg-transparent w-[50px] p-2 group-hover/l0item:bg-groupSurface'
-            : 'bg-groupSurface w-[50px] h-[50px]',
+            ? 'bg-transparent w-[50px] p-2 group-hover/l0item:bg-activeSurface'
+            : 'bg-activeSurface w-[50px] h-[50px]',
         )}
         {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
       >
@@ -313,14 +313,13 @@ export type L0MenuProps = {
 
 export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }: L0MenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-  const suppressNextTooltip = useRef(true);
 
   return (
     <Tabs.Tablist
       classNames={[
         'group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg',
         'grid grid-cols-[var(--l0-size)] grid-rows-[var(--rail-size)_1fr_min-content_var(--l0-size)] gap-1 contain-layout',
-        '!is-[--l0-size] bg-baseSurface border-ie border-separator app-drag pbe-[env(safe-area-inset-bottom)]',
+        '!is-[--l0-size] bg-baseSurface border-ie border-subduedSeparator app-drag pbe-[env(safe-area-inset-bottom)]',
       ]}
     >
       <div role='none' className='flex justify-center p-1'>
@@ -336,7 +335,6 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
                 label={t('app menu label')}
                 tooltipSide='right'
                 classNames='w-[50px] _bg-primary-500'
-                suppressNextTooltip={suppressNextTooltip}
                 data-testid='spacePlugin.addSpace'
               />
             </DropdownMenu.Trigger>

package/src/components/Sidebar/L1Panel.tsx

@@ -83,7 +83,7 @@ const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
     >
       {item.id === currentItemId && (
         <>
-          <h2 className='flex items-center border-be border-separator app-drag pli-1'>
+          <h2 className='flex items-center border-be border-subduedSeparator app-drag pli-1'>
             {backCapable ? (
               <TitleButton title={title} onClick={handleBack} />
             ) : (

package/src/hooks.ts

@@ -2,21 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-// import { useEffect } from 'react';
+import { useEffect } from 'react';
 
 import { type Node } from '@dxos/app-graph';
 
-// import { useNavTreeContext } from './components';
+import { useNavTreeContext } from './components';
 
 export const useLoadDescendents = (root?: Node) => {
-  // TODO(wittjosiah): Graph is currently expanded eagerly. See graph plugin.
-  // const { loadDescendents } = useNavTreeContext();
-  // useEffect(() => {
-  //   const frame = requestAnimationFrame(() => {
-  //     if (root) {
-  //       void loadDescendents?.(root);
-  //     }
-  //   });
-  //   return () => cancelAnimationFrame(frame);
-  // }, [root]);
+  const { loadDescendents } = useNavTreeContext();
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (root) {
+        void loadDescendents?.(root);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [root]);
 };