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

package/src/components/Plank/Plank.tsx

@@ -13,19 +13,25 @@ import React, {
   useRef,
 } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { Surface, useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCompanionVariant } 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 { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
 import { mainIntrinsicSize, mx } from '@dxos/ui-theme';
 
-import { useCompanions, useDeckState, useMainSize } from '../../hooks';
-import { parseEntryId } from '../../layout';
-import { DeckOperation, type DeckSettingsProps, type LayoutMode, type ResolvedPart } from '../../types';
+import { useCompanions, useDeckState, useMainSize, useSelectedCompanion } from '../../hooks';
+import {
+  DeckOperation,
+  type DeckSettingsProps,
+  type LayoutMode,
+  PLANK_COMPANION_TYPE,
+  type ResolvedPart,
+} from '../../types';
 
-import { PlankContentError, PlankError } from './PlankError';
+import { PlankError, PlankErrorFallback } from './PlankError';
 import { PlankHeading } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
 
@@ -37,7 +43,7 @@ const UNKNOWN_ID = 'unknown_id';
 
 export type PlankProps = Pick<PlankComponentProps, 'layoutMode' | 'part' | 'path' | 'order' | 'active' | 'settings'> & {
   id?: string;
-  companionId?: string;
+  companionVariant?: string;
 };
 
 // TODO(burdon): Factor out conditional rendering.
@@ -58,12 +64,14 @@ export type PlankProps = Pick<PlankComponentProps, 'layoutMode' | 'part' | 'path
  * 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
@@ -81,7 +89,7 @@ export const Plank = memo(({ id = UNKNOWN_ID, companionId, ...props }: PlankProp
       />
       {hasCompanion && (
         <PlankComponent
-          id={companionId}
+          id={resolvedCompanionId}
           node={currentCompanion}
           primary={node}
           companions={companions}
@@ -112,8 +120,8 @@ const PlankContainer = ({ children, solo, companion, encapsulate }: PlankContain
       role='none'
       data-popover-collision-boundary={true}
       className={mx(
-        'absolute inset-[--main-spacing] grid',
-        encapsulate && 'border border-separator rounded overflow-hidden',
+        'absolute inset-(--main-spacing) grid',
+        encapsulate && 'border border-separator rounded-sm overflow-hidden',
         companion && 'grid-cols-[6fr_4fr]', // TODO(burdon): Resize.
         railGridHorizontal,
         mainIntrinsicSize,
@@ -171,8 +179,8 @@ const PlankComponent = memo(
 
     const rootElement = useRef<HTMLDivElement | null>(null);
 
-    const { variant } = parseEntryId(id);
-    const sizeKey = `${id.split('+')[0]}${variant ? `${ATTENDABLE_PATH_SEPARATOR}${variant}` : ''}`;
+    const variant = node?.type === PLANK_COMPANION_TYPE ? getCompanionVariant(id) : undefined;
+    const sizeKey = id.split('+')[0];
     const size = deck.plankSizing[sizeKey] as number | undefined;
 
     const handleSizeChange = useCallback(
@@ -200,7 +208,7 @@ 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 invokePromise(Common.LayoutOperation.ScrollIntoView, { subject: undefined });
+        void invokePromise(LayoutOperation.ScrollIntoView, { subject: undefined });
       }
     }, [id, scrollIntoView, layoutMode, invokePromise]);
 
@@ -230,18 +238,18 @@ const PlankComponent = memo(
     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',
+      '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.startsWith('solo-') && 'grid-rows-subgrid row-span-2 min-is-0',
+      part.startsWith('solo-') && 'grid-rows-subgrid row-span-2 min-w-0',
       fullscreen && 'grid-rows-1',
-      part === 'deck' && (companioned === 'companion' ? '!border-separator border-ie' : '!border-separator border-li'),
-      part === 'solo-companion' && '!border-separator border-is',
+      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 (
@@ -280,12 +288,12 @@ const PlankComponent = memo(
                 companions={companions}
               />
             )}
-            <Surface
+            <Surface.Surface
               key={node.id}
               role='article'
               data={data}
               limit={1}
-              fallback={PlankContentError}
+              fallback={PlankErrorFallback}
               placeholder={placeholder}
             />
           </>

package/src/components/Plank/PlankControls.tsx

@@ -4,8 +4,7 @@
 
 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';
@@ -35,7 +34,7 @@ const PlankControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> &
   return <IconButton label={label} icon={icon} iconOnly variant='ghost' tooltipSide='bottom' {...props} />;
 };
 
-const plankControlSpacing = 'pli-2';
+const plankControlSpacing = 'px-2';
 
 type PlankComplimentControlsProps = {
   primary?: string;
@@ -46,11 +45,10 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompliment
     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')}
           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,7 +5,7 @@
 import React, { useEffect, useState } from 'react';
 
 import { type Node } from '@dxos/plugin-graph';
-import { useTranslation } from '@dxos/react-ui';
+import { ErrorFallback, type ErrorFallbackProps, useTranslation } from '@dxos/react-ui';
 import { descriptionMessage, mx } from '@dxos/ui-theme';
 
 import { meta } from '../../meta';
@@ -13,18 +13,6 @@ 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,
@@ -38,12 +26,38 @@ export const PlankError = ({
 }) => {
   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

@@ -2,18 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
+import React, { CSSProperties, 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, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCompanionVariant } 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/ui-theme';
+import { hoverableControls, hoverableFocusedWithinControls, largeIconSize } 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';
@@ -70,7 +70,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');
         }
       });
 
@@ -90,7 +90,7 @@ export const PlankHeading = memo(
       [breakpoint, part, companions, canIncrementStart, canIncrementEnd, isCompanionNode, deckEnabled],
     );
 
-    const { variant } = parseEntryId(id);
+    const variant = isCompanionNode ? getCompanionVariant(id) : undefined;
     const sigilActions = useMemo(() => {
       if (!node) {
         return undefined;
@@ -99,8 +99,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);
       }
@@ -121,9 +121,9 @@ export const PlankHeading = memo(
           return invokePromise(DeckOperation.Adjust, { type: eventType, id });
         } else if (eventType === 'close') {
           if (part === 'complementary') {
-            return invokeSync(Common.LayoutOperation.UpdateComplementary, { state: 'collapsed' });
+            return invokeSync(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
           } else {
-            return invokeSync(Common.LayoutOperation.Close, { subject: [id] });
+            return invokeSync(LayoutOperation.Close, { subject: [id] });
           }
         } else {
           return invokePromise(DeckOperation.Adjust, { type: eventType, id });
@@ -132,41 +132,39 @@ export const PlankHeading = memo(
       [invokePromise, invokeSync, id, part],
     );
 
-    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) {
+          void invokePromise(DeckOperation.ChangeCompanion, { companion: tabId });
         }
       },
-      [primaryId, invokePromise],
+      [invokePromise],
     );
 
     return (
       <StackItem.Heading
+        data-plank-heading
+        style={largeIconSize}
         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',
               ]
             : []),
         ]}
-        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 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}
@@ -191,7 +189,7 @@ 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>
@@ -211,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' />;
 };

package/src/components/Sidebar/ComplementarySidebar.tsx

@@ -3,6 +3,7 @@
 //
 
 import React, {
+  CSSProperties,
   Fragment,
   type MouseEvent,
   type PropsWithChildren,
@@ -12,24 +13,17 @@ import React, {
   useState,
 } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { Surface, useOperationInvoker } from '@dxos/app-framework/react';
-import { IconButton, type Label, Main, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCompanionVariant } from '@dxos/app-toolkit';
+import { IconButton, type Label, Main, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { mx } from '@dxos/ui-theme';
-
-import {
-  type DeckCompanion,
-  getCompanionId,
-  useBreakpoints,
-  useDeckCompanions,
-  useDeckState,
-  useHoistStatusbar,
-} from '../../hooks';
+import { largeIconSize, mx } from '@dxos/ui-theme';
+
+import { type DeckCompanion, useBreakpoints, useDeckCompanions, useDeckState, useHoistStatusbar } from '../../hooks';
 import { meta } from '../../meta';
 import { getMode } from '../../types';
 import { layoutAppliesTopbar } from '../../util';
-import { PlankContentError, PlankLoading } from '../Plank';
+import { PlankErrorFallback, PlankLoading } from '../Plank';
 
 import { ToggleComplementarySidebarButton } from './SidebarButton';
 
@@ -49,8 +43,8 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
   const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
 
   const companions = useDeckCompanions();
-  const activeCompanion = companions.find((companion) => getCompanionId(companion.id) === current);
-  const activeId = activeCompanion && getCompanionId(activeCompanion.id);
+  const activeCompanion = companions.find((companion) => getCompanionVariant(companion.id) === current);
+  const activeId = activeCompanion && getCompanionVariant(activeCompanion.id);
   const [internalValue, setInternalValue] = useState(activeId);
 
   useEffect(() => {
@@ -61,14 +55,14 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
     (event: MouseEvent) => {
       const nextValue = event.currentTarget.getAttribute('data-value') as string;
       if (nextValue === activeId) {
-        updateState((s) => ({
-          ...s,
-          complementarySidebarState: s.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded',
+        updateState((state) => ({
+          ...state,
+          complementarySidebarState: state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded',
         }));
       } else {
         setInternalValue(nextValue);
-        updateState((s) => ({ ...s, complementarySidebarState: 'expanded' }));
-        invokeSync(Common.LayoutOperation.UpdateComplementary, { subject: nextValue });
+        updateState((state) => ({ ...state, complementarySidebarState: 'expanded' }));
+        invokeSync(LayoutOperation.UpdateComplementary, { subject: nextValue });
       }
     },
     [state.complementarySidebarState, activeId, invokeSync, updateState],
@@ -85,7 +79,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
 
   useEffect(() => {
     if (!activeId) {
-      invokeSync(Common.LayoutOperation.UpdateComplementary, { state: 'collapsed' });
+      invokeSync(LayoutOperation.UpdateComplementary, { state: 'collapsed' });
     }
   }, [activeId, invokeSync]);
 
@@ -93,30 +87,31 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
     <Main.ComplementarySidebar
       label={label}
       classNames={[
-        topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-        hoistStatusbar && 'block-end-[--statusbar-size]',
+        topbar && 'top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
+        hoistStatusbar && 'bottom-(--dx-statusbar-size)',
       ]}
     >
       <Tabs.Root orientation='vertical' verticalVariant='stateless' value={internalValue} classNames='contents'>
         <div
           role='none'
+          style={largeIconSize}
           className={mx(
-            '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-subduedSeparator',
-            'grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag',
+            'absolute z-[1] inset-y-0 end-0 !w-(--dx-r0-size)',
+            'py-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] border-s border-subdued-separator',
+            'grid grid-cols-1 grid-rows-[1fr_min-content] bg-toolbar-surface dx-contain-layout dx-app-drag',
           )}
         >
-          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto'>
+          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-(--dx-rail-action) p-1 gap-1 overflow-y-auto!'>
             {companions.map((companion) => (
-              <Tabs.Tab key={getCompanionId(companion.id)} value={getCompanionId(companion.id)} asChild>
+              <Tabs.Tab key={getCompanionVariant(companion.id)} value={getCompanionVariant(companion.id)} asChild>
                 <IconButton
                   label={toLocalizedString(companion.properties.label, t)}
                   icon={companion.properties.icon}
                   iconOnly
                   tooltipSide='left'
-                  data-value={getCompanionId(companion.id)}
+                  data-value={getCompanionVariant(companion.id)}
                   variant={
-                    activeId === getCompanionId(companion.id)
+                    activeId === getCompanionVariant(companion.id)
                       ? state.complementarySidebarState === 'expanded'
                         ? 'primary'
                         : 'default'
@@ -128,23 +123,23 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
             ))}
           </Tabs.Tablist>
           {!hoistStatusbar && (
-            <div role='none' className='grid grid-cols-1 auto-rows-[--rail-item] p-1 overflow-y-auto'>
-              <Surface role='status-bar--r0-footer' limit={1} />
+            <div role='none' className='grid grid-cols-1 auto-rows-(--dx-rail-item) p-1 overflow-y-auto'>
+              <Surface.Surface role='status-bar--r0-footer' limit={1} />
             </div>
           )}
-          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1'>
+          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-(--dx-rail-action) p-1'>
             <ToggleComplementarySidebarButton />
           </div>
         </div>
         {activeId &&
           companions.map((companion) => (
             <Tabs.Tabpanel
-              key={getCompanionId(companion.id)}
-              value={getCompanionId(companion.id)}
+              key={getCompanionVariant(companion.id)}
+              value={getCompanionVariant(companion.id)}
               classNames={[
                 'absolute data-[state="inactive"]:-z-[1] overflow-hidden',
-                '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)]',
+                'inset-y-0 start-0 w-[calc(100%-var(--dx-r0-size))] lg:w-(--dx-r1-size)',
+                'grid grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr_min-content] py-[env(safe-area-inset-top)]',
               ]}
               {...(state.complementarySidebarState !== 'expanded' && { inert: true })}
             >
@@ -174,48 +169,52 @@ type ComplementarySidebarPanelProps = {
 const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
   const { t } = useTranslation(meta.id);
 
-  if (getCompanionId(companion.id) !== activeId && !data) {
+  if (getCompanionVariant(companion.id) !== activeId && !data) {
     return null;
   }
 
-  const Wrapper = companion.properties.fixed ? Fragment : ScrollArea;
+  const Wrapper = companion.properties.fixed ? Fragment : ScrollAreaWrapper;
 
   return (
     <>
-      <div role='none' className='flex items-center p-1 gap-1 border-be border-subduedSeparator'>
+      <div role='none' className='flex items-center p-1 gap-1 border-b border-subdued-separator'>
         <IconButton
           label={toLocalizedString(companion.properties.label, t)}
           icon={companion.properties.icon}
           iconOnly
           tooltipSide='left'
-          data-value={getCompanionId(companion.id)}
-          classNames='bs-10 is-10'
+          data-value={getCompanionVariant(companion.id)}
+          classNames='h-10 w-10'
           variant='default'
         />
-        <div role='none' className='pli-1'>
+        <div role='none' className='px-1'>
           {toLocalizedString(companion.properties.label, t)}
         </div>
       </div>
       <Wrapper>
-        <Surface
-          role={`deck-companion--${getCompanionId(companion.id)}`}
+        <Surface.Surface
+          role={`deck-companion--${getCompanionVariant(companion.id)}`}
           data={data}
-          fallback={PlankContentError}
+          fallback={PlankErrorFallback}
           placeholder={<PlankLoading />}
         />
       </Wrapper>
       {!hoistStatusbar && (
         <div
           role='contentinfo'
-          className='flex flex-wrap justify-center items-center border-bs border-subduedSeparator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]'
+          className='flex flex-wrap justify-center items-center border-y border-subdued-separator pt-1 pb-[max(env(safe-area-inset-bottom),0.25rem)]'
         >
-          <Surface role='status-bar--r1-footer' limit={1} />
+          <Surface.Surface role='status-bar--r1-footer' limit={1} />
         </div>
       )}
     </>
   );
 };
 
-const ScrollArea = ({ children }: PropsWithChildren) => {
-  return <div className='flex flex-col grow overflow-x-hidden overflow-y-auto scrollbar-thin'>{children}</div>;
+const ScrollAreaWrapper = ({ children }: PropsWithChildren) => {
+  return (
+    <ScrollArea.Root thin orientation='vertical' classNames='grow'>
+      <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
 };

package/src/components/Sidebar/Sidebar.tsx

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
 import { type Label, Main } from '@dxos/react-ui';
 
 import { useBreakpoints, useDeckState, useHoistStatusbar } from '../../hooks';
@@ -32,11 +32,11 @@ export const Sidebar = () => {
       label={label}
       classNames={[
         'grid',
-        topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-        hoistStatusbar && 'block-end-[--statusbar-size]',
+        topbar && 'top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]',
+        hoistStatusbar && 'bottom-(--dx-statusbar-size)',
       ]}
     >
-      <Surface role='navigation' data={navigationData} limit={1} />
+      <Surface.Surface role='navigation' data={navigationData} limit={1} />
     </Main.NavigationSidebar>
   );
 };