@dxos/plugin-deck 0.7.5-labs.c0e040f → 0.7.5-labs.d199c0f

package/dist/lib/browser/{chunk-23KS5L3I.mjs → chunk-O4RFYYQ6.mjs}

@@ -1,13 +1,19 @@
+import {
+  calculateOverscroll,
+  layoutAppliesTopbar,
+  useBreakpoints,
+  useHoistStatusbar
+} from "./chunk-KANJBSIX.mjs";
 import {
   DeckCapabilities
-} from "./chunk-YQ2GWTDU.mjs";
+} from "./chunk-22AQ5IVX.mjs";
 import {
   DeckAction,
   NewPlankPositions,
   OverscrollOptions,
   SLUG_PATH_SEPARATOR,
   getMode
-} from "./chunk-PTLNGUND.mjs";
+} from "./chunk-FT33W5CI.mjs";
 import {
   DECK_PLUGIN
 } from "./chunk-N7TEPFVR.mjs";
@@ -94,10 +100,10 @@ var Banner = ({ variant, classNames }) => {
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
 import { untracked } from "@preact/signals-core";
-import React17, { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef2, Fragment as Fragment2 } from "react";
-import { LayoutAction as LayoutAction4, createIntent as createIntent4, Surface as Surface10, useCapability as useCapability6, useIntentDispatcher as useIntentDispatcher4, usePluginManager } from "@dxos/app-framework";
+import React17, { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo5, useRef as useRef2, Fragment as Fragment3, useState as useState4 } from "react";
+import { LayoutAction as LayoutAction4, createIntent as createIntent4, Surface as Surface10, useCapability as useCapability5, useIntentDispatcher as useIntentDispatcher4, usePluginManager } from "@dxos/app-framework";
 import { AttentionCapabilities } from "@dxos/plugin-attention";
-import { AlertDialog, Dialog as NaturalDialog, Main as Main3, Popover as Popover2, useOnTransition, useMediaQuery as useMediaQuery2 } from "@dxos/react-ui";
+import { AlertDialog, Dialog as NaturalDialog, Main as Main3, Popover as Popover2, useOnTransition, useMediaQuery } from "@dxos/react-ui";
 import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from "@dxos/react-ui-stack";
 import { mainPaddingTransitions } from "@dxos/react-ui-theme";
 
@@ -186,11 +192,12 @@ var ActiveNode = () => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
-import React8, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } from "react";
-import { createIntent as createIntent2, LayoutAction as LayoutAction2, Surface as Surface4, useAppGraph as useAppGraph3, useCapability as useCapability3, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
-import { Main, useTranslation as useTranslation5, toLocalizedString as toLocalizedString2, IconButton as IconButton2, ScrollArea } from "@dxos/react-ui";
+import React8, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useState as useState3, Fragment as Fragment2 } from "react";
+import { createIntent as createIntent2, LayoutAction as LayoutAction2, Surface as Surface4, useAppGraph as useAppGraph3, useCapabilities, useCapability as useCapability2, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
+import { Main, useTranslation as useTranslation5, toLocalizedString as toLocalizedString2, IconButton as IconButton2, ScrollArea as NaturalScrollArea } from "@dxos/react-ui";
 import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
 import { Tabs } from "@dxos/react-ui-tabs";
+import { byPosition } from "@dxos/util";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/PlankError.tsx
 import React7, { useEffect as useEffect4, useState as useState2 } from "react";
@@ -198,7 +205,7 @@ import { useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { descriptionText, mx as mx3 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
-import React5, { Fragment, memo, useCallback, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import React5, { Fragment, memo, useCallback, useEffect as useEffect3, useMemo } from "react";
 import { createIntent, LayoutAction, Surface as Surface3, useAppGraph as useAppGraph2, useIntentDispatcher } from "@dxos/app-framework";
 import { Icon as Icon2, Popover, toLocalizedString, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { StackItem } from "@dxos/react-ui-stack";
@@ -217,7 +224,7 @@ var PlankControl = ({ icon, label, ...props }) => {
     className: "sr-only"
   }, label), /* @__PURE__ */ React4.createElement(Icon, {
     icon,
-    size: 4
+    size: 5
   }))), /* @__PURE__ */ React4.createElement(Tooltip.Portal, null, /* @__PURE__ */ React4.createElement(Tooltip.Content, {
     side: "bottom"
   }, label)));
@@ -258,56 +265,6 @@ var PlankControls = /* @__PURE__ */ forwardRef(({ onClick, variant = "default",
   }), children);
 });
 
-// packages/plugins/plugin-deck/src/util/overscroll.ts
-var calculateOverscroll = (planksCount) => {
-  if (!planksCount) {
-    return {
-      paddingInlineStart: 0,
-      paddingInlineEnd: 0
-    };
-  }
-  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 {
-    return {
-      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/util/useBreakpoints.ts
-import { useMediaQuery } from "@dxos/react-ui";
-var useBreakpoints = () => {
-  const [isNotMobile] = useMediaQuery("md");
-  const [isDesktop] = useMediaQuery("lg");
-  return isDesktop ? "desktop" : isNotMobile ? "tablet" : "mobile";
-};
-
-// packages/plugins/plugin-deck/src/util/layoutAppliesTopbar.ts
-var layoutAppliesTopbar = (breakpoint) => {
-  return document.body.getAttribute("data-platform") === "win" && breakpoint === "desktop";
-};
-
-// packages/plugins/plugin-deck/src/util/useHoistStatusbar.ts
-import { useMemo } from "react";
-import { Capabilities, useCapability as useCapability2 } from "@dxos/app-framework";
-var useHoistStatusbar = (breakpoint) => {
-  const enableIdeStyleStatusbar = useCapability2(Capabilities.SettingsStore).getStore(DECK_PLUGIN).value.enableIdeStyleStatusbar;
-  return useMemo(() => {
-    return breakpoint === "desktop" && enableIdeStyleStatusbar && // NOTE(thure): this last predicate depends on a head script that measures `env(safe-area-bottom)` on resize;
-    // see that of composer-app for an example.
-    document.body.getAttribute("data-safe-area-bottom") === "0";
-  }, [
-    enableIdeStyleStatusbar,
-    breakpoint
-  ]);
-};
-
 // packages/plugins/plugin-deck/src/components/fragments.ts
 import { mx as mx2 } from "@dxos/react-ui-theme";
 var soloInlinePadding = "pis-[calc(env(safe-area-inset-left)+.25rem)] pie-[calc(env(safe-area-inset-left)+.25rem)]";
@@ -338,7 +295,7 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart
     node
   ]);
   const attendableId = id.split(SLUG_PATH_SEPARATOR).at(0);
-  const capabilities = useMemo2(() => ({
+  const capabilities = useMemo(() => ({
     solo: breakpoint !== "mobile" && (part === "solo" || part === "deck"),
     incrementStart: canIncrementStart,
     incrementEnd: canIncrementEnd
@@ -348,7 +305,7 @@ var NodePlankHeading = /* @__PURE__ */ memo(({ id, part, node, canIncrementStart
     canIncrementStart,
     canIncrementEnd
   ]);
-  const sigilActions = useMemo2(() => node && [
+  const sigilActions = useMemo(() => node && [
     actions,
     graph.actions(node)
   ].filter((a) => a.length > 0), [
@@ -479,22 +436,24 @@ var PlankError = ({ id, part, node, error }) => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
-var ComplementarySidebar = ({ panels, current }) => {
-  const layout = useCapability3(DeckCapabilities.MutableDeckState);
-  const attended = useAttended2();
-  const panelIds = useMemo3(() => panels.map((panel) => panel.id), [
-    panels
-  ]);
-  const activePanelId = panelIds.find((panelId) => panelId === current) ?? panels[0].id;
-  const activeEntryId = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${activePanelId}` : void 0;
-  const { graph } = useAppGraph3();
-  const node = useNode(graph, activeEntryId);
+var ComplementarySidebar = ({ current }) => {
   const { t } = useTranslation5(DECK_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher2();
-  useNodeActionExpander(node);
+  const layout = useCapability2(DeckCapabilities.MutableDeckState);
+  const attended = useAttended2();
+  const { graph } = useAppGraph3();
+  const node = useNode(graph, attended[0]);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
+  const panels = useCapabilities(DeckCapabilities.ComplementaryPanel);
+  const availablePanels = panels.filter((panel) => {
+    if (!node || !panel.filter) {
+      return true;
+    }
+    return panel.filter(node);
+  }).toSorted(byPosition);
+  const activePanelId = availablePanels.find((panel) => panel.id === current)?.id ?? availablePanels[0]?.id;
   const [internalValue, setInternalValue] = useState3(activePanelId);
   useEffect5(() => {
     setInternalValue(activePanelId);
@@ -518,6 +477,15 @@ var ComplementarySidebar = ({ panels, current }) => {
     activePanelId,
     dispatch
   ]);
+  const data = useMemo2(() => node && {
+    id: node.id,
+    subject: node.data,
+    workspace: layout.activeDeck,
+    popoverAnchorId: layout.popoverAnchorId
+  }, [
+    node,
+    layout.popoverAnchorId
+  ]);
   return /* @__PURE__ */ React8.createElement(Main.ComplementarySidebar, {
     classNames: [
       topbar && "block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
@@ -531,10 +499,10 @@ var ComplementarySidebar = ({ panels, current }) => {
     classNames: "contents"
   }, /* @__PURE__ */ React8.createElement("div", {
     role: "none",
-    className: "absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag"
+    className: "absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag"
   }, /* @__PURE__ */ React8.createElement(Tabs.Tablist, {
     classNames: "grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto"
-  }, panels.map((panel) => /* @__PURE__ */ React8.createElement(Tabs.Tab, {
+  }, availablePanels.map((panel) => /* @__PURE__ */ React8.createElement(Tabs.Tab, {
     key: panel.id,
     value: panel.id,
     asChild: true
@@ -556,34 +524,45 @@ var ComplementarySidebar = ({ panels, current }) => {
   })), /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: "hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1"
-  }, /* @__PURE__ */ React8.createElement(ToggleComplementarySidebarButton, null))), panels.map((panel) => /* @__PURE__ */ React8.createElement(Tabs.Tabpanel, {
+  }, /* @__PURE__ */ React8.createElement(ToggleComplementarySidebarButton, null))), availablePanels.map((panel) => /* @__PURE__ */ React8.createElement(Tabs.Tabpanel, {
     key: panel.id,
     value: panel.id,
-    classNames: 'absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content]',
+    classNames: 'absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]',
     ...layout.complementarySidebarState !== "expanded" && {
       inert: "true"
     }
-  }, panel.id === activePanelId && node && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("h2", {
-    className: "flex items-center pli-2 border-separator border-be"
-  }, toLocalizedString2(panel.label, t)), /* @__PURE__ */ React8.createElement(ScrollArea.Root, null, /* @__PURE__ */ React8.createElement(ScrollArea.Viewport, null, /* @__PURE__ */ React8.createElement(Surface4, {
-    key: activeEntryId,
+  }, /* @__PURE__ */ React8.createElement(ComplementarySidebarPanel, {
+    panel,
+    activePanelId,
+    data,
+    hoistStatusbar
+  })))));
+};
+var ScrollArea = ({ children }) => {
+  return /* @__PURE__ */ React8.createElement(NaturalScrollArea.Root, null, /* @__PURE__ */ React8.createElement(NaturalScrollArea.Viewport, null, children), /* @__PURE__ */ React8.createElement(NaturalScrollArea.Scrollbar, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React8.createElement(NaturalScrollArea.Thumb, null)));
+};
+var ComplementarySidebarPanel = ({ panel, activePanelId, data, hoistStatusbar }) => {
+  const { t } = useTranslation5(DECK_PLUGIN);
+  if (panel.id !== activePanelId || !data) {
+    return null;
+  }
+  const Wrapper = panel.fixed ? Fragment2 : ScrollArea;
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("h2", {
+    className: "flex items-center pli-2 border-separator border-be font-medium"
+  }, toLocalizedString2(panel.label, t)), /* @__PURE__ */ React8.createElement(Wrapper, null, /* @__PURE__ */ React8.createElement(Surface4, {
     role: `complementary--${activePanelId}`,
-    data: {
-      id: activeEntryId,
-      subject: node.properties.object ?? node.properties.space,
-      popoverAnchorId: layout.popoverAnchorId
-    },
+    data,
     fallback: PlankContentError,
     placeholder: /* @__PURE__ */ React8.createElement(PlankLoading, null)
-  })), /* @__PURE__ */ React8.createElement(ScrollArea.Scrollbar, {
-    orientation: "vertical"
-  }, /* @__PURE__ */ React8.createElement(ScrollArea.Thumb, null))), !hoistStatusbar && /* @__PURE__ */ React8.createElement("div", {
+  })), !hoistStatusbar && /* @__PURE__ */ React8.createElement("div", {
     role: "contentinfo",
-    className: "flex flex-wrap justify-center items-center border-bs border-separator plb-1"
+    className: "flex flex-wrap justify-center items-center border-bs border-separator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]"
   }, /* @__PURE__ */ React8.createElement(Surface4, {
     role: "status-bar--r1-footer",
     limit: 1
-  })))))));
+  })));
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ContentEmpty.tsx
@@ -646,8 +625,8 @@ var Fullscreen = ({ id }) => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
-import React12, { memo as memo2, useCallback as useCallback3, useLayoutEffect, useMemo as useMemo4, useRef } from "react";
-import { createIntent as createIntent3, LayoutAction as LayoutAction3, Surface as Surface7, useCapability as useCapability4, useAppGraph as useAppGraph5, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import React12, { memo as memo2, useCallback as useCallback3, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
+import { createIntent as createIntent3, LayoutAction as LayoutAction3, Surface as Surface7, useCapability as useCapability3, useAppGraph as useAppGraph5, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
 import { debounce } from "@dxos/async";
 import { useAttendableAttributes } from "@dxos/react-ui-attention";
 import { StackItem as StackItem2, railGridHorizontal } from "@dxos/react-ui-stack";
@@ -655,7 +634,7 @@ import { mainIntrinsicSize, mx as mx5 } from "@dxos/react-ui-theme";
 var UNKNOWN_ID = "unknown_id";
 var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active, layoutMode }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher3();
-  const { deck, popoverAnchorId, scrollIntoView } = useCapability4(DeckCapabilities.DeckState);
+  const { deck, popoverAnchorId, scrollIntoView } = useCapability3(DeckCapabilities.DeckState);
   const { graph } = useAppGraph5();
   const node = useNode(graph, id);
   const rootElement = useRef(null);
@@ -666,15 +645,16 @@ var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active,
   const length = active?.length ?? 1;
   const canIncrementStart = active && index !== void 0 && index > 0 && length !== void 0 && length > 1;
   const canIncrementEnd = active && index !== void 0 && index < length - 1 && length !== void 0;
-  const size = deck.plankSizing[id];
+  const key = id.split("+")[0];
+  const size = deck.plankSizing[key];
   const setSize = useCallback3(debounce((nextSize) => {
     return dispatch(createIntent3(DeckAction.UpdatePlankSize, {
-      id,
+      id: key,
       size: nextSize
     }));
   }, 200), [
     dispatch,
-    id
+    key
   ]);
   const handleKeyDown = useCallback3((event) => {
     if (event.target === event.currentTarget && event.key === "Escape") {
@@ -704,7 +684,7 @@ var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active,
   const isSolo = layoutMode === "solo" && part === "solo";
   const isAttendable = isSolo || layoutMode === "deck" && part === "deck";
   const sizeAttrs = useMainSize();
-  const data = useMemo4(() => node && {
+  const data = useMemo3(() => node && {
     subject: node.data,
     path,
     popoverAnchorId
@@ -714,7 +694,7 @@ var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active,
     path,
     popoverAnchorId
   ]);
-  const placeholder = useMemo4(() => /* @__PURE__ */ React12.createElement(PlankLoading, null), []);
+  const placeholder = useMemo3(() => /* @__PURE__ */ React12.createElement(PlankLoading, null), []);
   const className = mx5("attention-surface relative", isSolo && mainIntrinsicSize, isSolo && railGridHorizontal, isSolo ? "grid absolute inset-0" : "!border-separator border-li");
   return /* @__PURE__ */ React12.createElement(Root, {
     ref: rootElement,
@@ -756,15 +736,15 @@ var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, part, path, order, active,
 });
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Sidebar.tsx
-import React13, { useMemo as useMemo5 } from "react";
-import { Surface as Surface8, useCapability as useCapability5 } from "@dxos/app-framework";
+import React13, { useMemo as useMemo4 } from "react";
+import { Surface as Surface8, useCapability as useCapability4 } from "@dxos/app-framework";
 import { Main as Main2 } from "@dxos/react-ui";
 var Sidebar = () => {
-  const { popoverAnchorId, activeDeck: current } = useCapability5(DeckCapabilities.DeckState);
+  const { popoverAnchorId, activeDeck: current } = useCapability4(DeckCapabilities.DeckState);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
-  const navigationData = useMemo5(() => ({
+  const navigationData = useMemo4(() => ({
     popoverAnchorId,
     topbar,
     hoistStatusbar,
@@ -853,9 +833,9 @@ var PlankSeparator = ({ index }) => index > 0 ? /* @__PURE__ */ React17.createEl
     gridColumn: index * 2
   }
 }) : null;
-var DeckLayout = ({ overscroll, showHints, panels, onDismissToast }) => {
+var DeckLayout = ({ overscroll, showHints, onDismissToast }) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher4();
-  const context = useCapability6(DeckCapabilities.MutableDeckState);
+  const context = useCapability5(DeckCapabilities.MutableDeckState);
   const { sidebarState, complementarySidebarState, complementarySidebarPanel, dialogOpen, dialogContent, dialogBlockAlign, dialogType, popoverOpen, popoverContent, popoverAnchorId, deck, toasts } = context;
   const { active, fullscreen, solo, plankSizing } = deck;
   const breakpoint = useBreakpoints();
@@ -864,6 +844,12 @@ var DeckLayout = ({ overscroll, showHints, panels, onDismissToast }) => {
   const pluginManager = usePluginManager();
   const scrollLeftRef = useRef2();
   const deckRef = useRef2(null);
+  const [delayedPopoverVisibility, setDelayedPopoverVisibility] = useState4(false);
+  useEffect6(() => {
+    popoverOpen ? setTimeout(() => setDelayedPopoverVisibility(true), 40) : setDelayedPopoverVisibility(false);
+  }, [
+    popoverOpen
+  ]);
   useEffect6(() => {
     const attended = untracked(() => {
       const attention = pluginManager.context.requestCapability(AttentionCapabilities.Attention);
@@ -874,7 +860,7 @@ var DeckLayout = ({ overscroll, showHints, panels, onDismissToast }) => {
       document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
     }
   }, []);
-  const [isNotMobile] = useMediaQuery2("md", {
+  const [isNotMobile] = useMediaQuery("md", {
     ssr: false
   });
   const shouldRevert = useRef2(false);
@@ -929,7 +915,7 @@ var DeckLayout = ({ overscroll, showHints, panels, onDismissToast }) => {
     solo
   ]);
   const isEmpty = !solo && active.length === 0;
-  const padding = useMemo6(() => {
+  const padding = useMemo5(() => {
     if (!solo && overscroll === "centering") {
       return calculateOverscroll(active.length);
     }
@@ -939,7 +925,7 @@ var DeckLayout = ({ overscroll, showHints, panels, onDismissToast }) => {
     overscroll,
     deck
   ]);
-  const mainPosition = useMemo6(() => [
+  const mainPosition = useMemo5(() => [
     "grid !block-start-[env(safe-area-inset-top)]",
     topbar && "!block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
     hoistStatusbar && "lg:block-end-[--statusbar-size]"
@@ -948,17 +934,24 @@ var DeckLayout = ({ overscroll, showHints, panels, onDismissToast }) => {
     hoistStatusbar
   ]);
   const Dialog = dialogType === "alert" ? AlertDialog : NaturalDialog;
+  const handlePopoverOpenChange = useCallback4((nextOpen) => {
+    if (nextOpen && popoverAnchorId) {
+      context.popoverOpen = true;
+    } else {
+      context.popoverOpen = false;
+      context.popoverAnchorId = void 0;
+      context.popoverSide = void 0;
+    }
+  }, [
+    context
+  ]);
+  const handlePopoverClose = useCallback4(() => handlePopoverOpenChange(false), [
+    handlePopoverOpenChange
+  ]);
   return /* @__PURE__ */ React17.createElement(Popover2.Root, {
     modal: true,
-    open: !!(popoverAnchorId && popoverOpen),
-    onOpenChange: (nextOpen) => {
-      if (nextOpen && popoverAnchorId) {
-        context.popoverOpen = true;
-      } else {
-        context.popoverOpen = false;
-        context.popoverAnchorId = void 0;
-      }
-    }
+    open: !!(popoverAnchorId && delayedPopoverVisibility),
+    onOpenChange: handlePopoverOpenChange
   }, /* @__PURE__ */ React17.createElement(ActiveNode, null), fullscreen && /* @__PURE__ */ React17.createElement(Fullscreen, {
     id: solo
   }), !fullscreen && /* @__PURE__ */ React17.createElement(Main3.Root, {
@@ -967,7 +960,6 @@ var DeckLayout = ({ overscroll, showHints, panels, onDismissToast }) => {
     complementarySidebarState: context.complementarySidebarState,
     onComplementarySidebarStateChange: (next) => context.complementarySidebarState = next
   }, /* @__PURE__ */ React17.createElement(Sidebar, null), /* @__PURE__ */ React17.createElement(ComplementarySidebar, {
-    panels,
     current: complementarySidebarPanel
   }), /* @__PURE__ */ React17.createElement(Main3.Overlay, null), isEmpty && /* @__PURE__ */ React17.createElement(Main3.Content, {
     bounce: true,
@@ -1004,7 +996,7 @@ var DeckLayout = ({ overscroll, showHints, panels, onDismissToast }) => {
     itemsCount: 2 * (active.length ?? 0) - 1,
     style: padding,
     ref: deckRef
-  }, active.map((entryId, index) => /* @__PURE__ */ React17.createElement(Fragment2, {
+  }, active.map((entryId, index) => /* @__PURE__ */ React17.createElement(Fragment3, {
     key: entryId
   }, /* @__PURE__ */ React17.createElement(PlankSeparator, {
     index
@@ -1037,10 +1029,8 @@ var DeckLayout = ({ overscroll, showHints, panels, onDismissToast }) => {
   })))), topbar && /* @__PURE__ */ React17.createElement(Topbar, null), hoistStatusbar && /* @__PURE__ */ React17.createElement(StatusBar, {
     showHints
   })), /* @__PURE__ */ React17.createElement(Popover2.Portal, null, /* @__PURE__ */ React17.createElement(Popover2.Content, {
-    onEscapeKeyDown: () => {
-      context.popoverOpen = false;
-      context.popoverAnchorId = void 0;
-    }
+    side: context.popoverSide,
+    onEscapeKeyDown: handlePopoverClose
   }, /* @__PURE__ */ React17.createElement(Popover2.Viewport, null, /* @__PURE__ */ React17.createElement(Surface10, {
     role: "popover",
     data: popoverContent,
@@ -1121,4 +1111,4 @@ export {
   DeckLayout,
   LayoutSettings
 };
-//# sourceMappingURL=chunk-23KS5L3I.mjs.map
+//# sourceMappingURL=chunk-O4RFYYQ6.mjs.map