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

package/src/components/DeckLayout/DeckLayout.tsx

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

package/src/components/DeckLayout/Fullscreen.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface, useAppGraph } from '@dxos/app-framework';
+import { useNode } from '@dxos/plugin-graph';
+import { fixedInsetFlexLayout } from '@dxos/react-ui-theme';
+
+import { Fallback } from './Fallback';
+import { SURFACE_PREFIX } from './constants';
+
+export const Fullscreen = ({ id }: { id?: string }) => {
+  const { graph } = useAppGraph();
+  const fullScreenNode = useNode(graph, id);
+
+  return (
+    <div role='none' className={fixedInsetFlexLayout}>
+      <Surface
+        role='main'
+        limit={1}
+        fallback={Fallback}
+        data={{
+          subject: fullScreenNode?.data,
+          component: id?.startsWith(SURFACE_PREFIX) ? id.slice(SURFACE_PREFIX.length) : undefined,
+        }}
+      />
+    </div>
+  );
+};

package/src/components/Plank/Plank.stories.tsx

@@ -5,51 +5,39 @@
 import '@dxos-theme';
 
 import { type StoryObj, type Meta } from '@storybook/react';
-import React from 'react';
 
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { AttentionPlugin } from '@dxos/plugin-attention';
 import { GraphPlugin } from '@dxos/plugin-graph';
-import { Stack } from '@dxos/react-ui-stack';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { Plank, type PlankProps } from './Plank';
-import DeckStateFactory from '../../capabilities/state';
+import { Plank } from './Plank';
 import translations from '../../translations';
 
-const meta: Meta<PlankProps> = {
+// TODO(burdon): invariant violation: No capability found for dxos.org/plugin/deck/capability/state
+const meta: Meta<typeof Plank> = {
   title: 'plugins/plugin-deck/Plank',
   component: Plank,
-  render: (args) => {
-    return (
-      <Stack orientation='horizontal'>
-        <Plank {...args} />
-      </Stack>
-    );
-  },
   decorators: [
     withPluginManager({
-      plugins: [AttentionPlugin(), SettingsPlugin(), IntentPlugin(), GraphPlugin()],
-      capabilities: () => DeckStateFactory(),
+      plugins: [IntentPlugin(), GraphPlugin()],
     }),
     withTheme,
-    withLayout({ fullscreen: true }),
+    withLayout({ fullscreen: true, tooltips: true }),
   ],
   parameters: {
+    layout: 'centered',
     translations,
   },
 };
 
 export default meta;
 
-type Story = StoryObj<PlankProps>;
+type Story = StoryObj<typeof meta>;
 
-// TODO(burdon): Need to define surface provider?
 export const Default: Story = {
   args: {
     id: 'plank-1',
     part: 'solo',
-    layoutMode: 'deck',
   },
 };