@dxos/plugin-deck 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/src/components/Matrix/SPEC.md

@@ -106,7 +106,7 @@ IDs with a `~` prefix on the last segment (e.g., `root/obj/~settings`) mark the
 | -------------- | ----------- | ------------------------------------------------------ |
 | DOM focus      | Browser     | `tabIndex`, `focus()`, focus/blur events               |
 | Attention      | App-wide    | `data-attendable-id` + `RootAttentionProvider` capture |
-| Matrix.current | Matrix only | `focusin` on viewport → resolve `data-mosaic-tile-id`  |
+| Matrix.current | Matrix only | `focusin` on viewport → resolve `data-object-id`       |
 
 Currently, Matrix.current and the attention system are independent. For the Matrix to participate in the attention system, tiles would need `data-attendable-id` attributes and the `RootAttentionProvider` would track them automatically via DOM focus. The `onCurrentChange` callback on Matrix.Root could then be driven by attention rather than raw focus events.
 

package/src/containers/Deck/Banner.tsx

@@ -27,8 +27,8 @@ export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'top
       {variant === 'sidebar' ? <CloseSidebarButton /> : <ToggleSidebarButton />}
       <span className='self-center grow ms-1'>{t('current-app.name', { ns: osTranslations })}</span>
       {variant === 'topbar' && (
-        <div role='none' className='absolute inset-0 pointer-events-none'>
-          <div role='none' className='grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto'>
+        <div className='absolute inset-0 pointer-events-none'>
+          <div className='grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto'>
             <Surface.Surface role='search-input' limit={1} />
           </div>
         </div>

package/src/containers/Deck/Deck.stories.tsx

@@ -10,14 +10,13 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { useAtomCapability, usePluginManager } from '@dxos/app-framework/ui';
 import { AppActivationEvents } from '@dxos/app-toolkit';
 import { corePlugins } from '@dxos/plugin-testing';
-import { withLayout } from '@dxos/react-ui/testing';
 
 import { DeckSettings, DeckState } from '#capabilities';
 import { useDeckState } from '#hooks';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 import { DeckCapabilities, getMode } from '#types';
 
-import { translations } from '../../translations';
 import { Deck } from './Deck';
 
 const TestPlugin = Plugin.define(pluginMeta).pipe(
@@ -64,7 +63,6 @@ const meta = {
   title: 'plugins/plugin-deck/containers/Deck',
   component: DefaultStory,
   decorators: [
-    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [...corePlugins(), TestPlugin()],
       setupEvents: [AppActivationEvents.SetupSettings],

package/src/containers/Deck/DeckContent.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, useCallback, useEffect, useRef } from 'react';
 
-import { AttentionCapabilities } from '@dxos/plugin-attention/types';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { Main, useMediaQuery } from '@dxos/react-ui';
 
 import { useBreakpoints, useHoistStatusbar } from '#hooks';

package/src/containers/Deck/DeckViewport.tsx

@@ -25,14 +25,14 @@ import { hoverableControls, hoverableFocusedWithinControls, mainPaddingTransitio
 
 import { useBreakpoints, useCompanions, useDeckState, useHoistStatusbar, useSelectedCompanion } from '#hooks';
 import { meta } from '#meta';
-import { DeckOperation } from '#operations';
+import { DeckOperation } from '#types';
 import { getMode } from '#types';
 
 import { layoutAppliesTopbar } from '../../util';
 import { Plank, PlankRootProps, type PlankComponentProps } from '../Plank';
 import {
-  ToggleComplementarySidebarButton as NativeToggleComplementarySidebarButton,
-  ToggleSidebarButton as NativeToggleSidebarButton,
+  ToggleComplementarySidebarButton as NaturalToggleComplementarySidebarButton,
+  ToggleSidebarButton as NaturalToggleSidebarButton,
 } from '../Sidebar';
 import { useDeckContext } from './DeckRoot';
 
@@ -49,7 +49,7 @@ export type DeckViewportProps = PropsWithChildren;
  */
 export const DeckViewport = ({ children }: DeckViewportProps) => {
   const {
-    deck: { active, solo, plankSizing },
+    deck: { active, plankSizing },
     state: { sidebarState, complementarySidebarState },
     settings,
     layoutMode,
@@ -105,11 +105,7 @@ export const DeckContentEmpty = () => {
   const layoutMode = getMode(deck);
   const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
   return (
-    <div
-      role='none'
-      className='grid place-items-center p-8 relative bg-deck-surface'
-      data-testid='layoutPlugin.firstRunMessage'
-    >
+    <div className='grid place-items-center p-8 relative bg-deck-surface' data-testid='layoutPlugin.firstRunMessage'>
       <Surface.Surface role='keyshortcuts' />
       {!topbar && <ToggleSidebarButton />}
     </div>
@@ -149,7 +145,7 @@ export const DeckSoloMode = () => {
   }, [fullscreen, onLayoutChange]);
 
   return (
-    <div role='none' className='relative overflow-hidden bg-deck-surface'>
+    <div className='relative overflow-hidden bg-deck-surface'>
       <DeckSidebarToggles topbar={topbar} fullscreen={fullscreen} />
       {fullscreen && <ExitFullscreenButton onExit={() => onLayoutChange({ mode: 'solo--fullscreen' })} />}
       <StackContext.Provider
@@ -233,7 +229,7 @@ export const DeckMultiMode = () => {
   }, [active, lastPlankCompanions.length]);
 
   return (
-    <div role='none' className='relative bg-deck-surface overflow-hidden'>
+    <div className='relative bg-deck-surface overflow-hidden'>
       <DeckSidebarToggles topbar={topbar} fullscreen={fullscreen} />
       <Stack
         classNames={[
@@ -272,16 +268,15 @@ export const DeckMultiMode = () => {
 
 const sidebarToggleStyles = 'h-(--dx-rail-item) w-(--dx-rail-item) absolute bottom-2 z-[1] bg-deck-surface! lg:hidden';
 
-const ToggleSidebarButton = () => <NativeToggleSidebarButton classNames={mx(sidebarToggleStyles, 'left-2')} />;
+const ToggleSidebarButton = () => <NaturalToggleSidebarButton classNames={mx(sidebarToggleStyles, 'left-2')} />;
 const ToggleComplementarySidebarButton = () => (
-  <NativeToggleComplementarySidebarButton classNames={mx(sidebarToggleStyles, 'right-2')} />
+  <NaturalToggleComplementarySidebarButton classNames={mx(sidebarToggleStyles, 'right-2')} />
 );
 
 const ExitFullscreenButton = ({ onExit }: { onExit: () => void }) => {
   const { t } = useTranslation(meta.id);
   return (
     <div
-      role='none'
       className={mx(
         'fixed top-2 right-2 z-[1]',
         hoverableControls,
@@ -393,8 +388,8 @@ const PlankContainer = memo(
       [invokePromise],
     );
 
-    const handleChangeCompanion = useCallback(
-      (companion: string | null) => invokePromise(DeckOperation.ChangeCompanion, { companion }),
+    const handleUpdateCompanion = useCallback(
+      (companion: string | null) => invokePromise(LayoutOperation.UpdateCompanion, { subject: companion }),
       [invokePromise],
     );
 
@@ -410,7 +405,7 @@ const PlankContainer = memo(
         onAdjust={handleAdjust}
         onResize={handleResize}
         onScrollIntoView={handleScrollIntoView}
-        onChangeCompanion={handleChangeCompanion}
+        onUpdateCompanion={handleUpdateCompanion}
       >
         <Plank.Content solo={part === 'solo'} companion={hasCompanion} encapsulate={!!settings?.encapsulatedPlanks}>
           <Plank.Component
@@ -440,12 +435,12 @@ const PlankContainer = memo(
               primary={node}
               {...(part === 'solo'
                 ? {
-                    part: 'solo-companion',
                     order,
+                    part: 'solo-companion',
                   }
                 : {
-                    part,
                     order: (order ?? 0) + 1,
+                    part,
                   })}
             />
           )}

package/src/containers/DeckLayout/ActiveNode.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { type AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
 import { useAttended } from '@dxos/react-ui-attention';
 
@@ -19,11 +19,11 @@ export const ActiveNode = () => {
   useNodeActionExpander(activeNode);
 
   return (
-    <div role='none' className='sr-only'>
+    <div className='sr-only'>
       {/* TODO(wittjosiah): Weird that this is a surface, feel like it's not really render logic.
             Probably this lives in React-land currently in order to access translations? */}
       <Surface.Surface
-        role='document-title'
+        type={AppSurface.DocumentTitle}
         data={{ subject: activeNode } satisfies AppSurface.DocumentTitleData}
         limit={1}
       />

package/src/containers/DeckLayout/DeckLayout.stories.tsx

@@ -11,19 +11,20 @@ import { Capabilities, Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface, useOperationInvoker } from '@dxos/app-framework/ui';
 import { AppActivationEvents, AppCapabilities, AppNode, AppPlugin, LayoutOperation } from '@dxos/app-toolkit';
-import { useAppGraph, useLayout } from '@dxos/app-toolkit/ui';
+import { AppSurface, useAppGraph, useLayout } from '@dxos/app-toolkit/ui';
 import { invariant } from '@dxos/invariant';
 import { GraphBuilder, Node, NodeMatcher, useConnections } from '@dxos/plugin-graph';
 import { corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { useAsyncEffect } from '@dxos/react-hooks';
-import { Button, Icon, List, ListItem, Panel } from '@dxos/react-ui';
+import { Icon, List, ListItem, Panel } from '@dxos/react-ui';
 import { linkedSegment } from '@dxos/react-ui-attention';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 
 import { OperationHandler } from '#capabilities';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 import {
   DeckCapabilities,
   type EphemeralDeckState,
@@ -34,11 +35,13 @@ import {
   PLANK_COMPANION_TYPE,
 } from '#types';
 
-import { translations } from '../../translations';
 import { DeckLayout } from './DeckLayout';
 
 random.seed(1234);
 
+// TODO(burdon): Show/hide companions.
+// TODO(burdon): Companion width.
+
 // TODO(burdon): Factor out.
 const storyDeckSettings = Capability.makeModule(() =>
   Effect.sync(() => {
@@ -47,7 +50,7 @@ const storyDeckSettings = Capability.makeModule(() =>
       enableDeck: true,
       enableStatusbar: false,
       enableNativeRedirect: false,
-      encapsulatedPlanks: true,
+      encapsulatedPlanks: false,
     }).pipe(Atom.keepAlive);
 
     return [Capability.contributes(DeckCapabilities.Settings, settingsAtom)];
@@ -63,10 +66,10 @@ const storyDeckState = Capability.makeModule(() =>
       complementarySidebarPanel: undefined,
       activeDeck: 'default',
       previousDeck: 'default',
+      previousMode: {},
       decks: {
         default: { ...defaultDeck },
       },
-      previousMode: {},
     };
 
     const stateAtom = Atom.make<StoredDeckState>({ ...defaultStoredDeckState }).pipe(Atom.keepAlive);
@@ -169,35 +172,6 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
             filter: (data): data is { current: string } => typeof (data as any).current === 'string',
             component: ({ data, ref }) => <NavContainer current={data.current} ref={ref} />,
           }),
-          Surface.create({
-            id: 'story-article-companion',
-            role: 'article',
-            filter: (data): data is Record<string, unknown> =>
-              typeof data === 'object' && data !== null && (data as { companionTo?: unknown }).companionTo != null,
-            component: ({ data }) => {
-              const subject = (data as any)?.subject;
-              const companionTo = (data as any)?.companionTo;
-              const properties = (data as any)?.properties;
-              const variant = (data as any)?.variant as string | undefined;
-
-              if (companionTo == null) {
-                return <Loading />;
-              }
-
-              const jsonPayload = {
-                primaryItem: companionTo,
-                companion: { data: subject, properties, variant },
-              };
-
-              return (
-                <Json.Root data={jsonPayload}>
-                  <Json.Content>
-                    <Json.Data />
-                  </Json.Content>
-                </Json.Root>
-              );
-            },
-          }),
           Surface.create({
             id: 'story-article',
             role: 'article',
@@ -206,7 +180,6 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
             component: ({ data }) => {
               const subject = (data as any)?.subject;
               const attendableId = (data as any)?.attendableId as string | undefined;
-
               if (subject == null) {
                 return <Loading />;
               }
@@ -215,16 +188,45 @@ const TestPlugin = Plugin.define(pluginMeta).pipe(
                 <Panel.Root>
                   <Panel.Content className='grid grid-rows-[min-content_1fr]'>
                     {attendableId && <ItemComponent id={attendableId} />}
-                    <Json.Root data={subject}>
-                      <Json.Content>
-                        <Json.Data />
-                      </Json.Content>
-                    </Json.Root>
+                    <Syntax.Root data={subject}>
+                      <Syntax.Content>
+                        <Syntax.Filter />
+                        <Syntax.Viewport>
+                          <Syntax.Code />
+                        </Syntax.Viewport>
+                      </Syntax.Content>
+                    </Syntax.Root>
                   </Panel.Content>
                 </Panel.Root>
               );
             },
           }),
+          Surface.create({
+            id: 'story-article-companion',
+            role: 'article',
+            filter: (data): data is AppSurface.ArticleData<unknown, {}, unknown> =>
+              typeof data === 'object' && data !== null && (data as { companionTo?: unknown }).companionTo != null,
+            component: ({ data: { subject, companionTo, properties, variant } }) => {
+              if (companionTo == null) {
+                return <Loading />;
+              }
+
+              return (
+                <Syntax.Root
+                  data={{
+                    primaryItem: companionTo,
+                    companion: { data: subject, properties, variant },
+                  }}
+                >
+                  <Syntax.Content>
+                    <Syntax.Viewport>
+                      <Syntax.Code />
+                    </Syntax.Viewport>
+                  </Syntax.Content>
+                </Syntax.Root>
+              );
+            },
+          }),
         ]),
       ),
   }),
@@ -283,7 +285,7 @@ const NavContainer = forwardRef<HTMLDivElement, NavContainerProps>((_props, forw
         {items.map((node) => (
           <ListItem.Root
             key={node.id}
-            classNames={activeSet.has(node.id) ? 'bg-active-surface' : undefined}
+            classNames={activeSet.has(node.id) ? 'bg-current-surface' : undefined}
             onClick={() => void invokePromise(LayoutOperation.Set, { subject: [node.id] })}
           >
             {node.properties.icon && (
@@ -308,36 +310,43 @@ type ItemComponentProps = {
 const ItemComponent = ({ id }: ItemComponentProps) => {
   const { graph } = useAppGraph();
   const { invokePromise } = useOperationInvoker();
-
-  const plankConnections = useConnections(graph, id, 'child');
+  const connections = useConnections(graph, id, 'child');
   const items = useMemo(
-    () => plankConnections.filter((node) => !Node.isActionLike(node) && node.type !== PLANK_COMPANION_TYPE),
-    [plankConnections],
+    () => connections.filter((node) => !Node.isActionLike(node) && node.type !== PLANK_COMPANION_TYPE),
+    [connections],
   );
 
   return (
-    <Panel.Root>
-      <Panel.Content>
-        {items.map((node) => (
-          <Button
+    <List>
+      {items.map((node) => {
+        const open = () =>
+          void invokePromise(LayoutOperation.Open, { subject: [node.id], pivotId: id, navigation: 'immediate' });
+        return (
+          <ListItem.Root
             key={node.id}
-            variant='ghost'
-            onClick={() =>
-              void invokePromise(LayoutOperation.Open, {
-                subject: [node.id],
-                pivotId: id,
-                navigation: 'immediate',
-              })
-            }
+            classNames='dx-hover cursor-pointer'
+            role='button'
+            tabIndex={0}
+            onClick={open}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                open();
+              }
+            }}
           >
-            {node.properties.icon && <Icon icon={node.properties.icon} size={4} />}
-            <span className='truncate'>
+            {node.properties.icon && (
+              <ListItem.Endcap>
+                <Icon icon={node.properties.icon} size={4} />
+              </ListItem.Endcap>
+            )}
+            <ListItem.Heading classNames='truncate'>
               {typeof node.properties.label === 'string' ? node.properties.label : node.id}
-            </span>
-          </Button>
-        ))}
-      </Panel.Content>
-    </Panel.Root>
+            </ListItem.Heading>
+          </ListItem.Root>
+        );
+      })}
+    </List>
   );
 };
 
@@ -363,35 +372,26 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-const SoloStory = () => {
-  const { invokePromise } = useOperationInvoker();
-  useAsyncEffect(async () => {
-    await invokePromise(LayoutOperation.Open, { subject: [STORY_ITEMS[0].id], navigation: 'immediate' });
-    await invokePromise(LayoutOperation.SetLayoutMode, { mode: 'solo', subject: STORY_ITEMS[0].id });
-  });
-
-  return <DeckLayout />;
-};
-
 export const Solo: Story = {
-  render: () => <SoloStory />,
-};
-
-const MultiStory = () => {
-  const { invokePromise } = useOperationInvoker();
-  useAsyncEffect(async () => {
-    await invokePromise(LayoutOperation.Open, {
-      subject: [STORY_ITEMS[0].id],
-      navigation: 'immediate',
-    });
-    await invokePromise(LayoutOperation.SetLayoutMode, {
-      mode: 'multi',
+  render: () => {
+    const { invokePromise } = useOperationInvoker();
+    useAsyncEffect(async () => {
+      await invokePromise(LayoutOperation.Open, { subject: [STORY_ITEMS[0].id], navigation: 'immediate' });
+      await invokePromise(LayoutOperation.SetLayoutMode, { mode: 'solo', subject: STORY_ITEMS[0].id });
     });
-  });
 
-  return <DeckLayout />;
+    return <DeckLayout />;
+  },
 };
 
 export const Multi: Story = {
-  render: () => <MultiStory />,
+  render: () => {
+    const { invokePromise } = useOperationInvoker();
+    useAsyncEffect(async () => {
+      await invokePromise(LayoutOperation.Open, { subject: [STORY_ITEMS[0].id], navigation: 'immediate' });
+      await invokePromise(LayoutOperation.SetLayoutMode, { mode: 'multi' });
+    });
+
+    return <DeckLayout />;
+  },
 };

package/src/containers/DeckLayout/Dialog.tsx

@@ -5,6 +5,7 @@
 import React, { useCallback } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
 
 import { useDeckState } from '#hooks';
@@ -30,7 +31,7 @@ export const Dialog = () => {
       {dialogBlockAlign === 'end' ? (
         // TODO(burdon): Placeholder creates a suspense boundary; replace with defaults.
         <Surface.Surface
-          role='dialog'
+          type={AppSurface.Dialog}
           data={dialogContent ?? undefined}
           limit={1}
           fallback={PlankErrorFallback}
@@ -38,7 +39,12 @@ export const Dialog = () => {
         />
       ) : (
         <Overlay blockAlign={dialogBlockAlign} classNames={dialogOverlayClasses} style={dialogOverlayStyle}>
-          <Surface.Surface role='dialog' data={dialogContent ?? undefined} limit={1} fallback={PlankErrorFallback} />
+          <Surface.Surface
+            type={AppSurface.Dialog}
+            data={dialogContent ?? undefined}
+            limit={1}
+            fallback={PlankErrorFallback}
+          />
         </Overlay>
       )}
     </Root>

package/src/containers/DeckLayout/Fallback.tsx

@@ -12,7 +12,7 @@ const Fallback = () => {
   const { t } = useTranslation(meta.id);
 
   return (
-    <div role='none' className='min-h-screen w-full flex items-center justify-center p-8'>
+    <div className='min-h-screen w-full flex items-center justify-center p-8'>
       <p
         role='alert'
         className='flex items-center justify-center p-8 font-normal text-lg text-error-text border border-rose-fill rounded-md'

package/src/containers/DeckLayout/Popover.tsx

@@ -8,7 +8,7 @@ import * as Option from 'effect/Option';
 import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Annotation, Obj } from '@dxos/echo';
 import {
   Card,
@@ -122,8 +122,8 @@ export const PopoverContent = () => {
       >
         <Popover.Viewport>
           {/* Base popover */}
-          {state.popoverKind === 'base' && (
-            <Surface.Surface role='popover' data={state.popoverContent ?? undefined} limit={1} />
+          {state.popoverKind === 'base' && state.popoverContent && 'component' in state.popoverContent && (
+            <Surface.Surface type={AppSurface.Popover} data={state.popoverContent} limit={1} />
           )}
 
           {/* Card popover */}
@@ -147,7 +147,9 @@ export const PopoverContent = () => {
                   </Card.IconBlock>
                 </Card.Toolbar>
 
-                <Surface.Surface role='card--content' data={state.popoverContent ?? undefined} limit={1} />
+                {state.popoverContent && 'subject' in state.popoverContent && (
+                  <Surface.Surface type={AppSurface.Card} data={state.popoverContent} limit={1} />
+                )}
               </Card.Root>
             </Menu.Root>
           )}

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

@@ -14,14 +14,14 @@ import { corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { Main } from '@dxos/react-ui';
 import { StackContext } from '@dxos/react-ui-stack';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { Loading } from '@dxos/react-ui/testing';
 import { Organization } from '@dxos/types';
 
 import { DeckSettings, DeckState } from '#capabilities';
 import { meta as pluginMeta } from '#meta';
+import { translations } from '#translations';
 
-import { translations } from '../../translations';
 import { Plank } from './Plank';
 
 const TestPlugin = Plugin.define(pluginMeta).pipe(
@@ -51,11 +51,13 @@ const storySurfaceExtension = Capability.contributes(
       }
 
       return (
-        <Json.Root data={subject}>
-          <Json.Content>
-            <Json.Data />
-          </Json.Content>
-        </Json.Root>
+        <Syntax.Root data={subject}>
+          <Syntax.Content>
+            <Syntax.Viewport>
+              <Syntax.Code />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
       );
     },
   }),
@@ -69,7 +71,7 @@ const DefaultStory = () => {
   return (
     <Main.Root>
       <Main.Content bounce handlesFocus classNames='grid' style={{ '--main-spacing': '0' } as any}>
-        <div role='none' className='relative overflow-hidden bg-deck-surface'>
+        <div className='relative overflow-hidden bg-deck-surface'>
           <StackContext.Provider value={{ orientation: 'horizontal', size: 'contain', rail: true }}>
             <Plank.Root graph={graph} part='solo' layoutMode='solo'>
               <Plank.Content solo companion={false} encapsulate={false}>
@@ -94,6 +96,7 @@ const meta = {
     }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
 } satisfies Meta<typeof DefaultStory>;