@dxos/plugin-deck 0.6.14-staging.8758a12 → 0.6.14-staging.9b873ce

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -14,7 +14,7 @@ import {
 import { useGraph } from '@dxos/plugin-graph';
 import { Main } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
-import { deckGrid } from '@dxos/react-ui-deck';
+import { railGridHorizontal, StackContext } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
 
 import { NodePlankHeading } from './NodePlankHeading';
@@ -27,10 +27,9 @@ import { useLayout } from '../LayoutContext';
 export type ComplementarySidebarProps = {
   panels: Panel[];
   current?: string;
-  flatDeck?: boolean;
 };
 
-export const ComplementarySidebar = ({ panels, current, flatDeck }: ComplementarySidebarProps) => {
+export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarProps) => {
   const { popoverAnchorId } = useLayout();
   const attended = useAttended();
   const panel = (panels.find((p) => p.id === current) ?? panels[0])?.id;
@@ -63,27 +62,23 @@ export const ComplementarySidebar = ({ panels, current, flatDeck }: Complementar
   // TODO(burdon): Debug panel doesn't change when switching even though id has chagned.
   return (
     <Main.ComplementarySidebar>
-      <div role='none' className={mx(deckGrid, 'grid-cols-1 bs-full')}>
-        <NodePlankHeading
-          coordinate={coordinate}
-          node={node}
-          popoverAnchorId={popoverAnchorId}
-          flatDeck={flatDeck}
-          actions={actions}
-        />
-        <div className='row-span-2 divide-y divide-separator overflow-x-hidden overflow-y-scroll'>
-          {node && (
-            <Surface
-              key={id}
-              role={`complementary--${panel}`}
-              limit={1}
-              data={{ id, subject: node.properties.object ?? node.properties.space, popoverAnchorId }}
-              fallback={PlankContentError}
-              placeholder={<PlankLoading />}
-            />
-          )}
+      <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', separators: true, rail: true }}>
+        <div role='none' className={mx(railGridHorizontal, 'grid-cols-1 bs-full divide-y divide-separator')}>
+          <NodePlankHeading coordinate={coordinate} node={node} popoverAnchorId={popoverAnchorId} actions={actions} />
+          <div className='divide-y divide-separator overflow-x-hidden overflow-y-scroll'>
+            {node && (
+              <Surface
+                key={id}
+                role={`complementary--${panel}`}
+                limit={1}
+                data={{ id, subject: node.properties.object ?? node.properties.space, popoverAnchorId }}
+                fallback={PlankContentError}
+                placeholder={<PlankLoading />}
+              />
+            )}
+          </div>
         </div>
-      </div>
+      </StackContext.Provider>
     </Main.ComplementarySidebar>
   );
 };

package/src/components/DeckLayout/DeckLayout.tsx

@@ -4,12 +4,12 @@
 
 import { Sidebar as MenuIcon } from '@phosphor-icons/react';
 import { untracked } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
 
 import { type LayoutParts, Surface, type Toast as ToastSchema, firstIdInPart, usePlugin } from '@dxos/app-framework';
 import { type AttentionPluginProvides } from '@dxos/plugin-attention';
-import { Button, Dialog, Main, Popover, useOnTransition, useTranslation } from '@dxos/react-ui';
-import { Deck } from '@dxos/react-ui-deck';
+import { Button, Dialog, Main, Popover, useOnTransition, useTranslation, type MainProps } from '@dxos/react-ui';
+import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-stack';
 import { getSize, mainPaddingTransitions } from '@dxos/react-ui-theme';
 
 import { ActiveNode } from './ActiveNode';
@@ -29,25 +29,15 @@ import { useLayout } from '../LayoutContext';
 export type DeckLayoutProps = {
   layoutParts: LayoutParts;
   toasts: ToastSchema[];
-  flatDeck?: boolean;
   overscroll: Overscroll;
   showHints: boolean;
-  slots?: {
-    wallpaper?: { classNames?: string };
-  };
   onDismissToast: (id: string) => void;
 } & Pick<ComplementarySidebarProps, 'panels'>;
 
-export const DeckLayout = ({
-  layoutParts,
-  toasts,
-  flatDeck,
-  overscroll,
-  showHints,
-  slots,
-  panels,
-  onDismissToast,
-}: DeckLayoutProps) => {
+const PlankSeparator = ({ index }: { index: number }) =>
+  index > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: index * 2 }} /> : null;
+
+export const DeckLayout = ({ layoutParts, toasts, overscroll, showHints, panels, onDismissToast }: DeckLayoutProps) => {
   const context = useLayout();
   const {
     layoutMode,
@@ -64,16 +54,17 @@ export const DeckLayout = ({
   const { plankSizing } = useDeckContext();
   // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
   const attentionPlugin = usePlugin<AttentionPluginProvides>('dxos.org/plugin/attention');
-  const searchPlugin = usePlugin('dxos.org/plugin/search');
   const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
   const scrollLeftRef = useRef<number | null>();
   const deckRef = useRef<HTMLDivElement>(null);
 
+  const isSoloModeLoaded = layoutMode === 'solo' && Boolean(layoutParts.solo?.[0]);
+
   // Ensure the first plank is attended when the deck is first rendered.
   useEffect(() => {
     const attended = untracked(() => attentionPlugin?.provides.attention.attended ?? []);
-    const firstId = layoutMode === 'solo' ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
+    const firstId = isSoloModeLoaded ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
     if (attended.length === 0 && firstId) {
       // TODO(wittjosiah): Focusing the type button is a workaround.
       //   If the plank is directly focused on first load the focus ring appears.
@@ -113,18 +104,14 @@ export const DeckLayout = ({
     [layoutMode],
   );
 
-  const isEmpty = layoutParts.main?.length === 0 && layoutParts.solo?.length === 0;
+  const isEmpty = (layoutParts.main?.length ?? 0) === 0 && (layoutParts.solo?.length ?? 0) === 0;
 
   const padding = useMemo(() => {
     if (layoutMode === 'deck' && overscroll === 'centering') {
-      return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
+      return calculateOverscroll(layoutParts.main?.length ?? 0);
     }
     return {};
-  }, [layoutMode, overscroll, layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen]);
-
-  if (layoutMode === 'fullscreen') {
-    return <Fullscreen id={fullScreenSlug} />;
-  }
+  }, [layoutMode, overscroll, layoutParts.main]);
 
   return (
     <Popover.Root
@@ -141,127 +128,143 @@ export const DeckLayout = ({
     >
       <ActiveNode />
 
-      <Main.Root
-        navigationSidebarOpen={context.sidebarOpen}
-        onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
-        complementarySidebarOpen={context.complementarySidebarOpen}
-        onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
-      >
-        {/* Notch */}
-        <Main.Notch classNames='z-[21]'>
-          <Surface role='notch-start' />
-          <Button onClick={() => (context.sidebarOpen = !context.sidebarOpen)} variant='ghost' classNames='p-1'>
-            <span className='sr-only'>{t('open navigation sidebar label')}</span>
-            <MenuIcon weight='light' className={getSize(5)} />
-          </Button>
-          <Button
-            onClick={() => (context.complementarySidebarOpen = !context.complementarySidebarOpen)}
-            variant='ghost'
-            classNames='p-1'
-          >
-            <span className='sr-only'>{t('open complementary sidebar label')}</span>
-            <MenuIcon mirrored weight='light' className={getSize(5)} />
-          </Button>
-          <Surface role='notch-end' />
-        </Main.Notch>
+      {layoutMode === 'fullscreen' && <Fullscreen id={fullScreenSlug} />}
+
+      {layoutMode !== 'fullscreen' && (
+        <Main.Root
+          navigationSidebarOpen={context.sidebarOpen}
+          onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
+          complementarySidebarOpen={context.complementarySidebarOpen}
+          onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
+        >
+          {/* Notch */}
+          <Main.Notch classNames='z-[21]'>
+            <Surface role='notch-start' />
+            <Button onClick={() => (context.sidebarOpen = !context.sidebarOpen)} variant='ghost' classNames='p-1'>
+              <span className='sr-only'>{t('open navigation sidebar label')}</span>
+              <MenuIcon weight='light' className={getSize(5)} />
+            </Button>
+            <Surface role='notch-end' />
+          </Main.Notch>
 
-        {/* Left sidebar. */}
-        <Sidebar layoutParts={layoutParts} />
+          {/* Left sidebar. */}
+          <Sidebar layoutParts={layoutParts} />
 
-        {/* Right sidebar. */}
-        <ComplementarySidebar panels={panels} current={layoutParts.complementary?.[0].id} flatDeck={flatDeck} />
+          {/* Right sidebar. */}
+          <ComplementarySidebar panels={panels} current={layoutParts.complementary?.[0].id} />
 
-        {/* Dialog overlay to dismiss dialogs. */}
-        <Main.Overlay />
+          {/* Dialog overlay to dismiss dialogs. */}
+          <Main.Overlay />
 
-        {/* No content. */}
-        {isEmpty && (
-          <Main.Content handlesFocus>
-            <ContentEmpty />
-          </Main.Content>
-        )}
+          {/* No content. */}
+          {isEmpty && (
+            <Main.Content handlesFocus>
+              <ContentEmpty />
+            </Main.Content>
+          )}
 
-        {/* Solo/deck mode. */}
-        {!isEmpty && (
-          <Main.Content bounce classNames='grid block-end-[--statusbar-size]' handlesFocus>
-            <div role='none' className='relative'>
-              <Deck.Root
-                style={padding}
-                classNames={[
-                  !flatDeck && 'bg-deck',
-                  mainPaddingTransitions,
-                  'absolute inset-0',
-                  slots?.wallpaper?.classNames,
-                ]}
-                solo={layoutMode === 'solo'}
-                onScroll={handleScroll}
-                ref={deckRef}
+          {/* Solo/deck mode. */}
+          {!isEmpty && (
+            <Main.Content
+              bounce
+              classNames='grid block-end-[--statusbar-size]'
+              handlesFocus
+              style={
+                {
+                  '--dx-main-sidebarWidth': sidebarOpen ? 'var(--nav-sidebar-size)' : '0px',
+                  '--dx-main-complementaryWidth': complementarySidebarOpen
+                    ? 'var(--complementary-sidebar-size)'
+                    : '0px',
+                  '--dx-main-contentFirstWidth': `${plankSizing[layoutParts.main?.[0]?.id ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+                  '--dx-main-contentLastWidth': `${plankSizing[layoutParts.main?.[(layoutParts.main?.length ?? 1) - 1]?.id ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
+                } as MainProps['style']
+              }
+            >
+              <div
+                role='none'
+                className={!isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(isSoloModeLoaded && { inert: '' })}
+              >
+                <Stack
+                  orientation='horizontal'
+                  size='contain'
+                  classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
+                  onScroll={handleScroll}
+                  itemsCount={2 * (layoutParts.main?.length ?? 0) - 1}
+                  style={padding}
+                  ref={deckRef}
+                >
+                  {layoutParts.main?.map((layoutEntry, index) => (
+                    <Fragment key={layoutEntry.id}>
+                      <PlankSeparator index={index} />
+                      <Plank
+                        entry={layoutEntry}
+                        layoutParts={layoutParts}
+                        part='main'
+                        layoutMode={layoutMode}
+                        order={index * 2 + 1}
+                        last={index === layoutParts.main!.length - 1}
+                      />
+                    </Fragment>
+                  ))}
+                </Stack>
+              </div>
+              <div
+                role='none'
+                className={isSoloModeLoaded ? 'relative bg-deck overflow-hidden' : 'sr-only'}
+                {...(!isSoloModeLoaded && { inert: '' })}
               >
-                <Plank
-                  entry={layoutParts.solo?.[0]}
-                  layoutParts={layoutParts}
-                  part='solo'
-                  layoutMode={layoutMode}
-                  flatDeck={flatDeck}
-                  searchEnabled={!!searchPlugin}
-                />
-                {layoutParts.main?.map((layoutEntry) => (
-                  <Plank
-                    key={layoutEntry.id}
-                    entry={layoutEntry}
-                    layoutParts={layoutParts}
-                    part='main'
-                    layoutMode={layoutMode}
-                    flatDeck={flatDeck}
-                    searchEnabled={!!searchPlugin}
-                  />
-                ))}
-              </Deck.Root>
-            </div>
-          </Main.Content>
-        )}
+                <StackContext.Provider
+                  value={{ size: 'contain', orientation: 'horizontal', separators: true, rail: true }}
+                >
+                  <Plank entry={layoutParts.solo?.[0]} layoutParts={layoutParts} part='solo' layoutMode={layoutMode} />
+                </StackContext.Provider>
+              </div>
+            </Main.Content>
+          )}
 
-        {/* Footer status. */}
-        <StatusBar showHints={showHints} />
+          {/* Footer status. */}
+          <StatusBar showHints={showHints} />
+        </Main.Root>
+      )}
 
-        {/* Global popovers. */}
-        <Popover.Portal>
-          <Popover.Content
-            classNames='z-[60]'
-            onEscapeKeyDown={() => {
-              context.popoverOpen = false;
-              context.popoverAnchorId = undefined;
-            }}
-          >
-            <Popover.Viewport>
-              <Surface role='popover' data={popoverContent} />
-            </Popover.Viewport>
-            <Popover.Arrow />
-          </Popover.Content>
-        </Popover.Portal>
+      {/* Global popovers. */}
+      <Popover.Portal>
+        <Popover.Content
+          classNames='z-[60]'
+          onEscapeKeyDown={() => {
+            context.popoverOpen = false;
+            context.popoverAnchorId = undefined;
+          }}
+        >
+          <Popover.Viewport>
+            <Surface role='popover' data={popoverContent} />
+          </Popover.Viewport>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
 
-        {/* Global dialog. */}
-        <Dialog.Root open={dialogOpen} onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}>
-          <Dialog.Overlay blockAlign={dialogBlockAlign}>
-            <Surface role='dialog' data={dialogContent} />
-          </Dialog.Overlay>
-        </Dialog.Root>
+      {/* Global dialog. */}
+      <Dialog.Root open={dialogOpen} onOpenChange={(nextOpen) => (context.dialogOpen = nextOpen)}>
+        <Dialog.Overlay blockAlign={dialogBlockAlign}>
+          <Surface role='dialog' data={dialogContent} />
+        </Dialog.Overlay>
+      </Dialog.Root>
 
-        {/* Global toasts. */}
-        {toasts?.map((toast) => (
-          <Toast
-            {...toast}
-            key={toast.id}
-            onOpenChange={(open) => {
-              if (!open) {
-                onDismissToast(toast.id);
-              }
+      {/* Global toasts. */}
+      {toasts?.map((toast) => (
+        <Toast
+          {...toast}
+          key={toast.id}
+          onOpenChange={(open) => {
+            if (!open) {
+              onDismissToast(toast.id);
+            }
 
-              return open;
-            }}
-          />
-        ))}
-      </Main.Root>
+            return open;
+          }}
+        />
+      ))}
     </Popover.Root>
   );
 };

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -13,11 +13,13 @@ import {
   type LayoutCoordinate,
 } from '@dxos/app-framework';
 import { type Node, useGraph } from '@dxos/plugin-graph';
-import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
-import { PlankHeading, type PlankHeadingAction } from '@dxos/react-ui-deck';
+import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation, IconButton } from '@dxos/react-ui';
+import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 
+import { PlankControls } from './PlankControls';
 import { DECK_PLUGIN } from '../../meta';
+import { useLayout } from '../LayoutContext';
 
 export type NodePlankHeadingProps = {
   coordinate: LayoutCoordinate;
@@ -26,8 +28,7 @@ export type NodePlankHeadingProps = {
   canIncrementEnd?: boolean;
   popoverAnchorId?: string;
   pending?: boolean;
-  flatDeck?: boolean;
-  actions?: PlankHeadingAction[];
+  actions?: StackItemSigilAction[];
 };
 
 export const NodePlankHeading = memo(
@@ -38,9 +39,9 @@ export const NodePlankHeading = memo(
     canIncrementEnd,
     popoverAnchorId,
     pending,
-    flatDeck,
     actions = [],
   }: NodePlankHeadingProps) => {
+    const layoutContext = useLayout();
     const { t } = useTranslation(DECK_PLUGIN);
     const { graph } = useGraph();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
@@ -73,12 +74,10 @@ export const NodePlankHeading = memo(
     );
 
     return (
-      <PlankHeading.Root
-        {...((layoutPart !== 'main' || !flatDeck) && { classNames: 'pie-1 border-b border-separator' })}
-      >
+      <StackItem.Heading classNames='pie-1'>
         <ActionRoot>
           {node ? (
-            <PlankHeading.ActionsMenu
+            <StackItem.Sigil
               icon={icon}
               related={layoutPart === 'complementary'}
               attendableId={attendableId}
@@ -89,31 +88,32 @@ export const NodePlankHeading = memo(
               }
             >
               <Surface role='menu-footer' data={{ object: node.data }} />
-            </PlankHeading.ActionsMenu>
+            </StackItem.Sigil>
           ) : (
-            <PlankHeading.Button>
+            <StackItem.SigilButton>
               <span className='sr-only'>{label}</span>
               <Icon icon={icon} size={5} />
-            </PlankHeading.Button>
+            </StackItem.SigilButton>
           )}
         </ActionRoot>
         <TextTooltip text={label} onlyWhenTruncating>
-          <PlankHeading.Label
+          <StackItem.HeadingLabel
             attendableId={attendableId}
             related={layoutPart === 'complementary'}
             {...(pending && { classNames: 'text-description' })}
           >
             {label}
-          </PlankHeading.Label>
+          </StackItem.HeadingLabel>
         </TextTooltip>
         {node && layoutPart !== 'complementary' && (
           // TODO(Zan): What are we doing with layout coordinate here?
           <Surface role='navbar-end' direction='inline-reverse' data={{ object: node.data }} />
         )}
         {/* NOTE(thure): Pinning & unpinning are temporarily disabled */}
-        <PlankHeading.Controls
+        <PlankControls
           capabilities={capabilities}
           isSolo={layoutPart === 'solo'}
+          classNames='mx-1'
           onClick={(eventType) => {
             if (!layoutPart) {
               return;
@@ -154,8 +154,21 @@ export const NodePlankHeading = memo(
             }
           }}
           close={layoutPart === 'complementary' ? 'minify-end' : true}
-        />
-      </PlankHeading.Root>
+        >
+          {/* TODO(wittjosiah): This doesn't behave exactly the same as the rest of the button group. */}
+          {layoutPart !== 'complementary' && (
+            <IconButton
+              iconOnly
+              onClick={() => (layoutContext.complementarySidebarOpen = !layoutContext.complementarySidebarOpen)}
+              variant='ghost'
+              label={t('open complementary sidebar label')}
+              classNames='!p-1 -scale-x-100'
+              icon='ph--sidebar--regular'
+              tooltipZIndex='70'
+            />
+          )}
+        </PlankControls>
+      </StackItem.Heading>
     );
   },
 );