@dxos/plugin-deck 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/{components → containers}/Plank/PlankControls.tsx

@@ -4,12 +4,12 @@
 
 import React, { forwardRef, useCallback } from 'react';
 
-import { useOperationInvoker } from '@dxos/app-framework/react';
-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 { type DeckAction, DeckOperation, type LayoutMode } from '../../types';
+import { meta } from '#meta';
+import { type DeckAction, type LayoutMode } from '#types';
+import { DeckOperation } from '#operations';
 
 export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
 
@@ -22,37 +22,27 @@ export type PlankCapabilities = {
   companion?: boolean;
 };
 
-export type PlankControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
-  onClick?: PlankControlHandler;
-  variant?: 'hide-disabled' | 'default';
-  close?: boolean | 'minify-start' | 'minify-end';
-  capabilities: PlankCapabilities;
-  layoutMode?: LayoutMode;
-  pin?: 'start' | 'end' | 'both';
-};
-
-const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {
-  return <IconButton label={label} icon={icon} iconOnly variant='ghost' tooltipSide='bottom' {...props} />;
-};
+//
+// Controls
+//
 
-const plankControlSpacing = 'pli-2';
+const plankControlSpacing = 'px-2';
 
-type PlankComplimentControlsProps = {
+export type PlankCompanionControlsProps = {
   primary?: string;
 };
 
-export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankComplimentControlsProps>(
+export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompanionControlsProps>(
   ({ primary }, forwardedRef) => {
     const { t } = useTranslation(meta.id);
     const { invokePromise } = useOperationInvoker();
     const handleCloseCompanion = useCallback(() => {
-      invariant(primary);
-      return invokePromise(DeckOperation.ChangeCompanion, { primary, companion: null });
-    }, [invokePromise, primary]);
+      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')}
+          label={t('close-companion.label')}
           variant='ghost'
           icon='ph--x--regular'
           onClick={handleCloseCompanion}
@@ -63,6 +53,23 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
   },
 );
 
+const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {
+  return <IconButton label={label} icon={icon} iconOnly variant='ghost' tooltipSide='bottom' {...props} />;
+};
+
+//
+// PlankControls
+//
+
+export type PlankControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
+  onClick?: PlankControlHandler;
+  variant?: 'hide-disabled' | 'default';
+  close?: boolean | 'minify-start' | 'minify-end';
+  capabilities: PlankCapabilities;
+  layoutMode?: LayoutMode;
+  pin?: 'start' | 'end' | 'both';
+};
+
 // TODO(wittjosiah): Duplicate of stack LayoutControls?
 //   Translations were to be duplicated between packages.
 // NOTE(thure): Pinning & unpinning are disabled indefinitely.
@@ -78,14 +85,14 @@ 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 && (
               <>
                 {layoutMode === 'solo' && (
                   <PlankControl
-                    label={t('show fullscreen plank label')}
+                    label={t('show-fullscreen-plank.label')}
                     classNames={buttonClassNames}
                     icon='ph--corners-out--regular'
                     onClick={() => onClick?.('solo--fullscreen')}
@@ -94,10 +101,10 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
                 <PlankControl
                   label={t(
                     layoutMode === 'solo--fullscreen'
-                      ? 'exit fullscreen label'
+                      ? 'exit-fullscreen.label'
                       : layoutIsAnySolo
-                        ? 'show deck plank label'
-                        : 'show solo plank label',
+                        ? 'show-deck-plank.label'
+                        : 'show-solo-plank.label',
                   )}
                   classNames={buttonClassNames}
                   icon={
@@ -115,14 +122,14 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
             {!layoutIsAnySolo && (
               <>
                 <PlankControl
-                  label={t('increment start label')}
+                  label={t('increment-start.label')}
                   disabled={!capabilities.incrementStart}
                   classNames={buttonClassNames}
                   icon='ph--caret-left--regular'
                   onClick={() => onClick?.('increment-start')}
                 />
                 <PlankControl
-                  label={t('increment end label')}
+                  label={t('increment-end.label')}
                   disabled={!capabilities.incrementEnd}
                   classNames={buttonClassNames}
                   icon='ph--caret-right--regular'
@@ -134,7 +141,7 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
         ) : (
           capabilities.fullscreen && (
             <PlankControl
-              label={t(layoutMode === 'solo--fullscreen' ? 'exit fullscreen label' : 'show fullscreen plank label')}
+              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')}
@@ -144,7 +151,7 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
 
         {close && !layoutIsAnySolo && (
           <PlankControl
-            label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
+            label={t(`${typeof close === 'string' ? 'minify' : 'close'}.label`)}
             classNames={buttonClassNames}
             data-testid='plankHeading.close'
             icon={
@@ -160,7 +167,7 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
 
         {capabilities.companion && (
           <PlankControl
-            label={t('open companion label')}
+            label={t('open-companion.label')}
             classNames={buttonClassNames}
             data-testid='plankHeading.companion'
             icon='ph--square-split-horizontal--regular'

package/src/containers/Plank/PlankError.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { TimeoutError } from '@dxos/errors';
+import { log } from '@dxos/log';
+import { type Node } from '@dxos/plugin-graph';
+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 PlankError = ({
+  id,
+  part,
+  node,
+  error: errorProp,
+}: {
+  id: string;
+  part: PlankHeadingProps['part'];
+  node?: Node.Node;
+  error?: Error;
+}) => {
+  const [timedOut, setTimedOut] = useState(false);
+  useEffect(() => {
+    const timer = setTimeout(() => setTimedOut(true), 5_000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const error = useMemo(() => {
+    if (timedOut) {
+      return new TimeoutError({ message: 'Timeout loading content' });
+    }
+
+    return errorProp;
+  }, [timedOut, errorProp]);
+
+  return (
+    <>
+      <PlankHeading id={id} part={part} node={node} pending={!timedOut} />
+      {timedOut ? <PlankErrorFallback error={error} /> : <PlankLoading />}
+    </>
+  );
+};
+
+/**
+ * User facing error fallback.
+ */
+export const PlankErrorFallback = ({ error }: ErrorFallbackProps) => {
+  const { t } = useTranslation(meta.id);
+
+  useEffect(() => {
+    if (error) {
+      log.error(error);
+    }
+  }, [error]);
+
+  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 → containers}/Plank/PlankHeading.tsx

@@ -4,20 +4,20 @@
 
 import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { Surface, useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
 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/ui-theme';
+import { hoverableControls, hoverableFocusedWithinControls, iconSize } from '@dxos/ui-theme';
 
-import { useBreakpoints } from '../../hooks';
-import { parseEntryId } from '../../layout';
-import { meta } from '../../meta';
-import { DeckOperation, type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '../../types';
-import { soloInlinePadding } from '../fragments';
+import { useBreakpoints } from '#hooks';
+import { meta } from '#meta';
+import { type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '#types';
+import { DeckOperation } from '#operations';
 
+import { usePlankContext } from './PlankRoot';
 import { PlankCompanionControls, PlankControls } from './PlankControls';
 
 const MAX_COMPANIONS = 5;
@@ -55,14 +55,13 @@ export const PlankHeading = memo(
     actions = [],
   }: PlankHeadingProps) => {
     const { t } = useTranslation(meta.id);
-    const { invokePromise, invokeSync } = useOperationInvoker();
+    const { graph, onAdjust, onChangeCompanion } = usePlankContext('PlankHeading');
     const runAction = useActionRunner();
-    const { graph } = useAppGraph();
     const breakpoint = useBreakpoints();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
     const label = pending
-      ? t('pending heading')
-      : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: meta.id }], t);
+      ? t('pending.heading')
+      : toLocalizedString(node?.properties?.label ?? ['plank-heading-fallback.label', { ns: meta.id }], t);
 
     const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
 
@@ -70,7 +69,7 @@ export const PlankHeading = memo(
       const frame = requestAnimationFrame(() => {
         // Load actions for the node.
         if (node) {
-          void Graph.expand(graph, node.id);
+          void Graph.expand(graph, node.id, 'child');
         }
       });
 
@@ -81,7 +80,7 @@ export const PlankHeading = memo(
     const capabilities = useMemo(
       () => ({
         deck: deckEnabled ?? true,
-        solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'deck'),
+        solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'multi'),
         incrementStart: canIncrementStart,
         incrementEnd: canIncrementEnd,
         fullscreen: !isCompanionNode,
@@ -90,7 +89,7 @@ export const PlankHeading = memo(
       [breakpoint, part, companions, canIncrementStart, canIncrementEnd, isCompanionNode, deckEnabled],
     );
 
-    const { variant } = parseEntryId(id);
+    const variant = isCompanionNode ? getLinkedVariant(id) : undefined;
     const sigilActions = useMemo(() => {
       if (!node) {
         return undefined;
@@ -99,8 +98,8 @@ export const PlankHeading = memo(
       } else {
         return [
           actions,
-          Graph.getActions(graph, node.id).filter((a) =>
-            ['list-item', 'list-item-primary', 'heading-list-item'].includes(a.properties.disposition),
+          Graph.getActions(graph, node.id).filter((action) =>
+            ['list-item', 'list-item-primary', 'heading-list-item'].includes(action.properties.disposition),
           ),
         ].filter((a) => a.length > 0);
       }
@@ -117,56 +116,47 @@ export const PlankHeading = memo(
 
     const handlePlankAction = useCallback(
       (eventType: DeckOperation.PartAdjustment) => {
-        if (eventType.startsWith('solo')) {
-          return invokePromise(DeckOperation.Adjust, { type: eventType, id });
-        } else if (eventType === 'close') {
-          if (part === 'complementary') {
-            return invokeSync(Common.LayoutOperation.UpdateComplementary, { state: 'collapsed' });
-          } else {
-            return invokeSync(Common.LayoutOperation.Close, { subject: [id] });
-          }
-        } else {
-          return invokePromise(DeckOperation.Adjust, { type: eventType, id });
-        }
+        onAdjust?.(id, eventType);
       },
-      [invokePromise, invokeSync, id, part],
+      [onAdjust, id],
     );
 
-    const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover.Anchor : Fragment;
+    const ActionRoot = node && popoverAnchorId === `${meta.id}:${node.id}` ? Popover.Anchor : Fragment;
 
     const handleTabClick = useCallback(
       (event: MouseEvent) => {
         const target = (event.target as HTMLElement).closest('[data-id]') as HTMLElement | null;
         const tabId = target?.dataset?.id;
-        if (primaryId && tabId) {
-          void invokePromise(DeckOperation.ChangeCompanion, {
-            primary: primaryId,
-            companion: tabId,
-          });
+        if (tabId) {
+          onChangeCompanion?.(tabId);
         }
       },
-      [primaryId, invokePromise],
+      [onChangeCompanion],
     );
 
     return (
       <StackItem.Heading
+        data-tauri-drag-region
+        data-plank-heading
+        style={iconSize(5)}
         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'
+            ? 'ps-[calc(env(safe-area-inset-left)+.25rem)] pe-[calc(env(safe-area-inset-right)+.25rem)]'
+            : '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',
               ]
             : []),
         ]}
-        data-plank-heading
       >
         {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 data-tauri-drag-region 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}
@@ -187,11 +177,11 @@ export const PlankHeading = memo(
                   icon={icon}
                   related={part === 'complementary'}
                   attendableId={attendableId}
-                  triggerLabel={t('actions menu label')}
+                  triggerLabel={t('actions-menu.label')}
                   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>
@@ -202,6 +192,7 @@ export const PlankHeading = memo(
             </ActionRoot>
             <TextTooltip text={label} onlyWhenTruncating>
               <StackItem.HeadingLabel
+                data-tauri-drag-region
                 attendableId={attendableId}
                 related={part === 'complementary'}
                 {...(pending && { classNames: 'text-description' })}
@@ -211,7 +202,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 → containers}/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' />;
 };

package/src/containers/Plank/PlankRoot.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+import { type Graph } from '@dxos/plugin-graph';
+
+import { type DeckOperation } from '#operations';
+import { type LayoutMode, type PlankSizing, type ResolvedPart, type Settings } from '#types';
+import React, { PropsWithChildren } from 'react';
+
+const PLANK_NAME = 'Plank';
+
+export type PlankContextValue = {
+  /** The application graph. */
+  graph: Graph.ExpandableGraph;
+  /** Which part of the layout this plank occupies. */
+  part: ResolvedPart;
+  /** Current layout mode. */
+  layoutMode: LayoutMode;
+  /** Deck settings. */
+  settings?: Settings.Settings;
+  /** Popover anchor ID for heading menus. */
+  popoverAnchorId?: string;
+  /** ID of plank that should be scrolled into view. */
+  scrollIntoView?: string;
+  /** Persisted plank sizes keyed by plank ID. */
+  plankSizing?: PlankSizing;
+  /** Callback for plank adjustments (close, solo, increment, companion). */
+  onAdjust?: (id: string, type: DeckOperation.PartAdjustment) => void;
+  /** Callback for plank resize. */
+  onResize?: (id: string, size: number) => void;
+  /** Callback to clear scroll-into-view state. */
+  onScrollIntoView?: (id?: string) => void;
+  /** Callback to change the companion. */
+  onChangeCompanion?: (companion: string | null) => void;
+};
+
+export const [PlankProvider, usePlankContext] = createContext<PlankContextValue>(PLANK_NAME);
+
+export type PlankRootProps = PropsWithChildren<PlankContextValue>;
+
+/**
+ * Headless root that provides plank context.
+ */
+export const PlankRoot = ({ children, ...context }: PlankRootProps) => {
+  return <PlankProvider {...context}>{children}</PlankProvider>;
+};

package/src/{components → containers}/Plank/index.ts

@@ -3,7 +3,5 @@
 //
 
 export * from './Plank';
-export * from './PlankControls';
 export * from './PlankError';
-export * from './PlankHeading';
 export * from './PlankLoading';