@dxos/plugin-deck 0.8.1 → 0.8.2-main.2f9c567

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,33 +3,25 @@
 //
 
 import { untracked } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
 
 import {
   Capabilities,
   LayoutAction,
-  Surface,
   createIntent,
   useCapability,
   useIntentDispatcher,
   usePluginManager,
 } from '@dxos/app-framework';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
-import {
-  AlertDialog,
-  Dialog as NaturalDialog,
-  Main,
-  Popover,
-  type MainProps,
-  useMediaQuery,
-  useOnTransition,
-} from '@dxos/react-ui';
+import { Main, 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 { Fullscreen } from './Fullscreen';
+import { Dialog } from './Dialog';
+import { PopoverContent, PopoverRoot } from './Popover';
 import { StatusBar } from './StatusBar';
 import { Toast } from './Toast';
 import { Topbar } from './Topbar';
@@ -37,7 +29,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, PlankContentError } from '../Plank';
+import { Plank } from '../Plank';
 import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
 import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
 
@@ -52,36 +44,17 @@ 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,
-    dialogOpen,
-    dialogContent,
-    dialogBlockAlign,
-    dialogType,
-    popoverOpen,
-    popoverContent,
-    popoverAnchorId,
-    deck,
-    toasts,
-  } = context;
+  const { sidebarState, complementarySidebarState, complementarySidebarPanel, deck, toasts } = context;
   const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
   const breakpoint = useBreakpoints();
-  const topbar = layoutAppliesTopbar(breakpoint);
-  const hoistStatusbar = useHoistStatusbar(breakpoint);
+  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);
 
-  // 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.
@@ -144,8 +117,6 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
       deckRef.current.scrollLeft = scrollLeftRef.current;
     }
   }, []);
-
-  const layoutMode = getMode(deck);
   useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
 
   /**
@@ -178,22 +149,6 @@ 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) => {
@@ -206,146 +161,124 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
   }, [active, activeCompanions]);
 
   return (
-    <Popover.Root modal open={!!(popoverAnchorId && delayedPopoverVisibility)} onOpenChange={handlePopoverOpenChange}>
+    <PopoverRoot>
       <ActiveNode />
 
-      {fullscreen && <Fullscreen id={solo} />}
-
-      {!fullscreen && (
-        <Main.Root
-          navigationSidebarState={context.sidebarState}
-          onNavigationSidebarStateChange={(next) => (context.sidebarState = next)}
-          complementarySidebarState={context.complementarySidebarState}
-          onComplementarySidebarStateChange={(next) => (context.complementarySidebarState = next)}
-        >
-          {/* Left sidebar. */}
-          <Sidebar />
+      <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} />
+        {/* Right sidebar. */}
+        <ComplementarySidebar current={complementarySidebarPanel} />
 
-          {/* Dialog overlay to dismiss dialogs. */}
-          <Main.Overlay />
+        {/* Dialog overlay to dismiss dialogs. */}
+        <Main.Overlay />
 
-          {/* No content. */}
-          {isEmpty && (
-            <Main.Content bounce handlesFocus classNames={mainPosition}>
-              <ContentEmpty />
-            </Main.Content>
-          )}
+        {/* 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']
-              }
+        {/* 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: '' })}
             >
-              <div
-                role='none'
-                className={!solo ? 'relative bg-deck overflow-hidden' : 'sr-only'}
-                {...(solo && { inert: '' })}
+              {!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}
               >
-                {!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>
-          )}
+                {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. */}
-          {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. */}
-      <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>
+      <PopoverContent />
 
       {/* Global 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>
+      <Dialog />
 
       {/* Global toasts. */}
       {toasts?.map((toast) => (
@@ -361,6 +294,6 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
           }}
         />
       ))}
-    </Popover.Root>
+    </PopoverRoot>
   );
 };

package/src/components/DeckLayout/Dialog.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework';
+import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
+
+import { DeckCapabilities } from '../../capabilities';
+import { PlankContentError } from '../Plank';
+
+export const Dialog = () => {
+  const context = useCapability(DeckCapabilities.MutableDeckState);
+  const { dialogType, dialogBlockAlign, dialogContent, dialogOpen } = context;
+  const Root = dialogType === 'alert' ? AlertDialog.Root : NaturalDialog.Root;
+  const Overlay = dialogType === 'alert' ? AlertDialog.Overlay : NaturalDialog.Overlay;
+
+  // 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)}
+    >
+      {dialogBlockAlign === 'end' ? (
+        // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
+        <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} placeholder={<div />} />
+      ) : (
+        <Overlay blockAlign={dialogBlockAlign}>
+          <Surface role='dialog' data={dialogContent} limit={1} fallback={PlankContentError} />
+        </Overlay>
+      )}
+    </Root>
+  );
+};

package/src/components/DeckLayout/Popover.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework';
+import { Popover, type PopoverContentInteractOutsideEvent } from '@dxos/react-ui';
+
+import { DeckCapabilities } from '../../capabilities';
+
+export type DeckPopoverRootProps = PropsWithChildren<{}>;
+
+const DEBOUNCE_DELAY = 40;
+
+type DeckPopoverContextValue = {
+  setOpen: (open: boolean) => void;
+};
+
+const [DeckPopoverProvider, useDeckPopoverContext] = createContext<DeckPopoverContextValue>('DeckPopover');
+
+export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
+  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const virtualRef = useRef<HTMLButtonElement | null>(null);
+  const [virtualIter, setVirtualIter] = useState(0);
+  const [open, setOpen] = useState(false);
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+
+  // TODO(thure): This is a workaround for the race condition between displaying a Popover and either rendering
+  //  the anchor further down the tree or measuring the virtual trigger’s client rect.
+  useEffect(() => {
+    setOpen(false);
+    if (layout.popoverOpen) {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      if (layout.popoverAnchor && virtualRef.current !== layout.popoverAnchor) {
+        virtualRef.current = layout.popoverAnchor ?? null;
+        setVirtualIter((iter) => iter + 1);
+      }
+      debounceRef.current = setTimeout(() => setOpen(true), DEBOUNCE_DELAY);
+    }
+  }, [layout.popoverOpen, layout.popoverAnchorId, layout.popoverAnchor, layout.popoverContent]);
+
+  return (
+    <DeckPopoverProvider setOpen={setOpen}>
+      <Popover.Root modal={false} open={open}>
+        {layout.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
+        {children}
+      </Popover.Root>
+    </DeckPopoverProvider>
+  );
+};
+
+export const PopoverContent = () => {
+  const layout = useCapability(DeckCapabilities.MutableDeckState);
+  const { setOpen } = useDeckPopoverContext('PopoverContent');
+
+  const handleClose = useCallback(
+    (event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
+      if (
+        // TODO(thure): CodeMirror should not focus itself when it updates.
+        event.type === 'dismissableLayer.focusOutside' &&
+        (event.currentTarget as HTMLElement | undefined)?.classList.contains('cm-content')
+      ) {
+        event.preventDefault();
+      } else {
+        setOpen(false);
+        layout.popoverOpen = false;
+        layout.popoverAnchor = undefined;
+        layout.popoverAnchorId = undefined;
+        layout.popoverSide = undefined;
+      }
+    },
+    [setOpen],
+  );
+
+  const collisionBoundaries: HTMLElement[] = useMemo(() => {
+    const closest = layout.popoverAnchor?.closest('[data-popover-collision-boundary]') as
+      | HTMLElement
+      | null
+      | undefined;
+    return closest ? [closest] : [];
+  }, [layout.popoverAnchor]);
+
+  return (
+    <Popover.Portal>
+      <Popover.Content
+        side={layout.popoverSide}
+        onInteractOutside={handleClose}
+        onEscapeKeyDown={handleClose}
+        collisionBoundary={collisionBoundaries}
+        sticky='always'
+        hideWhenDetached
+      >
+        <Popover.Viewport>
+          <Surface role='popover' data={layout.popoverContent} limit={1} />
+        </Popover.Viewport>
+        <Popover.Arrow />
+      </Popover.Content>
+    </Popover.Portal>
+  );
+};

package/src/components/Plank/Plank.tsx

@@ -101,9 +101,9 @@ const PlankImpl = memo(
       }
     }, [id, scrollIntoView, layoutMode]);
 
-    const isSolo = layoutMode === 'solo' && part === 'solo';
+    const isSolo = layoutMode.startsWith('solo') && part === 'solo';
     const isAttendable =
-      (layoutMode === 'solo' && part.startsWith('solo')) || (layoutMode === 'deck' && part === 'deck');
+      (layoutMode.startsWith('solo') && part.startsWith('solo')) || (layoutMode === 'deck' && part === 'deck');
 
     const sizeAttrs = useMainSize();
 
@@ -116,7 +116,7 @@ const PlankImpl = memo(
           path,
           popoverAnchorId,
         },
-      [node, node?.data, path, popoverAnchorId, primary?.data],
+      [node, node?.data, path, popoverAnchorId, primary?.data, variant],
     );
 
     // TODO(wittjosiah): Change prop to accept a component.
@@ -131,6 +131,8 @@ const PlankImpl = memo(
       part === 'deck' && (companioned === 'companion' ? '!border-separator border-ie' : '!border-separator border-li'),
       part.startsWith('solo-') && 'row-span-2 grid-rows-subgrid min-is-0',
       part === 'solo-companion' && '!border-separator border-is',
+      layoutMode === 'solo--fullscreen' &&
+        '!transition-[margin-block-start,inline-size] -mbs-[--rail-action] has-[[data-plank-heading]:hover]:mbs-0',
     );
 
     return (
@@ -157,6 +159,7 @@ const PlankImpl = memo(
               id={id}
               part={part.startsWith('solo-') ? 'solo' : part}
               node={node}
+              layoutMode={layoutMode}
               deckEnabled={settings?.enableDeck}
               canIncrementStart={canIncrementStart}
               canIncrementEnd={canIncrementEnd}