@dxos/plugin-navtree 0.9.0 → 0.9.1-staging.ee54ba693a

package/dx.config.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Config2 } from '@dxos/app-framework/config';
+import { trim } from '@dxos/util';
+
+export default Config2.make({
+  plugin: {
+    key: 'org.dxos.plugin.navtree',
+    name: 'Navtree',
+    author: 'DXOS',
+    description: trim`
+      NavTreePlugin renders the application graph as a collapsible hierarchical tree in the Composer sidebar.
+      It manages workspace tabs at the root level and provides expand/collapse navigation for spaces, folders,
+      and objects, with open/current state persisted to localStorage across sessions.
+
+      The plugin wires drag-and-drop rearrangement and cross-parent transfer of tree items via Pragmatic DnD,
+      and registers graph-action keyboard shortcuts (including the ⌘K / Ctrl+K command palette) through a
+      global Keyboard singleton that tracks context as the user navigates.
+
+      An operation handler for LayoutOperation.Expose expands ancestor paths on demand so that any
+      programmatically activated item is scrolled into view in the tree.
+
+      A commands dialog surfaces all discoverable graph actions as a searchable palette, making it the primary
+      keyboard-first entry point for power users.
+    `,
+    spec: 'PLUGIN.mdl',
+    tags: ['system'],
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.9.0",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -91,60 +91,60 @@
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
+    "dx.config.ts",
     "src",
     "PLUGIN.mdl"
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@dxos/app-graph": "0.9.0",
-    "@dxos/app-framework": "0.9.0",
-    "@dxos/async": "0.9.0",
-    "@dxos/app-toolkit": "0.9.0",
-    "@dxos/debug": "0.9.0",
-    "@dxos/compute": "0.9.0",
-    "@dxos/echo": "0.9.0",
-    "@dxos/keyboard": "0.9.0",
-    "@dxos/keys": "0.9.0",
-    "@dxos/lit-ui": "0.9.0",
-    "@dxos/log": "0.9.0",
-    "@dxos/plugin-deck": "0.9.0",
-    "@dxos/plugin-graph": "0.9.0",
-    "@dxos/random": "0.9.0",
-    "@dxos/react-ui-attention": "0.9.0",
-    "@dxos/react-ui-list": "0.9.0",
-    "@dxos/react-ui-menu": "0.9.0",
-    "@dxos/react-ui-search": "0.9.0",
-    "@dxos/react-ui-tabs": "0.9.0",
-    "@dxos/react-ui-stack": "0.9.0",
-    "@dxos/util": "0.9.0"
+    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
+    "@dxos/app-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/compute": "0.9.1-staging.ee54ba693a",
+    "@dxos/debug": "0.9.1-staging.ee54ba693a",
+    "@dxos/app-toolkit": "0.9.1-staging.ee54ba693a",
+    "@dxos/async": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo": "0.9.1-staging.ee54ba693a",
+    "@dxos/keyboard": "0.9.1-staging.ee54ba693a",
+    "@dxos/keys": "0.9.1-staging.ee54ba693a",
+    "@dxos/lit-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-deck": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-list": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-menu": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-search": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-tabs": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "@types/react": "~19.2.7",
+    "@effect/platform": "0.96.2",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/plugin-attention": "0.9.0",
-    "@dxos/plugin-client": "0.9.0",
-    "@dxos/plugin-space": "0.9.0",
-    "@dxos/plugin-theme": "0.9.0",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/plugin-testing": "0.9.0",
-    "@dxos/ui-theme": "0.9.0",
-    "@dxos/storybook-utils": "0.9.0"
+    "@dxos/plugin-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-space": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-testing": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/ui-theme": "0.9.0"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.test.ts

@@ -11,7 +11,7 @@ import { NavTreePlugin } from '#plugin';
 
 import { meta } from './meta';
 
-const moduleId = (name: string) => `${meta.id}.module.${name}`;
+const moduleId = (name: string) => `${meta.profile.key}.module.${name}`;
 
 describe('NavTreePlugin', () => {
   test('modules activate on the expected events', async ({ expect }) => {

package/src/NavTreePlugin.tsx

@@ -56,7 +56,7 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
     activate: Keyboard,
   }),
   AppPlugin.addPluginAssetModule({
-    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
   }),
   Plugin.make,
 );

package/src/capabilities/app-graph-builder.ts

@@ -26,7 +26,7 @@ export default Capability.makeModule(
                 blockAlign: 'start',
               }),
             properties: {
-              label: ['open-commands.label', { ns: meta.id }],
+              label: ['open-commands.label', { ns: meta.profile.key }],
               icon: 'ph--magnifying-glass--regular',
               keyBinding: {
                 macos: 'meta+k',

package/src/capabilities/keyboard.ts

@@ -46,11 +46,14 @@ export default Capability.makeModule(
       }
     };
 
-    const eventHandler = debounce(() => {
+    const syncBindings = () => {
       Graph.traverse(graph, { relation: ['child', 'action'], visitor });
-    }, 500);
+    };
+
+    const eventHandler = debounce(syncBindings, 500);
 
     const unsubscribe = graph.onNodeChanged.on(eventHandler);
+    syncBindings();
 
     // TODO(burdon): Create context and plugin.
     Keyboard.singleton.initialize();

package/src/capabilities/react-surface.tsx

@@ -9,6 +9,7 @@ import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Node } from '@dxos/plugin-graph';
+import { Position } from '@dxos/util';
 
 import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '#containers';
 import { COMMANDS_DIALOG } from '#meta';
@@ -23,29 +24,22 @@ export default Capability.makeModule(() =>
       }),
       Surface.create({
         id: 'navigation',
-        role: 'navigation',
-        filter: (data): data is { popoverAnchorId?: string; current: string } => typeof data.current === 'string',
-        component: ({ data, ref }) => {
-          return (
-            <NavTreeContainer
-              tab={data.current}
-              popoverAnchorId={data.popoverAnchorId as string | undefined}
-              ref={ref}
-            />
-          );
-        },
+        filter: Surface.makeFilter(AppSurface.Navigation),
+        component: ({ data, ref }) => (
+          <NavTreeContainer tab={data.current} popoverAnchorId={data.popoverAnchorId} ref={ref} />
+        ),
       }),
       Surface.create({
         id: 'documentTitle',
-        role: 'document-title',
+        filter: Surface.makeFilter(AppSurface.DocumentTitle),
         component: ({ data }) => (
           <NavTreeDocumentTitle node={Node.isGraphNode(data.subject) ? data.subject : undefined} />
         ),
       }),
       Surface.create({
         id: 'searchInput',
-        role: 'search-input',
-        position: 'last',
+        filter: Surface.makeFilter(AppSurface.SearchInput),
+        position: Position.last,
         component: () => <CommandsTrigger />,
       }),
     ]),

package/src/capabilities/state.ts

@@ -13,7 +13,7 @@ import { Path } from '@dxos/react-ui-list';
 import { meta } from '#meta';
 import { NavTreeCapabilities } from '#types';
 
-const KEY = `${meta.id}.state.v1`;
+const KEY = `${meta.profile.key}.state.v1`;
 
 /** Default item state for new entries. */
 const defaultItemState: NavTreeCapabilities.NavTreeItemState = { open: false, current: false };

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

@@ -5,7 +5,7 @@
 import { Atom, type Registry } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
-import React, { type KeyboardEvent, useCallback, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
@@ -15,9 +15,8 @@ import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { Operation, OperationHandlerSet } from '@dxos/compute';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
+import { Focus, IconButton, Input, Main, Panel, Toolbar } from '@dxos/react-ui';
 import { useAttention, useAttentionAttributes } from '@dxos/react-ui-attention';
-import { Stack, StackItem } from '@dxos/react-ui-stack';
 import { withLayout } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/ui-theme';
 
@@ -35,9 +34,8 @@ const container = 'flex flex-col grow gap-2 p-4 rounded-md';
 
 const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
   const { hasAttention } = useAttention(attendableId);
-  console.log('hasAttention', hasAttention);
   return (
-    <div className='flex p-1 items-center border-b border-separator'>
+    <Panel.Toolbar classNames='border-b border-separator'>
       <IconButton
         density='lg'
         icon='ph--circle--regular'
@@ -46,8 +44,7 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
         variant={hasAttention ? 'primary' : 'ghost'}
         classNames='w-(--dx-rail-action) h-(--dx-rail-action)'
       />
-      <StackItem.ResizeHandle />
-    </div>
+    </Panel.Toolbar>
   );
 };
 
@@ -57,40 +54,50 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
 
   // NOTE(thure): This is the same workaround as in Plank, but that component is out of scope for this story.
   // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (event.target === event.currentTarget && event.key === 'Escape') {
-      rootElement.current?.closest('main')?.focus();
+  // Attached imperatively because `Focus.Item`/`Panel.Root` expose a narrow (slottable) prop surface.
+  useEffect(() => {
+    const element = rootElement.current;
+    if (!element) {
+      return;
     }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.target === element && event.key === 'Escape') {
+        element.closest('main')?.focus();
+      }
+    };
+
+    element.addEventListener('keydown', handleKeyDown);
+    return () => element.removeEventListener('keydown', handleKeyDown);
   }, []);
 
   return (
-    <StackItem.Root
-      item={{ id: attendableId }}
-      {...attentionAttrs}
-      classNames='bg-base-surface border-e border-separator'
-      size={30}
-      onKeyDown={handleKeyDown}
-      ref={rootElement}
-    >
-      <StoryPlankHeading attendableId={attendableId} />
-      <StackItem.Content toolbar>
-        <Toolbar.Root classNames='border-b border-subdued-separator'>
-          <Toolbar.Button>Test</Toolbar.Button>
-        </Toolbar.Root>
-
-        <div className={mx(container, 'm-2 bg-current-surface')}>
-          <Input.Root>
-            <Input.Label>Level 1 (group)</Input.Label>
-          </Input.Root>
-          <div className={mx(container, 'bg-base-surface')}>
+    <Focus.Item asChild ref={rootElement}>
+      <Panel.Root
+        {...attentionAttrs}
+        role='article'
+        classNames='is-[30rem] shrink-0 bs-full bg-base-surface border-e border-separator'
+      >
+        <StoryPlankHeading attendableId={attendableId} />
+        <Panel.Content classNames='grid'>
+          <Toolbar.Root classNames='border-b border-subdued-separator'>
+            <Toolbar.Button>Test</Toolbar.Button>
+          </Toolbar.Root>
+
+          <div className={mx(container, 'm-2 bg-current-surface')}>
             <Input.Root>
-              <Input.Label>Level 2 (base)</Input.Label>
-              <Input.TextArea placeholder='Enter text' />
+              <Input.Label>Level 1 (group)</Input.Label>
             </Input.Root>
+            <div className={mx(container, 'bg-base-surface')}>
+              <Input.Root>
+                <Input.Label>Level 2 (base)</Input.Label>
+                <Input.TextArea placeholder='Enter text' />
+              </Input.Root>
+            </div>
           </div>
-        </div>
-      </StackItem.Content>
-    </StackItem.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </Focus.Item>
   );
 };
 
@@ -103,10 +110,10 @@ const DefaultStory = () => {
         <NavTreeContainer tab={state.tab} />
       </Main.NavigationSidebar>
       <Main.Content bounce handlesFocus>
-        <Stack orientation='horizontal' size='contain'>
+        <div role='none' className='flex grow overflow-x-auto'>
           <StoryPlank attendableId='space-0:object-0' />
           <StoryPlank attendableId='space-0:object-1' />
-        </Stack>
+        </div>
       </Main.Content>
     </Main.Root>
   );

package/src/components/NavTree/NavTree.tsx

@@ -6,8 +6,9 @@ import React, { forwardRef, useMemo } from 'react';
 
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Node, useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
+import { type MenuItem } from '@dxos/react-ui-menu';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { byPosition } from '@dxos/util';
+import { Position } from '@dxos/util';
 
 import { useLoadDescendents } from '#hooks';
 
@@ -33,7 +34,7 @@ export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, tab
     //  not use `react-ui-tabs` at all.
     <Tabs.Root value={tab} orientation='vertical' classNames='relative' ref={forwardedRef}>
       <L0Menu
-        menuActions={topLevelActions}
+        menuActions={topLevelActions as MenuItem[]}
         topLevelItems={l0Items}
         pinnedItems={pinnedItems}
         userAccountItem={userAccountItem}
@@ -75,11 +76,11 @@ const useTopLevelNavItems = (root?: Node.Node) => {
 
     const topLevelActions = rootActions
       .filter((action) => action.properties.disposition === 'menu')
-      .toSorted((a, b) => byPosition(a.properties, b.properties));
+      .toSorted((a, b) => Position.compare(a.properties, b.properties));
     const pinnedItems = [
       ...outboundPinnedItems,
       ...rootActions.filter((action) => action.properties.disposition === 'pin-end'),
-    ].toSorted((a, b) => byPosition(a.properties, b.properties));
+    ].toSorted((a, b) => Position.compare(a.properties, b.properties));
 
     return {
       pinnedItems,

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -36,7 +36,7 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
 
 export const NavTreeItemActionDropdownMenu = composable<HTMLButtonElement, NavTreeItemActionMenuProps>(
   ({ parent, path, label, icon, testId, menuActions, caller, ...props }, forwardedRef) => {
-    const { t } = useTranslation(meta.id);
+    const { t } = useTranslation(meta.profile.key);
     const density = useDensityContext();
     const runAction = useActionRunner();
     const handleAction = useCallback(
@@ -118,7 +118,7 @@ export const NavTreeItemAction = ({
   path,
   ...props
 }: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -4,7 +4,8 @@
 
 import React, { Fragment, memo, useMemo } from 'react';
 
-import { Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Treegrid } from '@dxos/react-ui-list';
 
 import { getListActions, useActions } from '#hooks';
 import { meta } from '#meta';
@@ -15,17 +16,19 @@ import { type NavTreeItemColumnsProps } from '../types';
 import { NavTreeItemActionDropdownMenu, NavTreeItemMonolithicAction } from './NavTreeItemAction';
 
 export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
   const level = path.length - 2;
   const flattenedActions = useActions(item);
   const allActions = useMemo(() => getListActions(flattenedActions), [flattenedActions]);
 
-  const ActionRoot = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}` ? Popover.Anchor : Fragment;
+  const anchored = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}`;
+  const ActionRoot = anchored ? Popover.Anchor : Fragment;
 
   return (
-    <div className='contents dx-app-no-drag'>
+    // `data-popover-anchor` lets the enclosing row highlight itself while a popover (e.g. rename) is open on it.
+    <div className='contents dx-app-no-drag' {...(anchored && { 'data-popover-anchor': '' })}>
       <ActionRoot>
         {allActions.length === 1 ? (
           <Treegrid.Cell classNames='contents'>

package/src/components/Sidebar/L0Menu.tsx

@@ -30,7 +30,6 @@ import { useActionRunner } from '@dxos/plugin-graph';
 import {
   Icon,
   IconButton,
-  ListItem,
   ScrollArea,
   type ThemedClassName,
   Tooltip,
@@ -38,8 +37,8 @@ import {
   useMediaQuery,
   useTranslation,
 } from '@dxos/react-ui';
+import { DropIndicator } from '@dxos/react-ui-list';
 import { Menu, type MenuItem } from '@dxos/react-ui-menu';
-import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
@@ -60,6 +59,14 @@ type L0ItemData = {
   type: 'l0Item';
 };
 
+// Local rearrange-handler callback shape; drag-and-drop is wired directly via pragmatic-dnd in `L0Item`,
+// so only the callback signature is needed here.
+type StackItemRearrangeHandler<Data extends { id: string } = { id: string }> = (
+  source: Data,
+  target: Data,
+  closestEdge: Edge | null,
+) => void;
+
 type L0ItemRootProps = {
   item: Node.Node;
   parent?: Node.Node;
@@ -106,7 +113,7 @@ const l0Breakpoints: Record<string, string> = {
 const L0ItemRoot = memo(
   forwardRef<HTMLButtonElement, PropsWithChildren<L0ItemRootProps>>(
     ({ item, parent, path, onMouseEnter, children }, forwardedRef) => {
-      const { t } = useTranslation(meta.id);
+      const { t } = useTranslation(meta.profile.key);
       const { model } = useNavTreeContext();
       const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
       const { id, testId } = useAtomValue(model.itemProps(itemPath));
@@ -151,7 +158,7 @@ export const L0ItemActiveTabIndicator = ({ classNames }: ThemedClassName<{}>) =>
 
 // TODO(burdon): Factor out pinned (non-draggable) items.
 const L0Item = memo(({ item, parent, path, pinned, onRearrange, onItemHover }: L0ItemProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const itemElement = useRef<HTMLButtonElement | null>(null);
   const [closestEdge, setEdge] = useState<Edge | null>(null);
   const localizedString = toLocalizedString(item.properties.label, t);
@@ -232,13 +239,13 @@ const L0Item = memo(({ item, parent, path, pinned, onRearrange, onItemHover }: L
       <span id={`${item.id}__label`} className='sr-only'>
         {localizedString}
       </span>
-      {closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
+      {closestEdge && <DropIndicator edge={closestEdge} />}
     </L0ItemRoot>
   );
 });
 
 const ItemAvatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   // Actions.
   if (item.properties.icon) {
@@ -280,7 +287,7 @@ export const L0Menu = ({
   path,
   onItemHover,
 }: L0MenuProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const runAction = useActionRunner();
   const handleAction = useCallback(
     (action: Node.Action, params: Node.InvokeProps) => {

package/src/components/Sidebar/L1Panel.tsx

@@ -6,7 +6,7 @@ import * as Option from 'effect/Option';
 import React, { memo, useCallback, useMemo } from 'react';
 
 import { Node } from '@dxos/app-graph';
-import { isPinnedWorkspace } from '@dxos/app-toolkit';
+import { Paths } from '@dxos/app-toolkit';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Graph, useActionRunner, useEdges } from '@dxos/plugin-graph';
 import { DensityProvider, IconButton, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
@@ -34,7 +34,7 @@ export type L1PanelProps = {
  * Space or settings panel.
  */
 const L1Panel$ = ({ open, path, item, isCurrent, onBack }: L1PanelProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const title = toLocalizedString(item.properties.label, t);
   const isActivated = useIsActivatedWorkspace(item);
   const shouldRenderContent = isCurrent || isActivated;
@@ -114,10 +114,10 @@ const L1PanelContent = ({ path, item, onBack }: Pick<L1PanelProps, 'open' | 'pat
  * Header row.
  */
 const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path' | 'onBack'>) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { renderItemEnd: ItemEnd } = useNavTreeContext();
   const title = toLocalizedString(item.properties.label, t);
-  const backCapableWorkspace = isPinnedWorkspace(item.id);
+  const backCapableWorkspace = Paths.isPinnedWorkspace(item.id);
 
   const { menuActions, onAction } = useL1MenuActions({ item, path });
   useLoadDescendents(item);
@@ -169,7 +169,7 @@ const MenuActions = ({
 }: {
   item: Node.Node;
 } & Pick<L1MenuActions, 'menuActions' | 'onAction'>) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   if (menuActions.length === 0) {
     return null;

package/src/containers/CommandsDialogContent/CommandsDialogContent.tsx

@@ -24,7 +24,7 @@ export type CommandsDialogContentProps = {
 // TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
 export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogContentProps>(
   ({ selected: initial }, forwardedRef) => {
-    const { t } = useTranslation(meta.id);
+    const { t } = useTranslation(meta.profile.key);
     const { invokePromise } = useOperationInvoker();
     const runAction = useActionRunner();
     const { graph } = useAppGraph();
@@ -70,7 +70,7 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
 
     return (
       <Dialog.Content ref={forwardedRef}>
-        <Dialog.Title srOnly>{t('commands-dialog.title', { ns: meta.id })}</Dialog.Title>
+        <Dialog.Title srOnly>{t('commands-dialog.title', { ns: meta.profile.key })}</Dialog.Title>
         <SearchList.Root onSearch={handleSearch}>
           <SearchList.Input placeholder={t('command-list-input.placeholder')} />
           <SearchList.Viewport>

package/src/containers/CommandsTrigger/CommandsTrigger.tsx

@@ -13,7 +13,7 @@ import { COMMANDS_DIALOG, meta } from '#meta';
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
   const { invokePromise } = useOperationInvoker();
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   return (
     <Button
       classNames='m-1 px-1 lg:px-2'