@dxos/plugin-deck 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/dist/lib/browser/{chunk-EREEXCHO.mjs → chunk-JGC4ZLG3.mjs}

@@ -7,7 +7,7 @@ import {
   useHoistStatusbar,
   useMainSize,
   useNodeActionExpander
-} from "./chunk-UNG4CLLP.mjs";
+} from "./chunk-YT3AJVUU.mjs";
 import {
   calculateOverscroll,
   layoutAppliesTopbar,
@@ -21,27 +21,28 @@ import {
   PLANK_COMPANION_TYPE,
   getMode,
   meta
-} from "./chunk-ATFPDN6J.mjs";
+} from "./chunk-DONG2FYU.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 } 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 } 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";
@@ -55,8 +56,9 @@ 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 } 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";
@@ -72,7 +74,7 @@ var fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, "inline-end-
 
 // src/components/Plank/PlankControls.tsx
 import React, { forwardRef, useCallback } from "react";
-import { useOperationInvoker } from "@dxos/app-framework/react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
 import { invariant } from "@dxos/invariant";
 import { ButtonGroup, IconButton, useTranslation } from "@dxos/react-ui";
 var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-deck/src/components/Plank/PlankControls.tsx";
@@ -256,11 +258,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
           ]
@@ -325,7 +327,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
@@ -343,7 +345,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
@@ -483,7 +485,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
       });
     }
@@ -549,7 +551,7 @@ 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,
@@ -564,16 +566,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 } 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
@@ -592,8 +594,8 @@ var CloseSidebarButton = () => {
   const { updateState } = useDeckState();
   const { t } = useTranslation4(meta.id);
   const handleClick = useCallback4(() => {
-    updateState((s) => ({
-      ...s,
+    updateState((state) => ({
+      ...state,
       sidebarState: "collapsed"
     }));
   }, [
@@ -616,13 +618,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));
     if (nextState === "expanded" && !current && subject) {
-      invokeSync(Common3.LayoutOperation.UpdateComplementary, {
+      invokeSync(LayoutOperation3.UpdateComplementary, {
         subject
       });
     }
@@ -675,17 +677,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
       });
     }
@@ -704,7 +706,7 @@ var ComplementarySidebar = ({ current }) => {
   ]);
   useEffect3(() => {
     if (!activeId) {
-      invokeSync(Common4.LayoutOperation.UpdateComplementary, {
+      invokeSync(LayoutOperation4.UpdateComplementary, {
         state: "collapsed"
       });
     }
@@ -743,7 +745,7 @@ var ComplementarySidebar = ({ current }) => {
   })))), !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, {
+  }, /* @__PURE__ */ React7.createElement(Surface3.Surface, {
     role: "status-bar--r0-footer",
     limit: 1
   })), /* @__PURE__ */ React7.createElement("div", {
@@ -772,7 +774,7 @@ var ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar })
   if (getCompanionId(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"
@@ -787,7 +789,7 @@ var ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar })
   }), /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "pli-1"
-  }, toLocalizedString2(companion.properties.label, t))), /* @__PURE__ */ React7.createElement(Wrapper, null, /* @__PURE__ */ React7.createElement(Surface3, {
+  }, toLocalizedString2(companion.properties.label, t))), /* @__PURE__ */ React7.createElement(Wrapper, null, /* @__PURE__ */ React7.createElement(Surface3.Surface, {
     role: `deck-companion--${getCompanionId(companion.id)}`,
     data,
     fallback: PlankContentError,
@@ -795,20 +797,22 @@ var ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar })
   })), !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, {
+  }, /* @__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",
@@ -841,7 +845,7 @@ var Sidebar = () => {
       topbar && "block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]",
       hoistStatusbar && "block-end-[--statusbar-size]"
     ]
-  }, /* @__PURE__ */ React8.createElement(Surface4, {
+  }, /* @__PURE__ */ React8.createElement(Surface4.Surface, {
     role: "navigation",
     data: navigationData,
     limit: 1
@@ -863,16 +867,16 @@ var Banner = ({ variant, classNames }) => {
   }, /* @__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, {
+  }, /* @__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
   }));
@@ -884,7 +888,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 = () => {
@@ -895,7 +900,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
@@ -906,8 +911,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";
@@ -915,7 +920,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();
@@ -925,7 +930,7 @@ var ContentEmpty = () => {
     role: "none",
     className: "grid place-items-center p-8 relative bg-deckSurface",
     "data-testid": "layoutPlugin.firstRunMessage"
-  }, /* @__PURE__ */ React11.createElement(Surface7, {
+  }, /* @__PURE__ */ React11.createElement(Surface7.Surface, {
     role: "keyshortcuts"
   }), !topbar && /* @__PURE__ */ React11.createElement(ToggleSidebarButton, {
     variant: "default",
@@ -935,7 +940,7 @@ 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");
@@ -943,10 +948,10 @@ var StatusBar = ({ showHints }) => {
     role: "contentinfo",
     className: "fixed block-end-0 inset-inline-0 bs-[--statusbar-size] border-bs 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
   }));
@@ -989,12 +994,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
       });
     }
@@ -1005,7 +1010,7 @@ var DeckMain = () => {
   ]);
   useEffect4(() => {
     if (!settings?.enableDeck && layoutMode === "deck") {
-      invokeSync(Common5.LayoutOperation.SetLayoutMode, {
+      invokeSync(LayoutOperation5.SetLayoutMode, {
         subject: active[0],
         mode: "solo"
       });
@@ -1178,7 +1183,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();
@@ -1199,7 +1204,7 @@ 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,
@@ -1210,7 +1215,7 @@ var Dialog = () => {
     blockAlign: dialogBlockAlign,
     classNames: dialogOverlayClasses,
     style: dialogOverlayStyle
-  }, /* @__PURE__ */ React15.createElement(Surface9, {
+  }, /* @__PURE__ */ React15.createElement(Surface9.Surface, {
     role: "dialog",
     data: dialogContent,
     limit: 1,
@@ -1221,7 +1226,8 @@ var Dialog = () => {
 // 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 { Popover as Popover2, toLocalizedString as toLocalizedString3, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { Card } from "@dxos/react-ui-mosaic";
 var DEBOUNCE_DELAY = 40;
@@ -1264,6 +1270,7 @@ var PopoverContent = () => {
   const { t } = useTranslation7(meta.id);
   const { state, updateEphemeral } = useDeckState();
   const { setOpen } = useDeckPopoverContext("PopoverContent");
+  const { invokeSync } = useOperationInvoker7();
   const handleClose = useCallback8(() => {
     setOpen(false);
     updateEphemeral((state2) => ({
@@ -1294,17 +1301,31 @@ 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: "popover-card-max-width"
+  }, /* @__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, null, toLocalizedString3(state.popoverTitle, t)) : /* @__PURE__ */ React16.createElement("span", null), /* @__PURE__ */ React16.createElement(Card.Close, {
+    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
@@ -1361,15 +1382,15 @@ 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";
+import { Settings } 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, {
+  return /* @__PURE__ */ React19.createElement(Settings.Root, null, /* @__PURE__ */ React19.createElement(Settings.Section, {
     title: t("settings title", {
       ns: meta.id
     })
-  }, /* @__PURE__ */ React19.createElement(ControlGroup, null, /* @__PURE__ */ React19.createElement(ControlItemInput, {
+  }, /* @__PURE__ */ React19.createElement(Settings.Group, null, /* @__PURE__ */ React19.createElement(Settings.ItemInput, {
     title: t("settings enable deck label")
   }, /* @__PURE__ */ React19.createElement(Input.Switch, {
     checked: settings.enableDeck,
@@ -1377,7 +1398,7 @@ var DeckSettings = ({ settings, onSettingsChange }) => {
       ...s,
       enableDeck: checked
     }))
-  })), /* @__PURE__ */ React19.createElement(ControlItemInput, {
+  })), /* @__PURE__ */ React19.createElement(Settings.ItemInput, {
     title: t("settings encapsulated planks label")
   }, /* @__PURE__ */ React19.createElement(Input.Switch, {
     checked: settings.encapsulatedPlanks ?? false,
@@ -1385,7 +1406,7 @@ var DeckSettings = ({ settings, onSettingsChange }) => {
       ...s,
       encapsulatedPlanks: checked
     }))
-  })), /* @__PURE__ */ React19.createElement(ControlItemInput, {
+  })), /* @__PURE__ */ React19.createElement(Settings.ItemInput, {
     title: t("select new plank positioning label")
   }, /* @__PURE__ */ React19.createElement(Select.Root, {
     disabled: !settings.enableDeck,
@@ -1399,7 +1420,7 @@ var DeckSettings = ({ settings, onSettingsChange }) => {
   }), /* @__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, {
+  }, t(`settings new plank position ${position} label`)))), /* @__PURE__ */ React19.createElement(Select.Arrow, null))))), /* @__PURE__ */ React19.createElement(Settings.ItemInput, {
     title: t("settings overscroll label")
   }, /* @__PURE__ */ React19.createElement(Select.Root, {
     disabled: !settings.enableDeck,
@@ -1413,7 +1434,7 @@ var DeckSettings = ({ settings, onSettingsChange }) => {
   }), /* @__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, {
+  }, t(`settings overscroll ${option} label`)))), /* @__PURE__ */ React19.createElement(Select.Arrow, null))))), /* @__PURE__ */ React19.createElement(Settings.ItemInput, {
     title: t("settings enable statusbar label")
   }, /* @__PURE__ */ React19.createElement(Input.Switch, {
     checked: settings.enableStatusbar,
@@ -1421,7 +1442,7 @@ var DeckSettings = ({ settings, onSettingsChange }) => {
       ...s,
       enableStatusbar: checked
     }))
-  })), /* @__PURE__ */ React19.createElement(ControlItemInput, {
+  })), /* @__PURE__ */ React19.createElement(Settings.ItemInput, {
     title: t("settings show hints label")
   }, /* @__PURE__ */ React19.createElement(Input.Switch, {
     checked: settings.showHints,
@@ -1429,7 +1450,7 @@ var DeckSettings = ({ settings, onSettingsChange }) => {
       ...s,
       showHints: checked
     }))
-  })), !isSocket && /* @__PURE__ */ React19.createElement(ControlItemInput, {
+  })), !isSocket && /* @__PURE__ */ React19.createElement(Settings.ItemInput, {
     title: t("settings native redirect label")
   }, /* @__PURE__ */ React19.createElement(Input.Switch, {
     checked: settings.enableNativeRedirect,
@@ -1445,4 +1466,4 @@ export {
   DeckLayout,
   DeckSettings
 };
-//# sourceMappingURL=chunk-EREEXCHO.mjs.map
+//# sourceMappingURL=chunk-JGC4ZLG3.mjs.map