@dxos/plugin-simple-layout 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

package/src/components/MobileLayout/MobileLayout.stories.tsx

@@ -66,13 +66,13 @@ const StoryPanel = ({ children, label }: PropsWithChildren<{ label: string }>) =
       </Panel.Toolbar>
       <Panel.Content asChild>
         <Column.Root gutter='xs' classNames='py-form-chrome'>
-          <Column.Content>
+          <Column.Center>
             <Flex column>
               <Input.Root>
                 <Input.TextInput placeholder={label} />
               </Input.Root>
             </Flex>
-          </Column.Content>
+          </Column.Center>
         </Column.Root>
       </Panel.Content>
     </Panel.Root>
@@ -80,33 +80,33 @@ const StoryPanel = ({ children, label }: PropsWithChildren<{ label: string }>) =
 };
 
 const DefaultStory = () => {
-  const [splitterMode, setSplitterMode] = useState<SplitterMode>('upper');
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('top');
   const [keyboardOpen, setKeyboardOpen] = useState(false);
 
   useEffect(() => {
-    setSplitterMode(splitterMode === 'both' ? 'lower' : splitterMode);
+    setSplitterMode(splitterMode === 'split' ? 'bottom' : splitterMode);
   }, [keyboardOpen]);
 
   return (
     <WithKeyboard>
       <MobileLayout.Root onKeyboardOpenChange={setKeyboardOpen}>
-        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
+        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'top' }}>
           <Splitter.Root mode={splitterMode} ratio={0.5}>
-            <Splitter.Panel position='upper'>
+            <Splitter.Panel position='top'>
               <StoryPanel label='Main'>
-                {splitterMode === 'upper' && (
-                  <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('both')} />
+                {splitterMode === 'top' && (
+                  <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('split')} />
                 )}
               </StoryPanel>
             </Splitter.Panel>
-            <Splitter.Panel position='lower'>
+            <Splitter.Panel position='bottom'>
               <StoryPanel label='Drawer'>
                 <Toolbar.IconButton
-                  icon={splitterMode === 'lower' ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
-                  label={splitterMode === 'lower' ? 'Collapse' : 'Expand'}
-                  onClick={() => setSplitterMode((splitterMode) => (splitterMode === 'both' ? 'lower' : 'both'))}
+                  icon={splitterMode === 'bottom' ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
+                  label={splitterMode === 'bottom' ? 'Collapse' : 'Expand'}
+                  onClick={() => setSplitterMode((splitterMode) => (splitterMode === 'split' ? 'bottom' : 'split'))}
                 />
-                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('upper')} />
+                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('top')} />
               </StoryPanel>
             </Splitter.Panel>
           </Splitter.Root>

package/src/components/MobileLayout/MobileLayout.tsx

@@ -56,7 +56,6 @@ const MobileLayoutRoot = forwardRef<HTMLDivElement, MobileLayoutRootProps>(
       <MobileLayoutProvider keyboardOpen={keyboardOpen}>
         <div
           {...props}
-          role='none'
           style={{
             height: 'calc(100vh - var(--kb-height, 0px))',
             transition: `height ${keyboardOpen ? 0 : transition}ms ease-out`,
@@ -95,7 +94,6 @@ const MobileLayoutPanel = forwardRef<HTMLDivElement, MobileLayoutPanelProps>(
     return (
       <div
         {...props}
-        role='none'
         style={{
           paddingTop: safe?.top ? 'env(safe-area-inset-top)' : undefined,
           paddingBottom: safe?.bottom ? `calc((1 - var(--kb-open, 0)) * env(safe-area-inset-bottom))` : undefined,

package/src/components/NavBranch/NavBranch.tsx

@@ -14,7 +14,8 @@ import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
 import { SearchPanel, useSearchListItem, useSearchListResults } from '@dxos/react-ui-search';
 import { mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
+
 import { useExpandPath } from '../hooks';
 
 export type NavBranchProps = {
@@ -34,12 +35,8 @@ export const NavBranch = ({ id }: NavBranchProps) => {
 
   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' && node.properties.disposition !== 'hidden',
-      ),
+    () => children.filter((node) => node.properties.disposition !== 'hidden'),
     [children],
   );
 
@@ -105,7 +102,7 @@ const NavBranchTile: MosaicStackTileComponent<Node.Node> = (props) => {
       fullWidth
       tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
       data-selected={isSelected}
-      classNames={mx('dx-focus-ring cursor-pointer', isSelected && 'bg-hover-overlay')}
+      classNames={mx('dx-focus-ring cursor-pointer', isSelected && 'bg-selected-surface')}
       onClick={handleSelect}
     >
       <Card.Toolbar>

package/src/components/Popover/Popover.tsx

@@ -6,12 +6,12 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui';
 
-import { useSimpleLayoutState } from '../../hooks';
-import { meta } from '../../meta';
+import { useSimpleLayoutState } from '#hooks';
+import { meta } from '#meta';
 
 const DEBOUNCE_DELAY = 40;
 
@@ -84,6 +84,7 @@ export const PopoverContent = () => {
     [handleClose],
   );
 
+  /* TODO(thure): Make this a constant and document it. */
   const collisionBoundaries: HTMLElement[] = useMemo(() => {
     const closest = state.popoverAnchor?.closest('[data-popover-collision-boundary]') as HTMLElement | null | undefined;
     return closest ? [closest] : [];
@@ -100,7 +101,9 @@ export const PopoverContent = () => {
         onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
-          {state.popoverKind === 'base' && <Surface.Surface role='popover' data={state.popoverContent} limit={1} />}
+          {state.popoverKind === 'base' && state.popoverContent && 'component' in state.popoverContent && (
+            <Surface.Surface type={AppSurface.Popover} data={state.popoverContent} limit={1} />
+          )}
           {state.popoverKind === 'card' && (
             <Card.Root border={false} classNames='dx-card-popover'>
               <Card.Toolbar>
@@ -109,7 +112,9 @@ export const PopoverContent = () => {
                 {state.popoverTitle ? <Card.Title>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
                 <Card.CloseIconButton onClick={handleClose} />
               </Card.Toolbar>
-              <Surface.Surface role='card--content' data={state.popoverContent} limit={1} />
+              {state.popoverContent && 'subject' in state.popoverContent && (
+                <Surface.Surface type={AppSurface.Card} data={state.popoverContent} limit={1} />
+              )}
             </Card.Root>
           )}
         </Popover.Viewport>

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

@@ -7,13 +7,13 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 import { type Mock, expect, fn, screen, userEvent, within } from 'storybook/test';
 
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ActionGraphProps, createMenuAction } from '@dxos/react-ui-menu';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
-import { translations } from '../../translations';
-import { MobileLayout } from '../MobileLayout';
+import { translations } from '#translations';
 
+import { MobileLayout } from '../MobileLayout';
 import { AppBar, type AppBarProps } from './AppBar';
 
 const buildEmptyActions = (): ActionGraphProps => ({ nodes: [], edges: [] });
@@ -21,15 +21,15 @@ const buildEmptyActions = (): ActionGraphProps => ({ nodes: [], edges: [] });
 const buildDefaultActions = (): ActionGraphProps => {
   const result: ActionGraphProps = { nodes: [], edges: [] };
   const actions = [
-    createMenuAction('action-edit', () => console.log('Edit'), {
+    createMenuAction('action-edit.menu', () => console.log('Edit'), {
       icon: 'ph--pencil--regular',
       label: 'Edit',
     }),
-    createMenuAction('action-share', () => console.log('Share'), {
+    createMenuAction('action-share.menu', () => console.log('Share'), {
       icon: 'ph--share--regular',
       label: 'Share',
     }),
-    createMenuAction('action-delete', () => console.log('Delete'), {
+    createMenuAction('action-delete.menu', () => console.log('Delete'), {
       icon: 'ph--trash--regular',
       label: 'Delete',
     }),
@@ -104,7 +104,7 @@ export const Default: Story = {
     const editAction = await screen.findByRole('menuitem', { name: /edit/i });
     await userEvent.click(editAction);
     await expect(args.onAction).toHaveBeenCalledTimes(1);
-    await expect((args.onAction as Mock).mock.calls[0][0]).toHaveProperty('id', 'action-edit');
+    await expect((args.onAction as Mock).mock.calls[0][0]).toHaveProperty('id', 'action-edit.menu');
   },
 };
 

package/src/components/SimpleLayout/AppBar.tsx

@@ -5,11 +5,12 @@
 import { type Atom, useAtomValue } from '@effect-atom/atom-react';
 import React, { Fragment } from 'react';
 
-import { IconButton, Popover, Toolbar, useTranslation } from '@dxos/react-ui';
+import { DensityProvider, IconButton, Popover, Toolbar, useTranslation } from '@dxos/react-ui';
 import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
 import { composable, composableProps, osTranslations } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
+
 import { useMobileLayout } from '../MobileLayout';
 
 const APP_BAR_NAME = 'SimpleLayout.AppBar';
@@ -41,51 +42,53 @@ export const AppBar = composable<HTMLDivElement, AppBarProps>(
     const { keyboardOpen } = useMobileLayout(APP_BAR_NAME);
 
     // Fall back to app name if no title provided.
-    const displayTitle = title ?? t('current app name', { ns: osTranslations });
+    const displayTitle = title ?? t('current-app.name', { ns: osTranslations });
 
     // Wrap the menu trigger with Popover.Anchor when the popoverAnchorId is set.
     const AnchorRoot = popoverAnchorId ? Popover.Anchor : Fragment;
 
     return (
-      <Toolbar.Root
-        {...composableProps(props, {
-          role: 'banner',
-          classNames: 'grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center dx-density-fine',
-        })}
-        ref={forwardedRef}
-      >
-        {keyboardOpen ? (
-          <IconButton variant='ghost' icon='ph--x--regular' iconOnly label={t('done label')} />
-        ) : showBackButton ? (
-          <IconButton
-            variant='ghost'
-            icon='ph--caret-left--regular'
-            iconOnly
-            label={t('back label')}
-            onClick={onBack}
-          />
-        ) : (
-          <div />
-        )}
-        <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
-        {hasActions ? (
-          <AnchorRoot>
-            <Menu.Root {...menuActions} caller={meta.id} onAction={onAction}>
-              <Menu.Trigger asChild>
-                <IconButton
-                  variant='ghost'
-                  icon='ph--dots-three-vertical--regular'
-                  iconOnly
-                  label={t('actions menu label')}
-                />
-              </Menu.Trigger>
-              <Menu.Content />
-            </Menu.Root>
-          </AnchorRoot>
-        ) : (
-          <span />
-        )}
-      </Toolbar.Root>
+      <DensityProvider density='fine'>
+        <Toolbar.Root
+          {...composableProps(props, {
+            role: 'banner',
+            classNames: 'grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center dx-density-fine',
+          })}
+          ref={forwardedRef}
+        >
+          {keyboardOpen ? (
+            <IconButton variant='ghost' icon='ph--x--regular' iconOnly label={t('done.label')} />
+          ) : showBackButton ? (
+            <IconButton
+              variant='ghost'
+              icon='ph--caret-left--regular'
+              iconOnly
+              label={t('back.label')}
+              onClick={onBack}
+            />
+          ) : (
+            <div />
+          )}
+          <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
+          {hasActions ? (
+            <AnchorRoot>
+              <Menu.Root {...menuActions} caller={meta.id} onAction={onAction}>
+                <Menu.Trigger asChild>
+                  <IconButton
+                    variant='ghost'
+                    icon='ph--dots-three-vertical--regular'
+                    iconOnly
+                    label={t('actions-menu.label')}
+                  />
+                </Menu.Trigger>
+                <Menu.Content />
+              </Menu.Root>
+            </AnchorRoot>
+          ) : (
+            <span />
+          )}
+        </Toolbar.Root>
+      </DensityProvider>
     );
   },
 );

package/src/components/SimpleLayout/Drawer.tsx

@@ -5,13 +5,14 @@
 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 { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { type Node, useNode } from '@dxos/plugin-graph';
 import { ErrorFallback, Panel } from '@dxos/react-ui';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { Menu, useMenuActions } from '@dxos/react-ui-menu';
 
-import { useCompanions, useDrawerActions, useSimpleLayoutState } from '../../hooks';
+import { useCompanions, useDrawerActions, useSimpleLayoutState } from '#hooks';
+
 import { Loading } from '../Loading';
 
 const DRAWER_NAME = 'SimpleLayout.Drawer';
@@ -35,16 +36,17 @@ export const Drawer = () => {
   const parentNode = useNode(graph, activeId);
 
   // Build Surface data for the companion content.
-  const data = useMemo(() => {
-    return (
-      node && {
-        attendableId: companionId,
-        subject: node.data,
-        companionTo: parentNode?.data,
-        properties: node.properties,
-        variant,
-      }
-    );
+  const data = useMemo<AppSurface.ArticleData | undefined>(() => {
+    if (!node || !companionId) {
+      return undefined;
+    }
+    return {
+      attendableId: companionId,
+      subject: node.data,
+      companionTo: parentNode?.data,
+      properties: node.properties,
+      variant,
+    };
   }, [companionId, node, parentNode, variant]);
 
   // Get drawer actions (tabs + toolbar buttons).
@@ -59,7 +61,13 @@ export const Drawer = () => {
         </Menu.Root>
       </Panel.Toolbar>
       <Panel.Content>
-        <Surface.Surface role='article' data={data} limit={1} fallback={ErrorFallback} placeholder={placeholder} />
+        <Surface.Surface
+          type={AppSurface.Article}
+          data={data}
+          limit={1}
+          fallback={ErrorFallback}
+          placeholder={placeholder}
+        />
       </Panel.Content>
     </Panel.Root>
   );
@@ -79,7 +87,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
 
     // Try to find companion matching the preferred variant.
     if (preferredVariant) {
-      const preferred = companions.find((c) => getCompanionVariant(c.id) === preferredVariant);
+      const preferred = companions.find((c) => getLinkedVariant(c.id) === preferredVariant);
       if (preferred) {
         return preferred;
       }
@@ -90,7 +98,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
   }, [companions, preferredVariant]);
 
   const companionId = selectedCompanion?.id;
-  const variant = companionId ? getCompanionVariant(companionId) : undefined;
+  const variant = companionId ? getLinkedVariant(companionId) : undefined;
 
   return { selectedCompanion, companionId, variant };
 };

package/src/components/SimpleLayout/Main.tsx

@@ -5,16 +5,16 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
 import { ErrorFallback, Panel } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 
-import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '../../hooks';
-import { Loading } from '../Loading';
+import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '#hooks';
+
 import { useExpandPath } from '../hooks';
+import { Loading } from '../Loading';
 import { useMobileLayout } from '../MobileLayout';
-
 import { AppBar } from './AppBar';
 import { NavBar } from './NavBar';
 
@@ -59,7 +59,7 @@ export const Main = () => {
       <Panel.Content role='article' className='bg-base-surface'>
         <Surface.Surface
           key={id}
-          role='article'
+          type={AppSurface.Article}
           data={data}
           limit={1}
           fallback={ErrorFallback}

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

@@ -7,11 +7,11 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 import { type Mock, expect, fn, screen, userEvent, within } from 'storybook/test';
 
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { type ActionGraphProps, createGapSeparator, createMenuAction, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
 import { NavBar } from './NavBar';
 

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

@@ -9,19 +9,19 @@ import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppActivationEvents } from '@dxos/app-toolkit';
 import { Collection } from '@dxos/echo';
-import { ClientPlugin } from '@dxos/plugin-client';
-import { SearchPlugin } from '@dxos/plugin-search';
-import { SpacePlugin } from '@dxos/plugin-space';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { SearchPlugin } from '@dxos/plugin-search/testing';
+import { SpacePlugin } from '@dxos/plugin-space/testing';
 import { corePlugins } from '@dxos/plugin-testing';
+import { translations as searchTranslation } from '@dxos/react-ui-search/translations';
 import { withLayout } from '@dxos/react-ui/testing';
-import { translations as searchTranslation } from '@dxos/react-ui-search';
 
-import { ReactRoot, ReactSurface, State } from '../../capabilities';
-import { meta as pluginMeta } from '../../meta';
-import { type SimpleLayoutPluginOptions } from '../../SimpleLayoutPlugin';
-import { translations } from '../../translations';
-import { SimpleLayoutEvents } from '../../types';
+import { ReactRoot, ReactSurface, State } from '#capabilities';
+import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
+import { SimpleLayoutEvents } from '#types';
 
+import { type SimpleLayoutPluginOptions } from '../../SimpleLayoutPlugin';
 import { SimpleLayout } from './SimpleLayout';
 
 const createPluginManager = ({ isPopover }: { isPopover?: boolean }) => {
@@ -45,7 +45,7 @@ const createPluginManager = ({ isPopover }: { isPopover?: boolean }) => {
         Plugin.addModule(({ isPopover = false }) => ({
           id: Capability.getModuleTag(State),
           activatesOn: ActivationEvents.Startup,
-          activatesAfter: [SimpleLayoutEvents.StateReady, AppActivationEvents.LayoutReady],
+          firesAfterActivation: [SimpleLayoutEvents.StateReady, AppActivationEvents.LayoutReady],
           activate: () => State({ initialState: { isPopover } }),
         })),
         Plugin.addModule({

package/src/components/SimpleLayout/SimpleLayout.tsx

@@ -7,43 +7,43 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
 import { Splitter, type SplitterMode } from '@dxos/react-ui';
 import { Mosaic } from '@dxos/react-ui-mosaic';
 
-import { useSimpleLayoutState } from '../../hooks';
+import { useSimpleLayoutState } from '#hooks';
+
 import { DebugOverlay } from '../DebugOverlay';
 import { Dialog } from '../Dialog';
 import { MobileLayout } from '../MobileLayout';
 import { PopoverContent, PopoverRoot } from '../Popover';
-
 import { Drawer } from './Drawer';
 import { Main } from './Main';
 
 export const SimpleLayout = () => {
   const { state } = useSimpleLayoutState();
   const [keyboardOpen, setKeyboardOpen] = useState(false);
-  const [splitterMode, setSplitterMode] = useState<SplitterMode>('upper');
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('top');
 
   const drawerRef = useRef<HTMLDivElement>(null);
 
   // Restore Splitter mode when keyboard closes.
   useLayoutEffect(() => {
     if (!keyboardOpen) {
-      setSplitterMode(state.drawerState === 'closed' ? 'upper' : state.drawerState === 'open' ? 'both' : 'lower');
+      setSplitterMode(state.drawerState === 'closed' ? 'top' : state.drawerState === 'open' ? 'split' : 'bottom');
     }
   }, [state.drawerState, keyboardOpen]);
 
   return (
     <DebugOverlay.Root enabled={false}>
       <PopoverRoot>
-        <Mosaic.Root classNames='dx-container grid relative'>
+        <Mosaic.Root>
           <MobileLayout.Root
-            classNames='bg-toolbar-surface'
+            classNames='dx-container grid relative bg-toolbar-surface'
             onKeyboardOpenChange={(nextKeyboardOpen) => setKeyboardOpen(nextKeyboardOpen)}
           >
-            <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
+            <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'top' }}>
               <Splitter.Root mode={splitterMode} ratio={0.55}>
-                <Splitter.Panel position='upper'>
+                <Splitter.Panel position='top'>
                   <Main />
                 </Splitter.Panel>
-                <Splitter.Panel position='lower' ref={drawerRef}>
+                <Splitter.Panel position='bottom' ref={drawerRef}>
                   <Drawer />
                 </Splitter.Panel>
               </Splitter.Root>

package/src/components/hooks.ts

@@ -4,9 +4,9 @@
 
 import { useEffect } from 'react';
 
-import { expandAttendableId } from '@dxos/react-ui-attention';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Graph } from '@dxos/plugin-graph';
+import { expandAttendableId } from '@dxos/react-ui-attention';
 
 /**
  * Expand graph nodes along the full path from root to the given node ID.

package/src/hooks/actions.ts

@@ -5,12 +5,13 @@
 import { type Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
-import { type AppCapabilities, getCompanionVariant } from '@dxos/app-toolkit';
+import { type AppCapabilities } from '@dxos/app-toolkit';
 import { Node } from '@dxos/plugin-graph';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { type ActionGraphProps } from '@dxos/react-ui-menu';
 import { byPosition } from '@dxos/util';
 
-import { type SimpleLayoutState } from '../types';
+import { SimpleLayoutCapabilities } from '#types';
 
 // TODO(wittjosiah): Factor out to shared location with plugin-deck.
 export const PLANK_COMPANION_TYPE = 'org.dxos.plugin.deck.plank-companion';
@@ -21,7 +22,9 @@ export type CompanionActionsConfig = {
   /** Optional: highlight companion with this variant */
   selectedVariant?: string;
   /** State updater for toggling the drawer. */
-  updateState: (fn: (state: SimpleLayoutState) => SimpleLayoutState) => void;
+  updateState: (
+    fn: (state: SimpleLayoutCapabilities.SimpleLayoutState) => SimpleLayoutCapabilities.SimpleLayoutState,
+  ) => void;
 };
 
 /**
@@ -31,7 +34,7 @@ export type CompanionActionsConfig = {
 // TODO(burdon): Use builder pattern.
 export const createCompanionActions = (
   graph: AppCapabilities.AppGraph['graph'],
-  stateAtom: Atom.Atom<SimpleLayoutState>,
+  stateAtom: Atom.Atom<SimpleLayoutCapabilities.SimpleLayoutState>,
   get: (atom: Atom.Atom<any>) => any,
   config: CompanionActionsConfig,
 ): Pick<ActionGraphProps, 'nodes' | 'edges'> => {
@@ -51,7 +54,7 @@ export const createCompanionActions = (
   const edges: ActionGraphProps['edges'] = [];
 
   companions.forEach((companion: Node.Node) => {
-    const companionVariant = getCompanionVariant(companion.id);
+    const companionVariant = getLinkedVariant(companion.id);
     const companionAction = {
       id: `${idPrefix}-companion-${companion.id}`,
       type: Node.ActionType,

package/src/hooks/useAppBarProps.ts

@@ -3,7 +3,6 @@
 //
 
 import { Atom, useAtomValue } from '@effect-atom/atom-react';
-import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 import { useCallback, useMemo } from 'react';
 
@@ -14,9 +13,9 @@ import { Graph, Node, useActionRunner, useNode } from '@dxos/plugin-graph';
 import { toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type ActionGraphProps } from '@dxos/react-ui-menu';
 
-import { type AppBarProps } from '../components';
-import { meta } from '../meta';
-import { SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+import { type AppBarProps } from '#components';
+import { meta } from '#meta';
+import { SimpleLayoutCapabilities } from '#types';
 
 /**
  * Hook that computes all AppBar props from the app graph.
@@ -24,7 +23,7 @@ import { SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
  */
 export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
   const { t } = useTranslation(meta.id);
-  const stateAtom = useCapability(SimpleLayoutStateCapability);
+  const stateAtom = useCapability(SimpleLayoutCapabilities.State);
   const state = useAtomValue(stateAtom);
   const { graph } = useAppGraph();
   const { invokePromise } = useOperationInvoker();
@@ -55,25 +54,6 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
           relation: 'child',
         }));
 
-        // Add alternate-tree action (e.g. Settings) from the workspace node.
-        const workspaceConnections = state.workspace ? get(graph.connections(state.workspace, 'child')) : [];
-        const alternateTreeNode = workspaceConnections.find(
-          (node: Node.Node) => node.properties.disposition === 'alternate-tree',
-        );
-        if (alternateTreeNode && activeId !== alternateTreeNode.id) {
-          const settingsAction = {
-            id: `appbar-settings-${alternateTreeNode.id}`,
-            type: Node.ActionType,
-            data: () => Effect.promise(() => invokePromise(LayoutOperation.Open, { subject: [alternateTreeNode.id] })),
-            properties: {
-              label: alternateTreeNode.properties.label ?? alternateTreeNode.id,
-              icon: alternateTreeNode.properties.icon ?? 'ph--placeholder--regular',
-            },
-          };
-          nodes.push(settingsAction);
-          edges.push({ source: 'root', target: settingsAction.id, relation: 'child' });
-        }
-
         return { nodes, edges };
       }),
     [graph, stateAtom],