@dxos/plugin-deck 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/dist/lib/node-esm/{chunk-V6VEXRD4.mjs → chunk-MBCCNIWY.mjs}

@@ -1,63 +1,64 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
-  getCompanionId,
   useBreakpoints,
   useCompanions,
   useDeckCompanions,
   useDeckState,
   useHoistStatusbar,
   useMainSize,
-  useNodeActionExpander
-} from "./chunk-SKEVPQ7E.mjs";
+  useNodeActionExpander,
+  useSelectedCompanion
+} from "./chunk-EMU4VIPH.mjs";
 import {
   calculateOverscroll,
-  layoutAppliesTopbar,
-  parseEntryId
-} from "./chunk-ADPMWKLL.mjs";
+  layoutAppliesTopbar
+} from "./chunk-DGTRKKWZ.mjs";
 import {
   DeckCapabilities,
   DeckOperation,
-  NewPlankPositions,
-  OverscrollOptions,
   PLANK_COMPANION_TYPE,
-  getMode,
+  getMode
+} from "./chunk-GZJAQ5IP.mjs";
+import {
   meta
-} from "./chunk-XAKTY3EB.mjs";
+} from "./chunk-XCNF4COU.mjs";
 
 // src/components/DeckLayout/Banner.tsx
 import React9 from "react";
-import { Surface as Surface5 } from "@dxos/app-framework/react";
+import { Surface as Surface5 } from "@dxos/app-framework/ui";
 import { useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { mx as mx5, osTranslations } from "@dxos/ui-theme";
 
 // src/components/Sidebar/ComplementarySidebar.tsx
 import React7, { Fragment as Fragment2, useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
-import { Common as Common4 } from "@dxos/app-framework";
-import { Surface as Surface3, useOperationInvoker as useOperationInvoker5 } from "@dxos/app-framework/react";
-import { IconButton as IconButton4, Main, toLocalizedString as toLocalizedString2, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Surface as Surface3, useOperationInvoker as useOperationInvoker5 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation4, getCompanionVariant as getCompanionVariant4 } from "@dxos/app-toolkit";
+import { IconButton as IconButton4, Main, ScrollArea, toLocalizedString as toLocalizedString2, useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { Tabs } from "@dxos/react-ui-tabs";
 import { mx as mx4 } from "@dxos/ui-theme";
 
 // src/components/Plank/Plank.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
 import React5, { memo as memo2, useCallback as useCallback3, useLayoutEffect, useMemo as useMemo2, useRef } from "react";
-import { Common as Common2 } from "@dxos/app-framework";
-import { Surface as Surface2, useAppGraph as useAppGraph2, useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/react";
+import { Surface as Surface2, useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation2, getCompanionVariant as getCompanionVariant2 } from "@dxos/app-toolkit";
+import { useAppGraph as useAppGraph2 } from "@dxos/app-toolkit/ui";
 import { debounce } from "@dxos/async";
 import { useNode } from "@dxos/plugin-graph";
-import { ATTENDABLE_PATH_SEPARATOR, useAttentionAttributes } from "@dxos/react-ui-attention";
+import { useAttentionAttributes } from "@dxos/react-ui-attention";
 import { StackItem as StackItem2, railGridHorizontal } from "@dxos/react-ui-stack";
 import { mainIntrinsicSize, mx as mx3 } from "@dxos/ui-theme";
 
 // src/components/Plank/PlankError.tsx
 import React4, { useEffect as useEffect2, useState } from "react";
-import { useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { ErrorFallback, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { descriptionMessage, mx as mx2 } from "@dxos/ui-theme";
 
 // src/components/Plank/PlankHeading.tsx
 import React2, { Fragment, memo, useCallback as useCallback2, useEffect, useMemo } from "react";
-import { Common } from "@dxos/app-framework";
-import { Surface, useAppGraph, useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/react";
+import { Surface, useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/ui";
+import { LayoutOperation, getCompanionVariant } from "@dxos/app-toolkit";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
 import { Graph, useActionRunner } from "@dxos/plugin-graph";
 import { Icon, IconButton as IconButton2, Popover, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { StackItem } from "@dxos/react-ui-stack";
@@ -66,17 +67,15 @@ import { hoverableControls, hoverableFocusedWithinControls } from "@dxos/ui-them
 
 // src/components/fragments.ts
 import { mx } from "@dxos/ui-theme";
-var soloInlinePadding = "pis-[calc(env(safe-area-inset-left)+.25rem)] pie-[calc(env(safe-area-inset-left)+.25rem)]";
-var sidebarToggleStyles = "bs-[--rail-item] is-[--rail-item] absolute block-end-2 z-[1] !bg-deckSurface lg:hidden";
-var fixedSidebarToggleStyles = mx(sidebarToggleStyles, "inline-start-2");
-var fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, "inline-end-2");
+var soloInlinePadding = "ps-[calc(env(safe-area-inset-left)+.25rem)] pe-[calc(env(safe-area-inset-right)+.25rem)]";
+var sidebarToggleStyles = "h-(--dx-rail-item) w-(--dx-rail-item) absolute bottom-2 z-[1] !bg-deck-surface lg:hidden";
+var fixedSidebarToggleStyles = mx(sidebarToggleStyles, "left-2");
+var fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, "right-2");
 
 // src/components/Plank/PlankControls.tsx
 import React, { forwardRef, useCallback } from "react";
-import { useOperationInvoker } from "@dxos/app-framework/react";
-import { invariant } from "@dxos/invariant";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
 import { ButtonGroup, IconButton, useTranslation } from "@dxos/react-ui";
-var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-deck/src/components/Plank/PlankControls.tsx";
 var PlankControl = ({ icon, label: label3, ...props }) => {
   return /* @__PURE__ */ React.createElement(IconButton, {
     label: label3,
@@ -87,31 +86,20 @@ var PlankControl = ({ icon, label: label3, ...props }) => {
     ...props
   });
 };
-var plankControlSpacing = "pli-2";
+var plankControlSpacing = "px-2";
 var PlankCompanionControls = /* @__PURE__ */ forwardRef(({ primary }, forwardedRef) => {
   const { t } = useTranslation(meta.id);
   const { invokePromise } = useOperationInvoker();
   const handleCloseCompanion = useCallback(() => {
-    invariant(primary, void 0, {
-      F: __dxlog_file,
-      L: 49,
-      S: void 0,
-      A: [
-        "primary",
-        ""
-      ]
-    });
     return invokePromise(DeckOperation.ChangeCompanion, {
-      primary,
       companion: null
     });
   }, [
-    invokePromise,
-    primary
+    invokePromise
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     ref: forwardedRef,
-    className: "contents app-no-drag"
+    className: "contents dx-app-no-drag"
   }, /* @__PURE__ */ React.createElement(PlankControl, {
     label: t("close companion label"),
     variant: "ghost",
@@ -127,7 +115,7 @@ var PlankControls = /* @__PURE__ */ forwardRef(({ children, classNames, variant
   return /* @__PURE__ */ React.createElement(ButtonGroup, {
     ...props,
     classNames: [
-      "app-no-drag !opacity-100",
+      "dx-app-no-drag opacity-100!",
       classNames
     ],
     ref: forwardedRef
@@ -192,7 +180,7 @@ var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncre
   useEffect(() => {
     const frame = requestAnimationFrame(() => {
       if (node) {
-        void Graph.expand(graph, node.id);
+        void Graph.expand(graph, node.id, "child");
       }
     });
     return () => cancelAnimationFrame(frame);
@@ -216,7 +204,7 @@ var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncre
     isCompanionNode,
     deckEnabled
   ]);
-  const { variant } = parseEntryId(id);
+  const variant = isCompanionNode ? getCompanionVariant(id) : void 0;
   const sigilActions = useMemo(() => {
     if (!node) {
       return void 0;
@@ -225,11 +213,11 @@ var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncre
     } else {
       return [
         actions,
-        Graph.getActions(graph, node.id).filter((a) => [
+        Graph.getActions(graph, node.id).filter((action) => [
           "list-item",
           "list-item-primary",
           "heading-list-item"
-        ].includes(a.properties.disposition))
+        ].includes(action.properties.disposition))
       ].filter((a) => a.length > 0);
     }
   }, [
@@ -257,11 +245,11 @@ var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncre
       });
     } else if (eventType === "close") {
       if (part === "complementary") {
-        return invokeSync(Common.LayoutOperation.UpdateComplementary, {
+        return invokeSync(LayoutOperation.UpdateComplementary, {
           state: "collapsed"
         });
       } else {
-        return invokeSync(Common.LayoutOperation.Close, {
+        return invokeSync(LayoutOperation.Close, {
           subject: [
             id
           ]
@@ -279,29 +267,27 @@ var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncre
     id,
     part
   ]);
-  const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover.Anchor : Fragment;
+  const ActionRoot = node && popoverAnchorId === `${meta.id}:${node.id}` ? Popover.Anchor : Fragment;
   const handleTabClick = useCallback2((event) => {
     const target = event.target.closest("[data-id]");
     const tabId = target?.dataset?.id;
-    if (primaryId && tabId) {
+    if (tabId) {
       void invokePromise(DeckOperation.ChangeCompanion, {
-        primary: primaryId,
         companion: tabId
       });
     }
   }, [
-    primaryId,
     invokePromise
   ]);
   return /* @__PURE__ */ React2.createElement(StackItem.Heading, {
     classNames: [
-      "plb-1 items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout density-coarse",
-      part === "solo" ? soloInlinePadding : "pli-1",
+      "py-1 items-stretch gap-1 sticky left-12 dx-app-drag min-w-0 dx-contain-layout dx-density-coarse",
+      part === "solo" ? soloInlinePadding : "px-1",
       ...layoutMode === "solo--fullscreen" ? [
         hoverableControls,
         hoverableFocusedWithinControls,
-        "*:transition-opacity *:opacity-[--controls-opacity] bg-transparent border-transparent transition-[background-color,border-color]",
-        "hover-hover:hover:bg-headerSurface focus-within:bg-headerSurface hover-hover:hover:border-subduedSeparator focus-within:border-subduedSeparator"
+        "*:transition-opacity *:opacity-(--controls-opacity) bg-transparent border-transparent transition-[background-color,border-color]",
+        "hover-hover:hover:bg-header-surface focus-within:bg-header-surface hover-hover:hover:border-subdued-separator focus-within:border-subdued-separator"
       ] : []
     ],
     "data-plank-heading": true
@@ -309,7 +295,7 @@ var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncre
     /* TODO(thure): IMPORTANT: This is a tablist; it should be implemented as such. */
     /* @__PURE__ */ React2.createElement("div", {
       role: "none",
-      className: "flex-1 min-is-0 overflow-x-auto scrollbar-none flex gap-1"
+      className: "flex-1 min-w-0 overflow-x-auto scrollbar-none flex gap-1"
     }, companions.map(({ id: id2, properties: { icon: icon2, label: label4 } }) => /* @__PURE__ */ React2.createElement(IconButton2, {
       key: id2,
       "data-id": id2,
@@ -326,7 +312,7 @@ var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncre
     triggerLabel: t("actions menu label"),
     actions: sigilActions,
     onAction: handleAction
-  }, /* @__PURE__ */ React2.createElement(Surface, {
+  }, /* @__PURE__ */ React2.createElement(Surface.Surface, {
     role: "menu-footer",
     data: {
       subject: node.data
@@ -344,7 +330,7 @@ var PlankHeading = /* @__PURE__ */ memo(({ id, part, node, deckEnabled, canIncre
     ...pending && {
       classNames: "text-description"
     }
-  }, label3))), node && part !== "complementary" && /* @__PURE__ */ React2.createElement(Surface, {
+  }, label3))), node && part !== "complementary" && /* @__PURE__ */ React2.createElement(Surface.Surface, {
     role: "navbar-end",
     data: {
       subject: node.data
@@ -364,45 +350,55 @@ import React3 from "react";
 var PlankLoading = () => {
   return /* @__PURE__ */ React3.createElement("div", {
     role: "none",
-    className: "grid place-items-center attention-surface"
+    className: "grid place-items-center dx-attention-surface"
   });
 };
 
 // src/components/Plank/PlankError.tsx
-var PlankContentError = ({ error }) => {
-  const { t } = useTranslation3(meta.id);
-  const errorString = error?.toString() ?? "";
-  return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
-    className: "overflow-y-auto p-8 attention-surface grid place-items-center"
-  }, /* @__PURE__ */ React4.createElement("p", {
-    role: "alert",
-    className: mx2(descriptionMessage, "break-all rounded-md p-4")
-  }, error ? errorString : t("error fallback message")));
-};
 var PlankError = ({ id, part, node, error }) => {
   const [timedOut, setTimedOut] = useState(false);
   useEffect2(() => {
-    setTimeout(() => setTimedOut(true), 5e3);
+    const timer = setTimeout(() => setTimedOut(true), 5e3);
+    return () => clearTimeout(timer);
   }, []);
   return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(PlankHeading, {
     id,
     part,
     node,
     pending: !timedOut
-  }), timedOut ? /* @__PURE__ */ React4.createElement(PlankContentError, {
+  }), timedOut ? /* @__PURE__ */ React4.createElement(PlankErrorFallback, {
     error
   }) : /* @__PURE__ */ React4.createElement(PlankLoading, null));
 };
+var PlankErrorFallback = ({ error }) => {
+  const { t } = useTranslation3(meta.id);
+  if (process.env.NODE_ENV === "development") {
+    return /* @__PURE__ */ React4.createElement(ErrorFallback, {
+      title: "Plank Error",
+      error
+    });
+  } else {
+    const errorString = error?.toString() ?? "";
+    return /* @__PURE__ */ React4.createElement("div", {
+      role: "alert",
+      "data-testid": "plank-content-error",
+      className: "dx-attention-surface overflow-y-auto p-8 grid place-items-center"
+    }, /* @__PURE__ */ React4.createElement("p", {
+      className: mx2(descriptionMessage, "break-all rounded-md p-4")
+    }, error ? errorString : t("error fallback message")));
+  }
+};
 
 // src/components/Plank/Plank.tsx
 var UNKNOWN_ID = "unknown_id";
-var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, companionId, ...props }) => {
+var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, companionVariant, ...props }) => {
   const { graph } = useAppGraph2();
   const node = useNode(graph, id);
   const companions = useCompanions(id);
-  const currentCompanion = companions.find(({ id: id2 }) => id2 === companionId);
-  const hasCompanion = !!(companionId && currentCompanion);
+  const { companionId } = useSelectedCompanion(companions, companionVariant);
+  const resolvedCompanionId = companionVariant ? companionId : void 0;
+  const currentCompanion = companions.find(({ id: id2 }) => id2 === resolvedCompanionId);
+  const hasCompanion = !!(resolvedCompanionId && currentCompanion);
   return /* @__PURE__ */ React5.createElement(PlankContainer, {
     solo: props.part === "solo",
     companion: hasCompanion,
@@ -417,7 +413,7 @@ var Plank = /* @__PURE__ */ memo2(({ id = UNKNOWN_ID, companionId, ...props }) =
       part: "solo-primary"
     } : {}
   }), hasCompanion && /* @__PURE__ */ React5.createElement(PlankComponent, {
-    id: companionId,
+    id: resolvedCompanionId,
     node: currentCompanion,
     primary: node,
     companions,
@@ -438,7 +434,7 @@ var PlankContainer = ({ children, solo, companion, encapsulate }) => {
   return /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     "data-popover-collision-boundary": true,
-    className: mx3("absolute inset-[--main-spacing] grid", encapsulate && "border border-separator rounded overflow-hidden", companion && "grid-cols-[6fr_4fr]", railGridHorizontal, mainIntrinsicSize),
+    className: mx3("absolute inset-(--main-spacing) grid", encapsulate && "border border-separator rounded-sm overflow-hidden", companion && "grid-cols-[6fr_4fr]", railGridHorizontal, mainIntrinsicSize),
     ...sizeAttrs
   }, children);
 };
@@ -454,8 +450,8 @@ var PlankComponent = /* @__PURE__ */ memo2(({ layoutMode, id, part, path, order,
   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 rootElement = useRef(null);
-  const { variant } = parseEntryId(id);
-  const sizeKey = `${id.split("+")[0]}${variant ? `${ATTENDABLE_PATH_SEPARATOR}${variant}` : ""}`;
+  const variant = node?.type === PLANK_COMPANION_TYPE ? getCompanionVariant2(id) : void 0;
+  const sizeKey = id.split("+")[0];
   const size = deck.plankSizing[sizeKey];
   const handleSizeChange = useCallback3(debounce((nextSize) => {
     return invokePromise(DeckOperation.UpdatePlankSize, {
@@ -484,7 +480,7 @@ var PlankComponent = /* @__PURE__ */ memo2(({ layoutMode, id, part, path, order,
         behavior: "smooth",
         inline: "center"
       });
-      void invokePromise(Common2.LayoutOperation.ScrollIntoView, {
+      void invokePromise(LayoutOperation2.ScrollIntoView, {
         subject: void 0
       });
     }
@@ -517,7 +513,7 @@ var PlankComponent = /* @__PURE__ */ memo2(({ layoutMode, id, part, path, order,
   const placeholder = useMemo2(() => /* @__PURE__ */ React5.createElement(PlankLoading, null), []);
   const Root = part.startsWith("solo") ? "article" : StackItem2.Root;
   const fullscreen = layoutMode === "solo--fullscreen";
-  const className = mx3("attention-surface relative dx-focus-ring-inset-over-all density-coarse", isSolo && "absolute inset-0", isSolo && mainIntrinsicSize, railGridHorizontal, part.startsWith("solo") && "grid", part.startsWith("solo-") && "grid-rows-subgrid row-span-2 min-is-0", fullscreen && "grid-rows-1", part === "deck" && (companioned === "companion" ? "!border-separator border-ie" : "!border-separator border-li"), part === "solo-companion" && "!border-separator border-is", settings?.encapsulatedPlanks && !part.startsWith("solo") && "mli-[--main-spacing] !border-separator border rounded overflow-hidden");
+  const className = mx3("dx-attention-surface relative dx-focus-ring-inset-over-all dx-density-coarse", isSolo && "absolute inset-0", isSolo && mainIntrinsicSize, railGridHorizontal, part.startsWith("solo") && "grid", part.startsWith("solo-") && "grid-rows-subgrid row-span-2 min-w-0", fullscreen && "grid-rows-1", part === "deck" && (companioned === "companion" ? "border-separator! border-e" : "border-separator! border-x"), part === "solo-companion" && "border-separator! border-s", settings?.encapsulatedPlanks && !part.startsWith("solo") && "mx-(--main-spacing) border-separator! border rounded-sm overflow-hidden");
   return /* @__PURE__ */ React5.createElement(Root, {
     ref: rootElement,
     "data-testid": "deck.plank",
@@ -550,12 +546,12 @@ var PlankComponent = /* @__PURE__ */ memo2(({ layoutMode, id, part, path, order,
     primaryId: primary?.id,
     companioned,
     companions
-  }), /* @__PURE__ */ React5.createElement(Surface2, {
+  }), /* @__PURE__ */ React5.createElement(Surface2.Surface, {
     key: node.id,
     role: "article",
     data,
     limit: 1,
-    fallback: PlankContentError,
+    fallback: PlankErrorFallback,
     placeholder
   })) : /* @__PURE__ */ React5.createElement(PlankError, {
     id,
@@ -565,16 +561,16 @@ var PlankComponent = /* @__PURE__ */ memo2(({ layoutMode, id, part, path, order,
 
 // src/components/Sidebar/SidebarButton.tsx
 import React6, { useCallback as useCallback4 } from "react";
-import { Common as Common3 } from "@dxos/app-framework";
-import { useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/react";
+import { useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation3, getCompanionVariant as getCompanionVariant3 } from "@dxos/app-toolkit";
 import { IconButton as IconButton3, useTranslation as useTranslation4 } from "@dxos/react-ui";
 var ToggleSidebarButton = ({ classNames, variant = "ghost" }) => {
-  const { state, updateState } = useDeckState();
+  const { updateState } = useDeckState();
   const { t } = useTranslation4(meta.id);
   const handleClick = useCallback4(() => {
-    updateState((s) => ({
-      ...s,
-      sidebarState: s.sidebarState === "expanded" ? "collapsed" : "expanded"
+    updateState((state) => ({
+      ...state,
+      sidebarState: state.sidebarState === "expanded" ? "collapsed" : "expanded"
     }));
   }, [
     updateState
@@ -593,8 +589,8 @@ var CloseSidebarButton = () => {
   const { updateState } = useDeckState();
   const { t } = useTranslation4(meta.id);
   const handleClick = useCallback4(() => {
-    updateState((s) => ({
-      ...s,
+    updateState((state) => ({
+      ...state,
       sidebarState: "collapsed"
     }));
   }, [
@@ -607,7 +603,7 @@ var CloseSidebarButton = () => {
     size: 4,
     label: t("close navigation sidebar label"),
     onClick: handleClick,
-    classNames: "rounded-none pli-1 dx-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]"
+    classNames: "rounded-none px-1 dx-focus-ring-inset pe-[max(.5rem,env(safe-area-inset-left))]"
   });
 };
 var ToggleComplementarySidebarButton = ({ inR0, classNames, current }) => {
@@ -617,13 +613,13 @@ var ToggleComplementarySidebarButton = ({ inR0, classNames, current }) => {
   const companions = useDeckCompanions();
   const handleClick = useCallback4(() => {
     const nextState = state.complementarySidebarState === "expanded" ? "collapsed" : "expanded";
-    updateState((s) => ({
-      ...s,
+    updateState((state2) => ({
+      ...state2,
       complementarySidebarState: nextState
     }));
-    const subject = state.complementarySidebarPanel ?? (companions[0] && getCompanionId(companions[0].id));
+    const subject = state.complementarySidebarPanel ?? (companions[0] && getCompanionVariant3(companions[0].id));
     if (nextState === "expanded" && !current && subject) {
-      invokeSync(Common3.LayoutOperation.UpdateComplementary, {
+      invokeSync(LayoutOperation3.UpdateComplementary, {
         subject
       });
     }
@@ -665,8 +661,8 @@ var ComplementarySidebar = ({ current }) => {
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
   const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
   const companions = useDeckCompanions();
-  const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current);
-  const activeId = activeCompanion && getCompanionId(activeCompanion.id);
+  const activeCompanion = companions.find((companion) => getCompanionVariant4(companion.id) === current);
+  const activeId = activeCompanion && getCompanionVariant4(activeCompanion.id);
   const [internalValue, setInternalValue] = useState2(activeId);
   useEffect3(() => {
     setInternalValue(activeId);
@@ -676,17 +672,17 @@ var ComplementarySidebar = ({ current }) => {
   const handleTabClick = useCallback5((event) => {
     const nextValue = event.currentTarget.getAttribute("data-value");
     if (nextValue === activeId) {
-      updateState((s) => ({
-        ...s,
-        complementarySidebarState: s.complementarySidebarState === "expanded" ? "collapsed" : "expanded"
+      updateState((state2) => ({
+        ...state2,
+        complementarySidebarState: state2.complementarySidebarState === "expanded" ? "collapsed" : "expanded"
       }));
     } else {
       setInternalValue(nextValue);
-      updateState((s) => ({
-        ...s,
+      updateState((state2) => ({
+        ...state2,
         complementarySidebarState: "expanded"
       }));
-      invokeSync(Common4.LayoutOperation.UpdateComplementary, {
+      invokeSync(LayoutOperation4.UpdateComplementary, {
         subject: nextValue
       });
     }
@@ -705,7 +701,7 @@ var ComplementarySidebar = ({ current }) => {
   ]);
   useEffect3(() => {
     if (!activeId) {
-      invokeSync(Common4.LayoutOperation.UpdateComplementary, {
+      invokeSync(LayoutOperation4.UpdateComplementary, {
         state: "collapsed"
       });
     }
@@ -716,8 +712,8 @@ var ComplementarySidebar = ({ current }) => {
   return /* @__PURE__ */ React7.createElement(Main.ComplementarySidebar, {
     label,
     classNames: [
-      topbar && "block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
-      hoistStatusbar && "block-end-[--statusbar-size]"
+      topbar && "top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]",
+      hoistStatusbar && "bottom-(--dx-statusbar-size)"
     ]
   }, /* @__PURE__ */ React7.createElement(Tabs.Root, {
     orientation: "vertical",
@@ -726,37 +722,37 @@ var ComplementarySidebar = ({ current }) => {
     classNames: "contents"
   }, /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: mx4("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-subduedSeparator", "grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag")
+    className: mx4("absolute z-[1] inset-y-0 end-0 !w-(--dx-r0-size)", "py-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] border-s border-subdued-separator", "grid grid-cols-1 grid-rows-[1fr_min-content] bg-toolbar-surface dx-contain-layout dx-app-drag")
   }, /* @__PURE__ */ React7.createElement(Tabs.Tablist, {
-    classNames: "grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto"
+    classNames: "grid grid-cols-1 auto-rows-(--dx-rail-action) p-1 gap-1 overflow-y-auto!"
   }, companions.map((companion) => /* @__PURE__ */ React7.createElement(Tabs.Tab, {
-    key: getCompanionId(companion.id),
-    value: getCompanionId(companion.id),
+    key: getCompanionVariant4(companion.id),
+    value: getCompanionVariant4(companion.id),
     asChild: true
   }, /* @__PURE__ */ React7.createElement(IconButton4, {
     label: toLocalizedString2(companion.properties.label, t),
     icon: companion.properties.icon,
     iconOnly: true,
     tooltipSide: "left",
-    "data-value": getCompanionId(companion.id),
-    variant: activeId === getCompanionId(companion.id) ? state.complementarySidebarState === "expanded" ? "primary" : "default" : "ghost",
+    "data-value": getCompanionVariant4(companion.id),
+    variant: activeId === getCompanionVariant4(companion.id) ? state.complementarySidebarState === "expanded" ? "primary" : "default" : "ghost",
     onClick: handleTabClick
   })))), !hoistStatusbar && /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: "grid grid-cols-1 auto-rows-[--rail-item] p-1 overflow-y-auto"
-  }, /* @__PURE__ */ React7.createElement(Surface3, {
+    className: "grid grid-cols-1 auto-rows-(--dx-rail-item) p-1 overflow-y-auto"
+  }, /* @__PURE__ */ React7.createElement(Surface3.Surface, {
     role: "status-bar--r0-footer",
     limit: 1
   })), /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: "hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1"
+    className: "hidden lg:grid grid-cols-1 auto-rows-(--dx-rail-action) p-1"
   }, /* @__PURE__ */ React7.createElement(ToggleComplementarySidebarButton, null))), activeId && companions.map((companion) => /* @__PURE__ */ React7.createElement(Tabs.Tabpanel, {
-    key: getCompanionId(companion.id),
-    value: getCompanionId(companion.id),
+    key: getCompanionVariant4(companion.id),
+    value: getCompanionVariant4(companion.id),
     classNames: [
       'absolute data-[state="inactive"]:-z-[1] overflow-hidden',
-      "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)]"
+      "inset-y-0 start-0 w-[calc(100%-var(--dx-r0-size))] lg:w-(--dx-r1-size)",
+      "grid grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr_min-content] py-[env(safe-area-inset-top)]"
     ],
     ...state.complementarySidebarState !== "expanded" && {
       inert: true
@@ -770,46 +766,48 @@ var ComplementarySidebar = ({ current }) => {
 };
 var ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }) => {
   const { t } = useTranslation5(meta.id);
-  if (getCompanionId(companion.id) !== activeId && !data) {
+  if (getCompanionVariant4(companion.id) !== activeId && !data) {
     return null;
   }
-  const Wrapper = companion.properties.fixed ? Fragment2 : ScrollArea;
+  const Wrapper = companion.properties.fixed ? Fragment2 : ScrollAreaWrapper;
   return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: "flex items-center p-1 gap-1 border-be border-subduedSeparator"
+    className: "flex items-center p-1 gap-1 border-b border-subdued-separator"
   }, /* @__PURE__ */ React7.createElement(IconButton4, {
     label: toLocalizedString2(companion.properties.label, t),
     icon: companion.properties.icon,
     iconOnly: true,
     tooltipSide: "left",
-    "data-value": getCompanionId(companion.id),
-    classNames: "bs-10 is-10",
+    "data-value": getCompanionVariant4(companion.id),
+    classNames: "h-10 w-10",
     variant: "default"
   }), /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: "pli-1"
-  }, toLocalizedString2(companion.properties.label, t))), /* @__PURE__ */ React7.createElement(Wrapper, null, /* @__PURE__ */ React7.createElement(Surface3, {
-    role: `deck-companion--${getCompanionId(companion.id)}`,
+    className: "px-1"
+  }, toLocalizedString2(companion.properties.label, t))), /* @__PURE__ */ React7.createElement(Wrapper, null, /* @__PURE__ */ React7.createElement(Surface3.Surface, {
+    role: `deck-companion--${getCompanionVariant4(companion.id)}`,
     data,
-    fallback: PlankContentError,
+    fallback: PlankErrorFallback,
     placeholder: /* @__PURE__ */ React7.createElement(PlankLoading, null)
   })), !hoistStatusbar && /* @__PURE__ */ React7.createElement("div", {
     role: "contentinfo",
-    className: "flex flex-wrap justify-center items-center border-bs border-subduedSeparator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]"
-  }, /* @__PURE__ */ React7.createElement(Surface3, {
+    className: "flex flex-wrap justify-center items-center border-y border-subdued-separator pt-1 pb-[max(env(safe-area-inset-bottom),0.25rem)]"
+  }, /* @__PURE__ */ React7.createElement(Surface3.Surface, {
     role: "status-bar--r1-footer",
     limit: 1
   })));
 };
-var ScrollArea = ({ children }) => {
-  return /* @__PURE__ */ React7.createElement("div", {
-    className: "flex flex-col grow overflow-x-hidden overflow-y-auto scrollbar-thin"
-  }, children);
+var ScrollAreaWrapper = ({ children }) => {
+  return /* @__PURE__ */ React7.createElement(ScrollArea.Root, {
+    thin: true,
+    orientation: "vertical",
+    classNames: "grow"
+  }, /* @__PURE__ */ React7.createElement(ScrollArea.Viewport, null, children));
 };
 
 // src/components/Sidebar/Sidebar.tsx
 import React8, { useMemo as useMemo4 } from "react";
-import { Surface as Surface4 } from "@dxos/app-framework/react";
+import { Surface as Surface4 } from "@dxos/app-framework/ui";
 import { Main as Main2 } from "@dxos/react-ui";
 var label2 = [
   "sidebar title",
@@ -839,10 +837,10 @@ var Sidebar = () => {
     label: label2,
     classNames: [
       "grid",
-      topbar && "block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
-      hoistStatusbar && "block-end-[--statusbar-size]"
+      topbar && "top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]",
+      hoistStatusbar && "bottom-(--dx-statusbar-size)"
     ]
-  }, /* @__PURE__ */ React8.createElement(Surface4, {
+  }, /* @__PURE__ */ React8.createElement(Surface4.Surface, {
     role: "navigation",
     data: navigationData,
     limit: 1
@@ -853,9 +851,9 @@ var Sidebar = () => {
 var Banner = ({ variant, classNames }) => {
   const { t } = useTranslation6(meta.id);
   return /* @__PURE__ */ React9.createElement("header", {
-    className: mx5("flex items-stretch relative plb-1 pis-1 pie-2", variant === "topbar" && "fixed inset-inline-0 block-start-[env(safe-area-inset-top)] bs-[--rail-size] border-be border-separator", classNames)
+    className: mx5("flex items-stretch relative py-1 ps-1 pe-2", variant === "topbar" && "fixed inset-x-0 top-[env(safe-area-inset-top)] h-(--dx-rail-size) border-b border-separator", classNames)
   }, variant === "sidebar" ? /* @__PURE__ */ React9.createElement(CloseSidebarButton, null) : /* @__PURE__ */ React9.createElement(ToggleSidebarButton, null), /* @__PURE__ */ React9.createElement("span", {
-    className: "self-center grow mis-1"
+    className: "self-center grow ms-1"
   }, t("current app name", {
     ns: osTranslations
   })), variant === "topbar" && /* @__PURE__ */ React9.createElement("div", {
@@ -863,17 +861,17 @@ var Banner = ({ variant, classNames }) => {
     className: "absolute inset-0 pointer-events-none"
   }, /* @__PURE__ */ React9.createElement("div", {
     role: "none",
-    className: "grid bs-full pointer-fine:p-1 max-is-md mli-auto pointer-events-auto"
-  }, /* @__PURE__ */ React9.createElement(Surface5, {
+    className: "grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto"
+  }, /* @__PURE__ */ React9.createElement(Surface5.Surface, {
     role: "search-input",
     limit: 1
   }))), /* @__PURE__ */ React9.createElement("span", {
     role: "none",
     className: "grow"
-  }), /* @__PURE__ */ React9.createElement(Surface5, {
+  }), /* @__PURE__ */ React9.createElement(Surface5.Surface, {
     role: "header-end",
     limit: 1
-  }), /* @__PURE__ */ React9.createElement(Surface5, {
+  }), /* @__PURE__ */ React9.createElement(Surface5.Surface, {
     role: "notch-start",
     limit: 1
   }));
@@ -885,7 +883,8 @@ import { Mosaic } from "@dxos/react-ui-mosaic";
 
 // src/components/DeckLayout/ActiveNode.tsx
 import React10 from "react";
-import { Surface as Surface6, useAppGraph as useAppGraph3 } from "@dxos/app-framework/react";
+import { Surface as Surface6 } from "@dxos/app-framework/ui";
+import { useAppGraph as useAppGraph3 } from "@dxos/app-toolkit/ui";
 import { useNode as useNode2 } from "@dxos/plugin-graph";
 import { useAttended } from "@dxos/react-ui-attention";
 var ActiveNode = () => {
@@ -896,7 +895,7 @@ var ActiveNode = () => {
   return /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "sr-only"
-  }, /* @__PURE__ */ React10.createElement(Surface6, {
+  }, /* @__PURE__ */ React10.createElement(Surface6.Surface, {
     role: "document-title",
     data: {
       subject: activeNode
@@ -907,8 +906,8 @@ var ActiveNode = () => {
 
 // src/components/DeckLayout/DeckMain.tsx
 import React14, { Fragment as Fragment3, useCallback as useCallback6, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef2 } from "react";
-import { Common as Common5 } from "@dxos/app-framework";
-import { useAtomCapability, useOperationInvoker as useOperationInvoker6, usePluginManager } from "@dxos/app-framework/react";
+import { useAtomCapability, useOperationInvoker as useOperationInvoker6, usePluginManager } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation5 } from "@dxos/app-toolkit";
 import { AttentionCapabilities } from "@dxos/plugin-attention";
 import { Main as Main3, useMediaQuery, useOnTransition } from "@dxos/react-ui";
 import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from "@dxos/react-ui-stack";
@@ -916,7 +915,7 @@ import { mainPaddingTransitions, mx as mx6 } from "@dxos/ui-theme";
 
 // src/components/DeckLayout/ContentEmpty.tsx
 import React11 from "react";
-import { Surface as Surface7 } from "@dxos/app-framework/react";
+import { Surface as Surface7 } from "@dxos/app-framework/ui";
 var ContentEmpty = () => {
   const breakpoint = useBreakpoints();
   const { deck } = useDeckState();
@@ -924,9 +923,9 @@ var ContentEmpty = () => {
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
   return /* @__PURE__ */ React11.createElement("div", {
     role: "none",
-    className: "grid place-items-center p-8 relative bg-deckSurface",
+    className: "grid place-items-center p-8 relative bg-deck-surface",
     "data-testid": "layoutPlugin.firstRunMessage"
-  }, /* @__PURE__ */ React11.createElement(Surface7, {
+  }, /* @__PURE__ */ React11.createElement(Surface7.Surface, {
     role: "keyshortcuts"
   }), !topbar && /* @__PURE__ */ React11.createElement(ToggleSidebarButton, {
     variant: "default",
@@ -936,18 +935,18 @@ var ContentEmpty = () => {
 
 // src/components/DeckLayout/StatusBar.tsx
 import React12 from "react";
-import { Surface as Surface8 } from "@dxos/app-framework/react";
+import { Surface as Surface8 } from "@dxos/app-framework/ui";
 import { useLandmarkMover } from "@dxos/react-ui";
 var StatusBar = ({ showHints }) => {
   const mover = useLandmarkMover(void 0, "3");
   return /* @__PURE__ */ React12.createElement("div", {
     role: "contentinfo",
-    className: "fixed block-end-0 inset-inline-0 bs-[--statusbar-size] border-bs border-separator z-[2] flex text-description",
+    className: "fixed bottom-0 inset-x-0 h-(--dx-statusbar-size) border-y border-separator z-[2] flex text-description",
     ...mover
-  }, showHints && /* @__PURE__ */ React12.createElement(Surface8, {
+  }, showHints && /* @__PURE__ */ React12.createElement(Surface8.Surface, {
     role: "hints",
     limit: 1
-  }), /* @__PURE__ */ React12.createElement(Surface8, {
+  }), /* @__PURE__ */ React12.createElement(Surface8.Surface, {
     role: "status-bar",
     limit: 1
   }));
@@ -967,7 +966,8 @@ var DeckMain = () => {
   const settings = useAtomCapability(DeckCapabilities.Settings);
   const { state, deck, updateState } = useDeckState();
   const { sidebarState, complementarySidebarState, complementarySidebarPanel } = state;
-  const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
+  const { active, companionOpen, companionVariant, fullscreen, solo, plankSizing } = deck;
+  const effectiveCompanionVariant = companionOpen ? companionVariant : void 0;
   const layoutMode = getMode(deck);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
@@ -990,12 +990,12 @@ var DeckMain = () => {
       const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
       const attended = attention.getCurrent();
       shouldRevert.current = true;
-      invokeSync(Common5.LayoutOperation.SetLayoutMode, {
+      invokeSync(LayoutOperation5.SetLayoutMode, {
         subject: attended[0],
         mode: "solo"
       });
     } else if (isNotMobile && layoutMode === "solo" && shouldRevert.current) {
-      invokeSync(Common5.LayoutOperation.SetLayoutMode, {
+      invokeSync(LayoutOperation5.SetLayoutMode, {
         revert: true
       });
     }
@@ -1006,7 +1006,7 @@ var DeckMain = () => {
   ]);
   useEffect4(() => {
     if (!settings?.enableDeck && layoutMode === "deck") {
-      invokeSync(Common5.LayoutOperation.SetLayoutMode, {
+      invokeSync(LayoutOperation5.SetLayoutMode, {
         subject: active[0],
         mode: "solo"
       });
@@ -1051,9 +1051,9 @@ var DeckMain = () => {
     deck
   ]);
   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]"
+    "grid !top-[env(safe-area-inset-top)]",
+    topbar && "!top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]",
+    hoistStatusbar && "lg:bottom-(--dx-statusbar-size)"
   ], [
     topbar,
     hoistStatusbar
@@ -1061,7 +1061,7 @@ var DeckMain = () => {
   const { order, itemsCount } = useMemo5(() => {
     return active.reduce((acc, entryId) => {
       acc.order[entryId] = acc.itemsCount + 1;
-      acc.itemsCount += activeCompanions?.[entryId] ? 3 : 2;
+      acc.itemsCount += companionOpen ? 3 : 2;
       return acc;
     }, {
       order: {},
@@ -1069,7 +1069,7 @@ var DeckMain = () => {
     });
   }, [
     active,
-    activeCompanions
+    companionOpen
   ]);
   const handleNavigationSidebarStateChange = useCallback6((next) => {
     updateState((s) => ({
@@ -1104,14 +1104,14 @@ var DeckMain = () => {
     classNames: mainPosition,
     style: {
       "--main-spacing": settings?.encapsulatedPlanks ? "0.75rem" : "0",
-      "--dx-main-sidebarWidth": sidebarState === "expanded" ? "var(--nav-sidebar-size)" : sidebarState === "collapsed" ? "var(--l0-size)" : "0",
-      "--dx-main-complementaryWidth": complementarySidebarState === "expanded" ? "var(--complementary-sidebar-size)" : complementarySidebarState === "collapsed" ? "var(--rail-size)" : "0",
-      "--dx-main-contentFirstWidth": `${plankSizing[active[0] ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
-      "--dx-main-contentLastWidth": `${plankSizing[active[(active.length ?? 1) - 1] ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`
+      "--dx-main-sidebar-width": sidebarState === "expanded" ? "var(--dx-nav-sidebar-size)" : sidebarState === "collapsed" ? "var(--dx-l0-size)" : "0",
+      "--dx-main-complementary-width": complementarySidebarState === "expanded" ? "var(--dx-complementary-sidebar-size)" : complementarySidebarState === "collapsed" ? "var(--dx-rail-size)" : "0",
+      "--dx-main-content-first-width": `${plankSizing[active[0] ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+      "--dx-main-content-last-width": `${plankSizing[active[(active.length ?? 1) - 1] ?? "never"] ?? DEFAULT_HORIZONTAL_SIZE}rem`
     }
   }, /* @__PURE__ */ React14.createElement("div", {
     role: "none",
-    className: !solo ? "relative bg-deckSurface overflow-hidden" : "sr-only",
+    className: !solo ? "relative bg-deck-surface overflow-hidden" : "sr-only",
     ...solo && {
       inert: true
     }
@@ -1125,7 +1125,7 @@ var DeckMain = () => {
     size: "contain",
     itemsCount: itemsCount - 1,
     classNames: [
-      "absolute inset-block-[--main-spacing] -inset-inline-px bs-[calc(100%-2*var(--main-spacing))]",
+      "absolute inset-y-(--main-spacing) -inset-w-px h-[calc(100%-2*var(--main-spacing))]",
       mainPaddingTransitions
     ],
     style: padding,
@@ -1137,7 +1137,7 @@ var DeckMain = () => {
     encapsulate: !!settings?.enableDeck
   }), /* @__PURE__ */ React14.createElement(Plank, {
     id: entryId,
-    companionId: activeCompanions?.[entryId],
+    companionVariant: effectiveCompanionVariant,
     part: "deck",
     order: order[entryId],
     active,
@@ -1145,7 +1145,7 @@ var DeckMain = () => {
     settings
   }))))), /* @__PURE__ */ React14.createElement("div", {
     role: "none",
-    className: solo ? "relative overflow-hidden bg-deckSurface" : "sr-only",
+    className: solo ? "relative overflow-hidden bg-deck-surface" : "sr-only",
     ...!solo && {
       inert: true
     }
@@ -1161,7 +1161,7 @@ var DeckMain = () => {
     }
   }, /* @__PURE__ */ React14.createElement(Plank, {
     id: solo,
-    companionId: solo ? activeCompanions?.[solo] : void 0,
+    companionVariant: effectiveCompanionVariant,
     part: "solo",
     layoutMode,
     settings
@@ -1171,7 +1171,7 @@ var DeckMain = () => {
 };
 var PlankSeparator = ({ order, encapsulate }) => order > 0 ? /* @__PURE__ */ React14.createElement("span", {
   role: "separator",
-  className: mx6("row-span-2 bg-deckSurface", encapsulate ? "is-0" : "is-4"),
+  className: mx6("row-span-2 bg-deck-surface", encapsulate ? "w-0" : "w-4"),
   style: {
     gridColumn: order
   }
@@ -1179,7 +1179,7 @@ var PlankSeparator = ({ order, encapsulate }) => order > 0 ? /* @__PURE__ */ Rea
 
 // src/components/DeckLayout/Dialog.tsx
 import React15, { useCallback as useCallback7 } from "react";
-import { Surface as Surface9 } from "@dxos/app-framework/react";
+import { Surface as Surface9 } from "@dxos/app-framework/ui";
 import { AlertDialog, Dialog as NaturalDialog } from "@dxos/react-ui";
 var Dialog = () => {
   const { state, updateEphemeral } = useDeckState();
@@ -1200,31 +1200,33 @@ var Dialog = () => {
     onOpenChange: handleOpenChange
   }, dialogBlockAlign === "end" ? (
     // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
-    /* @__PURE__ */ React15.createElement(Surface9, {
+    /* @__PURE__ */ React15.createElement(Surface9.Surface, {
       role: "dialog",
       data: dialogContent,
       limit: 1,
-      fallback: PlankContentError,
+      fallback: PlankErrorFallback,
       placeholder: /* @__PURE__ */ React15.createElement("div", null)
     })
   ) : /* @__PURE__ */ React15.createElement(Overlay, {
     blockAlign: dialogBlockAlign,
     classNames: dialogOverlayClasses,
     style: dialogOverlayStyle
-  }, /* @__PURE__ */ React15.createElement(Surface9, {
+  }, /* @__PURE__ */ React15.createElement(Surface9.Surface, {
     role: "dialog",
     data: dialogContent,
     limit: 1,
-    fallback: PlankContentError
+    fallback: PlankErrorFallback
   })));
 };
 
 // src/components/DeckLayout/Popover.tsx
 import { createContext } from "@radix-ui/react-context";
 import React16, { useCallback as useCallback8, useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
-import { Surface as Surface10 } from "@dxos/app-framework/react";
+import { Surface as Surface10, useOperationInvoker as useOperationInvoker7 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation6 } from "@dxos/app-toolkit";
+import { useObjectNavigate } from "@dxos/app-toolkit/ui";
 import { Popover as Popover2, toLocalizedString as toLocalizedString3, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { Card } from "@dxos/react-ui-mosaic";
+import { Card } from "@dxos/react-ui";
 var DEBOUNCE_DELAY = 40;
 var [DeckPopoverProvider, useDeckPopoverContext] = createContext("DeckPopover");
 var PopoverRoot = ({ children }) => {
@@ -1261,10 +1263,13 @@ var PopoverRoot = ({ children }) => {
     virtualRef
   }), children));
 };
+var getPopoverSubject = (content) => content && typeof content === "object" && "subject" in content ? content.subject : content;
 var PopoverContent = () => {
   const { t } = useTranslation7(meta.id);
   const { state, updateEphemeral } = useDeckState();
   const { setOpen } = useDeckPopoverContext("PopoverContent");
+  const { invokeSync } = useOperationInvoker7();
+  const handleNavigate = useObjectNavigate(getPopoverSubject(state.popoverContent));
   const handleClose = useCallback8(() => {
     setOpen(false);
     updateEphemeral((state2) => ({
@@ -1295,17 +1300,33 @@ var PopoverContent = () => {
     hideWhenDetached: true,
     onInteractOutside: handleInteractOutside,
     onEscapeKeyDown: handleInteractOutside
-  }, /* @__PURE__ */ React16.createElement(Popover2.Viewport, null, state.popoverKind === "card" && /* @__PURE__ */ React16.createElement(Card.Root, null, /* @__PURE__ */ React16.createElement(Card.Toolbar, null, /* @__PURE__ */ React16.createElement("span", null), state.popoverTitle ? /* @__PURE__ */ React16.createElement(Card.Title, null, toLocalizedString3(state.popoverTitle, t)) : /* @__PURE__ */ React16.createElement("span", null), /* @__PURE__ */ React16.createElement(Card.Close, {
-    onClick: handleClose
-  })), /* @__PURE__ */ React16.createElement(Surface10, {
-    role: "card--content",
+  }, /* @__PURE__ */ React16.createElement(Popover2.Viewport, null, state.popoverKind === "base" && /* @__PURE__ */ React16.createElement(Surface10.Surface, {
+    role: "popover",
     data: state.popoverContent,
     limit: 1
-  })), state.popoverKind === "base" && /* @__PURE__ */ React16.createElement(Surface10, {
-    role: "popover",
+  }), state.popoverKind === "card" && /* @__PURE__ */ React16.createElement(Card.Root, {
+    border: false,
+    classNames: "dx-card-popover"
+  }, /* @__PURE__ */ React16.createElement(Card.Toolbar, null, state.popoverContentRef ? /* @__PURE__ */ React16.createElement(Card.ToolbarIconButton, {
+    icon: "ph--arrow-square-out--regular",
+    iconOnly: true,
+    label: t("open item label"),
+    onClick: () => {
+      invokeSync(LayoutOperation6.Open, {
+        subject: [
+          state.popoverContentRef
+        ]
+      });
+    }
+  }) : /* @__PURE__ */ React16.createElement("div", null), state.popoverTitle ? /* @__PURE__ */ React16.createElement(Card.Title, {
+    onClick: handleNavigate
+  }, toLocalizedString3(state.popoverTitle, t)) : /* @__PURE__ */ React16.createElement("span", null), /* @__PURE__ */ React16.createElement(Card.CloseIconButton, {
+    onClick: handleClose
+  })), /* @__PURE__ */ React16.createElement(Surface10.Surface, {
+    role: "card--content",
     data: state.popoverContent,
     limit: 1
-  })), /* @__PURE__ */ React16.createElement(Popover2.Arrow, null)));
+  }))), /* @__PURE__ */ React16.createElement(Popover2.Arrow, null)));
 };
 
 // src/components/DeckLayout/Toast.tsx
@@ -1359,91 +1380,8 @@ var DeckLayout = ({ onDismissToast }) => {
   })));
 };
 
-// src/components/DeckSettings/DeckSettings.tsx
-import React19 from "react";
-import { Input, Select, useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from "@dxos/react-ui-form";
-var isSocket = !!globalThis.__args;
-var DeckSettings = ({ settings, onSettingsChange }) => {
-  const { t } = useTranslation9(meta.id);
-  return /* @__PURE__ */ React19.createElement(ControlPage, null, /* @__PURE__ */ React19.createElement(ControlSection, {
-    title: t("settings title", {
-      ns: meta.id
-    })
-  }, /* @__PURE__ */ React19.createElement(ControlGroup, null, /* @__PURE__ */ React19.createElement(ControlItemInput, {
-    title: t("settings enable deck label")
-  }, /* @__PURE__ */ React19.createElement(Input.Switch, {
-    checked: settings.enableDeck,
-    onCheckedChange: (checked) => onSettingsChange((s) => ({
-      ...s,
-      enableDeck: checked
-    }))
-  })), /* @__PURE__ */ React19.createElement(ControlItemInput, {
-    title: t("settings encapsulated planks label")
-  }, /* @__PURE__ */ React19.createElement(Input.Switch, {
-    checked: settings.encapsulatedPlanks ?? false,
-    onCheckedChange: (checked) => onSettingsChange((s) => ({
-      ...s,
-      encapsulatedPlanks: checked
-    }))
-  })), /* @__PURE__ */ React19.createElement(ControlItemInput, {
-    title: t("select new plank positioning label")
-  }, /* @__PURE__ */ React19.createElement(Select.Root, {
-    disabled: !settings.enableDeck,
-    value: settings.newPlankPositioning ?? "start",
-    onValueChange: (value) => onSettingsChange((s) => ({
-      ...s,
-      newPlankPositioning: value
-    }))
-  }, /* @__PURE__ */ React19.createElement(Select.TriggerButton, {
-    placeholder: t("select new plank positioning placeholder")
-  }), /* @__PURE__ */ React19.createElement(Select.Portal, null, /* @__PURE__ */ React19.createElement(Select.Content, null, /* @__PURE__ */ React19.createElement(Select.Viewport, null, NewPlankPositions.map((position) => /* @__PURE__ */ React19.createElement(Select.Option, {
-    key: position,
-    value: position
-  }, t(`settings new plank position ${position} label`)))), /* @__PURE__ */ React19.createElement(Select.Arrow, null))))), /* @__PURE__ */ React19.createElement(ControlItemInput, {
-    title: t("settings overscroll label")
-  }, /* @__PURE__ */ React19.createElement(Select.Root, {
-    disabled: !settings.enableDeck,
-    value: settings.overscroll ?? "none",
-    onValueChange: (value) => onSettingsChange((s) => ({
-      ...s,
-      overscroll: value
-    }))
-  }, /* @__PURE__ */ React19.createElement(Select.TriggerButton, {
-    placeholder: t("select overscroll placeholder")
-  }), /* @__PURE__ */ React19.createElement(Select.Portal, null, /* @__PURE__ */ React19.createElement(Select.Content, null, /* @__PURE__ */ React19.createElement(Select.Viewport, null, OverscrollOptions.map((option) => /* @__PURE__ */ React19.createElement(Select.Option, {
-    key: option,
-    value: option
-  }, t(`settings overscroll ${option} label`)))), /* @__PURE__ */ React19.createElement(Select.Arrow, null))))), /* @__PURE__ */ React19.createElement(ControlItemInput, {
-    title: t("settings enable statusbar label")
-  }, /* @__PURE__ */ React19.createElement(Input.Switch, {
-    checked: settings.enableStatusbar,
-    onCheckedChange: (checked) => onSettingsChange((s) => ({
-      ...s,
-      enableStatusbar: checked
-    }))
-  })), /* @__PURE__ */ React19.createElement(ControlItemInput, {
-    title: t("settings show hints label")
-  }, /* @__PURE__ */ React19.createElement(Input.Switch, {
-    checked: settings.showHints,
-    onCheckedChange: (checked) => onSettingsChange((s) => ({
-      ...s,
-      showHints: checked
-    }))
-  })), !isSocket && /* @__PURE__ */ React19.createElement(ControlItemInput, {
-    title: t("settings native redirect label")
-  }, /* @__PURE__ */ React19.createElement(Input.Switch, {
-    checked: settings.enableNativeRedirect,
-    onCheckedChange: (checked) => onSettingsChange((s) => ({
-      ...s,
-      enableNativeRedirect: checked
-    }))
-  })))));
-};
-
 export {
   Banner,
-  DeckLayout,
-  DeckSettings
+  DeckLayout
 };
-//# sourceMappingURL=chunk-V6VEXRD4.mjs.map
+//# sourceMappingURL=chunk-MBCCNIWY.mjs.map