@dxos/plugin-deck 0.7.4 → 0.7.5-labs.071a3e2

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

@@ -0,0 +1,63 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes, createIntent, LayoutAction, type PluginsContext } from '@dxos/app-framework';
+import { scheduledEffect } from '@dxos/echo-signals/core';
+
+import { DeckCapabilities } from './capabilities';
+
+// TODO(wittjosiah): Cleanup the url handling. May justify introducing routing capabilities.
+export default async (context: PluginsContext) => {
+  const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher) ?? {};
+  const state = context.requestCapability(DeckCapabilities.MutableDeckState);
+
+  const handleNavigation = async () => {
+    const pathname = window.location.pathname;
+    if (pathname === '/reset') {
+      state.activeDeck = 'default';
+      state.decks = {
+        default: {
+          initialized: false,
+          active: [],
+          inactive: [],
+          fullscreen: false,
+          solo: undefined,
+          plankSizing: {},
+        },
+      };
+      window.location.pathname = '/';
+      return;
+    }
+
+    const [_, nextDeck, nextSolo] = pathname.split('/');
+    if (nextDeck) {
+      await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: nextDeck }));
+    }
+
+    if (nextSolo) {
+      await dispatch(
+        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: nextSolo, options: { mode: 'solo' } }),
+      );
+    } else {
+      await dispatch(createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { mode: 'deck' } }));
+    }
+  };
+
+  await handleNavigation();
+  window.addEventListener('popstate', handleNavigation);
+
+  const unsubscribe = scheduledEffect(
+    () => ({ solo: state.deck.solo, activeDeck: state.activeDeck }),
+    ({ solo, activeDeck }) => {
+      const path = solo ? `/${activeDeck}/${solo}` : `/${activeDeck}`;
+      // TODO(thure): In some browsers, this only preserves the most recent state change, even though this is not `history.replace`…
+      history.pushState(null, '', `${path}${window.location.search}`);
+    },
+  );
+
+  return contributes(Capabilities.Null, null, () => {
+    window.removeEventListener('popstate', handleNavigation);
+    unsubscribe();
+  });
+};

package/src/components/DeckLayout/ActiveNode.tsx

@@ -4,8 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
-import { useGraph } from '@dxos/plugin-graph';
+import { Surface, useAppGraph } from '@dxos/app-framework';
 import { useAttended } from '@dxos/react-ui-attention';
 
 import { useNode, useNodeActionExpander } from '../../hooks';
@@ -13,7 +12,7 @@ import { useNode, useNodeActionExpander } from '../../hooks';
 // TODO(burdon): Factor out to effect in plugin set document title.
 export const ActiveNode = () => {
   const [id] = useAttended();
-  const { graph } = useGraph();
+  const { graph } = useAppGraph();
   const activeNode = useNode(graph, id);
   useNodeActionExpander(activeNode);
 
@@ -21,7 +20,7 @@ export const ActiveNode = () => {
     <div role='none' className='sr-only'>
       {/* TODO(wittjosiah): Weird that this is a surface, feel like it's not really render logic.
             Probably this lives in React-land currently in order to access translations? */}
-      <Surface role='document-title' data={{ activeNode }} limit={1} />
+      <Surface role='document-title' data={{ subject: activeNode }} limit={1} />
     </div>
   );
 };

package/src/components/DeckLayout/Banner.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { CloseSidebarButton, ToggleSidebarButton } from './SidebarButton';
+
+export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'topbar' | 'sidebar' }>) => {
+  return (
+    <header
+      className={mx(
+        'flex items-stretch relative plb-1 pis-1 pie-2',
+        variant === 'topbar' &&
+          'fixed inset-inline-0 block-start-[env(safe-area-inset-top)] bs-[--rail-size] border-be border-separator',
+        classNames,
+      )}
+    >
+      {variant === 'sidebar' ? <CloseSidebarButton /> : <ToggleSidebarButton />}
+      <span className='self-center grow mis-1'>Composer</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'>
+            <Surface role='search-input' limit={1} />
+          </div>
+        </div>
+      )}
+      <span role='none' className='grow' />
+      <Surface role='header-end' limit={1} />
+      <Surface role='notch-start' limit={1} />
+    </header>
+  );
+};

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -2,27 +2,28 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, type MouseEvent } from 'react';
 
 import {
-  type LayoutCoordinate,
-  NavigationAction,
-  SLUG_PATH_SEPARATOR,
+  createIntent,
+  LayoutAction,
   Surface,
+  useAppGraph,
+  useCapability,
   useIntentDispatcher,
 } from '@dxos/app-framework';
-import { useGraph } from '@dxos/plugin-graph';
-import { Main, ScrollArea } from '@dxos/react-ui';
+import { Main, useTranslation, toLocalizedString, IconButton, ScrollArea } from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
-import { railGridHorizontal, StackContext } from '@dxos/react-ui-stack';
-import { mx } from '@dxos/react-ui-theme';
+import { Tabs } from '@dxos/react-ui-tabs';
 
-import { NodePlankHeading } from './NodePlankHeading';
 import { PlankContentError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
+import { ToggleComplementarySidebarButton } from './SidebarButton';
+import { DeckCapabilities } from '../../capabilities';
 import { useNode, useNodeActionExpander } from '../../hooks';
-import { type Panel } from '../../types';
-import { useLayout } from '../LayoutContext';
+import { DECK_PLUGIN } from '../../meta';
+import { SLUG_PATH_SEPARATOR, type Panel } from '../../types';
+import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
 
 export type ComplementarySidebarProps = {
   panels: Panel[];
@@ -30,60 +31,133 @@ export type ComplementarySidebarProps = {
 };
 
 export const ComplementarySidebar = ({ panels, current }: ComplementarySidebarProps) => {
-  const { popoverAnchorId } = useLayout();
+  const layout = useCapability(DeckCapabilities.MutableDeckState);
   const attended = useAttended();
-  const panel = (panels.find((p) => p.id === current) ?? panels[0])?.id;
-  const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR}${panel}` : undefined;
-  const { graph } = useGraph();
-  const node = useNode(graph, id);
-  const dispatch = useIntentDispatcher();
+  const panelIds = useMemo(() => panels.map((panel) => panel.id), [panels]);
+  const activePanelId = panelIds.find((panelId) => panelId === 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 breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint);
+  const hoistStatusbar = useHoistStatusbar(breakpoint);
 
-  const actions = useMemo(
-    () =>
-      panels.map(({ id, label, icon }) => ({
-        id: `complementary-${id}`,
-        data: () => {
-          void dispatch({ action: NavigationAction.OPEN, data: { activeParts: { complementary: id } } });
-        },
-        properties: {
-          label,
-          icon,
-          menuItemType: 'toggle',
-          isChecked: panel === id,
-        },
-      })),
-    [panel],
-  );
+  const [internalValue, setInternalValue] = useState(activePanelId);
+
+  useEffect(() => {
+    setInternalValue(activePanelId);
+  }, [activePanelId]);
 
-  // TODO(wittjosiah): Ensure that id is always defined.
-  const coordinate: LayoutCoordinate = useMemo(() => ({ entryId: id ?? 'unknown', part: 'complementary' }), [id]);
+  const handleTabClick = useCallback(
+    (event: MouseEvent) => {
+      const nextValue = event.currentTarget.getAttribute('data-value') as string;
+      if (nextValue === activePanelId) {
+        layout.complementarySidebarState = layout.complementarySidebarState === 'expanded' ? 'collapsed' : 'expanded';
+      } else {
+        setInternalValue(nextValue);
+        layout.complementarySidebarState = 'expanded';
+        void dispatch(createIntent(LayoutAction.UpdateComplementary, { part: 'complementary', subject: nextValue }));
+      }
+    },
+    [layout, activePanelId, dispatch],
+  );
 
   // TODO(burdon): Scroll area should be controlled by surface.
   return (
-    <Main.ComplementarySidebar>
-      <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', separators: false, rail: true }}>
-        <div role='none' className={mx(railGridHorizontal, 'grid grid-cols-[100%] bs-full')}>
-          <NodePlankHeading coordinate={coordinate} node={node} popoverAnchorId={popoverAnchorId} actions={actions} />
-          <ScrollArea.Root>
-            <ScrollArea.Viewport>
-              {node && (
-                <Surface
-                  key={id}
-                  role={`complementary--${panel}`}
-                  limit={1}
-                  data={{ id, subject: node.properties.object ?? node.properties.space, popoverAnchorId }}
-                  fallback={PlankContentError}
-                  placeholder={<PlankLoading />}
+    <Main.ComplementarySidebar
+      classNames={[
+        topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
+        hoistStatusbar && 'block-end-[--statusbar-size]',
+      ]}
+    >
+      <Tabs.Root
+        orientation='vertical'
+        verticalVariant='stateless'
+        value={internalValue}
+        attendableId={attended[0]}
+        classNames='contents'
+      >
+        <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'
+        >
+          <Tabs.Tablist classNames='grid grid-cols-1 auto-rows-[--rail-action] p-1 gap-1 !overflow-y-auto'>
+            {panels.map((panel) => (
+              <Tabs.Tab key={panel.id} value={panel.id} asChild>
+                <IconButton
+                  label={toLocalizedString(panel.label, t)}
+                  icon={panel.icon}
+                  size={5}
+                  iconOnly
+                  tooltipSide='left'
+                  data-value={panel.id}
+                  variant={
+                    activePanelId === panel.id
+                      ? layout.complementarySidebarState === 'expanded'
+                        ? 'primary'
+                        : 'default'
+                      : 'ghost'
+                  }
+                  onClick={handleTabClick}
                 />
-              )}
-              <ScrollArea.Scrollbar orientation='vertical'>
-                <ScrollArea.Thumb />
-              </ScrollArea.Scrollbar>
-            </ScrollArea.Viewport>
-          </ScrollArea.Root>
+              </Tabs.Tab>
+            ))}
+          </Tabs.Tablist>
+          {!hoistStatusbar && (
+            <div role='none' className='grid grid-cols-1 auto-rows-[--rail-item] p-1 overflow-y-auto'>
+              <Surface role='status-bar--r0-footer' limit={1} />
+            </div>
+          )}
+          <div role='none' className='hidden lg:grid grid-cols-1 auto-rows-[--rail-action] p-1'>
+            <ToggleComplementarySidebarButton />
+          </div>
         </div>
-      </StackContext.Provider>
+        {panels.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]'
+            {...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
+          >
+            {panel.id === activePanelId && node && (
+              <>
+                <h2 className='flex items-center pli-2 border-separator border-be'>
+                  {toLocalizedString(panel.label, t)}
+                </h2>
+                <ScrollArea.Root>
+                  <ScrollArea.Viewport>
+                    <Surface
+                      key={activeEntryId}
+                      role={`complementary--${activePanelId}`}
+                      data={{
+                        id: activeEntryId,
+                        subject: node.properties.object ?? node.properties.space,
+                        popoverAnchorId: layout.popoverAnchorId,
+                      }}
+                      fallback={PlankContentError}
+                      placeholder={<PlankLoading />}
+                    />
+                  </ScrollArea.Viewport>
+                  <ScrollArea.Scrollbar orientation='vertical'>
+                    <ScrollArea.Thumb />
+                  </ScrollArea.Scrollbar>
+                </ScrollArea.Root>
+                {!hoistStatusbar && (
+                  <div
+                    role='contentinfo'
+                    className='flex flex-wrap justify-center items-center border-bs border-separator plb-1'
+                  >
+                    <Surface role='status-bar--r1-footer' limit={1} />
+                  </div>
+                )}
+              </>
+            )}
+          </Tabs.Tabpanel>
+        ))}
+      </Tabs.Root>
     </Main.ComplementarySidebar>
   );
 };

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -6,16 +6,21 @@ import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
 
+import { ToggleSidebarButton } from './SidebarButton';
+import { layoutAppliesTopbar, useBreakpoints } from '../../util';
+import { fixedSidebarToggleStyles } from '../fragments';
+
 export const ContentEmpty = () => {
+  const breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint);
   return (
     <div
       role='none'
-      className='min-bs-screen is-dvw sm:is-full flex items-center justify-center p-8'
+      className='grid place-items-center p-8 relative bg-deck'
       data-testid='layoutPlugin.firstRunMessage'
     >
-      <div role='none' className='grid place-items-center grid-rows-[min-content_min-content]'>
-        <Surface role='keyshortcuts' />
-      </div>
+      <Surface role='keyshortcuts' />
+      {!topbar && <ToggleSidebarButton variant='default' classNames={fixedSidebarToggleStyles} />}
     </div>
   );
 };