@dxos/plugin-deck 0.8.4-main.b97322e → 0.8.4-main.bcb3aa67d6

package/src/containers/Deck/Banner.tsx

@@ -0,0 +1,40 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { mx, osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+import { CloseSidebarButton, ToggleSidebarButton } from '../Sidebar';
+
+export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'topbar' | 'sidebar' }>) => {
+  const { t } = useTranslation(meta.id);
+
+  return (
+    <header
+      className={mx(
+        'flex items-stretch relative py-1 ps-1 pe-2',
+        variant === 'topbar' &&
+          'fixed inset-x-0 top-[env(safe-area-inset-top)] h-(--dx-rail-size) border-b border-separator',
+        classNames,
+      )}
+    >
+      {variant === 'sidebar' ? <CloseSidebarButton /> : <ToggleSidebarButton />}
+      <span className='self-center grow ms-1'>{t('current-app.name', { ns: osTranslations })}</span>
+      {variant === 'topbar' && (
+        <div role='none' className='absolute inset-0 pointer-events-none'>
+          <div role='none' className='grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto'>
+            <Surface.Surface role='search-input' limit={1} />
+          </div>
+        </div>
+      )}
+      <span role='none' className='grow' />
+      <Surface.Surface role='version-info' limit={1} />
+      <Surface.Surface role='notch-start' limit={1} />
+    </header>
+  );
+};

package/src/containers/Deck/Deck.stories.tsx

@@ -0,0 +1,85 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback } from 'react';
+
+import { Capability, Plugin } from '@dxos/app-framework';
+import { useAtomCapability, usePluginManager } from '@dxos/app-framework/ui';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AppActivationEvents } from '@dxos/app-toolkit';
+import { corePlugins } from '@dxos/plugin-testing';
+import { withLayout } from '@dxos/react-ui/testing';
+
+import { useDeckState } from '#hooks';
+
+import { meta as pluginMeta } from '#meta';
+import { translations } from '../../translations';
+import { DeckCapabilities, getMode } from '#types';
+
+import { Deck } from './Deck';
+
+import { DeckSettings, DeckState } from '#capabilities';
+
+const TestPlugin = Plugin.define(pluginMeta).pipe(
+  Plugin.addModule({
+    activatesOn: AppActivationEvents.SetupSettings,
+    activate: DeckSettings,
+  }),
+  Plugin.addModule({
+    id: Capability.getModuleTag(DeckState),
+    activatesOn: AppActivationEvents.AppGraphReady,
+    activate: () => DeckState(),
+  }),
+  Plugin.make,
+);
+
+const DefaultStory = () => {
+  const settings = useAtomCapability(DeckCapabilities.Settings);
+  const pluginManager = usePluginManager();
+  const { state, deck, updateState } = useDeckState();
+  const layoutMode = getMode(deck);
+
+  const handleLayoutChange = useCallback(() => {
+    console.log('layout change');
+  }, []);
+
+  return (
+    <Deck.Root
+      settings={settings}
+      pluginManager={pluginManager}
+      layoutMode={layoutMode}
+      state={state}
+      deck={deck}
+      updateState={updateState}
+      onLayoutChange={handleLayoutChange}
+    >
+      <Deck.Content>
+        <Deck.Viewport>{deck.solo ? <Deck.SoloMode /> : <Deck.MultiMode />}</Deck.Viewport>
+      </Deck.Content>
+    </Deck.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-deck/containers/Deck',
+  component: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [...corePlugins(), TestPlugin()],
+      setupEvents: [AppActivationEvents.SetupSettings],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/Deck/Deck.tsx

@@ -0,0 +1,21 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { DeckRoot, DeckLayoutChangeRequest, DeckRootProps } from './DeckRoot';
+import { DeckContent, DeckContentProps } from './DeckContent';
+import { DeckViewport, DeckMultiMode, DeckSoloMode, DeckViewportProps, DeckContentEmpty } from './DeckViewport';
+
+/**
+ * Radix-style composite Deck component.
+ */
+export const Deck = {
+  Root: DeckRoot,
+  Content: DeckContent,
+  Viewport: DeckViewport,
+  ContentEmpty: DeckContentEmpty,
+  MultiMode: DeckMultiMode,
+  SoloMode: DeckSoloMode,
+};
+
+export type { DeckLayoutChangeRequest, DeckRootProps, DeckContentProps, DeckViewportProps };

package/src/containers/Deck/DeckContent.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type PropsWithChildren, useCallback, useEffect, useRef } from 'react';
+
+import { AttentionCapabilities } from '@dxos/plugin-attention/types';
+import { Main, useMediaQuery } from '@dxos/react-ui';
+
+import { useBreakpoints, useHoistStatusbar } from '#hooks';
+import { layoutAppliesTopbar } from '../../util';
+import { useDeckContext } from './DeckRoot';
+import { ComplementarySidebar, Sidebar } from '../Sidebar';
+import { StatusBar } from './StatusBar';
+import { Banner } from './Banner';
+
+const DECK_CONTENT_NAME = 'DeckContent';
+
+export type DeckContentProps = PropsWithChildren;
+
+export const DeckContent = ({ children }: DeckContentProps) => {
+  const {
+    state: { sidebarState, complementarySidebarState, complementarySidebarPanel },
+    deck: { active, fullscreen, solo },
+    updateState,
+    layoutMode,
+    settings,
+    pluginManager,
+    onLayoutChange,
+  } = useDeckContext(DECK_CONTENT_NAME);
+  const breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
+
+  // Ensure the first plank is attended when the deck is first rendered.
+  useEffect(() => {
+    // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
+    const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
+    const attended = attention.getCurrent();
+    const firstId = solo ?? active[0];
+    if (attended.length === 0 && firstId) {
+      // TODO(wittjosiah): Focusing the type button is a workaround.
+      //   If the plank is directly focused on first load the focus ring appears.
+      document.querySelector<HTMLElement>(`article[data-attendable-id="${firstId}"] button`)?.focus();
+    }
+  }, []);
+
+  // Not using `breakpoint` to avoid firing when breakpoint changes between tablet and desktop.
+  // `ssr: false` to avoid using fallback values and flashing into solo mode on startup.
+  const [isNotMobile] = useMediaQuery('md');
+  const shouldRevert = useRef(false);
+  useEffect(() => {
+    if (!isNotMobile && layoutMode === 'multi') {
+      // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
+      const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
+      const attended = attention.getCurrent();
+      shouldRevert.current = true;
+      onLayoutChange({ subject: attended[0], mode: 'solo' });
+    } else if (isNotMobile && layoutMode === 'solo' && shouldRevert.current) {
+      onLayoutChange({ revert: true });
+    }
+    // NOTE: Using `layoutMode` instead of `deck` to avoid infinite loops caused by object reference changes.
+  }, [isNotMobile, layoutMode, onLayoutChange]);
+
+  // When deck is disabled in settings, set to solo mode if the current layout mode is deck.
+  // TODO(thure): Applying this as an effect should be avoided over emitting the operation only when the setting changes.
+  useEffect(() => {
+    if (!settings?.enableDeck && layoutMode === 'multi') {
+      onLayoutChange({ subject: active[0], mode: 'solo' });
+    }
+  }, [settings?.enableDeck, onLayoutChange, active, layoutMode]);
+
+  const handleNavigationSidebarStateChange = useCallback(
+    (next: typeof sidebarState) => {
+      updateState((s) => ({ ...s, sidebarState: next }));
+    },
+    [updateState],
+  );
+
+  const handleComplementarySidebarStateChange = useCallback(
+    (next: typeof complementarySidebarState) => {
+      updateState((s) => ({ ...s, complementarySidebarState: next }));
+    },
+    [updateState],
+  );
+
+  return (
+    <Main.Root
+      navigationSidebarState={fullscreen ? 'closed' : sidebarState}
+      complementarySidebarState={fullscreen ? 'closed' : complementarySidebarState}
+      onNavigationSidebarStateChange={handleNavigationSidebarStateChange}
+      onComplementarySidebarStateChange={handleComplementarySidebarStateChange}
+    >
+      <Sidebar />
+      <ComplementarySidebar current={complementarySidebarPanel} />
+      <Main.Overlay />
+      {children}
+      {topbar && <Banner variant='topbar' />}
+      {hoistStatusbar && <StatusBar showHints={settings?.showHints} />}
+    </Main.Root>
+  );
+};
+
+DeckContent.displayName = DECK_CONTENT_NAME;

package/src/containers/Deck/DeckRoot.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+import { type PluginManager } from '@dxos/app-framework';
+
+import { type DeckStateHook } from '../../hooks/useDeckState';
+import { type LayoutMode, type Settings } from '#types';
+import React, { PropsWithChildren } from 'react';
+
+const DECK_NAME = 'Deck';
+const DECK_ROOT_NAME = 'DeckRoot';
+
+/** Request to change the layout mode. */
+export type DeckLayoutChangeRequest = { subject?: string; mode: LayoutMode } | { revert: true };
+
+//
+// Context
+//
+
+export type DeckContextValue = {
+  /** Deck plugin settings. */
+  settings?: Settings.Settings;
+  /** Plugin manager for capability access. */
+  pluginManager: PluginManager.PluginManager;
+  /** Layout mode. */
+  layoutMode: LayoutMode;
+  /** Callback for layout mode changes. */
+  onLayoutChange: (request: DeckLayoutChangeRequest) => void;
+} & Pick<DeckStateHook, 'state' | 'deck' | 'updateState'>;
+
+export const [DeckProvider, useDeckContext] = createContext<DeckContextValue>(DECK_NAME);
+
+//
+// Root
+//
+
+export type DeckRootProps = PropsWithChildren<DeckContextValue>;
+
+/**
+ * Headless root that provides Deck context.
+ */
+export const DeckRoot = ({ children, ...context }: DeckRootProps) => {
+  return <DeckProvider {...context}>{children}</DeckProvider>;
+};
+
+DeckRoot.displayName = DECK_ROOT_NAME;

package/src/containers/Deck/DeckViewport.tsx

@@ -0,0 +1,397 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, {
+  Fragment,
+  memo,
+  type PropsWithChildren,
+  type UIEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+
+import { addEventListener } from '@dxos/async';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { invariant } from '@dxos/invariant';
+import { useNode } from '@dxos/plugin-graph';
+import { Main, type MainContentProps, useOnTransition } from '@dxos/react-ui';
+import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from '@dxos/react-ui-stack';
+import { mainPaddingTransitions, mx } from '@dxos/ui-theme';
+
+import { useBreakpoints, useCompanions, useDeckState, useHoistStatusbar, useSelectedCompanion } from '#hooks';
+import { DeckOperation } from '#operations';
+import { calculateOverscroll, layoutAppliesTopbar } from '../../util';
+import { Plank, PlankRootProps, type PlankComponentProps } from '../Plank';
+import {
+  ToggleComplementarySidebarButton as NativeToggleComplementarySidebarButton,
+  ToggleSidebarButton as NativeToggleSidebarButton,
+} from '../Sidebar';
+
+import { useDeckContext } from './DeckRoot';
+import { getMode } from '#types';
+
+const DECK_VIEWPORT_NAME = 'DeckViewport';
+
+//
+// DeckViewport
+//
+
+export type DeckViewportProps = PropsWithChildren;
+
+/**
+ * Deck viewport that renders the main content area and sets CSS variables for plank sizing.
+ */
+export const DeckViewport = ({ children }: DeckViewportProps) => {
+  const {
+    deck: { active, solo, plankSizing },
+    state: { sidebarState, complementarySidebarState },
+    settings,
+    layoutMode,
+  } = useDeckContext(DECK_VIEWPORT_NAME);
+
+  const breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
+
+  return (
+    <Main.Content
+      bounce
+      handlesFocus
+      classNames={[
+        'grid top-[env(safe-area-inset-top)]!',
+        topbar && 'top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]!',
+        hoistStatusbar && 'lg:bottom-(--dx-statusbar-size)',
+      ]}
+      style={
+        {
+          '--main-spacing': settings?.encapsulatedPlanks ? '0.75rem' : '0',
+          '--main-sidebar-width':
+            sidebarState === 'expanded'
+              ? 'var(--dx-nav-sidebar-size)'
+              : sidebarState === 'collapsed'
+                ? 'var(--dx-l0-size)'
+                : '0',
+          '--main-complementary-width':
+            complementarySidebarState === 'expanded'
+              ? 'var(--dx-complementary-sidebar-size)'
+              : complementarySidebarState === 'collapsed'
+                ? 'var(--dx-rail-size)'
+                : '0',
+          '--main-content-first-width': `${plankSizing[active[0] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+          '--main-content-last-width': `${plankSizing[active[(active.length ?? 1) - 1] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+        } as MainContentProps['style']
+      }
+    >
+      {children}
+    </Main.Content>
+  );
+};
+
+DeckViewport.displayName = DECK_VIEWPORT_NAME;
+
+//
+// ContentEmpty
+//
+
+export const DeckContentEmpty = () => {
+  const breakpoint = useBreakpoints();
+  const { deck } = useDeckState();
+  const layoutMode = getMode(deck);
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  return (
+    <div
+      role='none'
+      className='grid place-items-center p-8 relative bg-deck-surface'
+      data-testid='layoutPlugin.firstRunMessage'
+    >
+      <Surface.Surface role='keyshortcuts' />
+      {!topbar && <ToggleSidebarButton />}
+    </div>
+  );
+};
+
+//
+// DeckSoloMode
+//
+
+/**
+ * Single-plank layout with optional companion.
+ */
+export const DeckSoloMode = () => {
+  const { deck, settings, layoutMode } = useDeckContext('DeckSoloMode');
+  const { companionOpen, companionVariant, fullscreen, solo } = deck;
+  const effectiveCompanionVariant = companionOpen ? companionVariant : undefined;
+  const breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  invariant(solo);
+
+  return (
+    <div role='none' className='relative overflow-hidden bg-deck-surface'>
+      <DeckSidebarToggles topbar={topbar} fullscreen={fullscreen} />
+      <StackContext.Provider
+        value={{
+          orientation: 'horizontal',
+          size: 'contain',
+          rail: true,
+        }}
+      >
+        <PlankContainer
+          id={solo}
+          part='solo'
+          layoutMode={layoutMode}
+          companionVariant={effectiveCompanionVariant}
+          settings={settings}
+        />
+      </StackContext.Provider>
+    </div>
+  );
+};
+
+//
+// DeckMultiMode
+//
+
+/**
+ * Multi-plank horizontal scrolling layout.
+ */
+export const DeckMultiMode = () => {
+  const {
+    deck: { active, companionOpen, companionVariant, fullscreen },
+    settings,
+    layoutMode,
+  } = useDeckContext('DeckMultiMode');
+  const effectiveCompanionVariant = companionOpen ? companionVariant : undefined;
+  const breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const deckRef = useRef<HTMLDivElement>(null);
+
+  /** Clear scroll restoration state if the window is resized. */
+  const scrollLeftRef = useRef<number>(null);
+  useEffect(
+    () =>
+      addEventListener(window, 'resize', () => {
+        scrollLeftRef.current = null;
+      }),
+    [],
+  );
+
+  const restoreScroll = useCallback(() => {
+    if (deckRef.current && scrollLeftRef.current != null) {
+      deckRef.current.scrollLeft = scrollLeftRef.current;
+    }
+  }, []);
+
+  useOnTransition(layoutMode, (mode) => mode !== 'multi', 'multi', restoreScroll);
+
+  /** Save scroll position as the user scrolls. */
+  const handleScroll = useCallback((event: UIEvent) => {
+    if (event.currentTarget === event.target) {
+      scrollLeftRef.current = (event.target as HTMLDivElement).scrollLeft;
+    }
+  }, []);
+
+  // Create order map.
+  const { order, itemsCount } = useMemo(() => {
+    return active.reduce(
+      (acc: { order: Record<string, number>; itemsCount: number }, entryId) => {
+        acc.order[entryId] = acc.itemsCount + 1;
+        acc.itemsCount += companionOpen ? 3 : 2;
+        return acc;
+      },
+      { order: {}, itemsCount: 0 },
+    );
+  }, [active, companionOpen]);
+
+  const padding = useMemo(
+    () => (settings?.overscroll === 'centering' ? calculateOverscroll(active.length) : {}),
+    [settings?.overscroll, active.length],
+  );
+
+  return (
+    <div role='none' className='relative bg-deck-surface overflow-hidden'>
+      <DeckSidebarToggles topbar={topbar} fullscreen={fullscreen} />
+      <Stack
+        classNames={[
+          'absolute h-[calc(100%-2*var(--main-spacing))] w-full inset-y-(--main-spacing) -inset-w-px',
+          mainPaddingTransitions,
+        ]}
+        style={padding}
+        orientation='horizontal'
+        size='contain'
+        itemsCount={itemsCount - 1}
+        onScroll={handleScroll}
+        ref={deckRef}
+      >
+        {active.map((entryId) => (
+          <Fragment key={entryId}>
+            {/* TODO(burdon): Setting for separator. */}
+            <PlankSeparator hidden order={order[entryId] - 1} encapsulate={!!settings?.encapsulatedPlanks} />
+            <PlankContainer
+              id={entryId}
+              part='multi'
+              active={active}
+              order={order[entryId]}
+              layoutMode={layoutMode}
+              companionVariant={effectiveCompanionVariant}
+              settings={settings}
+            />
+          </Fragment>
+        ))}
+      </Stack>
+    </div>
+  );
+};
+
+//
+// SidebarToggles
+//
+
+const sidebarToggleStyles = 'h-(--dx-rail-item) w-(--dx-rail-item) absolute bottom-2 z-[1] bg-deck-surface! lg:hidden';
+
+const ToggleSidebarButton = () => <NativeToggleSidebarButton classNames={mx(sidebarToggleStyles, 'left-2')} />;
+const ToggleComplementarySidebarButton = () => (
+  <NativeToggleComplementarySidebarButton classNames={mx(sidebarToggleStyles, 'right-2')} />
+);
+
+const DeckSidebarToggles = ({ topbar, fullscreen }: { topbar: boolean; fullscreen: boolean }) => {
+  if (topbar || fullscreen) {
+    return null;
+  }
+
+  return (
+    <>
+      <ToggleSidebarButton />
+      <ToggleComplementarySidebarButton />
+    </>
+  );
+};
+
+//
+// PlankSeparator
+//
+
+const PlankSeparator = ({ order, hidden, encapsulate }: { order: number; hidden?: boolean; encapsulate?: boolean }) =>
+  order > 0 && (
+    <span
+      role='separator'
+      className={mx('row-span-2 bg-deck-surface', hidden && 'hidden', encapsulate ? 'w-0' : 'w-4')}
+      style={{ gridColumn: order }}
+    />
+  );
+
+//
+// PlankContainer
+//
+
+type PlankContainerProps = Pick<PlankRootProps, 'layoutMode' | 'part' | 'settings'> &
+  Pick<PlankComponentProps, 'id'> &
+  Partial<Pick<PlankComponentProps, 'path' | 'order' | 'active'>> & {
+    companionVariant?: string;
+  };
+
+/**
+ * Connected Plank that calls hooks and renders the radix-style Plank tree.
+ * This is the bridge between DeckViewport (which knows about framework hooks) and
+ * the pure Plank components (which receive everything via context).
+ */
+const PlankContainer = memo(
+  ({ id, layoutMode, part, order, settings, companionVariant, ...props }: PlankContainerProps) => {
+    const { graph } = useAppGraph();
+    const { invokePromise } = useOperationInvoker();
+    const { state, deck } = useDeckState();
+    const node = useNode(graph, id);
+    const companions = useCompanions(id);
+    const { companionId } = useSelectedCompanion(companions, companionVariant);
+    const resolvedCompanionId = companionVariant ? companionId : undefined;
+    const currentCompanion = companions.find(({ id }) => id === resolvedCompanionId);
+    const hasCompanion = !!(resolvedCompanionId && currentCompanion);
+
+    const handleAdjust = useCallback(
+      (plankId: string, type: DeckOperation.PartAdjustment) => {
+        if (type === 'close') {
+          if (part === 'complementary') {
+            return invokePromise(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
+          } else {
+            return invokePromise(LayoutOperation.Close, { subject: [plankId] });
+          }
+        } else {
+          return invokePromise(DeckOperation.Adjust, { type, id: plankId });
+        }
+      },
+      [invokePromise, part],
+    );
+
+    const handleResize = useCallback(
+      (plankId: string, size: number) => invokePromise(DeckOperation.UpdatePlankSize, { id: plankId, size }),
+      [invokePromise],
+    );
+
+    const handleScrollIntoView = useCallback(
+      (subject?: string) => invokePromise(LayoutOperation.ScrollIntoView, { subject }),
+      [invokePromise],
+    );
+
+    const handleChangeCompanion = useCallback(
+      (companion: string | null) => invokePromise(DeckOperation.ChangeCompanion, { companion }),
+      [invokePromise],
+    );
+
+    return (
+      <Plank.Root
+        graph={graph}
+        layoutMode={layoutMode}
+        part={part}
+        settings={settings}
+        popoverAnchorId={state.popoverAnchorId}
+        scrollIntoView={state.scrollIntoView}
+        plankSizing={deck.plankSizing}
+        onAdjust={handleAdjust}
+        onResize={handleResize}
+        onScrollIntoView={handleScrollIntoView}
+        onChangeCompanion={handleChangeCompanion}
+      >
+        <Plank.Content solo={part === 'solo'} companion={hasCompanion} encapsulate={!!settings?.encapsulatedPlanks}>
+          <Plank.Component
+            {...props}
+            id={id}
+            node={node}
+            companioned={hasCompanion ? 'primary' : undefined}
+            companions={hasCompanion ? [] : companions}
+            order={order}
+            {...(part === 'solo'
+              ? {
+                  part: 'solo-primary',
+                }
+              : {
+                  part,
+                })}
+          />
+          {hasCompanion && (
+            <Plank.Component
+              {...props}
+              id={resolvedCompanionId}
+              node={currentCompanion}
+              companions={companions}
+              companioned='companion'
+              primary={node}
+              {...(part === 'solo'
+                ? {
+                    part: 'solo-companion',
+                    order,
+                  }
+                : {
+                    part,
+                    order: (order ?? 0) + 1,
+                  })}
+            />
+          )}
+        </Plank.Content>
+      </Plank.Root>
+    );
+  },
+);