@dxos/plugin-deck 0.8.4-staging.60fe92afc8 → 0.9.1-main.c7dcc2e112

package/src/containers/DeckLayout/Popover.tsx

@@ -10,10 +10,12 @@ import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import {
   Card,
+  Icon,
+  IconButton,
   Popover,
   type PopoverContentInteractOutsideEvent,
   toLocalizedString,
-  Toolbar,
+  useMediaQuery,
   useTranslation,
 } from '@dxos/react-ui';
 import { Menu } from '@dxos/react-ui-menu';
@@ -54,9 +56,12 @@ export const PopoverRoot = ({ children }: PopoverRootProps) => {
     }
   }, [state.popoverOpen, state.popoverAnchorId, state.popoverAnchor, state.popoverContent]);
 
+  // The rename popover is modal so other navtree item menus are inert while it is open.
+  const modal = state.popoverKind === 'rename';
+
   return (
     <DeckPopoverProvider setOpen={setOpen}>
-      <Popover.Root modal={false} open={open}>
+      <Popover.Root modal={modal} open={open}>
         {state.popoverAnchor && <Popover.VirtualTrigger key={virtualIter} virtualRef={virtualRef} />}
         {children}
       </Popover.Root>
@@ -65,7 +70,7 @@ export const PopoverRoot = ({ children }: PopoverRootProps) => {
 };
 
 export const PopoverContent = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { state, updateEphemeral } = useDeckState();
   const { setOpen } = useDeckPopoverContext('PopoverContent');
   const popoverSubject =
@@ -75,8 +80,14 @@ export const PopoverContent = () => {
   const title = state.popoverTitle ? toLocalizedString(state.popoverTitle, t) : 'Unknown';
   const icon = isObjectPopover ? (Obj.getIcon(popoverSubject)?.icon ?? 'ph--circle-dashed--regular') : undefined;
   const content = state.popoverContent;
-  // A base popover renders a plugin-provided component; everything else falls through to the card.
-  const isBasePopover = state.popoverKind === 'base' && !!content && 'component' in content;
+  // Base and rename popovers render a plugin-provided component; everything else falls through to the card.
+  const isComponentPopover =
+    (state.popoverKind === 'base' || state.popoverKind === 'rename') && !!content && 'component' in content;
+  const isRename = state.popoverKind === 'rename';
+
+  // Anchor to the right of the row on wide displays; drop centered below on narrow ones.
+  const [isLg] = useMediaQuery('lg', { fallback: [true] });
+  const side = isRename ? (isLg ? 'right' : 'bottom') : state.popoverSide;
 
   const handleClose = useCallback(() => {
     setOpen(false);
@@ -91,15 +102,14 @@ export const PopoverContent = () => {
 
   const handleInteractOutside = useCallback(
     (event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
-      if (
-        // TODO(thure): CodeMirror should not focus itself when it updates.
-        event.type === 'dismissableLayer.focusOutside' &&
-        (event.currentTarget as HTMLElement | undefined)?.classList.contains('cm-content')
-      ) {
+      // Focus leaving the popover (clicking into the card surfaces a portaled menu, or CodeMirror
+      // re-focusing itself) must not dismiss it — only a pointer-down genuinely outside the card, or
+      // Escape, closes. (Clicks inside the card never reach here; Radix scopes them to the content.)
+      if (event.type === 'dismissableLayer.focusOutside') {
         event.preventDefault();
-      } else {
-        handleClose();
+        return;
       }
+      handleClose();
     },
     [handleClose],
   );
@@ -107,15 +117,22 @@ export const PopoverContent = () => {
   return (
     <Popover.Portal>
       <Popover.Content
-        side={state.popoverSide}
+        side={side}
         sticky='always'
         hideWhenDetached
-        onOpenAutoFocus={(event) => event.preventDefault()}
+        // Rename focuses its input; other popovers keep focus where it was.
+        onOpenAutoFocus={isRename ? undefined : (event) => event.preventDefault()}
         onInteractOutside={handleInteractOutside}
         onEscapeKeyDown={handleInteractOutside}
+        // Reuse the dialog's enter/exit motion so the rename popover does not flicker on open.
+        classNames={
+          isRename
+            ? ['data-[state=open]:animate-slide-up-and-fade', 'data-[state=closed]:animate-slide-down-and-fade']
+            : undefined
+        }
       >
         <Popover.Viewport>
-          {isBasePopover && content && 'component' in content ? (
+          {isComponentPopover && content && 'component' in content ? (
             /* Base popover: a plugin-provided component (e.g. editor link preview). */
             <Surface.Surface type={AppSurface.Popover} data={content} limit={1} />
           ) : (
@@ -129,12 +146,12 @@ export const PopoverContent = () => {
             <Menu.Root>
               <Card.Root border={false} classNames='dx-card-popover'>
                 <Card.Header>
-                  <Card.IconBlock>{icon && <Card.Icon icon={icon} />}</Card.IconBlock>
+                  <Card.Block>{icon && <Icon icon={icon} />}</Card.Block>
                   <Card.Title>{title}</Card.Title>
                   {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
-                  <Card.IconBlock>
+                  <Card.Block end>
                     <Menu.Trigger asChild disabled={!objectMenuItems.length}>
-                      <Toolbar.IconButton
+                      <IconButton
                         variant='ghost'
                         density='sm'
                         icon='ph--dots-three-vertical--regular'
@@ -143,11 +160,11 @@ export const PopoverContent = () => {
                       />
                     </Menu.Trigger>
                     <Menu.Content items={objectMenuItems} />
-                  </Card.IconBlock>
+                  </Card.Block>
                 </Card.Header>
 
                 {content && 'subject' in content ? (
-                  <Surface.Surface type={AppSurface.Card} data={content} limit={1} />
+                  <Surface.Surface type={AppSurface.CardContent} data={content} limit={1} />
                 ) : (
                   <Card.Body classNames='min-bs-8'>
                     <Card.Row>

package/src/containers/DeckLayout/Toast.tsx

@@ -21,7 +21,7 @@ export const Toast = ({
   onAction,
   onOpenChange,
 }: LayoutOperation.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   // Control the open state so closing flips Radix's `open` (playing the exit animation) rather than
   // unmounting abruptly. Both the close button and Radix's own timeout/swipe route through here.

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

@@ -9,7 +9,7 @@ import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface } from '@dxos/app-framework/ui';
 import { AppActivationEvents } from '@dxos/app-toolkit';
-import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { Main } from '@dxos/react-ui';
@@ -43,7 +43,7 @@ const storySurfaceExtension = Capability.contributes(
   Capabilities.ReactSurface,
   Surface.create({
     id: 'storyArticle',
-    role: 'article',
+    filter: Surface.makeFilter(AppSurface.Article),
     component: ({ data }) => {
       const subject = (data as any)?.subject;
       if (!subject) {

package/src/containers/Plank/PlankControls.tsx

@@ -34,7 +34,7 @@ export type PlankCompanionControlsProps = {
 
 export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankCompanionControlsProps>(
   ({ primary }, forwardedRef) => {
-    const { t } = useTranslation(meta.id);
+    const { t } = useTranslation(meta.profile.key);
     const { invokePromise } = useOperationInvoker();
     const handleCloseCompanion = useCallback(() => {
       return invokePromise(LayoutOperation.UpdateCompanion, { subject: null });
@@ -78,7 +78,7 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
     { children, classNames, variant = 'default', capabilities, layoutMode, pin, close = false, onClick, ...props },
     forwardedRef,
   ) => {
-    const { t } = useTranslation(meta.id);
+    const { t } = useTranslation(meta.profile.key);
     const buttonClassNames =
       variant === 'hide-disabled' ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
 

package/src/containers/Plank/PlankError.tsx

@@ -52,7 +52,7 @@ export const PlankError = ({
  * User facing error fallback.
  */
 export const PlankErrorFallback = ({ error }: ErrorFallbackProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   useEffect(() => {
     if (error) {

package/src/containers/Plank/PlankHeading.tsx

@@ -7,10 +7,9 @@ import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo
 import { Surface } from '@dxos/app-framework/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 { Icon, IconButton, Popover, TextTooltip, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
-import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 import { hoverableControls, hoverableFocusedWithinControls, iconSize } from '@dxos/ui-theme';
 
 import { useBreakpoints } from '#hooks';
@@ -57,14 +56,14 @@ export const PlankHeading = memo(
     actions = [],
     debug = false,
   }: PlankHeadingProps) => {
-    const { t } = useTranslation(meta.id);
+    const { t } = useTranslation(meta.profile.key);
     const { graph, onAdjust, onUpdateCompanion } = usePlankContext('PlankHeading');
     const runAction = useActionRunner();
     const breakpoint = useBreakpoints();
     const icon = node?.properties?.icon ?? 'ph--circle-dashed--regular';
     const label = pending
       ? t('pending.heading')
-      : toLocalizedString(node?.properties?.label ?? ['plank-heading-fallback.label', { ns: meta.id }], t);
+      : toLocalizedString(node?.properties?.label ?? ['plank-heading-fallback.label', { ns: meta.profile.key }], t);
 
     const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
 
@@ -111,7 +110,7 @@ export const PlankHeading = memo(
     const handleAction = useCallback(
       (action: StackItemSigilAction) => {
         if (typeof action.data === 'function') {
-          void runAction(action as Node.Action, { parent: node, caller: meta.id });
+          void runAction(action as Node.Action, { parent: node, caller: meta.profile.key });
         }
       },
       [node, runAction],
@@ -124,7 +123,7 @@ export const PlankHeading = memo(
       [onAdjust, id],
     );
 
-    const ActionRoot = node && popoverAnchorId === `${meta.id}:${node.id}` ? Popover.Anchor : Fragment;
+    const ActionRoot = node && popoverAnchorId === `${meta.profile.key}:${node.id}` ? Popover.Anchor : Fragment;
 
     const handleTabClick = useCallback(
       (event: MouseEvent) => {

package/src/containers/Sidebar/ComplementarySidebar.tsx

@@ -6,6 +6,7 @@ import React, { type MouseEvent, useCallback, useEffect, useMemo, useState } fro
 
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
 import { LayoutOperation } from '@dxos/app-toolkit';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { IconButton, type Label, Main, Panel, toLocalizedString, Toolbar, useTranslation } from '@dxos/react-ui';
 import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { Tabs } from '@dxos/react-ui-tabs';
@@ -19,7 +20,7 @@ import { layoutAppliesTopbar } from '../../util';
 import { PlankErrorFallback, PlankLoading } from '../Plank';
 import { ToggleComplementarySidebarButton } from './SidebarButton';
 
-const label = ['complementary-sidebar.title', { ns: meta.id }] satisfies Label;
+const label = ['complementary-sidebar.title', { ns: meta.profile.key }] satisfies Label;
 
 export type ComplementarySidebarProps = {
   current?: string;
@@ -27,7 +28,7 @@ export type ComplementarySidebarProps = {
 
 export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
   const { invokePromise } = useOperationInvoker();
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { state, deck, updateState } = useDeckState();
   const layoutMode = getMode(deck);
   const breakpoint = useBreakpoints();
@@ -117,7 +118,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
             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' />
+            <Surface.Surface type={AppSurface.StatusIndicator} />
           </div>
           <div className='hidden lg:grid grid-cols-1 auto-rows-(--dx-rail-action) p-1'>
             <ToggleComplementarySidebarButton />
@@ -154,7 +155,7 @@ type ComplementarySidebarPanelProps = {
 };
 
 const ComplementarySidebarPanel = ({ companion, activeId, data }: ComplementarySidebarPanelProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   if (getLinkedVariant(companion.id) !== activeId && !data) {
     return null;
@@ -178,7 +179,7 @@ const ComplementarySidebarPanel = ({ companion, activeId, data }: ComplementaryS
       </Panel.Toolbar>
       <Panel.Content classNames='bg-r1-surface'>
         <Surface.Surface
-          role={`deck-companion--${getLinkedVariant(companion.id)}`}
+          type={AppSurface.deckCompanion(getLinkedVariant(companion.id))}
           data={data}
           fallback={PlankErrorFallback}
           placeholder={<PlankLoading />}

package/src/containers/Sidebar/Sidebar.tsx

@@ -14,7 +14,7 @@ import { getMode } from '#types';
 
 import { layoutAppliesTopbar } from '../../util';
 
-const label = ['sidebar.title', { ns: meta.id }] satisfies Label;
+const label = ['sidebar.title', { ns: meta.profile.key }] satisfies Label;
 
 export const Sidebar = () => {
   const { state, deck } = useDeckState();

package/src/containers/Sidebar/SidebarButton.tsx

@@ -17,7 +17,7 @@ export const ToggleSidebarButton = ({
   variant = 'ghost',
 }: ThemedClassName<Pick<IconButtonProps, 'variant'>>) => {
   const { updateState } = useDeckState();
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const handleClick = useCallback(() => {
     updateState((state) => ({
@@ -41,7 +41,7 @@ export const ToggleSidebarButton = ({
 
 export const CloseSidebarButton = () => {
   const { updateState } = useDeckState();
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const handleClick = useCallback(() => {
     updateState((state) => ({ ...state, sidebarState: 'collapsed' }));
@@ -67,7 +67,7 @@ export const ToggleComplementarySidebarButton = ({
 }: ThemedClassName<{ inR0?: boolean; current?: string }>) => {
   const { invokePromise } = useOperationInvoker();
   const { state, updateState } = useDeckState();
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
 
   const companions = useDeckCompanions();
   const handleClick = useCallback(() => {

package/src/meta.ts

@@ -3,32 +3,7 @@
 //
 
 import { Plugin } from '@dxos/app-framework';
-import { DXN } from '@dxos/keys';
-import { trim } from '@dxos/util';
 
-export const meta = Plugin.makeMeta({
-  key: DXN.make('org.dxos.plugin.deck'),
-  name: 'Layout',
-  author: 'DXOS',
-  spec: 'PLUGIN.mdl',
-  description: trim`
-    The Deck plugin is the core layout engine for DXOS Composer. It manages the multi-plank
-    workspace (the "deck"), sidebar panels, dialogs, popovers, and toast notifications, giving
-    users a flexible, persistent workspace they can arrange to match their workflow.
+import config from '../dx.config';
 
-    In multi mode, subjects are opened as resizable "planks" arranged side by side. Users can
-    navigate with stack semantics — opening from a pivot truncates planks to the right and
-    appends the new one — or switch to solo or fullscreen mode for focused, distraction-free
-    viewing.
-
-    Layout state (active planks, sidebar visibility, plank sizes, companion pane) is persisted
-    across sessions via KVS/localStorage. URL routing is handled by the plugin so that any
-    workspace configuration can be bookmarked or shared as a deep link.
-
-    All layout changes are expressed through typed LayoutOperations (Open, Close, SetLayoutMode,
-    UpdateSidebar, UpdateDialog, UpdatePopover, etc.) that any plugin in the system can dispatch,
-    keeping the layout logic centralised and easy to extend.
-  `,
-  icon: 'ph--layout--regular',
-  tags: ['system'],
-});
+export const meta = Plugin.getMetaFromConfig(config);

package/src/operations/open.ts

@@ -6,13 +6,7 @@ import * as Effect from 'effect/Effect';
 import * as Option from 'effect/Option';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import {
-  AppCapabilities,
-  LayoutOperation,
-  createEdgeExistenceChecker,
-  expandPath,
-  validateNavigationTarget,
-} from '@dxos/app-toolkit';
+import { AppCapabilities, LayoutOperation, NotFound } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/compute';
 import { Context } from '@dxos/context';
 import { Database, EID, Obj } from '@dxos/echo';
@@ -56,13 +50,15 @@ const handler: Operation.WithHandler<typeof LayoutOperation.Open> = LayoutOperat
           }
         : undefined;
       const checkRemoteExistence = client
-        ? createEdgeExistenceChecker((spaceId, body) => client.edge.http.execQuery(new Context(), spaceId, body))
+        ? NotFound.createEdgeExistenceChecker((spaceId, body) =>
+            client.edge.http.execQuery(new Context(), spaceId, body),
+          )
         : undefined;
 
       // Immediate: skip 404 / resolver checks but still expand the path (same as validate’s first step).
       if (input.navigation === 'immediate') {
         for (const subjectId of input.subject) {
-          expandPath(graph, subjectId);
+          NotFound.expandPath(graph, subjectId);
         }
       }
 
@@ -70,7 +66,13 @@ const handler: Operation.WithHandler<typeof LayoutOperation.Open> = LayoutOperat
         input.subject.map((subjectId) =>
           input.navigation === 'immediate'
             ? Effect.succeed(subjectId)
-            : validateNavigationTarget({ graph, subjectId, pathResolvers, checkLocalExistence, checkRemoteExistence }),
+            : NotFound.validateNavigationTarget({
+                graph,
+                subjectId,
+                pathResolvers,
+                checkLocalExistence,
+                checkRemoteExistence,
+              }),
         ),
       );
       input = { ...input, subject: validatedSubjects };

package/src/operations/switch-workspace.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { AppCapabilities, isPinnedWorkspace, LayoutOperation } from '@dxos/app-toolkit';
+import { AppCapabilities, LayoutOperation, Paths } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/compute';
 import { invariant } from '@dxos/invariant';
 import { Graph, Node } from '@dxos/plugin-graph';
@@ -21,7 +21,7 @@ const handler: Operation.WithHandler<typeof LayoutOperation.SwitchWorkspace> = L
         const state = yield* Capabilities.getAtomValue(DeckCapabilities.State);
         // TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
         //   Ideally this should be worked into the data model in a generic way.
-        const shouldUpdatePrevious = !isPinnedWorkspace(state.activeDeck);
+        const shouldUpdatePrevious = !Paths.isPinnedWorkspace(state.activeDeck);
 
         yield* Capabilities.updateAtomValue(DeckCapabilities.State, (state) => {
           const newDecks = state.decks[input.subject]

package/src/translations.ts

@@ -9,7 +9,7 @@ import { meta } from '#meta';
 export const translations = [
   {
     'en-US': {
-      [meta.id]: {
+      [meta.profile.key]: {
         'plugin.name': 'Deck',
         'settings.title': 'Deck settings',
         'main-header.label': 'Main header',

package/src/types/DeckCapabilities.ts

@@ -14,14 +14,16 @@ import { meta } from '#meta';
 
 import { type EphemeralDeckState, type DeckState, type StoredDeckState } from './schema';
 
-export const Settings = Capability.make<Atom.Writable<import('./Settings').Settings>>(`${meta.id}.capability.settings`);
+export const Settings = Capability.make<Atom.Writable<import('./Settings').Settings>>(
+  `${meta.profile.key}.capability.settings`,
+);
 
 /** Persisted state (stored in KVS/localStorage). */
-export const State = Capability.make<Atom.Writable<StoredDeckState>>(`${meta.id}.capability.state`);
+export const State = Capability.make<Atom.Writable<StoredDeckState>>(`${meta.profile.key}.capability.state`);
 
 /** Transient/ephemeral state (not persisted). */
 export const EphemeralState = Capability.make<Atom.Writable<EphemeralDeckState>>(
-  `${meta.id}.capability.ephemeral-state`,
+  `${meta.profile.key}.capability.ephemeral-state`,
 );
 
 /** Get the current active deck from state. */

package/src/types/DeckEvents.ts

@@ -12,7 +12,7 @@ import { meta } from '#meta';
 import * as DeckCapabilities from './DeckCapabilities';
 
 export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(
-  `${meta.id}.state-ready`,
+  `${meta.profile.key}.state-ready`,
 );
 
 /** Fired when DeckSettings capability is ready. */

package/src/types/DeckOperation.ts

@@ -12,7 +12,7 @@ import { DXN } from '@dxos/keys';
 
 import { meta } from '#meta';
 
-const makeKey = (name: string) => DXN.make(`${meta.id}.operation.${name}`);
+const makeKey = (name: string) => DXN.make(`${meta.profile.key}.operation.${name}`);
 
 const PartAdjustmentSchema = Schema.Union(
   Schema.Literal('close').annotations({ description: 'Close the plank.' }),

package/src/types/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './schema';
+export * from './surface';
 
 export * as DeckCapabilities from './DeckCapabilities';
 export * as DeckEvents from './DeckEvents';

package/src/types/schema.ts

@@ -4,12 +4,13 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Label, LayoutOperation } from '@dxos/app-toolkit';
+import { AppNode, LayoutOperation, Translations } from '@dxos/app-toolkit';
 import { type DeepReadonly } from '@dxos/util';
 
 import { meta } from '#meta';
 
-export { PLANK_COMPANION_TYPE, DECK_COMPANION_TYPE } from '@dxos/app-toolkit';
+export const PLANK_COMPANION_TYPE = AppNode.PLANK_COMPANION_TYPE;
+export const DECK_COMPANION_TYPE = AppNode.DECK_COMPANION_TYPE;
 
 export type Part = 'solo' | 'multi' | 'complementary';
 export type ResolvedPart = Part | 'solo-primary' | 'solo-companion';
@@ -91,8 +92,8 @@ export const EphemeralDeckState = Schema.Struct({
   popoverSide: Schema.optional(Schema.Literal('top', 'right', 'bottom', 'left')),
   popoverAnchor: Schema.optional(Schema.Any),
   popoverAnchorId: Schema.optional(Schema.String),
-  popoverKind: Schema.optional(Schema.Literal('base', 'card')),
-  popoverTitle: Schema.optional(Label.annotations({ description: 'The title of the popover.' })),
+  popoverKind: Schema.optional(Schema.Literal('base', 'card', 'rename')),
+  popoverTitle: Schema.optional(Translations.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. */
@@ -126,16 +127,19 @@ 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.profile.key}.action.adjust`, {
     input: Adjustment,
     output: Schema.Void,
   }) {}
 
-  export class UpdatePlankSize extends Schema.TaggedClass<UpdatePlankSize>()(`${meta.id}.action.update-plank-size`, {
-    input: Schema.Struct({
-      id: Schema.String,
-      size: Schema.Number,
-    }),
-    output: Schema.Void,
-  }) {}
+  export class UpdatePlankSize extends Schema.TaggedClass<UpdatePlankSize>()(
+    `${meta.profile.key}.action.update-plank-size`,
+    {
+      input: Schema.Struct({
+        id: Schema.String,
+        size: Schema.Number,
+      }),
+      output: Schema.Void,
+    },
+  ) {}
 }

package/src/types/surface.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Surface } from '@dxos/app-framework/ui';
+
+/** Slot for the main status-bar container. */
+export const StatusBar: Surface.RoleToken<Record<string, unknown>> = Surface.makeType(
+  'org.dxos.plugin.statusBar.role.statusBar',
+);
+
+/** Slot for the status-bar footer region. */
+export const StatusBarFooter: Surface.RoleToken<Record<string, unknown>> = Surface.makeType(
+  'org.dxos.plugin.statusBar.role.footer',
+);
+
+/** Slot for the version-info widget in the banner. */
+export const VersionInfo: Surface.RoleToken<Record<string, unknown>> = Surface.makeType(
+  'org.dxos.plugin.statusBar.role.versionInfo',
+);
+
+/** Slot for the keyboard-shortcuts hints overlay. */
+export const Hints: Surface.RoleToken<Record<string, unknown>> = Surface.makeType('org.dxos.plugin.support.role.hints');
+
+/** Slot for the full keyboard-shortcuts list. */
+export const Keyshortcuts: Surface.RoleToken<Record<string, unknown>> = Surface.makeType(
+  'org.dxos.plugin.support.role.keyshortcuts',
+);

package/src/util/plank-url-params.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { fromUrlPath, toUrlPath } from '@dxos/app-toolkit';
+import { Paths } from '@dxos/app-toolkit';
 
 const PLANK_PARAM = 'plank';
 
@@ -14,7 +14,7 @@ export const serializePlanks = (active: readonly string[], existingSearch: strin
   const params = new URLSearchParams(existingSearch);
   params.delete(PLANK_PARAM);
   for (const id of active) {
-    params.append(PLANK_PARAM, toUrlPath(id));
+    params.append(PLANK_PARAM, Paths.toUrlPath(id));
   }
   return params.size > 0 ? `?${params.toString()}` : '';
 };
@@ -23,7 +23,7 @@ export const serializePlanks = (active: readonly string[], existingSearch: strin
  * Deserialize plank query params from a URL back to qualified graph IDs.
  */
 export const deserializePlanks = (url: URL): string[] => {
-  return url.searchParams.getAll(PLANK_PARAM).map(fromUrlPath);
+  return url.searchParams.getAll(PLANK_PARAM).map(Paths.fromUrlPath);
 };
 
 /**