@dxos/plugin-deck 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.8.1-main.ae460ac",
+  "version": "0.8.1-staging.31c3ee1",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,33 +31,32 @@
     "src"
   ],
   "dependencies": {
-    "@fluentui/react-tabster": "9.23.3",
+    "@fluentui/react-tabster": "^9.24.2",
     "@preact/signals-core": "^1.6.0",
-    "effect": "^3.12.3",
+    "effect": "3.13.3",
     "immer": "^10.1.1",
-    "@dxos/app-framework": "0.8.1-main.ae460ac",
-    "@dxos/async": "0.8.1-main.ae460ac",
-    "@dxos/artifact": "0.8.1-main.ae460ac",
-    "@dxos/echo-schema": "0.8.1-main.ae460ac",
-    "@dxos/debug": "0.8.1-main.ae460ac",
-    "@dxos/invariant": "0.8.1-main.ae460ac",
-    "@dxos/echo-signals": "0.8.1-main.ae460ac",
-    "@dxos/live-object": "0.8.1-main.ae460ac",
-    "@dxos/keyboard": "0.8.1-main.ae460ac",
-    "@dxos/log": "0.8.1-main.ae460ac",
-    "@dxos/local-storage": "0.8.1-main.ae460ac",
-    "@dxos/plugin-attention": "0.8.1-main.ae460ac",
-    "@dxos/plugin-client": "0.8.1-main.ae460ac",
-    "@dxos/plugin-graph": "0.8.1-main.ae460ac",
-    "@dxos/plugin-theme": "0.8.1-main.ae460ac",
-    "@dxos/react-client": "0.8.1-main.ae460ac",
-    "@dxos/plugin-observability": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-attention": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-form": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-tabs": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-text-tooltip": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-stack": "0.8.1-main.ae460ac",
-    "@dxos/util": "0.8.1-main.ae460ac"
+    "@dxos/app-framework": "0.8.1-staging.31c3ee1",
+    "@dxos/async": "0.8.1-staging.31c3ee1",
+    "@dxos/artifact": "0.8.1-staging.31c3ee1",
+    "@dxos/debug": "0.8.1-staging.31c3ee1",
+    "@dxos/invariant": "0.8.1-staging.31c3ee1",
+    "@dxos/echo-signals": "0.8.1-staging.31c3ee1",
+    "@dxos/echo-schema": "0.8.1-staging.31c3ee1",
+    "@dxos/keyboard": "0.8.1-staging.31c3ee1",
+    "@dxos/live-object": "0.8.1-staging.31c3ee1",
+    "@dxos/local-storage": "0.8.1-staging.31c3ee1",
+    "@dxos/plugin-graph": "0.8.1-staging.31c3ee1",
+    "@dxos/plugin-attention": "0.8.1-staging.31c3ee1",
+    "@dxos/plugin-observability": "0.8.1-staging.31c3ee1",
+    "@dxos/log": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-attention": "0.8.1-staging.31c3ee1",
+    "@dxos/plugin-theme": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-form": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-tabs": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-text-tooltip": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-stack": "0.8.1-staging.31c3ee1",
+    "@dxos/react-client": "0.8.1-staging.31c3ee1",
+    "@dxos/util": "0.8.1-staging.31c3ee1"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -66,16 +65,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/storybook-utils": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac"
+    "@dxos/react-ui": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui-theme": "0.8.1-staging.31c3ee1",
+    "@dxos/storybook-utils": "0.8.1-staging.31c3ee1"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1-main.ae460ac",
-    "@dxos/react-ui-theme": "0.8.1-main.ae460ac"
+    "@dxos/react-ui-theme": "0.8.1-staging.31c3ee1",
+    "@dxos/react-ui": "0.8.1-staging.31c3ee1"
   },
   "publishConfig": {
     "access": "public"

package/src/DeckPlugin.ts

@@ -56,7 +56,6 @@ export const DeckPlugin = () =>
     defineModule({
       id: `${meta.id}/module/react-root`,
       activatesOn: Events.Startup,
-      activatesBefore: [DeckEvents.SetupComplementaryPanels],
       activate: ReactRoot,
     }),
     defineModule({

package/src/capabilities/capabilities.ts

@@ -6,10 +6,9 @@ import { defineCapability } from '@dxos/app-framework';
 import { type DeepReadonly } from '@dxos/util';
 
 import { DECK_PLUGIN } from '../meta';
-import { type DeckState, type Panel } from '../types';
+import { type DeckPluginState } 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<Panel>(`${DECK_PLUGIN}/capability/complementary-panel`);
+  export const DeckState = defineCapability<DeepReadonly<DeckPluginState>>(`${DECK_PLUGIN}/capability/state`);
+  export const MutableDeckState = defineCapability<DeckPluginState>(`${DECK_PLUGIN}/capability/state`);
 }

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 = () => {