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

package/src/components/Sidebar/SidebarButton.tsx

@@ -4,24 +4,24 @@
 
 import React, { useCallback } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } from '@dxos/app-framework/react';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation, getCompanionVariant } from '@dxos/app-toolkit';
 import { IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
-import { getCompanionId, useDeckCompanions, useDeckState } from '../../hooks';
+import { useDeckCompanions, useDeckState } from '../../hooks';
 import { meta } from '../../meta';
 
 export const ToggleSidebarButton = ({
   classNames,
   variant = 'ghost',
 }: ThemedClassName<Pick<IconButtonProps, 'variant'>>) => {
-  const { state, updateState } = useDeckState();
+  const { updateState } = useDeckState();
   const { t } = useTranslation(meta.id);
 
   const handleClick = useCallback(() => {
-    updateState((s) => ({
-      ...s,
-      sidebarState: s.sidebarState === 'expanded' ? 'collapsed' : 'expanded',
+    updateState((state) => ({
+      ...state,
+      sidebarState: state.sidebarState === 'expanded' ? 'collapsed' : 'expanded',
     }));
   }, [updateState]);
 
@@ -43,7 +43,7 @@ export const CloseSidebarButton = () => {
   const { t } = useTranslation(meta.id);
 
   const handleClick = useCallback(() => {
-    updateState((s) => ({ ...s, sidebarState: 'collapsed' }));
+    updateState((state) => ({ ...state, sidebarState: 'collapsed' }));
   }, [updateState]);
 
   return (
@@ -54,7 +54,7 @@ export const CloseSidebarButton = () => {
       size={4}
       label={t('close navigation sidebar label')}
       onClick={handleClick}
-      classNames='rounded-none pli-1 dx-focus-ring-inset pie-[max(.5rem,env(safe-area-inset-left))]'
+      classNames='rounded-none px-1 dx-focus-ring-inset pe-[max(.5rem,env(safe-area-inset-left))]'
     />
   );
 };
@@ -71,11 +71,11 @@ export const ToggleComplementarySidebarButton = ({
   const companions = useDeckCompanions();
   const handleClick = useCallback(() => {
     const nextState = state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
-    updateState((s) => ({ ...s, complementarySidebarState: nextState }));
+    updateState((state) => ({ ...state, complementarySidebarState: nextState }));
 
-    const subject = state.complementarySidebarPanel ?? (companions[0] && getCompanionId(companions[0].id));
+    const subject = state.complementarySidebarPanel ?? (companions[0] && getCompanionVariant(companions[0].id));
     if (nextState === 'expanded' && !current && subject) {
-      invokeSync(Common.LayoutOperation.UpdateComplementary, { subject });
+      invokeSync(LayoutOperation.UpdateComplementary, { subject });
     }
   }, [state, updateState, current, companions, invokeSync]);
 

package/src/components/fragments.ts

@@ -4,11 +4,16 @@
 
 import { mx } from '@dxos/ui-theme';
 
+// TODO(burdon): Move to these as dx-components?
+
+/** @private */
 export const soloInlinePadding =
-  'pis-[calc(env(safe-area-inset-left)+.25rem)] pie-[calc(env(safe-area-inset-left)+.25rem)]';
+  'ps-[calc(env(safe-area-inset-left)+.25rem)] pe-[calc(env(safe-area-inset-right)+.25rem)]';
 
-const sidebarToggleStyles = 'bs-[--rail-item] is-[--rail-item] absolute block-end-2 z-[1] !bg-deckSurface lg:hidden';
+const sidebarToggleStyles = 'h-(--dx-rail-item) w-(--dx-rail-item) absolute bottom-2 z-[1] !bg-deck-surface lg:hidden';
 
-export const fixedSidebarToggleStyles = mx(sidebarToggleStyles, 'inline-start-2');
+/** @private */
+export const fixedSidebarToggleStyles = mx(sidebarToggleStyles, 'left-2');
 
-export const fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, 'inline-end-2');
+/** @private */
+export const fixedComplementarySidebarToggleStyles = mx(sidebarToggleStyles, 'right-2');

package/src/components/index.ts

@@ -3,4 +3,3 @@
 //
 
 export * from './DeckLayout';
-export * from './DeckSettings';

package/src/containers/Banner/Banner.tsx

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { Banner } from '../../components';

package/src/containers/Banner/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Banner } from './Banner';
+
+export default Banner;

package/src/{components → containers}/DeckSettings/DeckSettings.tsx

@@ -5,15 +5,15 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
+import { Settings } from '@dxos/react-ui-form';
 
 import { meta } from '../../meta';
 import {
   type DeckSettingsProps,
   type NewPlankPositioning,
   NewPlankPositions,
+  OverScrollToProps,
   type Overscroll,
-  OverscrollOptions,
 } from '../../types';
 
 const isSocket = !!(globalThis as any).__args;
@@ -27,22 +27,22 @@ export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsCompone
   const { t } = useTranslation(meta.id);
 
   return (
-    <ControlPage>
-      <ControlSection title={t('settings title', { ns: meta.id })}>
-        <ControlGroup>
-          <ControlItemInput title={t('settings enable deck label')}>
+    <Settings.Root>
+      <Settings.Section title={t('settings title', { ns: meta.id })}>
+        <Settings.Group>
+          <Settings.ItemInput title={t('settings enable deck label')}>
             <Input.Switch
               checked={settings.enableDeck}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableDeck: checked }))}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings encapsulated planks label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings encapsulated planks label')}>
             <Input.Switch
               checked={settings.encapsulatedPlanks ?? false}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, encapsulatedPlanks: checked }))}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('select new plank positioning label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('select new plank positioning label')}>
             <Select.Root
               disabled={!settings.enableDeck}
               value={settings.newPlankPositioning ?? 'start'}
@@ -64,8 +64,8 @@ export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsCompone
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
-          <ControlItemInput title={t('settings overscroll label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings overscroll label')}>
             <Select.Root
               disabled={!settings.enableDeck}
               value={settings.overscroll ?? 'none'}
@@ -75,7 +75,7 @@ export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsCompone
               <Select.Portal>
                 <Select.Content>
                   <Select.Viewport>
-                    {OverscrollOptions.map((option) => (
+                    {OverScrollToProps.map((option) => (
                       <Select.Option key={option} value={option}>
                         {t(`settings overscroll ${option} label`)}
                       </Select.Option>
@@ -85,29 +85,29 @@ export const DeckSettings = ({ settings, onSettingsChange }: DeckSettingsCompone
                 </Select.Content>
               </Select.Portal>
             </Select.Root>
-          </ControlItemInput>
-          <ControlItemInput title={t('settings enable statusbar label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings enable statusbar label')}>
             <Input.Switch
               checked={settings.enableStatusbar}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableStatusbar: checked }))}
             />
-          </ControlItemInput>
-          <ControlItemInput title={t('settings show hints label')}>
+          </Settings.ItemInput>
+          <Settings.ItemInput title={t('settings show hints label')}>
             <Input.Switch
               checked={settings.showHints}
               onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, showHints: checked }))}
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
           {!isSocket && (
-            <ControlItemInput title={t('settings native redirect label')}>
+            <Settings.ItemInput title={t('settings native redirect label')}>
               <Input.Switch
                 checked={settings.enableNativeRedirect}
                 onCheckedChange={(checked) => onSettingsChange((s) => ({ ...s, enableNativeRedirect: checked }))}
               />
-            </ControlItemInput>
+            </Settings.ItemInput>
           )}
-        </ControlGroup>
-      </ControlSection>
-    </ControlPage>
+        </Settings.Group>
+      </Settings.Section>
+    </Settings.Root>
   );
 };

package/src/containers/DeckSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { DeckSettings } from './DeckSettings';
+
+export default DeckSettings;

package/src/containers/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const Banner: ComponentType<any> = lazy(() => import('./Banner'));
+export const DeckSettings: ComponentType<any> = lazy(() => import('./DeckSettings'));

package/src/hooks/index.ts

@@ -9,3 +9,4 @@ export * from './useDeckState';
 export * from './useHoistStatusbar';
 export * from './useMainSize';
 export * from './useNodeActionExpander';
+export * from './useSelectedCompanion';

package/src/hooks/useCompanions.ts

@@ -4,7 +4,7 @@
 
 import { useMemo } from 'react';
 
-import { useAppGraph } from '@dxos/app-framework/react';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useConnections } from '@dxos/plugin-graph';
 import { byPosition } from '@dxos/util';
 
@@ -12,7 +12,7 @@ import { PLANK_COMPANION_TYPE } from '../types';
 
 export const useCompanions = (id?: string) => {
   const { graph } = useAppGraph();
-  const nodes = useConnections(graph, id);
+  const nodes = useConnections(graph, id, 'child');
   const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
   return useMemo(() => companions.toSorted((a, b) => byPosition(a.properties, b.properties)), [companions]);
 };

package/src/hooks/useDeckCompanions.ts

@@ -2,18 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useAppGraph } from '@dxos/app-framework/react';
+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 Position, byPosition } from '@dxos/util';
 
-import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '../types';
-
-export const getCompanionId = (id: string) => {
-  const [_, companionId] = id.split(ATTENDABLE_PATH_SEPARATOR);
-  return companionId ?? 'never';
-};
+import { DECK_COMPANION_TYPE } from '../types';
 
 export type DeckCompanion = NodeType.Node<
   any,
@@ -29,7 +24,7 @@ export type DeckCompanion = NodeType.Node<
 
 export const useDeckCompanions = (): DeckCompanion[] => {
   const { graph } = useAppGraph();
-  const connections = useConnections(graph, Node.RootId);
+  const connections = useConnections(graph, Node.RootId, 'child');
   const companions = connections.filter((node) => node.type === DECK_COMPANION_TYPE) as DeckCompanion[];
   return companions.toSorted((a, b) => byPosition(a.properties, b.properties));
 };

package/src/hooks/useDeckState.ts

@@ -5,8 +5,8 @@
 import { useAtomValue } from '@effect-atom/atom-react';
 import { useCallback, useMemo } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useCapability } from '@dxos/app-framework/react';
+import { Capabilities } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
 import { invariant } from '@dxos/invariant';
 
 import {
@@ -33,7 +33,7 @@ export type DeckStateHook = {
  * Returns the combined state, the active deck, and update functions for each atom.
  */
 export const useDeckState = (): DeckStateHook => {
-  const registry = useCapability(Common.Capability.AtomRegistry);
+  const registry = useCapability(Capabilities.AtomRegistry);
   const stateAtom = useCapability(DeckCapabilities.State);
   const ephemeralAtom = useCapability(DeckCapabilities.EphemeralState);
 

package/src/hooks/useHoistStatusbar.ts

@@ -4,7 +4,7 @@
 
 import { useMemo } from 'react';
 
-import { useAtomCapability } from '@dxos/app-framework/react';
+import { useAtomCapability } from '@dxos/app-framework/ui';
 import { useThemeContext } from '@dxos/react-ui';
 
 import { DeckCapabilities, type LayoutMode } from '../types';

package/src/hooks/useMainSize.ts

@@ -7,7 +7,7 @@ import { useMainContext } from '@dxos/react-ui';
 export const useMainSize = () => {
   const { navigationSidebarState, complementarySidebarState } = useMainContext('DeckPluginPlank');
   return {
-    'data-sidebar-inline-start-state': navigationSidebarState,
-    'data-sidebar-inline-end-state': complementarySidebarState,
+    'data-sidebar-left-state': navigationSidebarState,
+    'data-sidebar-right-state': complementarySidebarState,
   };
 };

package/src/hooks/useNodeActionExpander.ts

@@ -11,7 +11,7 @@ export const useNodeActionExpander = (node?: Node.Node) => {
     if (node) {
       const frame = requestAnimationFrame(() => {
         const graph = Graph.getGraph(node);
-        void Graph.expand(graph, node.id);
+        void Graph.expand(graph, node.id, 'action');
       });
       return () => cancelAnimationFrame(frame);
     }

package/src/hooks/useSelectedCompanion.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { getCompanionVariant } from '@dxos/app-toolkit';
+import { type Node } from '@dxos/plugin-graph';
+
+/**
+ * Resolves which companion to show based on variant preference.
+ * Falls back to first available if preferred variant not found.
+ */
+export const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string) => {
+  return useMemo(() => {
+    if (companions.length === 0) {
+      return { companionId: undefined, variant: undefined };
+    }
+
+    // Try to find companion matching the preferred variant.
+    if (preferredVariant) {
+      const preferred = companions.find((companion) => getCompanionVariant(companion.id) === preferredVariant);
+      if (preferred) {
+        return { companionId: preferred.id, variant: getCompanionVariant(preferred.id) };
+      }
+    }
+
+    // Fallback to first companion.
+    const first = companions[0];
+    return { companionId: first.id, variant: getCompanionVariant(first.id) };
+  }, [companions, preferredVariant]);
+};

package/src/layout.ts

@@ -4,29 +4,16 @@
 
 import { produce } from 'immer';
 
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
-
 import { type DeckAction, type NewPlankPositioning } from './types';
 
-export const createEntryId = (entryId: string, variant?: string) =>
-  variant ? `${entryId}${ATTENDABLE_PATH_SEPARATOR}${variant}` : entryId;
-
-export const parseEntryId = (entryId: string) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return { id, variant };
-};
-
 type OpenLayoutEntryOptions = {
   key?: string;
   positioning?: NewPlankPositioning;
   pivotId?: string;
-  variant?: string;
 };
 
-export const openEntry = (deck: string[], _entryId: string, options?: OpenLayoutEntryOptions): string[] => {
+export const openEntry = (deck: string[], entryId: string, options?: OpenLayoutEntryOptions): string[] => {
   return produce(deck, (draft) => {
-    const entryId = createEntryId(_entryId, options?.variant);
-
     // Check that the entry is not already in the part
     if (draft.find((id) => id === entryId)) {
       return;

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/deck',
+  id: 'org.dxos.plugin.deck',
   name: 'Layout',
   description: trim`
     Flexible layout system for arranging workspace views in tabs, splits, and panels.

package/src/translations.ts

@@ -64,6 +64,7 @@ export const translations = [
         'close others label': 'Close other planks',
         'close all label': 'Close all planks',
         'companion plank heading fallback label': 'Related',
+        'open item label': 'Open',
       },
     },
   },

package/src/types/capabilities.ts

@@ -5,27 +5,27 @@
 import { type Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 
 import { meta } from '../meta';
 import { type DeckEphemeralStateProps, type DeckSettingsProps, type DeckState, type DeckStateProps } from '../types';
 
 export namespace DeckCapabilities {
-  export const Settings = Capability.make<Atom.Writable<DeckSettingsProps>>(`${meta.id}/capability/settings`);
+  export const Settings = Capability.make<Atom.Writable<DeckSettingsProps>>(`${meta.id}.capability.settings`);
 
   /** Persisted state (stored in KVS/localStorage). */
-  export const State = Capability.make<Atom.Writable<DeckStateProps>>(`${meta.id}/capability/state`);
+  export const State = Capability.make<Atom.Writable<DeckStateProps>>(`${meta.id}.capability.state`);
 
   /** Transient/ephemeral state (not persisted). */
   export const EphemeralState = Capability.make<Atom.Writable<DeckEphemeralStateProps>>(
-    `${meta.id}/capability/ephemeral-state`,
+    `${meta.id}.capability.ephemeral-state`,
   );
 
   /** Get the current active deck from state. */
   export const getDeck = (): Effect.Effect<DeckState, Error, Capability.Service> =>
     Effect.gen(function* () {
-      const state = yield* Common.Capability.getAtomValue(State);
+      const state = yield* Capabilities.getAtomValue(State);
       const deck = state.decks[state.activeDeck];
       invariant(deck, `Deck not found: ${state.activeDeck}`);
       return deck;

package/src/types/events.ts

@@ -2,19 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ActivationEvent, Common } from '@dxos/app-framework';
+import { type ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 
 import { meta } from '../meta';
 
 import { DeckCapabilities } from './capabilities';
 
 export namespace DeckEvents {
-  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(
-    `${meta.id}/state-ready`,
+  export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(
+    `${meta.id}.state-ready`,
   );
 
   /** Fired when DeckSettings capability is ready. */
-  export const SettingsReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createSettingsEvent(
+  export const SettingsReady: ActivationEvent.ActivationEvent = AppActivationEvents.createSettingsEvent(
     DeckCapabilities.Settings.identifier,
   );
 }

package/src/types/schema.ts

@@ -4,23 +4,22 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { Label, LayoutOperation } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/operation';
 import { type DeepReadonly } from '@dxos/util';
 
 import { meta } from '../meta';
 
-export { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
-
-export const PLANK_COMPANION_TYPE = `${meta.id}/plank-companion`;
-export const DECK_COMPANION_TYPE = `${meta.id}/deck-companion`;
+export const PLANK_COMPANION_TYPE = `${meta.id}.plank-companion`;
+export const DECK_COMPANION_TYPE = `${meta.id}.deck-companion`;
 
 // TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.
 export const NewPlankPositions = ['start', 'end'] as const;
 export type NewPlankPositioning = (typeof NewPlankPositions)[number];
 
-export const OverscrollOptions = ['none', 'centering'] as const;
-export type Overscroll = (typeof OverscrollOptions)[number];
+export const OverScrollToProps = ['none', 'centering'] as const;
+export type Overscroll = (typeof OverScrollToProps)[number];
 
 export type Part = 'solo' | 'deck' | 'complementary';
 export type ResolvedPart = Part | 'solo-primary' | 'solo-companion';
@@ -31,7 +30,7 @@ export const DeckSettingsSchema = Schema.Struct({
   enableStatusbar: Schema.optional(Schema.Boolean),
   enableNativeRedirect: Schema.optional(Schema.Boolean),
   newPlankPositioning: Schema.optional(Schema.Literal(...NewPlankPositions)),
-  overscroll: Schema.optional(Schema.Literal(...OverscrollOptions)),
+  overscroll: Schema.optional(Schema.Literal(...OverScrollToProps)),
   // TODO(burdon): Rename layoutMode? (e.g., bento | encapsulated?)
   encapsulatedPlanks: Schema.optional(Schema.Boolean),
 }).pipe(Schema.mutable);
@@ -45,8 +44,8 @@ export const DeckState = Schema.Struct({
   /** If false, the deck has not yet left solo mode and new planks should be soloed. */
   initialized: Schema.Boolean,
   active: Schema.mutable(Schema.Array(Schema.String)),
-  // TODO(wittjosiah): Piping into both mutable and optional caused invalid typescript output.
-  activeCompanions: Schema.optional(Schema.mutable(Schema.Record({ key: Schema.String, value: Schema.String }))),
+  companionOpen: Schema.Boolean,
+  companionVariant: Schema.optional(Schema.String),
   inactive: Schema.mutable(Schema.Array(Schema.String)),
   solo: Schema.optional(Schema.String),
   fullscreen: Schema.Boolean,
@@ -58,7 +57,8 @@ export type DeckState = Schema.Schema.Type<typeof DeckState>;
 export const defaultDeck: DeckState = {
   initialized: false,
   active: [],
-  activeCompanions: {},
+  companionOpen: false,
+  companionVariant: undefined,
   inactive: [],
   solo: undefined,
   fullscreen: false,
@@ -90,6 +90,7 @@ export const DeckStateSchema = Schema.Struct({
 }).pipe(Schema.mutable);
 export type DeckStateProps = Schema.Schema.Type<typeof DeckStateSchema>;
 
+// TODO(burdon): Factor out state (in common with other layouts?)
 // Transient/ephemeral plugin state (not persisted).
 export const DeckEphemeralStateSchema = Schema.Struct({
   dialogOpen: Schema.Boolean,
@@ -105,11 +106,13 @@ export const DeckEphemeralStateSchema = Schema.Struct({
   popoverAnchor: Schema.optional(Schema.Any),
   popoverAnchorId: Schema.optional(Schema.String),
   popoverKind: Schema.optional(Schema.Literal('base', 'card')),
-  popoverTitle: Schema.optional(Common.Label.annotations({ description: 'The title of the popover.' })),
+  popoverTitle: Schema.optional(Label.annotations({ description: 'The title of the popover.' })),
+  /** Ref of the subject to be passed to the popover Surface. */
+  popoverContentRef: Schema.optional(Schema.String),
   /** Data to be passed to the popover Surface. */
   popoverContent: Schema.optional(Schema.Any),
 
-  toasts: Schema.mutable(Schema.Array(Common.LayoutOperation.Toast)),
+  toasts: Schema.mutable(Schema.Array(LayoutOperation.Toast)),
   currentUndoId: Schema.optional(Schema.String),
 
   /** The identifier of a component to scroll into view when it is mounted. */
@@ -134,12 +137,12 @@ export namespace DeckAction {
   export type Adjustment = Schema.Schema.Type<typeof Adjustment>;
 
   // An atomic transaction to apply to the deck, describing which element to move to which location.
-  export class Adjust extends Schema.TaggedClass<Adjust>()(`${meta.id}/action/adjust`, {
+  export class Adjust extends Schema.TaggedClass<Adjust>()(`${meta.id}.action.adjust`, {
     input: Adjustment,
     output: Schema.Void,
   }) {}
 
-  export class UpdatePlankSize extends Schema.TaggedClass<UpdatePlankSize>()(`${meta.id}/action/update-plank-size`, {
+  export class UpdatePlankSize extends Schema.TaggedClass<UpdatePlankSize>()(`${meta.id}.action.update-plank-size`, {
     input: Schema.Struct({
       id: Schema.String,
       size: Schema.Number,
@@ -147,9 +150,8 @@ export namespace DeckAction {
     output: Schema.Void,
   }) {}
 
-  export class ChangeCompanion extends Schema.TaggedClass<ChangeCompanion>()(`${meta.id}/action/change-companion`, {
+  export class ChangeCompanion extends Schema.TaggedClass<ChangeCompanion>()(`${meta.id}.action.change-companion`, {
     input: Schema.Struct({
-      primary: Schema.String,
       companion: Schema.Union(Schema.String, Schema.Null),
     }),
     output: Schema.Void,
@@ -172,7 +174,7 @@ export namespace DeckOperation {
 
   export const Adjust = Operation.make({
     meta: {
-      key: `${meta.id}/operation/adjust`,
+      key: `${meta.id}.operation.adjust`,
       name: 'Adjust',
       description: 'Adjust the layout of a plank.',
     },
@@ -188,7 +190,7 @@ export namespace DeckOperation {
 
   export const UpdatePlankSize = Operation.make({
     meta: {
-      key: `${meta.id}/operation/update-plank-size`,
+      key: `${meta.id}.operation.update-plank-size`,
       name: 'Update Plank Size',
       description: 'Update the size of a plank.',
     },
@@ -204,14 +206,13 @@ export namespace DeckOperation {
 
   export const ChangeCompanion = Operation.make({
     meta: {
-      key: `${meta.id}/operation/change-companion`,
+      key: `${meta.id}.operation.change-companion`,
       name: 'Change Companion',
       description: 'Change the companion plank for a primary plank.',
     },
     services: [Capability.Service],
     schema: {
       input: Schema.Struct({
-        primary: Schema.String,
         companion: Schema.Union(Schema.String, Schema.Null),
       }),
       output: Schema.Void,

package/src/util/overscroll.ts

@@ -56,14 +56,14 @@ export const calculateOverscroll = (
   }
   if (planksCount === 1) {
     const overscrollPadding =
-      'max(0px, calc(((100dvw - var(--dx-main-sidebarWidth) - var(--dx-main-complementaryWidth) - (var(--dx-main-contentFirstWidth) + 1px)) / 2)))';
+      'max(0px, calc(((100dvw - var(--dx-main-sidebar-width) - var(--dx-main-complementary-width) - (var(--dx-main-content-first-width) + 1px)) / 2)))';
     return { paddingInlineStart: overscrollPadding, paddingInlineEnd: overscrollPadding };
   } else {
     return {
       paddingInlineStart:
-        'max(0px, calc(((100dvw - (var(--dx-main-contentFirstWidth) + 1px)) / 2) - var(--dx-main-sidebarWidth)))',
+        'max(0px, calc(((100dvw - (var(--dx-main-content-first-width) + 1px)) / 2) - var(--dx-main-sidebar-width)))',
       paddingInlineEnd:
-        'max(0px, calc(((100dvw - (var(--dx-main-contentLastWidth) + 1px)) / 2) - var(--dx-main-complementaryWidth)))',
+        'max(0px, calc(((100dvw - (var(--dx-main-content-last-width) + 1px)) / 2) - var(--dx-main-complementary-width)))',
     };
   }
 };