@dxos/plugin-deck 0.6.12-staging.e11e696 → 0.6.12

package/src/DeckPlugin.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { ArrowsOut, type IconProps } from '@phosphor-icons/react';
 import { batch, effect } from '@preact/signals-core';
 import { setAutoFreeze } from 'immer';
 import React, { type PropsWithChildren } from 'react';
@@ -40,6 +41,7 @@ import { createExtension, type Node } from '@dxos/plugin-graph';
 import { ObservabilityAction } from '@dxos/plugin-observability/meta';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { translations as deckTranslations } from '@dxos/react-ui-deck';
+import { Mosaic } from '@dxos/react-ui-mosaic';
 
 import {
   DeckLayout,
@@ -69,7 +71,7 @@ const isSocket = !!(globalThis as any).__args;
 // TODO(mjamesderocher): Can we get this directly from Socket?
 const appScheme = 'composer://';
 
-// TODO(burdon): Evolve into customizable prefs.
+// TODO(burdon): Evolve into customizable prefs,.
 const customSlots: DeckLayoutProps['slots'] = {
   wallpaper: {
     classNames:
@@ -188,25 +190,6 @@ export const DeckPlugin = ({
     }
   };
 
-  /**
-   * Update the active state and ensure that attention is on an active element.
-   */
-  const handleSetLocation = (next: LayoutParts) => {
-    if (attentionPlugin) {
-      const attended = attentionPlugin.provides.attention.attended;
-      const [attendedId] = Array.from(attended);
-      const ids = (layout.values.layoutMode === 'deck' ? next.main : next.solo)?.map(({ id }) => id) ?? [];
-      const isAttendedAvailable = !!attendedId && ids.includes(attendedId);
-      if (!isAttendedAvailable) {
-        const nextAttended = next.main?.[0]?.id;
-        const article = document.querySelector<HTMLElement>(`article[data-attendable-id="${nextAttended}"]`);
-        article?.focus();
-      }
-    }
-
-    location.values.active = next;
-  };
-
   return {
     meta,
     ready: async (plugins) => {
@@ -215,21 +198,16 @@ export const DeckPlugin = ({
       attentionPlugin = resolvePlugin(plugins, parseAttentionPlugin);
       clientPlugin = resolvePlugin(plugins, parseClientPlugin);
 
+      // prettier-ignore
       layout
         .prop({ key: 'layoutMode', storageKey: 'layout-mode', type: LocalStorageStore.enum<LayoutMode>() })
         .prop({ key: 'sidebarOpen', storageKey: 'sidebar-open', type: LocalStorageStore.bool() })
-        .prop({
-          key: 'complementarySidebarOpen',
-          storageKey: 'complementary-sidebar-open',
-          type: LocalStorageStore.bool(),
-        });
-
-      deck.prop({
-        key: 'plankSizing',
-        storageKey: 'plank-sizing',
-        type: LocalStorageStore.json<Record<string, number>>(),
-      });
+        .prop({ key: 'complementarySidebarOpen', storageKey: 'complementary-sidebar-open', type: LocalStorageStore.bool() });
+
+      // prettier-ignore
+      deck.prop({ key: 'plankSizing', storageKey: 'plank-sizing', type: LocalStorageStore.json<Record<string, number>>() });
 
+      // prettier-ignore
       location
         .prop({ key: 'active', storageKey: 'active', type: LocalStorageStore.json<LayoutParts>() })
         .prop({ key: 'closed', storageKey: 'closed', type: LocalStorageStore.json<string[]>() });
@@ -242,17 +220,14 @@ export const DeckPlugin = ({
         }),
       );
 
+      // prettier-ignore
       settings
         .prop({ key: 'showFooter', storageKey: 'show-footer', type: LocalStorageStore.bool() })
         .prop({ key: 'customSlots', storageKey: 'customSlots', type: LocalStorageStore.bool() })
         .prop({ key: 'flatDeck', storageKey: 'flatDeck', type: LocalStorageStore.bool() })
         .prop({ key: 'enableNativeRedirect', storageKey: 'enable-native-redirect', type: LocalStorageStore.bool() })
         .prop({ key: 'disableDeck', storageKey: 'disable-deck', type: LocalStorageStore.bool() }) // Deprecated.
-        .prop({
-          key: 'newPlankPositioning',
-          storageKey: 'newPlankPositioning',
-          type: LocalStorageStore.enum<NewPlankPositioning>(),
-        })
+        .prop({ key: 'newPlankPositioning', storageKey: 'newPlankPositioning', type: LocalStorageStore.enum<NewPlankPositioning>() })
         .prop({ key: 'overscroll', storageKey: 'overscroll', type: LocalStorageStore.enum<Overscroll>() });
 
       if (!isSocket && settings.values.enableNativeRedirect) {
@@ -262,7 +237,7 @@ export const DeckPlugin = ({
       handleNavigation = async () => {
         const pathname = window.location.pathname;
         if (pathname === '/reset') {
-          handleSetLocation({ sidebar: [{ id: NAV_ID }] });
+          location.values.active = { sidebar: [{ id: NAV_ID }] };
           location.values.closed = [];
           layout.values.layoutMode = 'solo';
           window.location.pathname = '/';
@@ -275,7 +250,7 @@ export const DeckPlugin = ({
         }
 
         const startingLayout = removePart(location.values.active, 'solo');
-        handleSetLocation(mergeLayoutParts(layoutFromUri, startingLayout));
+        location.values.active = mergeLayoutParts(layoutFromUri, startingLayout);
         layout.values.layoutMode = 'solo';
       };
 
@@ -335,7 +310,8 @@ export const DeckPlugin = ({
                 },
                 properties: {
                   label: ['toggle fullscreen label', { ns: DECK_PLUGIN }],
-                  icon: 'ph--arrows-out--regular',
+                  icon: (props: IconProps) => <ArrowsOut {...props} />,
+                  iconSymbol: 'ph--arrows-out--regular',
                   keyBinding: {
                     macos: 'ctrl+meta+f',
                     windows: 'shift+ctrl+f',
@@ -353,27 +329,31 @@ export const DeckPlugin = ({
       ),
       root: () => {
         return (
-          <DeckLayout
-            layoutParts={location.values.active}
-            showHintsFooter={settings.values.showFooter}
-            overscroll={settings.values.overscroll}
-            flatDeck={settings.values.flatDeck}
-            slots={settings.values.customSlots ? customSlots : undefined}
-            toasts={layout.values.toasts}
-            onDismissToast={(id) => {
-              const index = layout.values.toasts.findIndex((toast) => toast.id === id);
-              if (index !== -1) {
-                // Allow time for the toast to animate out.
-                // TODO(burdon): Factor out and unregister timeout.
-                setTimeout(() => {
-                  if (layout.values.toasts[index].id === currentUndoId) {
-                    currentUndoId = undefined;
-                  }
-                  layout.values.toasts.splice(index, 1);
-                }, 1_000);
-              }
-            }}
-          />
+          <Mosaic.Root>
+            <DeckLayout
+              attention={attentionPlugin?.provides.attention ?? { attended: new Set() }}
+              layoutParts={location.values.active}
+              showHintsFooter={settings.values.showFooter}
+              overscroll={settings.values.overscroll}
+              flatDeck={settings.values.flatDeck}
+              slots={settings.values.customSlots ? customSlots : undefined}
+              toasts={layout.values.toasts}
+              onDismissToast={(id) => {
+                const index = layout.values.toasts.findIndex((toast) => toast.id === id);
+                if (index !== -1) {
+                  // Allow time for the toast to animate out.
+                  // TODO(burdon): Factor out and unregister timeout.
+                  setTimeout(() => {
+                    if (layout.values.toasts[index].id === currentUndoId) {
+                      currentUndoId = undefined;
+                    }
+                    layout.values.toasts.splice(index, 1);
+                  }, 1_000);
+                }
+              }}
+            />
+            <Mosaic.DragOverlay />
+          </Mosaic.Root>
         );
       },
       surface: {
@@ -492,7 +472,7 @@ export const DeckPlugin = ({
                   }
                 });
 
-                handleSetLocation(newLayout);
+                location.values.active = newLayout;
               });
 
               const ids = openIds(location.values.active);
@@ -542,12 +522,10 @@ export const DeckPlugin = ({
               const layoutEntry = { id: data.id };
               const effectivePart = getEffectivePart(data.part, layout.values.layoutMode);
 
-              handleSetLocation(
-                openEntry(location.values.active, effectivePart, layoutEntry, {
-                  positioning: data.positioning ?? settings.values.newPlankPositioning,
-                  pivotId: data.pivotId,
-                }),
-              );
+              location.values.active = openEntry(location.values.active, effectivePart, layoutEntry, {
+                positioning: data.positioning ?? settings.values.newPlankPositioning,
+                pivotId: data.pivotId,
+              });
 
               const intents = [];
               if (data.scrollIntoView && layout.values.layoutMode === 'deck') {
@@ -583,11 +561,7 @@ export const DeckPlugin = ({
                   }
                 });
 
-                handleSetLocation(newLayout);
-                // TODO(wittjosiah): This needs to also set the closed state.
-                //   The closed state should be the existing closed state plus the newly closed ids.
-                //   The closed state should also be updated when opening entries to remove the id from closed.
-                //   When SET is called the closed ids should also be calculated and set.
+                location.values.active = newLayout;
                 return { data: true };
               });
             }
@@ -596,7 +570,7 @@ export const DeckPlugin = ({
             case NavigationAction.SET: {
               return batch(() => {
                 if (isLayoutParts(intent.data?.activeParts)) {
-                  handleSetLocation(intent.data!.activeParts);
+                  location.values.active = intent.data!.activeParts;
                 }
                 return { data: true };
               });
@@ -607,12 +581,10 @@ export const DeckPlugin = ({
                 if (isLayoutAdjustment(intent.data)) {
                   const adjustment = intent.data;
                   if (adjustment.type === 'increment-end' || adjustment.type === 'increment-start') {
-                    handleSetLocation(
-                      incrementPlank(location.values.active, {
-                        type: adjustment.type,
-                        layoutCoordinate: adjustment.layoutCoordinate,
-                      }),
-                    );
+                    location.values.active = incrementPlank(location.values.active, {
+                      type: adjustment.type,
+                      layoutCoordinate: adjustment.layoutCoordinate,
+                    });
                   }
 
                   if (adjustment.type === 'solo') {

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { type LayoutParts, SLUG_PATH_SEPARATOR, Surface } from '@dxos/app-framework';
 import { useGraph } from '@dxos/plugin-graph';
 import { Main } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
+import { createAttendableAttributes } from '@dxos/react-ui-attention';
 import { deckGrid } from '@dxos/react-ui-deck';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -18,42 +18,41 @@ import { useNode, useNodeActionExpander } from '../../hooks';
 import { useLayout } from '../LayoutContext';
 
 export type ComplementarySidebarProps = {
-  context?: string;
+  id?: string;
   layoutParts: LayoutParts;
   flatDeck?: boolean;
 };
 
-export const ComplementarySidebar = ({ context, layoutParts, flatDeck }: ComplementarySidebarProps) => {
+export const ComplementarySidebar = ({ id, layoutParts, flatDeck }: ComplementarySidebarProps) => {
   const { popoverAnchorId } = useLayout();
-  const attended = useAttended();
-  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${context}` : undefined;
   const { graph } = useGraph();
   const node = useNode(graph, id);
+  // const complementaryAvailable = useMemo(() => id === NAV_ID || !!node, [id, node]);
+  const complementaryAttrs = createAttendableAttributes(id?.split(SLUG_PATH_SEPARATOR)[0] ?? 'never');
 
   useNodeActionExpander(node);
 
   return (
-    <Main.ComplementarySidebar>
-      <div role='none' className={mx(deckGrid, 'grid-cols-1 bs-full')}>
-        <NodePlankHeading
-          node={node}
-          id={id}
-          layoutParts={layoutParts}
-          layoutPart='complementary'
-          popoverAnchorId={popoverAnchorId}
-          flatDeck={flatDeck}
-        />
-        {/* TODO(wittjosiah): Render some placeholder when node is undefined. */}
-        {node && (
+    <Main.ComplementarySidebar {...complementaryAttrs}>
+      {node ? (
+        <div role='none' className={mx(deckGrid, 'grid-cols-1 bs-full')}>
+          <NodePlankHeading
+            node={node}
+            id={id}
+            layoutParts={layoutParts}
+            layoutPart='complementary'
+            popoverAnchorId={popoverAnchorId}
+            flatDeck={flatDeck}
+          />
           <Surface
             role='article'
-            data={{ subject: node.properties.object, part: 'complementary', popoverAnchorId }}
+            data={{ subject: node.data, part: 'complementary', popoverAnchorId }}
             limit={1}
             fallback={PlankContentError}
             placeholder={<PlankLoading />}
           />
-        )}
-      </div>
+        </div>
+      ) : null}
     </Main.ComplementarySidebar>
   );
 };

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,9 +3,11 @@
 //
 
 import { Sidebar as MenuIcon } from '@phosphor-icons/react';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, useLayoutEffect, type UIEvent } from 'react';
 
 import {
+  SLUG_PATH_SEPARATOR,
+  type Attention,
   type LayoutEntry,
   type LayoutParts,
   Surface,
@@ -13,8 +15,7 @@ import {
   firstIdInPart,
   usePlugin,
 } from '@dxos/app-framework';
-import { Button, Dialog, Main, Popover, useOnTransition, useTranslation } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
+import { Button, Dialog, Main, Popover, useTranslation } from '@dxos/react-ui';
 import { Deck } from '@dxos/react-ui-deck';
 import { getSize } from '@dxos/react-ui-theme';
 
@@ -34,6 +35,7 @@ import { useLayout } from '../LayoutContext';
 
 export type DeckLayoutProps = {
   layoutParts: LayoutParts;
+  attention: Attention;
   toasts: ToastSchema[];
   flatDeck?: boolean;
   overscroll: Overscroll;
@@ -46,6 +48,7 @@ export type DeckLayoutProps = {
 
 export const DeckLayout = ({
   layoutParts,
+  attention,
   toasts,
   flatDeck,
   overscroll,
@@ -67,42 +70,36 @@ export const DeckLayout = ({
   } = context;
   const { t } = useTranslation(DECK_PLUGIN);
   const { plankSizing } = useDeckContext();
-  const attended = useAttended();
   const searchPlugin = usePlugin('dxos.org/plugin/search');
   const fullScreenSlug = useMemo(() => firstIdInPart(layoutParts, 'fullScreen'), [layoutParts]);
 
-  const scrollLeftRef = useRef<number | null>();
-  const deckRef = useRef<HTMLDivElement>(null);
-
-  // Ensure the first plank is attended when the deck is first rendered.
-  useEffect(() => {
-    const firstId = layoutMode === 'solo' ? firstIdInPart(layoutParts, 'solo') : firstIdInPart(layoutParts, 'main');
-    if (attended.length === 0 && firstId) {
-      // TODO(wittjosiah): Focusing the type button is a workaround.
-      //   If the plank is directly focused on first load the focus ring appears.
-      document.querySelector<HTMLElement>(`article[data-attendable-id="${firstId}"] button`)?.focus();
-    }
-  }, []);
+  const [scrollLeft, setScrollLeft] = useState<number | null>(null);
+  const deckRef = useRef<HTMLDivElement | null>(null);
+  const restoreScrollRef = useRef<boolean>(false);
 
   /**
    * Clear scroll restoration state if the window is resized
    */
   const handleResize = useCallback(() => {
-    scrollLeftRef.current = null;
+    setScrollLeft(null);
   }, []);
-
   useEffect(() => {
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, [handleResize]);
 
-  const restoreScroll = useCallback(() => {
-    if (deckRef.current && scrollLeftRef.current != null) {
-      deckRef.current.scrollLeft = scrollLeftRef.current;
+  /**
+   * Restore scroll when returning to deck mode
+   */
+  useLayoutEffect(() => {
+    if (layoutMode !== 'deck') {
+      restoreScrollRef.current = true;
+    } else if (restoreScrollRef.current && deckRef.current && scrollLeft) {
+      // console.log('[restoring scrollLeft]', scrollLeft);
+      deckRef.current.scrollLeft = scrollLeft;
+      restoreScrollRef.current = false;
     }
-  }, []);
-
-  useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
+  }, [layoutMode, deckRef.current, scrollLeft]);
 
   /**
    * Save scroll position as the user scrolls
@@ -110,13 +107,22 @@ export const DeckLayout = ({
   const handleScroll = useCallback(
     (event: UIEvent) => {
       if (layoutMode === 'deck' && event.currentTarget === event.target) {
-        scrollLeftRef.current = (event.target as HTMLDivElement).scrollLeft;
+        // console.log('[save scroll left]', (event.target as HTMLDivElement).scrollLeft);
+        setScrollLeft((event.target as HTMLDivElement).scrollLeft);
       }
     },
     [layoutMode],
   );
 
-  const firstAttendedId = attended[0];
+  const complementarySlug = useMemo(() => {
+    const entry = layoutParts.complementary?.at(0);
+    if (entry) {
+      return entry.path ? `${entry.id}${SLUG_PATH_SEPARATOR}${entry.path}` : entry.id;
+    }
+  }, [layoutParts]);
+
+  const firstAttendedId = useMemo(() => Array.from(attention.attended ?? [])[0], [attention.attended]);
+
   useEffect(() => {
     // TODO(burdon): Can we prevent the need to re-scroll since the planks are preserved?
     //  E.g., hide the deck and just move the solo article?
@@ -139,12 +145,10 @@ export const DeckLayout = ({
     return parts;
   }, [layoutParts.main, layoutParts.solo]);
 
-  const padding = useMemo(() => {
-    if (layoutMode === 'deck' && overscroll === 'centering') {
-      return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
-    }
-    return {};
-  }, [layoutMode, overscroll, layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen]);
+  const padding =
+    layoutMode === 'deck' && overscroll === 'centering'
+      ? calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen)
+      : {};
 
   if (layoutMode === 'fullscreen') {
     return <Fullscreen id={fullScreenSlug} />;
@@ -169,17 +173,25 @@ export const DeckLayout = ({
       <Main.Root
         navigationSidebarOpen={context.sidebarOpen}
         onNavigationSidebarOpenChange={(next) => (context.sidebarOpen = next)}
-        complementarySidebarOpen={context.complementarySidebarOpen}
-        onComplementarySidebarOpenChange={(next) => (context.complementarySidebarOpen = next)}
+        {...(complementarySidebarOpen !== null && {
+          complementarySidebarOpen: /* complementaryAvailable && */ context.complementarySidebarOpen as boolean,
+          onComplementarySidebarOpenChange: (next) => (context.complementarySidebarOpen = next),
+        })}
       >
         {/* Notch */}
         <Main.Notch classNames='z-[21]'>
           <Surface role='notch-start' />
-          <Button onClick={() => (context.sidebarOpen = !context.sidebarOpen)} variant='ghost' classNames='p-1'>
+          <Button
+            // disabled={!sidebarAvailable}
+            onClick={() => (context.sidebarOpen = !context.sidebarOpen)}
+            variant='ghost'
+            classNames='p-1'
+          >
             <span className='sr-only'>{t('open navigation sidebar label')}</span>
             <MenuIcon weight='light' className={getSize(5)} />
           </Button>
           <Button
+            // disabled={!complementaryAvailable}
             onClick={() => (context.complementarySidebarOpen = !context.complementarySidebarOpen)}
             variant='ghost'
             classNames='p-1'
@@ -191,11 +203,10 @@ export const DeckLayout = ({
         </Main.Notch>
 
         {/* Left sidebar. */}
-        <Sidebar layoutParts={layoutParts} />
+        <Sidebar attention={attention} layoutParts={layoutParts} />
 
         {/* Right sidebar. */}
-        {/* TODO(wittjosiah): Get context from layout parts. */}
-        <ComplementarySidebar context='comments' layoutParts={layoutParts} flatDeck={flatDeck} />
+        <ComplementarySidebar id={complementarySlug} layoutParts={layoutParts} flatDeck={flatDeck} />
 
         {/* Dialog overlay to dismiss dialogs. */}
         <Main.Overlay />

package/src/components/DeckLayout/NodePlankHeading.tsx

@@ -2,11 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Placeholder } from '@phosphor-icons/react';
 import React, { Fragment, useEffect } from 'react';
 
 import {
   LayoutAction,
   NavigationAction,
+  SLUG_COLLECTION_INDICATOR,
   SLUG_PATH_SEPARATOR,
   Surface,
   useIntentDispatcher,
@@ -14,10 +16,11 @@ import {
   partLength,
   type LayoutParts,
   type LayoutPart,
+  type LayoutEntry,
 } from '@dxos/app-framework';
 import { type Node, useGraph } from '@dxos/plugin-graph';
-import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
-import { PlankHeading } from '@dxos/react-ui-deck';
+import { Popover, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
+import { PlankHeading, plankHeadingIconProps } from '@dxos/react-ui-deck';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 
 import { DECK_PLUGIN } from '../../meta';
@@ -27,6 +30,8 @@ export const NodePlankHeading = ({
   id,
   layoutParts,
   layoutPart,
+  // TODO(wittjosiah): Unused?
+  layoutEntry,
   popoverAnchorId,
   pending,
   flatDeck,
@@ -35,13 +40,14 @@ export const NodePlankHeading = ({
   id?: string;
   layoutParts?: LayoutParts;
   layoutPart?: LayoutPart;
+  layoutEntry?: LayoutEntry;
   popoverAnchorId?: string;
   pending?: boolean;
   flatDeck?: boolean;
 }) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const { graph } = useGraph();
-  const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
+  const Icon = node?.properties?.icon ?? Placeholder;
   const label = pending
     ? t('pending heading')
     : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
@@ -74,8 +80,7 @@ export const NodePlankHeading = ({
       <ActionRoot>
         {node ? (
           <PlankHeading.ActionsMenu
-            icon={icon}
-            related={layoutPart === 'complementary'}
+            Icon={Icon}
             attendableId={attendableId}
             triggerLabel={t('actions menu label')}
             actions={graph.actions(node)}
@@ -88,16 +93,12 @@ export const NodePlankHeading = ({
         ) : (
           <PlankHeading.Button>
             <span className='sr-only'>{label}</span>
-            <Icon icon={icon} size={5} />
+            <Icon {...plankHeadingIconProps} />
           </PlankHeading.Button>
         )}
       </ActionRoot>
       <TextTooltip text={label} onlyWhenTruncating>
-        <PlankHeading.Label
-          attendableId={attendableId}
-          related={layoutPart === 'complementary'}
-          {...(pending && { classNames: 'text-description' })}
-        >
+        <PlankHeading.Label attendableId={node?.id} {...(pending && { classNames: 'text-description' })}>
           {label}
         </PlankHeading.Label>
       </TextTooltip>
@@ -142,6 +143,7 @@ export const NodePlankHeading = ({
                     action: NavigationAction.CLOSE,
                     data: {
                       activeParts: {
+                        complementary: [`${id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`],
                         [layoutPart]: [id],
                       },
                     },
@@ -149,7 +151,7 @@ export const NodePlankHeading = ({
               : { action: NavigationAction.ADJUST, data: { type: eventType, layoutCoordinate } },
           );
         }}
-        close={layoutPart === 'complementary' ? 'minify-end' : true}
+        close={layoutCoordinate?.part === 'complementary' ? 'minify-end' : true}
       />
     </PlankHeading.Root>
   );

package/src/components/DeckLayout/Plank.tsx

@@ -19,7 +19,7 @@ import {
 import { debounce } from '@dxos/async';
 import { useGraph } from '@dxos/plugin-graph';
 import { Button, Tooltip, useTranslation } from '@dxos/react-ui';
-import { useAttendableAttributes } from '@dxos/react-ui-attention';
+import { createAttendableAttributes } from '@dxos/react-ui-attention';
 import { Plank as NaturalPlank } from '@dxos/react-ui-deck';
 import { mainIntrinsicSize } from '@dxos/react-ui-theme';
 
@@ -52,7 +52,7 @@ export const Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layou
   const rootElement = useRef<HTMLDivElement | null>(null);
   const resizeable = layoutMode === 'deck';
 
-  const attendableAttrs = useAttendableAttributes(entry.id);
+  const attendableAttrs = createAttendableAttributes(entry.id);
   const coordinate: LayoutCoordinate = { part, entryId: entry.id };
 
   const size = plankSizing?.[entry.id] as number | undefined;

package/src/components/DeckLayout/Sidebar.tsx

@@ -4,19 +4,18 @@
 
 import React, { useMemo } from 'react';
 
-import { type LayoutParts, openIds, Surface } from '@dxos/app-framework';
+import { type Attention, type LayoutParts, openIds, Surface } from '@dxos/app-framework';
 import { Main } from '@dxos/react-ui';
-import { useAttended } from '@dxos/react-ui-attention';
 
 import { useLayout } from '../LayoutContext';
 
 export type SidebarProps = {
+  attention: Attention;
   layoutParts: LayoutParts;
 };
 
-export const Sidebar = ({ layoutParts }: SidebarProps) => {
+export const Sidebar = ({ attention, layoutParts }: SidebarProps) => {
   const { layoutMode, popoverAnchorId } = useLayout();
-  const attended = useAttended();
 
   const activeIds = useMemo(() => {
     if (layoutMode === 'solo') {
@@ -32,9 +31,9 @@ export const Sidebar = ({ layoutParts }: SidebarProps) => {
     () => ({
       popoverAnchorId,
       activeIds,
-      attended,
+      attended: attention.attended,
     }),
-    [popoverAnchorId, activeIds, attended],
+    [popoverAnchorId, activeIds, attention.attended],
   );
   return (
     <Main.NavigationSidebar>

package/src/hooks/useNode.ts

@@ -16,13 +16,9 @@ import { type Graph, type Node } from '@dxos/plugin-graph';
  */
 // TODO(wittjosiah): Factor out.
 export const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {
-  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);
+  const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id) : undefined);
 
   useEffect(() => {
-    if (!id && nodeState) {
-      setNodeState(undefined);
-    }
-
     if (nodeState?.id === id || !id) {
       return;
     }

package/src/layout.ts

@@ -1,7 +1,6 @@
 //
 // Copyright 2024 DXOS.org
 //
-
 import { produce } from 'immer';
 
 import {