@dxos/plugin-deck 0.6.14-staging.e15392e → 0.7.1-staging.599df14

package/dist/lib/browser/index.mjs

@@ -2,22 +2,26 @@ import {
   DECK_PLUGIN,
   meta_default
 } from "./chunk-GVOGPULO.mjs";
+import {
+  NewPlankPositions,
+  OverscrollOptions,
+  parsePanelPlugin
+} from "./chunk-NIRHDTX4.mjs";
 
 // packages/plugins/plugin-deck/src/DeckPlugin.tsx
 import { batch } from "@preact/signals-core";
 import { setAutoFreeze } from "immer";
-import React15 from "react";
-import { IntentAction, LayoutAction as LayoutAction3, NavigationAction as NavigationAction4, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR4, isLayoutParts, isLayoutAdjustment, isLayoutMode, openIds as openIds2 } from "@dxos/app-framework";
+import React16 from "react";
+import { IntentAction, LayoutAction as LayoutAction2, NavigationAction as NavigationAction3, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR4, isLayoutParts, isLayoutAdjustment, isLayoutMode, openIds as openIds2, filterPlugins } from "@dxos/app-framework";
 import { create, getTypename, isReactiveObject } from "@dxos/echo-schema";
 import { scheduledEffect } from "@dxos/echo-signals/core";
 import { LocalStorageStore } from "@dxos/local-storage";
 import { log } from "@dxos/log";
 import { parseAttentionPlugin } from "@dxos/plugin-attention";
-import { parseClientPlugin } from "@dxos/plugin-client";
 import { createExtension } from "@dxos/plugin-graph";
 import { ObservabilityAction } from "@dxos/plugin-observability/meta";
 import { fullyQualifiedId } from "@dxos/react-client/echo";
-import { translations as deckTranslations } from "@dxos/react-ui-deck";
+import { translations as stackTranslations } from "@dxos/react-ui-stack";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/constants.ts
 var NAV_ID = "NavTree";
@@ -26,10 +30,10 @@ var SURFACE_PREFIX = "surface:";
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
 import { Sidebar as MenuIcon } from "@phosphor-icons/react";
 import { untracked } from "@preact/signals-core";
-import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef2 } from "react";
+import React14, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef2, Fragment as Fragment2 } from "react";
 import { Surface as Surface9, firstIdInPart, usePlugin } from "@dxos/app-framework";
 import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useOnTransition, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { Deck } from "@dxos/react-ui-deck";
+import { Stack, StackContext as StackContext2, DEFAULT_HORIZONTAL_SIZE } from "@dxos/react-ui-stack";
 import { getSize, mainPaddingTransitions as mainPaddingTransitions2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
@@ -118,23 +122,100 @@ var ActiveNode = () => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
-import React5, { useMemo as useMemo2 } from "react";
+import React6, { useMemo as useMemo2 } from "react";
 import { NavigationAction as NavigationAction2, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR2, Surface as Surface3, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { useGraph as useGraph3 } from "@dxos/plugin-graph";
 import { Main } from "@dxos/react-ui";
 import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
-import { deckGrid } from "@dxos/react-ui-deck";
+import { railGridHorizontal, StackContext } from "@dxos/react-ui-stack";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
-import React2, { Fragment, memo, useEffect as useEffect3, useMemo } from "react";
+import React3, { Fragment, memo, useEffect as useEffect3, useMemo } from "react";
 import { LayoutAction, NavigationAction, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher } from "@dxos/app-framework";
 import { useGraph as useGraph2 } from "@dxos/plugin-graph";
-import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
-import { PlankHeading } from "@dxos/react-ui-deck";
+import { Icon as Icon2, Popover, toLocalizedString, useMediaQuery, useTranslation as useTranslation2, IconButton } from "@dxos/react-ui";
+import { StackItem } from "@dxos/react-ui-stack";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
-var NodePlankHeading = /* @__PURE__ */ memo(({ coordinate, node, canIncrementStart, canIncrementEnd, popoverAnchorId, pending, flatDeck, actions = [] }) => {
+
+// packages/plugins/plugin-deck/src/components/DeckLayout/PlankControls.tsx
+import React2, { forwardRef } from "react";
+import { Button, ButtonGroup, Icon, Tooltip, useTranslation } from "@dxos/react-ui";
+var PlankControl = ({ icon, label, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    ...props
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, label), /* @__PURE__ */ React2.createElement(Icon, {
+    icon,
+    size: 4
+  }))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, {
+    side: "bottom",
+    classNames: "z-[70]"
+  }, label)));
+};
+var PlankControls = /* @__PURE__ */ forwardRef(({ onClick, variant = "default", capabilities: can, isSolo, pin, close = false, children, ...props }, forwardedRef) => {
   const { t } = useTranslation(DECK_PLUGIN);
+  const buttonClassNames = variant === "hide-disabled" ? "disabled:hidden !pli-2 !plb-3" : "!pli-2 !plb-3";
+  return /* @__PURE__ */ React2.createElement(ButtonGroup, {
+    ...props,
+    ref: forwardedRef
+  }, pin && !isSolo && [
+    "both",
+    "start"
+  ].includes(pin) && /* @__PURE__ */ React2.createElement(PlankControl, {
+    label: t("pin start label"),
+    variant: "ghost",
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("pin-start"),
+    icon: "ph--caret-line-left--regular"
+  }), can.solo && /* @__PURE__ */ React2.createElement(PlankControl, {
+    label: isSolo ? t("show deck plank label") : t("show solo plank label"),
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("solo"),
+    icon: isSolo ? "ph--vibrate--regular" : "ph--arrows-out--regular"
+  }), !isSolo && can.solo && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PlankControl, {
+    label: t("increment start label"),
+    disabled: !can.incrementStart,
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("increment-start"),
+    icon: "ph--caret-left--regular"
+  }), /* @__PURE__ */ React2.createElement(PlankControl, {
+    label: t("increment end label"),
+    disabled: !can.incrementEnd,
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("increment-end"),
+    icon: "ph--caret-right--regular"
+  })), pin && !isSolo && [
+    "both",
+    "end"
+  ].includes(pin) && /* @__PURE__ */ React2.createElement(PlankControl, {
+    label: t("pin end label"),
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("pin-end"),
+    icon: "ph--caret-line-right--regular"
+  }), close && !isSolo && /* @__PURE__ */ React2.createElement(PlankControl, {
+    label: t(`${typeof close === "string" ? "minify" : "close"} label`),
+    classNames: buttonClassNames,
+    onClick: () => onClick?.("close"),
+    "data-testid": "plankHeading.close",
+    icon: close === "minify-start" ? "ph--caret-line-left--regular" : close === "minify-end" ? "ph--caret-line-right--regular" : "ph--x--regular"
+  }), children);
+});
+
+// packages/plugins/plugin-deck/src/components/LayoutContext.ts
+import { createContext, useContext } from "react";
+import { raise } from "@dxos/debug";
+var LayoutContext = createContext(null);
+var useLayout = () => useContext(LayoutContext) ?? raise(new Error("Missing LayoutContext"));
+
+// packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
+var NodePlankHeading = /* @__PURE__ */ memo(({ coordinate, node, canIncrementStart, canIncrementEnd, popoverAnchorId, pending, actions = [] }) => {
+  const layoutContext = useLayout();
+  const { t } = useTranslation2(DECK_PLUGIN);
   const { graph } = useGraph2();
   const icon = node?.properties?.icon ?? "ph--placeholder--regular";
   const label = pending ? t("pending heading") : toLocalizedString(node?.properties?.label ?? [
@@ -166,9 +247,9 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ coordinate, node, canIncrementSta
     canIncrementStart,
     canIncrementEnd
   ]);
-  return /* @__PURE__ */ React2.createElement(PlankHeading.Root, (layoutPart !== "main" || !flatDeck) && {
-    classNames: "pie-1 border-b border-separator"
-  }, /* @__PURE__ */ React2.createElement(ActionRoot, null, node ? /* @__PURE__ */ React2.createElement(PlankHeading.ActionsMenu, {
+  return /* @__PURE__ */ React3.createElement(StackItem.Heading, {
+    classNames: "pie-1 border-be border-separator"
+  }, /* @__PURE__ */ React3.createElement(ActionRoot, null, node ? /* @__PURE__ */ React3.createElement(StackItem.Sigil, {
     icon,
     related: layoutPart === "complementary",
     attendableId,
@@ -181,35 +262,36 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ coordinate, node, canIncrementSta
       node: action,
       caller: DECK_PLUGIN
     })
-  }, /* @__PURE__ */ React2.createElement(Surface2, {
+  }, /* @__PURE__ */ React3.createElement(Surface2, {
     role: "menu-footer",
     data: {
       object: node.data
     }
-  })) : /* @__PURE__ */ React2.createElement(PlankHeading.Button, null, /* @__PURE__ */ React2.createElement("span", {
+  })) : /* @__PURE__ */ React3.createElement(StackItem.SigilButton, null, /* @__PURE__ */ React3.createElement("span", {
     className: "sr-only"
-  }, label), /* @__PURE__ */ React2.createElement(Icon, {
+  }, label), /* @__PURE__ */ React3.createElement(Icon2, {
     icon,
     size: 5
-  }))), /* @__PURE__ */ React2.createElement(TextTooltip, {
+  }))), /* @__PURE__ */ React3.createElement(TextTooltip, {
     text: label,
     onlyWhenTruncating: true
-  }, /* @__PURE__ */ React2.createElement(PlankHeading.Label, {
+  }, /* @__PURE__ */ React3.createElement(StackItem.HeadingLabel, {
     attendableId,
     related: layoutPart === "complementary",
     ...pending && {
       classNames: "text-description"
     }
   }, label)), node && layoutPart !== "complementary" && // TODO(Zan): What are we doing with layout coordinate here?
-  /* @__PURE__ */ React2.createElement(Surface2, {
+  /* @__PURE__ */ React3.createElement(Surface2, {
     role: "navbar-end",
     direction: "inline-reverse",
     data: {
       object: node.data
     }
-  }), /* @__PURE__ */ React2.createElement(PlankHeading.Controls, {
+  }), /* @__PURE__ */ React3.createElement(PlankControls, {
     capabilities,
     isSolo: layoutPart === "solo",
+    classNames: "mx-1",
     onClick: (eventType) => {
       if (!layoutPart) {
         return;
@@ -259,22 +341,31 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ coordinate, node, canIncrementSta
       }
     },
     close: layoutPart === "complementary" ? "minify-end" : true
-  }));
+  }, layoutPart !== "complementary" && /* @__PURE__ */ React3.createElement(IconButton, {
+    iconOnly: true,
+    onClick: () => layoutContext.complementarySidebarOpen = !layoutContext.complementarySidebarOpen,
+    variant: "ghost",
+    label: t("open complementary sidebar label"),
+    classNames: "!pli-2 !plb-3 [&>svg]:-scale-x-100",
+    icon: "ph--sidebar-simple--regular",
+    size: 4,
+    tooltipZIndex: "70"
+  })));
 });
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/PlankError.tsx
-import React4, { useEffect as useEffect4, useState as useState2 } from "react";
-import { useTranslation as useTranslation2 } from "@dxos/react-ui";
+import React5, { useEffect as useEffect4, useState as useState2 } from "react";
+import { useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { descriptionText, mx } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/PlankLoading.tsx
-import React3 from "react";
+import React4 from "react";
 import { Status } from "@dxos/react-ui";
 var PlankLoading = () => {
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     role: "none",
-    className: "grid bs-[100dvh] place-items-center row-span-2"
-  }, /* @__PURE__ */ React3.createElement(Status, {
+    className: "grid place-items-center attention-surface"
+  }, /* @__PURE__ */ React4.createElement(Status, {
     indeterminate: true,
     "aria-label": "Initializing"
   }));
@@ -282,74 +373,41 @@ var PlankLoading = () => {
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/PlankError.tsx
 var PlankContentError = ({ error }) => {
-  const { t } = useTranslation2(DECK_PLUGIN);
-  return /* @__PURE__ */ React4.createElement("div", {
+  const { t } = useTranslation3(DECK_PLUGIN);
+  const errorString = error?.toString() ?? "";
+  return /* @__PURE__ */ React5.createElement("div", {
     role: "none",
-    className: "grid place-items-center row-span-2"
-  }, /* @__PURE__ */ React4.createElement("p", {
+    className: "overflow-auto p-8 attention-surface grid place-items-center"
+  }, /* @__PURE__ */ React5.createElement("p", {
     role: "alert",
-    className: mx(
-      descriptionText,
-      // TODO(burdon): Factor out common styles for all dialogs.
-      "overflow-hidden break-words",
-      "place-self-center border border-dashed border-neutral-400/50 rounded-lg text-center p-8 font-normal text-lg"
-    )
-  }, error ? error.toString() : t("error fallback message")));
+    className: mx(descriptionText, "break-words border border-dashed border-separator rounded-lg p-8", errorString.length < 256 && "text-lg")
+  }, error ? errorString : t("error fallback message")));
 };
-var PlankError = ({ layoutCoordinate, node, error, flatDeck }) => {
+var PlankError = ({ layoutCoordinate, node, error }) => {
   const [timedOut, setTimedOut] = useState2(false);
   useEffect4(() => {
     setTimeout(() => setTimedOut(true), 5e3);
   }, []);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(NodePlankHeading, {
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(NodePlankHeading, {
     coordinate: layoutCoordinate,
     node,
-    pending: !timedOut,
-    flatDeck
-  }), timedOut ? /* @__PURE__ */ React4.createElement(PlankContentError, {
+    pending: !timedOut
+  }), timedOut ? /* @__PURE__ */ React5.createElement(PlankContentError, {
     error
-  }) : /* @__PURE__ */ React4.createElement(PlankLoading, null));
+  }) : /* @__PURE__ */ React5.createElement(PlankLoading, null));
 };
 
-// packages/plugins/plugin-deck/src/components/LayoutContext.ts
-import { createContext, useContext } from "react";
-import { raise } from "@dxos/debug";
-var LayoutContext = createContext(null);
-var useLayout = () => useContext(LayoutContext) ?? raise(new Error("Missing LayoutContext"));
-
 // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
-var panels = [
-  {
-    id: "settings",
-    icon: "ph--gear--regular"
-  },
-  {
-    id: "comments",
-    icon: "ph--chat-text--regular"
-  },
-  {
-    id: "automation",
-    icon: "ph--atom--regular"
-  },
-  {
-    id: "debug",
-    icon: "ph--bug--regular"
-  }
-];
-var getPanel = (id) => {
-  const panel = panels.find((p) => p.id === id) ?? panels[0];
-  return panel.id;
-};
-var ComplementarySidebar = ({ panel, flatDeck }) => {
+var ComplementarySidebar = ({ panels, current }) => {
   const { popoverAnchorId } = useLayout();
   const attended = useAttended2();
-  const part = getPanel(panel);
-  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR2}${part}` : void 0;
+  const panel = (panels.find((p) => p.id === current) ?? panels[0])?.id;
+  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR2}${panel}` : void 0;
   const { graph } = useGraph3();
   const node = useNode(graph, id);
   const dispatch = useIntentDispatcher2();
   useNodeActionExpander(node);
-  const actions = useMemo2(() => panels.map(({ id: id2, icon }) => ({
+  const actions = useMemo2(() => panels.map(({ id: id2, label, icon }) => ({
     id: `complementary-${id2}`,
     data: () => {
       void dispatch({
@@ -362,18 +420,13 @@ var ComplementarySidebar = ({ panel, flatDeck }) => {
       });
     },
     properties: {
-      label: [
-        `open ${id2} label`,
-        {
-          ns: DECK_PLUGIN
-        }
-      ],
+      label,
       icon,
       menuItemType: "toggle",
-      isChecked: part === id2
+      isChecked: panel === id2
     }
   })), [
-    part
+    panel
   ]);
   const coordinate = useMemo2(() => ({
     entryId: id ?? "unknown",
@@ -381,62 +434,69 @@ var ComplementarySidebar = ({ panel, flatDeck }) => {
   }), [
     id
   ]);
-  return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar, null, /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React6.createElement(Main.ComplementarySidebar, null, /* @__PURE__ */ React6.createElement(StackContext.Provider, {
+    value: {
+      size: "contain",
+      orientation: "horizontal",
+      separators: false,
+      rail: true
+    }
+  }, /* @__PURE__ */ React6.createElement("div", {
     role: "none",
-    className: mx2(deckGrid, "grid-cols-1 bs-full")
-  }, /* @__PURE__ */ React5.createElement(NodePlankHeading, {
+    className: mx2(railGridHorizontal, "grid-cols-1 bs-full")
+  }, /* @__PURE__ */ React6.createElement(NodePlankHeading, {
     coordinate,
     node,
     popoverAnchorId,
-    flatDeck,
     actions
-  }), /* @__PURE__ */ React5.createElement("div", {
-    className: "row-span-2 divide-y divide-separator overflow-x-hidden overflow-y-scroll"
-  }, node && /* @__PURE__ */ React5.createElement(Surface3, {
+  }), /* @__PURE__ */ React6.createElement("div", {
+    className: "divide-y divide-separator overflow-x-hidden overflow-y-scroll"
+  }, node && /* @__PURE__ */ React6.createElement(Surface3, {
     key: id,
-    role: `complementary--${part}`,
+    role: `complementary--${panel}`,
+    limit: 1,
     data: {
       id,
       subject: node.properties.object ?? node.properties.space,
       popoverAnchorId
     },
     fallback: PlankContentError,
-    placeholder: /* @__PURE__ */ React5.createElement(PlankLoading, null)
-  }))));
+    placeholder: /* @__PURE__ */ React6.createElement(PlankLoading, null)
+  })))));
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
-import React6 from "react";
+import React7 from "react";
 import { Surface as Surface4 } from "@dxos/app-framework";
 var ContentEmpty = () => {
-  return /* @__PURE__ */ React6.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "min-bs-screen is-dvw sm:is-full flex items-center justify-center p-8",
     "data-testid": "layoutPlugin.firstRunMessage"
-  }, /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "grid place-items-center grid-rows-[min-content_min-content]"
-  }, /* @__PURE__ */ React6.createElement(Surface4, {
+  }, /* @__PURE__ */ React7.createElement(Surface4, {
     role: "keyshortcuts"
   })));
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Fullscreen.tsx
-import React8 from "react";
+import React9 from "react";
 import { Surface as Surface5 } from "@dxos/app-framework";
 import { useGraph as useGraph4 } from "@dxos/plugin-graph";
 import { fixedInsetFlexLayout } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Fallback.tsx
-import React7 from "react";
-import { useTranslation as useTranslation3 } from "@dxos/react-ui";
+import React8 from "react";
+import { useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { errorText, mx as mx3 } from "@dxos/react-ui-theme";
 var Fallback = () => {
-  const { t } = useTranslation3(DECK_PLUGIN);
-  return /* @__PURE__ */ React7.createElement("div", {
+  const { t } = useTranslation4(DECK_PLUGIN);
+  return /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: "min-bs-screen is-full flex items-center justify-center p-8"
-  }, /* @__PURE__ */ React7.createElement("p", {
+  }, /* @__PURE__ */ React8.createElement("p", {
     role: "alert",
     className: mx3(errorText, "border border-error-400/50 rounded-lg flex items-center justify-center p-8 font-normal text-lg")
   }, t("plugin error message")));
@@ -446,10 +506,10 @@ var Fallback = () => {
 var Fullscreen = ({ id }) => {
   const { graph } = useGraph4();
   const fullScreenNode = useNode(graph, id);
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: fixedInsetFlexLayout
-  }, /* @__PURE__ */ React8.createElement(Surface5, {
+  }, /* @__PURE__ */ React9.createElement(Surface5, {
     role: "main",
     limit: 1,
     fallback: Fallback,
@@ -461,15 +521,13 @@ var Fullscreen = ({ id }) => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
-import { Plus } from "@phosphor-icons/react";
-import React9, { memo as memo2, useCallback, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
-import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction3, Surface as Surface6, useIntentDispatcher as useIntentDispatcher3, indexInPart, partLength } from "@dxos/app-framework";
+import React10, { memo as memo2, useCallback, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
+import { Surface as Surface6, useIntentDispatcher as useIntentDispatcher3, indexInPart, partLength } from "@dxos/app-framework";
 import { debounce } from "@dxos/async";
 import { useGraph as useGraph5 } from "@dxos/plugin-graph";
-import { Button, Tooltip, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { useAttendableAttributes } from "@dxos/react-ui-attention";
-import { Plank as NaturalPlank } from "@dxos/react-ui-deck";
-import { mainIntrinsicSize } from "@dxos/react-ui-theme";
+import { StackItem as StackItem2, railGridHorizontal as railGridHorizontal2 } from "@dxos/react-ui-stack";
+import { mainIntrinsicSize, mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckContext.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -478,39 +536,40 @@ var DeckContext = createContext2(null);
 var useDeckContext = () => useContext2(DeckContext) ?? raise2(new Error("Missing DeckContext"));
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
-var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }) => {
-  const { t } = useTranslation4(DECK_PLUGIN);
+var UNKNOWN_ID = "unknown_id";
+var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, layoutMode, order, last }) => {
   const dispatch = useIntentDispatcher3();
-  const { popoverAnchorId, scrollIntoView } = useLayout();
-  const { plankSizing } = useDeckContext();
-  const { graph } = useGraph5();
-  const node = useNode(graph, entry.id);
-  const rootElement = useRef(null);
-  const resizeable = layoutMode === "deck";
-  const attendableAttrs = useAttendableAttributes(entry.id);
   const coordinate = useMemo3(() => ({
     part,
-    entryId: entry.id
+    entryId: entry?.id ?? UNKNOWN_ID
   }), [
-    entry.id,
+    entry?.id,
     part
   ]);
+  const { popoverAnchorId, scrollIntoView } = useLayout();
+  const { plankSizing } = useDeckContext();
+  const { graph } = useGraph5();
+  const node = useNode(graph, entry?.id);
+  const rootElement = useRef(null);
+  const canResize = layoutMode === "deck";
+  const Root = part === "solo" ? "article" : StackItem2.Root;
+  const attendableAttrs = useAttendableAttributes(coordinate.entryId);
   const index = indexInPart(layoutParts, coordinate);
   const length = partLength(layoutParts, part);
   const canIncrementStart = part === "main" && index !== void 0 && index > 0 && length !== void 0 && length > 1;
   const canIncrementEnd = part === "main" && index !== void 0 && index < length - 1 && length !== void 0;
-  const size = plankSizing?.[entry.id];
-  const setSize = useCallback(debounce((newSize) => {
-    void dispatch({
+  const size = plankSizing?.[coordinate.entryId];
+  const setSize = useCallback(debounce((nextSize) => {
+    return dispatch({
       action: DeckAction.UPDATE_PLANK_SIZE,
       data: {
-        id: entry.id,
-        size: newSize
+        id: coordinate.entryId,
+        size: nextSize
       }
     });
   }, 200), [
     dispatch,
-    entry.id
+    coordinate.entryId
   ]);
   const handleKeyDown = useCallback((event) => {
     if (event.target === event.currentTarget && event.key === "Escape") {
@@ -518,7 +577,7 @@ var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, flatDeck, searchE
     }
   }, []);
   useLayoutEffect(() => {
-    if (scrollIntoView === entry.id) {
+    if (scrollIntoView === coordinate.entryId) {
       rootElement.current?.focus({
         preventScroll: true
       });
@@ -528,14 +587,15 @@ var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, flatDeck, searchE
       });
     }
   }, [
+    coordinate.entryId,
     scrollIntoView,
     layoutMode
   ]);
   const isSolo = layoutMode === "solo" && part === "solo";
-  const isSuppressed = layoutMode === "solo" && part !== "solo" || layoutMode === "deck" && part === "solo";
+  const isAttendable = isSolo || layoutMode === "deck" && part === "main";
   const sizeAttrs = useMainSize();
   const data = useMemo3(() => node && {
-    ...entry.path ? {
+    ...entry?.path ? {
       subject: node.data,
       path: entry.path
     } : {
@@ -544,84 +604,52 @@ var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, flatDeck, searchE
     coordinate,
     popoverAnchorId
   }, [
-    node
+    node,
+    node?.data,
+    entry?.path,
+    coordinate,
+    popoverAnchorId
   ]);
-  const placeholder = useMemo3(() => /* @__PURE__ */ React9.createElement(PlankLoading, null), []);
-  return /* @__PURE__ */ React9.createElement(NaturalPlank.Root, {
-    size,
-    setSize,
-    classNames: [
-      isSuppressed && "!sr-only"
-    ],
-    ...attendableAttrs,
-    ...isSuppressed && {
-      inert: ""
+  const placeholder = useMemo3(() => /* @__PURE__ */ React10.createElement(PlankLoading, null), []);
+  const className = mx4("attention-surface relative", isSolo && mainIntrinsicSize, isSolo && railGridHorizontal2, isSolo ? "grid absolute inset-0" : "!border-separator border-li");
+  return /* @__PURE__ */ React10.createElement(Root, {
+    ref: rootElement,
+    "data-testid": "deck.plank",
+    tabIndex: 0,
+    ...part === "solo" ? {
+      ...sizeAttrs,
+      className
+    } : {
+      item: {
+        id: entry?.id ?? "never"
+      },
+      size,
+      onSizeChange: setSize,
+      classNames: className,
+      order,
+      role: "article"
     },
-    onKeyDown: handleKeyDown,
-    ref: rootElement
-  }, /* @__PURE__ */ React9.createElement(NaturalPlank.Content, {
-    ...isSolo && sizeAttrs,
-    classNames: [
-      isSolo && mainIntrinsicSize,
-      !flatDeck && "bg-base"
-    ],
-    style: isSolo ? {
-      inlineSize: ""
-    } : {}
-  }, node ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(NodePlankHeading, {
+    ...isAttendable ? attendableAttrs : {},
+    onKeyDown: handleKeyDown
+  }, node ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(NodePlankHeading, {
     coordinate,
     node,
     canIncrementStart,
     canIncrementEnd,
-    popoverAnchorId,
-    flatDeck
-  }), /* @__PURE__ */ React9.createElement(Surface6, {
+    popoverAnchorId
+  }), /* @__PURE__ */ React10.createElement(Surface6, {
     role: "article",
     data,
     limit: 1,
     fallback: PlankContentError,
     placeholder
-  })) : /* @__PURE__ */ React9.createElement(PlankError, {
-    layoutCoordinate: coordinate,
-    flatDeck
-  })), searchEnabled && resizeable ? /* @__PURE__ */ React9.createElement("div", {
-    role: "none",
-    className: "grid grid-rows-subgrid row-span-3"
-  }, /* @__PURE__ */ React9.createElement(Tooltip.Root, null, /* @__PURE__ */ React9.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React9.createElement(Button, {
-    "data-testid": "plankHeading.open",
-    variant: "ghost",
-    classNames: "p-1 w-fit",
-    onClick: () => dispatch([
-      {
-        action: LayoutAction2.SET_LAYOUT,
-        data: {
-          element: "dialog",
-          component: "dxos.org/plugin/search/Dialog",
-          dialogBlockAlign: "start",
-          subject: {
-            action: NavigationAction3.SET,
-            position: "add-after",
-            coordinate
-          }
-        }
-      }
-    ])
-  }, /* @__PURE__ */ React9.createElement("span", {
-    className: "sr-only"
-  }, t("insert plank label")), /* @__PURE__ */ React9.createElement(Plus, null))), /* @__PURE__ */ React9.createElement(Tooltip.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip.Content, {
-    side: "bottom",
-    classNames: "z-[70]"
-  }, t("insert plank label")))), /* @__PURE__ */ React9.createElement(NaturalPlank.ResizeHandle, {
-    classNames: "row-start-[toolbar-start] row-end-[content-end]"
-  })) : resizeable ? /* @__PURE__ */ React9.createElement(NaturalPlank.ResizeHandle, {
-    classNames: "row-span-3"
-  }) : null);
+  })) : /* @__PURE__ */ React10.createElement(PlankError, {
+    layoutCoordinate: coordinate
+  }), canResize && /* @__PURE__ */ React10.createElement(StackItem2.ResizeHandle, null));
 });
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Sidebar.tsx
-import React10, { useMemo as useMemo4 } from "react";
+import React11, { useMemo as useMemo4 } from "react";
 import { openIds, Surface as Surface7 } from "@dxos/app-framework";
 import { Main as Main2 } from "@dxos/react-ui";
 var Sidebar = ({ layoutParts }) => {
@@ -644,7 +672,7 @@ var Sidebar = ({ layoutParts }) => {
     popoverAnchorId,
     activeIds
   ]);
-  return /* @__PURE__ */ React10.createElement(Main2.NavigationSidebar, null, /* @__PURE__ */ React10.createElement(Surface7, {
+  return /* @__PURE__ */ React11.createElement(Main2.NavigationSidebar, null, /* @__PURE__ */ React11.createElement(Surface7, {
     role: "navigation",
     data: {
       ...navigationData
@@ -654,51 +682,51 @@ var Sidebar = ({ layoutParts }) => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/StatusBar.tsx
-import React11 from "react";
+import React12 from "react";
 import { Surface as Surface8 } from "@dxos/app-framework";
-import { mainPadding, mainPaddingTransitions, mx as mx4 } from "@dxos/react-ui-theme";
+import { mainPadding, mainPaddingTransitions, mx as mx5 } from "@dxos/react-ui-theme";
 var StatusBar = ({ showHints }) => {
   const sizeAttrs = useMainSize();
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React12.createElement("div", {
     role: "none",
     ...sizeAttrs,
-    className: mx4("fixed flex justify-between block-end-0 inset-inline-0 items-center border-bs border-separator z-[2]", mainPadding, mainPaddingTransitions)
-  }, /* @__PURE__ */ React11.createElement("div", {
+    className: mx5("fixed flex justify-between block-end-0 inset-inline-0 items-center border-bs border-separator z-[2]", mainPadding, mainPaddingTransitions)
+  }, /* @__PURE__ */ React12.createElement("div", {
     role: "none"
-  }, showHints && /* @__PURE__ */ React11.createElement(Surface8, {
+  }, showHints && /* @__PURE__ */ React12.createElement(Surface8, {
     role: "hints",
     limit: 1
-  })), /* @__PURE__ */ React11.createElement(Surface8, {
+  })), /* @__PURE__ */ React12.createElement(Surface8, {
     role: "status-bar",
     limit: 1
   }));
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Toast.tsx
-import React12 from "react";
-import { Button as Button2, Icon as Icon2, Toast as NaturalToast } from "@dxos/react-ui";
+import React13 from "react";
+import { Button as Button2, Icon as Icon3, Toast as NaturalToast } from "@dxos/react-ui";
 var Toast = ({ id, title, description, icon, duration, actionLabel, actionAlt, closeLabel, onAction, onOpenChange }) => {
-  return /* @__PURE__ */ React12.createElement(NaturalToast.Root, {
+  return /* @__PURE__ */ React13.createElement(NaturalToast.Root, {
     "data-testid": id,
     defaultOpen: true,
     duration,
     onOpenChange
-  }, /* @__PURE__ */ React12.createElement(NaturalToast.Body, null, /* @__PURE__ */ React12.createElement(NaturalToast.Title, {
+  }, /* @__PURE__ */ React13.createElement(NaturalToast.Body, null, /* @__PURE__ */ React13.createElement(NaturalToast.Title, {
     classNames: "items-center"
-  }, /* @__PURE__ */ React12.createElement(Icon2, {
+  }, icon && /* @__PURE__ */ React13.createElement(Icon3, {
     icon,
     size: 5,
     classNames: "inline mr-1"
-  }), /* @__PURE__ */ React12.createElement("span", null, title)), description && /* @__PURE__ */ React12.createElement(NaturalToast.Description, null, description)), /* @__PURE__ */ React12.createElement(NaturalToast.Actions, null, onAction && actionAlt && actionLabel && /* @__PURE__ */ React12.createElement(NaturalToast.Action, {
+  }), /* @__PURE__ */ React13.createElement("span", null, title)), description && /* @__PURE__ */ React13.createElement(NaturalToast.Description, null, description)), /* @__PURE__ */ React13.createElement(NaturalToast.Actions, null, onAction && actionAlt && actionLabel && /* @__PURE__ */ React13.createElement(NaturalToast.Action, {
     altText: actionAlt,
     asChild: true
-  }, /* @__PURE__ */ React12.createElement(Button2, {
+  }, /* @__PURE__ */ React13.createElement(Button2, {
     "data-testid": "toast.action",
     variant: "primary",
     onClick: () => onAction?.()
-  }, actionLabel)), closeLabel && /* @__PURE__ */ React12.createElement(NaturalToast.Close, {
+  }, actionLabel)), closeLabel && /* @__PURE__ */ React13.createElement(NaturalToast.Close, {
     asChild: true
-  }, /* @__PURE__ */ React12.createElement(Button2, {
+  }, /* @__PURE__ */ React13.createElement(Button2, {
     "data-testid": "toast.close"
   }, closeLabel))));
 };
@@ -722,53 +750,50 @@ var checkAppScheme = (url) => {
 var getEffectivePart = (partName, layoutMode) => layoutMode === "solo" && partName === "main" ? "solo" : partName;
 
 // packages/plugins/plugin-deck/src/util/overscroll.ts
-import { PLANK_DEFAULTS } from "@dxos/react-ui-deck";
-var calculateOverscroll = (planks, plankSizing, sidebarOpen, complementarySidebarOpen) => {
-  if (!planks?.length) {
+var calculateOverscroll = (planksCount) => {
+  if (!planksCount) {
     return {
       paddingInlineStart: 0,
       paddingInlineEnd: 0
     };
   }
-  const sidebarWidth = sidebarOpen ? "270px" : "0px";
-  const complementarySidebarWidth = complementarySidebarOpen ? "360px" : "0px";
-  const getPlankSize = (id) => (plankSizing[id] ?? PLANK_DEFAULTS.size).toFixed(2) + "rem";
-  if (planks.length === 1) {
-    const plank = planks[0];
-    const plankSize = getPlankSize(plank.id);
-    const overscrollPadding = `max(0px, calc(((100dvw - ${sidebarWidth} - ${complementarySidebarWidth} - (${plankSize} + 20px)) / 2)))`;
+  if (planksCount === 1) {
+    const overscrollPadding = "max(0px, calc(((100dvw - var(--dx-main-sidebarWidth) - var(--dx-main-complementaryWidth) - (var(--dx-main-contentFirstWidth) + 1px)) / 2)))";
     return {
       paddingInlineStart: overscrollPadding,
       paddingInlineEnd: overscrollPadding
     };
   } else {
-    const first = planks[0];
-    const firstSize = getPlankSize(first.id);
-    const last = planks[planks.length - 1];
-    const lastSize = getPlankSize(last.id);
     return {
-      paddingInlineStart: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
-      paddingInlineEnd: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`
+      paddingInlineStart: "max(0px, calc(((100dvw - (var(--dx-main-contentFirstWidth) + 1px)) / 2) - var(--dx-main-sidebarWidth)))",
+      paddingInlineEnd: "max(0px, calc(((100dvw - (var(--dx-main-contentLastWidth) + 1px)) / 2) - var(--dx-main-complementaryWidth)))"
     };
   }
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
-var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots, onDismissToast }) => {
+var PlankSeparator = ({ index }) => index > 0 ? /* @__PURE__ */ React14.createElement("span", {
+  role: "separator",
+  className: "row-span-2 bg-deck is-4",
+  style: {
+    gridColumn: index * 2
+  }
+}) : null;
+var DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismissToast }) => {
   const context = useLayout();
   const { layoutMode, sidebarOpen, complementarySidebarOpen, dialogOpen, dialogContent, dialogBlockAlign, popoverOpen, popoverContent, popoverAnchorId } = context;
   const { t } = useTranslation5(DECK_PLUGIN);
   const { plankSizing } = useDeckContext();
   const attentionPlugin = usePlugin("dxos.org/plugin/attention");
-  const searchPlugin = usePlugin("dxos.org/plugin/search");
   const fullScreenSlug = useMemo5(() => firstIdInPart(layoutParts, "fullScreen"), [
     layoutParts
   ]);
   const scrollLeftRef = useRef2();
   const deckRef = useRef2(null);
+  const isSoloModeLoaded = layoutMode === "solo" && Boolean(layoutParts.solo?.[0]);
   useEffect5(() => {
     const attended = untracked(() => attentionPlugin?.provides.attention.attended ?? []);
-    const firstId = layoutMode === "solo" ? firstIdInPart(layoutParts, "solo") : firstIdInPart(layoutParts, "main");
+    const firstId = isSoloModeLoaded ? firstIdInPart(layoutParts, "solo") : firstIdInPart(layoutParts, "main");
     if (attended.length === 0 && firstId) {
       document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
     }
@@ -795,26 +820,18 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots,
   }, [
     layoutMode
   ]);
-  const isEmpty = layoutParts.main?.length === 0 && layoutParts.solo?.length === 0;
+  const isEmpty = (layoutParts.main?.length ?? 0) === 0 && (layoutParts.solo?.length ?? 0) === 0;
   const padding = useMemo5(() => {
     if (layoutMode === "deck" && overscroll === "centering") {
-      return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
+      return calculateOverscroll(layoutParts.main?.length ?? 0);
     }
     return {};
   }, [
     layoutMode,
     overscroll,
-    layoutParts.main,
-    plankSizing,
-    sidebarOpen,
-    complementarySidebarOpen
+    layoutParts.main
   ]);
-  if (layoutMode === "fullscreen") {
-    return /* @__PURE__ */ React13.createElement(Fullscreen, {
-      id: fullScreenSlug
-    });
-  }
-  return /* @__PURE__ */ React13.createElement(Popover2.Root, {
+  return /* @__PURE__ */ React14.createElement(Popover2.Root, {
     modal: true,
     open: !!(popoverAnchorId && popoverOpen),
     onOpenChange: (nextOpen) => {
@@ -825,98 +842,112 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots,
         context.popoverAnchorId = void 0;
       }
     }
-  }, /* @__PURE__ */ React13.createElement(ActiveNode, null), /* @__PURE__ */ React13.createElement(Main3.Root, {
+  }, /* @__PURE__ */ React14.createElement(ActiveNode, null), layoutMode === "fullscreen" && /* @__PURE__ */ React14.createElement(Fullscreen, {
+    id: fullScreenSlug
+  }), layoutMode !== "fullscreen" && /* @__PURE__ */ React14.createElement(Main3.Root, {
     navigationSidebarOpen: context.sidebarOpen,
     onNavigationSidebarOpenChange: (next) => context.sidebarOpen = next,
     complementarySidebarOpen: context.complementarySidebarOpen,
     onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
-  }, /* @__PURE__ */ React13.createElement(Main3.Notch, {
+  }, /* @__PURE__ */ React14.createElement(Main3.Notch, {
     classNames: "z-[21]"
-  }, /* @__PURE__ */ React13.createElement(Surface9, {
+  }, /* @__PURE__ */ React14.createElement(Surface9, {
     role: "notch-start"
-  }), /* @__PURE__ */ React13.createElement(Button3, {
+  }), /* @__PURE__ */ React14.createElement(Button3, {
     onClick: () => context.sidebarOpen = !context.sidebarOpen,
     variant: "ghost",
     classNames: "p-1"
-  }, /* @__PURE__ */ React13.createElement("span", {
+  }, /* @__PURE__ */ React14.createElement("span", {
     className: "sr-only"
-  }, t("open navigation sidebar label")), /* @__PURE__ */ React13.createElement(MenuIcon, {
+  }, t("open navigation sidebar label")), /* @__PURE__ */ React14.createElement(MenuIcon, {
     weight: "light",
     className: getSize(5)
-  })), /* @__PURE__ */ React13.createElement(Button3, {
-    onClick: () => context.complementarySidebarOpen = !context.complementarySidebarOpen,
-    variant: "ghost",
-    classNames: "p-1"
-  }, /* @__PURE__ */ React13.createElement("span", {
-    className: "sr-only"
-  }, t("open complementary sidebar label")), /* @__PURE__ */ React13.createElement(MenuIcon, {
-    mirrored: true,
-    weight: "light",
-    className: getSize(5)
-  })), /* @__PURE__ */ React13.createElement(Surface9, {
+  })), /* @__PURE__ */ React14.createElement(Surface9, {
     role: "notch-end"
-  })), /* @__PURE__ */ React13.createElement(Sidebar, {
+  })), /* @__PURE__ */ React14.createElement(Sidebar, {
     layoutParts
-  }), /* @__PURE__ */ React13.createElement(ComplementarySidebar, {
-    panel: layoutParts.complementary?.[0].id,
-    flatDeck
-  }), /* @__PURE__ */ React13.createElement(Main3.Overlay, null), isEmpty && /* @__PURE__ */ React13.createElement(Main3.Content, {
+  }), /* @__PURE__ */ React14.createElement(ComplementarySidebar, {
+    panels,
+    current: layoutParts.complementary?.[0].id
+  }), /* @__PURE__ */ React14.createElement(Main3.Overlay, null), isEmpty && /* @__PURE__ */ React14.createElement(Main3.Content, {
     handlesFocus: true
-  }, /* @__PURE__ */ React13.createElement(ContentEmpty, null)), !isEmpty && /* @__PURE__ */ React13.createElement(Main3.Content, {
+  }, /* @__PURE__ */ React14.createElement(ContentEmpty, null)), !isEmpty && /* @__PURE__ */ React14.createElement(Main3.Content, {
     bounce: true,
     classNames: "grid block-end-[--statusbar-size]",
-    handlesFocus: true
-  }, /* @__PURE__ */ React13.createElement("div", {
+    handlesFocus: true,
+    style: {
+      "--dx-main-sidebarWidth": sidebarOpen ? "var(--nav-sidebar-size)" : "0px",
+      "--dx-main-complementaryWidth": complementarySidebarOpen ? "var(--complementary-sidebar-size)" : "0px",
+      "--dx-main-contentFirstWidth": `${plankSizing[layoutParts.main?.[0]?.id ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+      "--dx-main-contentLastWidth": `${plankSizing[layoutParts.main?.[(layoutParts.main?.length ?? 1) - 1]?.id ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`
+    }
+  }, /* @__PURE__ */ React14.createElement("div", {
     role: "none",
-    className: "relative"
-  }, /* @__PURE__ */ React13.createElement(Deck.Root, {
-    style: padding,
+    className: !isSoloModeLoaded ? "relative bg-deck overflow-hidden" : "sr-only",
+    ...isSoloModeLoaded && {
+      inert: ""
+    }
+  }, /* @__PURE__ */ React14.createElement(Stack, {
+    separators: false,
+    orientation: "horizontal",
+    size: "contain",
     classNames: [
-      !flatDeck && "bg-deck",
-      mainPaddingTransitions2,
-      "absolute inset-0",
-      slots?.wallpaper?.classNames
+      "absolute inset-block-0 -inset-inline-px",
+      mainPaddingTransitions2
     ],
-    solo: layoutMode === "solo",
     onScroll: handleScroll,
+    itemsCount: 2 * (layoutParts.main?.length ?? 0) - 1,
+    style: padding,
     ref: deckRef
-  }, /* @__PURE__ */ React13.createElement(Plank, {
-    entry: layoutParts.solo?.[0] ?? {
-      id: "unknown-solo"
-    },
-    layoutParts,
-    part: "solo",
-    layoutMode,
-    flatDeck,
-    searchEnabled: !!searchPlugin
-  }), layoutParts.main?.map((layoutEntry) => /* @__PURE__ */ React13.createElement(Plank, {
-    key: layoutEntry.id,
+  }, layoutParts.main?.map((layoutEntry, index) => /* @__PURE__ */ React14.createElement(Fragment2, {
+    key: layoutEntry.id
+  }, /* @__PURE__ */ React14.createElement(PlankSeparator, {
+    index
+  }), /* @__PURE__ */ React14.createElement(Plank, {
     entry: layoutEntry,
     layoutParts,
     part: "main",
     layoutMode,
-    flatDeck,
-    searchEnabled: !!searchPlugin
-  }))))), /* @__PURE__ */ React13.createElement(StatusBar, {
+    order: index * 2 + 1,
+    last: index === layoutParts.main.length - 1
+  }))))), /* @__PURE__ */ React14.createElement("div", {
+    role: "none",
+    className: isSoloModeLoaded ? "relative bg-deck overflow-hidden" : "sr-only",
+    ...!isSoloModeLoaded && {
+      inert: ""
+    }
+  }, /* @__PURE__ */ React14.createElement(StackContext2.Provider, {
+    value: {
+      size: "contain",
+      orientation: "horizontal",
+      separators: false,
+      rail: true
+    }
+  }, /* @__PURE__ */ React14.createElement(Plank, {
+    entry: layoutParts.solo?.[0],
+    layoutParts,
+    part: "solo",
+    layoutMode
+  })))), /* @__PURE__ */ React14.createElement(StatusBar, {
     showHints
-  }), /* @__PURE__ */ React13.createElement(Popover2.Portal, null, /* @__PURE__ */ React13.createElement(Popover2.Content, {
+  })), /* @__PURE__ */ React14.createElement(Popover2.Portal, null, /* @__PURE__ */ React14.createElement(Popover2.Content, {
     classNames: "z-[60]",
     onEscapeKeyDown: () => {
       context.popoverOpen = false;
       context.popoverAnchorId = void 0;
     }
-  }, /* @__PURE__ */ React13.createElement(Popover2.Viewport, null, /* @__PURE__ */ React13.createElement(Surface9, {
+  }, /* @__PURE__ */ React14.createElement(Popover2.Viewport, null, /* @__PURE__ */ React14.createElement(Surface9, {
     role: "popover",
     data: popoverContent
-  })), /* @__PURE__ */ React13.createElement(Popover2.Arrow, null))), /* @__PURE__ */ React13.createElement(Dialog.Root, {
+  })), /* @__PURE__ */ React14.createElement(Popover2.Arrow, null))), /* @__PURE__ */ React14.createElement(Dialog.Root, {
     open: dialogOpen,
     onOpenChange: (nextOpen) => context.dialogOpen = nextOpen
-  }, /* @__PURE__ */ React13.createElement(Dialog.Overlay, {
+  }, /* @__PURE__ */ React14.createElement(Dialog.Overlay, {
     blockAlign: dialogBlockAlign
-  }, /* @__PURE__ */ React13.createElement(Surface9, {
+  }, /* @__PURE__ */ React14.createElement(Surface9, {
     role: "dialog",
     data: dialogContent
-  }))), toasts?.map((toast) => /* @__PURE__ */ React13.createElement(Toast, {
+  }))), toasts?.map((toast) => /* @__PURE__ */ React14.createElement(Toast, {
     ...toast,
     key: toast.id,
     onOpenChange: (open) => {
@@ -925,66 +956,54 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots,
       }
       return open;
     }
-  }))));
+  })));
 };
 
 // packages/plugins/plugin-deck/src/components/LayoutSettings.tsx
-import React14 from "react";
+import React15 from "react";
 import { Input, Select, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { FormInput } from "@dxos/react-ui-data";
-
-// packages/plugins/plugin-deck/src/types.ts
-var NewPlankPositions = [
-  "start",
-  "end"
-];
-var OverscrollOptions = [
-  "none",
-  "centering"
-];
-
-// packages/plugins/plugin-deck/src/components/LayoutSettings.tsx
+import { DeprecatedFormInput } from "@dxos/react-ui-form";
 var isSocket = !!globalThis.__args;
 var LayoutSettings = ({ settings }) => {
   const { t } = useTranslation6(DECK_PLUGIN);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(FormInput, {
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(DeprecatedFormInput, {
     label: t("select new plank positioning label")
-  }, /* @__PURE__ */ React14.createElement(Select.Root, {
+  }, /* @__PURE__ */ React15.createElement(Select.Root, {
     value: settings.newPlankPositioning ?? "start",
     onValueChange: (value) => settings.newPlankPositioning = value
-  }, /* @__PURE__ */ React14.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React15.createElement(Select.TriggerButton, {
     placeholder: t("select new plank positioning placeholder")
-  }), /* @__PURE__ */ React14.createElement(Select.Portal, null, /* @__PURE__ */ React14.createElement(Select.Content, null, /* @__PURE__ */ React14.createElement(Select.Viewport, null, NewPlankPositions.map((position) => /* @__PURE__ */ React14.createElement(Select.Option, {
+  }), /* @__PURE__ */ React15.createElement(Select.Portal, null, /* @__PURE__ */ React15.createElement(Select.Content, null, /* @__PURE__ */ React15.createElement(Select.Viewport, null, NewPlankPositions.map((position) => /* @__PURE__ */ React15.createElement(Select.Option, {
     key: position,
     value: position
-  }, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React14.createElement(FormInput, {
+  }, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React15.createElement(DeprecatedFormInput, {
     label: t("settings overscroll label")
-  }, /* @__PURE__ */ React14.createElement(Select.Root, {
+  }, /* @__PURE__ */ React15.createElement(Select.Root, {
     value: settings.overscroll ?? "none",
     onValueChange: (value) => settings.overscroll = value
-  }, /* @__PURE__ */ React14.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React15.createElement(Select.TriggerButton, {
     placeholder: t("select overscroll placeholder")
-  }), /* @__PURE__ */ React14.createElement(Select.Portal, null, /* @__PURE__ */ React14.createElement(Select.Content, null, /* @__PURE__ */ React14.createElement(Select.Viewport, null, OverscrollOptions.map((option) => /* @__PURE__ */ React14.createElement(Select.Option, {
+  }), /* @__PURE__ */ React15.createElement(Select.Portal, null, /* @__PURE__ */ React15.createElement(Select.Content, null, /* @__PURE__ */ React15.createElement(Select.Viewport, null, OverscrollOptions.map((option) => /* @__PURE__ */ React15.createElement(Select.Option, {
     key: option,
     value: option
-  }, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React14.createElement(FormInput, {
+  }, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React15.createElement(DeprecatedFormInput, {
     label: t("settings show hints label")
-  }, /* @__PURE__ */ React14.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React15.createElement(Input.Switch, {
     checked: settings.showHints,
     onCheckedChange: (checked) => settings.showHints = checked
-  })), !isSocket && /* @__PURE__ */ React14.createElement(FormInput, {
+  })), !isSocket && /* @__PURE__ */ React15.createElement(DeprecatedFormInput, {
     label: t("settings native redirect label")
-  }, /* @__PURE__ */ React14.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React15.createElement(Input.Switch, {
     checked: settings.enableNativeRedirect,
     onCheckedChange: (checked) => settings.enableNativeRedirect = checked
-  })), /* @__PURE__ */ React14.createElement(FormInput, {
+  })), /* @__PURE__ */ React15.createElement(DeprecatedFormInput, {
     label: t("settings custom slots")
-  }, /* @__PURE__ */ React14.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React15.createElement(Input.Switch, {
     checked: settings.customSlots,
     onCheckedChange: (checked) => settings.customSlots = checked
-  })), /* @__PURE__ */ React14.createElement(FormInput, {
+  })), /* @__PURE__ */ React15.createElement(DeprecatedFormInput, {
     label: t("settings flat deck")
-  }, /* @__PURE__ */ React14.createElement(Input.Switch, {
+  }, /* @__PURE__ */ React15.createElement(Input.Switch, {
     checked: settings.flatDeck,
     onCheckedChange: (checked) => settings.flatDeck = checked
   })));
@@ -1141,8 +1160,8 @@ var translations_default = [
     "en-US": {
       [DECK_PLUGIN]: {
         "main header label": "Main header",
-        "open navigation sidebar label": "Open navigation sidebar.",
-        "open complementary sidebar label": "Open complementary sidebar.",
+        "open navigation sidebar label": "Open navigation sidebar",
+        "open complementary sidebar label": "Open sidebar",
         "plugin error message": "Content failed to render.",
         "content fallback message": "Unsupported",
         "content fallback description": "No plugin had a response for the address you navigated\xA0to. Double-check the URL, and ensure you\u2019ve enabled a plugin that supports the\xA0object.",
@@ -1165,17 +1184,20 @@ var translations_default = [
         "reload required message": "Reload required.",
         "pending heading": "Loading\u2026",
         "insert plank label": "Open",
-        "solo plank label": "Solo",
+        "resize label": "Drag to resize",
+        "pin start label": "Pin to the left sidebar",
+        "pin end label": "Pin to the right sidebar",
+        "increment start label": "Move to the left",
+        "increment end label": "Move to the right",
+        "show deck plank label": "Show deck",
+        "show solo plank label": "Maximize",
+        "close label": "Close",
+        "minify label": "Minify",
         "settings overscroll label": "Plank Overscrolling",
         "select overscroll placeholder": "Select plank overscrolling behavior",
         "settings overscroll centering label": "Centering",
         "settings overscroll none label": "None",
-        "settings flat deck": "Flatten deck appearance",
-        // ComplementarySidebar
-        "open settings label": "Show settings",
-        "open comments label": "Show Comments",
-        "open automation label": "Show Automation",
-        "open debug label": "Show Debug"
+        "settings flat deck": "Flatten deck appearance"
       }
     }
   }
@@ -1185,11 +1207,6 @@ var translations_default = [
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-deck/src/DeckPlugin.tsx";
 var isSocket2 = !!globalThis.__args;
 var appScheme = "composer://";
-var customSlots = {
-  wallpaper: {
-    classNames: "bg-cover bg-no-repeat dark:bg-[url(https://cdn.midjourney.com/3865ba61-f98a-4d94-b91a-1763ead01f4f/0_0.jpeg)]"
-  }
-};
 setAutoFreeze(false);
 var DECK_ACTION = "dxos.org/plugin/deck";
 var DeckAction;
@@ -1200,10 +1217,10 @@ var DeckPlugin = ({ observability } = {}) => {
   let graphPlugin;
   let intentPlugin;
   let attentionPlugin;
-  let clientPlugin;
   const unsubscriptionCallbacks = [];
   let currentUndoId;
   let handleNavigation;
+  const panels = [];
   const settings = new LocalStorageStore("dxos.org/settings/layout", {
     showHints: false,
     customSlots: false,
@@ -1312,7 +1329,6 @@ var DeckPlugin = ({ observability } = {}) => {
       intentPlugin = resolvePlugin(plugins, parseIntentPlugin);
       graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
       attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
-      clientPlugin = resolvePlugin(plugins, parseClientPlugin);
       layout.prop({
         key: "layoutMode",
         type: LocalStorageStore.enum()
@@ -1334,11 +1350,7 @@ var DeckPlugin = ({ observability } = {}) => {
         key: "closed",
         type: LocalStorageStore.json()
       });
-      unsubscriptionCallbacks.push(clientPlugin?.provides.client.shell.onReset(() => {
-        layout.expunge();
-        location.expunge();
-        deck.expunge();
-      }));
+      panels.push(...filterPlugins(plugins, parsePanelPlugin).flatMap((plugin) => plugin.provides.complementary.panels));
       settings.prop({
         key: "showHints",
         type: LocalStorageStore.bool()
@@ -1379,11 +1391,12 @@ var DeckPlugin = ({ observability } = {}) => {
           window.location.pathname = "/";
           return;
         }
+        const startingLayout = removePart(location.values.active, "solo");
         const layoutFromUri = uriToSoloPart(pathname);
         if (!layoutFromUri) {
+          handleSetLocation(startingLayout);
           return;
         }
-        const startingLayout = removePart(location.values.active, "solo");
         handleSetLocation(mergeLayoutParts(layoutFromUri, startingLayout));
         layout.values.layoutMode = "solo";
       };
@@ -1408,7 +1421,7 @@ var DeckPlugin = ({ observability } = {}) => {
       location: location.values,
       translations: [
         ...translations_default,
-        ...deckTranslations
+        ...stackTranslations
       ],
       graph: {
         builder: () => {
@@ -1419,11 +1432,11 @@ var DeckPlugin = ({ observability } = {}) => {
             filter: (node) => false,
             actions: () => [
               {
-                id: `${LayoutAction3.SET_LAYOUT_MODE}/fullscreen`,
+                id: `${LayoutAction2.SET_LAYOUT_MODE}/fullscreen`,
                 data: async () => {
                   await intentPlugin?.provides.intent.dispatch({
                     plugin: DECK_PLUGIN,
-                    action: LayoutAction3.SET_LAYOUT_MODE,
+                    action: LayoutAction2.SET_LAYOUT_MODE,
                     data: {
                       layoutMode: "fullscreen"
                     }
@@ -1447,19 +1460,18 @@ var DeckPlugin = ({ observability } = {}) => {
           });
         }
       },
-      context: (props) => /* @__PURE__ */ React15.createElement(LayoutContext.Provider, {
+      context: (props) => /* @__PURE__ */ React16.createElement(LayoutContext.Provider, {
         value: layout.values
-      }, /* @__PURE__ */ React15.createElement(DeckContext.Provider, {
+      }, /* @__PURE__ */ React16.createElement(DeckContext.Provider, {
         value: deck.values
       }, props.children)),
       root: () => {
-        return /* @__PURE__ */ React15.createElement(DeckLayout, {
+        return /* @__PURE__ */ React16.createElement(DeckLayout, {
           layoutParts: location.values.active,
           showHints: settings.values.showHints,
           overscroll: settings.values.overscroll,
-          flatDeck: settings.values.flatDeck,
-          slots: settings.values.customSlots ? customSlots : void 0,
           toasts: layout.values.toasts,
+          panels,
           onDismissToast: (id) => {
             const index = layout.values.toasts.findIndex((toast) => toast.id === id);
             if (index !== -1) {
@@ -1477,7 +1489,7 @@ var DeckPlugin = ({ observability } = {}) => {
         component: ({ data, role }) => {
           switch (role) {
             case "settings":
-              return data.plugin === meta_default.id ? /* @__PURE__ */ React15.createElement(LayoutSettings, {
+              return data.plugin === meta_default.id ? /* @__PURE__ */ React16.createElement(LayoutSettings, {
                 settings: settings.values
               }) : null;
           }
@@ -1487,10 +1499,10 @@ var DeckPlugin = ({ observability } = {}) => {
       intent: {
         resolver: (intent) => {
           switch (intent.action) {
-            case LayoutAction3.SET_LAYOUT: {
+            case LayoutAction2.SET_LAYOUT: {
               return intent.data && handleSetLayout(intent.data);
             }
-            case LayoutAction3.SET_LAYOUT_MODE: {
+            case LayoutAction2.SET_LAYOUT_MODE: {
               return batch(() => {
                 if (!intent.data) {
                   return;
@@ -1507,7 +1519,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 } else {
                   log.warn("Invalid layout mode", intent?.data?.layoutMode, {
                     F: __dxlog_file,
-                    L: 392,
+                    L: 378,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });
@@ -1517,7 +1529,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 };
               });
             }
-            case LayoutAction3.SCROLL_INTO_VIEW: {
+            case LayoutAction2.SCROLL_INTO_VIEW: {
               layout.values.scrollIntoView = intent.data?.id ?? void 0;
               return void 0;
             }
@@ -1553,7 +1565,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 data: true
               };
             }
-            case NavigationAction4.OPEN: {
+            case NavigationAction3.OPEN: {
               const previouslyOpenIds = new Set(openIds2(location.values.active));
               const layoutMode = layout.values.layoutMode;
               batch(() => {
@@ -1602,7 +1614,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 intents: [
                   newlyOpen.length > 0 ? [
                     {
-                      action: LayoutAction3.SCROLL_INTO_VIEW,
+                      action: LayoutAction2.SCROLL_INTO_VIEW,
                       data: {
                         id: newlyOpen[0]
                       }
@@ -1610,7 +1622,7 @@ var DeckPlugin = ({ observability } = {}) => {
                   ] : [],
                   intent.data?.object ? [
                     {
-                      action: NavigationAction4.EXPOSE,
+                      action: NavigationAction3.EXPOSE,
                       data: {
                         id: fullyQualifiedId(intent.data.object)
                       }
@@ -1633,7 +1645,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 ]
               };
             }
-            case NavigationAction4.ADD_TO_ACTIVE: {
+            case NavigationAction3.ADD_TO_ACTIVE: {
               const data = intent.data;
               const layoutEntry = {
                 id: data.id
@@ -1647,7 +1659,7 @@ var DeckPlugin = ({ observability } = {}) => {
               if (data.scrollIntoView && layout.values.layoutMode === "deck") {
                 intents.push([
                   {
-                    action: LayoutAction3.SCROLL_INTO_VIEW,
+                    action: LayoutAction2.SCROLL_INTO_VIEW,
                     data: {
                       id: data.id
                     }
@@ -1659,7 +1671,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 intents
               };
             }
-            case NavigationAction4.CLOSE: {
+            case NavigationAction3.CLOSE: {
               return batch(() => {
                 if (!intent.data) {
                   return;
@@ -1691,7 +1703,7 @@ var DeckPlugin = ({ observability } = {}) => {
               });
             }
             // TODO(wittjosiah): Factor out.
-            case NavigationAction4.SET: {
+            case NavigationAction3.SET: {
               return batch(() => {
                 if (isLayoutParts(intent.data?.activeParts)) {
                   handleSetLocation(intent.data.activeParts);
@@ -1701,7 +1713,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 };
               });
             }
-            case NavigationAction4.ADJUST: {
+            case NavigationAction3.ADJUST: {
               return batch(() => {
                 if (isLayoutAdjustment(intent.data)) {
                   const adjustment = intent.data;
@@ -1719,13 +1731,13 @@ var DeckPlugin = ({ observability } = {}) => {
                         intents: [
                           [
                             {
-                              action: LayoutAction3.SET_LAYOUT_MODE,
+                              action: LayoutAction2.SET_LAYOUT_MODE,
                               data: {
                                 layoutMode: "solo"
                               }
                             },
                             {
-                              action: NavigationAction4.OPEN,
+                              action: NavigationAction3.OPEN,
                               data: {
                                 activeParts: {
                                   solo: [
@@ -1743,13 +1755,13 @@ var DeckPlugin = ({ observability } = {}) => {
                         intents: [
                           [
                             {
-                              action: LayoutAction3.SET_LAYOUT_MODE,
+                              action: LayoutAction2.SET_LAYOUT_MODE,
                               data: {
                                 layoutMode: "deck"
                               }
                             },
                             {
-                              action: NavigationAction4.CLOSE,
+                              action: NavigationAction3.CLOSE,
                               data: {
                                 activeParts: {
                                   solo: [
@@ -1759,7 +1771,7 @@ var DeckPlugin = ({ observability } = {}) => {
                               }
                             },
                             {
-                              action: NavigationAction4.OPEN,
+                              action: NavigationAction3.OPEN,
                               data: {
                                 noToggle: true,
                                 activeParts: {
@@ -1770,7 +1782,7 @@ var DeckPlugin = ({ observability } = {}) => {
                               }
                             },
                             {
-                              action: LayoutAction3.SCROLL_INTO_VIEW,
+                              action: LayoutAction2.SCROLL_INTO_VIEW,
                               data: {
                                 id: entryId
                               }