@dxos/plugin-deck 0.8.4-main.c85a9c8dae → 0.8.4-main.d05673bc65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.d05673bc65",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -44,33 +44,33 @@
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
     "immer": "^10.1.1",
-    "@dxos/ai": "0.8.4-main.c85a9c8dae",
-    "@dxos/assistant": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-toolkit": "0.8.4-main.c85a9c8dae",
-    "@dxos/blueprints": "0.8.4-main.c85a9c8dae",
-    "@dxos/async": "0.8.4-main.c85a9c8dae",
-    "@dxos/debug": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo": "0.8.4-main.c85a9c8dae",
-    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
-    "@dxos/effect": "0.8.4-main.c85a9c8dae",
-    "@dxos/keyboard": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae",
-    "@dxos/operation": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-attention": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-observability": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-graph": "0.8.4-main.c85a9c8dae",
-    "@dxos/plugin-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-error-boundary": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-framework": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-form": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-mosaic": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-tabs": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-stack": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-types": "0.8.4-main.c85a9c8dae"
+    "@dxos/ai": "0.8.4-main.d05673bc65",
+    "@dxos/assistant": "0.8.4-main.d05673bc65",
+    "@dxos/app-toolkit": "0.8.4-main.d05673bc65",
+    "@dxos/async": "0.8.4-main.d05673bc65",
+    "@dxos/blueprints": "0.8.4-main.d05673bc65",
+    "@dxos/app-framework": "0.8.4-main.d05673bc65",
+    "@dxos/debug": "0.8.4-main.d05673bc65",
+    "@dxos/echo": "0.8.4-main.d05673bc65",
+    "@dxos/effect": "0.8.4-main.d05673bc65",
+    "@dxos/invariant": "0.8.4-main.d05673bc65",
+    "@dxos/keyboard": "0.8.4-main.d05673bc65",
+    "@dxos/operation": "0.8.4-main.d05673bc65",
+    "@dxos/log": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-attention": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-graph": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-observability": "0.8.4-main.d05673bc65",
+    "@dxos/plugin-theme": "0.8.4-main.d05673bc65",
+    "@dxos/react-client": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-attention": "0.8.4-main.d05673bc65",
+    "@dxos/react-error-boundary": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-form": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-tabs": "0.8.4-main.d05673bc65",
+    "@dxos/ui-types": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.d05673bc65",
+    "@dxos/util": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-stack": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui-mosaic": "0.8.4-main.d05673bc65"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -81,10 +81,10 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "^7.1.11",
-    "@dxos/plugin-testing": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae"
+    "@dxos/plugin-testing": "0.8.4-main.d05673bc65",
+    "@dxos/react-ui": "0.8.4-main.d05673bc65",
+    "@dxos/storybook-utils": "0.8.4-main.d05673bc65",
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -92,8 +92,8 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/react-ui": "0.8.4-main.d05673bc65",
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/app-graph-builder/app-graph-builder.ts

@@ -41,7 +41,7 @@ export default Capability.makeModule(
           // };
 
           const closeCurrent = {
-            id: `${LayoutOperation.Close.meta.key}/current`,
+            id: `${LayoutOperation.Close.meta.key}.current`,
             data: Effect.fnUntraced(function* () {
               const attention = yield* Capability.get(AttentionCapabilities.Attention);
               const attended = attention.getCurrent().at(-1);
@@ -56,7 +56,7 @@ export default Capability.makeModule(
           };
 
           const closeOthers = {
-            id: `${LayoutOperation.Close.meta.key}/others`,
+            id: `${LayoutOperation.Close.meta.key}.others`,
             data: Effect.fnUntraced(function* () {
               const attention = yield* Capability.get(AttentionCapabilities.Attention);
               const deck = yield* DeckCapabilities.getDeck();
@@ -71,7 +71,7 @@ export default Capability.makeModule(
           };
 
           const closeAll = {
-            id: `${LayoutOperation.Close.meta.key}/all`,
+            id: `${LayoutOperation.Close.meta.key}.all`,
             data: Effect.fnUntraced(function* () {
               const deck = yield* DeckCapabilities.getDeck();
               yield* Operation.invoke(LayoutOperation.Close, { subject: deck.active });
@@ -86,7 +86,7 @@ export default Capability.makeModule(
           const deck = state.decks[state.activeDeck];
 
           const toggleSidebar = {
-            id: `${LayoutOperation.UpdateSidebar.meta.key}/nav`,
+            id: `${LayoutOperation.UpdateSidebar.meta.key}.nav`,
             data: Effect.fnUntraced(function* () {
               yield* Capabilities.updateAtomValue(DeckCapabilities.State, (s) => ({
                 ...s,

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -7,7 +7,7 @@ import * as Function from 'effect/Function';
 import * as Option from 'effect/Option';
 
 import { Capabilities, Capability, UndoOperation } from '@dxos/app-framework';
-import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { AppCapabilities, LayoutOperation, getCompanionVariant, isPinnedWorkspace } from '@dxos/app-toolkit';
 import { Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
@@ -18,10 +18,9 @@ import { Graph, Node } from '@dxos/plugin-graph';
 import { ObservabilityOperation } from '@dxos/plugin-observability/types';
 import { byPosition, isNonNullable } from '@dxos/util';
 
-import { closeEntry, createEntryId, incrementPlank, openEntry } from '../../layout';
+import { closeEntry, incrementPlank, openEntry } from '../../layout';
 import { meta } from '../../meta';
 import {
-  ATTENDABLE_PATH_SEPARATOR,
   DeckCapabilities,
   DeckOperation,
   type DeckState,
@@ -273,7 +272,7 @@ export default Capability.makeModule(
             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 = !state.activeDeck.startsWith('!');
+            const shouldUpdatePrevious = !isPinnedWorkspace(state.activeDeck);
 
             yield* Capabilities.updateAtomValue(DeckCapabilities.State, (state) => {
               const newDecks = state.decks[input.subject]
@@ -341,14 +340,13 @@ export default Capability.makeModule(
             const deck = yield* DeckCapabilities.getDeck();
             previouslyOpenIds = new Set<string>(deck.solo ? [deck.solo] : deck.active);
             const next = deck.solo
-              ? input.subject.map((id) => createEntryId(id, input.variant))
+              ? [...input.subject]
               : input.subject.reduce(
                   (acc, entryId) =>
                     openEntry(acc, entryId, {
                       key: input.key,
                       positioning: input.positioning ?? settings?.newPlankPositioning,
                       pivotId: input.pivotId,
-                      variant: input.variant,
                     }),
                   deck.active,
                 );
@@ -490,7 +488,7 @@ export default Capability.makeModule(
               updateActiveDeck(state, { companionOpen: false }),
             );
           } else {
-            const [, variant] = input.companion.split(ATTENDABLE_PATH_SEPARATOR);
+            const variant = getCompanionVariant(input.companion);
             yield* Capabilities.updateAtomValue(DeckCapabilities.State, (state) =>
               updateActiveDeck(state, {
                 companionOpen: true,

package/src/capabilities/react-surface/react-surface.tsx

@@ -17,7 +17,7 @@ export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
-        id: `${meta.id}/plugin-settings`,
+        id: `${meta.id}.plugin-settings`,
         role: 'article',
         filter: (data): data is { subject: AppCapabilities.Settings } =>
           AppCapabilities.isSettings(data.subject) && data.subject.prefix === meta.id,
@@ -27,7 +27,7 @@ export default Capability.makeModule(() =>
         },
       }),
       Surface.create({
-        id: `${meta.id}/banner`,
+        id: `${meta.id}.banner`,
         role: 'banner',
         component: ({ data }: { data: { variant?: 'topbar' | 'sidebar' } }) => {
           return <Banner variant={data.variant} />;

package/src/capabilities/state/state.ts

@@ -54,7 +54,7 @@ export default Capability.makeModule(
 
     // Persisted state using KVS store.
     const stateAtom = createKvsStore({
-      key: `${meta.id}/state`,
+      key: `${meta.id}.state`,
       schema: DeckStateSchema,
       defaultValue: () => ({ ...defaultDeckState }),
     });

package/src/capabilities/url-handler/url-handler.ts

@@ -5,12 +5,12 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { LayoutOperation } from '@dxos/app-toolkit';
+import { LayoutOperation, fromUrlPath, getWorkspaceFromPath, toUrlPath } from '@dxos/app-toolkit';
 import { invariant } from '@dxos/invariant';
+import { Node } from '@dxos/plugin-graph';
 
 import { DeckCapabilities, type DeckStateProps, defaultDeck } from '../../types';
 
-// TODO(wittjosiah): Cleanup the url handling. May justify introducing routing capabilities.
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
     const { invokeSync } = yield* Capability.get(Capabilities.OperationInvoker);
@@ -48,15 +48,17 @@ export default Capability.makeModule(
         return;
       }
 
-      const [_, nextDeck, nextSolo] = pathname.split('/');
-      if (nextDeck && nextDeck !== state.activeDeck) {
-        invokeSync(LayoutOperation.SwitchWorkspace, { subject: nextDeck });
+      const qualifiedId = fromUrlPath(pathname);
+      const workspace = getWorkspaceFromPath(qualifiedId);
+      if (workspace !== Node.RootId && workspace !== state.activeDeck) {
+        invokeSync(LayoutOperation.SwitchWorkspace, { subject: workspace });
       }
 
       const deck = getDeck();
-      if (nextSolo && nextSolo !== deck.solo) {
-        invokeSync(LayoutOperation.SetLayoutMode, { subject: nextSolo, mode: 'solo' });
-      } else if (!nextSolo && deck.solo) {
+      const activeId = qualifiedId !== workspace ? qualifiedId : undefined;
+      if (activeId && activeId !== deck.solo) {
+        invokeSync(LayoutOperation.SetLayoutMode, { subject: activeId, mode: 'solo' });
+      } else if (!activeId && deck.solo) {
         invokeSync(LayoutOperation.SetLayoutMode, { mode: 'deck' });
       }
     };
@@ -78,7 +80,7 @@ export default Capability.makeModule(
         lastSolo = solo;
         lastActiveDeck = activeDeck;
 
-        const path = solo ? `/${activeDeck}/${solo}` : `/${activeDeck}`;
+        const path = solo ? toUrlPath(solo) : toUrlPath(activeDeck);
         if (window.location.pathname !== path) {
           // TODO(thure): In some browsers, this only preserves the most recent state change, even though this is not `history.replace`…
           history.pushState(null, '', `${path}${window.location.search}`);

package/src/components/Plank/Plank.tsx

@@ -14,17 +14,22 @@ import React, {
 } from 'react';
 
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
+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, useSelectedCompanion } from '../../hooks';
-import { parseEntryId } from '../../layout';
-import { DeckOperation, type DeckSettingsProps, type LayoutMode, type ResolvedPart } from '../../types';
+import {
+  DeckOperation,
+  type DeckSettingsProps,
+  type LayoutMode,
+  PLANK_COMPANION_TYPE,
+  type ResolvedPart,
+} from '../../types';
 
 import { PlankError, PlankErrorFallback } from './PlankError';
 import { PlankHeading } from './PlankHeading';
@@ -174,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(

package/src/components/Plank/PlankHeading.tsx

@@ -5,7 +5,7 @@
 import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
 
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
+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';
@@ -14,7 +14,6 @@ import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 import { hoverableControls, hoverableFocusedWithinControls } 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';
@@ -91,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;
@@ -100,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);
       }
@@ -133,7 +132,7 @@ 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) => {

package/src/components/Sidebar/ComplementarySidebar.tsx

@@ -13,19 +13,12 @@ import React, {
 } from 'react';
 
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
+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 { type DeckCompanion, useBreakpoints, useDeckCompanions, useDeckState, useHoistStatusbar } from '../../hooks';
 import { meta } from '../../meta';
 import { getMode } from '../../types';
 import { layoutAppliesTopbar } from '../../util';
@@ -49,8 +42,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(() => {
@@ -108,15 +101,15 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
         >
           <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'
@@ -139,8 +132,8 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
         {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-y-0 start-0 w-[calc(100%-var(--dx-r0-size))] lg:w-(--dx-r1-size)',
@@ -174,7 +167,7 @@ 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;
   }
 
@@ -188,7 +181,7 @@ const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }
           icon={companion.properties.icon}
           iconOnly
           tooltipSide='left'
-          data-value={getCompanionId(companion.id)}
+          data-value={getCompanionVariant(companion.id)}
           classNames='h-10 w-10'
           variant='default'
         />
@@ -198,7 +191,7 @@ const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }
       </div>
       <Wrapper>
         <Surface.Surface
-          role={`deck-companion--${getCompanionId(companion.id)}`}
+          role={`deck-companion--${getCompanionVariant(companion.id)}`}
           data={data}
           fallback={PlankErrorFallback}
           placeholder={<PlankLoading />}

package/src/components/Sidebar/SidebarButton.tsx

@@ -5,10 +5,10 @@
 import React, { useCallback } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
-import { LayoutOperation } from '@dxos/app-toolkit';
+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 = ({
@@ -73,7 +73,7 @@ export const ToggleComplementarySidebarButton = ({
     const nextState = state.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
     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(LayoutOperation.UpdateComplementary, { subject });
     }

package/src/hooks/useDeckCompanions.ts

@@ -8,12 +8,7 @@ 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,

package/src/hooks/useSelectedCompanion.ts

@@ -4,10 +4,9 @@
 
 import { useMemo } from 'react';
 
+import { getCompanionVariant } from '@dxos/app-toolkit';
 import { type Node } from '@dxos/plugin-graph';
 
-import { parseEntryId } from '../layout';
-
 /**
  * Resolves which companion to show based on variant preference.
  * Falls back to first available if preferred variant not found.
@@ -20,19 +19,14 @@ export const useSelectedCompanion = (companions: Node.Node[], preferredVariant?:
 
     // Try to find companion matching the preferred variant.
     if (preferredVariant) {
-      const preferred = companions.find((companion) => {
-        const { variant } = parseEntryId(companion.id);
-        return variant === preferredVariant;
-      });
+      const preferred = companions.find((companion) => getCompanionVariant(companion.id) === preferredVariant);
       if (preferred) {
-        const { variant } = parseEntryId(preferred.id);
-        return { companionId: preferred.id, variant };
+        return { companionId: preferred.id, variant: getCompanionVariant(preferred.id) };
       }
     }
 
     // Fallback to first companion.
     const first = companions[0];
-    const { variant } = parseEntryId(first.id);
-    return { companionId: first.id, variant };
+    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/types/capabilities.ts

@@ -12,14 +12,14 @@ 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. */

package/src/types/events.ts

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

package/src/types/schema.ts

@@ -11,10 +11,8 @@ 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;
@@ -139,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,
@@ -152,7 +150,7 @@ 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({
       companion: Schema.Union(Schema.String, Schema.Null),
     }),
@@ -176,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.',
     },
@@ -192,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.',
     },
@@ -208,7 +206,7 @@ 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.',
     },