@dxos/plugin-deck 0.8.4-main.c4373fc → 0.8.4-main.c85a9c8dae

package/src/components/DeckLayout/DeckLayout.tsx

@@ -2,301 +2,33 @@
 // Copyright 2023 DXOS.org
 //
 
-import { untracked } from '@preact/signals-core';
-import React, { Fragment, type UIEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+import React from 'react';
 
-import {
-  Capabilities,
-  LayoutAction,
-  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 { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from '@dxos/react-ui-stack';
-import { mainPaddingTransitions } from '@dxos/react-ui-theme';
+import { Mosaic } from '@dxos/react-ui-mosaic';
 
-import { DeckCapabilities } from '../../capabilities';
-import { useBreakpoints, useHoistStatusbar } from '../../hooks';
-import { meta } from '../../meta';
-import { type DeckSettingsProps, getMode } from '../../types';
-import { calculateOverscroll, layoutAppliesTopbar } from '../../util';
-import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
-import { Plank } from '../Plank';
-import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
+import { useDeckState } from '../../hooks';
 
 import { ActiveNode } from './ActiveNode';
-import { ContentEmpty } from './ContentEmpty';
+import { DeckMain } from './DeckMain';
 import { Dialog } from './Dialog';
 import { PopoverContent, PopoverRoot } from './Popover';
-import { StatusBar } from './StatusBar';
-import { Toast } from './Toast';
-import { Topbar } from './Topbar';
+import { Toaster, type ToasterProps } from './Toast';
 
-export type DeckLayoutProps = {
-  onDismissToast: (id: string) => void;
-};
-
-const PlankSeparator = ({ order }: { order: number }) =>
-  order > 0 ? <span role='separator' className='row-span-2 bg-deckSurface is-4' style={{ gridColumn: order }} /> : null;
+export type DeckLayoutProps = Pick<ToasterProps, 'onDismissToast'>;
 
 export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(meta.id)!.value;
-  const context = useCapability(DeckCapabilities.MutableDeckState);
-  const { sidebarState, complementarySidebarState, complementarySidebarPanel, 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 pluginManager = usePluginManager();
-
-  const scrollLeftRef = useRef<number>(null);
-  const deckRef = useRef<HTMLDivElement>(null);
-
-  // 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.
-    const attended = untracked(() => {
-      const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
-      return attention.current;
-    });
-    const firstId = solo ?? active[0];
-    if (attended.length === 0 && firstId) {
-      // TODO(wittjosiah): Focusing the type button is a workaround.
-      //   If the plank is directly focused on first load the focus ring appears.
-      document.querySelector<HTMLElement>(`article[data-attendable-id="${firstId}"] button`)?.focus();
-    }
-  }, []);
-
-  // Not using `breakpoint` to avoid firing when breakpoint changes between tablet and desktop.
-  // `ssr: false` to avoid using fallback values and flashing into solo mode on startup.
-  const [isNotMobile] = useMediaQuery('md');
-  const shouldRevert = useRef(false);
-  useEffect(() => {
-    if (!isNotMobile && getMode(deck) === 'deck') {
-      // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
-      const attended = untracked(() => {
-        const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
-        return attention.current;
-      });
-
-      shouldRevert.current = true;
-      void dispatch(
-        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: attended[0], options: { mode: 'solo' } }),
-      );
-    } else if (isNotMobile && getMode(deck) === 'solo' && shouldRevert.current) {
-      void dispatch(createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { revert: true } }));
-    }
-  }, [isNotMobile, deck, dispatch]);
-
-  // When deck is disabled in settings, set to solo mode if the current layout mode is deck.
-  // TODO(thure): Applying this as an effect should be avoided over emitting the intent only when the setting changes.
-  useEffect(() => {
-    if (!settings.enableDeck && layoutMode === 'deck') {
-      void dispatch(
-        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: active[0], options: { mode: 'solo' } }),
-      );
-    }
-  }, [settings.enableDeck, dispatch, active, layoutMode]);
-
-  /**
-   * Clear scroll restoration state if the window is resized
-   */
-  const handleResize = useCallback(() => {
-    scrollLeftRef.current = null;
-  }, []);
-
-  useEffect(() => {
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, [handleResize]);
-
-  const restoreScroll = useCallback(() => {
-    if (deckRef.current && scrollLeftRef.current != null) {
-      deckRef.current.scrollLeft = scrollLeftRef.current;
-    }
-  }, []);
-  useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
-
-  /**
-   * Save scroll position as the user scrolls
-   */
-  const handleScroll = useCallback(
-    (event: UIEvent) => {
-      if (!solo && event.currentTarget === event.target) {
-        scrollLeftRef.current = (event.target as HTMLDivElement).scrollLeft;
-      }
-    },
-    [solo],
-  );
-
-  const isEmpty = !solo && active.length === 0;
-
-  const padding = useMemo(() => {
-    if (!solo && settings.overscroll === 'centering') {
-      return calculateOverscroll(active.length);
-    }
-    return {};
-  }, [solo, settings.overscroll, deck]);
-
-  const mainPosition = useMemo(
-    () => [
-      '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]',
-    ],
-    [topbar, hoistStatusbar],
-  );
-
-  const { order, itemsCount }: { order: Record<string, number>; itemsCount: number } = useMemo(() => {
-    return active.reduce(
-      (acc: { order: Record<string, number>; itemsCount: number }, entryId) => {
-        acc.order[entryId] = acc.itemsCount + 1;
-        acc.itemsCount += activeCompanions?.[entryId] ? 3 : 2;
-        return acc;
-      },
-      { order: {}, itemsCount: 0 },
-    );
-  }, [active, activeCompanions]);
+  const { state } = useDeckState();
+  const { toasts } = state;
 
   return (
-    <PopoverRoot>
-      <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 />
-
-        {/* Right sidebar. */}
-        <ComplementarySidebar current={complementarySidebarPanel} />
-
-        {/* Dialog overlay to dismiss dialogs. */}
-        <Main.Overlay />
-
-        {/* No content. */}
-        {isEmpty && (
-          <Main.Content bounce handlesFocus classNames={mainPosition}>
-            <ContentEmpty />
-          </Main.Content>
-        )}
-
-        {/* Solo/deck mode. */}
-        {!isEmpty && (
-          <Main.Content
-            bounce
-            handlesFocus
-            classNames={mainPosition}
-            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-deckSurface overflow-hidden' : 'sr-only'}
-              {...(solo && { inert: true })}
-            >
-              {!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}
-              >
-                {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-deckSurface overflow-hidden' : 'sr-only'}
-              {...(!solo && { inert: true })}
-            >
-              {!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. */}
-        {topbar && <Topbar />}
-
-        {/* Status bar. */}
-        {hoistStatusbar && <StatusBar showHints={settings.showHints} />}
-      </Main.Root>
-
-      {/* Global popovers. */}
-      <PopoverContent />
-
-      {/* Global dialog. */}
-      <Dialog />
-
-      {/* Global toasts. */}
-      {toasts?.map((toast) => (
-        <Toast
-          {...toast}
-          key={toast.id}
-          onOpenChange={(open) => {
-            if (!open) {
-              onDismissToast(toast.id);
-            }
-
-            return open;
-          }}
-        />
-      ))}
-    </PopoverRoot>
+    <Mosaic.Root>
+      <PopoverRoot>
+        <ActiveNode />
+        <DeckMain />
+        <PopoverContent />
+        <Dialog />
+        <Toaster toasts={toasts} onDismissToast={onDismissToast} />
+      </PopoverRoot>
+    </Mosaic.Root>
   );
 };

package/src/components/DeckLayout/DeckMain.tsx

@@ -0,0 +1,287 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { Fragment, type UIEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { useAtomCapability, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { Main, type MainContentProps, useMediaQuery, useOnTransition } from '@dxos/react-ui';
+import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from '@dxos/react-ui-stack';
+import { mainPaddingTransitions, mx } from '@dxos/ui-theme';
+
+import { useBreakpoints, useDeckState, useHoistStatusbar } from '../../hooks';
+import { DeckCapabilities, getMode } from '../../types';
+import { calculateOverscroll, layoutAppliesTopbar } from '../../util';
+import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
+import { Plank } from '../Plank';
+import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
+
+import { ContentEmpty } from './ContentEmpty';
+import { StatusBar } from './StatusBar';
+import { Topbar } from './Topbar';
+
+export const DeckMain = () => {
+  const { invokeSync } = useOperationInvoker();
+  const settings = useAtomCapability(DeckCapabilities.Settings);
+  const { state, deck, updateState } = useDeckState();
+  const { sidebarState, complementarySidebarState, complementarySidebarPanel } = state;
+  const { active, companionOpen, companionVariant, fullscreen, solo, plankSizing } = deck;
+  const effectiveCompanionVariant = companionOpen ? companionVariant : undefined;
+  const layoutMode = getMode(deck);
+  const breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
+  const pluginManager = usePluginManager();
+
+  const scrollLeftRef = useRef<number>(null);
+  const deckRef = useRef<HTMLDivElement>(null);
+
+  // 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.
+    const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
+    const attended = attention.getCurrent();
+    const firstId = solo ?? active[0];
+    if (attended.length === 0 && firstId) {
+      // TODO(wittjosiah): Focusing the type button is a workaround.
+      //   If the plank is directly focused on first load the focus ring appears.
+      document.querySelector<HTMLElement>(`article[data-attendable-id="${firstId}"] button`)?.focus();
+    }
+  }, []);
+
+  // Not using `breakpoint` to avoid firing when breakpoint changes between tablet and desktop.
+  // `ssr: false` to avoid using fallback values and flashing into solo mode on startup.
+  const [isNotMobile] = useMediaQuery('md');
+  const shouldRevert = useRef(false);
+  useEffect(() => {
+    if (!isNotMobile && layoutMode === 'deck') {
+      // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
+      const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
+      const attended = attention.getCurrent();
+
+      shouldRevert.current = true;
+      invokeSync(LayoutOperation.SetLayoutMode, { subject: attended[0], mode: 'solo' });
+    } else if (isNotMobile && layoutMode === 'solo' && shouldRevert.current) {
+      invokeSync(LayoutOperation.SetLayoutMode, { revert: true });
+    }
+    // NOTE: Using `layoutMode` instead of `deck` to avoid infinite loops caused by object reference changes.
+  }, [isNotMobile, layoutMode, invokeSync]);
+
+  // When deck is disabled in settings, set to solo mode if the current layout mode is deck.
+  // TODO(thure): Applying this as an effect should be avoided over emitting the operation only when the setting changes.
+  useEffect(() => {
+    if (!settings?.enableDeck && layoutMode === 'deck') {
+      invokeSync(LayoutOperation.SetLayoutMode, { subject: active[0], mode: 'solo' });
+    }
+  }, [settings?.enableDeck, invokeSync, active, layoutMode]);
+
+  /**
+   * Clear scroll restoration state if the window is resized.
+   */
+  const handleResize = useCallback(() => {
+    scrollLeftRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [handleResize]);
+
+  const restoreScroll = useCallback(() => {
+    if (deckRef.current && scrollLeftRef.current != null) {
+      deckRef.current.scrollLeft = scrollLeftRef.current;
+    }
+  }, []);
+  useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
+
+  /**
+   * Save scroll position as the user scrolls.
+   */
+  const handleScroll = useCallback(
+    (event: UIEvent) => {
+      if (!solo && event.currentTarget === event.target) {
+        scrollLeftRef.current = (event.target as HTMLDivElement).scrollLeft;
+      }
+    },
+    [solo],
+  );
+
+  const isEmpty = !solo && active.length === 0;
+
+  const padding = useMemo(() => {
+    if (!solo && settings?.overscroll === 'centering') {
+      return calculateOverscroll(active.length);
+    }
+    return {};
+  }, [solo, settings?.overscroll, deck]);
+
+  const mainPosition = useMemo(
+    () => [
+      '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],
+  );
+
+  const { order, itemsCount }: { order: Record<string, number>; itemsCount: number } = useMemo(() => {
+    return active.reduce(
+      (acc: { order: Record<string, number>; itemsCount: number }, entryId) => {
+        acc.order[entryId] = acc.itemsCount + 1;
+        acc.itemsCount += companionOpen ? 3 : 2;
+        return acc;
+      },
+      { order: {}, itemsCount: 0 },
+    );
+  }, [active, companionOpen]);
+
+  const handleNavigationSidebarStateChange = useCallback(
+    (next: typeof sidebarState) => {
+      updateState((s) => ({ ...s, sidebarState: next }));
+    },
+    [updateState],
+  );
+
+  const handleComplementarySidebarStateChange = useCallback(
+    (next: typeof complementarySidebarState) => {
+      updateState((s) => ({ ...s, complementarySidebarState: next }));
+    },
+    [updateState],
+  );
+
+  return (
+    <Main.Root
+      navigationSidebarState={fullscreen ? 'closed' : sidebarState}
+      complementarySidebarState={fullscreen ? 'closed' : complementarySidebarState}
+      onNavigationSidebarStateChange={handleNavigationSidebarStateChange}
+      onComplementarySidebarStateChange={handleComplementarySidebarStateChange}
+    >
+      {/* Left sidebar. */}
+      <Sidebar />
+
+      {/* Right sidebar. */}
+      <ComplementarySidebar current={complementarySidebarPanel} />
+
+      {/* Dialog overlay to dismiss dialogs. */}
+      <Main.Overlay />
+
+      {/* No content. */}
+      {isEmpty && (
+        <Main.Content bounce handlesFocus classNames={mainPosition}>
+          <ContentEmpty />
+        </Main.Content>
+      )}
+
+      {/* Solo/deck mode. */}
+      {!isEmpty && (
+        <Main.Content
+          bounce
+          handlesFocus
+          classNames={mainPosition}
+          style={
+            {
+              '--main-spacing': settings?.encapsulatedPlanks ? '0.75rem' : '0',
+              '--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`,
+            } as MainContentProps['style']
+          }
+        >
+          {/* Deck mode. */}
+          <div
+            role='none'
+            className={!solo ? 'relative bg-deck-surface overflow-hidden' : 'sr-only'}
+            {...(solo && { inert: true })}
+          >
+            {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
+            {!topbar && !fullscreen && (
+              <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />
+            )}
+            <Stack
+              ref={deckRef}
+              orientation='horizontal'
+              size='contain'
+              itemsCount={itemsCount - 1}
+              classNames={[
+                'absolute inset-y-(--main-spacing) -inset-w-px h-[calc(100%-2*var(--main-spacing))]',
+                mainPaddingTransitions,
+              ]}
+              style={padding}
+              onScroll={handleScroll}
+            >
+              {active.map((entryId) => (
+                <Fragment key={entryId}>
+                  <PlankSeparator order={order[entryId] - 1} encapsulate={!!settings?.enableDeck} />
+                  <Plank
+                    id={entryId}
+                    companionVariant={effectiveCompanionVariant}
+                    part='deck'
+                    order={order[entryId]}
+                    active={active}
+                    layoutMode={layoutMode}
+                    settings={settings}
+                  />
+                </Fragment>
+              ))}
+            </Stack>
+          </div>
+
+          {/* Solo mode. */}
+          <div
+            role='none'
+            className={solo ? 'relative overflow-hidden bg-deck-surface' : 'sr-only'}
+            {...(!solo && { inert: true })}
+          >
+            {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
+            {!topbar && !fullscreen && (
+              <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />
+            )}
+            <StackContext.Provider
+              value={{
+                orientation: 'horizontal',
+                size: 'contain',
+                rail: true,
+              }}
+            >
+              <Plank
+                id={solo}
+                companionVariant={effectiveCompanionVariant}
+                part='solo'
+                layoutMode={layoutMode}
+                settings={settings}
+              />
+            </StackContext.Provider>
+          </div>
+        </Main.Content>
+      )}
+
+      {/* Topbar. */}
+      {topbar && <Topbar />}
+
+      {/* Status bar. */}
+      {hoistStatusbar && <StatusBar showHints={settings?.showHints} />}
+    </Main.Root>
+  );
+};
+
+const PlankSeparator = ({ order, encapsulate }: { order: number; encapsulate?: boolean }) =>
+  order > 0 ? (
+    <span
+      role='separator'
+      className={mx('row-span-2 bg-deck-surface', encapsulate ? 'w-0' : 'w-4')}
+      style={{ gridColumn: order }}
+    />
+  ) : null;

package/src/components/DeckLayout/Dialog.tsx

@@ -2,33 +2,42 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { Surface, useCapability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
 
-import { DeckCapabilities } from '../../capabilities';
-import { PlankContentError } from '../Plank';
+import { useDeckState } from '../../hooks';
+import { PlankErrorFallback } from '../Plank';
 
 export const Dialog = () => {
-  const context = useCapability(DeckCapabilities.MutableDeckState);
-  const { dialogOpen, dialogType, dialogBlockAlign, dialogOverlayClasses, dialogOverlayStyle, dialogContent } = context;
+  const { state, updateEphemeral } = useDeckState();
+  const { dialogOpen, dialogType, dialogBlockAlign, dialogOverlayClasses, dialogOverlayStyle, dialogContent } = state;
   const Root = dialogType === 'alert' ? AlertDialog.Root : NaturalDialog.Root;
   const Overlay = dialogType === 'alert' ? AlertDialog.Overlay : NaturalDialog.Overlay;
 
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      updateEphemeral((s) => ({ ...s, dialogOpen: nextOpen }));
+    },
+    [updateEphemeral],
+  );
+
   // 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.
   return (
-    <Root
-      modal={dialogBlockAlign !== 'end'}
-      open={dialogOpen}
-      onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}
-    >
+    <Root modal={dialogBlockAlign !== 'end'} open={dialogOpen} onOpenChange={handleOpenChange}>
       {dialogBlockAlign === 'end' ? (
         // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
-        <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} placeholder={<div />} />
+        <Surface.Surface
+          role='dialog'
+          data={dialogContent}
+          limit={1}
+          fallback={PlankErrorFallback}
+          placeholder={<div />}
+        />
       ) : (
         <Overlay blockAlign={dialogBlockAlign} classNames={dialogOverlayClasses} style={dialogOverlayStyle}>
-          <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} />
+          <Surface.Surface role='dialog' data={dialogContent} limit={1} fallback={PlankErrorFallback} />
         </Overlay>
       )}
     </Root>

package/src/components/DeckLayout/Fallback.tsx

@@ -5,7 +5,6 @@
 import React from 'react';
 
 import { useTranslation } from '@dxos/react-ui';
-import { errorText, mx } from '@dxos/react-ui-theme';
 
 import { meta } from '../../meta';
 
@@ -13,13 +12,10 @@ export const Fallback = () => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <div role='none' className='min-bs-screen is-full flex items-center justify-center p-8'>
+    <div role='none' className='min-h-screen w-full flex items-center justify-center p-8'>
       <p
         role='alert'
-        className={mx(
-          errorText,
-          'border border-error-400/50 rounded-md flex items-center justify-center p-8 font-normal text-lg',
-        )}
+        className='flex items-center justify-center p-8 font-normal text-lg text-error-text border border-rose-fill rounded-md'
       >
         {t('plugin error message')}
       </p>