@dxos/plugin-deck 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/capabilities/toolkit/toolkit.ts

@@ -7,8 +7,9 @@ import * as Toolkit from '@effect/ai/Toolkit';
 import * as Effect from 'effect/Effect';
 import * as Schema from 'effect/Schema';
 
-import { Capability, type CapabilityManager, Common } from '@dxos/app-framework';
-import { GenericToolkit } from '@dxos/assistant';
+import { GenericToolkit } from '@dxos/ai';
+import { Capabilities, Capability, type CapabilityManager } from '@dxos/app-framework';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
 import { ArtifactId } from '@dxos/assistant';
 import { type SpaceId } from '@dxos/keys';
 import { trim } from '@dxos/util';
@@ -35,7 +36,7 @@ export namespace DeckToolkit {
     Toolkit$.toLayer({
       'open-item': ({ id }) =>
         Effect.gen(function* () {
-          const registry = capabilityManager.get(Common.Capability.AtomRegistry);
+          const registry = capabilityManager.get(Capabilities.AtomRegistry);
           const stateAtom = capabilityManager.get(DeckCapabilities.State);
           const state = registry.get(stateAtom);
           const dxn = ArtifactId.toDXN(id, state.activeDeck as SpaceId).asEchoDXN();
@@ -45,8 +46,8 @@ export namespace DeckToolkit {
           }
 
           // TODO(wittjosiah): Get capabilities via layers.
-          const { invoke } = capabilityManager.get(Common.Capability.OperationInvoker);
-          yield* invoke(Common.LayoutOperation.Open, { subject: [`${dxn.spaceId!}:${dxn.echoId}`] });
+          const { invoke } = capabilityManager.get(Capabilities.OperationInvoker);
+          yield* invoke(LayoutOperation.Open, { subject: [`${dxn.spaceId!}:${dxn.echoId}`] });
         }).pipe(Effect.orDie),
     });
 }
@@ -56,7 +57,7 @@ export default Capability.makeModule(
     const capabilityManager = yield* Capability.Service;
 
     return Capability.contributes(
-      Common.Capability.Toolkit,
+      AppCapabilities.Toolkit,
       GenericToolkit.make(DeckToolkit.Toolkit, DeckToolkit.createLayer(capabilityManager)),
     );
   }),

package/src/capabilities/tools/tools.ts

@@ -60,7 +60,6 @@ export default Capability.makeModule(() =>
 
           if (part === 'deck') {
             const { error } = await invokePromise(DeckOperation.ChangeCompanion, {
-              primary: pivotId,
               companion: id,
             });
             if (error) {

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

@@ -4,16 +4,17 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { LayoutOperation, fromUrlPath, getWorkspaceFromPath, toUrlPath } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
+import { Node } from '@dxos/plugin-graph';
 
 import { DeckCapabilities, type DeckStateProps, defaultDeck } from '../../types';
 
-// TODO(wittjosiah): Cleanup the url handling. May justify introducing routing capabilities.
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    const { invokeSync } = yield* Capability.get(Common.Capability.OperationInvoker);
-    const registry = yield* Capability.get(Common.Capability.AtomRegistry);
+    const { invokeSync } = yield* Capability.get(Capabilities.OperationInvoker);
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
     const stateAtom = yield* Capability.get(DeckCapabilities.State);
 
     // Helper to get state.
@@ -47,16 +48,18 @@ export default Capability.makeModule(
         return;
       }
 
-      const [_, nextDeck, nextSolo] = pathname.split('/');
-      if (nextDeck && nextDeck !== state.activeDeck) {
-        invokeSync(Common.LayoutOperation.SwitchWorkspace, { subject: nextDeck });
+      const qualifiedId = fromUrlPath(pathname);
+      const workspace = getWorkspaceFromPath(qualifiedId);
+      if (workspace !== Node.RootId && workspace !== state.activeDeck) {
+        invokeSync(LayoutOperation.SwitchWorkspace, { subject: workspace });
       }
 
       const deck = getDeck();
-      if (nextSolo && nextSolo !== deck.solo) {
-        invokeSync(Common.LayoutOperation.SetLayoutMode, { subject: nextSolo, mode: 'solo' });
-      } else if (!nextSolo && deck.solo) {
-        invokeSync(Common.LayoutOperation.SetLayoutMode, { mode: 'deck' });
+      const activeId = qualifiedId !== workspace ? qualifiedId : undefined;
+      if (activeId && activeId !== deck.solo) {
+        invokeSync(LayoutOperation.SetLayoutMode, { subject: activeId, mode: 'solo' });
+      } else if (!activeId && deck.solo) {
+        invokeSync(LayoutOperation.SetLayoutMode, { mode: 'deck' });
       }
     };
 
@@ -77,7 +80,7 @@ export default Capability.makeModule(
         lastSolo = solo;
         lastActiveDeck = activeDeck;
 
-        const path = solo ? `/${activeDeck}/${solo}` : `/${activeDeck}`;
+        const path = solo ? toUrlPath(solo) : toUrlPath(activeDeck);
         if (window.location.pathname !== path) {
           // TODO(thure): In some browsers, this only preserves the most recent state change, even though this is not `history.replace`…
           history.pushState(null, '', `${path}${window.location.search}`);
@@ -85,7 +88,7 @@ export default Capability.makeModule(
       }
     });
 
-    return Capability.contributes(Common.Capability.Null, null, () =>
+    return Capability.contributes(Capabilities.Null, null, () =>
       Effect.sync(() => {
         window.removeEventListener('popstate', handleNavigation);
         unsubscribe();

package/src/components/DeckLayout/ActiveNode.tsx

@@ -4,7 +4,8 @@
 
 import React from 'react';
 
-import { Surface, useAppGraph } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
 import { useAttended } from '@dxos/react-ui-attention';
 
@@ -21,7 +22,7 @@ export const ActiveNode = () => {
     <div role='none' className='sr-only'>
       {/* TODO(wittjosiah): Weird that this is a surface, feel like it's not really render logic.
             Probably this lives in React-land currently in order to access translations? */}
-      <Surface role='document-title' data={{ subject: activeNode }} limit={1} />
+      <Surface.Surface role='document-title' data={{ subject: activeNode }} limit={1} />
     </div>
   );
 };

package/src/components/DeckLayout/Banner.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx, osTranslations } from '@dxos/ui-theme';
 
@@ -16,24 +16,24 @@ export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'top
   return (
     <header
       className={mx(
-        'flex items-stretch relative plb-1 pis-1 pie-2',
+        'flex items-stretch relative py-1 ps-1 pe-2',
         variant === 'topbar' &&
-          'fixed inset-inline-0 block-start-[env(safe-area-inset-top)] bs-[--rail-size] border-be border-separator',
+          'fixed inset-x-0 top-[env(safe-area-inset-top)] h-(--dx-rail-size) border-b border-separator',
         classNames,
       )}
     >
       {variant === 'sidebar' ? <CloseSidebarButton /> : <ToggleSidebarButton />}
-      <span className='self-center grow mis-1'>{t('current app name', { ns: osTranslations })}</span>
+      <span className='self-center grow ms-1'>{t('current app name', { ns: osTranslations })}</span>
       {variant === 'topbar' && (
         <div role='none' className='absolute inset-0 pointer-events-none'>
-          <div role='none' className='grid bs-full pointer-fine:p-1 max-is-md mli-auto pointer-events-auto'>
-            <Surface role='search-input' limit={1} />
+          <div role='none' className='grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto'>
+            <Surface.Surface role='search-input' limit={1} />
           </div>
         </div>
       )}
       <span role='none' className='grow' />
-      <Surface role='header-end' limit={1} />
-      <Surface role='notch-start' limit={1} />
+      <Surface.Surface role='header-end' limit={1} />
+      <Surface.Surface role='notch-start' limit={1} />
     </header>
   );
 };

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 
 import { useBreakpoints, useDeckState } from '../../hooks';
 import { getMode } from '../../types';
@@ -20,10 +20,10 @@ export const ContentEmpty = () => {
   return (
     <div
       role='none'
-      className='grid place-items-center p-8 relative bg-deckSurface'
+      className='grid place-items-center p-8 relative bg-deck-surface'
       data-testid='layoutPlugin.firstRunMessage'
     >
-      <Surface role='keyshortcuts' />
+      <Surface.Surface role='keyshortcuts' />
       {!topbar && <ToggleSidebarButton variant='default' classNames={fixedSidebarToggleStyles} />}
     </div>
   );

package/src/components/DeckLayout/DeckLayout.stories.tsx

@@ -5,10 +5,11 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Capability, Common, Plugin } from '@dxos/app-framework';
+import { Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 import { corePlugins } from '@dxos/plugin-testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { DeckState, LayoutOperationResolver } from '../../capabilities';
 import { meta as pluginMeta } from '../../meta';
@@ -19,21 +20,22 @@ import { DeckLayout } from './DeckLayout';
 const TestPlugin = Plugin.define(pluginMeta).pipe(
   Plugin.addModule({
     id: Capability.getModuleTag(DeckState),
-    activatesOn: Common.ActivationEvent.AppGraphReady,
+    activatesOn: AppActivationEvents.AppGraphReady,
     activate: () => DeckState(),
   }),
-  Common.Plugin.addOperationResolverModule({
+  AppPlugin.addOperationResolverModule({
     activate: LayoutOperationResolver,
   }),
   Plugin.make,
 );
 
 const meta = {
-  title: 'plugins/plugin-deck/DeckLayout',
+  title: 'plugins/plugin-deck/components/DeckLayout',
   component: DeckLayout,
   render: (args) => <DeckLayout {...args} />,
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [...corePlugins(), TestPlugin()],
     }),

package/src/components/DeckLayout/DeckMain.tsx

@@ -4,10 +4,10 @@
 
 import React, { Fragment, type UIEvent, useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useAtomCapability, useOperationInvoker, usePluginManager } from '@dxos/app-framework/react';
+import { useAtomCapability, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { Main, type MainProps, useMediaQuery, useOnTransition } from '@dxos/react-ui';
+import { Main, type MainContentProps, useMediaQuery, useOnTransition } from '@dxos/react-ui';
 import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from '@dxos/react-ui-stack';
 import { mainPaddingTransitions, mx } from '@dxos/ui-theme';
 
@@ -27,7 +27,8 @@ export const DeckMain = () => {
   const settings = useAtomCapability(DeckCapabilities.Settings);
   const { state, deck, updateState } = useDeckState();
   const { sidebarState, complementarySidebarState, complementarySidebarPanel } = state;
-  const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
+  const { active, companionOpen, companionVariant, fullscreen, solo, plankSizing } = deck;
+  const effectiveCompanionVariant = companionOpen ? companionVariant : undefined;
   const layoutMode = getMode(deck);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
@@ -61,9 +62,9 @@ export const DeckMain = () => {
       const attended = attention.getCurrent();
 
       shouldRevert.current = true;
-      invokeSync(Common.LayoutOperation.SetLayoutMode, { subject: attended[0], mode: 'solo' });
+      invokeSync(LayoutOperation.SetLayoutMode, { subject: attended[0], mode: 'solo' });
     } else if (isNotMobile && layoutMode === 'solo' && shouldRevert.current) {
-      invokeSync(Common.LayoutOperation.SetLayoutMode, { revert: true });
+      invokeSync(LayoutOperation.SetLayoutMode, { revert: true });
     }
     // NOTE: Using `layoutMode` instead of `deck` to avoid infinite loops caused by object reference changes.
   }, [isNotMobile, layoutMode, invokeSync]);
@@ -72,7 +73,7 @@ export const DeckMain = () => {
   // TODO(thure): Applying this as an effect should be avoided over emitting the operation only when the setting changes.
   useEffect(() => {
     if (!settings?.enableDeck && layoutMode === 'deck') {
-      invokeSync(Common.LayoutOperation.SetLayoutMode, { subject: active[0], mode: 'solo' });
+      invokeSync(LayoutOperation.SetLayoutMode, { subject: active[0], mode: 'solo' });
     }
   }, [settings?.enableDeck, invokeSync, active, layoutMode]);
 
@@ -118,9 +119,9 @@ export const DeckMain = () => {
 
   const mainPosition = useMemo(
     () => [
-      'grid !block-start-[env(safe-area-inset-top)]',
-      topbar && '!block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-      hoistStatusbar && 'lg:block-end-[--statusbar-size]',
+      'grid !top-[env(safe-area-inset-top)]',
+      topbar && '!top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
+      hoistStatusbar && 'lg:bottom-(--dx-statusbar-size)',
     ],
     [topbar, hoistStatusbar],
   );
@@ -129,12 +130,12 @@ export const DeckMain = () => {
     return active.reduce(
       (acc: { order: Record<string, number>; itemsCount: number }, entryId) => {
         acc.order[entryId] = acc.itemsCount + 1;
-        acc.itemsCount += activeCompanions?.[entryId] ? 3 : 2;
+        acc.itemsCount += companionOpen ? 3 : 2;
         return acc;
       },
       { order: {}, itemsCount: 0 },
     );
-  }, [active, activeCompanions]);
+  }, [active, companionOpen]);
 
   const handleNavigationSidebarStateChange = useCallback(
     (next: typeof sidebarState) => {
@@ -182,27 +183,27 @@ export const DeckMain = () => {
           style={
             {
               '--main-spacing': settings?.encapsulatedPlanks ? '0.75rem' : '0',
-              '--dx-main-sidebarWidth':
+              '--dx-main-sidebar-width':
                 sidebarState === 'expanded'
-                  ? 'var(--nav-sidebar-size)'
+                  ? 'var(--dx-nav-sidebar-size)'
                   : sidebarState === 'collapsed'
-                    ? 'var(--l0-size)'
+                    ? 'var(--dx-l0-size)'
                     : '0',
-              '--dx-main-complementaryWidth':
+              '--dx-main-complementary-width':
                 complementarySidebarState === 'expanded'
-                  ? 'var(--complementary-sidebar-size)'
+                  ? 'var(--dx-complementary-sidebar-size)'
                   : complementarySidebarState === 'collapsed'
-                    ? 'var(--rail-size)'
+                    ? 'var(--dx-rail-size)'
                     : '0',
-              '--dx-main-contentFirstWidth': `${plankSizing[active[0] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
-              '--dx-main-contentLastWidth': `${plankSizing[active[(active.length ?? 1) - 1] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
-            } as MainProps['style']
+              '--dx-main-content-first-width': `${plankSizing[active[0] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+              '--dx-main-content-last-width': `${plankSizing[active[(active.length ?? 1) - 1] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+            } as MainContentProps['style']
           }
         >
           {/* Deck mode. */}
           <div
             role='none'
-            className={!solo ? 'relative bg-deckSurface overflow-hidden' : 'sr-only'}
+            className={!solo ? 'relative bg-deck-surface overflow-hidden' : 'sr-only'}
             {...(solo && { inert: true })}
           >
             {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
@@ -215,7 +216,7 @@ export const DeckMain = () => {
               size='contain'
               itemsCount={itemsCount - 1}
               classNames={[
-                'absolute inset-block-[--main-spacing] -inset-inline-px bs-[calc(100%-2*var(--main-spacing))]',
+                'absolute inset-y-(--main-spacing) -inset-w-px h-[calc(100%-2*var(--main-spacing))]',
                 mainPaddingTransitions,
               ]}
               style={padding}
@@ -226,7 +227,7 @@ export const DeckMain = () => {
                   <PlankSeparator order={order[entryId] - 1} encapsulate={!!settings?.enableDeck} />
                   <Plank
                     id={entryId}
-                    companionId={activeCompanions?.[entryId]}
+                    companionVariant={effectiveCompanionVariant}
                     part='deck'
                     order={order[entryId]}
                     active={active}
@@ -241,7 +242,7 @@ export const DeckMain = () => {
           {/* Solo mode. */}
           <div
             role='none'
-            className={solo ? 'relative overflow-hidden bg-deckSurface' : 'sr-only'}
+            className={solo ? 'relative overflow-hidden bg-deck-surface' : 'sr-only'}
             {...(!solo && { inert: true })}
           >
             {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
@@ -257,7 +258,7 @@ export const DeckMain = () => {
             >
               <Plank
                 id={solo}
-                companionId={solo ? activeCompanions?.[solo] : undefined}
+                companionVariant={effectiveCompanionVariant}
                 part='solo'
                 layoutMode={layoutMode}
                 settings={settings}
@@ -280,7 +281,7 @@ const PlankSeparator = ({ order, encapsulate }: { order: number; encapsulate?: b
   order > 0 ? (
     <span
       role='separator'
-      className={mx('row-span-2 bg-deckSurface', encapsulate ? 'is-0' : 'is-4')}
+      className={mx('row-span-2 bg-deck-surface', encapsulate ? 'w-0' : 'w-4')}
       style={{ gridColumn: order }}
     />
   ) : null;

package/src/components/DeckLayout/Dialog.tsx

@@ -4,11 +4,11 @@
 
 import React, { useCallback } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
 
 import { useDeckState } from '../../hooks';
-import { PlankContentError } from '../Plank';
+import { PlankErrorFallback } from '../Plank';
 
 export const Dialog = () => {
   const { state, updateEphemeral } = useDeckState();
@@ -28,10 +28,16 @@ export const Dialog = () => {
     <Root modal={dialogBlockAlign !== 'end'} open={dialogOpen} onOpenChange={handleOpenChange}>
       {dialogBlockAlign === 'end' ? (
         // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
-        <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} placeholder={<div />} />
+        <Surface.Surface
+          role='dialog'
+          data={dialogContent}
+          limit={1}
+          fallback={PlankErrorFallback}
+          placeholder={<div />}
+        />
       ) : (
         <Overlay blockAlign={dialogBlockAlign} classNames={dialogOverlayClasses} style={dialogOverlayStyle}>
-          <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} />
+          <Surface.Surface role='dialog' data={dialogContent} limit={1} fallback={PlankErrorFallback} />
         </Overlay>
       )}
     </Root>

package/src/components/DeckLayout/Fallback.tsx

@@ -5,7 +5,6 @@
 import React from 'react';
 
 import { useTranslation } from '@dxos/react-ui';
-import { errorText, mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
@@ -13,13 +12,10 @@ export const Fallback = () => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <div role='none' className='min-bs-screen is-full flex items-center justify-center p-8'>
+    <div role='none' className='min-h-screen w-full flex items-center justify-center p-8'>
       <p
         role='alert'
-        className={mx(
-          errorText,
-          'border border-roseFill rounded-md flex items-center justify-center p-8 font-normal text-lg',
-        )}
+        className='flex items-center justify-center p-8 font-normal text-lg text-error-text border border-rose-fill rounded-md'
       >
         {t('plugin error message')}
       </p>

package/src/components/DeckLayout/Popover.tsx

@@ -5,9 +5,11 @@
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useObjectNavigate } from '@dxos/app-toolkit/ui';
 import { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Card } from '@dxos/react-ui';
 
 import { useDeckState } from '../../hooks';
 import { meta } from '../../meta';
@@ -55,10 +57,16 @@ export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
   );
 };
 
+// Extracts the subject from popover content if it has one, otherwise returns the content as-is.
+const getPopoverSubject = (content: unknown): unknown =>
+  content && typeof content === 'object' && 'subject' in content ? (content as { subject: unknown }).subject : content;
+
 export const PopoverContent = () => {
   const { t } = useTranslation(meta.id);
   const { state, updateEphemeral } = useDeckState();
   const { setOpen } = useDeckPopoverContext('PopoverContent');
+  const { invokeSync } = useOperationInvoker();
+  const handleNavigate = useObjectNavigate(getPopoverSubject(state.popoverContent));
 
   const handleClose = useCallback(() => {
     setOpen(false);
@@ -96,18 +104,36 @@ export const PopoverContent = () => {
         onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
+          {/* TODO(burdon): Set/disable column context. */}
+          {state.popoverKind === 'base' && <Surface.Surface role='popover' data={state.popoverContent} limit={1} />}
           {state.popoverKind === 'card' && (
-            <Card.Root>
+            <Card.Root border={false} classNames='dx-card-popover'>
               <Card.Toolbar>
                 {/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
-                <span />
-                {state.popoverTitle ? <Card.Title>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
-                <Card.Close onClick={handleClose} />
+                {state.popoverContentRef ? (
+                  <Card.ToolbarIconButton
+                    icon='ph--arrow-square-out--regular'
+                    iconOnly
+                    label={t('open item label')}
+                    onClick={() => {
+                      invokeSync(LayoutOperation.Open, {
+                        subject: [state.popoverContentRef!],
+                      });
+                    }}
+                  />
+                ) : (
+                  <div />
+                )}
+                {state.popoverTitle ? (
+                  <Card.Title onClick={handleNavigate}>{toLocalizedString(state.popoverTitle, t)}</Card.Title>
+                ) : (
+                  <span />
+                )}
+                <Card.CloseIconButton onClick={handleClose} />
               </Card.Toolbar>
-              <Surface role='card--content' data={state.popoverContent} limit={1} />
+              <Surface.Surface role='card--content' data={state.popoverContent} limit={1} />
             </Card.Root>
           )}
-          {state.popoverKind === 'base' && <Surface role='popover' data={state.popoverContent} limit={1} />}
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>

package/src/components/DeckLayout/StatusBar.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { useLandmarkMover } from '@dxos/react-ui';
 
 export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
@@ -12,11 +12,11 @@ export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
   return (
     <div
       role='contentinfo'
-      className='fixed block-end-0 inset-inline-0 bs-[--statusbar-size] border-bs border-separator z-[2] flex text-description'
+      className='fixed bottom-0 inset-x-0 h-(--dx-statusbar-size) border-y border-separator z-[2] flex text-description'
       {...mover}
     >
-      {showHints && <Surface role='hints' limit={1} />}
-      <Surface role='status-bar' limit={1} />
+      {showHints && <Surface.Surface role='hints' limit={1} />}
+      <Surface.Surface role='status-bar' limit={1} />
     </div>
   );
 };

package/src/components/DeckLayout/Toast.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type Common } from '@dxos/app-framework';
+import { type LayoutOperation } from '@dxos/app-toolkit';
 import {
   Button,
   Icon,
@@ -28,7 +28,7 @@ export const Toast = ({
   closeLabel,
   onAction,
   onOpenChange,
-}: Common.LayoutOperation.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
+}: LayoutOperation.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
   const { t } = useTranslation(meta.id);
 
   return (
@@ -61,7 +61,7 @@ export const Toast = ({
 };
 
 export type ToasterProps = {
-  toasts?: Common.LayoutOperation.Toast[];
+  toasts?: LayoutOperation.Toast[];
   onDismissToast?: (id: string) => void;
 };
 

package/src/components/Plank/Plank.stories.tsx

@@ -5,10 +5,11 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Capability, Common, Plugin } from '@dxos/app-framework';
+import { Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 import { corePlugins } from '@dxos/plugin-testing';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Stack } from '@dxos/react-ui-stack';
 
 import { DeckState } from '../../capabilities';
@@ -20,14 +21,14 @@ import { Plank } from './Plank';
 const TestPlugin = Plugin.define(pluginMeta).pipe(
   Plugin.addModule({
     id: Capability.getModuleTag(DeckState),
-    activatesOn: Common.ActivationEvent.AppGraphReady,
+    activatesOn: AppActivationEvents.AppGraphReady,
     activate: () => DeckState(),
   }),
   Plugin.make,
 );
 
 const meta = {
-  title: 'plugins/plugin-deck/Plank',
+  title: 'plugins/plugin-deck/components/Plank',
   component: Plank,
   render: (args) => {
     return (
@@ -37,7 +38,8 @@ const meta = {
     );
   },
   decorators: [
-    withTheme,
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [...corePlugins(), TestPlugin()],
     }),