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

package/src/components/Plank/Plank.tsx

@@ -3,6 +3,7 @@
 //
 
 import React, {
+  Fragment,
   type KeyboardEvent,
   type PropsWithChildren,
   memo,
@@ -30,117 +31,40 @@ import { PlankContentError, PlankError } from './PlankError';
 import { PlankHeading } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
 import { DeckCapabilities } from '../../capabilities';
-import { useMainSize, useCompanions } from '../../hooks';
+import { useMainSize } from '../../hooks';
 import { parseEntryId } from '../../layout';
-import { DeckAction, type LayoutMode, type ResolvedPart, type DeckSettingsProps } from '../../types';
+import { DeckAction, type LayoutMode, type Part, type ResolvedPart, type DeckSettingsProps } from '../../types';
+import { useCompanions } from '../../util';
 
 const UNKNOWN_ID = 'unknown_id';
 
-export type PlankProps = Pick<PlankComponentProps, 'layoutMode' | 'part' | 'path' | 'order' | 'active' | 'settings'> & {
+export type PlankProps = {
   id?: string;
   companionId?: string;
+  part: Part;
+  path?: string[];
+  order?: number;
+  active?: string[];
+  layoutMode: LayoutMode;
+  settings?: DeckSettingsProps;
 };
 
-// TODO(burdon): Factor out conditional rendering.
-//   Remove this wrapper component and render the entire set of planks in the deck with conditional visibility
-//   to obviate mounting and unmounting when switching between solo and companion mode?
-// NOTE(thure, in reply): Whether any surface should be rendered and hidden is a performance matter — remember that
-//  article surfaces contain full experiences, so being able to unmount them will yield relatively large performance
-//  benefits. I think where we anticipate users will definitely want to quickly switch between showing and hiding entire
-//  articles, over the (again probably large) performance benefit that unmounting them would confer, we can mount and
-//  hide them, but I think that scenario in its most unambiguous form is probably rare. You could extrapolate
-//  the scenario to include all “potential” planks such as companions, which we could keep mounted and hidden, but I
-//  don’t think the resulting performance would be acceptable. I think the real issue is “perceived performance” which
-//  has mitigations that are in between mounting and un-mounting since both of those have tradeoffs; we may need one or more
-//  “partially-mounted” experiences, like loading skeletons at the simple end, or screenshots of “sleeping” planks at
-//  the advanced end.
-
-/**
- * A Plank is the main container for surfaces within a Deck.
- * It may be paired with a companion plank that enables the user to select one of multiple companion surfaces.
- */
-export const Plank = memo(({ id = UNKNOWN_ID, companionId, ...props }: PlankProps) => {
-  const { graph } = useAppGraph();
-  const node = useNode(graph, id);
-  const companions = useCompanions(id);
-  const currentCompanion = companions.find(({ id }) => id === companionId);
-  const hasCompanion = !!(companionId && currentCompanion);
-
-  return (
-    <PlankContainer solo={props.part === 'solo'} companion={hasCompanion}>
-      <PlankComponent
-        id={id}
-        node={node}
-        companioned={hasCompanion ? 'primary' : undefined}
-        companions={hasCompanion ? [] : companions}
-        {...props}
-        {...(props.part === 'solo' ? { part: 'solo-primary' } : {})}
-      />
-      {hasCompanion && (
-        <PlankComponent
-          id={companionId}
-          node={currentCompanion}
-          primary={node}
-          companions={companions}
-          companioned='companion'
-          {...props}
-          {...(props.part === 'solo' ? { part: 'solo-companion' } : { order: (props.order ?? 0) + 1 })}
-        />
-      )}
-    </PlankContainer>
-  );
-});
-
-const PlankContainer = ({ children, solo, companion }: PropsWithChildren<{ solo: boolean; companion: boolean }>) => {
-  const sizeAttrs = useMainSize();
-  if (!solo) {
-    return children;
-  }
-
-  // TODO(burdon): Make resizable.
-  return (
-    <div
-      role='none'
-      className={mx('absolute inset-0 grid', companion && 'grid-cols-[1fr_1fr]', railGridHorizontal, mainIntrinsicSize)}
-      {...sizeAttrs}
-    >
-      {children}
-    </div>
-  );
-};
-
-type PlankComponentProps = {
-  layoutMode: LayoutMode;
+type PlankImplProps = Omit<PlankProps, 'id' | 'companionId' | 'part'> & {
   id: string;
   part: ResolvedPart;
-  path?: string[];
-  order?: number;
-  active?: string[];
-  // TODO(burdon): Change to role?
-  companioned?: 'primary' | 'companion';
   node?: Node;
+  companioned?: 'primary' | 'companion';
   primary?: Node;
   companions?: Node[];
-  settings?: DeckSettingsProps;
 };
 
-const PlankComponent = memo(
-  ({
-    layoutMode,
-    id,
-    part,
-    path,
-    order,
-    active,
-    companioned,
-    node,
-    primary,
-    companions,
-    settings,
-  }: PlankComponentProps) => {
+const PlankImpl = memo(
+  ({ id, node, part, path, order, active, layoutMode, companioned, primary, companions, settings }: PlankImplProps) => {
     const { dispatchPromise: dispatch } = useIntentDispatcher();
     const { deck, popoverAnchorId, scrollIntoView } = useCapability(DeckCapabilities.DeckState);
+    const rootElement = useRef<HTMLDivElement | null>(null);
     const canResize = layoutMode === 'deck';
+    const Root = part.startsWith('solo') ? 'article' : StackItem.Root;
 
     const attendableAttrs = useAttendableAttributes(primary?.id ?? id);
     const index = active ? active.findIndex((entryId) => entryId === id) : 0;
@@ -148,13 +72,10 @@ const PlankComponent = memo(
     const canIncrementStart = active && index !== undefined && index > 0 && length !== undefined && length > 1;
     const canIncrementEnd = active && index !== undefined && index < length - 1 && length !== undefined;
 
-    const rootElement = useRef<HTMLDivElement | null>(null);
-
     const { variant } = parseEntryId(id);
     const sizeKey = `${id.split('+')[0]}${variant ? `${ATTENDABLE_PATH_SEPARATOR}${variant}` : ''}`;
     const size = deck.plankSizing[sizeKey] as number | undefined;
-
-    const handleSizeChange = useCallback(
+    const setSize = useCallback(
       debounce((nextSize: number) => {
         return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: sizeKey, size: nextSize }));
       }, 200),
@@ -180,9 +101,9 @@ const PlankComponent = memo(
       }
     }, [id, scrollIntoView, layoutMode]);
 
-    const isSolo = layoutMode.startsWith('solo') && part === 'solo';
+    const isSolo = layoutMode === 'solo' && part === 'solo';
     const isAttendable =
-      (layoutMode.startsWith('solo') && part.startsWith('solo')) || (layoutMode === 'deck' && part === 'deck');
+      (layoutMode === 'solo' && part.startsWith('solo')) || (layoutMode === 'deck' && part === 'deck');
 
     const sizeAttrs = useMainSize();
 
@@ -195,13 +116,12 @@ const PlankComponent = memo(
           path,
           popoverAnchorId,
         },
-      [node, node?.data, path, popoverAnchorId, primary?.data, variant],
+      [node, node?.data, path, popoverAnchorId, primary?.data],
     );
 
     // TODO(wittjosiah): Change prop to accept a component.
     const placeholder = useMemo(() => <PlankLoading />, []);
 
-    const Root = part.startsWith('solo') ? 'article' : StackItem.Root;
     const className = mx(
       'attention-surface relative',
       isSolo && mainIntrinsicSize,
@@ -223,7 +143,7 @@ const PlankComponent = memo(
           : {
               item: { id },
               size,
-              onSizeChange: handleSizeChange,
+              onSizeChange: setSize,
               classNames: className,
               order,
               role: 'article',
@@ -237,7 +157,6 @@ const PlankComponent = memo(
               id={id}
               part={part.startsWith('solo-') ? 'solo' : part}
               node={node}
-              layoutMode={layoutMode}
               deckEnabled={settings?.enableDeck}
               canIncrementStart={canIncrementStart}
               canIncrementEnd={canIncrementEnd}
@@ -258,9 +177,54 @@ const PlankComponent = memo(
         ) : (
           <PlankError id={id} part={part} />
         )}
-
         {canResize && <StackItem.ResizeHandle />}
       </Root>
     );
   },
 );
+
+const SplitFrame = ({ children }: PropsWithChildren<{}>) => {
+  const sizeAttrs = useMainSize();
+  return (
+    <div
+      role='none'
+      className={mx('grid grid-cols-[1fr_1fr] absolute inset-0', railGridHorizontal, mainIntrinsicSize)}
+      {...sizeAttrs}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const Plank = ({ id = UNKNOWN_ID, ...props }: PlankProps) => {
+  const { graph } = useAppGraph();
+  const node = useNode(graph, id);
+  const companions = useCompanions(id);
+  const currentCompanion = companions.find(({ id }) => id === props.companionId);
+
+  if (props.companionId) {
+    const Root = props.part === 'solo' ? SplitFrame : Fragment;
+    return (
+      <Root>
+        <PlankImpl
+          id={id}
+          node={node}
+          companioned='primary'
+          {...props}
+          {...(props.part === 'solo' ? { part: 'solo-primary' } : {})}
+        />
+        <PlankImpl
+          id={props.companionId}
+          node={currentCompanion}
+          companioned='companion'
+          primary={node}
+          companions={companions}
+          {...props}
+          {...(props.part === 'solo' ? { part: 'solo-companion' } : { order: props.order! + 1 })}
+        />
+      </Root>
+    );
+  } else {
+    return <PlankImpl id={id} node={node} companions={companions} {...props} />;
+  }
+};

package/src/components/Plank/PlankControls.tsx

@@ -6,10 +6,18 @@ import React, { forwardRef, useCallback } from 'react';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, useTranslation } from '@dxos/react-ui';
+import {
+  Button,
+  ButtonGroup,
+  type ButtonGroupProps,
+  type ButtonProps,
+  Icon,
+  Tooltip,
+  useTranslation,
+} from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../../meta';
-import { DeckAction, type LayoutMode } from '../../types';
+import { DeckAction } from '../../types';
 
 export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
 
@@ -18,7 +26,6 @@ export type PlankCapabilities = {
   incrementEnd?: boolean;
   deck?: boolean;
   solo?: boolean;
-  fullscreen?: boolean;
   companion?: boolean;
 };
 
@@ -27,15 +34,27 @@ export type PlankControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
   variant?: 'hide-disabled' | 'default';
   close?: boolean | 'minify-start' | 'minify-end';
   capabilities: PlankCapabilities;
-  layoutMode?: LayoutMode;
+  isSolo?: boolean;
   pin?: 'start' | 'end' | 'both';
 };
 
 const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {
-  return <IconButton iconOnly label={label} icon={icon} size={5} variant='ghost' tooltipSide='bottom' {...props} />;
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button variant='ghost' {...props}>
+          <span className='sr-only'>{label}</span>
+          <Icon icon={icon} size={5} />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content side='bottom'>{label}</Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
 };
 
-const plankControlSpacing = 'pli-2';
+const plankControlSpacing = 'pli-2 plb-3';
 
 type PlankComplimentControlsProps = {
   primary?: string;
@@ -54,7 +73,8 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
         <PlankControl
           label={t('close companion label')}
           variant='ghost'
-          icon='ph--x--regular'
+          // icon='ph--minus--regular'
+          icon='ph--caret-left--regular'
           onClick={handleCloseCompanion}
           classNames={plankControlSpacing}
         />
@@ -68,51 +88,35 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
 // NOTE(thure): Pinning & unpinning are disabled indefinitely.
 export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
   (
-    { children, classNames, variant = 'default', capabilities, layoutMode, pin, close = false, onClick, ...props },
+    { children, classNames, variant = 'default', capabilities, isSolo, pin, close = false, onClick, ...props },
     forwardedRef,
   ) => {
     const { t } = useTranslation(DECK_PLUGIN);
     const buttonClassNames =
       variant === 'hide-disabled' ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
 
-    const layoutIsAnySolo = !!layoutMode?.startsWith('solo');
-
     return (
-      <ButtonGroup {...props} classNames={['app-no-drag !opacity-100', classNames]} ref={forwardedRef}>
-        {capabilities.deck ? (
+      <ButtonGroup {...props} classNames={['app-no-drag', classNames]} ref={forwardedRef}>
+        {/* {pin && !isSolo && ['both', 'start'].includes(pin) && (
+          <PlankControl
+            label={t('pin start label')}
+            variant='ghost'
+            classNames={buttonClassNames}
+            onClick={() => onClick?.('pin-start')}
+            icon='ph--caret-line-left--regular'
+          />
+        )} */}
+
+        {capabilities.deck && capabilities.solo && (
           <>
-            {capabilities.solo && (
-              <>
-                {layoutMode === 'solo' && (
-                  <PlankControl
-                    label={t('show fullscreen plank label')}
-                    classNames={buttonClassNames}
-                    icon='ph--corners-out--regular'
-                    onClick={() => onClick?.('solo--fullscreen')}
-                  />
-                )}
-                <PlankControl
-                  label={t(
-                    layoutMode === 'solo--fullscreen'
-                      ? 'exit fullscreen label'
-                      : layoutIsAnySolo
-                        ? 'show deck plank label'
-                        : 'show solo plank label',
-                  )}
-                  classNames={buttonClassNames}
-                  icon={
-                    layoutMode === 'solo--fullscreen'
-                      ? 'ph--corners-in--regular'
-                      : layoutIsAnySolo
-                        ? 'ph--arrows-in-line-horizontal--regular'
-                        : 'ph--arrows-out-line-horizontal--regular'
-                  }
-                  onClick={() => onClick?.(layoutMode === 'solo--fullscreen' ? 'solo--fullscreen' : 'solo')}
-                />
-              </>
-            )}
+            <PlankControl
+              label={isSolo ? t('show deck plank label') : t('show solo plank label')}
+              classNames={buttonClassNames}
+              icon={isSolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
+              onClick={() => onClick?.('solo')}
+            />
 
-            {!layoutIsAnySolo && (
+            {!isSolo && (
               <>
                 <PlankControl
                   label={t('increment start label')}
@@ -131,18 +135,18 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
               </>
             )}
           </>
-        ) : (
-          capabilities.fullscreen && (
-            <PlankControl
-              label={t(layoutMode === 'solo--fullscreen' ? 'exit fullscreen label' : 'show fullscreen plank label')}
-              classNames={buttonClassNames}
-              icon={layoutMode === 'solo--fullscreen' ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
-              onClick={() => onClick?.('solo--fullscreen')}
-            />
-          )
         )}
 
-        {close && !layoutIsAnySolo && (
+        {/* {pin && !isSolo && ['both', 'end'].includes(pin) && (
+          <PlankControl
+            label={t('pin end label')}
+            classNames={buttonClassNames}
+            icon='ph--caret-line-right--regular'
+            onClick={() => onClick?.('pin-end')}
+          />
+        )} */}
+
+        {close && !isSolo && (
           <PlankControl
             label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
             classNames={buttonClassNames}

package/src/components/Plank/PlankError.tsx

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react';
 
 import { type Node } from '@dxos/plugin-graph';
 import { useTranslation } from '@dxos/react-ui';
-import { descriptionMessage, mx } from '@dxos/react-ui-theme';
+import { descriptionText, mx } from '@dxos/react-ui-theme';
 
 import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
@@ -19,7 +19,11 @@ export const PlankContentError = ({ error }: { error?: Error }) => {
     <div role='none' className='overflow-auto p-8 attention-surface grid place-items-center'>
       <p
         role='alert'
-        className={mx(descriptionMessage, 'break-words rounded-lg p-8', errorString.length < 256 && 'text-lg')}
+        className={mx(
+          descriptionText,
+          'break-words border border-dashed border-separator rounded-lg p-8',
+          errorString.length < 256 && 'text-lg',
+        )}
       >
         {error ? errorString : t('error fallback message')}
       </p>

package/src/components/Plank/PlankHeading.tsx

@@ -9,21 +9,17 @@ import { type Node } from '@dxos/plugin-graph';
 import { Icon, IconButton, Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
-import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/react-ui-theme';
 
 import { PlankCompanionControls, PlankControls } from './PlankControls';
-import { useBreakpoints } from '../../hooks';
 import { parseEntryId } from '../../layout';
 import { DECK_PLUGIN } from '../../meta';
-import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart, type LayoutMode } from '../../types';
+import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart } from '../../types';
+import { useBreakpoints } from '../../util';
 import { soloInlinePadding } from '../fragments';
 
-const MAX_COMPANIONS = 5;
-
 export type PlankHeadingProps = {
   id: string;
   part: ResolvedPart;
-  layoutMode?: LayoutMode;
   node?: Node;
   deckEnabled?: boolean;
   canIncrementStart?: boolean;
@@ -49,7 +45,6 @@ export const PlankHeading = memo(
     pending,
     companioned,
     companions,
-    layoutMode,
     actions = [],
   }: PlankHeadingProps) => {
     const { t } = useTranslation(DECK_PLUGIN);
@@ -66,7 +61,7 @@ export const PlankHeading = memo(
     useEffect(() => {
       const frame = requestAnimationFrame(() => {
         // Load actions for the node.
-        node && graph.expand(node.id);
+        node && graph.actions(node);
       });
 
       return () => cancelAnimationFrame(frame);
@@ -79,7 +74,6 @@ export const PlankHeading = memo(
         solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'deck'),
         incrementStart: canIncrementStart,
         incrementEnd: canIncrementEnd,
-        fullscreen: !isCompanionNode,
         companion: !isCompanionNode && companions && companions.length > 0,
       }),
       [breakpoint, part, companions, canIncrementStart, canIncrementEnd, isCompanionNode, deckEnabled],
@@ -92,20 +86,17 @@ export const PlankHeading = memo(
       } else if (variant) {
         return [];
       } else {
-        return [actions, graph.getActions(node.id)].filter((a) => a.length > 0);
+        return [actions, graph.actions(node)].filter((a) => a.length > 0);
       }
     }, [actions, node, variant, graph]);
 
-    const handleAction = useCallback(
-      (action: StackItemSigilAction) => {
-        typeof action.data === 'function' && action.data?.({ parent: node, caller: DECK_PLUGIN });
-      },
-      [node],
-    );
+    const handleAction = useCallback((action: StackItemSigilAction) => {
+      typeof action.data === 'function' && action.data?.({ node: action as Node, caller: DECK_PLUGIN });
+    }, []);
 
     const handlePlankAction = useCallback(
       (eventType: DeckAction.PartAdjustment) => {
-        if (eventType.startsWith('solo')) {
+        if (eventType === 'solo') {
           return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
         } else if (eventType === 'close') {
           if (part === 'complementary') {
@@ -148,26 +139,18 @@ export const PlankHeading = memo(
     return (
       <StackItem.Heading
         classNames={[
-          'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout',
+          'plb-1 border-be border-separator items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 layout-contain',
           part === 'solo' ? soloInlinePadding : 'pli-1',
-          ...(layoutMode === 'solo--fullscreen'
-            ? [
-                hoverableControls,
-                hoverableFocusedWithinControls,
-                '[&>*]:transition-opacity [&>*]:opacity-[--controls-opacity] bg-transparent border-transparent transition-[background-color,border-color] hover-hover:hover:bg-headerSurface focus-within:bg-headerSurface hover-hover:hover:border-separator focus-within:border-separator',
-              ]
-            : []),
         ]}
-        data-plank-heading
       >
-        {companions && isCompanionNode /* TODO(thure): This is a tablist, it should be implemented as such. */ ? (
+        {companions && isCompanionNode ? (
           <div role='none' className='flex-1 min-is-0 overflow-x-auto scrollbar-thin flex gap-1'>
             {companions.map(({ id, properties: { icon, label } }) => (
               <IconButton
                 key={id}
                 data-id={id}
                 icon={icon}
-                iconOnly={companions.length > MAX_COMPANIONS && node?.id !== id}
+                iconOnly={node?.id !== id}
                 label={toLocalizedString(label, t)}
                 size={5}
                 variant={node?.id === id ? 'primary' : 'default'}
@@ -213,7 +196,7 @@ export const PlankHeading = memo(
         ) : (
           <PlankControls
             capabilities={capabilities}
-            layoutMode={layoutMode}
+            isSolo={part === 'solo'}
             close={part === 'complementary' ? 'minify-end' : true}
             onClick={handlePlankAction}
           />