@dxos/plugin-deck 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

package/src/capabilities/intent-resolver.ts

@@ -3,7 +3,7 @@
 //
 
 import { batch } from '@preact/signals-core';
-import { Effect, pipe } from 'effect';
+import { pipe } from 'effect';
 
 import {
   Capabilities,
@@ -17,7 +17,7 @@ import {
 } from '@dxos/app-framework';
 import { getTypename, S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { isLiveObject } from '@dxos/live-object';
+import { isReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { type Node } from '@dxos/plugin-graph';
@@ -121,14 +121,9 @@ export default (context: PluginsContext) =>
       resolve: ({ subject, options }) => {
         const layout = context.requestCapability(DeckCapabilities.MutableDeckState);
         layout.popoverOpen = options.state ?? Boolean(subject);
-        layout.popoverContent =
-          typeof subject === 'string' ? { component: subject, props: options.props } : subject ? { subject } : null;
+        layout.popoverContent = subject ? { component: subject, props: options.props } : null;
+        layout.popoverAnchorId = options.anchorId;
         layout.popoverSide = options.side;
-        if (options.variant === 'virtual') {
-          layout.popoverAnchor = options.anchor;
-        } else {
-          layout.popoverAnchorId = options.anchorId;
-        }
       },
     }),
     createResolver({
@@ -179,8 +174,10 @@ export default (context: PluginsContext) =>
             deck.initialized = true;
           }
 
-          if (mode === 'solo--fullscreen') {
-            deck.fullscreen = !deck.fullscreen;
+          if (mode === 'fullscreen' && !deck.fullscreen) {
+            deck.fullscreen = true;
+          } else if (mode !== 'fullscreen' && deck.fullscreen) {
+            deck.fullscreen = false;
           }
         };
 
@@ -241,63 +238,55 @@ export default (context: PluginsContext) =>
       intent: LayoutAction.UpdateLayout,
       filter: (data): data is S.Schema.Type<typeof LayoutAction.Open.fields.input> =>
         S.is(LayoutAction.Open.fields.input)(data),
-      resolve: ({ subject, options }) =>
-        Effect.gen(function* () {
-          const { graph } = context.requestCapability(Capabilities.AppGraph);
-          const state = context.requestCapability(DeckCapabilities.MutableDeckState);
-          const attention = context.requestCapability(AttentionCapabilities.Attention);
-          const settings = context
-            .requestCapabilities(Capabilities.SettingsStore)[0]
-            ?.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
-
-          if (options?.workspace && state.activeDeck !== options?.workspace) {
-            const { dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-            yield* dispatch(
-              createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: options.workspace }),
-            );
-          }
+      resolve: ({ subject, options }) => {
+        const { graph } = context.requestCapability(Capabilities.AppGraph);
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        const attention = context.requestCapability(AttentionCapabilities.Attention);
+        const settings = context
+          .requestCapabilities(Capabilities.SettingsStore)[0]
+          ?.getStore<DeckSettingsProps>(DECK_PLUGIN)?.value;
 
-          const previouslyOpenIds = new Set<string>(state.deck.solo ? [state.deck.solo] : state.deck.active);
-          batch(() => {
-            const next = state.deck.solo
-              ? (subject as string[]).map((id) => createEntryId(id, options?.variant))
-              : subject.reduce(
-                  (acc, entryId) =>
-                    openEntry(acc, entryId, {
-                      key: options?.key,
-                      positioning: options?.positioning ?? settings?.newPlankPositioning,
-                      pivotId: options?.pivotId,
-                      variant: options?.variant,
-                    }),
-                  state.deck.active,
-                );
+        const previouslyOpenIds = new Set<string>(state.deck.solo ? [state.deck.solo] : state.deck.active);
+        batch(() => {
+          const next = state.deck.solo
+            ? (subject as string[]).map((id) => createEntryId(id, options?.variant))
+            : subject.reduce(
+                (acc, entryId) =>
+                  openEntry(acc, entryId, {
+                    key: options?.key,
+                    positioning: options?.positioning ?? settings?.newPlankPositioning,
+                    pivotId: options?.pivotId,
+                    variant: options?.variant,
+                  }),
+                state.deck.active,
+              );
 
-            return setActive({ next, state, attention });
-          });
+          return setActive({ next, state, attention });
+        });
 
-          const ids = state.deck.solo ? [state.deck.solo] : state.deck.active;
-          const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
+        const ids = state.deck.solo ? [state.deck.solo] : state.deck.active;
+        const newlyOpen = ids.filter((i) => !previouslyOpenIds.has(i));
 
-          return {
-            intents: [
-              ...(options?.scrollIntoView !== false
-                ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: newlyOpen[0] ?? subject[0] })]
-                : []),
-              createIntent(LayoutAction.Expose, { part: 'navigation', subject: newlyOpen[0] ?? subject[0] }),
-              ...newlyOpen.map((subjectId) => {
-                const active = graph?.findNode(subjectId)?.data;
-                const typename = isLiveObject(active) ? getTypename(active) : undefined;
-                return createIntent(ObservabilityAction.SendEvent, {
-                  name: 'navigation.activate',
-                  properties: {
-                    subjectId,
-                    typename,
-                  },
-                });
-              }),
-            ],
-          };
-        }),
+        return {
+          intents: [
+            ...(options?.scrollIntoView !== false
+              ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: newlyOpen[0] ?? subject[0] })]
+              : []),
+            createIntent(LayoutAction.Expose, { part: 'navigation', subject: newlyOpen[0] ?? subject[0] }),
+            ...newlyOpen.map((subjectId) => {
+              const active = graph?.findNode(subjectId)?.data;
+              const typename = isReactiveObject(active) ? getTypename(active) : undefined;
+              return createIntent(ObservabilityAction.SendEvent, {
+                name: 'navigation.activate',
+                properties: {
+                  subjectId,
+                  typename,
+                },
+              });
+            }),
+          ],
+        };
+      },
     }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
@@ -401,7 +390,7 @@ export default (context: PluginsContext) =>
             }
           }
 
-          if (adjustment.type.startsWith('solo')) {
+          if (adjustment.type === 'solo') {
             const entryId = adjustment.id;
             if (!state.deck.solo) {
               // Solo the entry.
@@ -410,34 +399,21 @@ export default (context: PluginsContext) =>
                   createIntent(LayoutAction.SetLayoutMode, {
                     part: 'mode',
                     subject: entryId,
-                    options: { mode: adjustment.type },
+                    options: { mode: 'solo' },
                   }),
                 ],
               };
             } else {
-              if (adjustment.type === 'solo--fullscreen') {
-                // Toggle fullscreen on the current entry.
-                return {
-                  intents: [
-                    createIntent(LayoutAction.SetLayoutMode, {
-                      part: 'mode',
-                      subject: entryId,
-                      options: { mode: 'solo--fullscreen' },
-                    }),
-                  ],
-                };
-              } else if (adjustment.type === 'solo') {
-                // Un-solo the current entry.
-                return {
-                  intents: [
-                    // NOTE: The order of these is important.
-                    pipe(
-                      createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { mode: 'deck' } }),
-                      chain(LayoutAction.Open, { part: 'main', subject: [entryId] }),
-                    ),
-                  ],
-                };
-              }
+              // Un-solo the current entry.
+              return {
+                intents: [
+                  // NOTE: The order of these is important.
+                  pipe(
+                    createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { mode: 'deck' } }),
+                    chain(LayoutAction.Open, { part: 'main', subject: [entryId] }),
+                  ),
+                ],
+              };
             }
           }
         });

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 
 import { DECK_PLUGIN } from '../meta';
 import { DeckSettingsSchema, type DeckSettingsProps } from '../types';
 
 export default () => {
-  const settings = live<DeckSettingsProps>({
+  const settings = create<DeckSettingsProps>({
     showHints: false,
     enableDeck: true,
     enableNativeRedirect: false,

package/src/capabilities/state.ts

@@ -4,7 +4,7 @@
 
 import { Capabilities, contributes } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 import { LocalStorageStore } from '@dxos/local-storage';
 import { type SidebarState } from '@dxos/react-ui';
 
@@ -41,7 +41,6 @@ export default () => {
     dialogBlockAlign: undefined,
     dialogType: undefined,
     popoverContent: null,
-    popoverAnchor: undefined,
     popoverAnchorId: undefined,
     popoverOpen: false,
     toasts: [],
@@ -68,7 +67,7 @@ export default () => {
     .prop({ key: 'activeDeck', type: LocalStorageStore.string() })
     .prop({ key: 'previousDeck', type: LocalStorageStore.string() });
 
-  const layout = live<Capabilities.Layout>({
+  const layout = create<Capabilities.Layout>({
     get mode() {
       return getMode(state.values.deck);
     },

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -4,19 +4,15 @@
 
 import React from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework';
 
-import { DeckCapabilities } from '../../capabilities';
-import { getMode } from '../../types';
 import { layoutAppliesTopbar, useBreakpoints } from '../../util';
 import { ToggleSidebarButton } from '../Sidebar';
 import { fixedSidebarToggleStyles } from '../fragments';
 
 export const ContentEmpty = () => {
   const breakpoint = useBreakpoints();
-  const { deck } = useCapability(DeckCapabilities.MutableDeckState);
-  const layoutMode = getMode(deck);
-  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const topbar = layoutAppliesTopbar(breakpoint);
   return (
     <div
       role='none'

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,25 +3,33 @@
 //
 
 import { untracked } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment, useState } from 'react';
 
 import {
   Capabilities,
   LayoutAction,
+  Surface,
   createIntent,
   useCapability,
   useIntentDispatcher,
   usePluginManager,
 } from '@dxos/app-framework';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { Main, type MainProps, useMediaQuery, useOnTransition } from '@dxos/react-ui';
+import {
+  AlertDialog,
+  Dialog as NaturalDialog,
+  Main,
+  Popover,
+  type MainProps,
+  useMediaQuery,
+  useOnTransition,
+} from '@dxos/react-ui';
 import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-stack';
 import { mainPaddingTransitions } from '@dxos/react-ui-theme';
 
 import { ActiveNode } from './ActiveNode';
 import { ContentEmpty } from './ContentEmpty';
-import { Dialog } from './Dialog';
-import { PopoverContent, PopoverRoot } from './Popover';
+import { Fullscreen } from './Fullscreen';
 import { StatusBar } from './StatusBar';
 import { Toast } from './Toast';
 import { Topbar } from './Topbar';
@@ -29,7 +37,7 @@ import { DeckCapabilities } from '../../capabilities';
 import { DECK_PLUGIN } from '../../meta';
 import { type DeckSettingsProps, getMode } from '../../types';
 import { calculateOverscroll, layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
-import { Plank } from '../Plank';
+import { Plank, PlankContentError } from '../Plank';
 import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
 import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
 
@@ -44,17 +52,36 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!.value;
   const context = useCapability(DeckCapabilities.MutableDeckState);
-  const { sidebarState, complementarySidebarState, complementarySidebarPanel, deck, toasts } = context;
+  const {
+    sidebarState,
+    complementarySidebarState,
+    complementarySidebarPanel,
+    dialogOpen,
+    dialogContent,
+    dialogBlockAlign,
+    dialogType,
+    popoverOpen,
+    popoverContent,
+    popoverAnchorId,
+    deck,
+    toasts,
+  } = context;
   const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
   const breakpoint = useBreakpoints();
-  const layoutMode = getMode(deck);
-  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
-  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
+  const topbar = layoutAppliesTopbar(breakpoint);
+  const hoistStatusbar = useHoistStatusbar(breakpoint);
   const pluginManager = usePluginManager();
 
   const scrollLeftRef = useRef<number | null>();
   const deckRef = useRef<HTMLDivElement>(null);
 
+  // TODO(thure): This is a workaround for the difference in `React`ion time between displaying a Popover and rendering
+  //  the anchor further down the tree. Refactor to use VirtualTrigger or some other approach which does not cause a lag.
+  const [delayedPopoverVisibility, setDelayedPopoverVisibility] = useState(false);
+  useEffect(() => {
+    popoverOpen ? setTimeout(() => setDelayedPopoverVisibility(true), 40) : setDelayedPopoverVisibility(false);
+  }, [popoverOpen]);
+
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
     // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
@@ -117,6 +144,8 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
       deckRef.current.scrollLeft = scrollLeftRef.current;
     }
   }, []);
+
+  const layoutMode = getMode(deck);
   useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
 
   /**
@@ -149,6 +178,22 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
     [topbar, hoistStatusbar],
   );
 
+  const Dialog = dialogType === 'alert' ? AlertDialog : NaturalDialog;
+
+  const handlePopoverOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen && popoverAnchorId) {
+        context.popoverOpen = true;
+      } else {
+        context.popoverOpen = false;
+        context.popoverAnchorId = undefined;
+        context.popoverSide = undefined;
+      }
+    },
+    [context],
+  );
+  const handlePopoverClose = useCallback(() => handlePopoverOpenChange(false), [handlePopoverOpenChange]);
+
   const { order, itemsCount }: { order: Record<string, number>; itemsCount: number } = useMemo(() => {
     return active.reduce(
       (acc: { order: Record<string, number>; itemsCount: number }, entryId) => {
@@ -161,124 +206,146 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
   }, [active, activeCompanions]);
 
   return (
-    <PopoverRoot>
+    <Popover.Root modal open={!!(popoverAnchorId && delayedPopoverVisibility)} onOpenChange={handlePopoverOpenChange}>
       <ActiveNode />
 
-      <Main.Root
-        navigationSidebarState={fullscreen ? 'closed' : context.sidebarState}
-        onNavigationSidebarStateChange={(next) => (context.sidebarState = next)}
-        complementarySidebarState={fullscreen ? 'closed' : context.complementarySidebarState}
-        onComplementarySidebarStateChange={(next) => (context.complementarySidebarState = next)}
-      >
-        {/* Left sidebar. */}
-        <Sidebar />
+      {fullscreen && <Fullscreen id={solo} />}
 
-        {/* Right sidebar. */}
-        <ComplementarySidebar current={complementarySidebarPanel} />
+      {!fullscreen && (
+        <Main.Root
+          navigationSidebarState={context.sidebarState}
+          onNavigationSidebarStateChange={(next) => (context.sidebarState = next)}
+          complementarySidebarState={context.complementarySidebarState}
+          onComplementarySidebarStateChange={(next) => (context.complementarySidebarState = next)}
+        >
+          {/* Left sidebar. */}
+          <Sidebar />
 
-        {/* Dialog overlay to dismiss dialogs. */}
-        <Main.Overlay />
+          {/* Right sidebar. */}
+          <ComplementarySidebar current={complementarySidebarPanel} />
 
-        {/* No content. */}
-        {isEmpty && (
-          <Main.Content bounce handlesFocus classNames={mainPosition}>
-            <ContentEmpty />
-          </Main.Content>
-        )}
+          {/* Dialog overlay to dismiss dialogs. */}
+          <Main.Overlay />
 
-        {/* Solo/deck mode. */}
-        {!isEmpty && (
-          <Main.Content
-            bounce
-            classNames={mainPosition}
-            handlesFocus
-            style={
-              {
-                '--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`,
-              } as MainProps['style']
-            }
-          >
-            <div
-              role='none'
-              className={!solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
-              {...(solo && { inert: '' })}
+          {/* No content. */}
+          {isEmpty && (
+            <Main.Content bounce handlesFocus classNames={mainPosition}>
+              <ContentEmpty />
+            </Main.Content>
+          )}
+
+          {/* Solo/deck mode. */}
+          {!isEmpty && (
+            <Main.Content
+              bounce
+              classNames={mainPosition}
+              handlesFocus
+              style={
+                {
+                  '--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`,
+                } as MainProps['style']
+              }
             >
-              {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
-              {!topbar && !fullscreen && (
-                <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />
-              )}
-              <Stack
-                ref={deckRef}
-                orientation='horizontal'
-                size='contain'
-                classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
-                itemsCount={itemsCount - 1}
-                style={padding}
-                onScroll={handleScroll}
+              <div
+                role='none'
+                className={!solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(solo && { inert: '' })}
               >
-                {active.map((entryId) => (
-                  <Fragment key={entryId}>
-                    <PlankSeparator order={order[entryId] - 1} />
-                    <Plank
-                      id={entryId}
-                      companionId={activeCompanions?.[entryId]}
-                      part='deck'
-                      order={order[entryId]}
-                      active={active}
-                      layoutMode={layoutMode}
-                      settings={settings}
-                    />
-                  </Fragment>
-                ))}
-              </Stack>
-            </div>
-            <div
-              role='none'
-              className={solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
-              {...(!solo && { inert: '' })}
-            >
-              {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
-              {!topbar && !fullscreen && (
-                <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />
-              )}
-              <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
-                <Plank
-                  id={solo}
-                  companionId={solo ? activeCompanions?.[solo] : undefined}
-                  part='solo'
-                  layoutMode={layoutMode}
-                  settings={settings}
-                />
-              </StackContext.Provider>
-            </div>
-          </Main.Content>
-        )}
+                {!topbar && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
+                {!topbar && <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />}
+                <Stack
+                  ref={deckRef}
+                  orientation='horizontal'
+                  size='contain'
+                  classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
+                  itemsCount={itemsCount - 1}
+                  style={padding}
+                  onScroll={handleScroll}
+                >
+                  {active.map((entryId) => (
+                    <Fragment key={entryId}>
+                      <PlankSeparator order={order[entryId] - 1} />
+                      <Plank
+                        id={entryId}
+                        companionId={activeCompanions?.[entryId]}
+                        part='deck'
+                        order={order[entryId]}
+                        active={active}
+                        layoutMode={layoutMode}
+                        settings={settings}
+                      />
+                    </Fragment>
+                  ))}
+                </Stack>
+              </div>
+              <div
+                role='none'
+                className={solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(!solo && { inert: '' })}
+              >
+                {!topbar && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
+                {!topbar && <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />}
+                <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
+                  <Plank
+                    id={solo}
+                    companionId={solo ? activeCompanions?.[solo] : undefined}
+                    part='solo'
+                    layoutMode={layoutMode}
+                    settings={settings}
+                  />
+                </StackContext.Provider>
+              </div>
+            </Main.Content>
+          )}
 
-        {/* Topbar. */}
-        {topbar && <Topbar />}
+          {/* Topbar. */}
+          {topbar && <Topbar />}
 
-        {/* Status bar. */}
-        {hoistStatusbar && <StatusBar showHints={settings.showHints} />}
-      </Main.Root>
+          {/* Status bar. */}
+          {hoistStatusbar && <StatusBar showHints={settings.showHints} />}
+        </Main.Root>
+      )}
 
       {/* Global popovers. */}
-      <PopoverContent />
+      <Popover.Portal>
+        <Popover.Content side={context.popoverSide} onEscapeKeyDown={handlePopoverClose}>
+          <Popover.Viewport>
+            <Surface role='popover' data={popoverContent} limit={1} />
+          </Popover.Viewport>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
 
       {/* Global dialog. */}
-      <Dialog />
+      {/* TODO(thure): End block alignment affecting `modal` and whether the surface renders in an overlay is tailored
+            to the needs of the ambient chat dialog. As the feature matures, consider separating concerns. */}
+      <Dialog.Root
+        modal={dialogBlockAlign !== 'end'}
+        open={dialogOpen}
+        onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}
+      >
+        {dialogBlockAlign === 'end' ? (
+          // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
+          <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} placeholder={<div />} />
+        ) : (
+          <Dialog.Overlay blockAlign={dialogBlockAlign}>
+            <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} />
+          </Dialog.Overlay>
+        )}
+      </Dialog.Root>
 
       {/* Global toasts. */}
       {toasts?.map((toast) => (
@@ -294,6 +361,6 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
           }}
         />
       ))}
-    </PopoverRoot>
+    </Popover.Root>
   );
 };