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

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';
 
@@ -27,13 +27,13 @@ export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'top
       {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} />
+            <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';
@@ -23,7 +23,7 @@ export const ContentEmpty = () => {
       className='grid place-items-center p-8 relative bg-deckSurface'
       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,8 +5,9 @@
 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';
 
@@ -19,10 +20,10 @@ 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,
@@ -33,7 +34,7 @@ const meta = {
   component: DeckLayout,
   render: (args) => <DeckLayout {...args} />,
   decorators: [
-    withTheme,
+    withTheme(),
     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';
 
@@ -61,9 +61,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 +72,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]);
 
@@ -196,7 +196,7 @@ export const DeckMain = () => {
                     : '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']
+            } as MainContentProps['style']
           }
         >
           {/* Deck mode. */}

package/src/components/DeckLayout/Dialog.tsx

@@ -4,7 +4,7 @@
 
 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';
@@ -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={PlankContentError}
+          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={PlankContentError} />
         </Overlay>
       )}
     </Root>

package/src/components/DeckLayout/Popover.tsx

@@ -5,7 +5,8 @@
 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 { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Card } from '@dxos/react-ui-mosaic';
 
@@ -59,6 +60,7 @@ export const PopoverContent = () => {
   const { t } = useTranslation(meta.id);
   const { state, updateEphemeral } = useDeckState();
   const { setOpen } = useDeckPopoverContext('PopoverContent');
+  const { invokeSync } = useOperationInvoker();
 
   const handleClose = useCallback(() => {
     setOpen(false);
@@ -96,18 +98,32 @@ 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='popover-card-max-width'>
               <Card.Toolbar>
                 {/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
-                <span />
+                {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>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
                 <Card.Close 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 }) => {
@@ -15,8 +15,8 @@ export const StatusBar = ({ showHints }: { showHints?: boolean }) => {
       className='fixed block-end-0 inset-inline-0 bs-[--statusbar-size] border-bs 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/DeckSettings/DeckSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 
 import { meta } from '../../meta';
 import {
@@ -27,22 +27,22 @@ export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsCompone
   const { t } = useTranslation(meta.id);
 
   return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
-          <ControlItemInput title={t('settings enable deck label')}>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('settings enable deck label')}>
             <Input.Switch
               checked={settings.enableDeck}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableDeck: checked }))}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings encapsulated planks label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings encapsulated planks label')}>
             <Input.Switch
               checked={settings.encapsulatedPlanks ?? false}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, encapsulatedPlanks: checked }))}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('select new plank positioning label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('select new plank positioning label')}>
             <Select.Root
               disabled={!settings.enableDeck}
               value={settings.newPlankPositioning ?? 'start'}
@@ -64,8 +64,8 @@ export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsCompone
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
-          <ControlItemInput title={t('settings overscroll label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings overscroll label')}>
             <Select.Root
               disabled={!settings.enableDeck}
               value={settings.overscroll ?? 'none'}
@@ -85,29 +85,29 @@ export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsCompone
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
-          <ControlItemInput title={t('settings enable statusbar label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings enable statusbar label')}>
             <Input.Switch
               checked={settings.enableStatusbar}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableStatusbar: checked }))}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings show hints label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings show hints label')}>
             <Input.Switch
               checked={settings.showHints}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, showHints: checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
           {!isSocket && (
-            <ControlItemInput title={t('settings native redirect label')}>
+            <Settings.ItemInput title={t('settings native redirect label')}>
               <Input.Switch
                 checked={settings.enableNativeRedirect}
                 onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableNativeRedirect: checked }))}
               />
-            </ControlItemInput>
+            </Settings.ItemInput>
           )}
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

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

@@ -5,8 +5,9 @@
 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 { Stack } from '@dxos/react-ui-stack';
@@ -20,7 +21,7 @@ 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,
@@ -37,7 +38,7 @@ const meta = {
     );
   },
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       plugins: [...corePlugins(), TestPlugin()],
     }),

package/src/components/Plank/Plank.tsx

@@ -13,8 +13,9 @@ import React, {
   useRef,
 } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { Surface, useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { debounce } from '@dxos/async';
 import { type Node, useNode } from '@dxos/plugin-graph';
 import { ATTENDABLE_PATH_SEPARATOR, useAttentionAttributes } from '@dxos/react-ui-attention';
@@ -200,7 +201,7 @@ const PlankComponent = memo(
       if (scrollIntoView === id) {
         layoutMode === 'deck' && rootElement.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
         // Clear the scroll into view state once it has been actioned.
-        void invokePromise(Common.LayoutOperation.ScrollIntoView, { subject: undefined });
+        void invokePromise(LayoutOperation.ScrollIntoView, { subject: undefined });
       }
     }, [id, scrollIntoView, layoutMode, invokePromise]);
 
@@ -280,7 +281,7 @@ const PlankComponent = memo(
                 companions={companions}
               />
             )}
-            <Surface
+            <Surface.Surface
               key={node.id}
               role='article'
               data={data}

package/src/components/Plank/PlankControls.tsx

@@ -4,7 +4,7 @@
 
 import React, { forwardRef, useCallback } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { invariant } from '@dxos/invariant';
 import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, useTranslation } from '@dxos/react-ui';
 

package/src/components/Plank/PlankHeading.tsx

@@ -4,8 +4,9 @@
 
 import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { Surface, useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Graph, type Node, useActionRunner } from '@dxos/plugin-graph';
 import { Icon, IconButton, Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
@@ -121,9 +122,9 @@ export const PlankHeading = memo(
           return invokePromise(DeckOperation.Adjust, { type: eventType, id });
         } else if (eventType === 'close') {
           if (part === 'complementary') {
-            return invokeSync(Common.LayoutOperation.UpdateComplementary, { state: 'collapsed' });
+            return invokeSync(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
           } else {
-            return invokeSync(Common.LayoutOperation.Close, { subject: [id] });
+            return invokeSync(LayoutOperation.Close, { subject: [id] });
           }
         } else {
           return invokePromise(DeckOperation.Adjust, { type: eventType, id });
@@ -191,7 +192,7 @@ export const PlankHeading = memo(
                   actions={sigilActions}
                   onAction={handleAction}
                 >
-                  <Surface role='menu-footer' data={{ subject: node.data }} />
+                  <Surface.Surface role='menu-footer' data={{ subject: node.data }} />
                 </StackItem.Sigil>
               ) : (
                 <StackItem.SigilButton>
@@ -211,7 +212,7 @@ export const PlankHeading = memo(
             </TextTooltip>
           </>
         )}
-        {node && part !== 'complementary' && <Surface role='navbar-end' data={{ subject: node.data }} />}
+        {node && part !== 'complementary' && <Surface.Surface role='navbar-end' data={{ subject: node.data }} />}
         {companioned === 'companion' ? (
           <PlankCompanionControls primary={primaryId} />
         ) : (

package/src/components/Sidebar/ComplementarySidebar.tsx

@@ -12,9 +12,9 @@ import React, {
   useState,
 } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { Surface, useOperationInvoker } from '@dxos/app-framework/react';
-import { IconButton, type Label, Main, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { IconButton, type Label, Main, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/ui-theme';
 
@@ -61,14 +61,14 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
     (event: MouseEvent) => {
       const nextValue = event.currentTarget.getAttribute('data-value') as string;
       if (nextValue === activeId) {
-        updateState((s) => ({
-          ...s,
-          complementarySidebarState: s.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded',
+        updateState((state) => ({
+          ...state,
+          complementarySidebarState: state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded',
         }));
       } else {
         setInternalValue(nextValue);
-        updateState((s) => ({ ...s, complementarySidebarState: 'expanded' }));
-        invokeSync(Common.LayoutOperation.UpdateComplementary, { subject: nextValue });
+        updateState((state) => ({ ...state, complementarySidebarState: 'expanded' }));
+        invokeSync(LayoutOperation.UpdateComplementary, { subject: nextValue });
       }
     },
     [state.complementarySidebarState, activeId, invokeSync, updateState],
@@ -85,7 +85,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
 
   useEffect(() => {
     if (!activeId) {
-      invokeSync(Common.LayoutOperation.UpdateComplementary, { state: 'collapsed' });
+      invokeSync(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
     }
   }, [activeId, invokeSync]);
 
@@ -129,7 +129,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
           </Tabs.Tablist>
           {!hoistStatusbar && (
             <div role='none' className='grid grid-cols-1 auto-rows-[--rail-item] p-1 overflow-y-auto'>
-              <Surface role='status-bar--r0-footer' limit={1} />
+              <Surface.Surface role='status-bar--r0-footer' limit={1} />
             </div>
           )}
           <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1'>
@@ -178,7 +178,7 @@ const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }
     return null;
   }
 
-  const Wrapper = companion.properties.fixed ? Fragment : ScrollArea;
+  const Wrapper = companion.properties.fixed ? Fragment : ScrollAreaWrapper;
 
   return (
     <>
@@ -197,7 +197,7 @@ const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }
         </div>
       </div>
       <Wrapper>
-        <Surface
+        <Surface.Surface
           role={`deck-companion--${getCompanionId(companion.id)}`}
           data={data}
           fallback={PlankContentError}
@@ -209,13 +209,17 @@ const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }
           role='contentinfo'
           className='flex flex-wrap justify-center items-center border-bs border-subduedSeparator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]'
         >
-          <Surface role='status-bar--r1-footer' limit={1} />
+          <Surface.Surface role='status-bar--r1-footer' limit={1} />
         </div>
       )}
     </>
   );
 };
 
-const ScrollArea = ({ children }: PropsWithChildren) => {
-  return <div className='flex flex-col grow overflow-x-hidden overflow-y-auto scrollbar-thin'>{children}</div>;
+const ScrollAreaWrapper = ({ children }: PropsWithChildren) => {
+  return (
+    <ScrollArea.Root thin orientation='vertical' classNames='grow'>
+      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
 };

package/src/components/Sidebar/Sidebar.tsx

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { type Label, Main } from '@dxos/react-ui';
 
 import { useBreakpoints, useDeckState, useHoistStatusbar } from '../../hooks';
@@ -36,7 +36,7 @@ export const Sidebar = () => {
         hoistStatusbar && 'block-end-[--statusbar-size]',
       ]}
     >
-      <Surface role='navigation' data={navigationData} limit={1} />
+      <Surface.Surface role='navigation' data={navigationData} limit={1} />
     </Main.NavigationSidebar>
   );
 };

package/src/components/Sidebar/SidebarButton.tsx

@@ -4,8 +4,8 @@
 
 import React, { useCallback } 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 { IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
 import { getCompanionId, useDeckCompanions, useDeckState } from '../../hooks';
@@ -15,13 +15,13 @@ export const ToggleSidebarButton = ({
   classNames,
   variant = 'ghost',
 }: ThemedClassName<Pick<IconButtonProps, 'variant'>>) => {
-  const { state, updateState } = useDeckState();
+  const { updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
 
   const handleClick = useCallback(() => {
-    updateState((s) => ({
-      ...s,
-      sidebarState: s.sidebarState === 'expanded' ? 'collapsed' : 'expanded',
+    updateState((state) => ({
+      ...state,
+      sidebarState: state.sidebarState === 'expanded' ? 'collapsed' : 'expanded',
     }));
   }, [updateState]);
 
@@ -43,7 +43,7 @@ export const CloseSidebarButton = () => {
   const { t } = useTranslation(meta.id);
 
   const handleClick = useCallback(() => {
-    updateState((s) => ({ ...s, sidebarState: 'collapsed' }));
+    updateState((state) => ({ ...state, sidebarState: 'collapsed' }));
   }, [updateState]);
 
   return (
@@ -71,11 +71,11 @@ export const ToggleComplementarySidebarButton = ({
   const companions = useDeckCompanions();
   const handleClick = useCallback(() => {
     const nextState = state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
-    updateState((s) => ({ ...s, complementarySidebarState: nextState }));
+    updateState((state) => ({ ...state, complementarySidebarState: nextState }));
 
     const subject = state.complementarySidebarPanel ?? (companions[0] && getCompanionId(companions[0].id));
     if (nextState === 'expanded' && !current && subject) {
-      invokeSync(Common.LayoutOperation.UpdateComplementary, { subject });
+      invokeSync(LayoutOperation.UpdateComplementary, { subject });
     }
   }, [state, updateState, current, companions, invokeSync]);
 

package/src/hooks/useCompanions.ts

@@ -4,7 +4,7 @@
 
 import { useMemo } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useConnections } from '@dxos/plugin-graph';
 import { byPosition } from '@dxos/util';