@dxos/plugin-deck 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/components/Sidebar/ComplementarySidebar.tsx

@@ -2,28 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, {
-  Fragment,
-  type MouseEvent,
-  type PropsWithChildren,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { Surface, useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
-import { IconButton, type Label, Main, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import React, { type MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCompanionVariant } from '@dxos/app-toolkit';
+import { IconButton, type Label, Main, Panel, toLocalizedString, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { mx } from '@dxos/react-ui-theme';
+import { iconSize, mx } from '@dxos/ui-theme';
 
-import { DeckCapabilities } from '../../capabilities';
-import { type DeckCompanion, getCompanionId, useBreakpoints, useDeckCompanions, useHoistStatusbar } from '../../hooks';
+import { type DeckCompanion, useBreakpoints, useDeckCompanions, useDeckState, useHoistStatusbar } from '../../hooks';
 import { meta } from '../../meta';
 import { getMode } from '../../types';
 import { layoutAppliesTopbar } from '../../util';
-import { PlankContentError, PlankLoading } from '../Plank';
+import { PlankErrorFallback, PlankLoading } from '../Plank';
 
 import { ToggleComplementarySidebarButton } from './SidebarButton';
 
@@ -35,16 +26,16 @@ export type ComplementarySidebarProps = {
 
 export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
   const { t } = useTranslation(meta.id);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const layout = useCapability(DeckCapabilities.MutableDeckState);
-  const layoutMode = getMode(layout.deck);
+  const { invokePromise } = useOperationInvoker();
+  const { state, deck, updateState } = useDeckState();
+  const layoutMode = getMode(deck);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
   const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
 
   const companions = useDeckCompanions();
-  const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current);
-  const activeId = activeCompanion && getCompanionId(activeCompanion.id);
+  const activeCompanion = companions.find((companion) => getCompanionVariant(companion.id) === current);
+  const activeId = activeCompanion && getCompanionVariant(activeCompanion.id);
   const [internalValue, setInternalValue] = useState(activeId);
 
   useEffect(() => {
@@ -55,14 +46,17 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
     (event: MouseEvent) => {
       const nextValue = event.currentTarget.getAttribute('data-value') as string;
       if (nextValue === activeId) {
-        layout.complementarySidebarState = layout.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
+        updateState((state) => ({
+          ...state,
+          complementarySidebarState: state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded',
+        }));
       } else {
         setInternalValue(nextValue);
-        layout.complementarySidebarState = 'expanded';
-        void dispatch(createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', subject: nextValue }));
+        updateState((state) => ({ ...state, complementarySidebarState: 'expanded' }));
+        void invokePromise(LayoutOperation.UpdateComplementary, { subject: nextValue });
       }
     },
-    [layout, activeId, dispatch],
+    [state.complementarySidebarState, activeId, invokePromise, updateState],
   );
 
   const data = useMemo(
@@ -76,43 +70,45 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
 
   useEffect(() => {
     if (!activeId) {
-      void dispatch(
-        createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', options: { state: 'collapsed' } }),
-      );
+      void invokePromise(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
     }
-  }, [activeId, dispatch]);
+  }, [activeId, invokePromise]);
 
   return (
     <Main.ComplementarySidebar
       label={label}
       classNames={[
-        topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-        hoistStatusbar && 'block-end-[--statusbar-size]',
+        topbar && 'top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
+        hoistStatusbar && 'bottom-(--dx-statusbar-size)',
       ]}
     >
-      <Tabs.Root orientation='vertical' verticalVariant='stateless' value={internalValue} classNames='contents'>
+      {/* TODO(burdon): asChild. */}
+      <Tabs.Root orientation='vertical' value={internalValue} classNames='contents'>
         <div
+          data-tauri-drag-region
           role='none'
+          style={iconSize(5)}
           className={mx(
-            'absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size]',
-            'pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)] border-is border-subduedSeparator',
-            'grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag',
+            'absolute z-20 inset-y-0 end-0 w-(--dx-r0-size)!',
+            'py-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] border-s border-subdued-separator',
+            'grid grid-cols-1 grid-rows-[1fr_min-content] bg-toolbar-surface dx-contain-layout dx-app-drag',
           )}
         >
-          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto'>
+          {/* TODO(burdon): ScrollArea. */}
+          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-(--dx-rail-action) overflow-y-auto'>
             {companions.map((companion) => (
-              <Tabs.Tab key={getCompanionId(companion.id)} value={getCompanionId(companion.id)} asChild>
+              <Tabs.Tab key={getCompanionVariant(companion.id)} value={getCompanionVariant(companion.id)} asChild>
                 <IconButton
                   label={toLocalizedString(companion.properties.label, t)}
                   icon={companion.properties.icon}
                   iconOnly
                   tooltipSide='left'
-                  data-value={getCompanionId(companion.id)}
+                  data-value={getCompanionVariant(companion.id)}
                   variant={
-                    activeId === getCompanionId(companion.id)
-                      ? layout.complementarySidebarState === 'expanded'
+                    activeId === getCompanionVariant(companion.id)
+                      ? state.complementarySidebarState === 'expanded'
                         ? 'primary'
-                        : 'default'
+                        : 'ghost'
                       : 'ghost'
                   }
                   onClick={handleTabClick}
@@ -121,25 +117,28 @@ 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} />
+            <div
+              role='none'
+              className='grid grid-cols-1 auto-rows-(--dx-rail-item) gap-0.5 overflow-y-auto'
+              style={iconSize(4)}
+            >
+              <Surface.Surface role='status-indicator' />
             </div>
           )}
-          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1'>
+          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-(--dx-rail-action) p-1'>
             <ToggleComplementarySidebarButton />
           </div>
         </div>
         {activeId &&
           companions.map((companion) => (
-            <Tabs.Tabpanel
-              key={getCompanionId(companion.id)}
-              value={getCompanionId(companion.id)}
+            <Tabs.Panel
+              key={getCompanionVariant(companion.id)}
+              value={getCompanionVariant(companion.id)}
               classNames={[
                 'absolute data-[state="inactive"]:-z-[1] overflow-hidden',
-                'inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size]',
-                'grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]',
+                'inset-y-0 start-0 w-[calc(100%-var(--dx-r0-size))] lg:w-(--dx-r1-size)',
               ]}
-              {...(layout.complementarySidebarState !== 'expanded' && { inert: true })}
+              {...(state.complementarySidebarState !== 'expanded' && { inert: true })}
             >
               <ComplementarySidebarPanel
                 companion={companion}
@@ -147,7 +146,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
                 data={data}
                 hoistStatusbar={hoistStatusbar}
               />
-            </Tabs.Tabpanel>
+            </Tabs.Panel>
           ))}
       </Tabs.Root>
     </Main.ComplementarySidebar>
@@ -167,48 +166,41 @@ type ComplementarySidebarPanelProps = {
 const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
   const { t } = useTranslation(meta.id);
 
-  if (getCompanionId(companion.id) !== activeId && !data) {
+  if (getCompanionVariant(companion.id) !== activeId && !data) {
     return null;
   }
 
-  const Wrapper = companion.properties.fixed ? Fragment : ScrollArea;
-
   return (
-    <>
-      <div role='none' className='flex items-center p-1 gap-1 border-be border-subduedSeparator'>
-        <IconButton
-          label={toLocalizedString(companion.properties.label, t)}
-          icon={companion.properties.icon}
-          iconOnly
-          tooltipSide='left'
-          data-value={getCompanionId(companion.id)}
-          classNames='bs-10 is-10'
-          variant='default'
-        />
-        <div role='none' className='pli-1'>
-          {toLocalizedString(companion.properties.label, t)}
-        </div>
-      </div>
-      <Wrapper>
-        <Surface
-          role={`deck-companion--${getCompanionId(companion.id)}`}
+    <Panel.Root>
+      <Panel.Toolbar asChild size='lg'>
+        <Toolbar.Root classNames='bg-modal-surface border-b border-subdued-separator'>
+          <IconButton
+            label={toLocalizedString(companion.properties.label, t)}
+            icon={companion.properties.icon}
+            iconOnly
+            tooltipSide='left'
+            data-value={getCompanionVariant(companion.id)}
+            classNames='h-10 w-10'
+            variant='default'
+          />
+          <div role='none' className='px-1'>
+            {toLocalizedString(companion.properties.label, t)}
+          </div>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content classNames='bg-base-surface'>
+        <Surface.Surface
+          role={`deck-companion--${getCompanionVariant(companion.id)}`}
           data={data}
-          fallback={PlankContentError}
+          fallback={PlankErrorFallback}
           placeholder={<PlankLoading />}
         />
-      </Wrapper>
+      </Panel.Content>
       {!hoistStatusbar && (
-        <div
-          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} />
-        </div>
+        <Panel.Statusbar classNames='px-1' size='sm'>
+          <Surface.Surface role='status-bar--r1-footer' limit={1} />
+        </Panel.Statusbar>
       )}
-    </>
+    </Panel.Root>
   );
 };
-
-const ScrollArea = ({ children }: PropsWithChildren) => {
-  return <div className='flex flex-col grow overflow-x-hidden overflow-y-auto scrollbar-thin'>{children}</div>;
-};

package/src/components/Sidebar/Sidebar.tsx

@@ -4,11 +4,10 @@
 
 import React, { useMemo } from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { type Label, Main } from '@dxos/react-ui';
 
-import { DeckCapabilities } from '../../capabilities';
-import { useBreakpoints, useHoistStatusbar } from '../../hooks';
+import { useBreakpoints, useDeckState, useHoistStatusbar } from '../../hooks';
 import { meta } from '../../meta';
 import { getMode } from '../../types';
 import { layoutAppliesTopbar } from '../../util';
@@ -16,7 +15,8 @@ import { layoutAppliesTopbar } from '../../util';
 const label = ['sidebar title', { ns: meta.id }] satisfies Label;
 
 export const Sidebar = () => {
-  const { popoverAnchorId, activeDeck: current, deck } = useCapability(DeckCapabilities.DeckState);
+  const { state, deck } = useDeckState();
+  const { popoverAnchorId, activeDeck: current } = state;
   const breakpoint = useBreakpoints();
   const layoutMode = getMode(deck);
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
@@ -32,11 +32,11 @@ export const Sidebar = () => {
       label={label}
       classNames={[
         'grid',
-        topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-        hoistStatusbar && 'block-end-[--statusbar-size]',
+        topbar && 'top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
+        hoistStatusbar && 'bottom-(--dx-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,20 +4,27 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useCapability, useIntentDispatcher } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCompanionVariant } from '@dxos/app-toolkit';
 import { IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
-import { DeckCapabilities } from '../../capabilities';
-import { getCompanionId, useDeckCompanions } from '../../hooks';
+import { useDeckCompanions, useDeckState } from '../../hooks';
 import { meta } from '../../meta';
 
 export const ToggleSidebarButton = ({
   classNames,
   variant = 'ghost',
 }: ThemedClassName<Pick<IconButtonProps, 'variant'>>) => {
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+  const { updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
+
+  const handleClick = useCallback(() => {
+    updateState((state) => ({
+      ...state,
+      sidebarState: state.sidebarState === 'expanded' ? 'collapsed' : 'expanded',
+    }));
+  }, [updateState]);
+
   return (
     <IconButton
       variant={variant}
@@ -25,17 +32,20 @@ export const ToggleSidebarButton = ({
       iconOnly
       size={4}
       label={t('open navigation sidebar label')}
-      onClick={() =>
-        (layoutContext.sidebarState = layoutContext.sidebarState === 'expanded' ? 'collapsed' : 'expanded')
-      }
+      onClick={handleClick}
       classNames={classNames}
     />
   );
 };
 
 export const CloseSidebarButton = () => {
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+  const { updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
+
+  const handleClick = useCallback(() => {
+    updateState((state) => ({ ...state, sidebarState: 'collapsed' }));
+  }, [updateState]);
+
   return (
     <IconButton
       variant='ghost'
@@ -43,8 +53,8 @@ export const CloseSidebarButton = () => {
       iconOnly
       size={4}
       label={t('close navigation sidebar label')}
-      onClick={() => (layoutContext.sidebarState = 'collapsed')}
-      classNames='rounded-none pli-1 dx-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]'
+      onClick={handleClick}
+      classNames='rounded-none px-1 dx-focus-ring-inset pe-[max(.5rem,env(safe-area-inset-left))]'
     />
   );
 };
@@ -54,24 +64,20 @@ export const ToggleComplementarySidebarButton = ({
   classNames,
   current,
 }: ThemedClassName<{ inR0?: boolean; current?: string }>) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+  const { invokePromise } = useOperationInvoker();
+  const { state, updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
 
   const companions = useDeckCompanions();
-  const handleClick = useCallback(async () => {
-    layoutContext.complementarySidebarState =
-      layoutContext.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
-    const firstCompanion = companions[0];
-    if (layoutContext.complementarySidebarState === 'expanded' && !current && firstCompanion) {
-      await dispatch(
-        createIntent(LayoutAction.UpdateComplementary, {
-          part: 'complementary',
-          subject: getCompanionId(firstCompanion.id),
-        }),
-      );
+  const handleClick = useCallback(() => {
+    const nextState = state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
+    updateState((state) => ({ ...state, complementarySidebarState: nextState }));
+
+    const subject = state.complementarySidebarPanel ?? (companions[0] && getCompanionVariant(companions[0].id));
+    if (nextState === 'expanded' && !current && subject) {
+      void invokePromise(LayoutOperation.UpdateComplementary, { subject });
     }
-  }, [layoutContext, current, companions, dispatch]);
+  }, [state, updateState, current, companions, invokePromise]);
 
   return (
     <IconButton
@@ -80,7 +86,6 @@ export const ToggleComplementarySidebarButton = ({
       icon='ph--sidebar-simple--regular'
       iconOnly
       label={t('open complementary sidebar label')}
-      size={inR0 ? 5 : 4}
       tooltipSide={inR0 ? 'left' : undefined}
       onClick={handleClick}
     />

package/src/components/fragments.ts

@@ -2,13 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
+// TODO(burdon): Move to these as dx-components?
+
+/** @private */
 export const soloInlinePadding =
-  'pis-[calc(env(safe-area-inset-left)+.25rem)] pie-[calc(env(safe-area-inset-left)+.25rem)]';
+  'ps-[calc(env(safe-area-inset-left)+.25rem)] pe-[calc(env(safe-area-inset-right)+.25rem)]';
 
-const sidebarToggleStyles = 'bs-[--rail-item] is-[--rail-item] absolute block-end-2 z-[1] !bg-deckSurface lg:hidden';
+const sidebarToggleStyles = 'h-(--dx-rail-item) w-(--dx-rail-item) absolute bottom-2 z-[1] !bg-deck-surface lg:hidden';
 
-export const fixedSidebarToggleStyles = mx(sidebarToggleStyles, 'inline-start-2');
+/** @private */
+export const fixedSidebarToggleStyles = mx(sidebarToggleStyles, 'left-2');
 
-export const fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, 'inline-end-2');
+/** @private */
+export const fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, 'right-2');

package/src/components/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './DeckLayout';
-export * from './DeckSettings';

package/src/containers/Banner/Banner.tsx

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { Banner } from '../../components';

package/src/containers/Banner/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Banner } from './Banner';
+
+export default Banner;

package/src/{components → containers}/DeckSettings/DeckSettings.tsx

@@ -5,43 +5,50 @@
 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 {
   type DeckSettingsProps,
   type NewPlankPositioning,
   NewPlankPositions,
+  OverScrollToProps,
   type Overscroll,
-  OverscrollOptions,
 } from '../../types';
 
 const isSocket = !!(globalThis as any).__args;
 
-export const DeckSettings = ({ settings }: { settings: DeckSettingsProps }) => {
+export type DeckSettingsComponentProps = {
+  settings: DeckSettingsProps;
+  onSettingsChange: (fn: (current: DeckSettingsProps) => DeckSettingsProps) => void;
+};
+
+export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsComponentProps) => {
   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) => (settings.enableDeck = checked)}
+              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) => (settings.encapsulatedPlanks = checked)}
+              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'}
-              onValueChange={(value) => (settings.newPlankPositioning = value as NewPlankPositioning)}
+              onValueChange={(value) =>
+                onSettingsChange((s) => ({ ...s, newPlankPositioning: value as NewPlankPositioning }))
+              }
             >
               <Select.TriggerButton placeholder={t('select new plank positioning placeholder')} />
               <Select.Portal>
@@ -57,18 +64,18 @@ export const DeckSettings = ({ settings }: { settings: DeckSettingsProps }) => {
                 </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'}
-              onValueChange={(value) => (settings.overscroll = value as Overscroll)}
+              onValueChange={(value) => onSettingsChange((s) => ({ ...s, overscroll: value as Overscroll }))}
             >
               <Select.TriggerButton placeholder={t('select overscroll placeholder')} />
               <Select.Portal>
                 <Select.Content>
                   <Select.Viewport>
-                    {OverscrollOptions.map((option) => (
+                    {OverScrollToProps.map((option) => (
                       <Select.Option key={option} value={option}>
                         {t(`settings overscroll ${option} label`)}
                       </Select.Option>
@@ -78,26 +85,29 @@ export const DeckSettings = ({ settings }: { settings: DeckSettingsProps }) => {
                 </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) => (settings.enableStatusbar = checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableStatusbar: checked }))}
+            />
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings show hints label')}>
+            <Input.Switch
+              checked={settings.showHints}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, showHints: checked }))}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings show hints label')}>
-            <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.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) => (settings.enableNativeRedirect = checked)}
+                onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableNativeRedirect: checked }))}
               />
-            </ControlItemInput>
+            </Settings.ItemInput>
           )}
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

package/src/containers/DeckSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { DeckSettings } from './DeckSettings';
+
+export default DeckSettings;

package/src/containers/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const Banner: ComponentType<any> = lazy(() => import('./Banner'));
+export const DeckSettings: ComponentType<any> = lazy(() => import('./DeckSettings'));

package/src/hooks/index.ts

@@ -5,6 +5,8 @@
 export * from './useBreakpoints';
 export * from './useCompanions';
 export * from './useDeckCompanions';
+export * from './useDeckState';
 export * from './useHoistStatusbar';
 export * from './useMainSize';
 export * from './useNodeActionExpander';
+export * from './useSelectedCompanion';

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';
 
@@ -12,7 +12,7 @@ import { PLANK_COMPANION_TYPE } from '../types';
 
 export const useCompanions = (id?: string) => {
   const { graph } = useAppGraph();
-  const nodes = useConnections(graph, id);
+  const nodes = useConnections(graph, id, 'child');
   const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
   return useMemo(() => companions.toSorted((a, b) => byPosition(a.properties, b.properties)), [companions]);
 };