@dxos/plugin-deck 0.8.2-main.12df754 → 0.8.2-main.2f9c567

package/src/capabilities/intent-resolver.ts

@@ -3,7 +3,7 @@
 //
 
 import { batch } from '@preact/signals-core';
-import { pipe } from 'effect';
+import { Schema, Effect, pipe } from 'effect';
 
 import {
   Capabilities,
@@ -15,7 +15,7 @@ import {
   createIntent,
   chain,
 } from '@dxos/app-framework';
-import { getTypename, S } from '@dxos/echo-schema';
+import { getTypename } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { isLiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
@@ -67,10 +67,10 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.UpdateSidebar.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.UpdateSidebar.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdateSidebar.fields.input> =>
-        S.is(LayoutAction.UpdateSidebar.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.UpdateSidebar.fields.input> =>
+        Schema.is(LayoutAction.UpdateSidebar.fields.input)(data),
       resolve: ({ options }) => {
         const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
         const next = options?.state ?? layout.sidebarState;
@@ -81,10 +81,10 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.UpdateComplementary.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.UpdateComplementary.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdateComplementary.fields.input> =>
-        S.is(LayoutAction.UpdateComplementary.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.UpdateComplementary.fields.input> =>
+        Schema.is(LayoutAction.UpdateComplementary.fields.input)(data),
       resolve: ({ subject, options }) => {
         const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
 
@@ -100,10 +100,10 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.UpdateDialog.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.UpdateDialog.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdateDialog.fields.input> =>
-        S.is(LayoutAction.UpdateDialog.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.UpdateDialog.fields.input> =>
+        Schema.is(LayoutAction.UpdateDialog.fields.input)(data),
       resolve: ({ subject, options }) => {
         const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
         layout.dialogOpen = options.state ?? Boolean(subject);
@@ -114,10 +114,10 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.UpdatePopover.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.UpdatePopover.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.UpdatePopover.fields.input> =>
-        S.is(LayoutAction.UpdatePopover.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.UpdatePopover.fields.input> =>
+        Schema.is(LayoutAction.UpdatePopover.fields.input)(data),
       resolve: ({ subject, options }) => {
         const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
         layout.popoverOpen = options.state ?? Boolean(subject);
@@ -133,10 +133,10 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.AddToast.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.AddToast.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.AddToast.fields.input> =>
-        S.is(LayoutAction.AddToast.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.AddToast.fields.input> =>
+        Schema.is(LayoutAction.AddToast.fields.input)(data),
       resolve: ({ subject }) => {
         const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
         layout.toasts.push(subject);
@@ -144,10 +144,10 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      // TODO(wittjosiah): This should be able to just be `S.is(LayoutAction.SetLayoutMode.fields.input)`
+      // TODO(wittjosiah): This should be able to just be `Schema.is(LayoutAction.SetLayoutMode.fields.input)`
       //  but the filter is not being applied correctly.
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.SetLayoutMode.fields.input> => {
-        if (!S.is(LayoutAction.SetLayoutMode.fields.input)(data)) {
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SetLayoutMode.fields.input> => {
+        if (!Schema.is(LayoutAction.SetLayoutMode.fields.input)(data)) {
           return false;
         }
 
@@ -202,8 +202,8 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
-        S.is(LayoutAction.SwitchWorkspace.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
+        Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
       resolve: ({ subject }) => {
         const state = context.requestCapability(DeckCapabilities.MutableDeckState);
         batch(() => {
@@ -228,8 +228,8 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.RevertWorkspace.fields.input> =>
-        S.is(LayoutAction.RevertWorkspace.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.RevertWorkspace.fields.input> =>
+        Schema.is(LayoutAction.RevertWorkspace.fields.input)(data),
       resolve: () => {
         const state = context.requestCapability(DeckCapabilities.MutableDeckState);
         return {
@@ -239,62 +239,70 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.Open.fields.input> =>
-        S.is(LayoutAction.Open.fields.input)(data),
-      resolve: ({ subject, options }) => {
-        const { graph } = context.requestCapability(Capabilities.AppGraph);
-        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
-        const attention = context.requestCapability(AttentionCapabilities.Attention);
-        const settings = context
-          .requestCapabilities(Capabilities.SettingsStore)[0]
-          ?.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.Open.fields.input> =>
+        Schema.is(LayoutAction.Open.fields.input)(data),
+      resolve: ({ subject, options }) =>
+        Effect.gen(function* () {
+          const { graph } = context.requestCapability(Capabilities.AppGraph);
+          const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+          const attention = context.requestCapability(AttentionCapabilities.Attention);
+          const settings = context
+            .requestCapabilities(Capabilities.SettingsStore)[0]
+            ?.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
 
-        const previouslyOpenIds = new Set<string>(state.deck.solo ? [state.deck.solo] : state.deck.active);
-        batch(() => {
-          const next = state.deck.solo
-            ? (subject as string[]).map((id) => createEntryId(id, options?.variant))
-            : subject.reduce(
-                (acc, entryId) =>
-                  openEntry(acc, entryId, {
-                    key: options?.key,
-                    positioning: options?.positioning ?? settings?.newPlankPositioning,
-                    pivotId: options?.pivotId,
-                    variant: options?.variant,
-                  }),
-                state.deck.active,
-              );
+          if (options?.workspace && state.activeDeck !== options?.workspace) {
+            const { dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            yield* dispatch(
+              createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: options.workspace }),
+            );
+          }
 
-          return setActive({ next, state, attention });
-        });
+          const previouslyOpenIds = new Set<string>(state.deck.solo ? [state.deck.solo] : state.deck.active);
+          batch(() => {
+            const next = state.deck.solo
+              ? (subject as string[]).map((id) => createEntryId(id, options?.variant))
+              : subject.reduce(
+                  (acc, entryId) =>
+                    openEntry(acc, entryId, {
+                      key: options?.key,
+                      positioning: options?.positioning ?? settings?.newPlankPositioning,
+                      pivotId: options?.pivotId,
+                      variant: options?.variant,
+                    }),
+                  state.deck.active,
+                );
 
-        const ids = state.deck.solo ? [state.deck.solo] : state.deck.active;
-        const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
+            return setActive({ next, state, attention });
+          });
 
-        return {
-          intents: [
-            ...(options?.scrollIntoView !== false
-              ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: newlyOpen[0] ?? subject[0] })]
-              : []),
-            createIntent(LayoutAction.Expose, { part: 'navigation', subject: newlyOpen[0] ?? subject[0] }),
-            ...newlyOpen.map((subjectId) => {
-              const active = graph?.findNode(subjectId)?.data;
-              const typename = isLiveObject(active) ? getTypename(active) : undefined;
-              return createIntent(ObservabilityAction.SendEvent, {
-                name: 'navigation.activate',
-                properties: {
-                  subjectId,
-                  typename,
-                },
-              });
-            }),
-          ],
-        };
-      },
+          const ids = state.deck.solo ? [state.deck.solo] : state.deck.active;
+          const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
+
+          return {
+            intents: [
+              ...(options?.scrollIntoView !== false
+                ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: newlyOpen[0] ?? subject[0] })]
+                : []),
+              createIntent(LayoutAction.Expose, { part: 'navigation', subject: newlyOpen[0] ?? subject[0] }),
+              ...newlyOpen.map((subjectId) => {
+                const active = graph?.findNode(subjectId)?.data;
+                const typename = isLiveObject(active) ? getTypename(active) : undefined;
+                return createIntent(ObservabilityAction.SendEvent, {
+                  name: 'navigation.activate',
+                  properties: {
+                    subjectId,
+                    typename,
+                  },
+                });
+              }),
+            ],
+          };
+        }),
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.Close.fields.input> =>
-        S.is(LayoutAction.Close.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.Close.fields.input> =>
+        Schema.is(LayoutAction.Close.fields.input)(data),
       resolve: ({ subject }) => {
         const state = context.requestCapability(DeckCapabilities.MutableDeckState);
         const attention = context.requestCapability(AttentionCapabilities.Attention);
@@ -316,8 +324,8 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.Set.fields.input> =>
-        S.is(LayoutAction.Set.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.Set.fields.input> =>
+        Schema.is(LayoutAction.Set.fields.input)(data),
       resolve: ({ subject }) => {
         const state = context.requestCapability(DeckCapabilities.MutableDeckState);
         const attention = context.requestCapability(AttentionCapabilities.Attention);
@@ -329,8 +337,8 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
-      filter: (data): data is S.Schema.Type<typeof LayoutAction.ScrollIntoView.fields.input> =>
-        S.is(LayoutAction.ScrollIntoView.fields.input)(data),
+      filter: (data): data is Schema.Schema.Type<typeof LayoutAction.ScrollIntoView.fields.input> =>
+        Schema.is(LayoutAction.ScrollIntoView.fields.input)(data),
       resolve: ({ subject }) => {
         const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
         layout.scrollIntoView = subject;

package/src/capabilities/tools.ts

@@ -2,6 +2,8 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Schema } from 'effect';
+
 import {
   contributes,
   createIntent,
@@ -10,7 +12,6 @@ import {
   type PromiseIntentDispatcher,
 } from '@dxos/app-framework';
 import { defineTool, ToolResult } from '@dxos/artifact';
-import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 
 import { meta } from '../meta';
@@ -35,8 +36,8 @@ export default () =>
       `,
       caption: 'Showing item...',
       // TODO(wittjosiah): Refactor Layout/Navigation/Deck actions so that they can be used directly.
-      schema: S.Struct({
-        id: S.String.annotations({
+      schema: Schema.Struct({
+        id: Schema.String.annotations({
           description: 'The ID of the item to show.',
         }),
       }),

package/src/components/DeckLayout/Popover.tsx

@@ -2,72 +2,100 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { Surface, useCapability } from '@dxos/app-framework';
-import { Popover } from '@dxos/react-ui';
+import { Popover, type PopoverContentInteractOutsideEvent } from '@dxos/react-ui';
 
 import { DeckCapabilities } from '../../capabilities';
 
 export type DeckPopoverRootProps = PropsWithChildren<{}>;
 
+const DEBOUNCE_DELAY = 40;
+
+type DeckPopoverContextValue = {
+  setOpen: (open: boolean) => void;
+};
+
+const [DeckPopoverProvider, useDeckPopoverContext] = createContext<DeckPopoverContextValue>('DeckPopover');
+
 export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
-  const context = useCapability(DeckCapabilities.MutableDeckState);
+  const layout = useCapability(DeckCapabilities.MutableDeckState);
   const virtualRef = useRef<HTMLButtonElement | null>(null);
   const [virtualIter, setVirtualIter] = useState(0);
+  const [open, setOpen] = useState(false);
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
 
-  // TODO(thure): This is a workaround for the difference in `React`ion time between displaying a Popover and rendering
-  //  the anchor further down the tree. Refactor to use VirtualTrigger or some other approach which does not cause a lag.
-  const [delayedPopoverVisibility, setDelayedPopoverVisibility] = useState(false);
+  // TODO(thure): This is a workaround for the race condition between displaying a Popover and either rendering
+  //  the anchor further down the tree or measuring the virtual trigger’s client rect.
   useEffect(() => {
-    context.popoverOpen ? setTimeout(() => setDelayedPopoverVisibility(true), 40) : setDelayedPopoverVisibility(false);
-  }, [context.popoverOpen]);
-
-  const handlePopoverOpenChange = useCallback(
-    (nextOpen: boolean) => {
-      if (nextOpen && (context.popoverAnchor || context.popoverAnchorId)) {
-        context.popoverOpen = true;
-      } else {
-        context.popoverOpen = false;
-        context.popoverAnchor = undefined;
-        context.popoverAnchorId = undefined;
-        context.popoverSide = undefined;
+    setOpen(false);
+    if (layout.popoverOpen) {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
       }
-    },
-    [context],
-  );
-
-  useEffect(() => {
-    virtualRef.current = context.popoverAnchor ?? null;
-    setVirtualIter((iter) => iter + 1);
-  }, [context.popoverAnchor]);
+      if (layout.popoverAnchor && virtualRef.current !== layout.popoverAnchor) {
+        virtualRef.current = layout.popoverAnchor ?? null;
+        setVirtualIter((iter) => iter + 1);
+      }
+      debounceRef.current = setTimeout(() => setOpen(true), DEBOUNCE_DELAY);
+    }
+  }, [layout.popoverOpen, layout.popoverAnchorId, layout.popoverAnchor, layout.popoverContent]);
 
   return (
-    <Popover.Root
-      modal
-      open={!!((context.popoverAnchor || context.popoverAnchorId) && delayedPopoverVisibility)}
-      onOpenChange={handlePopoverOpenChange}
-    >
-      {context.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
-      {children}
-    </Popover.Root>
+    <DeckPopoverProvider setOpen={setOpen}>
+      <Popover.Root modal={false} open={open}>
+        {layout.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
+        {children}
+      </Popover.Root>
+    </DeckPopoverProvider>
   );
 };
 
 export const PopoverContent = () => {
-  const context = useCapability(DeckCapabilities.MutableDeckState);
-  const handlePopoverClose = useCallback(() => {
-    context.popoverOpen = false;
-    context.popoverAnchor = undefined;
-    context.popoverAnchorId = undefined;
-    context.popoverSide = undefined;
-  }, [context]);
+  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { setOpen } = useDeckPopoverContext('PopoverContent');
+
+  const handleClose = useCallback(
+    (event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
+      if (
+        // TODO(thure): CodeMirror should not focus itself when it updates.
+        event.type === 'dismissableLayer.focusOutside' &&
+        (event.currentTarget as HTMLElement | undefined)?.classList.contains('cm-content')
+      ) {
+        event.preventDefault();
+      } else {
+        setOpen(false);
+        layout.popoverOpen = false;
+        layout.popoverAnchor = undefined;
+        layout.popoverAnchorId = undefined;
+        layout.popoverSide = undefined;
+      }
+    },
+    [setOpen],
+  );
+
+  const collisionBoundaries: HTMLElement[] = useMemo(() => {
+    const closest = layout.popoverAnchor?.closest('[data-popover-collision-boundary]') as
+      | HTMLElement
+      | null
+      | undefined;
+    return closest ? [closest] : [];
+  }, [layout.popoverAnchor]);
 
   return (
     <Popover.Portal>
-      <Popover.Content side={context.popoverSide} onEscapeKeyDown={handlePopoverClose}>
+      <Popover.Content
+        side={layout.popoverSide}
+        onInteractOutside={handleClose}
+        onEscapeKeyDown={handleClose}
+        collisionBoundary={collisionBoundaries}
+        sticky='always'
+        hideWhenDetached
+      >
         <Popover.Viewport>
-          <Surface role='popover' data={context.popoverContent} limit={1} />
+          <Surface role='popover' data={layout.popoverContent} limit={1} />
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>

package/src/components/Plank/Plank.tsx

@@ -116,7 +116,7 @@ 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.
@@ -131,6 +131,8 @@ const PlankImpl = memo(
       part === 'deck' && (companioned === 'companion' ? '!border-separator border-ie' : '!border-separator border-li'),
       part.startsWith('solo-') && 'row-span-2 grid-rows-subgrid min-is-0',
       part === 'solo-companion' && '!border-separator border-is',
+      layoutMode === 'solo--fullscreen' &&
+        '!transition-[margin-block-start,inline-size] -mbs-[--rail-action] has-[[data-plank-heading]:hover]:mbs-0',
     );
 
     return (

package/src/components/Plank/PlankControls.tsx

@@ -73,7 +73,7 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
         <PlankControl
           label={t('close companion label')}
           variant='ghost'
-          icon='ph--caret-left--regular'
+          icon='ph--x--regular'
           onClick={handleCloseCompanion}
           classNames={plankControlSpacing}
         />
@@ -114,12 +114,18 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
                   label={t(
                     layoutMode === 'solo--fullscreen'
                       ? 'exit fullscreen label'
-                      : !layoutIsAnySolo
-                        ? 'show solo plank label'
-                        : 'show deck plank label',
+                      : layoutIsAnySolo
+                        ? 'show deck plank label'
+                        : 'show solo plank label',
                   )}
                   classNames={buttonClassNames}
-                  icon={layoutIsAnySolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
+                  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')}
                 />
               </>

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

@@ -17,6 +17,8 @@ import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart, type LayoutMode }
 import { useBreakpoints } from '../../util';
 import { soloInlinePadding } from '../fragments';
 
+const MAX_COMPANIONS = 5;
+
 export type PlankHeadingProps = {
   id: string;
   part: ResolvedPart;
@@ -143,7 +145,10 @@ export const PlankHeading = memo(
         classNames={[
           'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout',
           part === 'solo' ? soloInlinePadding : 'pli-1',
+          layoutMode === 'solo--fullscreen' &&
+            'opacity-0 border-transparent hover:border-separator hover:opacity-100 transition-[border-color,opacity]',
         ]}
+        data-plank-heading
       >
         {companions && isCompanionNode ? (
           <div role='none' className='flex-1 min-is-0 overflow-x-auto scrollbar-thin flex gap-1'>
@@ -152,7 +157,7 @@ export const PlankHeading = memo(
                 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'}