@dxos/plugin-deck 0.9.1-main.c7dcc2e112 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.10.0",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -94,62 +94,64 @@
     "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-slot": "1.1.2",
     "@tauri-apps/plugin-deep-link": "^2.4.9",
     "immer": "^10.1.1",
-    "@dxos/app-framework": "0.9.1-main.c7dcc2e112",
-    "@dxos/app-graph": "0.9.1-main.c7dcc2e112",
-    "@dxos/async": "0.9.1-main.c7dcc2e112",
-    "@dxos/compute": "0.9.1-main.c7dcc2e112",
-    "@dxos/app-toolkit": "0.9.1-main.c7dcc2e112",
-    "@dxos/context": "0.9.1-main.c7dcc2e112",
-    "@dxos/errors": "0.9.1-main.c7dcc2e112",
-    "@dxos/effect": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo": "0.9.1-main.c7dcc2e112",
-    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/keyboard": "0.9.1-main.c7dcc2e112",
-    "@dxos/keys": "0.9.1-main.c7dcc2e112",
-    "@dxos/operation": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-attention": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-graph": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-form": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-observability": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-menu": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-mosaic": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-stack": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-tabs": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-types": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112"
+    "@dxos/app-graph": "0.10.0",
+    "@dxos/app-toolkit": "0.10.0",
+    "@dxos/async": "0.10.0",
+    "@dxos/compute": "0.10.0",
+    "@dxos/echo": "0.10.0",
+    "@dxos/effect": "0.10.0",
+    "@dxos/context": "0.10.0",
+    "@dxos/errors": "0.10.0",
+    "@dxos/invariant": "0.10.0",
+    "@dxos/keyboard": "0.10.0",
+    "@dxos/keys": "0.10.0",
+    "@dxos/log": "0.10.0",
+    "@dxos/plugin-attention": "0.10.0",
+    "@dxos/plugin-client": "0.10.0",
+    "@dxos/operation": "0.10.0",
+    "@dxos/plugin-observability": "0.10.0",
+    "@dxos/plugin-graph": "0.10.0",
+    "@dxos/react-ui-attention": "0.10.0",
+    "@dxos/react-ui-dnd": "0.10.0",
+    "@dxos/react-ui-form": "0.10.0",
+    "@dxos/react-ui-list": "0.10.0",
+    "@dxos/react-ui-menu": "0.10.0",
+    "@dxos/react-ui-mosaic": "0.10.0",
+    "@dxos/react-ui-tabs": "0.10.0",
+    "@dxos/ui-types": "0.10.0",
+    "@dxos/util": "0.10.0",
+    "@dxos/app-framework": "0.10.0"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "@types/react": "~19.2.7",
+    "@effect/platform": "0.96.2",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/plugin-testing": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-hooks": "0.9.1-main.c7dcc2e112",
-    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-main.c7dcc2e112",
-    "@dxos/schema": "0.9.1-main.c7dcc2e112",
-    "@dxos/types": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112"
+    "@dxos/plugin-testing": "0.10.0",
+    "@dxos/random": "0.10.0",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/react-hooks": "0.10.0",
+    "@dxos/react-ui-syntax-highlighter": "0.10.0",
+    "@dxos/schema": "0.10.0",
+    "@dxos/types": "0.10.0",
+    "@dxos/ui-theme": "0.10.0",
+    "@dxos/storybook-utils": "0.10.0"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@effect/platform": "0.96.1",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
+    "@effect/platform": "0.96.2",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
   },
   "publishConfig": {
     "access": "public"

package/src/DeckPlugin.ts

@@ -6,7 +6,6 @@ import { setAutoFreeze } from 'immer';
 
 import { ActivationEvent, ActivationEvents, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
-import { translations as stackTranslations } from '@dxos/react-ui-stack/translations';
 
 import {
   AppGraphBuilder,
@@ -35,7 +34,7 @@ export const DeckPlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
-  AppPlugin.addTranslationsModule({ translations: [...translations, ...stackTranslations] }),
+  AppPlugin.addTranslationsModule({ translations }),
   Plugin.addModule({
     activatesOn: AppActivationEvents.SetupSettings,
     firesAfterActivation: [DeckEvents.SettingsReady],

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

@@ -9,6 +9,7 @@ import { AppCapabilities, AppNode, LayoutOperation } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/compute';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
+import { Position } from '@dxos/util';
 
 import { meta } from '#meta';
 import { DeckCapabilities } from '#types';
@@ -112,13 +113,13 @@ export default Capability.makeModule(
                   macos: "meta+'",
                 },
                 disposition: 'pin-end',
-                position: 'last',
+                position: Position.last,
                 l0Breakpoint: 'lg',
               },
             };
 
             return !deck?.solo ? [closeCurrent, closeOthers, closeAll, toggleSidebar] : [toggleSidebar];
-          }),
+          }).pipe(Effect.orDie),
       }),
     ]);
 

package/src/capabilities/notification-tracker.ts

@@ -4,11 +4,13 @@
 
 import * as Effect from 'effect/Effect';
 import * as Fiber from 'effect/Fiber';
+import * as Option from 'effect/Option';
 import * as Stream from 'effect/Stream';
 
 import { Capabilities, Capability, type PluginManager } from '@dxos/app-framework';
 import { type LayoutOperation, SettingsOperation } from '@dxos/app-toolkit';
 import { Process } from '@dxos/compute';
+import { Annotation } from '@dxos/echo';
 
 import { meta } from '#meta';
 import { DeckCapabilities } from '#types';
@@ -56,7 +58,7 @@ export default Capability.makeModule(
           continue;
         }
 
-        const notify = process.params.notify;
+        const notify = Option.getOrNull(Annotation.getDictionary(process.params.annotations, Process.NotifyAnnotation));
         if (!notify) {
           continue;
         }

package/src/capabilities/react-surface.tsx

@@ -10,7 +10,7 @@ import { Surface, useSettingsState } from '@dxos/app-framework/ui';
 import { NotFound } from '@dxos/app-toolkit';
 import { AppSurface, NotFoundArticle } from '@dxos/app-toolkit/ui';
 
-import { DeckSettings } from '#components';
+import { DeckSettings } from '#containers';
 import { meta } from '#meta';
 import { type Settings } from '#types';
 

package/src/components/Companion/Companion.tsx

@@ -0,0 +1,91 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type ReactNode, useMemo } from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { type Node } from '@dxos/plugin-graph';
+import { type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { getLinkedVariant } from '@dxos/react-ui-attention';
+import { mx } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+
+import { Pane, type PaneTab } from '../Pane';
+
+//
+// Companion
+//
+// A higher-level companion pane bound to a set of companion {@link Node}s: a {@link Pane} whose toolbar
+// holds the companion tab strip and whose body renders the companions' content Surfaces. All panels stay
+// mounted (inactive hidden) so switching tabs preserves each companion's state. Shares attention with the
+// primary plank via `attendableId`. Controls (e.g. close) are supplied by the container.
+//
+
+export type CompanionProps = ThemedClassName<{
+  companions: Node.Node[];
+  /** Selected companion id. */
+  value?: string;
+  onValueChange?: (id: string) => void;
+  /** Primary plank attendable id; the companion shares its attention. */
+  attendableId?: string;
+  /** Primary plank subject; companion Article surfaces filter on (and operate against) `companionTo`. */
+  companionTo?: unknown;
+  /** Toolbar controls rendered after the tabs (e.g. close). */
+  controls?: ReactNode;
+}>;
+
+export const Companion = ({
+  classNames,
+  companions,
+  value,
+  onValueChange,
+  attendableId,
+  companionTo,
+  controls,
+}: CompanionProps) => {
+  const { t } = useTranslation(meta.profile.key);
+
+  // Fall back to the first companion when uncontrolled so a panel is always visible.
+  const selected = value ?? companions[0]?.id;
+  const tabs = useMemo<PaneTab[]>(
+    () =>
+      companions.map((node) => ({
+        id: node.id,
+        icon: node.properties?.icon ?? 'ph--circle-dashed--regular',
+        label: toLocalizedString(node.properties?.label ?? '', t),
+      })),
+    [companions, t],
+  );
+
+  // Stable per-companion data objects so companion article surfaces don't receive a new prop reference on
+  // every parent re-render (the same pattern as the inline data fix in Plank).
+  const companionDataList = useMemo(
+    () =>
+      companions.map((node) => ({
+        attendableId,
+        subject: node.data,
+        companionTo,
+        variant: getLinkedVariant(node.id),
+        properties: node.properties,
+      })),
+    [companions, attendableId, companionTo],
+  );
+
+  return (
+    <Pane.Root classNames={classNames}>
+      <Pane.Toolbar>
+        <Pane.Tabs tabs={tabs} value={selected} onValueChange={onValueChange} attendableId={attendableId} related />
+        {controls}
+      </Pane.Toolbar>
+      {/* Panels stay mounted; the inactive ones are hidden so switching companions preserves their state. */}
+      {companions.map((node, index) => (
+        <Pane.Content key={node.id} classNames={mx(node.id !== selected && 'hidden')}>
+          <Surface.Surface type={AppSurface.Article} data={companionDataList[index]} limit={1} />
+        </Pane.Content>
+      ))}
+    </Pane.Root>
+  );
+};

package/src/components/Companion/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Companion';

package/src/components/Matrix/Matrix.stories.tsx

@@ -8,17 +8,16 @@ import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface } from '@dxos/app-framework/ui';
-import { Graph } from '@dxos/app-graph';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
+import { type Node } from '@dxos/plugin-graph';
 import { corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { Focus, Panel, Toolbar } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { withAttention } from '@dxos/react-ui-attention/testing';
-import { type MosaicTileProps, Mosaic } from '@dxos/react-ui-mosaic';
-import { StackContext } from '@dxos/react-ui-stack';
+import { Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
 import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
@@ -28,7 +27,7 @@ import { DeckState, OperationHandler } from '#capabilities';
 import { meta as pluginMeta } from '#meta';
 import { translations } from '#translations';
 
-import { Plank } from '../../containers/Plank';
+import { Plank } from '../Plank';
 import { Matrix, type MatrixController, type MatrixRootProps } from './Matrix';
 
 random.seed(123);
@@ -75,29 +74,17 @@ const StoryTile = (props: MosaicTileProps<Obj.Any>) => {
 };
 
 /**
- * Tile that wraps a Plank for content rendering.
+ * Tile that renders a node-bound Plank (sigil/title + content Surface).
  */
 const PlankTile = (props: MosaicTileProps<Obj.Any>) => {
-  const graph = useMemo(() => Graph.make(), []);
+  const node = useMemo<Node.Node>(
+    () => ({ id: props.data.id, type: 'test', data: props.data, properties: { label: Obj.getLabel(props.data) } }),
+    [props.data],
+  );
   return (
-    <StackContext.Provider value={{ orientation: 'horizontal', size: 'contain', rail: true }}>
-      <Plank.Root layoutMode='multi' part='multi' graph={graph}>
-        <Mosaic.Tile {...props} asChild>
-          <Plank.Content solo={false} companion={false} encapsulate={false}>
-            <Plank.Component
-              id={props.data.id}
-              part='multi'
-              node={{
-                id: props.data.id,
-                data: props.data,
-                type: 'test',
-                properties: {},
-              }}
-            />
-          </Plank.Content>
-        </Mosaic.Tile>
-      </Plank.Root>
-    </StackContext.Provider>
+    <Mosaic.Tile {...props} classNames='w-full md:w-[50rem] shrink-0'>
+      <Plank node={node} />
+    </Mosaic.Tile>
   );
 };
 
@@ -124,9 +111,9 @@ const TestExtension = Capability.contributes(
   }),
 );
 
-type DefaultStoryProps = Pick<MatrixRootProps, 'Tile'>;
+type StoryArgs = Pick<MatrixRootProps, 'Tile'>;
 
-const DefaultStory = ({ Tile }: DefaultStoryProps) => {
+const DefaultStory = ({ Tile }: StoryArgs) => {
   const items = useMemo(
     () => [
       Organization.make({ name: random.company.name() }),

package/src/components/Matrix/Matrix.tsx

@@ -4,13 +4,13 @@
 
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { createContext } from '@radix-ui/react-context';
-import React, { forwardRef, type PropsWithChildren, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
+import React, { type PropsWithChildren, forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 
 import { Obj } from '@dxos/echo';
 import { ScrollArea } from '@dxos/react-ui';
 import { composable, composableProps } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
-import { type MosaicStackTileComponent, Mosaic } from '@dxos/react-ui-mosaic';
+import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
 import { type ComposableProps } from '@dxos/ui-types';
 
 //
@@ -202,4 +202,4 @@ export const Matrix = {
   Viewport: MatrixViewport,
 };
 
-export type { MatrixController, MatrixRootProps, MatrixContentProps, MatrixViewportProps };
+export type { MatrixContentProps, MatrixController, MatrixRootProps, MatrixViewportProps };

package/src/components/Matrix/SPEC.md

@@ -98,7 +98,7 @@ IDs with a `~` prefix on the last segment (e.g., `root/obj/~settings`) mark the
 - **DeckMain** ensures attention is initialized:
   - On first render, focuses the first plank's button if nothing is attended.
   - On mobile breakpoint: reads the currently attended ID to determine which plank to show in solo mode.
-- **Keyboard** — `plugin-attention` syncs `Keyboard.singleton.setCurrentContext(id)` with the attended ID, so keyboard shortcuts apply to the attended plank.
+- **Keyboard** — `plugin-attention` syncs `Keyboard.singleton.setCurrentContext(\`root/${id}\`)` with the attended ID, so keyboard shortcuts apply to the attended plank while inheriting root-level bindings.
 
 ### Attention vs Focus vs Matrix.current
 

package/src/components/Matrix/index.ts

@@ -3,4 +3,4 @@
 //
 
 export { Matrix } from './Matrix';
-export type { MatrixController, MatrixRootProps, MatrixContentProps, MatrixViewportProps } from './Matrix';
+export type { MatrixContentProps, MatrixController, MatrixRootProps, MatrixViewportProps } from './Matrix';

package/src/components/Pane/Pane.stories.tsx

@@ -0,0 +1,92 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { Icon, IconButton } from '@dxos/react-ui';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
+import { withAttention } from '@dxos/react-ui-attention/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Pane, type PaneTab } from './Pane';
+
+const TABS: PaneTab[] = [
+  { id: 'notes', icon: 'ph--note--regular', label: 'Notes' },
+  { id: 'chat', icon: 'ph--chat--regular', label: 'Chat' },
+  { id: 'links', icon: 'ph--link--regular', label: 'Links' },
+];
+
+// A self-contained main Pane that is its own attendable region (focusing it sets attention, which the
+// sigil and title reflect via the accent color).
+const MainPane = ({ id, label }: { id: string; label: string }) => {
+  const attentionAttrs = useAttentionAttributes(id);
+  return (
+    <Pane.Root tabIndex={0} classNames='flex-1' {...attentionAttrs}>
+      <Pane.Toolbar>
+        <Pane.Sigil attendableId={id}>
+          <Icon icon='ph--circle-dashed--regular' />
+        </Pane.Sigil>
+        <Pane.Title attendableId={id}>{label}</Pane.Title>
+        <IconButton iconOnly variant='ghost' icon='ph--arrows-out--regular' label='Fullscreen' />
+        <IconButton iconOnly variant='ghost' icon='ph--x--regular' label='Close' />
+      </Pane.Toolbar>
+      <Pane.Content classNames='grid place-items-center text-description'>
+        <span>{label} content</span>
+      </Pane.Content>
+    </Pane.Root>
+  );
+};
+
+// A presentational preview of the solo split: a main Pane beside a companion Pane (tabs + close).
+const SplitStory = () => {
+  const [tab, setTab] = useState('notes');
+  const activeTab = TABS.find((entry) => entry.id === tab);
+  return (
+    <div className='w-full grid grid-cols-2 px-3 gap-3 bg-deck-surface'>
+      <MainPane id='plank-main' label='Main plank' />
+      <Pane.Root>
+        <Pane.Toolbar>
+          <Pane.Tabs tabs={TABS} value={tab} onValueChange={setTab} attendableId='plank-main' related />
+          <IconButton iconOnly variant='ghost' icon='ph--x--regular' label='Close companion' />
+        </Pane.Toolbar>
+        <Pane.Content classNames='grid place-items-center text-description'>
+          <span className='flex items-center gap-1'>
+            {activeTab && <Icon icon={activeTab.icon} />}
+            {tab}
+          </span>
+        </Pane.Content>
+      </Pane.Root>
+    </div>
+  );
+};
+
+// Two main planks side by side; click either to move attention — only the attended plank's sigil and
+// title take the accent color.
+const TwoPanesStory = () => (
+  <div className='w-full flex h-full px-3 gap-3 bg-deck-surface'>
+    <MainPane id='plank-a' label='Pane A' />
+    <MainPane id='plank-b' label='Pane B' />
+  </div>
+);
+
+const meta: Meta = {
+  title: 'plugins/plugin-deck/components/Pane',
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => <SplitStory />,
+  decorators: [withAttention('plank-main')],
+};
+
+export const Attention: Story = {
+  render: () => <TwoPanesStory />,
+  decorators: [withAttention('plank-a')],
+};