@dxos/plugin-deck 0.8.4-main.406dc2a → 0.8.4-main.4a85c3132b

package/src/components/Plank/Plank.tsx

@@ -2,6 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useFocusFinders } from '@fluentui/react-tabster';
 import React, {
   type KeyboardEvent,
   type PropsWithChildren,
@@ -12,34 +13,32 @@ import React, {
   useRef,
 } from 'react';
 
-import {
-  LayoutAction,
-  Surface,
-  createIntent,
-  useAppGraph,
-  useCapability,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { debounce } from '@dxos/async';
 import { type Node, useNode } from '@dxos/plugin-graph';
 import { ATTENDABLE_PATH_SEPARATOR, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
-import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
+import { mainIntrinsicSize, mx } from '@dxos/ui-theme';
 
-import { DeckCapabilities } from '../../capabilities';
-import { useCompanions, useMainSize } from '../../hooks';
+import { useCompanions, useDeckState, useMainSize, useSelectedCompanion } from '../../hooks';
 import { parseEntryId } from '../../layout';
-import { DeckAction, type DeckSettingsProps, type LayoutMode, type ResolvedPart } from '../../types';
+import { DeckOperation, type DeckSettingsProps, type LayoutMode, type ResolvedPart } from '../../types';
 
-import { PlankContentError, PlankError } from './PlankError';
+import { PlankError, PlankErrorFallback } from './PlankError';
 import { PlankHeading } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
 
 const UNKNOWN_ID = 'unknown_id';
 
+//
+// Plank
+//
+
 export type PlankProps = Pick<PlankComponentProps, 'layoutMode' | 'part' | 'path' | 'order' | 'active' | 'settings'> & {
   id?: string;
-  companionId?: string;
+  companionVariant?: string;
 };
 
 // TODO(burdon): Factor out conditional rendering.
@@ -50,22 +49,24 @@ export type PlankProps = Pick<PlankComponentProps, 'layoutMode' | 'part' | 'path
 //  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
+//  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
+//  "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) => {
+export const Plank = memo(({ id = UNKNOWN_ID, companionVariant, ...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);
+  const { companionId } = useSelectedCompanion(companions, companionVariant);
+  const resolvedCompanionId = companionVariant ? companionId : undefined;
+  const currentCompanion = companions.find(({ id }) => id === resolvedCompanionId);
+  const hasCompanion = !!(resolvedCompanionId && currentCompanion);
 
   return (
     <PlankContainer
@@ -83,7 +84,7 @@ export const Plank = memo(({ id = UNKNOWN_ID, companionId, ...props }: PlankProp
       />
       {hasCompanion && (
         <PlankComponent
-          id={companionId}
+          id={resolvedCompanionId}
           node={currentCompanion}
           primary={node}
           companions={companions}
@@ -96,12 +97,13 @@ export const Plank = memo(({ id = UNKNOWN_ID, companionId, ...props }: PlankProp
   );
 });
 
-const PlankContainer = ({
-  children,
-  solo,
-  companion,
-  encapsulate,
-}: PropsWithChildren<{ solo: boolean; companion: boolean; encapsulate: boolean }>) => {
+//
+// PlankContainer
+//
+
+type PlankContainerProps = PropsWithChildren<{ solo: boolean; companion: boolean; encapsulate: boolean }>;
+
+const PlankContainer = ({ children, solo, companion, encapsulate }: PlankContainerProps) => {
   const sizeAttrs = useMainSize();
   if (!solo) {
     return children;
@@ -111,10 +113,11 @@ const PlankContainer = ({
   return (
     <div
       role='none'
+      data-popover-collision-boundary={true}
       className={mx(
-        'absolute inset-[--main-spacing] grid',
-        encapsulate && 'border border-separator rounded overflow-hidden',
-        companion && 'grid-cols-[6fr_4fr]',
+        'absolute inset-(--main-spacing) grid',
+        encapsulate && 'border border-separator rounded-sm overflow-hidden',
+        companion && 'grid-cols-[6fr_4fr]', // TODO(burdon): Resize.
         railGridHorizontal,
         mainIntrinsicSize,
       )}
@@ -125,6 +128,10 @@ const PlankContainer = ({
   );
 };
 
+//
+// PlankComponent
+//
+
 type PlankComponentProps = {
   layoutMode: LayoutMode;
   id: string;
@@ -132,11 +139,10 @@ type PlankComponentProps = {
   path?: string[];
   order?: number;
   active?: string[];
-  // TODO(burdon): Change to role?
   companioned?: 'primary' | 'companion';
-  node?: Node;
-  primary?: Node;
-  companions?: Node[];
+  node?: Node.Node;
+  primary?: Node.Node;
+  companions?: Node.Node[];
   settings?: DeckSettingsProps;
 };
 
@@ -154,8 +160,10 @@ const PlankComponent = memo(
     companions,
     settings,
   }: PlankComponentProps) => {
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
-    const { deck, popoverAnchorId, scrollIntoView } = useCapability(DeckCapabilities.DeckState);
+    const { invokePromise } = useOperationInvoker();
+    const { state, deck } = useDeckState();
+    const { popoverAnchorId, scrollIntoView } = state;
+    const { findFirstFocusable } = useFocusFinders();
     const canResize = layoutMode === 'deck';
 
     const attentionAttrs = useAttentionAttributes(primary?.id ?? id);
@@ -172,15 +180,22 @@ const PlankComponent = memo(
 
     const handleSizeChange = useCallback(
       debounce((nextSize: number) => {
-        return dispatch(createIntent(DeckAction.UpdatePlankSize, { id: sizeKey, size: nextSize }));
+        return invokePromise(DeckOperation.UpdatePlankSize, { id: sizeKey, size: nextSize });
       }, 200),
-      [dispatch, sizeKey],
+      [invokePromise, sizeKey],
     );
 
-    // TODO(thure): Tabster’s focus group should handle moving focus to Main, but something is blocking it.
+    // TODO(thure): Tabster's focus group should handle moving focus to Main, but something is blocking it.
     const handleKeyDown = useCallback((event: KeyboardEvent) => {
-      if (event.target === event.currentTarget && event.key === 'Escape') {
-        rootElement.current?.closest('main')?.focus();
+      if (event.target === event.currentTarget) {
+        switch (event.key) {
+          case 'Escape':
+            rootElement.current?.closest('main')?.focus();
+            break;
+          case 'Enter':
+            rootElement.current && findFirstFocusable(rootElement.current)?.focus();
+            break;
+        }
       }
     }, []);
 
@@ -188,9 +203,9 @@ const PlankComponent = memo(
       if (scrollIntoView === id) {
         layoutMode === 'deck' && rootElement.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
         // Clear the scroll into view state once it has been actioned.
-        void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: undefined }));
+        void invokePromise(LayoutOperation.ScrollIntoView, { subject: undefined });
       }
-    }, [id, scrollIntoView, layoutMode]);
+    }, [id, scrollIntoView, layoutMode, invokePromise]);
 
     const isSolo = layoutMode.startsWith('solo') && part === 'solo';
     const isAttendable =
@@ -216,24 +231,27 @@ const PlankComponent = memo(
     const placeholder = useMemo(() => <PlankLoading />, []);
 
     const Root = part.startsWith('solo') ? 'article' : StackItem.Root;
+    const fullscreen = layoutMode === 'solo--fullscreen';
     const className = mx(
-      'attention-surface relative dx-focus-ring-inset-over-all density-coarse',
-      isSolo && mainIntrinsicSize,
-      isSolo && railGridHorizontal,
+      'dx-attention-surface relative dx-focus-ring-inset-over-all dx-density-coarse',
       isSolo && 'absolute inset-0',
+      isSolo && mainIntrinsicSize,
+      railGridHorizontal,
       part.startsWith('solo') && 'grid',
-      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',
+      part.startsWith('solo-') && 'grid-rows-subgrid row-span-2 min-w-0',
+      fullscreen && 'grid-rows-1',
+      part === 'deck' && (companioned === 'companion' ? 'border-separator! border-e' : 'border-separator! border-x'),
+      part === 'solo-companion' && 'border-separator! border-s',
       settings?.encapsulatedPlanks &&
         !part.startsWith('solo') &&
-        'mli-[--main-spacing] !border-separator border rounded overflow-hidden',
+        'mx-(--main-spacing) border-separator! border rounded-sm overflow-hidden',
     );
 
     return (
       <Root
         ref={rootElement}
         data-testid='deck.plank'
+        data-popover-collision-boundary={true}
         tabIndex={0}
         {...(part.startsWith('solo')
           ? ({ ...sizeAttrs, className } as any)
@@ -250,32 +268,33 @@ const PlankComponent = memo(
       >
         {node ? (
           <>
-            <PlankHeading
-              id={id}
-              part={part.startsWith('solo-') ? 'solo' : part}
-              node={node}
-              layoutMode={layoutMode}
-              deckEnabled={settings?.enableDeck}
-              canIncrementStart={canIncrementStart}
-              canIncrementEnd={canIncrementEnd}
-              popoverAnchorId={popoverAnchorId}
-              primaryId={primary?.id}
-              companioned={companioned}
-              companions={companions}
-            />
-            <Surface
+            {!fullscreen && (
+              <PlankHeading
+                id={id}
+                part={part.startsWith('solo-') ? 'solo' : part}
+                node={node}
+                layoutMode={layoutMode}
+                deckEnabled={settings?.enableDeck}
+                canIncrementStart={canIncrementStart}
+                canIncrementEnd={canIncrementEnd}
+                popoverAnchorId={popoverAnchorId}
+                primaryId={primary?.id}
+                companioned={companioned}
+                companions={companions}
+              />
+            )}
+            <Surface.Surface
               key={node.id}
               role='article'
               data={data}
               limit={1}
-              fallback={PlankContentError}
+              fallback={PlankErrorFallback}
               placeholder={placeholder}
             />
           </>
         ) : (
           <PlankError id={id} part={part} />
         )}
-
         {canResize && <StackItem.ResizeHandle />}
       </Root>
     );

package/src/components/Plank/PlankControls.tsx

@@ -4,12 +4,11 @@
 
 import React, { forwardRef, useCallback } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '../../meta';
-import { DeckAction, type LayoutMode } from '../../types';
+import { type DeckAction, DeckOperation, type LayoutMode } from '../../types';
 
 export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
 
@@ -32,10 +31,10 @@ export type PlankControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
 };
 
 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 <IconButton label={label} icon={icon} iconOnly variant='ghost' tooltipSide='bottom' {...props} />;
 };
 
-const plankControlSpacing = 'pli-2';
+const plankControlSpacing = 'px-2';
 
 type PlankComplimentControlsProps = {
   primary?: string;
@@ -44,13 +43,12 @@ type PlankComplimentControlsProps = {
 export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankComplimentControlsProps>(
   ({ primary }, forwardedRef) => {
     const { t } = useTranslation(meta.id);
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { invokePromise } = useOperationInvoker();
     const handleCloseCompanion = useCallback(() => {
-      invariant(primary);
-      return dispatch(createIntent(DeckAction.ChangeCompanion, { primary, companion: null }));
-    }, []);
+      return invokePromise(DeckOperation.ChangeCompanion, { companion: null });
+    }, [invokePromise]);
     return (
-      <div ref={forwardedRef} className='contents app-no-drag'>
+      <div ref={forwardedRef} className='contents dx-app-no-drag'>
         <PlankControl
           label={t('close companion label')}
           variant='ghost'
@@ -78,7 +76,7 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
     const layoutIsAnySolo = !!layoutMode?.startsWith('solo');
 
     return (
-      <ButtonGroup {...props} classNames={['app-no-drag !opacity-100', classNames]} ref={forwardedRef}>
+      <ButtonGroup {...props} classNames={['dx-app-no-drag opacity-100!', classNames]} ref={forwardedRef}>
         {capabilities.deck ? (
           <>
             {capabilities.solo && (

package/src/components/Plank/PlankError.tsx

@@ -5,26 +5,14 @@
 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 { ErrorFallback, type ErrorFallbackProps, useTranslation } from '@dxos/react-ui';
+import { descriptionMessage, mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
 
 import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
 
-export const PlankContentError = ({ error }: { error?: Error }) => {
-  const { t } = useTranslation(meta.id);
-  const errorString = error?.toString() ?? '';
-  return (
-    <div role='none' className='overflow-y-auto p-8 attention-surface grid place-items-center'>
-      <p role='alert' className={mx(descriptionMessage, 'break-all rounded-md p-4')}>
-        {error ? errorString : t('error fallback message')}
-      </p>
-    </div>
-  );
-};
-
 export const PlankError = ({
   id,
   part,
@@ -33,17 +21,43 @@ export const PlankError = ({
 }: {
   id: string;
   part: PlankHeadingProps['part'];
-  node?: Node;
+  node?: Node.Node;
   error?: Error;
 }) => {
   const [timedOut, setTimedOut] = useState(false);
   useEffect(() => {
-    setTimeout(() => setTimedOut(true), 5e3);
+    const timer = setTimeout(() => setTimedOut(true), 5_000);
+    return () => clearTimeout(timer);
   }, []);
+
   return (
     <>
       <PlankHeading id={id} part={part} node={node} pending={!timedOut} />
-      {timedOut ? <PlankContentError error={error} /> : <PlankLoading />}
+      {timedOut ? <PlankErrorFallback error={error} /> : <PlankLoading />}
     </>
   );
 };
+
+/**
+ * User facing error fallback.
+ */
+export const PlankErrorFallback = ({ error }: ErrorFallbackProps) => {
+  const { t } = useTranslation(meta.id);
+
+  if (process.env.NODE_ENV === 'development') {
+    return <ErrorFallback title='Plank Error' error={error} />;
+  } else {
+    const errorString = error?.toString() ?? '';
+    return (
+      <div
+        role='alert'
+        data-testid='plank-content-error'
+        className='dx-attention-surface overflow-y-auto p-8 grid place-items-center'
+      >
+        <p className={mx(descriptionMessage, 'break-all rounded-md p-4')}>
+          {error ? errorString : t('error fallback message')}
+        </p>
+      </div>
+    );
+  }
+};

package/src/components/Plank/PlankHeading.tsx

@@ -4,17 +4,19 @@
 
 import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
 
-import { LayoutAction, Surface, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
-import { type Node } from '@dxos/plugin-graph';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Graph, type Node, useActionRunner } 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 { hoverableControls, hoverableFocusedWithinControls } from '@dxos/ui-theme';
 
 import { useBreakpoints } from '../../hooks';
 import { parseEntryId } from '../../layout';
 import { meta } from '../../meta';
-import { DeckAction, type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '../../types';
+import { DeckOperation, type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '../../types';
 import { soloInlinePadding } from '../fragments';
 
 import { PlankCompanionControls, PlankControls } from './PlankControls';
@@ -25,7 +27,7 @@ export type PlankHeadingProps = {
   id: string;
   part: ResolvedPart;
   layoutMode?: LayoutMode;
-  node?: Node;
+  node?: Node.Node;
   deckEnabled?: boolean;
   canIncrementStart?: boolean;
   canIncrementEnd?: boolean;
@@ -33,7 +35,7 @@ export type PlankHeadingProps = {
   primaryId?: string;
   pending?: boolean;
   companioned?: 'primary' | 'companion';
-  companions?: Node[];
+  companions?: Node.Node[];
   actions?: StackItemSigilAction[];
 };
 
@@ -54,7 +56,8 @@ export const PlankHeading = memo(
     actions = [],
   }: PlankHeadingProps) => {
     const { t } = useTranslation(meta.id);
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { invokePromise, invokeSync } = useOperationInvoker();
+    const runAction = useActionRunner();
     const { graph } = useAppGraph();
     const breakpoint = useBreakpoints();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
@@ -68,7 +71,7 @@ export const PlankHeading = memo(
       const frame = requestAnimationFrame(() => {
         // Load actions for the node.
         if (node) {
-          void graph.expand(node.id);
+          void Graph.expand(graph, node.id, 'child');
         }
       });
 
@@ -97,42 +100,37 @@ export const PlankHeading = memo(
       } else {
         return [
           actions,
-          graph
-            .getActions(node.id)
-            .filter((a) => ['list-item', 'list-item-primary', 'heading-list-item'].includes(a.properties.disposition)),
+          Graph.getActions(graph, node.id).filter((a) =>
+            ['list-item', 'list-item-primary', 'heading-list-item'].includes(a.properties.disposition),
+          ),
         ].filter((a) => a.length > 0);
       }
     }, [actions, node, variant, graph]);
 
     const handleAction = useCallback(
       (action: StackItemSigilAction) => {
-        typeof action.data === 'function' && void action.data?.({ parent: node, caller: meta.id });
+        if (typeof action.data === 'function') {
+          void runAction(action as Node.Action, { parent: node, caller: meta.id });
+        }
       },
-      [node],
+      [node, runAction],
     );
 
     const handlePlankAction = useCallback(
-      (eventType: DeckAction.PartAdjustment) => {
+      (eventType: DeckOperation.PartAdjustment) => {
         if (eventType.startsWith('solo')) {
-          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
+          return invokePromise(DeckOperation.Adjust, { type: eventType, id });
         } else if (eventType === 'close') {
           if (part === 'complementary') {
-            return dispatch(
-              createIntent(LayoutAction.UpdateComplementary, {
-                part: 'complementary',
-                options: { state: 'collapsed' },
-              }),
-            );
+            return invokeSync(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
           } else {
-            return dispatch(
-              createIntent(LayoutAction.Close, { part: 'main', subject: [id], options: { state: false } }),
-            );
+            return invokeSync(LayoutOperation.Close, { subject: [id] });
           }
         } else {
-          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
+          return invokePromise(DeckOperation.Adjust, { type: eventType, id });
         }
       },
-      [dispatch, id, part],
+      [invokePromise, invokeSync, id, part],
     );
 
     const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover.Anchor : Fragment;
@@ -141,28 +139,24 @@ export const PlankHeading = memo(
       (event: MouseEvent) => {
         const target = (event.target as HTMLElement).closest('[data-id]') as HTMLElement | null;
         const tabId = target?.dataset?.id;
-        if (primaryId && tabId) {
-          void dispatch(
-            createIntent(DeckAction.ChangeCompanion, {
-              primary: primaryId,
-              companion: tabId,
-            }),
-          );
+        if (tabId) {
+          void invokePromise(DeckOperation.ChangeCompanion, { companion: tabId });
         }
       },
-      [primaryId],
+      [invokePromise],
     );
 
     return (
       <StackItem.Heading
         classNames={[
-          'plb-1 items-stretch gap-1 sticky inline-start-12 app-drag min-is-0 contain-layout density-coarse',
-          part === 'solo' ? soloInlinePadding : 'pli-1',
+          'py-1 items-stretch gap-1 sticky left-12 dx-app-drag min-w-0 dx-contain-layout dx-density-coarse',
+          part === 'solo' ? soloInlinePadding : 'px-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-subduedSeparator focus-within:border-subduedSeparator',
+                '*:transition-opacity *:opacity-(--controls-opacity) bg-transparent border-transparent transition-[background-color,border-color]',
+                'hover-hover:hover:bg-header-surface focus-within:bg-header-surface hover-hover:hover:border-subdued-separator focus-within:border-subdued-separator',
               ]
             : []),
         ]}
@@ -170,7 +164,7 @@ export const PlankHeading = memo(
       >
         {companions && isCompanionNode ? (
           /* TODO(thure): IMPORTANT: This is a tablist; it should be implemented as such. */
-          <div role='none' className='flex-1 min-is-0 overflow-x-auto scrollbar-none flex gap-1'>
+          <div role='none' className='flex-1 min-w-0 overflow-x-auto scrollbar-none flex gap-1'>
             {companions.map(({ id, properties: { icon, label } }) => (
               <IconButton
                 key={id}
@@ -178,7 +172,6 @@ export const PlankHeading = memo(
                 icon={icon}
                 iconOnly={companions.length > MAX_COMPANIONS && node?.id !== id}
                 label={toLocalizedString(label, t)}
-                size={5}
                 variant={node?.id === id ? 'primary' : 'ghost'}
                 onClick={handleTabClick}
               />
@@ -196,12 +189,12 @@ export const PlankHeading = memo(
                   actions={sigilActions}
                   onAction={handleAction}
                 >
-                  <Surface role='menu-footer' data={{ subject: node.data }} />
+                  <Surface.Surface role='menu-footer' data={{ subject: node.data }} />
                 </StackItem.Sigil>
               ) : (
                 <StackItem.SigilButton>
                   <span className='sr-only'>{label}</span>
-                  <Icon icon={icon} size={5} />
+                  <Icon icon={icon} />
                 </StackItem.SigilButton>
               )}
             </ActionRoot>
@@ -216,7 +209,7 @@ export const PlankHeading = memo(
             </TextTooltip>
           </>
         )}
-        {node && part !== 'complementary' && <Surface role='navbar-end' data={{ subject: node.data }} />}
+        {node && part !== 'complementary' && <Surface.Surface role='navbar-end' data={{ subject: node.data }} />}
         {companioned === 'companion' ? (
           <PlankCompanionControls primary={primaryId} />
         ) : (

package/src/components/Plank/PlankLoading.tsx

@@ -6,5 +6,5 @@ import React from 'react';
 
 // TODO(burdon): Show skeleton: https://github.com/dxos/dxos/issues/8259
 export const PlankLoading = () => {
-  return <div role='none' className='grid place-items-center attention-surface' />;
+  return <div role='none' className='grid place-items-center dx-attention-surface' />;
 };