@dxos/plugin-deck 0.8.1 → 0.8.2-main.f081794

package/src/capabilities/state.ts

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

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -4,15 +4,19 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface, useCapability } 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 topbar = layoutAppliesTopbar(breakpoint);
+  const { deck } = useCapability(DeckCapabilities.MutableDeckState);
+  const layoutMode = getMode(deck);
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
   return (
     <div
       role='none'

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,76 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework';
+import { Popover } from '@dxos/react-ui';
+
+import { DeckCapabilities } from '../../capabilities';
+
+export type DeckPopoverRootProps = PropsWithChildren<{}>;
+
+export const PopoverRoot = ({ children }: DeckPopoverRootProps) => {
+  const context = useCapability(DeckCapabilities.MutableDeckState);
+  const virtualRef = useRef<HTMLButtonElement | null>(null);
+  const [virtualIter, setVirtualIter] = useState(0);
+
+  // 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(() => {
+    context.popoverOpen ? setTimeout(() => setDelayedPopoverVisibility(true), 40) : setDelayedPopoverVisibility(false);
+  }, [context.popoverOpen]);
+
+  const handlePopoverOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen && (context.popoverAnchor || context.popoverAnchorId)) {
+        context.popoverOpen = true;
+      } else {
+        context.popoverOpen = false;
+        context.popoverAnchor = undefined;
+        context.popoverAnchorId = undefined;
+        context.popoverSide = undefined;
+      }
+    },
+    [context],
+  );
+
+  useEffect(() => {
+    virtualRef.current = context.popoverAnchor ?? null;
+    setVirtualIter((iter) => iter + 1);
+  }, [context.popoverAnchor]);
+
+  return (
+    <Popover.Root
+      modal
+      open={!!((context.popoverAnchor || context.popoverAnchorId) && delayedPopoverVisibility)}
+      onOpenChange={handlePopoverOpenChange}
+    >
+      {context.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
+      {children}
+    </Popover.Root>
+  );
+};
+
+export const PopoverContent = () => {
+  const context = useCapability(DeckCapabilities.MutableDeckState);
+  const handlePopoverClose = useCallback(() => {
+    context.popoverOpen = false;
+    context.popoverAnchor = undefined;
+    context.popoverAnchorId = undefined;
+    context.popoverSide = undefined;
+  }, [context]);
+
+  return (
+    <Popover.Portal>
+      <Popover.Content side={context.popoverSide} onEscapeKeyDown={handlePopoverClose}>
+        <Popover.Viewport>
+          <Surface role='popover' data={context.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();
 
@@ -157,6 +157,7 @@ const PlankImpl = memo(
               id={id}
               part={part.startsWith('solo-') ? 'solo' : part}
               node={node}
+              layoutMode={layoutMode}
               deckEnabled={settings?.enableDeck}
               canIncrementStart={canIncrementStart}
               canIncrementEnd={canIncrementEnd}