@dxos/plugin-deck 0.8.4-main.1da679c → 0.8.4-main.21d9917

package/src/components/DeckLayout/Popover.tsx

@@ -3,12 +3,14 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework';
-import { Popover, type PopoverContentInteractOutsideEvent } from '@dxos/react-ui';
+import { Surface } from '@dxos/app-framework/react';
+import { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-mosaic';
 
-import { DeckCapabilities } from '../../capabilities';
+import { useDeckState } from '../../hooks';
+import { meta } from '../../meta';
 
 export type DeckPopoverRootProps = PropsWithChildren<{}>;
 
@@ -21,32 +23,32 @@ type DeckPopoverContextValue = {
 const [DeckPopoverProvider, useDeckPopoverContext] = createContext<DeckPopoverContextValue>('DeckPopover');
 
 export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
-  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { state } = useDeckState();
   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 race condition between displaying a Popover and either rendering
-  //  the anchor further down the tree or measuring the virtual trigger’s client rect.
+  //  the anchor further down the tree or measuring the virtual trigger's client rect.
   useEffect(() => {
     setOpen(false);
-    if (layout.popoverOpen) {
+    if (state.popoverOpen) {
       if (debounceRef.current) {
         clearTimeout(debounceRef.current);
       }
-      if (layout.popoverAnchor && virtualRef.current !== layout.popoverAnchor) {
-        virtualRef.current = layout.popoverAnchor ?? null;
+      if (state.popoverAnchor && virtualRef.current !== state.popoverAnchor) {
+        virtualRef.current = state.popoverAnchor ?? null;
         setVirtualIter((iter) => iter + 1);
       }
       debounceRef.current = setTimeout(() => setOpen(true), DEBOUNCE_DELAY);
     }
-  }, [layout.popoverOpen, layout.popoverAnchorId, layout.popoverAnchor, layout.popoverContent]);
+  }, [state.popoverOpen, state.popoverAnchorId, state.popoverAnchor, state.popoverContent]);
 
   return (
     <DeckPopoverProvider setOpen={setOpen}>
       <Popover.Root modal={false} open={open}>
-        {layout.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
+        {state.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
         {children}
       </Popover.Root>
     </DeckPopoverProvider>
@@ -54,10 +56,22 @@ export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
 };
 
 export const PopoverContent = () => {
-  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { t } = useTranslation(meta.id);
+  const { state, updateEphemeral } = useDeckState();
   const { setOpen } = useDeckPopoverContext('PopoverContent');
 
-  const handleClose = useCallback(
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    updateEphemeral((state) => ({
+      ...state,
+      popoverOpen: false,
+      popoverAnchor: undefined,
+      popoverAnchorId: undefined,
+      popoverSide: undefined,
+    }));
+  }, [updateEphemeral]);
+
+  const handleInteractOutside = useCallback(
     (event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
       if (
         // TODO(thure): CodeMirror should not focus itself when it updates.
@@ -66,36 +80,34 @@ export const PopoverContent = () => {
       ) {
         event.preventDefault();
       } else {
-        setOpen(false);
-        layout.popoverOpen = false;
-        layout.popoverAnchor = undefined;
-        layout.popoverAnchorId = undefined;
-        layout.popoverSide = undefined;
+        handleClose();
       }
     },
-    [setOpen],
+    [handleClose],
   );
 
-  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={layout.popoverSide}
-        onInteractOutside={handleClose}
-        onEscapeKeyDown={handleClose}
-        collisionBoundary={collisionBoundaries}
+        side={state.popoverSide}
         sticky='always'
         hideWhenDetached
+        onInteractOutside={handleInteractOutside}
+        onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
-          <Surface role='card--popover' data={layout.popoverContent} limit={1} />
+          {state.popoverKind === 'card' && (
+            <Card.Root>
+              <Card.Toolbar>
+                {/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
+                <span />
+                {state.popoverTitle ? <Card.Title>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
+                <Card.Close onClick={handleClose} />
+              </Card.Toolbar>
+              <Surface role='card--content' data={state.popoverContent} limit={1} />
+            </Card.Root>
+          )}
+          {state.popoverKind === 'base' && <Surface role='popover' data={state.popoverContent} limit={1} />}
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>

package/src/components/DeckLayout/StatusBar.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/react';
 import { useLandmarkMover } from '@dxos/react-ui';
 
 export const StatusBar = ({ showHints }: { showHints?: boolean }) => {

package/src/components/DeckLayout/Toast.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { type LayoutAction } from '@dxos/app-framework';
+import { type Common } from '@dxos/app-framework';
 import {
   Button,
   Icon,
@@ -14,7 +14,7 @@ import {
   useTranslation,
 } from '@dxos/react-ui';
 
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 // TODO(wittjosiah): Render remaining duration as a progress bar within the toast.
 export const Toast = ({
@@ -28,14 +28,14 @@ export const Toast = ({
   closeLabel,
   onAction,
   onOpenChange,
-}: LayoutAction.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+}: Common.LayoutOperation.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
+  const { t } = useTranslation(meta.id);
 
   return (
     <NaturalToast.Root data-testid={id} defaultOpen duration={duration} onOpenChange={onOpenChange}>
       <NaturalToast.Body>
         <NaturalToast.Title classNames='items-center'>
-          {icon && <Icon icon={icon} size={5} classNames='inline mr-1' />}
+          {icon && <Icon icon={icon} classNames='inline mr-1' />}
           {title && <span>{toLocalizedString(title, t)}</span>}
         </NaturalToast.Title>
         {description && (
@@ -59,3 +59,28 @@ export const Toast = ({
     </NaturalToast.Root>
   );
 };
+
+export type ToasterProps = {
+  toasts?: Common.LayoutOperation.Toast[];
+  onDismissToast?: (id: string) => void;
+};
+
+export const Toaster = ({ toasts, onDismissToast }: ToasterProps) => {
+  return (
+    <>
+      {toasts?.map((toast) => (
+        <Toast
+          {...toast}
+          key={toast.id}
+          onOpenChange={(open: boolean) => {
+            if (!open) {
+              onDismissToast?.(toast.id);
+            }
+
+            return open;
+          }}
+        />
+      ))}
+    </>
+  );
+};

package/src/components/DeckSettings/DeckSettings.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { Input, Select, useTranslation } from '@dxos/react-ui';
 import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import {
   type DeckSettingsProps,
   type NewPlankPositioning,
@@ -18,24 +18,37 @@ import {
 
 const isSocket = !!(globalThis as any).__args;
 
-export const DeckSettings = ({ settings }: { settings: DeckSettingsProps }) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+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: DECK_PLUGIN })}>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
         <ControlGroup>
           <ControlItemInput 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')}>
+            <Input.Switch
+              checked={settings.encapsulatedPlanks ?? false}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, encapsulatedPlanks: checked }))}
             />
           </ControlItemInput>
           <ControlItemInput 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>
@@ -56,7 +69,7 @@ export const DeckSettings = ({ settings }: { settings: DeckSettingsProps }) => {
             <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>
@@ -76,17 +89,20 @@ export const DeckSettings = ({ settings }: { settings: DeckSettingsProps }) => {
           <ControlItemInput title={t('settings enable statusbar label')}>
             <Input.Switch
               checked={settings.enableStatusbar}
-              onCheckedChange={(checked) => (settings.enableStatusbar = checked)}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableStatusbar: checked }))}
             />
           </ControlItemInput>
           <ControlItemInput title={t('settings show hints label')}>
-            <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
+            <Input.Switch
+              checked={settings.showHints}
+              onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, showHints: checked }))}
+            />
           </ControlItemInput>
           {!isSocket && (
             <ControlItemInput title={t('settings native redirect label')}>
               <Input.Switch
                 checked={settings.enableNativeRedirect}
-                onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
+                onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableNativeRedirect: checked }))}
               />
             </ControlItemInput>
           )}

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

@@ -2,23 +2,30 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { Capability, Common, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { GraphPlugin } from '@dxos/plugin-graph';
+import { corePlugins } from '@dxos/plugin-testing';
+import { withTheme } from '@dxos/react-ui/testing';
 import { Stack } from '@dxos/react-ui-stack';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { DeckStateFactory } from '../../capabilities';
+import { DeckState } from '../../capabilities';
+import { meta as pluginMeta } from '../../meta';
 import { translations } from '../../translations';
 
 import { Plank } from './Plank';
 
+const TestPlugin = Plugin.define(pluginMeta).pipe(
+  Plugin.addModule({
+    id: Capability.getModuleTag(DeckState),
+    activatesOn: Common.ActivationEvent.AppGraphReady,
+    activate: () => DeckState(),
+  }),
+  Plugin.make,
+);
+
 const meta = {
   title: 'plugins/plugin-deck/Plank',
   component: Plank,
@@ -30,14 +37,13 @@ const meta = {
     );
   },
   decorators: [
+    withTheme,
     withPluginManager({
-      plugins: [AttentionPlugin(), SettingsPlugin(), IntentPlugin(), GraphPlugin()],
-      capabilities: () => DeckStateFactory(),
+      plugins: [...corePlugins(), TestPlugin()],
     }),
-    withTheme,
-    withLayout({ fullscreen: true }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof Plank>;

package/src/components/Plank/Plank.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useFocusFinders } from '@fluentui/react-tabster';
 import React, {
   type KeyboardEvent,
   type PropsWithChildren,
@@ -12,24 +13,17 @@ import React, {
   useRef,
 } from 'react';
 
-import {
-  LayoutAction,
-  Surface,
-  createIntent,
-  useAppGraph,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { Common } from '@dxos/app-framework';
+import { Surface, useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
 import { debounce } from '@dxos/async';
 import { type Node, useNode } from '@dxos/plugin-graph';
 import { ATTENDABLE_PATH_SEPARATOR, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
-import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
+import { mainIntrinsicSize, mx } from '@dxos/ui-theme';
 
-import { DeckCapabilities } from '../../capabilities';
-import { useCompanions, useMainSize } from '../../hooks';
+import { useCompanions, useDeckState, useMainSize } from '../../hooks';
 import { parseEntryId } from '../../layout';
-import { DeckAction, type DeckSettingsProps, type LayoutMode, type ResolvedPart } from '../../types';
+import { DeckOperation, type DeckSettingsProps, type LayoutMode, type ResolvedPart } from '../../types';
 
 import { PlankContentError, PlankError } from './PlankError';
 import { PlankHeading } from './PlankHeading';
@@ -37,6 +31,10 @@ import { PlankLoading } from './PlankLoading';
 
 const UNKNOWN_ID = 'unknown_id';
 
+//
+// Plank
+//
+
 export type PlankProps = Pick<PlankComponentProps, 'layoutMode' | 'part' | 'path' | 'order' | 'active' | 'settings'> & {
   id?: string;
   companionId?: string;
@@ -50,10 +48,10 @@ export type PlankProps = Pick<PlankComponentProps, 'layoutMode' | 'part' | 'path
 //  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
+//  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
+//  "partially-mounted" experiences, like loading skeletons at the simple end, or screenshots of "sleeping" planks at
 //  the advanced end.
 
 /**
@@ -68,7 +66,11 @@ export const Plank = memo(({ id = UNKNOWN_ID, companionId, ...props }: PlankProp
   const hasCompanion = !!(companionId && currentCompanion);
 
   return (
-    <PlankContainer solo={props.part === 'solo'} companion={hasCompanion}>
+    <PlankContainer
+      solo={props.part === 'solo'}
+      companion={hasCompanion}
+      encapsulate={!!props.settings?.encapsulatedPlanks}
+    >
       <PlankComponent
         id={id}
         node={node}
@@ -92,7 +94,13 @@ export const Plank = memo(({ id = UNKNOWN_ID, companionId, ...props }: PlankProp
   );
 });
 
-const PlankContainer = ({ children, solo, companion }: PropsWithChildren<{ solo: boolean; companion: boolean }>) => {
+//
+// PlankContainer
+//
+
+type PlankContainerProps = PropsWithChildren<{ solo: boolean; companion: boolean; encapsulate: boolean }>;
+
+const PlankContainer = ({ children, solo, companion, encapsulate }: PlankContainerProps) => {
   const sizeAttrs = useMainSize();
   if (!solo) {
     return children;
@@ -102,7 +110,14 @@ const PlankContainer = ({ children, solo, companion }: PropsWithChildren<{ solo:
   return (
     <div
       role='none'
-      className={mx('absolute inset-0 grid', companion && 'grid-cols-[1fr_1fr]', railGridHorizontal, mainIntrinsicSize)}
+      data-popover-collision-boundary={true}
+      className={mx(
+        'absolute inset-[--main-spacing] grid',
+        encapsulate && 'border border-separator rounded overflow-hidden',
+        companion && 'grid-cols-[6fr_4fr]', // TODO(burdon): Resize.
+        railGridHorizontal,
+        mainIntrinsicSize,
+      )}
       {...sizeAttrs}
     >
       {children}
@@ -110,6 +125,10 @@ const PlankContainer = ({ children, solo, companion }: PropsWithChildren<{ solo:
   );
 };
 
+//
+// PlankComponent
+//
+
 type PlankComponentProps = {
   layoutMode: LayoutMode;
   id: string;
@@ -117,11 +136,10 @@ type PlankComponentProps = {
   path?: string[];
   order?: number;
   active?: string[];
-  // TODO(burdon): Change to role?
   companioned?: 'primary' | 'companion';
-  node?: Node;
-  primary?: Node;
-  companions?: Node[];
+  node?: Node.Node;
+  primary?: Node.Node;
+  companions?: Node.Node[];
   settings?: DeckSettingsProps;
 };
 
@@ -139,8 +157,10 @@ const PlankComponent = memo(
     companions,
     settings,
   }: PlankComponentProps) => {
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
-    const { deck, popoverAnchorId, scrollIntoView } = useCapability(DeckCapabilities.DeckState);
+    const { invokePromise } = useOperationInvoker();
+    const { state, deck } = useDeckState();
+    const { popoverAnchorId, scrollIntoView } = state;
+    const { findFirstFocusable } = useFocusFinders();
     const canResize = layoutMode === 'deck';
 
     const attentionAttrs = useAttentionAttributes(primary?.id ?? id);
@@ -157,29 +177,32 @@ const PlankComponent = memo(
 
     const handleSizeChange = useCallback(
       debounce((nextSize: number) => {
-        return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: sizeKey, size: nextSize }));
+        return invokePromise(DeckOperation.UpdatePlankSize, { id: sizeKey, size: nextSize });
       }, 200),
-      [dispatch, sizeKey],
+      [invokePromise, sizeKey],
     );
 
-    // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
+    // TODO(thure): Tabster's focus group should handle moving focus to Main, but something is blocking it.
     const handleKeyDown = useCallback((event: KeyboardEvent) => {
-      if (event.target === event.currentTarget && event.key === 'Escape') {
-        rootElement.current?.closest('main')?.focus();
+      if (event.target === event.currentTarget) {
+        switch (event.key) {
+          case 'Escape':
+            rootElement.current?.closest('main')?.focus();
+            break;
+          case 'Enter':
+            rootElement.current && findFirstFocusable(rootElement.current)?.focus();
+            break;
+        }
       }
     }, []);
 
     useLayoutEffect(() => {
       if (scrollIntoView === id) {
-        // TODO(wittjosiah): When focused on page load, the focus is always visible.
-        //   Forcing focus to something smaller than the plank prevents large focus ring in the interim.
-        const focusable = rootElement.current?.querySelector('button') || rootElement.current;
-        focusable?.focus({ preventScroll: true });
-        layoutMode === 'deck' && focusable?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+        layoutMode === 'deck' && rootElement.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
         // Clear the scroll into view state once it has been actioned.
-        void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: undefined }));
+        void invokePromise(Common.LayoutOperation.ScrollIntoView, { subject: undefined });
       }
-    }, [id, scrollIntoView, layoutMode]);
+    }, [id, scrollIntoView, layoutMode, invokePromise]);
 
     const isSolo = layoutMode.startsWith('solo') && part === 'solo';
     const isAttendable =
@@ -190,34 +213,42 @@ const PlankComponent = memo(
     const data = useMemo(
       () =>
         node && {
+          attendableId: id,
           subject: node.data,
           companionTo: primary?.data,
+          properties: node.properties,
           variant,
           path,
           popoverAnchorId,
         },
-      [node, node?.data, path, popoverAnchorId, primary?.data, variant],
+      [node, node?.data, node?.properties, 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 fullscreen = layoutMode === 'solo--fullscreen';
     const className = mx(
       'attention-surface relative dx-focus-ring-inset-over-all density-coarse',
-      isSolo && mainIntrinsicSize,
-      isSolo && railGridHorizontal,
       isSolo && 'absolute inset-0',
+      isSolo && mainIntrinsicSize,
+      railGridHorizontal,
       part.startsWith('solo') && 'grid',
+      part.startsWith('solo-') && 'grid-rows-subgrid row-span-2 min-is-0',
+      fullscreen && 'grid-rows-1',
       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',
+      settings?.encapsulatedPlanks &&
+        !part.startsWith('solo') &&
+        'mli-[--main-spacing] !border-separator border rounded overflow-hidden',
     );
 
     return (
       <Root
         ref={rootElement}
         data-testid='deck.plank'
+        data-popover-collision-boundary={true}
         tabIndex={0}
         {...(part.startsWith('solo')
           ? ({ ...sizeAttrs, className } as any)
@@ -234,19 +265,21 @@ const PlankComponent = memo(
       >
         {node ? (
           <>
-            <PlankHeading
-              id={id}
-              part={part.startsWith('solo-') ? 'solo' : part}
-              node={node}
-              layoutMode={layoutMode}
-              deckEnabled={settings?.enableDeck}
-              canIncrementStart={canIncrementStart}
-              canIncrementEnd={canIncrementEnd}
-              popoverAnchorId={popoverAnchorId}
-              primaryId={primary?.id}
-              companioned={companioned}
-              companions={companions}
-            />
+            {!fullscreen && (
+              <PlankHeading
+                id={id}
+                part={part.startsWith('solo-') ? 'solo' : part}
+                node={node}
+                layoutMode={layoutMode}
+                deckEnabled={settings?.enableDeck}
+                canIncrementStart={canIncrementStart}
+                canIncrementEnd={canIncrementEnd}
+                popoverAnchorId={popoverAnchorId}
+                primaryId={primary?.id}
+                companioned={companioned}
+                companions={companions}
+              />
+            )}
             <Surface
               key={node.id}
               role='article'
@@ -259,7 +292,6 @@ const PlankComponent = memo(
         ) : (
           <PlankError id={id} part={part} />
         )}
-
         {canResize && <StackItem.ResizeHandle />}
       </Root>
     );