@dxos/plugin-deck 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.8.4-main.a4bbb77",
+  "version": "0.8.4-main.ae835ea",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -40,44 +40,43 @@
     "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-context": "1.1.1",
     "immer": "^10.1.1",
-    "@dxos/ai": "0.8.4-main.a4bbb77",
-    "@dxos/app-framework": "0.8.4-main.a4bbb77",
-    "@dxos/assistant": "0.8.4-main.a4bbb77",
-    "@dxos/async": "0.8.4-main.a4bbb77",
-    "@dxos/blueprints": "0.8.4-main.a4bbb77",
-    "@dxos/debug": "0.8.4-main.a4bbb77",
-    "@dxos/echo": "0.8.4-main.a4bbb77",
-    "@dxos/echo-schema": "0.8.4-main.a4bbb77",
-    "@dxos/echo-signals": "0.8.4-main.a4bbb77",
-    "@dxos/invariant": "0.8.4-main.a4bbb77",
-    "@dxos/keyboard": "0.8.4-main.a4bbb77",
-    "@dxos/live-object": "0.8.4-main.a4bbb77",
-    "@dxos/local-storage": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-attention": "0.8.4-main.a4bbb77",
-    "@dxos/log": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-graph": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-observability": "0.8.4-main.a4bbb77",
-    "@dxos/react-client": "0.8.4-main.a4bbb77",
-    "@dxos/plugin-theme": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-attention": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-stack": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-tabs": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-form": "0.8.4-main.a4bbb77",
-    "@dxos/util": "0.8.4-main.a4bbb77"
+    "@dxos/ai": "0.8.4-main.ae835ea",
+    "@dxos/app-framework": "0.8.4-main.ae835ea",
+    "@dxos/async": "0.8.4-main.ae835ea",
+    "@dxos/debug": "0.8.4-main.ae835ea",
+    "@dxos/assistant": "0.8.4-main.ae835ea",
+    "@dxos/blueprints": "0.8.4-main.ae835ea",
+    "@dxos/echo": "0.8.4-main.ae835ea",
+    "@dxos/echo-signals": "0.8.4-main.ae835ea",
+    "@dxos/invariant": "0.8.4-main.ae835ea",
+    "@dxos/keyboard": "0.8.4-main.ae835ea",
+    "@dxos/live-object": "0.8.4-main.ae835ea",
+    "@dxos/local-storage": "0.8.4-main.ae835ea",
+    "@dxos/log": "0.8.4-main.ae835ea",
+    "@dxos/plugin-attention": "0.8.4-main.ae835ea",
+    "@dxos/plugin-observability": "0.8.4-main.ae835ea",
+    "@dxos/plugin-graph": "0.8.4-main.ae835ea",
+    "@dxos/plugin-theme": "0.8.4-main.ae835ea",
+    "@dxos/react-client": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-attention": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-form": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-stack": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-tabs": "0.8.4-main.ae835ea",
+    "@dxos/util": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.ae835ea"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "0.42.4",
     "@effect/platform": "0.92.1",
-    "@types/react": "~19.2.0",
-    "@types/react-dom": "~19.2.0",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
     "effect": "3.18.3",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77",
-    "@dxos/storybook-utils": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui": "0.8.4-main.a4bbb77"
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
+    "@dxos/storybook-utils": "0.8.4-main.ae835ea"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -85,8 +84,8 @@
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
   },
   "publishConfig": {
     "access": "public"

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

@@ -3,7 +3,8 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
@@ -20,7 +21,7 @@ export default (context: PluginContext) =>
       id: meta.id,
       actions: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => {

package/src/capabilities/intent-resolver.ts

@@ -3,7 +3,10 @@
 //
 
 import { batch } from '@preact/signals-core';
-import { Effect, Option, Schema, pipe } from 'effect';
+import * as Effect from 'effect/Effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import * as Schema from 'effect/Schema';
 
 import {
   Capabilities,
@@ -403,7 +406,7 @@ export default (context: PluginContext) =>
           }
 
           if (adjustment.type === 'companion') {
-            return pipe(
+            return Function.pipe(
               graph.getNode(adjustment.id),
               Option.map((node) =>
                 graph
@@ -454,7 +457,7 @@ export default (context: PluginContext) =>
                 return {
                   intents: [
                     // NOTE: The order of these is important.
-                    pipe(
+                    Function.pipe(
                       createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { mode: 'deck' } }),
                       chain(LayoutAction.Open, { part: 'main', subject: [entryId] }),
                     ),

package/src/capabilities/settings.ts

@@ -16,6 +16,7 @@ export default () => {
     enableNativeRedirect: false,
     newPlankPositioning: 'start',
     overscroll: 'none',
+    encapsulatedPlanks: false,
   });
 
   return contributes(Capabilities.Settings, {

package/src/capabilities/state.ts

@@ -30,6 +30,9 @@ const migrateSidebarState = () => {
   });
 };
 
+/**
+ * @deprecated
+ */
 export const DeckStateFactory = () => {
   migrateSidebarState();
 

package/src/capabilities/toolkit.ts

@@ -2,17 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Tool, Toolkit } from '@effect/ai';
-import { Effect, Schema } from 'effect';
+import * as Tool from '@effect/ai/Tool';
+import * as Toolkit from '@effect/ai/Toolkit';
+import * as Effect from 'effect/Effect';
+import * as Schema from 'effect/Schema';
 
-import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
+import {
+  Capabilities,
+  type Capability,
+  LayoutAction,
+  type PluginContext,
+  contributes,
+  createIntent,
+} from '@dxos/app-framework';
 import { ArtifactId } from '@dxos/assistant';
 import { type SpaceId } from '@dxos/keys';
 import { trim } from '@dxos/util';
 
 import { DeckCapabilities } from './capabilities';
 
-class DeckToolkit extends Toolkit.make(
+const Toolkit$ = Toolkit.make(
   Tool.make('open-item', {
     description: trim`
       Opens an item in the application.
@@ -23,9 +32,13 @@ class DeckToolkit extends Toolkit.make(
     success: Schema.Any,
     failure: Schema.Never,
   }),
-) {
-  static layer = (context: PluginContext) =>
-    DeckToolkit.toLayer({
+);
+
+export namespace DeckToolkit {
+  export const Toolkit = Toolkit$;
+
+  export const createLayer = (context: PluginContext) =>
+    Toolkit$.toLayer({
       'open-item': ({ id }) =>
         Effect.gen(function* () {
           const state = context.getCapability(DeckCapabilities.DeckState);
@@ -49,7 +62,7 @@ class DeckToolkit extends Toolkit.make(
     });
 }
 
-export default (context: PluginContext) => [
-  contributes(Capabilities.Toolkit, DeckToolkit),
-  contributes(Capabilities.ToolkitHandler, DeckToolkit.layer(context)),
+export default (context: PluginContext): Capability<any>[] => [
+  contributes(Capabilities.Toolkit, DeckToolkit.Toolkit),
+  contributes(Capabilities.ToolkitHandler, DeckToolkit.createLayer(context)),
 ];

package/src/capabilities/tools.ts

@@ -5,7 +5,7 @@
 // ISSUE(burdon): tools
 // @ts-nocheck
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import {
   Capabilities,

package/src/components/DeckLayout/DeckLayout.stories.tsx

@@ -0,0 +1,64 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Events, IntentPlugin, SettingsPlugin, defineModule, definePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { AttentionPlugin } from '@dxos/plugin-attention';
+import { GraphPlugin } from '@dxos/plugin-graph';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { DeckStateFactory, LayoutIntentResolver } from '../../capabilities';
+import { meta as pluginMeta } from '../../meta';
+import { translations } from '../../translations';
+
+import { DeckLayout } from './DeckLayout';
+
+const meta = {
+  title: 'plugins/plugin-deck/DeckLayout',
+  component: DeckLayout,
+  render: (args) => {
+    return <DeckLayout {...args} />;
+  },
+  decorators: [
+    withTheme,
+    withPluginManager({
+      plugins: [
+        AttentionPlugin(),
+        SettingsPlugin(),
+        IntentPlugin(),
+        GraphPlugin(),
+        definePlugin(
+          {
+            id: 'example.com/plutin/testing',
+            name: 'Testing',
+          },
+          () => [
+            defineModule({
+              id: `${pluginMeta.id}/module/layout-intent-resolver`,
+              activatesOn: Events.SetupIntentResolver,
+              activate: LayoutIntentResolver,
+            }),
+          ],
+        )(),
+      ],
+      // TODO(burdon): Remove?
+      capabilities: () => DeckStateFactory(),
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DeckLayout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/DeckLayout/DeckLayout.tsx

@@ -2,301 +2,31 @@
 // Copyright 2023 DXOS.org
 //
 
-import { untracked } from '@preact/signals-core';
-import React, { Fragment, type UIEvent, useCallback, useEffect, useMemo, useRef } from 'react';
+import React from 'react';
 
-import {
-  Capabilities,
-  LayoutAction,
-  createIntent,
-  useCapability,
-  useIntentDispatcher,
-  usePluginManager,
-} from '@dxos/app-framework';
-import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { Main, type MainProps, useMediaQuery, useOnTransition } from '@dxos/react-ui';
-import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from '@dxos/react-ui-stack';
-import { mainPaddingTransitions } from '@dxos/react-ui-theme';
+import { useCapability } from '@dxos/app-framework';
 
 import { DeckCapabilities } from '../../capabilities';
-import { useBreakpoints, useHoistStatusbar } from '../../hooks';
-import { meta } from '../../meta';
-import { type DeckSettingsProps, getMode } from '../../types';
-import { calculateOverscroll, layoutAppliesTopbar } from '../../util';
-import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
-import { Plank } from '../Plank';
-import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
 
 import { ActiveNode } from './ActiveNode';
-import { ContentEmpty } from './ContentEmpty';
+import { DeckMain } from './DeckMain';
 import { Dialog } from './Dialog';
 import { PopoverContent, PopoverRoot } from './Popover';
-import { StatusBar } from './StatusBar';
-import { Toast } from './Toast';
-import { Topbar } from './Topbar';
+import { Toaster, type ToasterProps } from './Toast';
 
-export type DeckLayoutProps = {
-  onDismissToast: (id: string) => void;
-};
-
-const PlankSeparator = ({ order }: { order: number }) =>
-  order > 0 ? <span role='separator' className='row-span-2 bg-deckSurface is-4' style={{ gridColumn: order }} /> : null;
+export type DeckLayoutProps = Pick<ToasterProps, 'onDismissToast'>;
 
 export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(meta.id)!.value;
   const context = useCapability(DeckCapabilities.MutableDeckState);
-  const { sidebarState, complementarySidebarState, complementarySidebarPanel, deck, toasts } = context;
-  const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
-  const breakpoint = useBreakpoints();
-  const layoutMode = getMode(deck);
-  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
-  const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
-  const pluginManager = usePluginManager();
-
-  const scrollLeftRef = useRef<number>(null);
-  const deckRef = useRef<HTMLDivElement>(null);
-
-  // Ensure the first plank is attended when the deck is first rendered.
-  useEffect(() => {
-    // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
-    const attended = untracked(() => {
-      const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
-      return attention.current;
-    });
-    const firstId = solo ?? active[0];
-    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();
-    }
-  }, []);
-
-  // Not using `breakpoint` to avoid firing when breakpoint changes between tablet and desktop.
-  // `ssr: false` to avoid using fallback values and flashing into solo mode on startup.
-  const [isNotMobile] = useMediaQuery('md', { ssr: false });
-  const shouldRevert = useRef(false);
-  useEffect(() => {
-    if (!isNotMobile && getMode(deck) === 'deck') {
-      // NOTE: Not `useAttended` so that the layout component is not re-rendered when the attended list changes.
-      const attended = untracked(() => {
-        const attention = pluginManager.context.getCapability(AttentionCapabilities.Attention);
-        return attention.current;
-      });
-
-      shouldRevert.current = true;
-      void dispatch(
-        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: attended[0], options: { mode: 'solo' } }),
-      );
-    } else if (isNotMobile && getMode(deck) === 'solo' && shouldRevert.current) {
-      void dispatch(createIntent(LayoutAction.SetLayoutMode, { part: 'mode', options: { revert: true } }));
-    }
-  }, [isNotMobile, deck, dispatch]);
-
-  // When deck is disabled in settings, set to solo mode if the current layout mode is deck.
-  // TODO(thure): Applying this as an effect should be avoided over emitting the intent only when the setting changes.
-  useEffect(() => {
-    if (!settings.enableDeck && layoutMode === 'deck') {
-      void dispatch(
-        createIntent(LayoutAction.SetLayoutMode, { part: 'mode', subject: active[0], options: { mode: 'solo' } }),
-      );
-    }
-  }, [settings.enableDeck, dispatch, active, layoutMode]);
-
-  /**
-   * Clear scroll restoration state if the window is resized
-   */
-  const handleResize = useCallback(() => {
-    scrollLeftRef.current = 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;
-    }
-  }, []);
-  useOnTransition(layoutMode, (mode) => mode !== 'deck', 'deck', restoreScroll);
-
-  /**
-   * Save scroll position as the user scrolls
-   */
-  const handleScroll = useCallback(
-    (event: UIEvent) => {
-      if (!solo && event.currentTarget === event.target) {
-        scrollLeftRef.current = (event.target as HTMLDivElement).scrollLeft;
-      }
-    },
-    [solo],
-  );
-
-  const isEmpty = !solo && active.length === 0;
-
-  const padding = useMemo(() => {
-    if (!solo && settings.overscroll === 'centering') {
-      return calculateOverscroll(active.length);
-    }
-    return {};
-  }, [solo, settings.overscroll, deck]);
-
-  const mainPosition = useMemo(
-    () => [
-      'grid !block-start-[env(safe-area-inset-top)]',
-      topbar && '!block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
-      hoistStatusbar && 'lg:block-end-[--statusbar-size]',
-    ],
-    [topbar, hoistStatusbar],
-  );
-
-  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]);
+  const { toasts } = context;
 
   return (
     <PopoverRoot>
       <ActiveNode />
-
-      <Main.Root
-        navigationSidebarState={fullscreen ? 'closed' : context.sidebarState}
-        onNavigationSidebarStateChange={(next) => (context.sidebarState = next)}
-        complementarySidebarState={fullscreen ? 'closed' : context.complementarySidebarState}
-        onComplementarySidebarStateChange={(next) => (context.complementarySidebarState = next)}
-      >
-        {/* Left sidebar. */}
-        <Sidebar />
-
-        {/* Right sidebar. */}
-        <ComplementarySidebar current={complementarySidebarPanel} />
-
-        {/* Dialog overlay to dismiss dialogs. */}
-        <Main.Overlay />
-
-        {/* No content. */}
-        {isEmpty && (
-          <Main.Content bounce handlesFocus classNames={mainPosition}>
-            <ContentEmpty />
-          </Main.Content>
-        )}
-
-        {/* Solo/deck mode. */}
-        {!isEmpty && (
-          <Main.Content
-            bounce
-            handlesFocus
-            classNames={mainPosition}
-            style={
-              {
-                '--dx-main-sidebarWidth':
-                  sidebarState === 'expanded'
-                    ? 'var(--nav-sidebar-size)'
-                    : sidebarState === 'collapsed'
-                      ? 'var(--l0-size)'
-                      : '0',
-                '--dx-main-complementaryWidth':
-                  complementarySidebarState === 'expanded'
-                    ? 'var(--complementary-sidebar-size)'
-                    : complementarySidebarState === 'collapsed'
-                      ? 'var(--rail-size)'
-                      : '0',
-                '--dx-main-contentFirstWidth': `${plankSizing[active[0] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
-                '--dx-main-contentLastWidth': `${plankSizing[active[(active.length ?? 1) - 1] ?? 'never'] ?? DEFAULT_HORIZONTAL_SIZE}rem`,
-              } as MainProps['style']
-            }
-          >
-            <div
-              role='none'
-              className={!solo ? 'relative bg-deckSurface overflow-hidden' : 'sr-only'}
-              {...(solo && { inert: true })}
-            >
-              {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
-              {!topbar && !fullscreen && (
-                <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />
-              )}
-              <Stack
-                ref={deckRef}
-                orientation='horizontal'
-                size='contain'
-                classNames={['absolute inset-block-0 -inset-inline-px', mainPaddingTransitions]}
-                itemsCount={itemsCount - 1}
-                style={padding}
-                onScroll={handleScroll}
-              >
-                {active.map((entryId) => (
-                  <Fragment key={entryId}>
-                    <PlankSeparator order={order[entryId] - 1} />
-                    <Plank
-                      id={entryId}
-                      companionId={activeCompanions?.[entryId]}
-                      part='deck'
-                      order={order[entryId]}
-                      active={active}
-                      layoutMode={layoutMode}
-                      settings={settings}
-                    />
-                  </Fragment>
-                ))}
-              </Stack>
-            </div>
-            <div
-              role='none'
-              className={solo ? 'relative bg-deckSurface overflow-hidden' : 'sr-only'}
-              {...(!solo && { inert: true })}
-            >
-              {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
-              {!topbar && !fullscreen && (
-                <ToggleComplementarySidebarButton classNames={fixedComplementarySidebarToggleStyles} />
-              )}
-              <StackContext.Provider value={{ size: 'contain', orientation: 'horizontal', rail: true }}>
-                <Plank
-                  id={solo}
-                  companionId={solo ? activeCompanions?.[solo] : undefined}
-                  part='solo'
-                  layoutMode={layoutMode}
-                  settings={settings}
-                />
-              </StackContext.Provider>
-            </div>
-          </Main.Content>
-        )}
-
-        {/* Topbar. */}
-        {topbar && <Topbar />}
-
-        {/* Status bar. */}
-        {hoistStatusbar && <StatusBar showHints={settings.showHints} />}
-      </Main.Root>
-
-      {/* Global popovers. */}
+      <DeckMain />
       <PopoverContent />
-
-      {/* Global dialog. */}
       <Dialog />
-
-      {/* Global toasts. */}
-      {toasts?.map((toast) => (
-        <Toast
-          {...toast}
-          key={toast.id}
-          onOpenChange={(open) => {
-            if (!open) {
-              onDismissToast(toast.id);
-            }
-
-            return open;
-          }}
-        />
-      ))}
+      <Toaster toasts={toasts} onDismissToast={onDismissToast} />
     </PopoverRoot>
   );
 };