@dxos/plugin-navtree 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-navtree",
-  "version": "0.8.4-main.21d9917",
+  "version": "0.8.4-main.2244d791bb",
   "description": "DXOS Surface plugin for a tree view visualization of the graph.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,57 +33,58 @@
     "@radix-ui/react-dismissable-layer": "1.1.5",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.3.1",
-    "@dxos/app-graph": "0.8.4-main.21d9917",
-    "@dxos/async": "0.8.4-main.21d9917",
-    "@dxos/debug": "0.8.4-main.21d9917",
-    "@dxos/invariant": "0.8.4-main.21d9917",
-    "@dxos/echo": "0.8.4-main.21d9917",
-    "@dxos/lit-ui": "0.8.4-main.21d9917",
-    "@dxos/keyboard": "0.8.4-main.21d9917",
-    "@dxos/operation": "0.8.4-main.21d9917",
-    "@dxos/log": "0.8.4-main.21d9917",
-    "@dxos/plugin-deck": "0.8.4-main.21d9917",
-    "@dxos/plugin-graph": "0.8.4-main.21d9917",
-    "@dxos/plugin-observability": "0.8.4-main.21d9917",
-    "@dxos/protocols": "0.8.4-main.21d9917",
-    "@dxos/react-client": "0.8.4-main.21d9917",
-    "@dxos/app-framework": "0.8.4-main.21d9917",
-    "@dxos/react-ui-attention": "0.8.4-main.21d9917",
-    "@dxos/react-ui-menu": "0.8.4-main.21d9917",
-    "@dxos/react-ui-mosaic": "0.8.4-main.21d9917",
-    "@dxos/react-ui-searchlist": "0.8.4-main.21d9917",
-    "@dxos/react-ui-tabs": "0.8.4-main.21d9917",
-    "@dxos/react-ui-stack": "0.8.4-main.21d9917",
-    "@dxos/util": "0.8.4-main.21d9917",
-    "@dxos/react-ui-list": "0.8.4-main.21d9917"
+    "@dxos/app-framework": "0.8.4-main.2244d791bb",
+    "@dxos/app-toolkit": "0.8.4-main.2244d791bb",
+    "@dxos/debug": "0.8.4-main.2244d791bb",
+    "@dxos/echo": "0.8.4-main.2244d791bb",
+    "@dxos/async": "0.8.4-main.2244d791bb",
+    "@dxos/app-graph": "0.8.4-main.2244d791bb",
+    "@dxos/invariant": "0.8.4-main.2244d791bb",
+    "@dxos/keyboard": "0.8.4-main.2244d791bb",
+    "@dxos/lit-ui": "0.8.4-main.2244d791bb",
+    "@dxos/log": "0.8.4-main.2244d791bb",
+    "@dxos/operation": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-deck": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-graph": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-observability": "0.8.4-main.2244d791bb",
+    "@dxos/react-client": "0.8.4-main.2244d791bb",
+    "@dxos/protocols": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-list": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-attention": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-menu": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-mosaic": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-searchlist": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-stack": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui-tabs": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb"
   },
   "devDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/plugin-attention": "0.8.4-main.21d9917",
-    "@dxos/plugin-client": "0.8.4-main.21d9917",
-    "@dxos/plugin-space": "0.8.4-main.21d9917",
-    "@dxos/plugin-testing": "0.8.4-main.21d9917",
-    "@dxos/plugin-theme": "0.8.4-main.21d9917",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/random": "0.8.4-main.21d9917",
-    "@dxos/storybook-utils": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917"
+    "@dxos/plugin-attention": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-client": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-space": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-testing": "0.8.4-main.2244d791bb",
+    "@dxos/random": "0.8.4-main.2244d791bb",
+    "@dxos/plugin-theme": "0.8.4-main.2244d791bb",
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/storybook-utils": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "peerDependencies": {
-    "@effect-atom/atom-react": "^0.4.6",
-    "@effect/platform": "0.93.6",
-    "effect": "3.19.11",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@effect/platform": "0.94.4",
+    "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917"
+    "@dxos/react-ui": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "publishConfig": {
     "access": "public"

package/src/NavTreePlugin.tsx

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { ActivationEvent, Capability, Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvent, ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppCapabilities, AppPlugin, LayoutOperation } from '@dxos/app-toolkit';
 import { Graph } from '@dxos/plugin-graph';
 import { type TreeData } from '@dxos/react-ui-list';
 
@@ -15,14 +16,8 @@ import { translations } from './translations';
 import { NavTreeEvents } from './types';
 
 export const NavTreePlugin = Plugin.define(meta).pipe(
-  Plugin.addModule({
-    id: 'state',
-    activatesOn: Common.ActivationEvent.LayoutReady,
-    activatesAfter: [NavTreeEvents.StateReady],
-    activate: State,
-  }),
-  Common.Plugin.addTranslationsModule({ translations }),
-  Common.Plugin.addMetadataModule({
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addMetadataModule({
     metadata: {
       id: NODE_TYPE,
       metadata: {
@@ -39,23 +34,32 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
       },
     },
   }),
+  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.addModule({
+    id: 'state',
+    activatesOn: AppActivationEvents.LayoutReady,
+    activatesAfter: [NavTreeEvents.StateReady],
+    activate: State,
+  }),
   Plugin.addModule({
     id: 'expose',
     activatesOn: ActivationEvent.allOf(
-      Common.ActivationEvent.OperationInvokerReady,
-      Common.ActivationEvent.AppGraphReady,
-      Common.ActivationEvent.LayoutReady,
+      ActivationEvents.OperationInvokerReady,
+      AppActivationEvents.AppGraphReady,
+      AppActivationEvents.LayoutReady,
       NavTreeEvents.StateReady,
     ),
     activate: Effect.fnUntraced(function* () {
-      const layout = yield* Common.Capability.getAtomValue(Common.Capability.Layout);
-      const { invokePromise } = yield* Capability.get(Common.Capability.OperationInvoker);
-      const { graph } = yield* Capability.get(Common.Capability.AppGraph);
+      const layout = yield* Capabilities.getAtomValue(AppCapabilities.Layout);
+      const { invokePromise } = yield* Capability.get(Capabilities.OperationInvoker);
+      const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
       if (invokePromise && layout.active.length === 1) {
         // TODO(wittjosiah): This should really be fired once the navtree renders for the first time.
         //   That is the point at which the graph is expanded and the path should be available.
         void Graph.waitForPath(graph, { target: layout.active[0] }, { timeout: 30_000 })
-          .then(() => invokePromise(Common.LayoutOperation.Expose, { subject: layout.active[0] }))
+          .then(() => invokePromise(LayoutOperation.Expose, { subject: layout.active[0] }))
           .catch(() => {});
       }
 
@@ -64,14 +68,8 @@ export const NavTreePlugin = Plugin.define(meta).pipe(
   }),
   Plugin.addModule({
     id: 'keyboard',
-    activatesOn: ActivationEvent.allOf(
-      Common.ActivationEvent.AppGraphReady,
-      Common.ActivationEvent.OperationInvokerReady,
-    ),
+    activatesOn: ActivationEvent.allOf(AppActivationEvents.AppGraphReady, ActivationEvents.OperationInvokerReady),
     activate: Keyboard,
   }),
-  Common.Plugin.addSurfaceModule({ activate: ReactSurface }),
-  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
-  Common.Plugin.addAppGraphModule({ activate: AppGraphBuilder }),
   Plugin.make,
 );

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

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/operation';
 import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
 
@@ -20,7 +21,7 @@ export default Capability.makeModule(
           {
             id: COMMANDS_DIALOG,
             data: () =>
-              Operation.invoke(Common.LayoutOperation.UpdateDialog, {
+              Operation.invoke(LayoutOperation.UpdateDialog, {
                 subject: COMMANDS_DIALOG,
                 blockAlign: 'start',
               }),
@@ -36,6 +37,6 @@ export default Capability.makeModule(
         ]),
     });
 
-    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
   }),
 );

package/src/capabilities/keyboard/keyboard.ts

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { debounce } from '@dxos/async';
 import { Keyboard } from '@dxos/keyboard';
 import { Graph, Node, runAction } from '@dxos/plugin-graph';
@@ -14,8 +15,8 @@ import { KEY_BINDING } from '../../meta';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    const { graph } = yield* Capability.get(Common.Capability.AppGraph);
-    const invoker = yield* Capability.get(Common.Capability.OperationInvoker);
+    const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
+    const invoker = yield* Capability.get(Capabilities.OperationInvoker);
     const pluginContext = yield* Capability.Service;
 
     // TODO(wittjosiah): Factor out.
@@ -55,7 +56,7 @@ export default Capability.makeModule(
     Keyboard.singleton.initialize();
     Keyboard.singleton.setCurrentContext(Node.RootId);
 
-    return Capability.contributes(Common.Capability.Null, null, () =>
+    return Capability.contributes(Capabilities.Null, null, () =>
       Effect.sync(() => {
         unsubscribe();
         Keyboard.singleton.destroy();

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

@@ -4,7 +4,8 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { log } from '@dxos/log';
 import { OperationResolver } from '@dxos/operation';
 import { Graph } from '@dxos/plugin-graph';
@@ -13,11 +14,11 @@ import { NavTreeCapabilities } from '../../types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    return Capability.contributes(Common.Capability.OperationResolver, [
+    return Capability.contributes(Capabilities.OperationResolver, [
       OperationResolver.make({
-        operation: Common.LayoutOperation.Expose,
+        operation: LayoutOperation.Expose,
         handler: Effect.fnUntraced(function* ({ subject }) {
-          const { graph } = yield* Capability.get(Common.Capability.AppGraph);
+          const { graph } = yield* Capability.get(AppCapabilities.AppGraph);
           const { getItem, setItem } = yield* Capability.get(NavTreeCapabilities.State);
           yield* Effect.tryPromise(() => Graph.waitForPath(graph, { target: subject }, { timeout: 1_000 })).pipe(
             Effect.andThen((path) => {

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

@@ -5,7 +5,8 @@
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { Node } from '@dxos/plugin-graph';
 
 import { CommandsDialogContent, CommandsTrigger, NavTreeContainer, NavTreeDocumentTitle } from '../../components';
@@ -13,14 +14,14 @@ import { COMMANDS_DIALOG, meta } from '../../meta';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
-    Capability.contributes(Common.Capability.ReactSurface, [
-      Common.createSurface({
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
         id: COMMANDS_DIALOG,
         role: 'dialog',
         filter: (data): data is { props: { selected?: string } } => data.component === COMMANDS_DIALOG,
         component: ({ data, ref }) => <CommandsDialogContent {...data.props} ref={ref} />,
       }),
-      Common.createSurface({
+      Surface.create({
         id: `${meta.id}/navigation`,
         role: 'navigation',
         filter: (data): data is { popoverAnchorId?: string; topbar: boolean; current: string } =>
@@ -36,14 +37,14 @@ export default Capability.makeModule(() =>
           );
         },
       }),
-      Common.createSurface({
+      Surface.create({
         id: `${meta.id}/document-title`,
         role: 'document-title',
         component: ({ data }) => (
           <NavTreeDocumentTitle node={Node.isGraphNode(data.subject) ? data.subject : undefined} />
         ),
       }),
-      Common.createSurface({
+      Surface.create({
         id: `${meta.id}/search-input`,
         role: 'search-input',
         position: 'fallback',

package/src/capabilities/state/state.ts

@@ -5,7 +5,8 @@
 import { Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 import { Path } from '@dxos/react-ui-list';
 
 import { meta } from '../../meta';
@@ -40,8 +41,8 @@ const getInitialState = (): Map<string, NC.NavTreeItemState> => {
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    const registry = yield* Capability.get(Common.Capability.AtomRegistry);
-    const layoutAtom = yield* Capability.get(Common.Capability.Layout);
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
+    const layoutAtom = yield* Capability.get(AppCapabilities.Layout);
 
     // Backing state for persistence (not reactive).
     const backingState = getInitialState();

package/src/components/CommandsDialog/CommandsDialog.tsx

@@ -4,8 +4,9 @@
 
 import React, { forwardRef, useMemo, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
 import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions } from '@dxos/plugin-graph';
@@ -71,52 +72,50 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
       <Dialog.Content ref={forwardedRef}>
         <Dialog.Title>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
         <SearchList.Root onSearch={handleSearch}>
-          <div aria-label={t('command list input placeholder')} role='combobox' aria-expanded='true'>
+          <SearchList.Content>
             <SearchList.Input placeholder={t('command list input placeholder')} />
-            <SearchList.Content>
-              <SearchList.Viewport>
-                {results.map((action) => {
-                  const shortcut =
-                    typeof action.properties.keyBinding === 'string'
-                      ? action.properties.keyBinding
-                      : action.properties.keyBinding?.[getHostPlatform()];
+            <SearchList.Viewport>
+              {results.map((action) => {
+                const shortcut =
+                  typeof action.properties.keyBinding === 'string'
+                    ? action.properties.keyBinding
+                    : action.properties.keyBinding?.[getHostPlatform()];
 
-                  return (
-                    <SearchList.Item
-                      value={action.id}
-                      key={action.id}
-                      label={toLocalizedString(action.properties.label, t)}
-                      icon={action.properties.icon}
-                      suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
-                      onSelect={() => {
-                        if (action.properties.disabled) {
-                          return;
-                        }
+                return (
+                  <SearchList.Item
+                    value={action.id}
+                    key={action.id}
+                    label={toLocalizedString(action.properties.label, t)}
+                    icon={action.properties.icon}
+                    suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
+                    onSelect={() => {
+                      if (action.properties.disabled) {
+                        return;
+                      }
 
-                        if (Node.isActionGroup(action)) {
-                          setSelected(action.id);
-                          return;
-                        }
+                      if (Node.isActionGroup(action)) {
+                        setSelected(action.id);
+                        return;
+                      }
 
-                        invokeSync(Common.LayoutOperation.UpdateDialog, { state: false });
-                        setTimeout(() => {
-                          const node = Graph.getConnections(graph, group?.id ?? action.id, 'inbound')[0];
-                          if (node && Node.isAction(action)) {
-                            void runAction(action, { parent: node, caller: KEY_BINDING });
-                          }
-                        });
-                      }}
-                      classNames='flex items-center gap-2'
-                      disabled={action.properties.disabled}
-                      {...(action.properties?.testId && {
-                        'data-testid': action.properties.testId,
-                      })}
-                    />
-                  );
-                })}
-              </SearchList.Viewport>
-            </SearchList.Content>
-          </div>
+                      invokeSync(LayoutOperation.UpdateDialog, { state: false });
+                      setTimeout(() => {
+                        const node = Graph.getConnections(graph, group?.id ?? action.id, 'inbound')[0];
+                        if (node && Node.isAction(action)) {
+                          void runAction(action, { parent: node, caller: KEY_BINDING });
+                        }
+                      });
+                    }}
+                    classNames='flex items-center gap-2'
+                    disabled={action.properties.disabled}
+                    {...(action.properties?.testId && {
+                      'data-testid': action.properties.testId,
+                    })}
+                  />
+                );
+              })}
+            </SearchList.Viewport>
+          </SearchList.Content>
         </SearchList.Root>
         <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
           <Dialog.Close asChild>

package/src/components/CommandsDialog/CommandsTrigger.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
 import { COMMANDS_DIALOG, meta } from '../../meta';
@@ -17,7 +17,7 @@ export const CommandsTrigger = () => {
   return (
     <Button
       classNames='m-1 pli-1 lg:pli-2'
-      onClick={() => invokeSync(Common.LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })}
+      onClick={() => invokeSync(LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })}
     >
       <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>
       <Icon icon='ph--magnifying-glass--regular' size={5} />

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

@@ -8,9 +8,10 @@ import * as Effect from 'effect/Effect';
 import React, { type KeyboardEvent, useCallback, useRef } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
-import { Capability, Common } from '@dxos/app-framework';
-import { useAtomCapability } from '@dxos/app-framework/react';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { OperationResolver } from '@dxos/operation';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
@@ -100,7 +101,7 @@ const DefaultStory = () => {
   const state = useAtomCapability(StoryState);
 
   return (
-    <Main.Root complementarySidebarState='closed'>
+    <Main.Root navigationSidebarState='expanded'>
       <Main.NavigationSidebar label='Navigation' classNames='grid'>
         <NavTreeContainer tab={state.tab} />
       </Main.NavigationSidebar>
@@ -119,7 +120,7 @@ const meta = {
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       plugins: [
         ...corePlugins(),
@@ -133,13 +134,13 @@ const meta = {
         const storyStateAtom = Atom.make({ tab: 'space-0' }).pipe(Atom.keepAlive);
         return [
           Capability.contributes(StoryState, storyStateAtom),
-          Capability.contributes(Common.Capability.AppGraphBuilder, storybookGraphBuilders()),
-          Capability.contributes(Common.Capability.OperationResolver, [
+          Capability.contributes(AppCapabilities.AppGraphBuilder, storybookGraphBuilders()),
+          Capability.contributes(Capabilities.OperationResolver, [
             OperationResolver.make({
-              operation: Common.LayoutOperation.SwitchWorkspace,
+              operation: LayoutOperation.SwitchWorkspace,
               handler: ({ subject }) =>
                 Effect.gen(function* () {
-                  const registry: Registry.Registry = yield* Capability.get(Common.Capability.AtomRegistry);
+                  const registry: Registry.Registry = yield* Capability.get(Capabilities.AtomRegistry);
                   registry.set(storyStateAtom, { tab: subject });
                 }),
             }),

package/src/components/NavTreeContainer.tsx

@@ -6,8 +6,9 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/ad
 import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import React, { forwardRef, memo, useCallback, useEffect, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { Surface, useAppGraph, useLayout, useOperationInvoker } from '@dxos/app-framework/react';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph, useLayout } from '@dxos/app-toolkit/ui';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
 import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
 import { useConnections, useActions as useGraphActions } from '@dxos/plugin-graph';
@@ -29,7 +30,7 @@ import { type NavTreeContextValue } from './types';
 export const NODE_TYPE = 'dxos/app-graph/node';
 
 const renderItemEnd = ({ node, open }: { node: Node.Node; open: boolean }) => (
-  <Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
+  <Surface.Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
 );
 
 const getChildrenFilter = (node: Node.Node): node is Node.Node =>
@@ -141,7 +142,7 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
 
     const handleTabChange = useCallback(
       (node: NavTreeItemGraphNode) => {
-        invokeSync(Common.LayoutOperation.UpdateSidebar, {
+        invokeSync(LayoutOperation.UpdateSidebar, {
           state:
             node.id === tab
               ? navigationSidebarState === 'expanded'
@@ -152,13 +153,13 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
               : 'expanded',
         });
 
-        invokeSync(Common.LayoutOperation.SwitchWorkspace, { subject: node.id });
+        invokeSync(LayoutOperation.SwitchWorkspace, { subject: node.id });
 
         // Open the first item if the workspace is empty.
         if (layout.active.length === 0) {
           const [item] = getItems(graph, node).filter((node) => !Node.isActionLike(node));
           if (item && item.data) {
-            invokeSync(Common.LayoutOperation.Open, { subject: [item.id] });
+            invokeSync(LayoutOperation.Open, { subject: [item.id] });
           }
         }
       },
@@ -196,11 +197,11 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
 
         const current = getItem(path).current;
         if (!current) {
-          invokeSync(Common.LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
+          invokeSync(LayoutOperation.Open, { subject: [node.id], key: node.properties.key });
         } else if (option) {
-          invokeSync(Common.LayoutOperation.Close, { subject: [node.id] });
+          invokeSync(LayoutOperation.Close, { subject: [node.id] });
         } else {
-          void invokePromise(Common.LayoutOperation.ScrollIntoView, { subject: node.id });
+          void invokePromise(LayoutOperation.ScrollIntoView, { subject: node.id });
         }
 
         const defaultAction = Graph.getActions(graph, node.id).find(
@@ -211,13 +212,13 @@ export const NavTreeContainer$ = forwardRef<HTMLDivElement, NavTreeContainerProp
         }
 
         if (!isLg) {
-          invokeSync(Common.LayoutOperation.UpdateSidebar, { state: 'closed' });
+          invokeSync(LayoutOperation.UpdateSidebar, { state: 'closed' });
         }
       },
       [graph, invokeSync, invokePromise, getItem, isLg, runAction],
     );
 
-    const handleBack = useCallback(() => invokeSync(Common.LayoutOperation.RevertWorkspace), [invokeSync]);
+    const handleBack = useCallback(() => invokeSync(LayoutOperation.RevertWorkspace), [invokeSync]);
 
     // TODO(wittjosiah): Factor out hook.
     useEffect(() => {

package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx

@@ -52,7 +52,7 @@ const meta = {
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       plugins: [...corePlugins(), RuntimePlugin()],
     }),

package/src/components/Sidebar/L0Menu.tsx

@@ -322,7 +322,7 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
                   role='none'
                   className={mx(
                     l0ItemContent,
-                    'is-[--rail-action] bs-[--rail-action] group-hover/l0item:bg-hoverSurface',
+                    'bs-[--rail-action] is-[--rail-action] group-hover/l0item:bg-hoverSurface',
                   )}
                 >
                   <Icon icon='ph--list--regular' size={5} />
@@ -334,7 +334,7 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
       </MenuProvider>
 
       {/* Space list. */}
-      <ScrollArea.Root>
+      <ScrollArea.Root thin orientation='vertical'>
         <ScrollArea.Viewport>
           <div
             role='none'
@@ -354,9 +354,6 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
               />
             ))}
           </div>
-          <ScrollArea.Scrollbar orientation='vertical'>
-            <ScrollArea.Thumb />
-          </ScrollArea.Scrollbar>
         </ScrollArea.Viewport>
       </ScrollArea.Root>