@dxos/plugin-deck 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/components/Plank/PlankError.tsx

@@ -5,26 +5,14 @@
 import React, { useEffect, useState } from 'react';
 
 import { type Node } from '@dxos/plugin-graph';
-import { useTranslation } from '@dxos/react-ui';
-import { descriptionMessage, mx } from '@dxos/react-ui-theme';
+import { ErrorFallback, type ErrorFallbackProps, useTranslation } from '@dxos/react-ui';
+import { descriptionMessage, mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
 import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
 
-export const PlankContentError = ({ error }: { error?: Error }) => {
-  const { t } = useTranslation(meta.id);
-  const errorString = error?.toString() ?? '';
-  return (
-    <div role='none' className='overflow-y-auto p-8 attention-surface grid place-items-center'>
-      <p role='alert' className={mx(descriptionMessage, 'break-all rounded-md p-4')}>
-        {error ? errorString : t('error fallback message')}
-      </p>
-    </div>
-  );
-};
-
 export const PlankError = ({
   id,
   part,
@@ -33,17 +21,43 @@ export const PlankError = ({
 }: {
   id: string;
   part: PlankHeadingProps['part'];
-  node?: Node;
+  node?: Node.Node;
   error?: Error;
 }) => {
   const [timedOut, setTimedOut] = useState(false);
   useEffect(() => {
-    setTimeout(() => setTimedOut(true), 5e3);
+    const timer = setTimeout(() => setTimedOut(true), 5_000);
+    return () => clearTimeout(timer);
   }, []);
+
   return (
     <>
       <PlankHeading id={id} part={part} node={node} pending={!timedOut} />
-      {timedOut ? <PlankContentError error={error} /> : <PlankLoading />}
+      {timedOut ? <PlankErrorFallback error={error} /> : <PlankLoading />}
     </>
   );
 };
+
+/**
+ * User facing error fallback.
+ */
+export const PlankErrorFallback = ({ error }: ErrorFallbackProps) => {
+  const { t } = useTranslation(meta.id);
+
+  if (process.env.NODE_ENV === 'development') {
+    return <ErrorFallback title='Plank Error' error={error} />;
+  } else {
+    const errorString = error?.toString() ?? '';
+    return (
+      <div
+        role='alert'
+        data-testid='plank-content-error'
+        className='dx-attention-surface overflow-y-auto p-8 grid place-items-center'
+      >
+        <p className={mx(descriptionMessage, 'break-all rounded-md p-4')}>
+          {error ? errorString : t('error fallback message')}
+        </p>
+      </div>
+    );
+  }
+};

package/src/components/Plank/PlankHeading.tsx

@@ -4,17 +4,19 @@
 
 import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
 
-import { LayoutAction, Surface, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
-import { type Node } from '@dxos/plugin-graph';
+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';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
-import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/react-ui-theme';
+import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/ui-theme';
 
 import { useBreakpoints } from '../../hooks';
 import { parseEntryId } from '../../layout';
 import { meta } from '../../meta';
-import { DeckAction, type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '../../types';
+import { DeckOperation, type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '../../types';
 import { soloInlinePadding } from '../fragments';
 
 import { PlankCompanionControls, PlankControls } from './PlankControls';
@@ -25,7 +27,7 @@ export type PlankHeadingProps = {
   id: string;
   part: ResolvedPart;
   layoutMode?: LayoutMode;
-  node?: Node;
+  node?: Node.Node;
   deckEnabled?: boolean;
   canIncrementStart?: boolean;
   canIncrementEnd?: boolean;
@@ -33,7 +35,7 @@ export type PlankHeadingProps = {
   primaryId?: string;
   pending?: boolean;
   companioned?: 'primary' | 'companion';
-  companions?: Node[];
+  companions?: Node.Node[];
   actions?: StackItemSigilAction[];
 };
 
@@ -54,7 +56,8 @@ export const PlankHeading = memo(
     actions = [],
   }: PlankHeadingProps) => {
     const { t } = useTranslation(meta.id);
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { invokePromise, invokeSync } = useOperationInvoker();
+    const runAction = useActionRunner();
     const { graph } = useAppGraph();
     const breakpoint = useBreakpoints();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
@@ -68,7 +71,7 @@ export const PlankHeading = memo(
       const frame = requestAnimationFrame(() => {
         // Load actions for the node.
         if (node) {
-          void graph.expand(node.id);
+          void Graph.expand(graph, node.id, 'child');
         }
       });
 
@@ -97,42 +100,37 @@ export const PlankHeading = memo(
       } else {
         return [
           actions,
-          graph
-            .getActions(node.id)
-            .filter((a) => ['list-item', 'list-item-primary', 'heading-list-item'].includes(a.properties.disposition)),
+          Graph.getActions(graph, node.id).filter((a) =>
+            ['list-item', 'list-item-primary', 'heading-list-item'].includes(a.properties.disposition),
+          ),
         ].filter((a) => a.length > 0);
       }
     }, [actions, node, variant, graph]);
 
     const handleAction = useCallback(
       (action: StackItemSigilAction) => {
-        typeof action.data === 'function' && void action.data?.({ parent: node, caller: meta.id });
+        if (typeof action.data === 'function') {
+          void runAction(action as Node.Action, { parent: node, caller: meta.id });
+        }
       },
-      [node],
+      [node, runAction],
     );
 
     const handlePlankAction = useCallback(
-      (eventType: DeckAction.PartAdjustment) => {
+      (eventType: DeckOperation.PartAdjustment) => {
         if (eventType.startsWith('solo')) {
-          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
+          return invokePromise(DeckOperation.Adjust, { type: eventType, id });
         } else if (eventType === 'close') {
           if (part === 'complementary') {
-            return dispatch(
-              createIntent(LayoutAction.UpdateComplementary, {
-                part: 'complementary',
-                options: { state: 'collapsed' },
-              }),
-            );
+            return invokeSync(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
           } else {
-            return dispatch(
-              createIntent(LayoutAction.Close, { part: 'main', subject: [id], options: { state: false } }),
-            );
+            return invokeSync(LayoutOperation.Close, { subject: [id] });
           }
         } else {
-          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
+          return invokePromise(DeckOperation.Adjust, { type: eventType, id });
         }
       },
-      [dispatch, id, part],
+      [invokePromise, invokeSync, id, part],
     );
 
     const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover.Anchor : Fragment;
@@ -141,28 +139,24 @@ export const PlankHeading = memo(
       (event: MouseEvent) => {
         const target = (event.target as HTMLElement).closest('[data-id]') as HTMLElement | null;
         const tabId = target?.dataset?.id;
-        if (primaryId && tabId) {
-          void dispatch(
-            createIntent(DeckAction.ChangeCompanion, {
-              primary: primaryId,
-              companion: tabId,
-            }),
-          );
+        if (tabId) {
+          void invokePromise(DeckOperation.ChangeCompanion, { companion: tabId });
         }
       },
-      [primaryId],
+      [invokePromise],
     );
 
     return (
       <StackItem.Heading
         classNames={[
-          'plb-1 items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout density-coarse',
-          part === 'solo' ? soloInlinePadding : 'pli-1',
+          'py-1 items-stretch gap-1 sticky left-12 dx-app-drag min-w-0 dx-contain-layout dx-density-coarse',
+          part === 'solo' ? soloInlinePadding : 'px-1',
           ...(layoutMode === 'solo--fullscreen'
             ? [
                 hoverableControls,
                 hoverableFocusedWithinControls,
-                '*:transition-opacity *:opacity-[--controls-opacity] bg-transparent border-transparent transition-[background-color,border-color] hover-hover:hover:bg-headerSurface focus-within:bg-headerSurface hover-hover:hover:border-subduedSeparator focus-within:border-subduedSeparator',
+                '*:transition-opacity *:opacity-(--controls-opacity) bg-transparent border-transparent transition-[background-color,border-color]',
+                'hover-hover:hover:bg-header-surface focus-within:bg-header-surface hover-hover:hover:border-subdued-separator focus-within:border-subdued-separator',
               ]
             : []),
         ]}
@@ -170,7 +164,7 @@ export const PlankHeading = memo(
       >
         {companions && isCompanionNode ? (
           /* TODO(thure): IMPORTANT: This is a tablist; it should be implemented as such. */
-          <div role='none' className='flex-1 min-is-0 overflow-x-auto scrollbar-none flex gap-1'>
+          <div role='none' className='flex-1 min-w-0 overflow-x-auto scrollbar-none flex gap-1'>
             {companions.map(({ id, properties: { icon, label } }) => (
               <IconButton
                 key={id}
@@ -178,7 +172,6 @@ export const PlankHeading = memo(
                 icon={icon}
                 iconOnly={companions.length > MAX_COMPANIONS && node?.id !== id}
                 label={toLocalizedString(label, t)}
-                size={5}
                 variant={node?.id === id ? 'primary' : 'ghost'}
                 onClick={handleTabClick}
               />
@@ -196,12 +189,12 @@ 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>
                   <span className='sr-only'>{label}</span>
-                  <Icon icon={icon} size={5} />
+                  <Icon icon={icon} />
                 </StackItem.SigilButton>
               )}
             </ActionRoot>
@@ -216,7 +209,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/Plank/PlankLoading.tsx

@@ -6,5 +6,5 @@ import React from 'react';
 
 // TODO(burdon): Show skeleton: https://github.com/dxos/dxos/issues/8259
 export const PlankLoading = () => {
-  return <div role='none' className='grid place-items-center attention-surface' />;
+  return <div role='none' className='grid place-items-center dx-attention-surface' />;
 };

package/src/components/Sidebar/ComplementarySidebar.tsx

@@ -12,16 +12,24 @@ import React, {
   useState,
 } from 'react';
 
-import { LayoutAction, Surface, createIntent, useCapability, useIntentDispatcher } from '@dxos/app-framework';
-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 { DeckCapabilities } from '../../capabilities';
-import { type DeckCompanion, getCompanionId, useBreakpoints, useDeckCompanions, useHoistStatusbar } from '../../hooks';
+import { mx } from '@dxos/ui-theme';
+
+import {
+  type DeckCompanion,
+  getCompanionId,
+  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';
 
@@ -33,9 +41,9 @@ 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 { invokeSync } = useOperationInvoker();
+  const { state, deck, updateState } = useDeckState();
+  const layoutMode = getMode(deck);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
   const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
@@ -53,14 +61,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' }));
+        invokeSync(LayoutOperation.UpdateComplementary, { subject: nextValue });
       }
     },
-    [layout, activeId, dispatch],
+    [state.complementarySidebarState, activeId, invokeSync, updateState],
   );
 
   const data = useMemo(
@@ -74,38 +85,39 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
 
   useEffect(() => {
     if (!activeId) {
-      void dispatch(
-        createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', options: { state: 'collapsed' } }),
-      );
+      invokeSync(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
     }
-  }, [activeId, dispatch]);
+  }, [activeId, invokeSync]);
 
   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'>
         <div
           role='none'
-          className='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'
+          className={mx(
+            'absolute z-[1] 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'>
+          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-(--dx-rail-action) p-1 gap-1 overflow-y-auto!'>
             {companions.map((companion) => (
               <Tabs.Tab key={getCompanionId(companion.id)} value={getCompanionId(companion.id)} asChild>
                 <IconButton
                   label={toLocalizedString(companion.properties.label, t)}
                   icon={companion.properties.icon}
-                  size={5}
                   iconOnly
                   tooltipSide='left'
                   data-value={getCompanionId(companion.id)}
                   variant={
                     activeId === getCompanionId(companion.id)
-                      ? layout.complementarySidebarState === 'expanded'
+                      ? state.complementarySidebarState === 'expanded'
                         ? 'primary'
                         : 'default'
                       : 'ghost'
@@ -116,11 +128,11 @@ 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) p-1 overflow-y-auto'>
+              <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'>
+          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-(--dx-rail-action) p-1'>
             <ToggleComplementarySidebarButton />
           </div>
         </div>
@@ -129,8 +141,12 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
             <Tabs.Tabpanel
               key={getCompanionId(companion.id)}
               value={getCompanionId(companion.id)}
-              classNames='absolute data-[state="inactive"]:-z-[1] 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)]'
-              {...(layout.complementarySidebarState !== 'expanded' && { inert: true })}
+              classNames={[
+                'absolute data-[state="inactive"]:-z-[1] overflow-hidden',
+                'inset-y-0 start-0 w-[calc(100%-var(--dx-r0-size))] lg:w-(--dx-r1-size)',
+                'grid grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr_min-content] py-[env(safe-area-inset-top)]',
+              ]}
+              {...(state.complementarySidebarState !== 'expanded' && { inert: true })}
             >
               <ComplementarySidebarPanel
                 companion={companion}
@@ -155,10 +171,6 @@ type ComplementarySidebarPanelProps = {
   hoistStatusbar: boolean;
 };
 
-const ScrollArea = ({ children }: PropsWithChildren) => {
-  return <div className='flex flex-col grow overflow-x-hidden overflow-y-auto scrollbar-thin'>{children}</div>;
-};
-
 const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
   const { t } = useTranslation(meta.id);
 
@@ -166,29 +178,48 @@ const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }
     return null;
   }
 
-  const Wrapper = companion.properties.fixed ? Fragment : ScrollArea;
+  const Wrapper = companion.properties.fixed ? Fragment : ScrollAreaWrapper;
 
   return (
     <>
-      <h2 className='flex items-center pli-2 border-subduedSeparator border-be font-medium'>
-        {toLocalizedString(companion.properties.label, t)}
-      </h2>
+      <div role='none' className='flex items-center p-1 gap-1 border-b border-subdued-separator'>
+        <IconButton
+          label={toLocalizedString(companion.properties.label, t)}
+          icon={companion.properties.icon}
+          iconOnly
+          tooltipSide='left'
+          data-value={getCompanionId(companion.id)}
+          classNames='h-10 w-10'
+          variant='default'
+        />
+        <div role='none' className='px-1'>
+          {toLocalizedString(companion.properties.label, t)}
+        </div>
+      </div>
       <Wrapper>
-        <Surface
+        <Surface.Surface
           role={`deck-companion--${getCompanionId(companion.id)}`}
           data={data}
-          fallback={PlankContentError}
+          fallback={PlankErrorFallback}
           placeholder={<PlankLoading />}
         />
       </Wrapper>
       {!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)]'
+          className='flex flex-wrap justify-center items-center border-y border-subdued-separator pt-1 pb-[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 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,11 +4,10 @@
 
 import React, { useMemo } from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework';
+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,46 +4,57 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, createIntent, useCapability, useIntentDispatcher } from '@dxos/app-framework';
+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 { DeckCapabilities } from '../../capabilities';
-import { getCompanionId, useDeckCompanions } from '../../hooks';
+import { getCompanionId, 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}
-      iconOnly
       icon='ph--sidebar--regular'
+      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'
-      iconOnly
       icon='ph--caret-line-left--regular'
+      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))]'
     />
   );
 };
@@ -53,35 +64,31 @@ export const ToggleComplementarySidebarButton = ({
   classNames,
   current,
 }: ThemedClassName<{ inR0?: boolean; current?: string }>) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
+  const { invokeSync } = 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] && getCompanionId(companions[0].id));
+    if (nextState === 'expanded' && !current && subject) {
+      invokeSync(LayoutOperation.UpdateComplementary, { subject });
     }
-  }, [layoutContext, current, companions, dispatch]);
+  }, [state, updateState, current, companions, invokeSync]);
 
   return (
     <IconButton
-      iconOnly
-      onClick={handleClick}
       variant='ghost'
-      label={t('open complementary sidebar label')}
       classNames={['[&>svg]:-scale-x-100', classNames]}
       icon='ph--sidebar-simple--regular'
+      iconOnly
+      label={t('open complementary sidebar label')}
       size={inR0 ? 5 : 4}
       tooltipSide={inR0 ? 'left' : undefined}
+      onClick={handleClick}
     />
   );
 };