@dxos/plugin-deck 0.8.2-staging.7ac8446 → 0.8.2

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

@@ -5,39 +5,51 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
+import React from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { AttentionPlugin } from '@dxos/plugin-attention';
 import { GraphPlugin } from '@dxos/plugin-graph';
+import { Stack } from '@dxos/react-ui-stack';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { Plank } from './Plank';
+import { Plank, type PlankProps } from './Plank';
+import DeckStateFactory from '../../capabilities/state';
 import translations from '../../translations';
 
-// TODO(burdon): invariant violation: No capability found for dxos.org/plugin/deck/capability/state
-const meta: Meta<typeof Plank> = {
+const meta: Meta<PlankProps> = {
   title: 'plugins/plugin-deck/Plank',
   component: Plank,
+  render: (args) => {
+    return (
+      <Stack orientation='horizontal'>
+        <Plank {...args} />
+      </Stack>
+    );
+  },
   decorators: [
     withPluginManager({
-      plugins: [IntentPlugin(), GraphPlugin()],
+      plugins: [AttentionPlugin(), SettingsPlugin(), IntentPlugin(), GraphPlugin()],
+      capabilities: () => DeckStateFactory(),
     }),
     withTheme,
-    withLayout({ fullscreen: true, tooltips: true }),
+    withLayout({ fullscreen: true }),
   ],
   parameters: {
-    layout: 'centered',
     translations,
   },
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PlankProps>;
 
+// TODO(burdon): Need to define surface provider?
 export const Default: Story = {
   args: {
     id: 'plank-1',
     part: 'solo',
+    layoutMode: 'deck',
   },
 };

package/src/components/Plank/Plank.tsx

@@ -3,7 +3,6 @@
 //
 
 import React, {
-  Fragment,
   type KeyboardEvent,
   type PropsWithChildren,
   memo,
@@ -31,40 +30,117 @@ import { PlankContentError, PlankError } from './PlankError';
 import { PlankHeading } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
 import { DeckCapabilities } from '../../capabilities';
-import { useMainSize } from '../../hooks';
+import { useMainSize, useCompanions } from '../../hooks';
 import { parseEntryId } from '../../layout';
-import { DeckAction, type LayoutMode, type Part, type ResolvedPart, type DeckSettingsProps } from '../../types';
-import { useCompanions } from '../../util';
+import { DeckAction, type LayoutMode, type ResolvedPart, type DeckSettingsProps } from '../../types';
 
 const UNKNOWN_ID = 'unknown_id';
 
-export type PlankProps = {
+export type PlankProps = Pick<PlankComponentProps, 'layoutMode' | 'part' | 'path' | 'order' | 'active' | 'settings'> & {
   id?: string;
   companionId?: string;
-  part: Part;
-  path?: string[];
-  order?: number;
-  active?: string[];
-  layoutMode: LayoutMode;
-  settings?: DeckSettingsProps;
 };
 
-type PlankImplProps = Omit<PlankProps, 'id' | 'companionId' | 'part'> & {
+// TODO(burdon): Factor out conditional rendering.
+//   Remove this wrapper component and render the entire set of planks in the deck with conditional visibility
+//   to obviate mounting and unmounting when switching between solo and companion mode?
+// NOTE(thure, in reply): Whether any surface should be rendered and hidden is a performance matter — remember that
+//  article surfaces contain full experiences, so being able to unmount them will yield relatively large performance
+//  benefits. I think where we anticipate users will definitely want to quickly switch between showing and hiding entire
+//  articles, over the (again probably large) performance benefit that unmounting them would confer, we can mount and
+//  hide them, but I think that scenario in its most unambiguous form is probably rare. You could extrapolate
+//  the scenario to include all “potential” planks such as companions, which we could keep mounted and hidden, but I
+//  don’t think the resulting performance would be acceptable. I think the real issue is “perceived performance” which
+//  has mitigations that are in between mounting and un-mounting since both of those have tradeoffs; we may need one or more
+//  “partially-mounted” experiences, like loading skeletons at the simple end, or screenshots of “sleeping” planks at
+//  the advanced end.
+
+/**
+ * A Plank is the main container for surfaces within a Deck.
+ * It may be paired with a companion plank that enables the user to select one of multiple companion surfaces.
+ */
+export const Plank = memo(({ id = UNKNOWN_ID, companionId, ...props }: PlankProps) => {
+  const { graph } = useAppGraph();
+  const node = useNode(graph, id);
+  const companions = useCompanions(id);
+  const currentCompanion = companions.find(({ id }) => id === companionId);
+  const hasCompanion = !!(companionId && currentCompanion);
+
+  return (
+    <PlankContainer solo={props.part === 'solo'} companion={hasCompanion}>
+      <PlankComponent
+        id={id}
+        node={node}
+        companioned={hasCompanion ? 'primary' : undefined}
+        companions={hasCompanion ? [] : companions}
+        {...props}
+        {...(props.part === 'solo' ? { part: 'solo-primary' } : {})}
+      />
+      {hasCompanion && (
+        <PlankComponent
+          id={companionId}
+          node={currentCompanion}
+          primary={node}
+          companions={companions}
+          companioned='companion'
+          {...props}
+          {...(props.part === 'solo' ? { part: 'solo-companion' } : { order: (props.order ?? 0) + 1 })}
+        />
+      )}
+    </PlankContainer>
+  );
+});
+
+const PlankContainer = ({ children, solo, companion }: PropsWithChildren<{ solo: boolean; companion: boolean }>) => {
+  const sizeAttrs = useMainSize();
+  if (!solo) {
+    return children;
+  }
+
+  // TODO(burdon): Make resizable.
+  return (
+    <div
+      role='none'
+      className={mx('absolute inset-0 grid', companion && 'grid-cols-[1fr_1fr]', railGridHorizontal, mainIntrinsicSize)}
+      {...sizeAttrs}
+    >
+      {children}
+    </div>
+  );
+};
+
+type PlankComponentProps = {
+  layoutMode: LayoutMode;
   id: string;
   part: ResolvedPart;
-  node?: Node;
+  path?: string[];
+  order?: number;
+  active?: string[];
+  // TODO(burdon): Change to role?
   companioned?: 'primary' | 'companion';
+  node?: Node;
   primary?: Node;
   companions?: Node[];
+  settings?: DeckSettingsProps;
 };
 
-const PlankImpl = memo(
-  ({ id, node, part, path, order, active, layoutMode, companioned, primary, companions, settings }: PlankImplProps) => {
+const PlankComponent = memo(
+  ({
+    layoutMode,
+    id,
+    part,
+    path,
+    order,
+    active,
+    companioned,
+    node,
+    primary,
+    companions,
+    settings,
+  }: PlankComponentProps) => {
     const { dispatchPromise: dispatch } = useIntentDispatcher();
     const { deck, popoverAnchorId, scrollIntoView } = useCapability(DeckCapabilities.DeckState);
-    const rootElement = useRef<HTMLDivElement | null>(null);
     const canResize = layoutMode === 'deck';
-    const Root = part.startsWith('solo') ? 'article' : StackItem.Root;
 
     const attendableAttrs = useAttendableAttributes(primary?.id ?? id);
     const index = active ? active.findIndex((entryId) => entryId === id) : 0;
@@ -72,10 +148,13 @@ const PlankImpl = memo(
     const canIncrementStart = active && index !== undefined && index > 0 && length !== undefined && length > 1;
     const canIncrementEnd = active && index !== undefined && index < length - 1 && length !== undefined;
 
+    const rootElement = useRef<HTMLDivElement | null>(null);
+
     const { variant } = parseEntryId(id);
     const sizeKey = `${id.split('+')[0]}${variant ? `${ATTENDABLE_PATH_SEPARATOR}${variant}` : ''}`;
     const size = deck.plankSizing[sizeKey] as number | undefined;
-    const setSize = useCallback(
+
+    const handleSizeChange = useCallback(
       debounce((nextSize: number) => {
         return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: sizeKey, size: nextSize }));
       }, 200),
@@ -101,9 +180,9 @@ const PlankImpl = memo(
       }
     }, [id, scrollIntoView, layoutMode]);
 
-    const isSolo = layoutMode === 'solo' && part === 'solo';
+    const isSolo = layoutMode.startsWith('solo') && part === 'solo';
     const isAttendable =
-      (layoutMode === 'solo' && part.startsWith('solo')) || (layoutMode === 'deck' && part === 'deck');
+      (layoutMode.startsWith('solo') && part.startsWith('solo')) || (layoutMode === 'deck' && part === 'deck');
 
     const sizeAttrs = useMainSize();
 
@@ -116,14 +195,15 @@ const PlankImpl = memo(
           path,
           popoverAnchorId,
         },
-      [node, node?.data, path, popoverAnchorId, primary?.data],
+      [node, node?.data, path, popoverAnchorId, primary?.data, variant],
     );
 
     // TODO(wittjosiah): Change prop to accept a component.
     const placeholder = useMemo(() => <PlankLoading />, []);
 
+    const Root = part.startsWith('solo') ? 'article' : StackItem.Root;
     const className = mx(
-      'attention-surface relative',
+      'attention-surface relative dx-focus-ring-inset-over-all',
       isSolo && mainIntrinsicSize,
       isSolo && railGridHorizontal,
       isSolo && 'absolute inset-0',
@@ -143,7 +223,7 @@ const PlankImpl = memo(
           : {
               item: { id },
               size,
-              onSizeChange: setSize,
+              onSizeChange: handleSizeChange,
               classNames: className,
               order,
               role: 'article',
@@ -157,6 +237,7 @@ const PlankImpl = memo(
               id={id}
               part={part.startsWith('solo-') ? 'solo' : part}
               node={node}
+              layoutMode={layoutMode}
               deckEnabled={settings?.enableDeck}
               canIncrementStart={canIncrementStart}
               canIncrementEnd={canIncrementEnd}
@@ -177,54 +258,9 @@ const PlankImpl = memo(
         ) : (
           <PlankError id={id} part={part} />
         )}
+
         {canResize && <StackItem.ResizeHandle />}
       </Root>
     );
   },
 );
-
-const SplitFrame = ({ children }: PropsWithChildren<{}>) => {
-  const sizeAttrs = useMainSize();
-  return (
-    <div
-      role='none'
-      className={mx('grid grid-cols-[1fr_1fr] absolute inset-0', railGridHorizontal, mainIntrinsicSize)}
-      {...sizeAttrs}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const Plank = ({ id = UNKNOWN_ID, ...props }: PlankProps) => {
-  const { graph } = useAppGraph();
-  const node = useNode(graph, id);
-  const companions = useCompanions(id);
-  const currentCompanion = companions.find(({ id }) => id === props.companionId);
-
-  if (props.companionId) {
-    const Root = props.part === 'solo' ? SplitFrame : Fragment;
-    return (
-      <Root>
-        <PlankImpl
-          id={id}
-          node={node}
-          companioned='primary'
-          {...props}
-          {...(props.part === 'solo' ? { part: 'solo-primary' } : {})}
-        />
-        <PlankImpl
-          id={props.companionId}
-          node={currentCompanion}
-          companioned='companion'
-          primary={node}
-          companions={companions}
-          {...props}
-          {...(props.part === 'solo' ? { part: 'solo-companion' } : { order: props.order! + 1 })}
-        />
-      </Root>
-    );
-  } else {
-    return <PlankImpl id={id} node={node} companions={companions} {...props} />;
-  }
-};

package/src/components/Plank/PlankControls.tsx

@@ -6,18 +6,10 @@ import React, { forwardRef, useCallback } from 'react';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import {
-  Button,
-  ButtonGroup,
-  type ButtonGroupProps,
-  type ButtonProps,
-  Icon,
-  Tooltip,
-  useTranslation,
-} from '@dxos/react-ui';
+import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, useTranslation } from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../../meta';
-import { DeckAction } from '../../types';
+import { DeckAction, type LayoutMode } from '../../types';
 
 export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
 
@@ -26,6 +18,7 @@ export type PlankCapabilities = {
   incrementEnd?: boolean;
   deck?: boolean;
   solo?: boolean;
+  fullscreen?: boolean;
   companion?: boolean;
 };
 
@@ -34,27 +27,15 @@ export type PlankControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
   variant?: 'hide-disabled' | 'default';
   close?: boolean | 'minify-start' | 'minify-end';
   capabilities: PlankCapabilities;
-  isSolo?: boolean;
+  layoutMode?: LayoutMode;
   pin?: 'start' | 'end' | 'both';
 };
 
 const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <Button variant='ghost' {...props}>
-          <span className='sr-only'>{label}</span>
-          <Icon icon={icon} size={5} />
-        </Button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom'>{label}</Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
-  );
+  return <IconButton iconOnly label={label} icon={icon} size={5} variant='ghost' tooltipSide='bottom' {...props} />;
 };
 
-const plankControlSpacing = 'pli-2 plb-3';
+const plankControlSpacing = 'pli-2';
 
 type PlankComplimentControlsProps = {
   primary?: string;
@@ -73,8 +54,7 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
         <PlankControl
           label={t('close companion label')}
           variant='ghost'
-          // icon='ph--minus--regular'
-          icon='ph--caret-left--regular'
+          icon='ph--x--regular'
           onClick={handleCloseCompanion}
           classNames={plankControlSpacing}
         />
@@ -88,35 +68,51 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
 // NOTE(thure): Pinning & unpinning are disabled indefinitely.
 export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
   (
-    { children, classNames, variant = 'default', capabilities, isSolo, pin, close = false, onClick, ...props },
+    { children, classNames, variant = 'default', capabilities, layoutMode, pin, close = false, onClick, ...props },
     forwardedRef,
   ) => {
     const { t } = useTranslation(DECK_PLUGIN);
     const buttonClassNames =
       variant === 'hide-disabled' ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
 
-    return (
-      <ButtonGroup {...props} classNames={['app-no-drag', classNames]} ref={forwardedRef}>
-        {/* {pin && !isSolo && ['both', 'start'].includes(pin) && (
-          <PlankControl
-            label={t('pin start label')}
-            variant='ghost'
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('pin-start')}
-            icon='ph--caret-line-left--regular'
-          />
-        )} */}
+    const layoutIsAnySolo = !!layoutMode?.startsWith('solo');
 
-        {capabilities.deck && capabilities.solo && (
+    return (
+      <ButtonGroup {...props} classNames={['app-no-drag !opacity-100', classNames]} ref={forwardedRef}>
+        {capabilities.deck ? (
           <>
-            <PlankControl
-              label={isSolo ? t('show deck plank label') : t('show solo plank label')}
-              classNames={buttonClassNames}
-              icon={isSolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
-              onClick={() => onClick?.('solo')}
-            />
+            {capabilities.solo && (
+              <>
+                {layoutMode === 'solo' && (
+                  <PlankControl
+                    label={t('show fullscreen plank label')}
+                    classNames={buttonClassNames}
+                    icon='ph--corners-out--regular'
+                    onClick={() => onClick?.('solo--fullscreen')}
+                  />
+                )}
+                <PlankControl
+                  label={t(
+                    layoutMode === 'solo--fullscreen'
+                      ? 'exit fullscreen label'
+                      : layoutIsAnySolo
+                        ? 'show deck plank label'
+                        : 'show solo plank label',
+                  )}
+                  classNames={buttonClassNames}
+                  icon={
+                    layoutMode === 'solo--fullscreen'
+                      ? 'ph--corners-in--regular'
+                      : layoutIsAnySolo
+                        ? 'ph--arrows-in-line-horizontal--regular'
+                        : 'ph--arrows-out-line-horizontal--regular'
+                  }
+                  onClick={() => onClick?.(layoutMode === 'solo--fullscreen' ? 'solo--fullscreen' : 'solo')}
+                />
+              </>
+            )}
 
-            {!isSolo && (
+            {!layoutIsAnySolo && (
               <>
                 <PlankControl
                   label={t('increment start label')}
@@ -135,18 +131,18 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
               </>
             )}
           </>
+        ) : (
+          capabilities.fullscreen && (
+            <PlankControl
+              label={t(layoutMode === 'solo--fullscreen' ? 'exit fullscreen label' : 'show fullscreen plank label')}
+              classNames={buttonClassNames}
+              icon={layoutMode === 'solo--fullscreen' ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
+              onClick={() => onClick?.('solo--fullscreen')}
+            />
+          )
         )}
 
-        {/* {pin && !isSolo && ['both', 'end'].includes(pin) && (
-          <PlankControl
-            label={t('pin end label')}
-            classNames={buttonClassNames}
-            icon='ph--caret-line-right--regular'
-            onClick={() => onClick?.('pin-end')}
-          />
-        )} */}
-
-        {close && !isSolo && (
+        {close && !layoutIsAnySolo && (
           <PlankControl
             label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
             classNames={buttonClassNames}

package/src/components/Plank/PlankError.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react';
 
 import { type Node } from '@dxos/plugin-graph';
 import { useTranslation } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { descriptionMessage, mx } from '@dxos/react-ui-theme';
 
 import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
@@ -19,11 +19,7 @@ export const PlankContentError = ({ error }: { error?: Error }) => {
     <div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
       <p
         role='alert'
-        className={mx(
-          descriptionText,
-          'break-words border border-dashed border-separator rounded-lg p-8',
-          errorString.length < 256 && 'text-lg',
-        )}
+        className={mx(descriptionMessage, 'break-words rounded-lg p-8', errorString.length < 256 && 'text-lg')}
       >
         {error ? errorString : t('error fallback message')}
       </p>

package/src/components/Plank/PlankHeading.tsx

@@ -9,17 +9,21 @@ import { type Node } 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 { PlankCompanionControls, PlankControls } from './PlankControls';
+import { useBreakpoints } from '../../hooks';
 import { parseEntryId } from '../../layout';
 import { DECK_PLUGIN } from '../../meta';
-import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart } from '../../types';
-import { useBreakpoints } from '../../util';
+import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart, type LayoutMode } from '../../types';
 import { soloInlinePadding } from '../fragments';
 
+const MAX_COMPANIONS = 5;
+
 export type PlankHeadingProps = {
   id: string;
   part: ResolvedPart;
+  layoutMode?: LayoutMode;
   node?: Node;
   deckEnabled?: boolean;
   canIncrementStart?: boolean;
@@ -45,6 +49,7 @@ export const PlankHeading = memo(
     pending,
     companioned,
     companions,
+    layoutMode,
     actions = [],
   }: PlankHeadingProps) => {
     const { t } = useTranslation(DECK_PLUGIN);
@@ -61,7 +66,9 @@ export const PlankHeading = memo(
     useEffect(() => {
       const frame = requestAnimationFrame(() => {
         // Load actions for the node.
-        node && graph.actions(node);
+        if (node) {
+          void graph.expand(node.id);
+        }
       });
 
       return () => cancelAnimationFrame(frame);
@@ -74,6 +81,7 @@ export const PlankHeading = memo(
         solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'deck'),
         incrementStart: canIncrementStart,
         incrementEnd: canIncrementEnd,
+        fullscreen: !isCompanionNode,
         companion: !isCompanionNode && companions && companions.length > 0,
       }),
       [breakpoint, part, companions, canIncrementStart, canIncrementEnd, isCompanionNode, deckEnabled],
@@ -86,17 +94,20 @@ export const PlankHeading = memo(
       } else if (variant) {
         return [];
       } else {
-        return [actions, graph.actions(node)].filter((a) => a.length > 0);
+        return [actions, graph.getActions(node.id)].filter((a) => a.length > 0);
       }
     }, [actions, node, variant, graph]);
 
-    const handleAction = useCallback((action: StackItemSigilAction) => {
-      typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN });
-    }, []);
+    const handleAction = useCallback(
+      (action: StackItemSigilAction) => {
+        typeof action.data === 'function' && action.data?.({ parent: node, caller: DECK_PLUGIN });
+      },
+      [node],
+    );
 
     const handlePlankAction = useCallback(
       (eventType: DeckAction.PartAdjustment) => {
-        if (eventType === 'solo') {
+        if (eventType.startsWith('solo')) {
           return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
         } else if (eventType === 'close') {
           if (part === 'complementary') {
@@ -139,18 +150,26 @@ export const PlankHeading = memo(
     return (
       <StackItem.Heading
         classNames={[
-          'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 layout-contain',
+          'plb-1 border-be border-subduedSeparator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout',
           part === 'solo' ? soloInlinePadding : 'pli-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',
+              ]
+            : []),
         ]}
+        data-plank-heading
       >
-        {companions && isCompanionNode ? (
+        {companions && isCompanionNode /* TODO(thure): This is a tablist, it should be implemented as such. */ ? (
           <div role='none' className='flex-1 min-is-0 overflow-x-auto scrollbar-thin flex gap-1'>
             {companions.map(({ id, properties: { icon, label } }) => (
               <IconButton
                 key={id}
                 data-id={id}
                 icon={icon}
-                iconOnly={node?.id !== id}
+                iconOnly={companions.length > MAX_COMPANIONS && node?.id !== id}
                 label={toLocalizedString(label, t)}
                 size={5}
                 variant={node?.id === id ? 'primary' : 'default'}
@@ -196,7 +215,7 @@ export const PlankHeading = memo(
         ) : (
           <PlankControls
             capabilities={capabilities}
-            isSolo={part === 'solo'}
+            layoutMode={layoutMode}
             close={part === 'complementary' ? 'minify-end' : true}
             onClick={handlePlankAction}
           />