@dxos/plugin-deck 0.8.4-main.422d1c7879 → 0.8.4-main.4668b7de9b

package/src/capabilities/url-handler.ts

@@ -14,10 +14,10 @@ import {
   getWorkspaceFromPath,
   toUrlPath,
 } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
 import { runAndForwardErrors } from '@dxos/effect';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { Operation } from '@dxos/operation';
 import { Node } from '@dxos/plugin-graph';
 import { isTauri } from '@dxos/util';
 
@@ -131,9 +131,35 @@ export default Capability.makeModule(
 
     const onPopState = () => void runAndForwardErrors(provideServices(handleNavigation()));
 
-    // Initial navigation.
+    // Install before handleNavigation()/state-sync push entries on top of the sentinel.
+    const sentinelKey = installLeaveTrap();
+
+    // Landing on the sentinel means a Back is about to leave Composer; confirm and act on it.
+    // The guard stops our own back()/forward() from re-entering.
+    let handlingSentinel = false;
+    const onCurrentEntryChange = () => {
+      const current = window.navigation.currentEntry;
+      if (handlingSentinel || !current || current.key !== sentinelKey) {
+        return;
+      }
+      handlingSentinel = true;
+      queueMicrotask(() => {
+        if (window.confirm('Leave Composer?')) {
+          history.back(); // Past the sentinel to the prior page.
+        } else {
+          history.forward(); // Back to where the user was.
+        }
+        setTimeout(() => {
+          handlingSentinel = false;
+        });
+      });
+    };
+
     yield* provideServices(handleNavigation());
     window.addEventListener('popstate', onPopState);
+    if ('navigation' in window) {
+      window.navigation.addEventListener('currententrychange', onCurrentEntryChange);
+    }
 
     // Tauri deep link support.
     let unlistenDeepLink: (() => void) | undefined;
@@ -192,6 +218,9 @@ export default Capability.makeModule(
     return Capability.contributes(Capabilities.Null, null, () =>
       Effect.sync(() => {
         window.removeEventListener('popstate', onPopState);
+        if ('navigation' in window) {
+          window.navigation.removeEventListener('currententrychange', onCurrentEntryChange);
+        }
         unsubscribe();
         unlistenDeepLink?.();
       }),
@@ -199,6 +228,48 @@ export default Capability.makeModule(
   }),
 );
 
+/**
+ * sessionStorage key holding the sentinel history entry's key. The entry is identified by its
+ * (reload-stable) Navigation API key rather than by entry state, because the deck overwrites
+ * history state via replaceState during URL sync — which would erase a state marker. sessionStorage
+ * survives reloads within the tab and the deck never touches it.
+ */
+const SENTINEL_STORAGE_KEY = 'dxos.composer.deck.leaveTrap.sentinelKey';
+
+/**
+ * Insert a "sentinel" history entry beneath the app's working entries, so a Back-press that would
+ * leave Composer instead lands on the sentinel — where `onCurrentEntryChange` confirms the exit. A
+ * cross-document back is uncancelable and `beforeunload` cannot distinguish reload from leave, so
+ * this same-document floor is required; reload fires no traversal and is never trapped. Requires the
+ * Navigation API (Chromium); no-op otherwise. Idempotent across reloads via the sessionStorage-held
+ * entry key, so the sentinel is not duplicated. Returns the sentinel entry's key, or undefined.
+ */
+const installLeaveTrap = (): string | undefined => {
+  if (!('navigation' in window)) {
+    return undefined;
+  }
+  const saved = sessionStorage.getItem(SENTINEL_STORAGE_KEY);
+  if (saved && window.navigation.entries().some((entry) => entry.key === saved)) {
+    // The sentinel survived (reload, or the user returned to Composer after leaving). If we are
+    // sitting ON it — e.g. the user left via the sentinel then came back Forward onto it — push a
+    // working entry above so the user is above the floor again and the trap re-arms.
+    if (window.navigation.currentEntry?.key === saved) {
+      history.pushState(null, '', window.location.pathname + window.location.search);
+    }
+    return saved;
+  }
+  // history.length > 1 (not navigation.canGoBack, which is false for a cross-origin prior entry)
+  // means there is somewhere to leave to; otherwise Back can't exit and no sentinel is needed.
+  const key = window.navigation.currentEntry?.key;
+  if (key && window.history.length > 1) {
+    // Record the current (landing) entry as the sentinel, then push the working entry above it.
+    sessionStorage.setItem(SENTINEL_STORAGE_KEY, key);
+    history.pushState(null, '', window.location.pathname + window.location.search);
+    return key;
+  }
+  return undefined;
+};
+
 /** Check if a path is a redirect path handled elsewhere (e.g., OAuth). */
 const isRedirectPath = (pathname: string): boolean => pathname.startsWith('/redirect/');
 

package/src/components/DeckSettings/DeckSettings.stories.tsx

@@ -6,7 +6,8 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { DeckSettings } from './DeckSettings';
 
 const meta = {
@@ -29,7 +30,6 @@ export const Default: Story = {
     settings: {
       enableDeck: true,
       encapsulatedPlanks: false,
-      enableStatusbar: true,
       showHints: true,
       enableNativeRedirect: false,
     },

package/src/components/DeckSettings/DeckSettings.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { Input, useTranslation } from '@dxos/react-ui';
+import { useTranslation } from '@dxos/react-ui';
 import { Settings as SettingsForm } from '@dxos/react-ui-form';
 
 import { meta } from '#meta';
@@ -21,52 +21,13 @@ export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsProps)
   return (
     <SettingsForm.Viewport>
       <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
-        <SettingsForm.Item title={t('settings.enable-deck.label')} description={t('settings.enable-deck.description')}>
-          <Input.Switch
-            disabled={!onSettingsChange}
-            checked={settings.enableDeck}
-            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, enableDeck: checked }))}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item
-          title={t('settings.encapsulated-planks.label')}
-          description={t('settings.encapsulated-planks.description')}
-        >
-          <Input.Switch
-            disabled={!onSettingsChange}
-            checked={settings.encapsulatedPlanks ?? false}
-            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, encapsulatedPlanks: checked }))}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item
-          title={t('settings.enable-statusbar.label')}
-          description={t('settings.enable-statusbar.description')}
-        >
-          <Input.Switch
-            disabled={!onSettingsChange}
-            checked={settings.enableStatusbar}
-            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, enableStatusbar: checked }))}
-          />
-        </SettingsForm.Item>
-        <SettingsForm.Item title={t('settings.show-hints.label')} description={t('settings.show-hints.description')}>
-          <Input.Switch
-            disabled={!onSettingsChange}
-            checked={settings.showHints}
-            onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, showHints: checked }))}
-          />
-        </SettingsForm.Item>
-        {!isSocket && (
-          <SettingsForm.Item
-            title={t('settings.native-redirect.label')}
-            description={t('settings.native-redirect.description')}
-          >
-            <Input.Switch
-              disabled={!onSettingsChange}
-              checked={settings.enableNativeRedirect}
-              onCheckedChange={(checked) => onSettingsChange?.((s) => ({ ...s, enableNativeRedirect: checked }))}
-            />
-          </SettingsForm.Item>
-        )}
+        <SettingsForm.FieldSet
+          readonly={!onSettingsChange}
+          schema={Settings.Settings}
+          visible={(path) => path !== 'enableNativeRedirect' || !isSocket}
+          values={settings}
+          onValuesChanged={(values) => onSettingsChange?.(() => values)}
+        />
       </SettingsForm.Section>
     </SettingsForm.Viewport>
   );

package/src/components/Matrix/Matrix.stories.tsx

@@ -25,9 +25,9 @@ import { Organization, Person } from '@dxos/types';
 
 import { DeckState, OperationHandler } from '#capabilities';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 
 import { Plank } from '../../containers/Plank';
-import { translations } from '../../translations';
 import { Matrix, type MatrixController, type MatrixRootProps } from './Matrix';
 
 random.seed(123);
@@ -103,7 +103,7 @@ const PlankTile = (props: MosaicTileProps<Obj.Any>) => {
 const TestExtension = Capability.contributes(
   Capabilities.ReactSurface,
   Surface.create({
-    id: 'story-article',
+    id: 'storyArticle',
     role: 'article',
     component: ({ data: { subject } }) => {
       if (!subject) {

package/src/components/Matrix/Matrix.tsx

@@ -8,9 +8,9 @@ import React, { forwardRef, type PropsWithChildren, useCallback, useEffect, useI
 
 import { Obj } from '@dxos/echo';
 import { ScrollArea } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
 import { type MosaicStackTileComponent, Mosaic } from '@dxos/react-ui-mosaic';
-import { composable, composableProps } from '@dxos/ui-theme';
 import { type ComposableProps } from '@dxos/ui-types';
 
 //

package/src/containers/Deck/Banner.tsx

@@ -27,8 +27,8 @@ export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'top
       {variant === 'sidebar' ? <CloseSidebarButton /> : <ToggleSidebarButton />}
       <span className='self-center grow ms-1'>{t('current-app.name', { ns: osTranslations })}</span>
       {variant === 'topbar' && (
-        <div role='none' className='absolute inset-0 pointer-events-none'>
-          <div role='none' className='grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto'>
+        <div className='absolute inset-0 pointer-events-none'>
+          <div className='grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto'>
             <Surface.Surface role='search-input' limit={1} />
           </div>
         </div>

package/src/containers/Deck/Deck.stories.tsx

@@ -14,9 +14,9 @@ import { corePlugins } from '@dxos/plugin-testing';
 import { DeckSettings, DeckState } from '#capabilities';
 import { useDeckState } from '#hooks';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 import { DeckCapabilities, getMode } from '#types';
 
-import { translations } from '../../translations';
 import { Deck } from './Deck';
 
 const TestPlugin = Plugin.define(pluginMeta).pipe(

package/src/containers/Deck/DeckContent.tsx

@@ -4,16 +4,15 @@
 
 import React, { type PropsWithChildren, useCallback, useEffect, useRef } from 'react';
 
-import { AttentionCapabilities } from '@dxos/plugin-attention/types';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { Main, useMediaQuery } from '@dxos/react-ui';
 
-import { useBreakpoints, useHoistStatusbar } from '#hooks';
+import { useBreakpoints } from '#hooks';
 
 import { layoutAppliesTopbar } from '../../util';
 import { ComplementarySidebar, Sidebar } from '../Sidebar';
 import { Banner } from './Banner';
 import { useDeckContext } from './DeckRoot';
-import { StatusBar } from './StatusBar';
 
 const DECK_CONTENT_NAME = 'DeckContent';
 
@@ -31,7 +30,6 @@ export const DeckContent = ({ children }: DeckContentProps) => {
   } = useDeckContext(DECK_CONTENT_NAME);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
-  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
 
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
@@ -97,7 +95,6 @@ export const DeckContent = ({ children }: DeckContentProps) => {
       <Main.Overlay />
       {children}
       {topbar && <Banner variant='topbar' />}
-      {hoistStatusbar && <StatusBar showHints={settings?.showHints} />}
     </Main.Root>
   );
 };

package/src/containers/Deck/DeckViewport.tsx

@@ -20,12 +20,13 @@ import { addEventListener } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 import { useNode } from '@dxos/plugin-graph';
 import { IconButton, Main, type MainContentProps, useOnTransition, useTranslation } from '@dxos/react-ui';
+import { mainPaddingTransitions } from '@dxos/react-ui';
 import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from '@dxos/react-ui-stack';
-import { hoverableControls, hoverableFocusedWithinControls, mainPaddingTransitions, mx } from '@dxos/ui-theme';
+import { hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
 
-import { useBreakpoints, useCompanions, useDeckState, useHoistStatusbar, useSelectedCompanion } from '#hooks';
+import { useBreakpoints, useCompanions, useDeckState, useSelectedCompanion } from '#hooks';
 import { meta } from '#meta';
-import { DeckOperation } from '#operations';
+import { DeckOperation } from '#types';
 import { getMode } from '#types';
 
 import { layoutAppliesTopbar } from '../../util';
@@ -57,7 +58,6 @@ export const DeckViewport = ({ children }: DeckViewportProps) => {
 
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
-  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
 
   return (
     <Main.Content
@@ -66,7 +66,6 @@ export const DeckViewport = ({ children }: DeckViewportProps) => {
       classNames={[
         '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)',
       ]}
       style={
         {
@@ -105,11 +104,7 @@ export const DeckContentEmpty = () => {
   const layoutMode = getMode(deck);
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
   return (
-    <div
-      role='none'
-      className='grid place-items-center p-8 relative bg-deck-surface'
-      data-testid='layoutPlugin.firstRunMessage'
-    >
+    <div className='grid place-items-center p-8 relative bg-deck-surface' data-testid='layoutPlugin.firstRunMessage'>
       <Surface.Surface role='keyshortcuts' />
       {!topbar && <ToggleSidebarButton />}
     </div>
@@ -149,7 +144,7 @@ export const DeckSoloMode = () => {
   }, [fullscreen, onLayoutChange]);
 
   return (
-    <div role='none' className='relative overflow-hidden bg-deck-surface'>
+    <div className='relative overflow-hidden bg-deck-surface'>
       <DeckSidebarToggles topbar={topbar} fullscreen={fullscreen} />
       {fullscreen && <ExitFullscreenButton onExit={() => onLayoutChange({ mode: 'solo--fullscreen' })} />}
       <StackContext.Provider
@@ -233,7 +228,7 @@ export const DeckMultiMode = () => {
   }, [active, lastPlankCompanions.length]);
 
   return (
-    <div role='none' className='relative bg-deck-surface overflow-hidden'>
+    <div className='relative bg-deck-surface overflow-hidden'>
       <DeckSidebarToggles topbar={topbar} fullscreen={fullscreen} />
       <Stack
         classNames={[
@@ -281,7 +276,6 @@ const ExitFullscreenButton = ({ onExit }: { onExit: () => void }) => {
   const { t } = useTranslation(meta.id);
   return (
     <div
-      role='none'
       className={mx(
         'fixed top-2 right-2 z-[1]',
         hoverableControls,

package/src/containers/DeckLayout/ActiveNode.tsx

@@ -19,7 +19,7 @@ export const ActiveNode = () => {
   useNodeActionExpander(activeNode);
 
   return (
-    <div role='none' className='sr-only'>
+    <div className='sr-only'>
       {/* TODO(wittjosiah): Weird that this is a surface, feel like it's not really render logic.
             Probably this lives in React-land currently in order to access translations? */}
       <Surface.Surface

package/src/containers/DeckLayout/DeckLayout.stories.tsx

@@ -24,6 +24,7 @@ import { Loading, withLayout } from '@dxos/react-ui/testing';
 
 import { OperationHandler } from '#capabilities';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 import {
   DeckCapabilities,
   type EphemeralDeckState,
@@ -34,7 +35,6 @@ import {
   PLANK_COMPANION_TYPE,
 } from '#types';
 
-import { translations } from '../../translations';
 import { DeckLayout } from './DeckLayout';
 
 random.seed(1234);
@@ -48,7 +48,6 @@ const storyDeckSettings = Capability.makeModule(() =>
     const settingsAtom = Atom.make<Settings.Settings>({
       showHints: false,
       enableDeck: true,
-      enableStatusbar: false,
       enableNativeRedirect: false,
       encapsulatedPlanks: false,
     }).pipe(Atom.keepAlive);
@@ -167,13 +166,13 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
       Effect.succeed(
         Capability.contributes(Capabilities.ReactSurface, [
           Surface.create({
-            id: 'story-navigation',
+            id: 'storyNavigation',
             role: 'navigation',
             filter: (data): data is { current: string } => typeof (data as any).current === 'string',
             component: ({ data, ref }) => <NavContainer current={data.current} ref={ref} />,
           }),
           Surface.create({
-            id: 'story-article',
+            id: 'storyArticle',
             role: 'article',
             filter: (data): data is Record<string, unknown> =>
               typeof data === 'object' && data !== null && (data as { companionTo?: unknown }).companionTo == null,
@@ -202,7 +201,7 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
             },
           }),
           Surface.create({
-            id: 'story-article-companion',
+            id: 'storyArticleCompanion',
             role: 'article',
             filter: (data): data is AppSurface.ArticleData<unknown, {}, unknown> =>
               typeof data === 'object' && data !== null && (data as { companionTo?: unknown }).companionTo != null,
@@ -235,12 +234,12 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
     activate: Effect.fnUntraced(function* () {
       const extensions = yield* Effect.all([
         GraphBuilder.createExtension({
-          id: 'story-items',
+          id: 'storyItems',
           match: NodeMatcher.whenRoot,
           connector: () => Effect.succeed(STORY_ITEMS.map((item, index) => toStoryItemNode(item, index, 0))),
         }),
         GraphBuilder.createExtension({
-          id: 'story-item-companions',
+          id: 'storyItemCompanions',
           match: NodeMatcher.whenNodeType('story-item'),
           connector: (node) =>
             Effect.succeed([
@@ -249,14 +248,13 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
                 label: 'Companion Alpha',
                 icon: 'ph--sidebar--regular',
                 data: { variant: 'alpha', parentId: node.id },
-                position: 'hoist',
+                position: 'first',
               }),
               AppNode.makeCompanion({
                 id: linkedSegment('beta'),
                 label: 'Companion Beta',
                 icon: 'ph--chat-circle--regular',
                 data: { variant: 'beta', parentId: node.id },
-                position: 'static',
               }),
             ]),
         }),
@@ -285,7 +283,7 @@ const NavContainer = forwardRef<HTMLDivElement, NavContainerProps>((_props, forw
         {items.map((node) => (
           <ListItem.Root
             key={node.id}
-            classNames={activeSet.has(node.id) ? 'bg-active-surface' : undefined}
+            classNames={activeSet.has(node.id) ? 'bg-current-surface' : undefined}
             onClick={() => void invokePromise(LayoutOperation.Set, { subject: [node.id] })}
           >
             {node.properties.icon && (

package/src/containers/DeckLayout/Fallback.tsx

@@ -12,10 +12,10 @@ const Fallback = () => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <div role='none' className='min-h-screen w-full flex items-center justify-center p-8'>
+    <div className='min-h-screen w-full flex items-center justify-center p-8'>
       <p
         role='alert'
-        className='flex items-center justify-center p-8 font-normal text-lg text-error-text border border-rose-fill rounded-md'
+        className='flex items-center justify-center p-8 font-normal text-lg text-error-text border border-rose-bg rounded-md'
       >
         {t('plugin-error.message')}
       </p>

package/src/containers/DeckLayout/Popover.tsx

@@ -3,13 +3,11 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import * as Function from 'effect/Function';
-import * as Option from 'effect/Option';
 import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
-import { Annotation, Obj } from '@dxos/echo';
+import { Obj } from '@dxos/echo';
 import {
   Card,
   Popover,
@@ -75,15 +73,10 @@ export const PopoverContent = () => {
   const isObjectPopover = Obj.isObject(popoverSubject);
   const objectMenuItems = useObjectMenuItems(popoverSubject);
   const title = state.popoverTitle ? toLocalizedString(state.popoverTitle, t) : 'Unknown';
-  const icon = isObjectPopover
-    ? Function.pipe(
-        Obj.getSchema(popoverSubject),
-        Option.fromNullable,
-        Option.flatMap(Annotation.IconAnnotation.get),
-        Option.map(({ icon }) => icon),
-        Option.getOrElse(() => 'ph--placeholder--regular'),
-      )
-    : undefined;
+  const icon = isObjectPopover ? (Obj.getIcon(popoverSubject)?.icon ?? 'ph--circle-dashed--regular') : undefined;
+  const content = state.popoverContent;
+  // A base popover renders a plugin-provided component; everything else falls through to the card.
+  const isBasePopover = state.popoverKind === 'base' && !!content && 'component' in content;
 
   const handleClose = useCallback(() => {
     setOpen(false);
@@ -117,27 +110,33 @@ export const PopoverContent = () => {
         side={state.popoverSide}
         sticky='always'
         hideWhenDetached
+        onOpenAutoFocus={(event) => event.preventDefault()}
         onInteractOutside={handleInteractOutside}
         onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
-          {/* Base popover */}
-          {state.popoverKind === 'base' && state.popoverContent && 'component' in state.popoverContent && (
-            <Surface.Surface type={AppSurface.Popover} data={state.popoverContent} limit={1} />
-          )}
-
-          {/* Card popover */}
-          {state.popoverKind === 'card' && (
+          {isBasePopover && content && 'component' in content ? (
+            /* Base popover: a plugin-provided component (e.g. editor link preview). */
+            <Surface.Surface type={AppSurface.Popover} data={content} limit={1} />
+          ) : (
+            /*
+             * Card popover (default). Rendered for any open popover that isn't an explicit
+             * base-component popover so the popover can never collapse to a bare 1px frame: the
+             * header (icon + title + menu) always renders, and the body falls back to a fixed-
+             * height "no preview" row when no subject resolves a card Surface (e.g. system-type
+             * objects like a raw Feed that have no registered card and no renderable fields).
+             */
             <Menu.Root>
               <Card.Root border={false} classNames='dx-card-popover'>
-                <Card.Toolbar>
-                  <Card.IconBlock padding>{icon && <Card.Icon icon={icon} />}</Card.IconBlock>
+                <Card.Header>
+                  <Card.IconBlock>{icon && <Card.Icon icon={icon} />}</Card.IconBlock>
                   <Card.Title>{title}</Card.Title>
                   {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
-                  <Card.IconBlock padding>
+                  <Card.IconBlock>
                     <Menu.Trigger asChild disabled={!objectMenuItems.length}>
                       <Toolbar.IconButton
                         variant='ghost'
+                        density='sm'
                         icon='ph--dots-three-vertical--regular'
                         iconOnly
                         label='Actions'
@@ -145,10 +144,16 @@ export const PopoverContent = () => {
                     </Menu.Trigger>
                     <Menu.Content items={objectMenuItems} />
                   </Card.IconBlock>
-                </Card.Toolbar>
-
-                {state.popoverContent && 'subject' in state.popoverContent && (
-                  <Surface.Surface type={AppSurface.Card} data={state.popoverContent} limit={1} />
+                </Card.Header>
+
+                {content && 'subject' in content ? (
+                  <Surface.Surface type={AppSurface.Card} data={content} limit={1} />
+                ) : (
+                  <Card.Body classNames='min-bs-8'>
+                    <Card.Row>
+                      <Card.Text variant='description'>{t('popover-no-preview.message')}</Card.Text>
+                    </Card.Row>
+                  </Card.Body>
                 )}
               </Card.Root>
             </Menu.Root>

package/src/containers/DeckLayout/Toast.tsx

@@ -2,17 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { type LayoutOperation } from '@dxos/app-toolkit';
-import {
-  Button,
-  Icon,
-  Toast as NaturalToast,
-  type ToastRootProps,
-  toLocalizedString,
-  useTranslation,
-} from '@dxos/react-ui';
+import { Button, Toast as NaturalToast, type ToastRootProps, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '#meta';
 
@@ -25,37 +18,34 @@ export const Toast = ({
   duration,
   actionLabel,
   actionAlt,
-  closeLabel,
   onAction,
   onOpenChange,
 }: LayoutOperation.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
   const { t } = useTranslation(meta.id);
 
+  // Control the open state so closing flips Radix's `open` (playing the exit animation) rather than
+  // unmounting abruptly. Both the close button and Radix's own timeout/swipe route through here.
+  const [open, setOpen] = useState(true);
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next);
+    onOpenChange?.(next);
+  };
+
   return (
-    <NaturalToast.Root data-testid={id} defaultOpen duration={duration} onOpenChange={onOpenChange}>
-      <NaturalToast.Body>
-        <NaturalToast.Title classNames='items-center'>
-          {icon && <Icon icon={icon} classNames='inline mr-1' />}
-          {title && <span>{toLocalizedString(title, t)}</span>}
-        </NaturalToast.Title>
-        {description && (
-          <NaturalToast.Description>{description && toLocalizedString(description, t)}</NaturalToast.Description>
-        )}
-      </NaturalToast.Body>
-      <NaturalToast.Actions>
-        {onAction && actionAlt && actionLabel && (
+    <NaturalToast.Root data-testid={id} open={open} duration={duration} onOpenChange={handleOpenChange}>
+      <NaturalToast.Title icon={icon} onClose={() => handleOpenChange(false)}>
+        {title && <span>{toLocalizedString(title, t)}</span>}
+      </NaturalToast.Title>
+      {description && <NaturalToast.Description>{toLocalizedString(description, t)}</NaturalToast.Description>}
+      {onAction && actionAlt && actionLabel && (
+        <NaturalToast.Actions>
           <NaturalToast.Action altText={toLocalizedString(actionAlt, t)} asChild>
             <Button data-testid='toast.action' variant='primary' onClick={() => onAction?.()}>
               {toLocalizedString(actionLabel, t)}
             </Button>
           </NaturalToast.Action>
-        )}
-        {closeLabel && (
-          <NaturalToast.Close asChild>
-            <Button data-testid='toast.close'>{toLocalizedString(closeLabel, t)}</Button>
-          </NaturalToast.Close>
-        )}
-      </NaturalToast.Actions>
+        </NaturalToast.Actions>
+      )}
     </NaturalToast.Root>
   );
 };