@dxos/plugin-deck 0.9.0 → 0.9.1-staging.ee54ba693a

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

@@ -8,16 +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';
@@ -27,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);
@@ -74,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>
   );
 };
 
@@ -104,7 +92,7 @@ const TestExtension = Capability.contributes(
   Capabilities.ReactSurface,
   Surface.create({
     id: 'storyArticle',
-    role: 'article',
+    filter: Surface.makeFilter(AppSurface.Article),
     component: ({ data: { subject } }) => {
       if (!subject) {
         return <Loading />;
@@ -123,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')],
+};

package/src/components/Pane/Pane.tsx

@@ -0,0 +1,178 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { AttentionSigilButton } from '@dxos/app-toolkit/ui';
+import { DensityProvider, IconButton, type ThemedClassName, composableProps, slottable } from '@dxos/react-ui';
+import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
+import { iconSize, mx } from '@dxos/ui-theme';
+import type { Merge } from '@dxos/util';
+
+//
+// Pane
+//
+// A presentational, radix-style component for a single deck pane: a toolbar rail above a content body.
+// A plank always has a toolbar, so it implements that layout directly rather than wrapping the
+// generalized `Panel`. A companion pane is just a Pane whose toolbar holds `Pane.Tabs` instead of a
+// sigil/title. Intentionally free of app-framework concepts (capabilities, operations, Surface) —
+// containers compose the sigil, controls, tabs and content surface into the slots.
+//
+
+//
+// Root
+//
+
+// Root accepts arbitrary div attributes (the container wires tabIndex, data-* and key handlers), so it
+// is a plain forwarding div rather than the narrowly-typed `slottable` used by the toolbar/content slots.
+type PaneRootProps = ThemedClassName<ComponentPropsWithRef<'div'>>;
+
+const PaneRoot = forwardRef<HTMLDivElement, PaneRootProps>(({ children, ...props }, forwardedRef) => (
+  <div
+    {...composableProps(props, {
+      role: 'article',
+      classNames:
+        'dx-container flex flex-col dx-attention-surface relative dx-focus-ring-inset-over-all dx-density-lg min-w-0',
+    })}
+    ref={forwardedRef}
+  >
+    {children}
+  </div>
+));
+
+PaneRoot.displayName = 'Pane.Root';
+
+//
+// Toolbar
+//
+
+const PaneToolbar = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot : 'div';
+  return (
+    <Comp
+      {...composableProps(props, {
+        style: iconSize(5),
+        classNames: 'flex items-center gap-1 px-1 shrink-0 h-(--dx-rail-content) bg-header-surface',
+      })}
+      ref={forwardedRef}
+    >
+      <DensityProvider density='lg'>{children}</DensityProvider>
+    </Comp>
+  );
+});
+
+PaneToolbar.displayName = 'Pane.Toolbar';
+
+//
+// Content
+//
+
+const PaneContent = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const Comp = asChild ? Slot : 'div';
+  return (
+    <Comp {...composableProps(props, { classNames: 'flex-1 min-h-0' })} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+PaneContent.displayName = 'Pane.Content';
+
+//
+// Title
+//
+
+type PaneTitleProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & AttendableId & Related;
+
+/** Attention-aware plank title; colors to the accent when the plank (or a related companion) is attended. */
+const PaneTitle = forwardRef<HTMLHeadingElement, PaneTitleProps>(
+  ({ attendableId, related, classNames, ...props }, forwardedRef) => {
+    const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
+    return (
+      <h1
+        {...props}
+        data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}
+        className={mx(
+          'px-1 min-w-0 w-0 grow truncate font-medium text-base-fg data-[attention=true]:text-accent-text self-center',
+          classNames,
+        )}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+PaneTitle.displayName = 'Pane.Title';
+
+//
+// Tabs
+//
+
+export type PaneTab = {
+  id: string;
+  icon: string;
+  /** Already-localized label. */
+  label: string;
+};
+
+type PaneTabsProps = Merge<
+  ThemedClassName<{
+    tabs: ReadonlyArray<PaneTab>;
+    value?: string;
+    onValueChange?: (id: string) => void;
+    /** Collapse inactive tabs to icon-only once the tab count exceeds this. */
+    maxTabs?: number;
+  }>,
+  AttendableId,
+  Related
+>;
+
+/** Full-height tab strip for a companion plank's toolbar; selects among available companions. */
+const PaneTabs = forwardRef<HTMLDivElement, PaneTabsProps>(
+  ({ tabs, value, onValueChange, maxTabs = 5, attendableId, related, classNames }, forwardedRef) => {
+    // The active tab only reads as primary when the plank (shared with its companion) is attended.
+    const { hasAttention, isAncestor, isRelated } = useAttention(attendableId);
+    const attended = (related && isRelated) || hasAttention || isAncestor;
+    return (
+      <div
+        role='tablist'
+        className={mx('flex-1 min-w-0 overflow-x-auto scrollbar-none flex items-center gap-1', classNames)}
+        ref={forwardedRef}
+      >
+        {tabs.map(({ id, icon, label }) => (
+          <IconButton
+            key={id}
+            role='tab'
+            aria-selected={value === id}
+            tabIndex={value === id ? 0 : -1}
+            data-id={id}
+            icon={icon}
+            iconOnly={tabs.length > maxTabs && value !== id}
+            label={label}
+            variant={value === id && attended ? 'primary' : 'ghost'}
+            onClick={() => onValueChange?.(id)}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+PaneTabs.displayName = 'Pane.Tabs';
+
+//
+// Pane
+//
+
+export const Pane = {
+  Root: PaneRoot,
+  Toolbar: PaneToolbar,
+  Sigil: AttentionSigilButton,
+  Title: PaneTitle,
+  Tabs: PaneTabs,
+  Content: PaneContent,
+};
+
+export type { PaneRootProps, PaneTabsProps, PaneTitleProps };

package/src/components/Pane/index.ts

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

package/src/components/Plank/Plank.stories.tsx

@@ -0,0 +1,103 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } 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 { 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 { withAttention } from '@dxos/react-ui-attention/testing';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Organization, Person } from '@dxos/types';
+
+import { DeckState, OperationHandler } from '#capabilities';
+import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
+
+import { Plank } from './Plank';
+
+random.seed(99);
+
+const TestPlugin = Plugin.define(pluginMeta).pipe(
+  Plugin.addModule({
+    id: Capability.getModuleTag(DeckState),
+    activatesOn: AppActivationEvents.AppGraphReady,
+    activate: () => DeckState(),
+  }),
+  AppPlugin.addOperationHandlerModule({
+    activate: OperationHandler,
+  }),
+  Plugin.make,
+);
+
+const TestExtension = Capability.contributes(
+  Capabilities.ReactSurface,
+  Surface.create({
+    id: 'storyArticle',
+    filter: Surface.makeFilter(AppSurface.Article),
+    component: ({ data: { subject } }) =>
+      subject ? (
+        <Syntax.Root data={subject}>
+          <Syntax.Content>
+            <Syntax.Viewport>
+              <Syntax.Code />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
+      ) : (
+        <Loading />
+      ),
+  }),
+);
+
+// A border makes each plank's bounds obvious against the deck surface.
+const PLANK_CLASSNAMES = 'border border-separator';
+
+const useNode = (data: Obj.Any, icon: string): Node.Node =>
+  useMemo(
+    () => ({ id: data.id, type: 'test', data, properties: { label: Obj.getLabel(data) ?? 'Untitled', icon } }),
+    [data, icon],
+  );
+
+// Two planks side by side; focus either to move attention (sigil/title take the accent color).
+const DefaultStory = () => {
+  const [organization, person] = useMemo(
+    () => [Organization.make({ name: random.company.name() }), Person.make({ fullName: random.person.fullName() })],
+    [],
+  );
+  const organizationNode = useNode(organization, 'ph--building-office--regular');
+  const personNode = useNode(person, 'ph--user--regular');
+
+  return (
+    <div className='flex h-full gap-3 p-3 bg-deck-surface'>
+      <Plank node={organizationNode} classNames={PLANK_CLASSNAMES} />
+      <Plank node={personNode} classNames={PLANK_CLASSNAMES} />
+    </div>
+  );
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-deck/components/Plank',
+  decorators: [
+    withPluginManager({ plugins: [...corePlugins(), TestPlugin()], capabilities: [TestExtension] }),
+    withAttention(),
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+  ],
+  parameters: { layout: 'fullscreen', translations },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = { render: () => <DefaultStory /> };

package/src/components/Plank/Plank.tsx

@@ -0,0 +1,149 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, {
+  type ComponentProps,
+  Fragment,
+  type KeyboardEventHandler,
+  type ReactNode,
+  forwardRef,
+  useMemo,
+} from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface, AttentionSigil, type AttentionSigilAction } from '@dxos/app-toolkit/ui';
+import { type Node } from '@dxos/plugin-graph';
+import { Icon, Popover, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
+
+import { meta } from '#meta';
+
+import { Pane } from '../Pane';
+
+type SurfaceProps = ComponentProps<typeof Surface.Surface>;
+
+export type PlankProps = ThemedClassName<{
+  node: Node.Node;
+  /** Attendable id; defaults to the node id. */
+  attendableId?: string;
+  /** Grouped sigil menu actions; when present the sigil opens a menu, otherwise it is a plain button. */
+  actions?: AttentionSigilAction[][];
+  onAction?: (action: AttentionSigilAction) => void;
+  /** Toolbar controls rendered after the title (e.g. close/solo/fullscreen). */
+  controls?: ReactNode;
+  /** Toolbar content rendered between the title and the controls (e.g. a NavbarEnd surface). */
+  navbarEnd?: ReactNode;
+  /** Sigil-menu footer content (e.g. a MenuFooter surface). */
+  sigilFooter?: ReactNode;
+  /** Highlight the title/sigil when a related (companion) region is attended. */
+  related?: boolean;
+  /** Render the title in a muted style (e.g. while the subject is loading). */
+  pending?: boolean;
+  /** When it matches `${meta.key}:${node.id}`, anchors a popover to the sigil. */
+  popoverAnchorId?: string;
+  /** Extra Article surface data merged over the computed defaults (e.g. companionTo/variant/path). */
+  articleData?: Partial<AppSurface.ArticleData>;
+  /** Error fallback for the content surface. */
+  fallback?: SurfaceProps['fallback'];
+  /** Loading placeholder for the content surface. */
+  placeholder?: SurfaceProps['placeholder'];
+  /** Render only the content surface, omitting the toolbar (e.g. fullscreen). */
+  headless?: boolean;
+  // TODO(burdon): Why is this required?
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+}>;
+
+/**
+ * A higher-level deck pane bound to a graph {@link Node}: renders the node's sigil, title and content
+ * Surface inside a {@link Pane}, and makes itself the node's attendable region. Toolbar controls
+ * (close/solo/etc.) and framework surfaces (NavbarEnd/MenuFooter) are supplied by the container via
+ * slots so this component stays free of capabilities/operations.
+ */
+export const Plank = forwardRef<HTMLDivElement, PlankProps>(
+  (
+    {
+      classNames,
+      node,
+      attendableId = node.id,
+      actions,
+      onAction,
+      controls,
+      navbarEnd,
+      sigilFooter,
+      related,
+      pending,
+      popoverAnchorId,
+      articleData,
+      fallback,
+      placeholder,
+      headless,
+      onKeyDown,
+    },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(meta.profile.key);
+    const attentionAttrs = useAttentionAttributes(attendableId);
+    const icon = node.properties?.icon ?? 'ph--circle-dashed--regular';
+    const label = toLocalizedString(node.properties?.label ?? '', t);
+    const data = useMemo<AppSurface.ArticleData>(
+      () => ({ attendableId, subject: node.data, properties: node.properties, popoverAnchorId, ...articleData }),
+      [attendableId, node.data, node.properties, popoverAnchorId, articleData],
+    );
+
+    // Anchor the sigil's popover only when this plank's menu is the active popover target.
+    const ActionRoot = popoverAnchorId === `${meta.profile.key}:${node.id}` ? Popover.Anchor : Fragment;
+
+    return (
+      <Pane.Root
+        ref={forwardedRef}
+        classNames={classNames}
+        tabIndex={0}
+        onKeyDown={onKeyDown}
+        {...attentionAttrs}
+        data-testid='deck.plank'
+      >
+        {!headless && (
+          <Pane.Toolbar>
+            <ActionRoot>
+              {actions && actions.length > 0 ? (
+                <AttentionSigil
+                  icon={icon}
+                  related={related}
+                  attendableId={attendableId}
+                  actions={actions}
+                  onAction={onAction}
+                  triggerLabel={label}
+                >
+                  {sigilFooter}
+                </AttentionSigil>
+              ) : (
+                <Pane.Sigil attendableId={attendableId}>
+                  <span className='sr-only'>{label}</span>
+                  <Icon icon={icon} />
+                </Pane.Sigil>
+              )}
+            </ActionRoot>
+            <Pane.Title attendableId={attendableId} related={related} classNames={pending && 'text-description'}>
+              {label}
+            </Pane.Title>
+            {navbarEnd}
+            {controls}
+          </Pane.Toolbar>
+        )}
+        <Pane.Content>
+          <Surface.Surface
+            key={node.id}
+            type={AppSurface.Article}
+            data={data}
+            limit={1}
+            fallback={fallback}
+            placeholder={placeholder}
+          />
+        </Pane.Content>
+      </Pane.Root>
+    );
+  },
+);
+
+Plank.displayName = 'Plank';

package/src/components/Plank/index.ts

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

package/src/components/index.ts

@@ -2,8 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ComponentType, lazy } from 'react';
-
-export const DeckSettings: ComponentType<any> = lazy(() => import('./DeckSettings'));
-
+export { Companion, type CompanionProps } from './Companion';
 export { Matrix } from './Matrix';
+export { Pane, type PaneTab } from './Pane';
+export { Plank, type PlankProps } from './Plank';