@dxos/plugin-deck 0.6.13 → 0.6.14-main.1366248

package/dist/lib/browser/index.mjs

@@ -1,15 +1,20 @@
 import {
   DECK_PLUGIN,
   meta_default
-} from "./chunk-YVHGFQQR.mjs";
+} from "./chunk-GVOGPULO.mjs";
+import {
+  NewPlankPositions,
+  OverscrollOptions,
+  parsePanelPlugin
+} from "./chunk-NIRHDTX4.mjs";
 
 // packages/plugins/plugin-deck/src/DeckPlugin.tsx
-import { ArrowsOut } from "@phosphor-icons/react";
-import { batch, effect } from "@preact/signals-core";
+import { batch } from "@preact/signals-core";
 import { setAutoFreeze } from "immer";
 import React15 from "react";
-import { IntentAction, LayoutAction as LayoutAction3, NavigationAction as NavigationAction3, parseGraphPlugin, parseIntentPlugin, resolvePlugin, Toast as ToastSchema, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR5, isLayoutParts, isLayoutAdjustment, isLayoutMode, openIds as openIds2 } from "@dxos/app-framework";
+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, 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";
@@ -18,7 +23,6 @@ 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 { Mosaic } from "@dxos/react-ui-mosaic";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/constants.ts
 var NAV_ID = "NavTree";
@@ -26,22 +30,27 @@ var SURFACE_PREFIX = "surface:";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
 import { Sidebar as MenuIcon } from "@phosphor-icons/react";
-import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2, useState as useState3, useLayoutEffect as useLayoutEffect2 } from "react";
-import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR3, Surface as Surface9, firstIdInPart, usePlugin } from "@dxos/app-framework";
-import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { untracked } from "@preact/signals-core";
+import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef2 } 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 { getSize } from "@dxos/react-ui-theme";
+import { getSize, mainPaddingTransitions as mainPaddingTransitions2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
 import React from "react";
 import { Surface } from "@dxos/app-framework";
 import { useGraph } from "@dxos/plugin-graph";
+import { useAttended } from "@dxos/react-ui-attention";
 
 // packages/plugins/plugin-deck/src/hooks/useNode.ts
 import { useEffect, useState } from "react";
 var useNode = (graph, id, timeout) => {
-  const [nodeState, setNodeState] = useState(id ? graph.findNode(id) : void 0);
+  const [nodeState, setNodeState] = useState(id ? graph.findNode(id, false) : void 0);
   useEffect(() => {
+    if (!id && nodeState) {
+      setNodeState(void 0);
+    }
     if (nodeState?.id === id || !id) {
       return;
     }
@@ -96,7 +105,8 @@ var useMainSize = () => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
-var ActiveNode = ({ id }) => {
+var ActiveNode = () => {
+  const [id] = useAttended();
   const { graph } = useGraph();
   const activeNode = useNode(graph, id);
   useNodeActionExpander(activeNode);
@@ -113,36 +123,25 @@ var ActiveNode = ({ id }) => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
-import React5 from "react";
-import { SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR2, Surface as Surface3 } from "@dxos/app-framework";
+import React5, { 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 { createAttendableAttributes } from "@dxos/react-ui-attention";
+import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
 import { deckGrid } from "@dxos/react-ui-deck";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
-import { Placeholder } from "@phosphor-icons/react";
-import React2, { Fragment, useEffect as useEffect3 } from "react";
-import { LayoutAction, NavigationAction, SLUG_COLLECTION_INDICATOR, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher, indexInPart, partLength } from "@dxos/app-framework";
+import React2, { 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 { Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
-import { PlankHeading, plankHeadingIconProps } from "@dxos/react-ui-deck";
+import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
+import { PlankHeading } from "@dxos/react-ui-deck";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
-var NodePlankHeading = ({
-  node,
-  id,
-  layoutParts,
-  layoutPart,
-  // TODO(wittjosiah): Unused?
-  layoutEntry,
-  popoverAnchorId,
-  pending,
-  flatDeck
-}) => {
+var NodePlankHeading = /* @__PURE__ */ memo(({ coordinate, node, canIncrementStart, canIncrementEnd, popoverAnchorId, pending, flatDeck, actions = [] }) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const { graph } = useGraph2();
-  const Icon = node?.properties?.icon ?? Placeholder;
+  const icon = node?.properties?.icon ?? "ph--placeholder--regular";
   const label = pending ? t("pending heading") : toLocalizedString(node?.properties?.label ?? [
     "plank heading fallback label",
     {
@@ -160,22 +159,29 @@ var NodePlankHeading = ({
   }, [
     node
   ]);
-  const attendableId = id?.split(SLUG_PATH_SEPARATOR).at(0);
-  const layoutCoordinate = layoutPart !== void 0 && id !== void 0 ? {
-    part: layoutPart,
-    entryId: id
-  } : void 0;
-  const index = indexInPart(layoutParts, layoutCoordinate);
-  const length = partLength(layoutParts, layoutPart);
-  const canIncrementStart = layoutPart === "main" && index !== void 0 && index > 0 && length !== void 0 && length > 1;
-  const canIncrementEnd = layoutPart === "main" && index !== void 0 && index < length - 1 && length !== void 0;
+  const layoutPart = coordinate.part;
+  const attendableId = coordinate.entryId.split(SLUG_PATH_SEPARATOR).at(0);
+  const capabilities = useMemo(() => ({
+    solo: (layoutPart === "solo" || layoutPart === "main") && isNotMobile,
+    incrementStart: canIncrementStart,
+    incrementEnd: canIncrementEnd
+  }), [
+    isNotMobile,
+    layoutPart,
+    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, {
-    Icon,
+    icon,
+    related: layoutPart === "complementary",
     attendableId,
     triggerLabel: t("actions menu label"),
-    actions: graph.actions(node),
+    actions: [
+      actions,
+      graph.actions(node)
+    ].filter((a) => a.length > 0),
     onAction: (action) => typeof action.data === "function" && action.data?.({
       node: action,
       caller: DECK_PLUGIN
@@ -187,11 +193,15 @@ var NodePlankHeading = ({
     }
   })) : /* @__PURE__ */ React2.createElement(PlankHeading.Button, null, /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
-  }, label), /* @__PURE__ */ React2.createElement(Icon, plankHeadingIconProps))), /* @__PURE__ */ React2.createElement(TextTooltip, {
+  }, label), /* @__PURE__ */ React2.createElement(Icon, {
+    icon,
+    size: 5
+  }))), /* @__PURE__ */ React2.createElement(TextTooltip, {
     text: label,
     onlyWhenTruncating: true
   }, /* @__PURE__ */ React2.createElement(PlankHeading.Label, {
-    attendableId: node?.id,
+    attendableId,
+    related: layoutPart === "complementary",
     ...pending && {
       classNames: "text-description"
     }
@@ -203,11 +213,7 @@ var NodePlankHeading = ({
       object: node.data
     }
   }), /* @__PURE__ */ React2.createElement(PlankHeading.Controls, {
-    capabilities: {
-      solo: (layoutPart === "solo" || layoutPart === "main") && isNotMobile,
-      incrementStart: canIncrementStart,
-      incrementEnd: canIncrementEnd
-    },
+    capabilities,
     isSolo: layoutPart === "solo",
     onClick: (eventType) => {
       if (!layoutPart) {
@@ -221,41 +227,45 @@ var NodePlankHeading = ({
               type: eventType,
               layoutCoordinate: {
                 part: "main",
-                entryId: id
+                entryId: coordinate.entryId
               }
             }
           }
         ]);
-      }
-      return dispatch(eventType === "close" ? layoutPart === "complementary" ? {
-        action: LayoutAction.SET_LAYOUT,
-        data: {
-          element: "complementary",
-          state: false
+      } else if (eventType === "close") {
+        if (layoutPart === "complementary") {
+          return dispatch({
+            action: LayoutAction.SET_LAYOUT,
+            data: {
+              element: "complementary",
+              state: false
+            }
+          });
+        } else {
+          return dispatch({
+            action: NavigationAction.CLOSE,
+            data: {
+              activeParts: {
+                [layoutPart]: [
+                  coordinate.entryId
+                ]
+              }
+            }
+          });
         }
-      } : {
-        action: NavigationAction.CLOSE,
-        data: {
-          activeParts: {
-            complementary: [
-              `${id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`
-            ],
-            [layoutPart]: [
-              id
-            ]
+      } else {
+        return dispatch({
+          action: NavigationAction.ADJUST,
+          data: {
+            type: eventType,
+            layoutCoordinate: coordinate
           }
-        }
-      } : {
-        action: NavigationAction.ADJUST,
-        data: {
-          type: eventType,
-          layoutCoordinate
-        }
-      });
+        });
+      }
     },
-    close: layoutCoordinate?.part === "complementary" ? "minify-end" : true
+    close: layoutPart === "complementary" ? "minify-end" : true
   }));
-};
+});
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/PlankError.tsx
 import React4, { useEffect as useEffect4, useState as useState2 } from "react";
@@ -291,15 +301,14 @@ var PlankContentError = ({ error }) => {
     )
   }, error ? error.toString() : t("error fallback message")));
 };
-var PlankError = ({ layoutCoordinate, id, node, error, flatDeck }) => {
+var PlankError = ({ layoutCoordinate, node, error, flatDeck }) => {
   const [timedOut, setTimedOut] = useState2(false);
   useEffect4(() => {
     setTimeout(() => setTimedOut(true), 5e3);
   }, []);
   return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(NodePlankHeading, {
+    coordinate: layoutCoordinate,
     node,
-    id,
-    layoutPart: layoutCoordinate.part,
     pending: !timedOut,
     flatDeck
   }), timedOut ? /* @__PURE__ */ React4.createElement(PlankContentError, {
@@ -314,33 +323,65 @@ var LayoutContext = createContext(null);
 var useLayout = () => useContext(LayoutContext) ?? raise(new Error("Missing LayoutContext"));
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
-var ComplementarySidebar = ({ id, layoutParts, flatDeck }) => {
+var ComplementarySidebar = ({ panels, current, flatDeck }) => {
   const { popoverAnchorId } = useLayout();
+  const attended = useAttended2();
+  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 complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR2)[0] ?? "never");
+  const dispatch = useIntentDispatcher2();
   useNodeActionExpander(node);
-  return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar, complementaryAttrs, node ? /* @__PURE__ */ React5.createElement("div", {
+  const actions = useMemo2(() => panels.map(({ id: id2, label, icon }) => ({
+    id: `complementary-${id2}`,
+    data: () => {
+      void dispatch({
+        action: NavigationAction2.OPEN,
+        data: {
+          activeParts: {
+            complementary: id2
+          }
+        }
+      });
+    },
+    properties: {
+      label,
+      icon,
+      menuItemType: "toggle",
+      isChecked: panel === id2
+    }
+  })), [
+    panel
+  ]);
+  const coordinate = useMemo2(() => ({
+    entryId: id ?? "unknown",
+    part: "complementary"
+  }), [
+    id
+  ]);
+  return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar, null, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: mx2(deckGrid, "grid-cols-1 bs-full")
   }, /* @__PURE__ */ React5.createElement(NodePlankHeading, {
+    coordinate,
     node,
-    id,
-    layoutParts,
-    layoutPart: "complementary",
     popoverAnchorId,
-    flatDeck
-  }), /* @__PURE__ */ React5.createElement(Surface3, {
-    role: "article",
+    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, {
+    key: id,
+    role: `complementary--${panel}`,
+    limit: 1,
     data: {
-      subject: node.data,
-      part: "complementary",
+      id,
+      subject: node.properties.object ?? node.properties.space,
       popoverAnchorId
     },
-    limit: 1,
     fallback: PlankContentError,
     placeholder: /* @__PURE__ */ React5.createElement(PlankLoading, null)
-  })) : null);
+  }))));
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
@@ -400,12 +441,12 @@ var Fullscreen = ({ id }) => {
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
 import { Plus } from "@phosphor-icons/react";
-import React9, { useCallback, useLayoutEffect, useRef } from "react";
-import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction2, Surface as Surface6, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+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 { debounce } from "@dxos/async";
 import { useGraph as useGraph5 } from "@dxos/plugin-graph";
 import { Button, Tooltip, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { createAttendableAttributes as createAttendableAttributes2 } from "@dxos/react-ui-attention";
+import { useAttendableAttributes } from "@dxos/react-ui-attention";
 import { Plank as NaturalPlank } from "@dxos/react-ui-deck";
 import { mainIntrinsicSize } from "@dxos/react-ui-theme";
 
@@ -416,32 +457,38 @@ var DeckContext = createContext2(null);
 var useDeckContext = () => useContext2(DeckContext) ?? raise2(new Error("Missing DeckContext"));
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
-var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }) => {
+var UNKNOWN_ID = "unknown_id";
+var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }) => {
   const { t } = useTranslation4(DECK_PLUGIN);
-  const dispatch = useIntentDispatcher2();
+  const dispatch = useIntentDispatcher3();
+  const coordinate = useMemo3(() => ({
+    part,
+    entryId: entry?.id ?? UNKNOWN_ID
+  }), [
+    entry?.id,
+    part
+  ]);
   const { popoverAnchorId, scrollIntoView } = useLayout();
   const { plankSizing } = useDeckContext();
   const { graph } = useGraph5();
-  const node = useNode(graph, entry.id);
+  const node = useNode(graph, entry?.id);
   const rootElement = useRef(null);
   const resizeable = layoutMode === "deck";
-  const attendableAttrs = createAttendableAttributes2(entry.id);
-  const coordinate = {
-    part,
-    entryId: entry.id
-  };
-  const size = plankSizing?.[entry.id];
-  const setSize = useCallback(debounce((newSize) => {
-    void dispatch({
-      action: DeckAction.UPDATE_PLANK_SIZE,
-      data: {
-        id: entry.id,
-        size: newSize
-      }
-    });
-  }, 200), [
+  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?.[coordinate.entryId];
+  const setSize = useCallback(debounce((newSize) => dispatch({
+    action: DeckAction.UPDATE_PLANK_SIZE,
+    data: {
+      id: coordinate.entryId,
+      size: newSize
+    }
+  }), 200), [
     dispatch,
-    entry.id
+    coordinate.entryId
   ]);
   const handleKeyDown = useCallback((event) => {
     if (event.target === event.currentTarget && event.key === "Escape") {
@@ -449,7 +496,7 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
     }
   }, []);
   useLayoutEffect(() => {
-    if (scrollIntoView === entry.id) {
+    if (scrollIntoView === coordinate.entryId) {
       rootElement.current?.focus({
         preventScroll: true
       });
@@ -459,12 +506,30 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
       });
     }
   }, [
+    coordinate.entryId,
     scrollIntoView,
     layoutMode
   ]);
   const isSolo = layoutMode === "solo" && part === "solo";
-  const isSuppressed = layoutMode === "solo" && part !== "solo";
+  const isSuppressed = layoutMode === "solo" && part !== "solo" || layoutMode === "deck" && part === "solo" || coordinate.entryId === UNKNOWN_ID;
   const sizeAttrs = useMainSize();
+  const data = useMemo3(() => node && {
+    ...entry?.path ? {
+      subject: node.data,
+      path: entry.path
+    } : {
+      object: node.data
+    },
+    coordinate,
+    popoverAnchorId
+  }, [
+    node,
+    node?.data,
+    entry?.path,
+    coordinate,
+    popoverAnchorId
+  ]);
+  const placeholder = useMemo3(() => /* @__PURE__ */ React9.createElement(PlankLoading, null), []);
   return /* @__PURE__ */ React9.createElement(NaturalPlank.Root, {
     size,
     setSize,
@@ -487,30 +552,20 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
       inlineSize: ""
     } : {}
   }, node ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(NodePlankHeading, {
-    id: entry.id,
+    coordinate,
     node,
-    layoutPart: coordinate.part,
-    layoutParts,
+    canIncrementStart,
+    canIncrementEnd,
     popoverAnchorId,
     flatDeck
   }), /* @__PURE__ */ React9.createElement(Surface6, {
     role: "article",
-    data: {
-      ...entry.path ? {
-        subject: node.data,
-        path: entry.path
-      } : {
-        object: node.data
-      },
-      coordinate,
-      popoverAnchorId
-    },
+    data,
     limit: 1,
     fallback: PlankContentError,
-    placeholder: /* @__PURE__ */ React9.createElement(PlankLoading, null)
+    placeholder
   })) : /* @__PURE__ */ React9.createElement(PlankError, {
     layoutCoordinate: coordinate,
-    id: entry.id,
     flatDeck
   })), searchEnabled && resizeable ? /* @__PURE__ */ React9.createElement("div", {
     role: "none",
@@ -529,7 +584,7 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
           component: "dxos.org/plugin/search/Dialog",
           dialogBlockAlign: "start",
           subject: {
-            action: NavigationAction2.SET,
+            action: NavigationAction3.SET,
             position: "add-after",
             coordinate
           }
@@ -546,33 +601,31 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
   })) : resizeable ? /* @__PURE__ */ React9.createElement(NaturalPlank.ResizeHandle, {
     classNames: "row-span-3"
   }) : null);
-};
+});
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Sidebar.tsx
-import React10, { useMemo } from "react";
+import React10, { useMemo as useMemo4 } from "react";
 import { openIds, Surface as Surface7 } from "@dxos/app-framework";
 import { Main as Main2 } from "@dxos/react-ui";
-var Sidebar = ({ attention, layoutParts }) => {
+var Sidebar = ({ layoutParts }) => {
   const { layoutMode, popoverAnchorId } = useLayout();
-  const activeIds = useMemo(() => {
+  const activeIds = useMemo4(() => {
     if (layoutMode === "solo") {
-      return new Set(layoutParts?.solo?.map((e) => e.id) ?? []);
+      return Array.from(new Set(layoutParts?.solo?.map((e) => e.id) ?? []));
     } else if (layoutMode === "deck") {
-      return new Set(layoutParts?.main?.map((e) => e.id) ?? []);
+      return Array.from(new Set(layoutParts?.main?.map((e) => e.id) ?? []));
     }
-    return new Set(openIds(layoutParts));
+    return Array.from(new Set(openIds(layoutParts)));
   }, [
     layoutParts,
     layoutMode
   ]);
-  const navigationData = useMemo(() => ({
+  const navigationData = useMemo4(() => ({
     popoverAnchorId,
-    activeIds,
-    attended: attention.attended
+    activeIds
   }), [
     popoverAnchorId,
-    activeIds,
-    attention.attended
+    activeIds
   ]);
   return /* @__PURE__ */ React10.createElement(Main2.NavigationSidebar, null, /* @__PURE__ */ React10.createElement(Surface7, {
     role: "navigation",
@@ -586,14 +639,19 @@ var Sidebar = ({ attention, layoutParts }) => {
 // packages/plugins/plugin-deck/src/components/DeckLayout/StatusBar.tsx
 import React11 from "react";
 import { Surface as Surface8 } from "@dxos/app-framework";
-import { mainPadding, mx as mx4 } from "@dxos/react-ui-theme";
-var StatusBar = () => {
+import { mainPadding, mainPaddingTransitions, mx as mx4 } from "@dxos/react-ui-theme";
+var StatusBar = ({ showHints }) => {
   const sizeAttrs = useMainSize();
   return /* @__PURE__ */ React11.createElement("div", {
     role: "none",
     ...sizeAttrs,
-    className: mx4("fixed block-end-0 inset-inline-0 z-[2]", mainPadding)
-  }, /* @__PURE__ */ React11.createElement(Surface8, {
+    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", {
+    role: "none"
+  }, showHints && /* @__PURE__ */ React11.createElement(Surface8, {
+    role: "hints",
+    limit: 1
+  })), /* @__PURE__ */ React11.createElement(Surface8, {
     role: "status-bar",
     limit: 1
   }));
@@ -601,15 +659,19 @@ var StatusBar = () => {
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Toast.tsx
 import React12 from "react";
-import { Button as Button2, Toast as NaturalToast } from "@dxos/react-ui";
+import { Button as Button2, Icon as Icon2, 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, {
     "data-testid": id,
     defaultOpen: true,
     duration,
     onOpenChange
-  }, /* @__PURE__ */ React12.createElement(NaturalToast.Body, null, /* @__PURE__ */ React12.createElement(NaturalToast.Title, null, icon?.({
-    className: "inline mr-1"
+  }, /* @__PURE__ */ React12.createElement(NaturalToast.Body, null, /* @__PURE__ */ React12.createElement(NaturalToast.Title, {
+    classNames: "items-center"
+  }, /* @__PURE__ */ React12.createElement(Icon2, {
+    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, {
     altText: actionAlt,
     asChild: true
@@ -646,7 +708,10 @@ var getEffectivePart = (partName, layoutMode) => layoutMode === "solo" && partNa
 import { PLANK_DEFAULTS } from "@dxos/react-ui-deck";
 var calculateOverscroll = (planks, plankSizing, sidebarOpen, complementarySidebarOpen) => {
   if (!planks?.length) {
-    return;
+    return {
+      paddingInlineStart: 0,
+      paddingInlineEnd: 0
+    };
   }
   const sidebarWidth = sidebarOpen ? "270px" : "0px";
   const complementarySidebarWidth = complementarySidebarOpen ? "360px" : "0px";
@@ -656,8 +721,8 @@ var calculateOverscroll = (planks, plankSizing, sidebarOpen, complementarySideba
     const plankSize = getPlankSize(plank.id);
     const overscrollPadding = `max(0px, calc(((100dvw - ${sidebarWidth} - ${complementarySidebarWidth} - (${plankSize} + 20px)) / 2)))`;
     return {
-      paddingLeft: overscrollPadding,
-      paddingRight: overscrollPadding
+      paddingInlineStart: overscrollPadding,
+      paddingInlineEnd: overscrollPadding
     };
   } else {
     const first = planks[0];
@@ -665,27 +730,34 @@ var calculateOverscroll = (planks, plankSizing, sidebarOpen, complementarySideba
     const last = planks[planks.length - 1];
     const lastSize = getPlankSize(last.id);
     return {
-      paddingLeft: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
-      paddingRight: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`
+      paddingInlineStart: `max(0px, calc(((100dvw - (${firstSize} + 20px)) / 2) - ${sidebarWidth}))`,
+      paddingInlineEnd: `max(0px, calc(((100dvw - (${lastSize} + 20px)) / 2) - ${complementarySidebarWidth}))`
     };
   }
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
-var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHintsFooter, slots, onDismissToast }) => {
+var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots, 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 = useMemo2(() => firstIdInPart(layoutParts, "fullScreen"), [
+  const fullScreenSlug = useMemo5(() => firstIdInPart(layoutParts, "fullScreen"), [
     layoutParts
   ]);
-  const [scrollLeft, setScrollLeft] = useState3(null);
+  const scrollLeftRef = useRef2();
   const deckRef = useRef2(null);
-  const restoreScrollRef = useRef2(false);
+  useEffect5(() => {
+    const attended = untracked(() => attentionPlugin?.provides.attention.attended ?? []);
+    const firstId = layoutMode === "solo" ? firstIdInPart(layoutParts, "solo") : firstIdInPart(layoutParts, "main");
+    if (attended.length === 0 && firstId) {
+      document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
+    }
+  }, []);
   const handleResize = useCallback2(() => {
-    setScrollLeft(null);
+    scrollLeftRef.current = null;
   }, []);
   useEffect5(() => {
     window.addEventListener("resize", handleResize);
@@ -693,58 +765,33 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
   }, [
     handleResize
   ]);
-  useLayoutEffect2(() => {
-    if (layoutMode !== "deck") {
-      restoreScrollRef.current = true;
-    } else if (restoreScrollRef.current && deckRef.current && scrollLeft) {
-      deckRef.current.scrollLeft = scrollLeft;
-      restoreScrollRef.current = false;
+  const restoreScroll = useCallback2(() => {
+    if (deckRef.current && scrollLeftRef.current != null) {
+      deckRef.current.scrollLeft = scrollLeftRef.current;
     }
-  }, [
-    layoutMode,
-    deckRef.current,
-    scrollLeft
-  ]);
+  }, []);
+  useOnTransition(layoutMode, (mode) => mode !== "deck", "deck", restoreScroll);
   const handleScroll = useCallback2((event) => {
     if (layoutMode === "deck" && event.currentTarget === event.target) {
-      setScrollLeft(event.target.scrollLeft);
+      scrollLeftRef.current = event.target.scrollLeft;
     }
   }, [
     layoutMode
   ]);
-  const complementarySlug = useMemo2(() => {
-    const entry = layoutParts.complementary?.at(0);
-    if (entry) {
-      return entry.path ? `${entry.id}${SLUG_PATH_SEPARATOR3}${entry.path}` : entry.id;
-    }
-  }, [
-    layoutParts
-  ]);
-  const firstAttendedId = useMemo2(() => Array.from(attention.attended ?? [])[0], [
-    attention.attended
-  ]);
-  useEffect5(() => {
-    if (layoutMode === "deck" && firstAttendedId) {
+  const isEmpty = layoutParts.main?.length === 0 && layoutParts.solo?.length === 0;
+  const padding = useMemo5(() => {
+    if (layoutMode === "deck" && overscroll === "centering") {
+      return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
     }
+    return {};
   }, [
     layoutMode,
-    firstAttendedId
-  ]);
-  const parts = useMemo2(() => {
-    const parts2 = [
-      ...layoutParts.main ?? []
-    ];
-    for (const part of layoutParts.solo ?? []) {
-      if (!parts2.find((entry) => entry.id === part.id)) {
-        parts2.push(part);
-      }
-    }
-    return parts2;
-  }, [
+    overscroll,
     layoutParts.main,
-    layoutParts.solo
+    plankSizing,
+    sidebarOpen,
+    complementarySidebarOpen
   ]);
-  const padding = layoutMode === "deck" && overscroll === "centering" ? calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen) : {};
   if (layoutMode === "fullscreen") {
     return /* @__PURE__ */ React13.createElement(Fullscreen, {
       id: fullScreenSlug
@@ -761,24 +808,16 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
         context.popoverAnchorId = void 0;
       }
     }
-  }, /* @__PURE__ */ React13.createElement(ActiveNode, {
-    id: firstAttendedId
-  }), /* @__PURE__ */ React13.createElement(Main3.Root, {
+  }, /* @__PURE__ */ React13.createElement(ActiveNode, null), /* @__PURE__ */ React13.createElement(Main3.Root, {
     navigationSidebarOpen: context.sidebarOpen,
     onNavigationSidebarOpenChange: (next) => context.sidebarOpen = next,
-    ...complementarySidebarOpen !== null && {
-      complementarySidebarOpen: (
-        /* complementaryAvailable && */
-        context.complementarySidebarOpen
-      ),
-      onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
-    }
+    complementarySidebarOpen: context.complementarySidebarOpen,
+    onComplementarySidebarOpenChange: (next) => context.complementarySidebarOpen = next
   }, /* @__PURE__ */ React13.createElement(Main3.Notch, {
     classNames: "z-[21]"
   }, /* @__PURE__ */ React13.createElement(Surface9, {
     role: "notch-start"
   }), /* @__PURE__ */ React13.createElement(Button3, {
-    // disabled={!sidebarAvailable}
     onClick: () => context.sidebarOpen = !context.sidebarOpen,
     variant: "ghost",
     classNames: "p-1"
@@ -788,7 +827,6 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
     weight: "light",
     className: getSize(5)
   })), /* @__PURE__ */ React13.createElement(Button3, {
-    // disabled={!complementaryAvailable}
     onClick: () => context.complementarySidebarOpen = !context.complementarySidebarOpen,
     variant: "ghost",
     classNames: "p-1"
@@ -801,15 +839,14 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
   })), /* @__PURE__ */ React13.createElement(Surface9, {
     role: "notch-end"
   })), /* @__PURE__ */ React13.createElement(Sidebar, {
-    attention,
     layoutParts
   }), /* @__PURE__ */ React13.createElement(ComplementarySidebar, {
-    id: complementarySlug,
-    layoutParts,
+    panels,
+    current: layoutParts.complementary?.[0].id,
     flatDeck
-  }), /* @__PURE__ */ React13.createElement(Main3.Overlay, null), parts.length === 0 && /* @__PURE__ */ React13.createElement(Main3.Content, {
+  }), /* @__PURE__ */ React13.createElement(Main3.Overlay, null), isEmpty && /* @__PURE__ */ React13.createElement(Main3.Content, {
     handlesFocus: true
-  }, /* @__PURE__ */ React13.createElement(ContentEmpty, null)), parts.length !== 0 && /* @__PURE__ */ React13.createElement(Main3.Content, {
+  }, /* @__PURE__ */ React13.createElement(ContentEmpty, null)), !isEmpty && /* @__PURE__ */ React13.createElement(Main3.Content, {
     bounce: true,
     classNames: "grid block-end-[--statusbar-size]",
     handlesFocus: true
@@ -820,26 +857,31 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
     style: padding,
     classNames: [
       !flatDeck && "bg-deck",
+      mainPaddingTransitions2,
       "absolute inset-0",
       slots?.wallpaper?.classNames
     ],
     solo: layoutMode === "solo",
     onScroll: handleScroll,
     ref: deckRef
-  }, parts.map((layoutEntry) => /* @__PURE__ */ React13.createElement(Plank, {
+  }, /* @__PURE__ */ React13.createElement(Plank, {
+    entry: layoutParts.solo?.[0],
+    layoutParts,
+    part: "solo",
+    layoutMode,
+    flatDeck,
+    searchEnabled: !!searchPlugin
+  }), layoutParts.main?.map((layoutEntry) => /* @__PURE__ */ React13.createElement(Plank, {
     key: layoutEntry.id,
     entry: layoutEntry,
     layoutParts,
-    part: layoutMode === "solo" && layoutEntry.id === layoutParts.solo?.[0]?.id ? "solo" : "main",
+    part: "main",
     layoutMode,
     flatDeck,
     searchEnabled: !!searchPlugin
-  }))))), /* @__PURE__ */ React13.createElement(StatusBar, null), showHintsFooter && /* @__PURE__ */ React13.createElement("div", {
-    className: "fixed bottom-0 left-0 right-0 h-[32px] z-[1] flex justify-center"
-  }, /* @__PURE__ */ React13.createElement(Surface9, {
-    role: "hints",
-    limit: 1
-  })), /* @__PURE__ */ React13.createElement(Popover2.Portal, null, /* @__PURE__ */ React13.createElement(Popover2.Content, {
+  }))))), /* @__PURE__ */ React13.createElement(StatusBar, {
+    showHints
+  }), /* @__PURE__ */ React13.createElement(Popover2.Portal, null, /* @__PURE__ */ React13.createElement(Popover2.Content, {
     classNames: "z-[60]",
     onEscapeKeyDown: () => {
       context.popoverOpen = false;
@@ -870,24 +912,12 @@ var DeckLayout = ({ layoutParts, attention, toasts, flatDeck, overscroll, showHi
 
 // packages/plugins/plugin-deck/src/components/LayoutSettings.tsx
 import React14 from "react";
-import { SettingsValue } from "@dxos/plugin-settings";
 import { Input, Select, useTranslation as useTranslation6 } from "@dxos/react-ui";
-
-// 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-data";
 var isSocket = !!globalThis.__args;
 var LayoutSettings = ({ settings }) => {
   const { t } = useTranslation6(DECK_PLUGIN);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(SettingsValue, {
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(DeprecatedFormInput, {
     label: t("select new plank positioning label")
   }, /* @__PURE__ */ React14.createElement(Select.Root, {
     value: settings.newPlankPositioning ?? "start",
@@ -897,7 +927,7 @@ var LayoutSettings = ({ settings }) => {
   }), /* @__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, {
     key: position,
     value: position
-  }, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React14.createElement(SettingsValue, {
+  }, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React14.createElement(DeprecatedFormInput, {
     label: t("settings overscroll label")
   }, /* @__PURE__ */ React14.createElement(Select.Root, {
     value: settings.overscroll ?? "none",
@@ -907,32 +937,32 @@ var LayoutSettings = ({ settings }) => {
   }), /* @__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, {
     key: option,
     value: option
-  }, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React14.createElement(SettingsValue, {
-    label: t("settings show footer label")
+  }, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React14.createElement(DeprecatedFormInput, {
+    label: t("settings show hints label")
   }, /* @__PURE__ */ React14.createElement(Input.Switch, {
-    checked: settings.showFooter,
-    onCheckedChange: (checked) => settings.showFooter = !!checked
-  })), !isSocket && /* @__PURE__ */ React14.createElement(SettingsValue, {
+    checked: settings.showHints,
+    onCheckedChange: (checked) => settings.showHints = checked
+  })), !isSocket && /* @__PURE__ */ React14.createElement(DeprecatedFormInput, {
     label: t("settings native redirect label")
   }, /* @__PURE__ */ React14.createElement(Input.Switch, {
     checked: settings.enableNativeRedirect,
-    onCheckedChange: (checked) => settings.enableNativeRedirect = !!checked
-  })), /* @__PURE__ */ React14.createElement(SettingsValue, {
+    onCheckedChange: (checked) => settings.enableNativeRedirect = checked
+  })), /* @__PURE__ */ React14.createElement(DeprecatedFormInput, {
     label: t("settings custom slots")
   }, /* @__PURE__ */ React14.createElement(Input.Switch, {
     checked: settings.customSlots,
-    onCheckedChange: (checked) => settings.customSlots = !!checked
-  })), /* @__PURE__ */ React14.createElement(SettingsValue, {
+    onCheckedChange: (checked) => settings.customSlots = checked
+  })), /* @__PURE__ */ React14.createElement(DeprecatedFormInput, {
     label: t("settings flat deck")
   }, /* @__PURE__ */ React14.createElement(Input.Switch, {
     checked: settings.flatDeck,
-    onCheckedChange: (checked) => settings.flatDeck = !!checked
+    onCheckedChange: (checked) => settings.flatDeck = checked
   })));
 };
 
 // packages/plugins/plugin-deck/src/layout.ts
 import { produce } from "immer";
-import { SLUG_ENTRY_SEPARATOR, SLUG_KEY_VALUE_SEPARATOR, SLUG_LIST_SEPARATOR, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR4 } from "@dxos/app-framework";
+import { SLUG_ENTRY_SEPARATOR, SLUG_KEY_VALUE_SEPARATOR, SLUG_LIST_SEPARATOR, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR3 } from "@dxos/app-framework";
 var partsThatSupportIncrement = [
   "main"
 ];
@@ -1045,7 +1075,7 @@ var mergeLayoutParts = (...layoutParts) => {
   }), {});
 };
 var parseLayoutEntry = (itemString) => {
-  const [id, path] = itemString.split(SLUG_PATH_SEPARATOR4);
+  const [id, path] = itemString.split(SLUG_PATH_SEPARATOR3);
   const entry = {
     id
   };
@@ -1072,7 +1102,7 @@ var soloPartToUri = (layout) => {
     return "";
   }
   const entry = soloPart[0];
-  return `${entry.id}${entry.path ? SLUG_PATH_SEPARATOR4 + entry.path : ""}`;
+  return `${entry.id}${entry.path ? SLUG_PATH_SEPARATOR3 + entry.path : ""}`;
 };
 
 // packages/plugins/plugin-deck/src/translations.ts
@@ -1083,12 +1113,11 @@ var translations_default = [
         "main header label": "Main header",
         "open navigation sidebar label": "Open navigation sidebar.",
         "open complementary sidebar label": "Open complementary sidebar.",
-        "open settings label": "Show settings",
         "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.",
         "toggle fullscreen label": "Toggle fullscreen",
-        "settings show footer label": "Show footer (experimental)",
+        "settings show hints label": "Show hints",
         "settings native redirect label": "Enable native url redirect (experimental)",
         "settings custom slots": "Theme option (experimental)",
         "settings new plank position start label": "Start",
@@ -1099,7 +1128,6 @@ var translations_default = [
         "undo action label": "Undo",
         "undo action alt": "Undo previous action",
         "undo close label": "Dismiss",
-        "open comments label": "Open comments",
         "error fallback message": "Unable to open this item",
         "plank heading fallback label": "Untitled",
         "actions menu label": "Options",
@@ -1141,8 +1169,9 @@ var DeckPlugin = ({ observability } = {}) => {
   const unsubscriptionCallbacks = [];
   let currentUndoId;
   let handleNavigation;
+  const panels = [];
   const settings = new LocalStorageStore("dxos.org/settings/layout", {
-    showFooter: false,
+    showHints: false,
     customSlots: false,
     flatDeck: false,
     enableNativeRedirect: false,
@@ -1227,6 +1256,22 @@ var DeckPlugin = ({ observability } = {}) => {
       }
     }
   };
+  const handleSetLocation = (next) => {
+    if (attentionPlugin) {
+      const attended = attentionPlugin.provides.attention.attended;
+      const [attendedId] = Array.from(attended);
+      const ids = (layout.values.layoutMode === "deck" ? next.main : next.solo)?.map(({ id }) => id) ?? [];
+      const isAttendedAvailable = !!attendedId && ids.includes(attendedId);
+      if (!isAttendedAvailable) {
+        requestAnimationFrame(() => {
+          const nextAttended = layout.values.layoutMode === "solo" ? next.solo?.[0].id : next.main?.[0]?.id;
+          const article = document.querySelector(`article[data-attendable-id="${nextAttended}"]`);
+          article?.focus();
+        });
+      }
+    }
+    location.values.active = next;
+  };
   return {
     meta: meta_default,
     ready: async (plugins) => {
@@ -1236,63 +1281,51 @@ var DeckPlugin = ({ observability } = {}) => {
       clientPlugin = resolvePlugin(plugins, parseClientPlugin);
       layout.prop({
         key: "layoutMode",
-        storageKey: "layout-mode",
         type: LocalStorageStore.enum()
       }).prop({
         key: "sidebarOpen",
-        storageKey: "sidebar-open",
         type: LocalStorageStore.bool()
       }).prop({
         key: "complementarySidebarOpen",
-        storageKey: "complementary-sidebar-open",
         type: LocalStorageStore.bool()
       });
       deck.prop({
         key: "plankSizing",
-        storageKey: "plank-sizing",
         type: LocalStorageStore.json()
       });
       location.prop({
         key: "active",
-        storageKey: "active",
         type: LocalStorageStore.json()
       }).prop({
         key: "closed",
-        storageKey: "closed",
         type: LocalStorageStore.json()
       });
+      panels.push(...filterPlugins(plugins, parsePanelPlugin).flatMap((plugin) => plugin.provides.complementary.panels));
       unsubscriptionCallbacks.push(clientPlugin?.provides.client.shell.onReset(() => {
         layout.expunge();
         location.expunge();
         deck.expunge();
       }));
       settings.prop({
-        key: "showFooter",
-        storageKey: "show-footer",
+        key: "showHints",
         type: LocalStorageStore.bool()
       }).prop({
         key: "customSlots",
-        storageKey: "customSlots",
         type: LocalStorageStore.bool()
       }).prop({
         key: "flatDeck",
-        storageKey: "flatDeck",
         type: LocalStorageStore.bool()
       }).prop({
         key: "enableNativeRedirect",
-        storageKey: "enable-native-redirect",
         type: LocalStorageStore.bool()
       }).prop({
         key: "disableDeck",
-        storageKey: "disable-deck",
         type: LocalStorageStore.bool()
       }).prop({
         key: "newPlankPositioning",
-        storageKey: "newPlankPositioning",
         type: LocalStorageStore.enum()
       }).prop({
         key: "overscroll",
-        storageKey: "overscroll",
         type: LocalStorageStore.enum()
       });
       if (!isSocket2 && settings.values.enableNativeRedirect) {
@@ -1301,13 +1334,13 @@ var DeckPlugin = ({ observability } = {}) => {
       handleNavigation = async () => {
         const pathname = window.location.pathname;
         if (pathname === "/reset") {
-          location.values.active = {
+          handleSetLocation({
             sidebar: [
               {
                 id: NAV_ID
               }
             ]
-          };
+          });
           location.values.closed = [];
           layout.values.layoutMode = "solo";
           window.location.pathname = "/";
@@ -1318,26 +1351,16 @@ var DeckPlugin = ({ observability } = {}) => {
           return;
         }
         const startingLayout = removePart(location.values.active, "solo");
-        location.values.active = mergeLayoutParts(layoutFromUri, startingLayout);
+        handleSetLocation(mergeLayoutParts(layoutFromUri, startingLayout));
         layout.values.layoutMode = "solo";
       };
       await handleNavigation();
       window.addEventListener("popstate", handleNavigation);
-      unsubscriptionCallbacks.push(effect(() => {
-        const selectedPath = soloPartToUri(location.values.active);
+      unsubscriptionCallbacks.push(scheduledEffect(() => ({
+        selectedPath: soloPartToUri(location.values.active)
+      }), ({ selectedPath }) => {
         history.pushState(null, "", `/${selectedPath}${window.location.search}`);
       }));
-      unsubscriptionCallbacks.push(effect(() => {
-        const soloId = location.values.active.solo?.[0].id;
-        if (layout.values.layoutMode === "solo" && soloId && layout.values.scrollIntoView !== soloId) {
-          void intentPlugin?.provides.intent.dispatch({
-            action: LayoutAction3.SCROLL_INTO_VIEW,
-            data: {
-              id: soloId
-            }
-          });
-        }
-      }));
       layoutModeHistory.values.push(`${layout.values.layoutMode}`);
     },
     unload: async () => {
@@ -1380,8 +1403,7 @@ var DeckPlugin = ({ observability } = {}) => {
                       ns: DECK_PLUGIN
                     }
                   ],
-                  icon: (props) => /* @__PURE__ */ React15.createElement(ArrowsOut, props),
-                  iconSymbol: "ph--arrows-out--regular",
+                  icon: "ph--arrows-out--regular",
                   keyBinding: {
                     macos: "ctrl+meta+f",
                     windows: "shift+ctrl+f"
@@ -1398,16 +1420,14 @@ var DeckPlugin = ({ observability } = {}) => {
         value: deck.values
       }, props.children)),
       root: () => {
-        return /* @__PURE__ */ React15.createElement(Mosaic.Root, null, /* @__PURE__ */ React15.createElement(DeckLayout, {
-          attention: attentionPlugin?.provides.attention ?? {
-            attended: /* @__PURE__ */ new Set()
-          },
+        return /* @__PURE__ */ React15.createElement(DeckLayout, {
           layoutParts: location.values.active,
-          showHintsFooter: settings.values.showFooter,
+          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) {
@@ -1419,7 +1439,7 @@ var DeckPlugin = ({ observability } = {}) => {
               }, 1e3);
             }
           }
-        }), /* @__PURE__ */ React15.createElement(Mosaic.DragOverlay, null));
+        });
       },
       surface: {
         component: ({ data, role }) => {
@@ -1455,7 +1475,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 } else {
                   log.warn("Invalid layout mode", intent?.data?.layoutMode, {
                     F: __dxlog_file,
-                    L: 390,
+                    L: 406,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });
@@ -1501,7 +1521,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 data: true
               };
             }
-            case NavigationAction3.OPEN: {
+            case NavigationAction4.OPEN: {
               const previouslyOpenIds = new Set(openIds2(location.values.active));
               const layoutMode = layout.values.layoutMode;
               batch(() => {
@@ -1510,7 +1530,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 }
                 const processLayoutEntry = (partName, entryString, currentLayout) => {
                   const toggle = true;
-                  const [id, path] = entryString.split(SLUG_PATH_SEPARATOR5);
+                  const [id, path] = entryString.split(SLUG_PATH_SEPARATOR4);
                   const layoutEntry = {
                     id,
                     ...path ? {
@@ -1539,7 +1559,7 @@ var DeckPlugin = ({ observability } = {}) => {
                     newLayout = processLayoutEntry(partName, layoutEntries, newLayout);
                   }
                 });
-                location.values.active = newLayout;
+                handleSetLocation(newLayout);
               });
               const ids = openIds2(location.values.active);
               const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
@@ -1558,7 +1578,7 @@ var DeckPlugin = ({ observability } = {}) => {
                   ] : [],
                   intent.data?.object ? [
                     {
-                      action: NavigationAction3.EXPOSE,
+                      action: NavigationAction4.EXPOSE,
                       data: {
                         id: fullyQualifiedId(intent.data.object)
                       }
@@ -1581,16 +1601,16 @@ var DeckPlugin = ({ observability } = {}) => {
                 ]
               };
             }
-            case NavigationAction3.ADD_TO_ACTIVE: {
+            case NavigationAction4.ADD_TO_ACTIVE: {
               const data = intent.data;
               const layoutEntry = {
                 id: data.id
               };
               const effectivePart = getEffectivePart(data.part, layout.values.layoutMode);
-              location.values.active = openEntry(location.values.active, effectivePart, layoutEntry, {
+              handleSetLocation(openEntry(location.values.active, effectivePart, layoutEntry, {
                 positioning: data.positioning ?? settings.values.newPlankPositioning,
                 pivotId: data.pivotId
-              });
+              }));
               const intents = [];
               if (data.scrollIntoView && layout.values.layoutMode === "deck") {
                 intents.push([
@@ -1607,7 +1627,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 intents
               };
             }
-            case NavigationAction3.CLOSE: {
+            case NavigationAction4.CLOSE: {
               return batch(() => {
                 if (!intent.data) {
                   return;
@@ -1632,32 +1652,32 @@ var DeckPlugin = ({ observability } = {}) => {
                     });
                   }
                 });
-                location.values.active = newLayout;
+                handleSetLocation(newLayout);
                 return {
                   data: true
                 };
               });
             }
             // TODO(wittjosiah): Factor out.
-            case NavigationAction3.SET: {
+            case NavigationAction4.SET: {
               return batch(() => {
                 if (isLayoutParts(intent.data?.activeParts)) {
-                  location.values.active = intent.data.activeParts;
+                  handleSetLocation(intent.data.activeParts);
                 }
                 return {
                   data: true
                 };
               });
             }
-            case NavigationAction3.ADJUST: {
+            case NavigationAction4.ADJUST: {
               return batch(() => {
                 if (isLayoutAdjustment(intent.data)) {
                   const adjustment = intent.data;
                   if (adjustment.type === "increment-end" || adjustment.type === "increment-start") {
-                    location.values.active = incrementPlank(location.values.active, {
+                    handleSetLocation(incrementPlank(location.values.active, {
                       type: adjustment.type,
                       layoutCoordinate: adjustment.layoutCoordinate
-                    });
+                    }));
                   }
                   if (adjustment.type === "solo") {
                     const entryId = adjustment.layoutCoordinate.entryId;
@@ -1673,7 +1693,7 @@ var DeckPlugin = ({ observability } = {}) => {
                               }
                             },
                             {
-                              action: NavigationAction3.OPEN,
+                              action: NavigationAction4.OPEN,
                               data: {
                                 activeParts: {
                                   solo: [
@@ -1697,7 +1717,7 @@ var DeckPlugin = ({ observability } = {}) => {
                               }
                             },
                             {
-                              action: NavigationAction3.CLOSE,
+                              action: NavigationAction4.CLOSE,
                               data: {
                                 activeParts: {
                                   solo: [
@@ -1707,7 +1727,7 @@ var DeckPlugin = ({ observability } = {}) => {
                               }
                             },
                             {
-                              action: NavigationAction3.OPEN,
+                              action: NavigationAction4.OPEN,
                               data: {
                                 noToggle: true,
                                 activeParts: {