@dxos/plugin-deck 0.8.1-staging.391c573 → 0.8.1-staging.9eaf14f

package/src/capabilities/intent-resolver.ts

@@ -16,16 +16,26 @@ import {
   chain,
 } from '@dxos/app-framework';
 import { getTypename, S } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
 import { isReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { type Node } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { isNonNullable } from '@dxos/util';
+import { byPosition, isNonNullable } from '@dxos/util';
 
 import { DeckCapabilities } from './capabilities';
-import { closeEntry, incrementPlank, openEntry } from '../layout';
+import { closeEntry, createEntryId, incrementPlank, openEntry } from '../layout';
 import { DECK_PLUGIN } from '../meta';
-import { DeckAction, type LayoutMode, type DeckSettingsProps, isLayoutMode, getMode } from '../types';
+import {
+  DeckAction,
+  type LayoutMode,
+  type DeckSettingsProps,
+  isLayoutMode,
+  getMode,
+  defaultDeck,
+  PLANK_COMPANION_TYPE,
+} from '../types';
 import { setActive } from '../util';
 
 export default (context: PluginsContext) =>
@@ -201,7 +211,7 @@ export default (context: PluginsContext) =>
           }
           state.activeDeck = subject;
           if (!state.decks[subject]) {
-            state.decks[subject] = { initialized: false, active: [], inactive: [], fullscreen: false, plankSizing: {} };
+            state.decks[subject] = { ...defaultDeck };
           }
         });
 
@@ -239,13 +249,14 @@ export default (context: PluginsContext) =>
         const previouslyOpenIds = new Set<string>(state.deck.solo ? [state.deck.solo] : state.deck.active);
         batch(() => {
           const next = state.deck.solo
-            ? (subject as string[])
+            ? (subject as string[]).map((id) => createEntryId(id, options?.variant))
             : subject.reduce(
                 (acc, entryId) =>
                   openEntry(acc, entryId, {
                     key: options?.key,
                     positioning: options?.positioning ?? settings?.newPlankPositioning,
                     pivotId: options?.pivotId,
+                    variant: options?.variant,
                   }),
                 state.deck.active,
               );
@@ -262,13 +273,13 @@ export default (context: PluginsContext) =>
               ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: newlyOpen[0] ?? subject[0] })]
               : []),
             createIntent(LayoutAction.Expose, { part: 'navigation', subject: newlyOpen[0] ?? subject[0] }),
-            ...newlyOpen.map((id) => {
-              const active = graph?.findNode(id)?.data;
+            ...newlyOpen.map((subjectId) => {
+              const active = graph?.findNode(subjectId)?.data;
               const typename = isReactiveObject(active) ? getTypename(active) : undefined;
               return createIntent(ObservabilityAction.SendEvent, {
                 name: 'navigation.activate',
                 properties: {
-                  id,
+                  subjectId,
                   typename,
                 },
               });
@@ -287,8 +298,16 @@ export default (context: PluginsContext) =>
         const active = state.deck.solo ? [state.deck.solo] : state.deck.active;
         const next = subject.reduce((acc, id) => closeEntry(acc, id), active);
         const toAttend = setActive({ next, state, attention });
+
+        const clearCompanionIntents = subject
+          .filter((id) => state.deck.activeCompanions && id in state.deck.activeCompanions)
+          .map((primary) => createIntent(DeckAction.ChangeCompanion, { primary, companion: null }));
+
         return {
-          intents: toAttend ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: toAttend })] : [],
+          intents: [
+            ...clearCompanionIntents,
+            ...(toAttend ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: toAttend })] : []),
+          ],
         };
       },
     }),
@@ -321,11 +340,29 @@ export default (context: PluginsContext) =>
         state.deck.plankSizing[data.id] = data.size;
       },
     }),
+    createResolver({
+      intent: DeckAction.ChangeCompanion,
+      resolve: (data) => {
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        // TODO(thure): Reactivity only works when creating a lexically new `activeCompanions`… Are these not proxy objects?
+        if (data.companion === null) {
+          const { [data.primary]: _, ...nextActiveCompanions } = state.deck.activeCompanions ?? {};
+          state.deck.activeCompanions = nextActiveCompanions;
+        } else {
+          invariant(data.companion !== data.primary);
+          state.deck.activeCompanions = {
+            ...state.deck.activeCompanions,
+            [data.primary]: data.companion,
+          };
+        }
+      },
+    }),
     createResolver({
       intent: DeckAction.Adjust,
       resolve: (adjustment) => {
         const state = context.requestCapability(DeckCapabilities.MutableDeckState);
         const attention = context.requestCapability(AttentionCapabilities.Attention);
+        const { graph } = context.requestCapability(Capabilities.AppGraph);
 
         return batch(() => {
           if (adjustment.type === 'increment-end' || adjustment.type === 'increment-start') {
@@ -336,6 +373,23 @@ export default (context: PluginsContext) =>
             });
           }
 
+          if (adjustment.type === 'companion') {
+            const node = graph.findNode(adjustment.id);
+            const [companion] = node
+              ? graph
+                  .nodes(node, { filter: (n): n is Node<any> => n.type === PLANK_COMPANION_TYPE })
+                  .toSorted((a, b) => byPosition(a.properties, b.properties))
+              : [];
+            if (companion) {
+              return {
+                intents: [
+                  // TODO(wittjosiah): This should remember the previously selected companion.
+                  createIntent(DeckAction.ChangeCompanion, { primary: adjustment.id, companion: companion.id }),
+                ],
+              };
+            }
+          }
+
           if (adjustment.type === 'solo') {
             const entryId = adjustment.id;
             if (!state.deck.solo) {

package/src/capabilities/react-root.tsx

@@ -9,14 +9,12 @@ import { Capabilities, contributes, useCapability } from '@dxos/app-framework';
 import { DeckCapabilities } from './capabilities';
 import { DeckLayout } from '../components';
 import { DECK_PLUGIN } from '../meta';
-import { type DeckSettingsProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactRoot, {
     id: DECK_PLUGIN,
     root: () => {
       const layout = useCapability(DeckCapabilities.MutableDeckState);
-      const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!.value;
 
       const handleDismissToast = useCallback(
         (id: string) => {
@@ -35,12 +33,6 @@ export default () =>
         [layout.toasts],
       );
 
-      return (
-        <DeckLayout
-          showHints={settings.showHints}
-          overscroll={settings.overscroll}
-          onDismissToast={handleDismissToast}
-        />
-      );
+      return <DeckLayout onDismissToast={handleDismissToast} />;
     },
   });

package/src/capabilities/react-surface.tsx

@@ -7,19 +7,18 @@ import React from 'react';
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
 import { SettingsStore } from '@dxos/local-storage';
 
-import { LayoutSettings } from '../components';
-import { Banner } from '../components/DeckLayout/Banner';
+import { DeckSettings, Banner } from '../components';
 import { DECK_PLUGIN } from '../meta';
 import { type DeckSettingsProps } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${DECK_PLUGIN}/settings`,
+      id: `${DECK_PLUGIN}/plugin-settings`,
       role: 'article',
       filter: (data): data is { subject: SettingsStore<DeckSettingsProps> } =>
         data.subject instanceof SettingsStore && data.subject.prefix === DECK_PLUGIN,
-      component: ({ data: { subject } }) => <LayoutSettings settings={subject.value} />,
+      component: ({ data: { subject } }) => <DeckSettings settings={subject.value} />,
     }),
     createSurface({
       id: `${DECK_PLUGIN}/banner`,

package/src/capabilities/settings.ts

@@ -11,11 +11,16 @@ import { DeckSettingsSchema, type DeckSettingsProps } from '../types';
 export default () => {
   const settings = create<DeckSettingsProps>({
     showHints: false,
+    enableDeck: true,
     enableNativeRedirect: false,
-    enableStatusbar: true,
+    enableStatusbar: false,
     newPlankPositioning: 'start',
     overscroll: 'none',
   });
 
-  return contributes(Capabilities.Settings, { schema: DeckSettingsSchema, prefix: DECK_PLUGIN, value: settings });
+  return contributes(Capabilities.Settings, {
+    schema: DeckSettingsSchema,
+    prefix: DECK_PLUGIN,
+    value: settings,
+  });
 };

package/src/capabilities/state.ts

@@ -10,7 +10,7 @@ import { type SidebarState } from '@dxos/react-ui';
 
 import { DeckCapabilities } from './capabilities';
 import { DECK_PLUGIN } from '../meta';
-import { getMode, type Deck, type DeckState } from '../types';
+import { getMode, type DeckState, type DeckPluginState, defaultDeck } from '../types';
 
 const boolean = /true|false/;
 
@@ -32,7 +32,7 @@ const migrateSidebarState = () => {
 export default () => {
   migrateSidebarState();
 
-  const state = new LocalStorageStore<DeckState>(DECK_PLUGIN, {
+  const state = new LocalStorageStore<DeckPluginState>(DECK_PLUGIN, {
     sidebarState: 'expanded',
     complementarySidebarState: 'collapsed',
     complementarySidebarPanel: undefined,
@@ -48,14 +48,7 @@ export default () => {
     activeDeck: 'default',
     previousDeck: 'default',
     decks: {
-      default: {
-        initialized: false,
-        active: [],
-        inactive: [],
-        fullscreen: false,
-        solo: undefined,
-        plankSizing: {},
-      },
+      default: { ...defaultDeck },
     },
     get deck() {
       const deck = this.decks[this.activeDeck];
@@ -70,7 +63,7 @@ export default () => {
     .prop({ key: 'sidebarState', type: LocalStorageStore.enum<SidebarState>() })
     .prop({ key: 'complementarySidebarState', type: LocalStorageStore.enum<SidebarState>() })
     .prop({ key: 'complementarySidebarPanel', type: LocalStorageStore.string({ allowUndefined: true }) })
-    .prop({ key: 'decks', type: LocalStorageStore.json<Record<string, Deck>>() })
+    .prop({ key: 'decks', type: LocalStorageStore.json<Record<string, DeckState>>() })
     .prop({ key: 'activeDeck', type: LocalStorageStore.string() })
     .prop({ key: 'previousDeck', type: LocalStorageStore.string() });
 

package/src/capabilities/tools.ts

@@ -14,12 +14,14 @@ import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 
 import { meta } from '../meta';
+import { DeckAction } from '../types';
 
 // TODO(burdon): Factor out.
 declare global {
   interface ToolContextExtensions {
     dispatch?: PromiseIntentDispatcher;
     pivotId?: string;
+    part?: 'deck' | 'dialog';
   }
 }
 
@@ -27,10 +29,9 @@ export default () =>
   contributes(Capabilities.Tools, [
     defineTool(meta.id, {
       name: 'show',
-      // TODO(ZaymonFC): We should update the prompt to teach the LLM the difference between object ids and fully qualified ids.
       description: `
-        Show an item in the app. Use this tool to open an artifact. 
-        When supplying IDs to show, they must be fully qualified like space:object.
+        Show an item as a companion to an existing plank. This will make the item appear alongside the primary content.
+        When supplying IDs, they must be fully qualified like space:object.
       `,
       caption: 'Showing item...',
       // TODO(wittjosiah): Refactor Layout/Navigation/Deck actions so that they can be used directly.
@@ -38,29 +39,40 @@ export default () =>
         id: S.String.annotations({
           description: 'The ID of the item to show.',
         }),
-        pivotId: S.optional(
-          S.String.annotations({
-            description: 'The ID of the chat. If provided, the item will be added after the pivot item.',
-          }),
-        ),
       }),
       execute: async ({ id }, { extensions }) => {
+        invariant(extensions?.pivotId, 'No pivot ID');
         invariant(extensions?.dispatch, 'No intent dispatcher');
-        const { data, error } = await extensions.dispatch(
-          createIntent(LayoutAction.Open, {
-            subject: [id],
-            part: 'main',
-            options: {
-              pivotId: extensions.pivotId,
-              positioning: 'end',
-            },
-          }),
-        );
-        if (error) {
-          return ToolResult.Error(error.message);
-        }
 
-        return ToolResult.Success(data);
+        if (extensions.part === 'deck') {
+          const { data, error } = await extensions.dispatch(
+            createIntent(DeckAction.ChangeCompanion, {
+              primary: extensions.pivotId,
+              companion: id,
+            }),
+          );
+          if (error) {
+            return ToolResult.Error(error.message);
+          }
+
+          return ToolResult.Success(data);
+        } else {
+          const { data, error } = await extensions.dispatch(
+            createIntent(LayoutAction.Open, {
+              subject: [id],
+              part: 'main',
+              options: {
+                pivotId: extensions.pivotId,
+                positioning: 'end',
+              },
+            }),
+          );
+          if (error) {
+            return ToolResult.Error(error.message);
+          }
+
+          return ToolResult.Success(data);
+        }
       },
     }),
   ]);

package/src/capabilities/url-handler.ts

@@ -6,6 +6,7 @@ import { Capabilities, contributes, createIntent, LayoutAction, type PluginsCont
 import { scheduledEffect } from '@dxos/echo-signals/core';
 
 import { DeckCapabilities } from './capabilities';
+import { defaultDeck } from '../types';
 
 // TODO(wittjosiah): Cleanup the url handling. May justify introducing routing capabilities.
 export default async (context: PluginsContext) => {
@@ -17,14 +18,7 @@ export default async (context: PluginsContext) => {
     if (pathname === '/reset') {
       state.activeDeck = 'default';
       state.decks = {
-        default: {
-          initialized: false,
-          active: [],
-          inactive: [],
-          fullscreen: false,
-          solo: undefined,
-          plankSizing: {},
-        },
+        default: { ...defaultDeck },
       };
       window.location.pathname = '/';
       return;

package/src/components/DeckLayout/ActiveNode.tsx

@@ -5,9 +5,10 @@
 import React from 'react';
 
 import { Surface, useAppGraph } from '@dxos/app-framework';
+import { useNode } from '@dxos/plugin-graph';
 import { useAttended } from '@dxos/react-ui-attention';
 
-import { useNode, useNodeActionExpander } from '../../hooks';
+import { useNodeActionExpander } from '../../hooks';
 
 // TODO(burdon): Factor out to effect in plugin set document title.
 export const ActiveNode = () => {

package/src/components/DeckLayout/Banner.tsx

@@ -5,12 +5,14 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { type ThemedClassName } from '@dxos/react-ui';
+import { useTranslation, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { CloseSidebarButton, ToggleSidebarButton } from './SidebarButton';
+import { DECK_PLUGIN } from '../../meta';
+import { CloseSidebarButton, ToggleSidebarButton } from '../Sidebar';
 
 export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'topbar' | 'sidebar' }>) => {
+  const { t } = useTranslation(DECK_PLUGIN);
   return (
     <header
       className={mx(
@@ -21,7 +23,7 @@ export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'top
       )}
     >
       {variant === 'sidebar' ? <CloseSidebarButton /> : <ToggleSidebarButton />}
-      <span className='self-center grow mis-1'>Composer</span>
+      <span className='self-center grow mis-1'>{t('current app name', { ns: 'appkit' })}</span>
       {variant === 'topbar' && (
         <div role='none' className='absolute inset-0 pointer-events-none'>
           <div role='none' className='grid bs-full pointer-fine:p-1 max-is-md mli-auto pointer-events-auto'>

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
 
-import { ToggleSidebarButton } from './SidebarButton';
 import { layoutAppliesTopbar, useBreakpoints } from '../../util';
+import { ToggleSidebarButton } from '../Sidebar';
 import { fixedSidebarToggleStyles } from '../fragments';
 
 export const ContentEmpty = () => {

package/src/components/DeckLayout/DeckLayout.tsx

@@ -6,9 +6,10 @@ import { untracked } from '@preact/signals-core';
 import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment, useState } from 'react';
 
 import {
+  Capabilities,
   LayoutAction,
-  createIntent,
   Surface,
+  createIntent,
   useCapability,
   useIntentDispatcher,
   usePluginManager,
@@ -27,32 +28,29 @@ import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-sta
 import { mainPaddingTransitions } from '@dxos/react-ui-theme';
 
 import { ActiveNode } from './ActiveNode';
-import { ComplementarySidebar } from './ComplementarySidebar';
 import { ContentEmpty } from './ContentEmpty';
 import { Fullscreen } from './Fullscreen';
-import { Plank } from './Plank';
-import { PlankContentError } from './PlankError';
-import { Sidebar } from './Sidebar';
-import { ToggleComplementarySidebarButton, ToggleSidebarButton } from './SidebarButton';
 import { StatusBar } from './StatusBar';
 import { Toast } from './Toast';
 import { Topbar } from './Topbar';
 import { DeckCapabilities } from '../../capabilities';
-import { getMode, type Overscroll } from '../../types';
+import { DECK_PLUGIN } from '../../meta';
+import { type DeckSettingsProps, getMode } from '../../types';
 import { calculateOverscroll, layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
+import { Plank, PlankContentError } from '../Plank';
+import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
 import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
 
 export type DeckLayoutProps = {
-  overscroll: Overscroll;
-  showHints: boolean;
   onDismissToast: (id: string) => void;
 };
 
-const PlankSeparator = ({ index }: { index: number }) =>
-  index > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: index * 2 }} /> : null;
+const PlankSeparator = ({ order }: { order: number }) =>
+  order > 0 ? <span role='separator' className='row-span-2 bg-deck is-4' style={{ gridColumn: order }} /> : null;
 
-export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayoutProps) => {
+export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!.value;
   const context = useCapability(DeckCapabilities.MutableDeckState);
   const {
     sidebarState,
@@ -68,7 +66,7 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
     deck,
     toasts,
   } = context;
-  const { active, fullscreen, solo, plankSizing } = deck;
+  const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
@@ -120,6 +118,15 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
     }
   }, [isNotMobile, deck, dispatch]);
 
+  // If deck is disabled in settings, ensure that the layout is in solo mode.
+  useEffect(() => {
+    if (!settings.enableDeck) {
+      void dispatch(
+        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: active[0], options: { mode: 'solo' } }),
+      );
+    }
+  }, [settings.enableDeck, dispatch, active]);
+
   /**
    * Clear scroll restoration state if the window is resized
    */
@@ -156,11 +163,11 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
   const isEmpty = !solo && active.length === 0;
 
   const padding = useMemo(() => {
-    if (!solo && overscroll === 'centering') {
+    if (!solo && settings.overscroll === 'centering') {
       return calculateOverscroll(active.length);
     }
     return {};
-  }, [solo, overscroll, deck]);
+  }, [solo, settings.overscroll, deck]);
 
   const mainPosition = useMemo(
     () => [
@@ -187,6 +194,17 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
   );
   const handlePopoverClose = useCallback(() => handlePopoverOpenChange(false), [handlePopoverOpenChange]);
 
+  const { order, itemsCount }: { order: Record<string, number>; itemsCount: number } = useMemo(() => {
+    return active.reduce(
+      (acc: { order: Record<string, number>; itemsCount: number }, entryId) => {
+        acc.order[entryId] = acc.itemsCount + 1;
+        acc.itemsCount += activeCompanions?.[entryId] ? 3 : 2;
+        return acc;
+      },
+      { order: {}, itemsCount: 0 },
+    );
+  }, [active, activeCompanions]);
+
   return (
     <Popover.Root modal open={!!(popoverAnchorId && delayedPopoverVisibility)} onOpenChange={handlePopoverOpenChange}>
       <ActiveNode />
@@ -249,18 +267,26 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
                 {!topbar && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
                 {!topbar && <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />}
                 <Stack
+                  ref={deckRef}
                   orientation='horizontal'
                   size='contain'
                   classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
-                  onScroll={handleScroll}
-                  itemsCount={2 * (active.length ?? 0) - 1}
+                  itemsCount={itemsCount - 1}
                   style={padding}
-                  ref={deckRef}
+                  onScroll={handleScroll}
                 >
-                  {active.map((entryId, index) => (
+                  {active.map((entryId) => (
                     <Fragment key={entryId}>
-                      <PlankSeparator index={index} />
-                      <Plank id={entryId} part='deck' order={index * 2 + 1} active={active} layoutMode={layoutMode} />
+                      <PlankSeparator order={order[entryId] - 1} />
+                      <Plank
+                        id={entryId}
+                        companionId={activeCompanions?.[entryId]}
+                        part='deck'
+                        order={order[entryId]}
+                        active={active}
+                        layoutMode={layoutMode}
+                        settings={settings}
+                      />
                     </Fragment>
                   ))}
                 </Stack>
@@ -273,15 +299,23 @@ export const DeckLayout = ({ overscroll, showHints, onDismissToast }: DeckLayout
                 {!topbar && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
                 {!topbar && <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />}
                 <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
-                  <Plank id={solo} part='solo' layoutMode={layoutMode} />
+                  <Plank
+                    id={solo}
+                    companionId={solo ? activeCompanions?.[solo] : undefined}
+                    part='solo'
+                    layoutMode={layoutMode}
+                    settings={settings}
+                  />
                 </StackContext.Provider>
               </div>
             </Main.Content>
           )}
 
-          {/* Status bar. */}
+          {/* Topbar. */}
           {topbar && <Topbar />}
-          {hoistStatusbar && <StatusBar showHints={showHints} />}
+
+          {/* Status bar. */}
+          {hoistStatusbar && <StatusBar showHints={settings.showHints} />}
         </Main.Root>
       )}
 

package/src/components/DeckLayout/Fullscreen.tsx

@@ -5,11 +5,11 @@
 import React from 'react';
 
 import { Surface, useAppGraph } from '@dxos/app-framework';
+import { useNode } from '@dxos/plugin-graph';
 import { fixedInsetFlexLayout } from '@dxos/react-ui-theme';
 
 import { Fallback } from './Fallback';
 import { SURFACE_PREFIX } from './constants';
-import { useNode } from '../../hooks';
 
 export const Fullscreen = ({ id }: { id?: string }) => {
   const { graph } = useAppGraph();

package/src/components/DeckLayout/Toast.tsx

@@ -9,9 +9,9 @@ import {
   Button,
   Icon,
   Toast as NaturalToast,
+  type ToastRootProps,
   toLocalizedString,
   useTranslation,
-  type ToastRootProps,
 } from '@dxos/react-ui';
 
 import { DECK_PLUGIN } from '../../meta';

package/src/components/DeckLayout/index.ts

@@ -3,4 +3,6 @@
 //
 
 export { NAV_ID } from './constants';
+
+export * from './Banner';
 export * from './DeckLayout';