@dxos/plugin-deck 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/src/containers/DeckLayout/DeckLayout.stories.tsx

@@ -19,11 +19,12 @@ import { random } from '@dxos/random';
 import { useAsyncEffect } from '@dxos/react-hooks';
 import { Icon, List, ListItem, Panel } from '@dxos/react-ui';
 import { linkedSegment } from '@dxos/react-ui-attention';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 
 import { OperationHandler } from '#capabilities';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 import {
   DeckCapabilities,
   type EphemeralDeckState,
@@ -34,7 +35,6 @@ import {
   PLANK_COMPANION_TYPE,
 } from '#types';
 
-import { translations } from '../../translations';
 import { DeckLayout } from './DeckLayout';
 
 random.seed(1234);
@@ -188,12 +188,14 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
                 <Panel.Root>
                   <Panel.Content className='grid grid-rows-[min-content_1fr]'>
                     {attendableId && <ItemComponent id={attendableId} />}
-                    <Json.Root data={subject}>
-                      <Json.Content>
-                        <Json.Filter />
-                        <Json.Data />
-                      </Json.Content>
-                    </Json.Root>
+                    <Syntax.Root data={subject}>
+                      <Syntax.Content>
+                        <Syntax.Filter />
+                        <Syntax.Viewport>
+                          <Syntax.Code />
+                        </Syntax.Viewport>
+                      </Syntax.Content>
+                    </Syntax.Root>
                   </Panel.Content>
                 </Panel.Root>
               );
@@ -210,16 +212,18 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
               }
 
               return (
-                <Json.Root
+                <Syntax.Root
                   data={{
                     primaryItem: companionTo,
                     companion: { data: subject, properties, variant },
                   }}
                 >
-                  <Json.Content>
-                    <Json.Data />
-                  </Json.Content>
-                </Json.Root>
+                  <Syntax.Content>
+                    <Syntax.Viewport>
+                      <Syntax.Code />
+                    </Syntax.Viewport>
+                  </Syntax.Content>
+                </Syntax.Root>
               );
             },
           }),

package/src/containers/DeckLayout/Dialog.tsx

@@ -5,6 +5,7 @@
 import React, { useCallback } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
 
 import { useDeckState } from '#hooks';
@@ -30,7 +31,7 @@ export const Dialog = () => {
       {dialogBlockAlign === 'end' ? (
         // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
         <Surface.Surface
-          role='dialog'
+          type={AppSurface.Dialog}
           data={dialogContent ?? undefined}
           limit={1}
           fallback={PlankErrorFallback}
@@ -38,7 +39,12 @@ export const Dialog = () => {
         />
       ) : (
         <Overlay blockAlign={dialogBlockAlign} classNames={dialogOverlayClasses} style={dialogOverlayStyle}>
-          <Surface.Surface role='dialog' data={dialogContent ?? undefined} limit={1} fallback={PlankErrorFallback} />
+          <Surface.Surface
+            type={AppSurface.Dialog}
+            data={dialogContent ?? undefined}
+            limit={1}
+            fallback={PlankErrorFallback}
+          />
         </Overlay>
       )}
     </Root>

package/src/containers/DeckLayout/Popover.tsx

@@ -8,7 +8,7 @@ import * as Option from 'effect/Option';
 import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Annotation, Obj } from '@dxos/echo';
 import {
   Card,
@@ -122,8 +122,8 @@ export const PopoverContent = () => {
       >
         <Popover.Viewport>
           {/* Base popover */}
-          {state.popoverKind === 'base' && (
-            <Surface.Surface role='popover' data={state.popoverContent ?? undefined} limit={1} />
+          {state.popoverKind === 'base' && state.popoverContent && 'component' in state.popoverContent && (
+            <Surface.Surface type={AppSurface.Popover} data={state.popoverContent} limit={1} />
           )}
 
           {/* Card popover */}
@@ -147,7 +147,9 @@ export const PopoverContent = () => {
                   </Card.IconBlock>
                 </Card.Toolbar>
 
-                <Surface.Surface role='card--content' data={state.popoverContent ?? undefined} limit={1} />
+                {state.popoverContent && 'subject' in state.popoverContent && (
+                  <Surface.Surface type={AppSurface.Card} data={state.popoverContent} limit={1} />
+                )}
               </Card.Root>
             </Menu.Root>
           )}

package/src/containers/Plank/Plank.stories.tsx

@@ -14,14 +14,14 @@ import { corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { Main } from '@dxos/react-ui';
 import { StackContext } from '@dxos/react-ui-stack';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { Loading } from '@dxos/react-ui/testing';
 import { Organization } from '@dxos/types';
 
 import { DeckSettings, DeckState } from '#capabilities';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 
-import { translations } from '../../translations';
 import { Plank } from './Plank';
 
 const TestPlugin = Plugin.define(pluginMeta).pipe(
@@ -51,11 +51,13 @@ const storySurfaceExtension = Capability.contributes(
       }
 
       return (
-        <Json.Root data={subject}>
-          <Json.Content>
-            <Json.Data />
-          </Json.Content>
-        </Json.Root>
+        <Syntax.Root data={subject}>
+          <Syntax.Content>
+            <Syntax.Viewport>
+              <Syntax.Code />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
       );
     },
   }),

package/src/containers/Plank/PlankComponent.tsx

@@ -6,12 +6,12 @@ import { useFocusFinders } from '@fluentui/react-tabster';
 import React, { type KeyboardEvent, memo, useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { debounce } from '@dxos/async';
 import { type Node } from '@dxos/plugin-graph';
 import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
+import { StackItem, type StackItemSize, railGridHorizontal } from '@dxos/react-ui-stack';
 import { mainIntrinsicSize, mx } from '@dxos/ui-theme';
 
 import { useMainSize } from '#hooks';
@@ -22,6 +22,32 @@ import { PlankHeading } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
 import { PlankRootProps, usePlankContext } from './PlankRoot';
 
+/**
+ * JS-based smooth scroll that won't be interrupted by MutationObserver or layout changes.
+ */
+const smoothScrollTo = (element: HTMLElement, target: number, duration: number) => {
+  const start = element.scrollLeft;
+  const distance = target - start;
+  const startTime = performance.now();
+
+  const step = (currentTime: number) => {
+    const elapsed = currentTime - startTime;
+    const progress = Math.min(elapsed / duration, 1);
+    // Ease-out cubic.
+    const eased = 1 - Math.pow(1 - progress, 3);
+    element.scrollLeft = start + distance * eased;
+    if (progress < 1) {
+      requestAnimationFrame(step);
+    }
+  };
+
+  requestAnimationFrame(step);
+};
+
+// NOTE: Calibrated to show PLANK + COMPANION on MBP 16" screen.
+export const DEFAULT_SIZE = 48 satisfies StackItemSize;
+export const DEFAULT_COMPANION_SIZE = 35 satisfies StackItemSize;
+
 export type PlankComponentProps = Pick<PlankRootProps, 'part'> & {
   id: string;
   path?: string[];
@@ -40,25 +66,29 @@ export const PlankComponent = memo(
 
     const canResize = layoutMode === 'multi';
     const { findFirstFocusable } = useFocusFinders();
+    const isCompanion = companioned === 'companion';
     const attentionAttrs = useAttentionAttributes(primary?.id ?? id);
-    const orderId = companioned === 'companion' ? primary?.id : id;
+    const orderId = isCompanion ? primary?.id : id;
     const index = orderId && active ? active.findIndex((entryId) => entryId === orderId) : -1;
     const length = active?.length ?? 1;
     const isOrdered = !!active && index >= 0;
     const canIncrementStart = isOrdered && index > 0;
     const canIncrementEnd = isOrdered && index < length - 1;
-
     const rootElement = useRef<HTMLDivElement | null>(null);
-
     const variant = node?.type === PLANK_COMPANION_TYPE ? getLinkedVariant(id) : undefined;
-    const sizeKey = id.split('+')[0];
-    const size = plankSizing?.[sizeKey] as number | undefined;
 
+    // Sizing.
+    const sizeAttrs = useMainSize();
+    const sizeKey = id.split('+')[0];
+    const size = isCompanion
+      ? DEFAULT_COMPANION_SIZE
+      : ((plankSizing?.[sizeKey] as number | undefined) ?? DEFAULT_SIZE);
     const handleSizeChange = useCallback(
       debounce((nextSize: number) => {
-        onResize?.(sizeKey, nextSize);
+        const size = Math.round(nextSize);
+        onResize?.(sizeKey, size);
       }, 200),
-      [onResize, sizeKey],
+      [sizeKey, onResize],
     );
 
     // TODO(thure): Tabster's focus group should handle moving focus to Main, but something is blocking it.
@@ -76,8 +106,17 @@ export const PlankComponent = memo(
     }, []);
 
     useLayoutEffect(() => {
-      if (scrollIntoView === id) {
-        layoutMode === 'multi' && rootElement.current?.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+      if (scrollIntoView === id && layoutMode === 'multi' && rootElement.current) {
+        const element = rootElement.current;
+        const scrollParent = element.closest('[style*="overflow"], .overflow-x-auto') as HTMLElement | null;
+        if (scrollParent) {
+          const elementRect = element.getBoundingClientRect();
+          const parentRect = scrollParent.getBoundingClientRect();
+          const targetScrollLeft = scrollParent.scrollLeft + (elementRect.left - parentRect.left);
+
+          smoothScrollTo(scrollParent, targetScrollLeft, 300);
+        }
+
         onScrollIntoView?.(undefined);
       }
     }, [id, scrollIntoView, layoutMode, onScrollIntoView]);
@@ -85,7 +124,6 @@ export const PlankComponent = memo(
     const isSolo = layoutMode.startsWith('solo') && part === 'solo';
     const isAttendable =
       (layoutMode.startsWith('solo') && part.startsWith('solo')) || (layoutMode === 'multi' && part === 'multi');
-    const sizeAttrs = useMainSize();
 
     const data = useMemo<AppSurface.ArticleData | undefined>(
       () =>
@@ -104,8 +142,9 @@ export const PlankComponent = memo(
     // TODO(wittjosiah): Change prop to accept a component.
     const placeholder = useMemo(() => <PlankLoading />, []);
 
+    const Root = part.startsWith('solo') ? 'article' : StackItem.Root;
     const fullscreen = layoutMode === 'solo--fullscreen';
-    const className = mx(
+    const classNames = [
       'dx-attention-surface relative dx-focus-ring-inset-over-all dx-density-coarse',
       isSolo && 'absolute inset-0',
       isSolo && mainIntrinsicSize,
@@ -113,14 +152,12 @@ export const PlankComponent = memo(
       part.startsWith('solo') && 'grid',
       part.startsWith('solo-') && 'grid-rows-subgrid row-span-2 min-w-0',
       fullscreen && 'grid-rows-1',
-      part === 'multi' && (companioned === 'companion' ? 'border-separator! border-e' : 'border-separator! border-x'),
+      part === 'multi' && (isCompanion ? 'border-separator! border-e' : 'border-separator! border-x'),
       part === 'solo-companion' && 'border-separator! border-s',
       settings?.encapsulatedPlanks &&
         !part.startsWith('solo') &&
         'mx-(--main-spacing) border-separator! border rounded-sm overflow-hidden',
-    );
-
-    const Root = part.startsWith('solo') ? 'article' : StackItem.Root;
+    ];
 
     return (
       <Root
@@ -130,15 +167,15 @@ export const PlankComponent = memo(
         tabIndex={0}
         {...(part.startsWith('solo')
           ? ({
-              className,
+              className: mx(classNames),
               ...sizeAttrs,
             } as any)
           : {
               role: 'article',
-              classNames: className,
+              item: { id },
+              classNames,
               order,
               size,
-              item: { id },
               onSizeChange: handleSizeChange,
             })}
         {...(isAttendable ? attentionAttrs : {})}
@@ -163,7 +200,7 @@ export const PlankComponent = memo(
             )}
             <Surface.Surface
               key={node.id}
-              role='article'
+              type={AppSurface.Article}
               data={data}
               limit={1}
               fallback={PlankErrorFallback}

package/src/containers/Plank/PlankControls.tsx

@@ -5,10 +5,10 @@
 import React, { forwardRef, useCallback } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, useTranslation } from '@dxos/react-ui';
 
 import { meta } from '#meta';
-import { DeckOperation } from '#operations';
 import { type DeckAction, type LayoutMode } from '#types';
 
 export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
@@ -37,7 +37,7 @@ export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompanionC
     const { t } = useTranslation(meta.id);
     const { invokePromise } = useOperationInvoker();
     const handleCloseCompanion = useCallback(() => {
-      return invokePromise(DeckOperation.ChangeCompanion, { companion: null });
+      return invokePromise(LayoutOperation.UpdateCompanion, { subject: null });
     }, [invokePromise]);
     return (
       <div ref={forwardedRef} className='contents dx-app-no-drag'>

package/src/containers/Plank/PlankError.tsx

@@ -56,7 +56,7 @@ export const PlankErrorFallback = ({ error }: ErrorFallbackProps) => {
 
   useEffect(() => {
     if (error) {
-      log.error(error);
+      log.error('plank error', { error });
     }
   }, [error]);
 

package/src/containers/Plank/PlankHeading.tsx

@@ -5,7 +5,7 @@
 import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { AppSurface } 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 { getLinkedVariant } from '@dxos/react-ui-attention';
@@ -37,6 +37,7 @@ export type PlankHeadingProps = {
   companioned?: 'primary' | 'companion';
   companions?: Node.Node[];
   actions?: StackItemSigilAction[];
+  debug?: boolean;
 };
 
 export const PlankHeading = memo(
@@ -54,9 +55,10 @@ export const PlankHeading = memo(
     companions,
     layoutMode,
     actions = [],
+    debug = false,
   }: PlankHeadingProps) => {
     const { t } = useTranslation(meta.id);
-    const { graph, onAdjust, onChangeCompanion } = usePlankContext('PlankHeading');
+    const { graph, onAdjust, onUpdateCompanion } = usePlankContext('PlankHeading');
     const runAction = useActionRunner();
     const breakpoint = useBreakpoints();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
@@ -129,10 +131,10 @@ export const PlankHeading = memo(
         const target = (event.target as HTMLElement).closest('[data-id]') as HTMLElement | null;
         const tabId = target?.dataset?.id;
         if (tabId) {
-          onChangeCompanion?.(tabId);
+          onUpdateCompanion?.(tabId);
         }
       },
-      [onChangeCompanion],
+      [onUpdateCompanion],
     );
 
     return (
@@ -185,7 +187,7 @@ export const PlankHeading = memo(
                   onAction={handleAction}
                 >
                   <Surface.Surface
-                    role='menu-footer'
+                    type={AppSurface.MenuFooter}
                     data={{ subject: node.data } satisfies AppSurface.MenuFooterData}
                   />
                 </StackItem.Sigil>
@@ -208,8 +210,16 @@ export const PlankHeading = memo(
             </TextTooltip>
           </>
         )}
+        {debug && (
+          <div role='none' className='flex items-center text-sm text-info-text'>
+            {layoutMode}:{part}:{companioned}
+          </div>
+        )}
         {node && part !== 'complementary' && (
-          <Surface.Surface role='navbar-end' data={{ subject: node.data } satisfies AppSurface.NavbarEndData} />
+          <Surface.Surface
+            type={AppSurface.NavbarEnd}
+            data={{ subject: node.data } satisfies AppSurface.NavbarEndData}
+          />
         )}
         {companioned === 'companion' ? (
           <PlankCompanionControls primary={primaryId} />

package/src/containers/Plank/PlankRoot.tsx

@@ -33,8 +33,8 @@ export type PlankContextValue = {
   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;
+  /** Callback to update the companion. */
+  onUpdateCompanion?: (companion: string | null) => void;
 };
 
 export const [PlankProvider, usePlankContext] = createContext<PlankContextValue>(PLANK_NAME);

package/src/containers/Sidebar/ComplementarySidebar.tsx

@@ -105,6 +105,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
                   iconOnly
                   tooltipSide='left'
                   data-value={getLinkedVariant(companion.id)}
+                  {...(companion.properties.joyride && { 'data-joyride': companion.properties.joyride })}
                   variant={
                     activeId === getLinkedVariant(companion.id)
                       ? state.complementarySidebarState === 'expanded'
@@ -120,7 +121,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
           {!hoistStatusbar && (
             <div
               role='none'
-              className='grid grid-cols-1 auto-rows-(--dx-rail-item) gap-0.5 overflow-y-auto'
+              className='grid grid-cols-1 auto-rows-(--dx-rail-item) py-0.5 gap-0.5 overflow-y-auto scrollbar-none'
               style={iconSize(4)}
             >
               <Surface.Surface role='status-indicator' />

package/src/containers/Sidebar/Sidebar.tsx

@@ -5,7 +5,7 @@
 import React, { useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { type Label, Main } from '@dxos/react-ui';
 
 import { useBreakpoints, useDeckState, useHoistStatusbar } from '#hooks';
@@ -38,7 +38,7 @@ export const Sidebar = () => {
         hoistStatusbar && 'bottom-(--dx-statusbar-size)',
       ]}
     >
-      <Surface.Surface role='navigation' data={navigationData} limit={1} />
+      <Surface.Surface type={AppSurface.Navigation} data={navigationData} limit={1} />
     </Main.NavigationSidebar>
   );
 };

package/src/containers/Sidebar/SidebarButton.tsx

@@ -80,13 +80,19 @@ export const ToggleComplementarySidebarButton = ({
     }
   }, [state, updateState, current, companions, invokePromise]);
 
+  const label = t(
+    state.complementarySidebarState === 'expanded'
+      ? 'close-complementary-sidebar.label'
+      : 'open-complementary-sidebar.label',
+  );
+
   return (
     <IconButton
       variant='ghost'
       classNames={['[&>svg]:-scale-x-100', classNames]}
       icon='ph--sidebar-simple--regular'
       iconOnly
-      label={t('open-complementary-sidebar.label')}
+      label={label}
       tooltipSide={inR0 ? 'left' : undefined}
       onClick={handleClick}
     />

package/src/hooks/useDeckCompanions.ts

@@ -5,7 +5,7 @@
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Node, type Node as NodeType } from '@dxos/plugin-graph';
 import { useConnections } from '@dxos/plugin-graph';
-import { type Label } from '@dxos/ui-types';
+import { type Label } from '@dxos/ui-types/translations';
 import { type Position, byPosition } from '@dxos/util';
 
 import { DECK_COMPANION_TYPE } from '#types';
@@ -19,6 +19,7 @@ export type DeckCompanion = NodeType.Node<
     /** If true, the panel will not be wrapped in a scroll area. */
     fixed?: boolean;
     position?: Position;
+    joyride?: string;
   }
 >;
 

package/src/index.ts

@@ -2,7 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-export { DeckCapabilities, DeckEvents } from './types';
-export * from './DeckPlugin';
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const DeckPlugin = Plugin.lazy(meta, () => import('./DeckPlugin'));
+
 export * from './meta';
+
+export { DeckCapabilities, DeckEvents } from './types';
+// TODO(wittjosiah): Hooks should not be exported from the plugin package at all.
+//   Either refactor callers to not need them or factor them out to a shared package.
 export { useCompanions } from './hooks';

package/src/operations/add-toast.ts

@@ -6,7 +6,7 @@ import * as Effect from 'effect/Effect';
 
 import { Capabilities } from '@dxos/app-framework';
 import { LayoutOperation } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 
 import { DeckCapabilities } from '../types';
 

package/src/operations/adjust.ts

@@ -8,7 +8,7 @@ import * as Option from 'effect/Option';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 import { AttentionCapabilities } from '@dxos/plugin-attention/types';
 import { Graph } from '@dxos/plugin-graph';
 import { byPosition } from '@dxos/util';
@@ -16,7 +16,7 @@ import { byPosition } from '@dxos/util';
 import { incrementPlank } from '../layout';
 import { DeckCapabilities, PLANK_COMPANION_TYPE } from '../types';
 import { computeActiveUpdates } from '../util';
-import { Adjust, ChangeCompanion } from './definitions';
+import { Adjust } from './definitions';
 import { updateActiveDeck } from './helpers';
 
 const handler: Operation.WithHandler<typeof Adjust> = Adjust.pipe(
@@ -73,7 +73,7 @@ const handler: Operation.WithHandler<typeof Adjust> = Adjust.pipe(
         );
 
         if (Option.isSome(companion)) {
-          yield* Operation.invoke(ChangeCompanion, { companion: companion.value.id });
+          yield* Operation.invoke(LayoutOperation.UpdateCompanion, { subject: companion.value.id });
         }
       }
     }),

package/src/operations/close.ts

@@ -6,7 +6,7 @@ import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { LayoutOperation } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 import { AttentionCapabilities } from '@dxos/plugin-attention/types';
 
 import { closeEntry } from '../layout';

package/src/operations/definitions.ts

@@ -5,11 +5,11 @@
 import * as Schema from 'effect/Schema';
 
 import { Capability } from '@dxos/app-framework';
-import { Operation } from '@dxos/operation';
+import { Operation } from '@dxos/compute';
 
 import { meta } from '#meta';
 
-const PartAdjustmentSchema = Schema.Union(
+const PartAdjustment = Schema.Union(
   Schema.Literal('close').annotations({ description: 'Close the plank.' }),
   Schema.Literal('companion').annotations({ description: 'Open the companion plank.' }),
   Schema.Literal('solo').annotations({ description: 'Solo the plank.' }),
@@ -17,7 +17,8 @@ const PartAdjustmentSchema = Schema.Union(
   Schema.Literal('increment-start').annotations({ description: 'Move the plank towards the start of the deck.' }),
   Schema.Literal('increment-end').annotations({ description: 'Move the plank towards the end of the deck.' }),
 );
-export type PartAdjustment = Schema.Schema.Type<typeof PartAdjustmentSchema>;
+
+export type PartAdjustment = Schema.Schema.Type<typeof PartAdjustment>;
 
 export const Adjust = Operation.make({
   meta: {
@@ -28,7 +29,7 @@ export const Adjust = Operation.make({
   services: [Capability.Service],
   input: Schema.Struct({
     id: Schema.String.annotations({ description: 'The id of the plank to adjust.' }),
-    type: PartAdjustmentSchema.annotations({ description: 'The type of adjustment to make.' }),
+    type: PartAdjustment.annotations({ description: 'The type of adjustment to make.' }),
   }),
   output: Schema.Void,
 });
@@ -46,16 +47,3 @@ export const UpdatePlankSize = Operation.make({
   }),
   output: Schema.Void,
 });
-
-export const ChangeCompanion = Operation.make({
-  meta: {
-    key: `${meta.id}.operation.change-companion`,
-    name: 'Change Companion',
-    description: 'Change the companion plank for a primary plank.',
-  },
-  services: [Capability.Service],
-  input: Schema.Struct({
-    companion: Schema.Union(Schema.String, Schema.Null),
-  }),
-  output: Schema.Void,
-});

package/src/operations/index.ts

@@ -2,14 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { OperationHandlerSet } from '@dxos/operation';
+import { OperationHandlerSet } from '@dxos/compute';
 
 export * as DeckOperation from './definitions';
 
 export const DeckOperationHandlerSet = OperationHandlerSet.lazy(
   () => import('./add-toast'),
   () => import('./adjust'),
-  () => import('./change-companion'),
   () => import('./close'),
   () => import('./open'),
   () => import('./revert-workspace'),
@@ -18,6 +17,7 @@ export const DeckOperationHandlerSet = OperationHandlerSet.lazy(
   () => import('./set-layout-mode'),
   () => import('./show-undo'),
   () => import('./switch-workspace'),
+  () => import('./update-companion'),
   () => import('./update-complementary'),
   () => import('./update-dialog'),
   () => import('./update-plank-size'),