@dxos/plugin-deck 0.8.1-main.303c73a → 0.8.1-main.81238a8

package/dist/lib/browser/{chunk-63K74E3J.mjs → chunk-7YPIAXSW.mjs}

@@ -3,20 +3,21 @@ import {
   layoutAppliesTopbar,
   useBreakpoints,
   useHoistStatusbar
-} from "./chunk-YCKJNTKG.mjs";
+} from "./chunk-RZLH5F56.mjs";
 import {
   DeckCapabilities
-} from "./chunk-22AQ5IVX.mjs";
+} from "./chunk-WCNPMAR4.mjs";
 import {
   DeckAction,
   NewPlankPositions,
   OverscrollOptions,
   SLUG_PATH_SEPARATOR,
-  getMode
-} from "./chunk-FYKBOM3C.mjs";
+  getMode,
+  surfaceVariantSeparator
+} from "./chunk-7X43JKZG.mjs";
 import {
   DECK_PLUGIN
-} from "./chunk-N7TEPFVR.mjs";
+} from "./chunk-2WTHB3TG.mjs";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Banner.tsx
 import React2 from "react";
@@ -100,10 +101,10 @@ var Banner = ({ variant, classNames }) => {
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
 import { untracked } from "@preact/signals-core";
-import React17, { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef2, Fragment as Fragment3, useState as useState4 } from "react";
-import { LayoutAction as LayoutAction4, createIntent as createIntent4, Surface as Surface10, useCapability as useCapability5, useIntentDispatcher as useIntentDispatcher4, usePluginManager } from "@dxos/app-framework";
+import React17, { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef2, Fragment as Fragment4, useState as useState4 } from "react";
+import { LayoutAction as LayoutAction4, createIntent as createIntent5, Surface as Surface10, useCapability as useCapability5, useIntentDispatcher as useIntentDispatcher5, usePluginManager } from "@dxos/app-framework";
 import { AttentionCapabilities } from "@dxos/plugin-attention";
-import { AlertDialog, Dialog as NaturalDialog, Main as Main3, Popover as Popover2, useOnTransition, useMediaQuery } from "@dxos/react-ui";
+import { AlertDialog, Dialog as NaturalDialog, Main as Main3, Popover as Popover2, useMediaQuery, useOnTransition } from "@dxos/react-ui";
 import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from "@dxos/react-ui-stack";
 import { mainPaddingTransitions } from "@dxos/react-ui-theme";
 
@@ -192,8 +193,8 @@ var ActiveNode = () => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
-import React8, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useState as useState3, Fragment as Fragment2 } from "react";
-import { createIntent as createIntent2, LayoutAction as LayoutAction2, Surface as Surface4, useAppGraph as useAppGraph3, useCapabilities, useCapability as useCapability2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import React8, { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo2, useState as useState3, Fragment as Fragment2 } from "react";
+import { createIntent as createIntent3, LayoutAction as LayoutAction2, Surface as Surface4, useAppGraph as useAppGraph3, useCapabilities, useCapability as useCapability2, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
 import { Main, useTranslation as useTranslation5, toLocalizedString as toLocalizedString2, IconButton as IconButton2, ScrollArea as NaturalScrollArea } from "@dxos/react-ui";
 import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
 import { Tabs } from "@dxos/react-ui-tabs";
@@ -205,15 +206,18 @@ import { useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { descriptionText, mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
-import React5, { Fragment, memo, useCallback, useEffect as useEffect3, useMemo } from "react";
-import { createIntent, LayoutAction, Surface as Surface3, useAppGraph as useAppGraph2, useIntentDispatcher } from "@dxos/app-framework";
+import React5, { Fragment, memo, useCallback as useCallback2, useEffect as useEffect3, useMemo } from "react";
+import { createIntent as createIntent2, LayoutAction, Surface as Surface3, useAppGraph as useAppGraph2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { Icon as Icon2, Popover, toLocalizedString, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { StackItem } from "@dxos/react-ui-stack";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/PlankControls.tsx
-import React4, { forwardRef } from "react";
+import React4, { forwardRef, useCallback } from "react";
+import { createIntent, useIntentDispatcher } from "@dxos/app-framework";
+import { invariant } from "@dxos/invariant";
 import { Button, ButtonGroup, Icon, Tooltip, useTranslation as useTranslation2 } from "@dxos/react-ui";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-deck/src/components/DeckLayout/PlankControls.tsx";
 var PlankControl = ({ icon, label: label3, ...props }) => {
   return /* @__PURE__ */ React4.createElement(Tooltip.Root, null, /* @__PURE__ */ React4.createElement(Tooltip.Trigger, {
     asChild: true
@@ -229,9 +233,39 @@ var PlankControl = ({ icon, label: label3, ...props }) => {
     side: "bottom"
   }, label3)));
 };
+var plankControlSpacing = "pli-2 plb-3";
+var PlankCompanionControls = /* @__PURE__ */ forwardRef(({ primary }, forwardedRef) => {
+  const { t } = useTranslation2(DECK_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const handleCloseCompanion = useCallback(() => {
+    invariant(primary, void 0, {
+      F: __dxlog_file,
+      L: 66,
+      S: void 0,
+      A: [
+        "primary",
+        ""
+      ]
+    });
+    return dispatch(createIntent(DeckAction.ChangeCompanion, {
+      primary,
+      companion: null
+    }));
+  }, []);
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref: forwardedRef,
+    className: "contents app-no-drag"
+  }, /* @__PURE__ */ React4.createElement(PlankControl, {
+    label: t("close companion label"),
+    variant: "ghost",
+    icon: "ph--minus--regular",
+    onClick: handleCloseCompanion,
+    classNames: plankControlSpacing
+  }));
+});
 var PlankControls = /* @__PURE__ */ forwardRef(({ onClick, variant = "default", capabilities: can, isSolo, pin, close = false, children, classNames, ...props }, forwardedRef) => {
   const { t } = useTranslation2(DECK_PLUGIN);
-  const buttonClassNames = variant === "hide-disabled" ? "disabled:hidden pli-2 plb-3" : "pli-2 plb-3";
+  const buttonClassNames = variant === "hide-disabled" ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
   return /* @__PURE__ */ React4.createElement(ButtonGroup, {
     ...props,
     classNames: [
@@ -273,18 +307,26 @@ var fixedSidebarToggleStyles = mx2(sidebarToggleStyles, "inline-start-2");
 var fixedComplementarySidebarToggleStyles = mx2(sidebarToggleStyles, "inline-end-2");
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
-var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart, canIncrementEnd, popoverAnchorId, pending, actions = [] }) => {
+var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart, canIncrementEnd, popoverAnchorId, pending, actions = [], companioned, primaryId, surfaceVariant }) => {
   const { t } = useTranslation3(DECK_PLUGIN);
   const { graph } = useAppGraph2();
   const breakpoint = useBreakpoints();
   const icon = node?.properties?.icon ?? "ph--placeholder--regular";
-  const label3 = pending ? t("pending heading") : toLocalizedString(node?.properties?.label ?? [
+  const label3 = pending ? t("pending heading") : toLocalizedString((surfaceVariant ? Array.isArray(node?.properties?.label) ? [
+    `${surfaceVariant} plank heading`,
+    node.properties.label[1]
+  ] : [
+    "companion plank heading fallback label",
+    {
+      ns: DECK_PLUGIN
+    }
+  ] : node?.properties?.label) ?? [
     "plank heading fallback label",
     {
       ns: DECK_PLUGIN
     }
   ], t);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher2();
   const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
   useEffect3(() => {
     const frame = requestAnimationFrame(() => {
@@ -313,28 +355,28 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart
     node,
     graph
   ]);
-  const handleAction = useCallback((action) => {
+  const handleAction = useCallback2((action) => {
     typeof action.data === "function" && action.data?.({
       node: action,
       caller: DECK_PLUGIN
     });
   }, []);
-  const handlePlankAction = useCallback((eventType) => {
+  const handlePlankAction = useCallback2((eventType) => {
     if (eventType === "solo") {
-      return dispatch(createIntent(DeckAction.Adjust, {
+      return dispatch(createIntent2(DeckAction.Adjust, {
         type: eventType,
         id
       }));
     } else if (eventType === "close") {
       if (part === "complementary") {
-        return dispatch(createIntent(LayoutAction.UpdateComplementary, {
+        return dispatch(createIntent2(LayoutAction.UpdateComplementary, {
           part: "complementary",
           options: {
             state: "collapsed"
           }
         }));
       } else {
-        return dispatch(createIntent(LayoutAction.Close, {
+        return dispatch(createIntent2(LayoutAction.Close, {
           part: "main",
           subject: [
             id
@@ -345,7 +387,7 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart
         }));
       }
     } else {
-      return dispatch(createIntent(DeckAction.Adjust, {
+      return dispatch(createIntent2(DeckAction.Adjust, {
         type: eventType,
         id
       }));
@@ -358,9 +400,10 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart
   return /* @__PURE__ */ React5.createElement(StackItem.Heading, {
     classNames: [
       "plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag",
-      part === "solo" ? soloInlinePadding : "pli-1"
+      part === "solo" ? soloInlinePadding : "pli-1",
+      surfaceVariant && "pis-3"
     ]
-  }, /* @__PURE__ */ React5.createElement(ActionRoot, null, node && sigilActions ? /* @__PURE__ */ React5.createElement(StackItem.Sigil, {
+  }, !surfaceVariant && /* @__PURE__ */ React5.createElement(ActionRoot, null, node && sigilActions ? /* @__PURE__ */ React5.createElement(StackItem.Sigil, {
     icon,
     related: part === "complementary",
     attendableId,
@@ -391,7 +434,9 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart
     data: {
       subject: node.data
     }
-  }), /* @__PURE__ */ React5.createElement(PlankControls, {
+  }), companioned === "companion" ? /* @__PURE__ */ React5.createElement(PlankCompanionControls, {
+    primary: surfaceVariant ? id : primaryId
+  }) : /* @__PURE__ */ React5.createElement(PlankControls, {
     capabilities,
     isSolo: part === "solo",
     onClick: handlePlankAction,
@@ -444,7 +489,7 @@ var label = [
 ];
 var ComplementarySidebar = ({ current }) => {
   const { t } = useTranslation5(DECK_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher2();
+  const { dispatchPromise: dispatch } = useIntentDispatcher3();
   const layout = useCapability2(DeckCapabilities.MutableDeckState);
   const attended = useAttended2();
   const { graph } = useAppGraph3();
@@ -466,14 +511,14 @@ var ComplementarySidebar = ({ current }) => {
   }, [
     activePanelId
   ]);
-  const handleTabClick = useCallback2((event) => {
+  const handleTabClick = useCallback3((event) => {
     const nextValue = event.currentTarget.getAttribute("data-value");
     if (nextValue === activePanelId) {
       layout.complementarySidebarState = layout.complementarySidebarState === "expanded" ? "collapsed" : "expanded";
     } else {
       setInternalValue(nextValue);
       layout.complementarySidebarState = "expanded";
-      void dispatch(createIntent2(LayoutAction2.UpdateComplementary, {
+      void dispatch(createIntent3(LayoutAction2.UpdateComplementary, {
         part: "complementary",
         subject: nextValue
       }));
@@ -632,38 +677,38 @@ var Fullscreen = ({ id }) => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
-import React12, { memo as memo2, useCallback as useCallback3, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
-import { createIntent as createIntent3, LayoutAction as LayoutAction3, Surface as Surface7, useCapability as useCapability3, useAppGraph as useAppGraph5, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import React12, { Fragment as Fragment3, memo as memo2, useCallback as useCallback4, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
+import { createIntent as createIntent4, LayoutAction as LayoutAction3, Surface as Surface7, useCapability as useCapability3, useAppGraph as useAppGraph5, useIntentDispatcher as useIntentDispatcher4 } from "@dxos/app-framework";
 import { debounce } from "@dxos/async";
 import { useAttendableAttributes } from "@dxos/react-ui-attention";
 import { StackItem as StackItem2, railGridHorizontal } from "@dxos/react-ui-stack";
 import { mainIntrinsicSize, mx as mx5 } from "@dxos/react-ui-theme";
 var UNKNOWN_ID = "unknown_id";
-var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active, layoutMode }) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher3();
+var PlankImpl = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active, layoutMode, surfaceVariant, companioned, primaryId }) => {
+  const { dispatchPromise: dispatch } = useIntentDispatcher4();
   const { deck, popoverAnchorId, scrollIntoView } = useCapability3(DeckCapabilities.DeckState);
   const { graph } = useAppGraph5();
   const node = useNode(graph, id);
   const rootElement = useRef(null);
   const canResize = layoutMode === "deck";
-  const Root = part === "solo" ? "article" : StackItem2.Root;
+  const Root = part.startsWith("solo") ? "article" : StackItem2.Root;
   const attendableAttrs = useAttendableAttributes(id);
   const index = active ? active.findIndex((entryId) => entryId === id) : 0;
   const length = active?.length ?? 1;
   const canIncrementStart = active && index !== void 0 && index > 0 && length !== void 0 && length > 1;
   const canIncrementEnd = active && index !== void 0 && index < length - 1 && length !== void 0;
-  const key = id.split("+")[0];
-  const size = deck.plankSizing[key];
-  const setSize = useCallback3(debounce((nextSize) => {
-    return dispatch(createIntent3(DeckAction.UpdatePlankSize, {
-      id: key,
+  const sizeKey = `${id.split("+")[0]}${surfaceVariant ? `${surfaceVariantSeparator}${surfaceVariant}` : ""}`;
+  const size = deck.plankSizing[sizeKey];
+  const setSize = useCallback4(debounce((nextSize) => {
+    return dispatch(createIntent4(DeckAction.UpdatePlankSize, {
+      id: sizeKey,
       size: nextSize
     }));
   }, 200), [
     dispatch,
-    key
+    sizeKey
   ]);
-  const handleKeyDown = useCallback3((event) => {
+  const handleKeyDown = useCallback4((event) => {
     if (event.target === event.currentTarget && event.key === "Escape") {
       rootElement.current?.closest("main")?.focus();
     }
@@ -678,7 +723,7 @@ var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active,
         behavior: "smooth",
         inline: "center"
       });
-      void dispatch(createIntent3(LayoutAction3.ScrollIntoView, {
+      void dispatch(createIntent4(LayoutAction3.ScrollIntoView, {
         part: "current",
         subject: void 0
       }));
@@ -693,21 +738,23 @@ var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active,
   const sizeAttrs = useMainSize();
   const data = useMemo3(() => node && {
     subject: node.data,
+    variant: surfaceVariant,
     path,
     popoverAnchorId
   }, [
     node,
     node?.data,
     path,
-    popoverAnchorId
+    popoverAnchorId,
+    surfaceVariant
   ]);
   const placeholder = useMemo3(() => /* @__PURE__ */ React12.createElement(PlankLoading, null), []);
-  const className = mx5("attention-surface relative", isSolo && mainIntrinsicSize, isSolo && railGridHorizontal, isSolo ? "grid absolute inset-0" : "!border-separator border-li");
+  const className = mx5("attention-surface relative", isSolo && mainIntrinsicSize, isSolo && railGridHorizontal, isSolo && "grid absolute inset-0", part === "deck" && (companioned === "companion" ? "!border-separator border-ie" : "!border-separator border-li"), part.startsWith("solo-") && "row-span-2 min-is-0", part === "solo-companion" && "!border-separator border-is");
   return /* @__PURE__ */ React12.createElement(Root, {
     ref: rootElement,
     "data-testid": "deck.plank",
     tabIndex: 0,
-    ...part === "solo" ? {
+    ...part.startsWith("solo") ? {
       ...sizeAttrs,
       className
     } : {
@@ -724,11 +771,14 @@ var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active,
     onKeyDown: handleKeyDown
   }, node ? /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(NodePlankHeading, {
     id,
-    part,
+    part: part.startsWith("solo-") ? "solo" : part,
     node,
     canIncrementStart,
     canIncrementEnd,
-    popoverAnchorId
+    popoverAnchorId,
+    companioned,
+    primaryId,
+    surfaceVariant
   }), /* @__PURE__ */ React12.createElement(Surface7, {
     key: node.id,
     role: "article",
@@ -741,6 +791,42 @@ var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active,
     part
   }), canResize && /* @__PURE__ */ React12.createElement(StackItem2.ResizeHandle, null));
 });
+var SplitFrame = ({ children }) => {
+  const sizeAttrs = useMainSize();
+  return /* @__PURE__ */ React12.createElement("div", {
+    role: "none",
+    className: mx5("grid grid-cols-[1fr_1fr] absolute inset-0", railGridHorizontal, mainIntrinsicSize),
+    ...sizeAttrs
+  }, children);
+};
+var Plank = (props) => {
+  if (props.companionId) {
+    const Root = props.part === "solo" ? SplitFrame : Fragment3;
+    return /* @__PURE__ */ React12.createElement(Root, null, /* @__PURE__ */ React12.createElement(PlankImpl, {
+      ...props,
+      ...props.part === "solo" ? {
+        part: "solo-primary"
+      } : {},
+      companioned: "primary"
+    }), /* @__PURE__ */ React12.createElement(PlankImpl, {
+      ...props,
+      ...props.companionId.startsWith(surfaceVariantSeparator) ? {
+        surfaceVariant: props.companionId.substring(2)
+      } : {
+        id: props.companionId,
+        primaryId: props.id
+      },
+      ...props.part === "solo" ? {
+        part: "solo-companion"
+      } : {
+        order: props.order + 1
+      },
+      companioned: "companion"
+    }));
+  } else {
+    return /* @__PURE__ */ React12.createElement(PlankImpl, props);
+  }
+};
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Sidebar.tsx
 import React13, { useMemo as useMemo4 } from "react";
@@ -840,18 +926,18 @@ var Topbar = () => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
-var PlankSeparator = ({ index }) => index > 0 ? /* @__PURE__ */ React17.createElement("span", {
+var PlankSeparator = ({ order }) => order > 0 ? /* @__PURE__ */ React17.createElement("span", {
   role: "separator",
   className: "row-span-2 bg-deck is-4",
   style: {
-    gridColumn: index * 2
+    gridColumn: order
   }
 }) : null;
 var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher4();
+  const { dispatchPromise: dispatch } = useIntentDispatcher5();
   const context = useCapability5(DeckCapabilities.MutableDeckState);
   const { sidebarState, complementarySidebarState, complementarySidebarPanel, dialogOpen, dialogContent, dialogBlockAlign, dialogType, popoverOpen, popoverContent, popoverAnchorId, deck, toasts } = context;
-  const { active, fullscreen, solo, plankSizing } = deck;
+  const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
@@ -885,7 +971,7 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
         return attention.current;
       });
       shouldRevert.current = true;
-      void dispatch(createIntent4(LayoutAction4.SetLayoutMode, {
+      void dispatch(createIntent5(LayoutAction4.SetLayoutMode, {
         part: "mode",
         subject: attended[0],
         options: {
@@ -893,7 +979,7 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
         }
       }));
     } else if (isNotMobile && getMode(deck) === "solo" && shouldRevert.current) {
-      void dispatch(createIntent4(LayoutAction4.SetLayoutMode, {
+      void dispatch(createIntent5(LayoutAction4.SetLayoutMode, {
         part: "mode",
         options: {
           revert: true
@@ -905,7 +991,7 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
     deck,
     dispatch
   ]);
-  const handleResize = useCallback4(() => {
+  const handleResize = useCallback5(() => {
     scrollLeftRef.current = null;
   }, []);
   useEffect6(() => {
@@ -914,14 +1000,14 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
   }, [
     handleResize
   ]);
-  const restoreScroll = useCallback4(() => {
+  const restoreScroll = useCallback5(() => {
     if (deckRef.current && scrollLeftRef.current != null) {
       deckRef.current.scrollLeft = scrollLeftRef.current;
     }
   }, []);
   const layoutMode = getMode(deck);
   useOnTransition(layoutMode, (mode) => mode !== "deck", "deck", restoreScroll);
-  const handleScroll = useCallback4((event) => {
+  const handleScroll = useCallback5((event) => {
     if (!solo && event.currentTarget === event.target) {
       scrollLeftRef.current = event.target.scrollLeft;
     }
@@ -948,7 +1034,7 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
     hoistStatusbar
   ]);
   const Dialog = dialogType === "alert" ? AlertDialog : NaturalDialog;
-  const handlePopoverOpenChange = useCallback4((nextOpen) => {
+  const handlePopoverOpenChange = useCallback5((nextOpen) => {
     if (nextOpen && popoverAnchorId) {
       context.popoverOpen = true;
     } else {
@@ -959,9 +1045,22 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
   }, [
     context
   ]);
-  const handlePopoverClose = useCallback4(() => handlePopoverOpenChange(false), [
+  const handlePopoverClose = useCallback5(() => handlePopoverOpenChange(false), [
     handlePopoverOpenChange
   ]);
+  const { order, itemsCount } = useMemo5(() => {
+    return active.reduce((acc, entryId) => {
+      acc.order[entryId] = acc.itemsCount + 1;
+      acc.itemsCount += activeCompanions?.[entryId] ? 3 : 2;
+      return acc;
+    }, {
+      order: {},
+      itemsCount: 0
+    });
+  }, [
+    active,
+    activeCompanions
+  ]);
   return /* @__PURE__ */ React17.createElement(Popover2.Root, {
     modal: true,
     open: !!(popoverAnchorId && delayedPopoverVisibility),
@@ -1007,17 +1106,18 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
       mainPaddingTransitions
     ],
     onScroll: handleScroll,
-    itemsCount: 2 * (active.length ?? 0) - 1,
+    itemsCount: itemsCount - 1,
     style: padding,
     ref: deckRef
-  }, active.map((entryId, index) => /* @__PURE__ */ React17.createElement(Fragment3, {
+  }, active.map((entryId) => /* @__PURE__ */ React17.createElement(Fragment4, {
     key: entryId
   }, /* @__PURE__ */ React17.createElement(PlankSeparator, {
-    index
+    order: order[entryId] - 1
   }), /* @__PURE__ */ React17.createElement(Plank, {
     id: entryId,
+    companionId: activeCompanions?.[entryId],
     part: "deck",
-    order: index * 2 + 1,
+    order: order[entryId],
     active,
     layoutMode
   }))))), /* @__PURE__ */ React17.createElement("div", {
@@ -1038,6 +1138,7 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
     }
   }, /* @__PURE__ */ React17.createElement(Plank, {
     id: solo,
+    companionId: solo ? activeCompanions?.[solo] : void 0,
     part: "solo",
     layoutMode
   })))), topbar && /* @__PURE__ */ React17.createElement(Topbar, null), hoistStatusbar && /* @__PURE__ */ React17.createElement(StatusBar, {
@@ -1053,12 +1154,16 @@ var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
     modal: dialogBlockAlign !== "end",
     open: dialogOpen,
     onOpenChange: (nextOpen) => context.dialogOpen = nextOpen
-  }, dialogBlockAlign === "end" ? /* @__PURE__ */ React17.createElement(Surface10, {
-    role: "dialog",
-    data: dialogContent,
-    limit: 1,
-    fallback: PlankContentError
-  }) : /* @__PURE__ */ React17.createElement(Dialog.Overlay, {
+  }, dialogBlockAlign === "end" ? (
+    // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
+    /* @__PURE__ */ React17.createElement(Surface10, {
+      role: "dialog",
+      data: dialogContent,
+      limit: 1,
+      fallback: PlankContentError,
+      placeholder: /* @__PURE__ */ React17.createElement("div", null)
+    })
+  ) : /* @__PURE__ */ React17.createElement(Dialog.Overlay, {
     blockAlign: dialogBlockAlign
   }, /* @__PURE__ */ React17.createElement(Surface10, {
     role: "dialog",
@@ -1127,4 +1232,4 @@ export {
   DeckLayout,
   LayoutSettings
 };
-//# sourceMappingURL=chunk-63K74E3J.mjs.map
+//# sourceMappingURL=chunk-7YPIAXSW.mjs.map