@dxos/plugin-deck 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

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

@@ -2,8 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { invariant } from '@dxos/invariant';
 import {
   Button,
   ButtonGroup,
@@ -15,14 +17,16 @@ import {
 } from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../../meta';
-import { type DeckAction } from '../../types';
+import { DeckAction } from '../../types';
 
 export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
 
 export type PlankCapabilities = {
   incrementStart?: boolean;
   incrementEnd?: boolean;
+  deck?: boolean;
   solo?: boolean;
+  companion?: boolean;
 };
 
 export type PlankControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
@@ -50,16 +54,46 @@ const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> &
   );
 };
 
+const plankControlSpacing = 'pli-2 plb-3';
+
+type PlankComplimentControlsProps = {
+  primary?: string;
+};
+
+export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankComplimentControlsProps>(
+  ({ primary }, forwardedRef) => {
+    const { t } = useTranslation(DECK_PLUGIN);
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const handleCloseCompanion = useCallback(() => {
+      invariant(primary);
+      return dispatch(createIntent(DeckAction.ChangeCompanion, { primary, companion: null }));
+    }, []);
+    return (
+      <div ref={forwardedRef} className='contents app-no-drag'>
+        <PlankControl
+          label={t('close companion label')}
+          variant='ghost'
+          // icon='ph--minus--regular'
+          icon='ph--caret-left--regular'
+          onClick={handleCloseCompanion}
+          classNames={plankControlSpacing}
+        />
+      </div>
+    );
+  },
+);
+
 // TODO(wittjosiah): Duplicate of stack LayoutControls?
 //   Translations were to be duplicated between packages.
 // NOTE(thure): Pinning & unpinning are disabled indefinitely.
 export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
   (
-    { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, classNames, ...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 pli-2 plb-3' : 'pli-2 plb-3';
+    const buttonClassNames =
+      variant === 'hide-disabled' ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
 
     return (
       <ButtonGroup {...props} classNames={['app-no-drag', classNames]} ref={forwardedRef}>
@@ -73,31 +107,33 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
           />
         )} */}
 
-        {can.solo && (
-          <PlankControl
-            label={isSolo ? t('show deck plank label') : t('show solo plank label')}
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('solo')}
-            icon={isSolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
-          />
-        )}
-
-        {!isSolo && can.solo && (
+        {capabilities.deck && capabilities.solo && (
           <>
             <PlankControl
-              label={t('increment start label')}
-              disabled={!can.incrementStart}
+              label={isSolo ? t('show deck plank label') : t('show solo plank label')}
               classNames={buttonClassNames}
-              onClick={() => onClick?.('increment-start')}
-              icon='ph--caret-left--regular'
-            />
-            <PlankControl
-              label={t('increment end label')}
-              disabled={!can.incrementEnd}
-              classNames={buttonClassNames}
-              onClick={() => onClick?.('increment-end')}
-              icon='ph--caret-right--regular'
+              icon={isSolo ? 'ph--corners-in--regular' : 'ph--corners-out--regular'}
+              onClick={() => onClick?.('solo')}
             />
+
+            {!isSolo && (
+              <>
+                <PlankControl
+                  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')}
+                  disabled={!capabilities.incrementEnd}
+                  classNames={buttonClassNames}
+                  icon='ph--caret-right--regular'
+                  onClick={() => onClick?.('increment-end')}
+                />
+              </>
+            )}
           </>
         )}
 
@@ -105,8 +141,8 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
           <PlankControl
             label={t('pin end label')}
             classNames={buttonClassNames}
-            onClick={() => onClick?.('pin-end')}
             icon='ph--caret-line-right--regular'
+            onClick={() => onClick?.('pin-end')}
           />
         )} */}
 
@@ -114,7 +150,6 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
           <PlankControl
             label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
             classNames={buttonClassNames}
-            onClick={() => onClick?.('close')}
             data-testid='plankHeading.close'
             icon={
               close === 'minify-start'
@@ -123,6 +158,17 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
                   ? 'ph--caret-line-right--regular'
                   : 'ph--x--regular'
             }
+            onClick={() => onClick?.('close')}
+          />
+        )}
+
+        {capabilities.companion && (
+          <PlankControl
+            label={t('open companion label')}
+            classNames={buttonClassNames}
+            data-testid='plankHeading.companion'
+            icon='ph--square-split-horizontal--regular'
+            onClick={() => onClick?.('companion')}
           />
         )}
         {children}

package/src/components/{DeckLayout → Plank}/PlankError.tsx

@@ -8,7 +8,7 @@ import { type Node } from '@dxos/plugin-graph';
 import { useTranslation } from '@dxos/react-ui';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 
-import { NodePlankHeading, type NodePlankHeadingProps } from './NodePlankHeading';
+import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
 import { DECK_PLUGIN } from '../../meta';
 
@@ -38,7 +38,7 @@ export const PlankError = ({
   error,
 }: {
   id: string;
-  part: NodePlankHeadingProps['part'];
+  part: PlankHeadingProps['part'];
   node?: Node;
   error?: Error;
 }) => {
@@ -48,7 +48,7 @@ export const PlankError = ({
   }, []);
   return (
     <>
-      <NodePlankHeading id={id} part={part} node={node} pending={!timedOut} />
+      <PlankHeading id={id} part={part} node={node} pending={!timedOut} />
       {timedOut ? <PlankContentError error={error} /> : <PlankLoading />}
     </>
   );

package/src/components/Plank/PlankHeading.tsx

@@ -0,0 +1,207 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { Fragment, memo, useCallback, useEffect, useMemo, type MouseEvent } from 'react';
+
+import { createIntent, LayoutAction, Surface, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+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 { PlankCompanionControls, PlankControls } from './PlankControls';
+import { parseEntryId } from '../../layout';
+import { DECK_PLUGIN } from '../../meta';
+import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart } from '../../types';
+import { useBreakpoints } from '../../util';
+import { soloInlinePadding } from '../fragments';
+
+export type PlankHeadingProps = {
+  id: string;
+  part: ResolvedPart;
+  node?: Node;
+  deckEnabled?: boolean;
+  canIncrementStart?: boolean;
+  canIncrementEnd?: boolean;
+  popoverAnchorId?: string;
+  primaryId?: string;
+  pending?: boolean;
+  companioned?: 'primary' | 'companion';
+  companions?: Node[];
+  actions?: StackItemSigilAction[];
+};
+
+export const PlankHeading = memo(
+  ({
+    id,
+    part,
+    node,
+    deckEnabled,
+    canIncrementStart,
+    canIncrementEnd,
+    popoverAnchorId,
+    primaryId,
+    pending,
+    companioned,
+    companions,
+    actions = [],
+  }: PlankHeadingProps) => {
+    const { t } = useTranslation(DECK_PLUGIN);
+    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    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: DECK_PLUGIN }], t);
+
+    const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
+
+    useEffect(() => {
+      const frame = requestAnimationFrame(() => {
+        // Load actions for the node.
+        node && graph.actions(node);
+      });
+
+      return () => cancelAnimationFrame(frame);
+    }, [node]);
+
+    const attendableId = primaryId ?? id;
+    const capabilities = useMemo(
+      () => ({
+        deck: deckEnabled ?? true,
+        solo: breakpoint !== 'mobile' && (part === 'solo' || part === 'deck'),
+        incrementStart: canIncrementStart,
+        incrementEnd: canIncrementEnd,
+        companion: !isCompanionNode && companions && companions.length > 0,
+      }),
+      [breakpoint, part, companions, canIncrementStart, canIncrementEnd, isCompanionNode, deckEnabled],
+    );
+
+    const { variant } = parseEntryId(id);
+    const sigilActions = useMemo(() => {
+      if (!node) {
+        return undefined;
+      } else if (variant) {
+        return [];
+      } else {
+        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?.({ node: action as Node, caller: DECK_PLUGIN });
+    }, []);
+
+    const handlePlankAction = useCallback(
+      (eventType: DeckAction.PartAdjustment) => {
+        if (eventType === 'solo') {
+          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
+        } else if (eventType === 'close') {
+          if (part === 'complementary') {
+            return dispatch(
+              createIntent(LayoutAction.UpdateComplementary, {
+                part: 'complementary',
+                options: { state: 'collapsed' },
+              }),
+            );
+          } else {
+            return dispatch(
+              createIntent(LayoutAction.Close, { part: 'main', subject: [id], options: { state: false } }),
+            );
+          }
+        } else {
+          return dispatch(createIntent(DeckAction.Adjust, { type: eventType, id }));
+        }
+      },
+      [dispatch, id, part],
+    );
+
+    const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${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 dispatch(
+            createIntent(DeckAction.ChangeCompanion, {
+              primary: primaryId,
+              companion: tabId,
+            }),
+          );
+        }
+      },
+      [primaryId],
+    );
+
+    return (
+      <StackItem.Heading
+        classNames={[
+          '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',
+        ]}
+      >
+        {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={node?.id !== id}
+                label={toLocalizedString(label, t)}
+                size={5}
+                variant={node?.id === id ? 'primary' : 'default'}
+                onClick={handleTabClick}
+              />
+            ))}
+          </div>
+        ) : (
+          <>
+            <ActionRoot>
+              {node && sigilActions ? (
+                <StackItem.Sigil
+                  icon={icon}
+                  related={part === 'complementary'}
+                  attendableId={attendableId}
+                  triggerLabel={t('actions menu label')}
+                  actions={sigilActions}
+                  onAction={handleAction}
+                >
+                  <Surface role='menu-footer' data={{ subject: node.data }} />
+                </StackItem.Sigil>
+              ) : (
+                <StackItem.SigilButton>
+                  <span className='sr-only'>{label}</span>
+                  <Icon icon={icon} size={5} />
+                </StackItem.SigilButton>
+              )}
+            </ActionRoot>
+            <TextTooltip text={label} onlyWhenTruncating>
+              <StackItem.HeadingLabel
+                attendableId={attendableId}
+                related={part === 'complementary'}
+                {...(pending && { classNames: 'text-description' })}
+              >
+                {label}
+              </StackItem.HeadingLabel>
+            </TextTooltip>
+          </>
+        )}
+        {node && part !== 'complementary' && <Surface role='navbar-end' data={{ subject: node.data }} />}
+        {companioned === 'companion' ? (
+          <PlankCompanionControls primary={primaryId} />
+        ) : (
+          <PlankControls
+            capabilities={capabilities}
+            isSolo={part === 'solo'}
+            close={part === 'complementary' ? 'minify-end' : true}
+            onClick={handlePlankAction}
+          />
+        )}
+      </StackItem.Heading>
+    );
+  },
+);

package/src/components/Plank/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Plank';
+export * from './PlankControls';
+export * from './PlankError';
+export * from './PlankHeading';
+export * from './PlankLoading';

package/src/components/{DeckLayout → Sidebar}/ComplementarySidebar.tsx

@@ -3,83 +3,85 @@
 //
 
 import React, {
+  Fragment,
+  type MouseEvent,
   type PropsWithChildren,
   useCallback,
   useEffect,
   useMemo,
   useState,
-  type MouseEvent,
-  Fragment,
 } from 'react';
 
 import {
-  createIntent,
   LayoutAction,
   Surface,
+  createIntent,
   useAppGraph,
-  useCapabilities,
   useCapability,
   useIntentDispatcher,
 } from '@dxos/app-framework';
-import {
-  Main,
-  useTranslation,
-  toLocalizedString,
-  IconButton,
-  ScrollArea as NaturalScrollArea,
-  type Label,
-} from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
+import { type Node } from '@dxos/plugin-graph';
+import { Main, useTranslation, toLocalizedString, IconButton, type Label } from '@dxos/react-ui';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { byPosition } from '@dxos/util';
+import { byPosition, type Position } from '@dxos/util';
 
-import { PlankContentError } from './PlankError';
-import { PlankLoading } from './PlankLoading';
 import { ToggleComplementarySidebarButton } from './SidebarButton';
 import { DeckCapabilities } from '../../capabilities';
-import { useNode } from '../../hooks';
 import { DECK_PLUGIN } from '../../meta';
-import { type Panel } from '../../types';
+import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '../../types';
 import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
+import { PlankContentError, PlankLoading } from '../Plank';
+
+const label = ['complementary sidebar title', { ns: DECK_PLUGIN }] satisfies Label;
+
+const getCompanionId = (id: string) => {
+  const [_, companionId] = id.split(ATTENDABLE_PATH_SEPARATOR);
+  return companionId ?? 'never';
+};
+
+type DeckCompanion = Node<
+  any,
+  {
+    label: Label;
+    icon: string;
+    // TODO(burdon): Scroll area should be controlled by surface.
+    /** If true, the panel will not be wrapped in a scroll area. */
+    fixed?: boolean;
+    position?: Position;
+  }
+>;
+
+const useDeckCompanions = (): DeckCompanion[] => {
+  const { graph } = useAppGraph();
+  const companions = graph.nodes(graph.root, { type: DECK_COMPANION_TYPE }) as DeckCompanion[];
+  return companions.toSorted((a, b) => byPosition(a.properties, b.properties));
+};
 
 export type ComplementarySidebarProps = {
   current?: string;
 };
 
-const label = ['complementary sidebar title', { ns: DECK_PLUGIN }] satisfies Label;
-
 export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layout = useCapability(DeckCapabilities.MutableDeckState);
-  const attended = useAttended();
-  const { graph } = useAppGraph();
-  const node = useNode(graph, attended[0]);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
 
-  const panels = useCapabilities(DeckCapabilities.ComplementaryPanel);
-  const availablePanels = panels
-    .filter((panel) => {
-      if (!node || !panel.filter) {
-        return true;
-      }
-
-      return panel.filter(node);
-    })
-    .toSorted(byPosition);
-  const activePanelId = availablePanels.find((panel) => panel.id === current)?.id ?? availablePanels[0]?.id;
-  const [internalValue, setInternalValue] = useState(activePanelId);
+  const companions = useDeckCompanions();
+  const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current) ?? companions.at(0);
+  const activeId = getCompanionId(activeCompanion?.id ?? 'never');
+  const [internalValue, setInternalValue] = useState(activeId);
 
   useEffect(() => {
-    setInternalValue(activePanelId);
-  }, [activePanelId]);
+    setInternalValue(activeId);
+  }, [activeId]);
 
   const handleTabClick = useCallback(
     (event: MouseEvent) => {
       const nextValue = event.currentTarget.getAttribute('data-value') as string;
-      if (nextValue === activePanelId) {
+      if (nextValue === activeId) {
         layout.complementarySidebarState = layout.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
       } else {
         setInternalValue(nextValue);
@@ -87,21 +89,18 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
         void dispatch(createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', subject: nextValue }));
       }
     },
-    [layout, activePanelId, dispatch],
+    [layout, activeId, dispatch],
   );
 
   const data = useMemo(
     () =>
-      node && {
-        id: node.id,
-        subject: node.data,
-        workspace: layout.activeDeck,
-        popoverAnchorId: layout.popoverAnchorId,
+      activeCompanion && {
+        id: activeCompanion.id,
+        subject: activeCompanion.data,
       },
-    [node, layout.popoverAnchorId],
+    [activeCompanion?.id, activeCompanion?.data],
   );
 
-  // TODO(burdon): Scroll area should be controlled by surface.
   return (
     <Main.ComplementarySidebar
       label={label}
@@ -110,29 +109,23 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
         hoistStatusbar && 'block-end-[--statusbar-size]',
       ]}
     >
-      <Tabs.Root
-        orientation='vertical'
-        verticalVariant='stateless'
-        value={internalValue}
-        attendableId={attended[0]}
-        classNames='contents'
-      >
+      <Tabs.Root orientation='vertical' verticalVariant='stateless' value={internalValue} classNames='contents'>
         <div
           role='none'
           className='absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag'
         >
           <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto'>
-            {availablePanels.map((panel) => (
-              <Tabs.Tab key={panel.id} value={panel.id} asChild>
+            {companions.map((companion) => (
+              <Tabs.Tab key={getCompanionId(companion.id)} value={getCompanionId(companion.id)} asChild>
                 <IconButton
-                  label={toLocalizedString(panel.label, t)}
-                  icon={panel.icon}
+                  label={toLocalizedString(companion.properties.label, t)}
+                  icon={companion.properties.icon}
                   size={5}
                   iconOnly
                   tooltipSide='left'
-                  data-value={panel.id}
+                  data-value={getCompanionId(companion.id)}
                   variant={
-                    activePanelId === panel.id
+                    activeId === getCompanionId(companion.id)
                       ? layout.complementarySidebarState === 'expanded'
                         ? 'primary'
                         : 'default'
@@ -152,16 +145,16 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
             <ToggleComplementarySidebarButton />
           </div>
         </div>
-        {availablePanels.map((panel) => (
+        {companions.map((companion) => (
           <Tabs.Tabpanel
-            key={panel.id}
-            value={panel.id}
+            key={getCompanionId(companion.id)}
+            value={getCompanionId(companion.id)}
             classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]'
             {...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
           >
             <ComplementarySidebarPanel
-              panel={panel}
-              activePanelId={activePanelId}
+              companion={companion}
+              activeId={activeId}
               data={data}
               hoistStatusbar={hoistStatusbar}
             />
@@ -173,45 +166,36 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
 };
 
 type ComplementarySidebarPanelProps = {
-  panel: Panel;
-  activePanelId: string;
+  companion: DeckCompanion;
+  activeId: string;
   data?: {
     id: string;
     subject: any;
-    workspace: string;
-    popoverAnchorId?: string;
   };
   hoistStatusbar: boolean;
 };
 
 const ScrollArea = ({ children }: PropsWithChildren) => {
-  return (
-    <NaturalScrollArea.Root>
-      <NaturalScrollArea.Viewport>{children}</NaturalScrollArea.Viewport>
-      <NaturalScrollArea.Scrollbar orientation='vertical'>
-        <NaturalScrollArea.Thumb />
-      </NaturalScrollArea.Scrollbar>
-    </NaturalScrollArea.Root>
-  );
+  return <div className='flex flex-col grow overflow-x-hidden overflow-y-auto scrollbar-thin'>{children}</div>;
 };
 
-const ComplementarySidebarPanel = ({ panel, activePanelId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
+const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
   const { t } = useTranslation(DECK_PLUGIN);
 
-  if (panel.id !== activePanelId || !data) {
+  if (getCompanionId(companion.id) !== activeId && !data) {
     return null;
   }
 
-  const Wrapper = panel.fixed ? Fragment : ScrollArea;
+  const Wrapper = companion.properties.fixed ? Fragment : ScrollArea;
 
   return (
     <>
       <h2 className='flex items-center pli-2 border-separator border-be font-medium'>
-        {toLocalizedString(panel.label, t)}
+        {toLocalizedString(companion.properties.label, t)}
       </h2>
       <Wrapper>
         <Surface
-          role={`complementary--${activePanelId}`}
+          role={`deck-companion--${getCompanionId(companion.id)}`}
           data={data}
           fallback={PlankContentError}
           placeholder={<PlankLoading />}

package/src/components/Sidebar/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './ComplementarySidebar';
+export * from './Sidebar';
+export * from './SidebarButton';