@dxos/plugin-deck 0.7.5-main.e9bb01b → 0.7.5-staging.2ff1350

package/dist/types/src/util/index.d.ts

@@ -1,4 +1,5 @@
 export * from './overscroll';
+export * from './set-active';
 export * from './useBreakpoints';
 export * from './layoutAppliesTopbar';
 export * from './useHoistStatusbar';

package/dist/types/src/util/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}

package/dist/types/src/util/set-active.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-active.d.ts","sourceRoot":"","sources":["../../../../src/util/set-active.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,SAAS,+BAAgC,gBAAgB,uBA8BrE,CAAC"}

package/dist/types/src/util/useHoistStatusbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHoistStatusbar.d.ts","sourceRoot":"","sources":["../../../../src/util/useHoistStatusbar.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,iBAAiB,eAAgB,MAAM,YAYnD,CAAC"}
+{"version":3,"file":"useHoistStatusbar.d.ts","sourceRoot":"","sources":["../../../../src/util/useHoistStatusbar.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,iBAAiB,eAAgB,MAAM,YAOnD,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.7.5-main.e9bb01b",
+  "version": "0.7.5-staging.2ff1350",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -32,31 +33,31 @@
   "dependencies": {
     "@fluentui/react-tabster": "9.23.3",
     "@preact/signals-core": "^1.6.0",
-    "effect": "^3.12.1",
+    "effect": "^3.12.3",
     "immer": "^10.1.1",
-    "@dxos/app-framework": "0.7.5-main.e9bb01b",
-    "@dxos/debug": "0.7.5-main.e9bb01b",
-    "@dxos/async": "0.7.5-main.e9bb01b",
-    "@dxos/echo-schema": "0.7.5-main.e9bb01b",
-    "@dxos/echo-signals": "0.7.5-main.e9bb01b",
-    "@dxos/invariant": "0.7.5-main.e9bb01b",
-    "@dxos/keyboard": "0.7.5-main.e9bb01b",
-    "@dxos/live-object": "0.7.5-main.e9bb01b",
-    "@dxos/local-storage": "0.7.5-main.e9bb01b",
-    "@dxos/plugin-attention": "0.7.5-main.e9bb01b",
-    "@dxos/plugin-client": "0.7.5-main.e9bb01b",
-    "@dxos/plugin-graph": "0.7.5-main.e9bb01b",
-    "@dxos/plugin-observability": "0.7.5-main.e9bb01b",
-    "@dxos/log": "0.7.5-main.e9bb01b",
-    "@dxos/plugin-theme": "0.7.5-main.e9bb01b",
-    "@dxos/react-client": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-attention": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-form": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-mosaic": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-stack": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-tabs": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-text-tooltip": "0.7.5-main.e9bb01b",
-    "@dxos/util": "0.7.5-main.e9bb01b"
+    "@dxos/app-framework": "0.7.5-staging.2ff1350",
+    "@dxos/artifact": "0.7.5-staging.2ff1350",
+    "@dxos/async": "0.7.5-staging.2ff1350",
+    "@dxos/debug": "0.7.5-staging.2ff1350",
+    "@dxos/echo-schema": "0.7.5-staging.2ff1350",
+    "@dxos/echo-signals": "0.7.5-staging.2ff1350",
+    "@dxos/keyboard": "0.7.5-staging.2ff1350",
+    "@dxos/invariant": "0.7.5-staging.2ff1350",
+    "@dxos/local-storage": "0.7.5-staging.2ff1350",
+    "@dxos/live-object": "0.7.5-staging.2ff1350",
+    "@dxos/log": "0.7.5-staging.2ff1350",
+    "@dxos/plugin-attention": "0.7.5-staging.2ff1350",
+    "@dxos/plugin-client": "0.7.5-staging.2ff1350",
+    "@dxos/plugin-graph": "0.7.5-staging.2ff1350",
+    "@dxos/plugin-observability": "0.7.5-staging.2ff1350",
+    "@dxos/plugin-theme": "0.7.5-staging.2ff1350",
+    "@dxos/react-client": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-form": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-attention": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-tabs": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-text-tooltip": "0.7.5-staging.2ff1350",
+    "@dxos/util": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-stack": "0.7.5-staging.2ff1350"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -65,16 +66,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b",
-    "@dxos/storybook-utils": "0.7.5-main.e9bb01b"
+    "@dxos/react-ui": "0.7.5-staging.2ff1350",
+    "@dxos/storybook-utils": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-theme": "0.7.5-staging.2ff1350"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b",
-    "@dxos/react-ui": "0.7.5-main.e9bb01b"
+    "@dxos/react-ui": "0.7.5-staging.2ff1350",
+    "@dxos/react-ui-theme": "0.7.5-staging.2ff1350"
   },
   "publishConfig": {
     "access": "public"

package/src/DeckPlugin.ts

@@ -10,11 +10,12 @@ import { translations as stackTranslations } from '@dxos/react-ui-stack';
 import {
   AppGraphBuilder,
   CheckAppScheme,
+  DeckSettings,
   DeckState,
   LayoutIntentResolver,
   ReactRoot,
-  DeckSettings,
   ReactSurface,
+  Tools,
   UrlHandler,
 } from './capabilities';
 import { DeckEvents } from './events';
@@ -40,7 +41,10 @@ export const DeckPlugin = () =>
     }),
     defineModule({
       id: `${meta.id}/module/layout`,
-      activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
+      // TODO(wittjosiah): Does not integrate with settings store.
+      //   Should this be a different event?
+      //   Should settings store be renamed to be more generic?
+      activatesOn: oneOf(Events.SetupSettings, Events.SetupAppGraph),
       activatesAfter: [Events.LayoutReady, DeckEvents.StateReady],
       activate: DeckState,
     }),
@@ -52,16 +56,17 @@ export const DeckPlugin = () =>
     defineModule({
       id: `${meta.id}/module/react-root`,
       activatesOn: Events.Startup,
+      activatesBefore: [DeckEvents.SetupComplementaryPanels],
       activate: ReactRoot,
     }),
     defineModule({
       id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupSurfaces,
+      activatesOn: Events.SetupReactSurface,
       activate: ReactSurface,
     }),
     defineModule({
       id: `${meta.id}/module/layout-intent-resolver`,
-      activatesOn: Events.SetupIntents,
+      activatesOn: Events.SetupIntentResolver,
       activate: LayoutIntentResolver,
     }),
     defineModule({
@@ -69,6 +74,11 @@ export const DeckPlugin = () =>
       activatesOn: Events.SetupAppGraph,
       activate: AppGraphBuilder,
     }),
+    defineModule({
+      id: `${meta.id}/module/tools`,
+      activatesOn: Events.SetupArtifactDefinition,
+      activate: Tools,
+    }),
     defineModule({
       id: `${meta.id}/module/url`,
       activatesOn: allOf(Events.DispatcherReady, DeckEvents.StateReady),

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

@@ -98,7 +98,11 @@ export default (context: PluginsContext) =>
               { ns: DECK_PLUGIN },
             ],
             icon: 'ph--sidebar--regular',
+            keyBinding: {
+              macos: 'meta+b',
+            },
             disposition: 'pin-end',
+            position: 'hoist',
             l0Breakpoint: 'lg',
           },
         };

package/src/capabilities/capabilities.ts

@@ -2,17 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { defineCapability, type Label } from '@dxos/app-framework';
+import { defineCapability } from '@dxos/app-framework';
 import { type DeepReadonly } from '@dxos/util';
 
 import { DECK_PLUGIN } from '../meta';
-import { type DeckState } from '../types';
+import { type DeckState, type Panel } from '../types';
 
 export namespace DeckCapabilities {
   export const DeckState = defineCapability<DeepReadonly<DeckState>>(`${DECK_PLUGIN}/capability/state`);
   export const MutableDeckState = defineCapability<DeckState>(`${DECK_PLUGIN}/capability/state`);
-
-  export const ComplementaryPanel = defineCapability<{ id: string; label: Label; icon: string }>(
-    `${DECK_PLUGIN}/capability/complementary-panel`,
-  );
+  export const ComplementaryPanel = defineCapability<Panel>(`${DECK_PLUGIN}/capability/complementary-panel`);
 }

package/src/capabilities/index.ts

@@ -11,6 +11,7 @@ export const ReactRoot = lazy(() => import('./react-root'));
 export const ReactSurface = lazy(() => import('./react-surface'));
 export const DeckSettings = lazy(() => import('./settings'));
 export const DeckState = lazy(() => import('./state'));
+export const Tools = lazy(() => import('./tools'));
 export const UrlHandler = lazy(() => import('./url-handler'));
 
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -20,13 +20,13 @@ import { isReactiveObject } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { nonNullable } from '@dxos/util';
+import { isNonNullable } from '@dxos/util';
 
 import { DeckCapabilities } from './capabilities';
-import { setActive } from './set-active';
 import { closeEntry, incrementPlank, openEntry } from '../layout';
 import { DECK_PLUGIN } from '../meta';
 import { DeckAction, type LayoutMode, type DeckSettingsProps, isLayoutMode, getMode } from '../types';
+import { setActive } from '../util';
 
 export default (context: PluginsContext) =>
   contributes(Capabilities.IntentResolver, [
@@ -113,6 +113,7 @@ export default (context: PluginsContext) =>
         layout.popoverOpen = options.state ?? Boolean(subject);
         layout.popoverContent = subject ? { component: subject, props: options.props } : null;
         layout.popoverAnchorId = options.anchorId;
+        layout.popoverSide = options.side;
       },
     }),
     createResolver({
@@ -149,16 +150,16 @@ export default (context: PluginsContext) =>
           const current = deck.solo ? [deck.solo] : deck.active;
           // When un-soloing, the solo entry is added to the deck.
           const next = (
-            mode === 'solo' ? [subject ?? deck.solo ?? deck.active[0]] : [...deck.active, deck.solo]
-          ).filter(nonNullable);
+            mode !== 'deck' ? [subject ?? deck.solo ?? deck.active[0]] : [...deck.active, deck.solo]
+          ).filter(isNonNullable);
 
           const removed = current.filter((id) => !next.includes(id));
           const closed = Array.from(new Set([...deck.inactive.filter((id) => !next.includes(id)), ...removed]));
           deck.inactive = closed;
 
-          if (mode === 'solo' && next[0]) {
+          if (mode !== 'deck' && next[0]) {
             deck.solo = next[0];
-          } else if (mode !== 'solo' && deck.solo) {
+          } else if (mode === 'deck' && deck.solo) {
             deck.solo = undefined;
             deck.initialized = true;
           }
@@ -193,13 +194,18 @@ export default (context: PluginsContext) =>
       resolve: ({ subject }) => {
         const state = context.requestCapability(DeckCapabilities.MutableDeckState);
         batch(() => {
+          // TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
+          //  Ideally this should be worked into the data model in a generic way.
+          if (!state.activeDeck.startsWith('!')) {
+            state.previousDeck = state.activeDeck;
+          }
           state.activeDeck = subject;
           if (!state.decks[subject]) {
             state.decks[subject] = { initialized: false, active: [], inactive: [], fullscreen: false, plankSizing: {} };
           }
         });
 
-        const first = state.decks[state.activeDeck].active[0];
+        const first = state.deck.solo ? state.deck.solo : state.deck.active[0];
         if (first) {
           return {
             intents: [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: first })],
@@ -207,6 +213,17 @@ export default (context: PluginsContext) =>
         }
       },
     }),
+    createResolver({
+      intent: LayoutAction.UpdateLayout,
+      filter: (data): data is S.Schema.Type<typeof LayoutAction.RevertWorkspace.fields.input> =>
+        S.is(LayoutAction.RevertWorkspace.fields.input)(data),
+      resolve: () => {
+        const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+        return {
+          intents: [createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: state.previousDeck })],
+        };
+      },
+    }),
     createResolver({
       intent: LayoutAction.UpdateLayout,
       filter: (data): data is S.Schema.Type<typeof LayoutAction.Open.fields.input> =>
@@ -267,7 +284,8 @@ export default (context: PluginsContext) =>
       resolve: ({ subject }) => {
         const state = context.requestCapability(DeckCapabilities.MutableDeckState);
         const attention = context.requestCapability(AttentionCapabilities.Attention);
-        const next = subject.reduce((acc, id) => closeEntry(acc, id), state.deck.active);
+        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 });
         return {
           intents: toAttend ? [createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: toAttend })] : [],

package/src/capabilities/react-root.tsx

@@ -4,7 +4,7 @@
 
 import React, { useCallback } from 'react';
 
-import { Capabilities, contributes, useCapabilities, useCapability } from '@dxos/app-framework';
+import { Capabilities, contributes, useCapability } from '@dxos/app-framework';
 
 import { DeckCapabilities } from './capabilities';
 import { DeckLayout } from '../components';
@@ -17,7 +17,6 @@ export default () =>
     root: () => {
       const layout = useCapability(DeckCapabilities.MutableDeckState);
       const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!.value;
-      const panels = useCapabilities(DeckCapabilities.ComplementaryPanel);
 
       const handleDismissToast = useCallback(
         (id: string) => {
@@ -40,7 +39,6 @@ export default () =>
         <DeckLayout
           showHints={settings.showHints}
           overscroll={settings.overscroll}
-          panels={panels}
           onDismissToast={handleDismissToast}
         />
       );

package/src/capabilities/state.ts

@@ -46,6 +46,7 @@ export default () => {
     toasts: [],
     currentUndoId: undefined,
     activeDeck: 'default',
+    previousDeck: 'default',
     decks: {
       default: {
         initialized: false,
@@ -69,7 +70,8 @@ export default () => {
     .prop({ key: 'sidebarState', type: LocalStorageStore.enum<SidebarState>() })
     .prop({ key: 'complementarySidebarState', type: LocalStorageStore.enum<SidebarState>() })
     .prop({ key: 'decks', type: LocalStorageStore.json<Record<string, Deck>>() })
-    .prop({ key: 'activeDeck', type: LocalStorageStore.string() });
+    .prop({ key: 'activeDeck', type: LocalStorageStore.string() })
+    .prop({ key: 'previousDeck', type: LocalStorageStore.string() });
 
   const layout = create<Capabilities.Layout>({
     get mode() {
@@ -84,6 +86,9 @@ export default () => {
     get complementarySidebarOpen() {
       return state.values.complementarySidebarState === 'expanded';
     },
+    get workspace() {
+      return state.values.activeDeck;
+    },
     get active() {
       return state.values.deck.solo ? [state.values.deck.solo] : state.values.deck.active;
     },

package/src/capabilities/tools.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import {
+  contributes,
+  createIntent,
+  Capabilities,
+  LayoutAction,
+  type PromiseIntentDispatcher,
+} from '@dxos/app-framework';
+import { defineTool, ToolResult } from '@dxos/artifact';
+import { S } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+
+// TODO(burdon): Factor out.
+declare global {
+  interface ToolContextExtensions {
+    dispatch?: PromiseIntentDispatcher;
+    pivotId?: string;
+  }
+}
+
+export default () =>
+  contributes(Capabilities.Tools, [
+    defineTool({
+      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.',
+      // TODO(wittjosiah): Refactor Layout/Navigation/Deck actions so that they can be used directly.
+      schema: S.Struct({
+        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?.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);
+      },
+    }),
+  ]);

package/src/capabilities/url-handler.ts

@@ -31,15 +31,15 @@ export default async (context: PluginsContext) => {
     }
 
     const [_, nextDeck, nextSolo] = pathname.split('/');
-    if (nextDeck) {
+    if (nextDeck && nextDeck !== state.activeDeck) {
       await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: nextDeck }));
     }
 
-    if (nextSolo) {
+    if (nextSolo && nextSolo !== state.deck.solo) {
       await dispatch(
         createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: nextSolo, options: { mode: 'solo' } }),
       );
-    } else {
+    } else if (!nextSolo && state.deck.solo) {
       await dispatch(createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { mode: 'deck' } }));
     }
   };

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -9,6 +9,7 @@ import {
   LayoutAction,
   Surface,
   useAppGraph,
+  useCapabilities,
   useCapability,
   useIntentDispatcher,
 } from '@dxos/app-framework';
@@ -20,31 +21,34 @@ import { PlankContentError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
 import { ToggleComplementarySidebarButton } from './SidebarButton';
 import { DeckCapabilities } from '../../capabilities';
-import { useNode, useNodeActionExpander } from '../../hooks';
+import { useNode } from '../../hooks';
 import { DECK_PLUGIN } from '../../meta';
-import { SLUG_PATH_SEPARATOR, type Panel } from '../../types';
 import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
 
 export type ComplementarySidebarProps = {
-  panels: Panel[];
   current?: string;
 };
 
-export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarProps) => {
+export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layout = useCapability(DeckCapabilities.MutableDeckState);
   const attended = useAttended();
-  const panelIds = useMemo(() => panels.map((p) => p.id), [panels]);
-  const activePanelId = panelIds.find((p) => p === current) ?? panels[0].id;
-  const activeEntryId = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${activePanelId}` : undefined;
   const { graph } = useAppGraph();
-  const node = useNode(graph, activeEntryId);
-  const { t } = useTranslation(DECK_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  useNodeActionExpander(node);
+  const node = useNode(graph, attended[0]);
   const breakpoint = useBreakpoints();
   const topbar = layoutAppliesTopbar(breakpoint);
   const hoistStatusbar = useHoistStatusbar(breakpoint);
 
+  const panels = useCapabilities(DeckCapabilities.ComplementaryPanel);
+  const availablePanels = panels.filter((panel) => {
+    if (!node || !panel.filter) {
+      return true;
+    }
+
+    return panel.filter(node);
+  });
+  const activePanelId = availablePanels.find((panel) => panel.id === current)?.id ?? availablePanels[0]?.id;
   const [internalValue, setInternalValue] = useState(activePanelId);
 
   useEffect(() => {
@@ -65,6 +69,17 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
     [layout, activePanelId, dispatch],
   );
 
+  const data = useMemo(
+    () =>
+      node && {
+        id: node.id,
+        subject: node.data,
+        workspace: layout.activeDeck,
+        popoverAnchorId: layout.popoverAnchorId,
+      },
+    [node, layout.popoverAnchorId],
+  );
+
   // TODO(burdon): Scroll area should be controlled by surface.
   return (
     <Main.ComplementarySidebar
@@ -82,10 +97,10 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
       >
         <div
           role='none'
-          className='absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag'
+          className='absolute z-[1] inset-block-0 inline-end-0 !is-[--r0-size] pbs-[env(safe-area-inset-top)] pbe-[env(safe-area-inset-bottom)] border-is border-separator grid grid-cols-1 grid-rows-[1fr_min-content] bg-baseSurface contain-layout app-drag'
         >
           <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto'>
-            {panels.map((panel) => (
+            {availablePanels.map((panel) => (
               <Tabs.Tab key={panel.id} value={panel.id} asChild>
                 <IconButton
                   label={toLocalizedString(panel.label, t)}
@@ -115,14 +130,14 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
             <ToggleComplementarySidebarButton />
           </div>
         </div>
-        {panels.map((panel) => (
+        {availablePanels.map((panel) => (
           <Tabs.Tabpanel
             key={panel.id}
             value={panel.id}
-            classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content]'
+            classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]'
             {...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
           >
-            {panel.id === activePanelId && node && (
+            {panel.id === activePanelId && data && (
               <>
                 <h2 className='flex items-center pli-2 border-separator border-be'>
                   {toLocalizedString(panel.label, t)}
@@ -130,13 +145,8 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
                 <ScrollArea.Root>
                   <ScrollArea.Viewport>
                     <Surface
-                      key={activeEntryId}
                       role={`complementary--${activePanelId}`}
-                      data={{
-                        id: activeEntryId,
-                        subject: node.properties.object ?? node.properties.space,
-                        popoverAnchorId: layout.popoverAnchorId,
-                      }}
+                      data={data}
                       fallback={PlankContentError}
                       placeholder={<PlankLoading />}
                     />
@@ -148,7 +158,7 @@ export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarPr
                 {!hoistStatusbar && (
                   <div
                     role='contentinfo'
-                    className='flex flex-wrap justify-center items-center border-bs border-separator plb-1'
+                    className='flex flex-wrap justify-center items-center border-bs border-separator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]'
                   >
                     <Surface role='status-bar--r1-footer' limit={1} />
                   </div>