@dxos/plugin-testing 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-testing",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.bcb3aa67d6",
   "description": "Plugin testing utils",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,6 +12,13 @@
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": "./src/capabilities/index.ts",
+    "#components": "./src/components/index.ts",
+    "#meta": "./src/meta.ts",
+    "#operations": "./src/operations/index.ts",
+    "#types": "./src/types/index.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -25,33 +32,34 @@
     "src"
   ],
   "dependencies": {
-    "@effect-atom/atom": "^0.4.13",
-    "@effect-atom/atom-react": "^0.4.6",
-    "@dxos/app-framework": "0.8.4-main.bc674ce",
-    "@dxos/operation": "0.8.4-main.bc674ce",
-    "@dxos/plugin-attention": "0.8.4-main.bc674ce",
-    "@dxos/plugin-client": "0.8.4-main.bc674ce",
-    "@dxos/plugin-graph": "0.8.4-main.bc674ce",
-    "@dxos/plugin-theme": "0.8.4-main.bc674ce",
-    "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@effect-atom/atom": "^0.5.1",
+    "@effect-atom/atom-react": "^0.5.0",
+    "@dxos/app-framework": "0.8.4-main.bcb3aa67d6",
+    "@dxos/app-toolkit": "0.8.4-main.bcb3aa67d6",
+    "@dxos/operation": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-graph": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-settings": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-attention": "0.8.4-main.bcb3aa67d6",
+    "@dxos/plugin-theme": "0.8.4-main.bcb3aa67d6",
+    "@dxos/react-ui-mosaic": "0.8.4-main.bcb3aa67d6",
+    "@dxos/util": "0.8.4-main.bcb3aa67d6"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "publishConfig": {
     "access": "public"

package/src/StorybookPlugin.ts

@@ -4,35 +4,37 @@
 
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common, Plugin } from '@dxos/app-framework';
+import { ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';
+import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
 
-import { OperationResolver, State } from './capabilities';
-import { Layout } from './components';
-import { meta } from './meta';
-import { type LayoutStateProps } from './types';
+import { Layout } from '#components';
+import { meta } from '#meta';
+import { type LayoutStateProps } from '#types';
+
+import { OperationHandler, State } from '#capabilities';
 
 export type StorybookPluginOptions = {
   initialState?: Partial<LayoutStateProps>;
 };
 
 export const StorybookPlugin = Plugin.define<StorybookPluginOptions>(meta).pipe(
-  Plugin.addModule(({ initialState }) => ({
-    id: Capability.getModuleTag(State),
-    activatesOn: Common.ActivationEvent.Startup,
-    activatesAfter: [Common.ActivationEvent.LayoutReady],
-    activate: () => State({ initialState }),
-  })),
-  Common.Plugin.addReactContextModule({
+  AppPlugin.addOperationHandlerModule({
+    activate: OperationHandler,
+  }),
+  AppPlugin.addReactContextModule({
     activate: () =>
       Effect.succeed(
-        Capability.contributes(Common.Capability.ReactContext, {
+        Capability.contributes(Capabilities.ReactContext, {
           id: 'storybook-layout',
           context: Layout,
         }),
       ),
   }),
-  Common.Plugin.addOperationResolverModule({
-    activate: OperationResolver,
-  }),
+  Plugin.addModule(({ initialState }) => ({
+    id: Capability.getModuleTag(State),
+    activatesOn: ActivationEvents.Startup,
+    activatesAfter: [AppActivationEvents.LayoutReady],
+    activate: () => State({ initialState }),
+  })),
   Plugin.make,
 );

package/src/capabilities/index.ts

@@ -2,5 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './operation-resolver';
-export * from './state';
+import { Capability } from '@dxos/app-framework';
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const State = Capability.lazy('State', () => import('./state'));

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/operation';
+
+import { TestingOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, TestingOperationHandlerSet);
+  }),
+);

package/src/capabilities/{state/state.tsx → state.tsx}

@@ -5,14 +5,16 @@
 import { Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
-import { Capability, Common } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
 
-import { LayoutState, type LayoutStateProps } from '../../types';
+import { LayoutState, type LayoutStateProps } from '#types';
 
 const defaultState: LayoutStateProps = {
   sidebarState: 'closed',
   complementarySidebarState: 'closed',
   dialogOpen: false,
+  toasts: [],
   workspace: 'default',
 };
 
@@ -21,7 +23,7 @@ export default Capability.makeModule(
     const { initialState } = props ?? {};
     const stateAtom = Atom.make<LayoutStateProps>({ ...defaultState, ...initialState });
 
-    const layoutAtom = Atom.make((get): Common.Capability.Layout => {
+    const layoutAtom = Atom.make((get): AppCapabilities.Layout => {
       const state = get(stateAtom);
       return {
         mode: 'storybook',
@@ -35,9 +37,6 @@ export default Capability.makeModule(
       };
     });
 
-    return [
-      Capability.contributes(LayoutState, stateAtom),
-      Capability.contributes(Common.Capability.Layout, layoutAtom),
-    ];
+    return [Capability.contributes(LayoutState, stateAtom), Capability.contributes(AppCapabilities.Layout, layoutAtom)];
   }),
 );

package/src/components/Layout/Layout.tsx

@@ -0,0 +1,230 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import React, { type PropsWithChildren, useCallback, useContext, useEffect, useRef, useState } from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework/ui';
+import { type LayoutOperation } from '@dxos/app-toolkit';
+import {
+  AlertDialog,
+  Button,
+  Dialog,
+  Icon,
+  Main,
+  Popover,
+  type PopoverContentInteractOutsideEvent,
+  Toast,
+  toLocalizedString,
+  useTranslation,
+} from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Mosaic } from '@dxos/react-ui-mosaic';
+import { descriptionMessage, mx } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+import { LayoutState, type LayoutStateProps } from '#types';
+
+const debounce_delay = 100;
+
+const StoryToast = ({ toast, onDismiss }: { toast: LayoutOperation.Toast; onDismiss: (id: string) => void }) => {
+  const { t } = useTranslation(meta.id);
+  return (
+    <Toast.Root
+      data-testid={toast.id}
+      defaultOpen
+      duration={toast.duration}
+      onOpenChange={(open) => {
+        if (!open) {
+          onDismiss(toast.id);
+        }
+      }}
+    >
+      <Toast.Body>
+        <Toast.Title classNames='items-center'>
+          {toast.icon && <Icon icon={toast.icon} classNames='inline mr-1' />}
+          {toast.title && <span>{toLocalizedString(toast.title, t)}</span>}
+        </Toast.Title>
+        {toast.description && <Toast.Description>{toLocalizedString(toast.description, t)}</Toast.Description>}
+      </Toast.Body>
+      <Toast.Actions>
+        {toast.onAction && toast.actionAlt && toast.actionLabel && (
+          <Toast.Action altText={toLocalizedString(toast.actionAlt, t)} asChild>
+            <Button variant='primary' onClick={() => toast.onAction?.()}>
+              {toLocalizedString(toast.actionLabel, t)}
+            </Button>
+          </Toast.Action>
+        )}
+        {toast.closeLabel && (
+          <Toast.Close asChild>
+            <Button>{toLocalizedString(toast.closeLabel, t)}</Button>
+          </Toast.Close>
+        )}
+      </Toast.Actions>
+    </Toast.Root>
+  );
+};
+
+export const Layout = ({ children }: PropsWithChildren<{}>) => {
+  const { t } = useTranslation(meta.id);
+  const trigger = useRef<HTMLButtonElement | null>(null);
+  const registry = useContext(RegistryContext);
+  const stateAtom = useCapability(LayoutState);
+  const layout = useAtomValue(stateAtom);
+  const [iter, setIter] = useState(0);
+  const [open, setOpen] = useState(false);
+  const debounceRef = useRef<NodeJS.Timeout | null>(null);
+
+  const updateState = useCallback(
+    (updates: Partial<LayoutStateProps>) => {
+      const current = registry.get(stateAtom);
+      registry.set(stateAtom, { ...current, ...updates });
+    },
+    [registry, stateAtom],
+  );
+
+  useEffect(() => {
+    setOpen(false);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    trigger.current = layout.popoverAnchor ?? null;
+    setIter((iter) => iter + 1);
+    if (layout.popoverOpen) {
+      debounceRef.current = setTimeout(() => setOpen(true), debounce_delay);
+    }
+  }, [layout.popoverAnchor, layout.popoverContent, layout.popoverOpen]);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    updateState({
+      popoverOpen: false,
+      popoverAnchor: undefined,
+      popoverAnchorId: undefined,
+      popoverSide: undefined,
+    });
+  }, [updateState]);
+
+  const handleInteractOutside = useCallback(
+    (event: KeyboardEvent | PopoverContentInteractOutsideEvent) => {
+      if (
+        // TODO(thure): CodeMirror should not focus itself when it updates.
+        event.type === 'dismissableLayer.focusOutside' &&
+        (event.currentTarget as HTMLElement | undefined)?.classList.contains('cm-content')
+      ) {
+        event.preventDefault();
+      } else {
+        handleClose();
+      }
+    },
+    [handleClose],
+  );
+
+  const handleDismissToast = useCallback(
+    (id: string) => {
+      updateState({ toasts: layout.toasts.filter((toast) => toast.id !== id) });
+    },
+    [updateState, layout.toasts],
+  );
+
+  const DialogRoot = layout.dialogType === 'alert' ? AlertDialog.Root : Dialog.Root;
+  const DialogOverlay = layout.dialogType === 'alert' ? AlertDialog.Overlay : Dialog.Overlay;
+
+  return (
+    <Toast.Provider>
+      <div role='none' className='fixed inset-0 flex overflow-hidden'>
+        <Mosaic.Root>
+          <Popover.Root open={open}>
+            <Main.Root
+              navigationSidebarState={layout.sidebarState}
+              complementarySidebarState={layout.complementarySidebarState}
+              onNavigationSidebarStateChange={(next) => updateState({ sidebarState: next })}
+              onComplementarySidebarStateChange={(next) => updateState({ complementarySidebarState: next })}
+            >
+              {children}
+            </Main.Root>
+
+            <DialogRoot
+              modal={layout.dialogBlockAlign !== 'end'}
+              open={layout.dialogOpen}
+              onOpenChange={(nextOpen) => updateState({ dialogOpen: nextOpen })}
+            >
+              {layout.dialogBlockAlign === 'end' ? (
+                <Surface.Surface
+                  role='dialog'
+                  data={layout.dialogContent}
+                  limit={1}
+                  fallback={ErrorFallback}
+                  placeholder={<div />}
+                />
+              ) : (
+                <DialogOverlay
+                  blockAlign={layout.dialogBlockAlign}
+                  classNames={layout.dialogOverlayClasses}
+                  style={layout.dialogOverlayStyle}
+                >
+                  <Surface.Surface role='dialog' data={layout.dialogContent} limit={1} fallback={ErrorFallback} />
+                </DialogOverlay>
+              )}
+            </DialogRoot>
+
+            <Popover.VirtualTrigger key={iter} virtualRef={trigger} />
+            <Popover.Portal>
+              <Popover.Content
+                side={layout.popoverSide}
+                onInteractOutside={handleInteractOutside}
+                onEscapeKeyDown={handleInteractOutside}
+                sticky='always'
+                hideWhenDetached
+              >
+                <Popover.Viewport>
+                  {layout.popoverKind === 'card' && (
+                    <Card.Root>
+                      <Card.Toolbar>
+                        {/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
+                        <span />
+                        {layout.popoverTitle ? (
+                          <Card.Title>{toLocalizedString(layout.popoverTitle, t)}</Card.Title>
+                        ) : (
+                          <span />
+                        )}
+                        <Card.CloseIconButton onClick={handleClose} />
+                      </Card.Toolbar>
+                      <Surface.Surface role='card--content' data={layout.popoverContent} limit={1} />
+                    </Card.Root>
+                  )}
+                  {layout.popoverKind === 'base' && (
+                    <Surface.Surface role='popover' data={layout.popoverContent} limit={1} />
+                  )}
+                </Popover.Viewport>
+                <Popover.Arrow />
+              </Popover.Content>
+            </Popover.Portal>
+          </Popover.Root>
+        </Mosaic.Root>
+        {layout.toasts.map((toast) => (
+          <StoryToast key={toast.id} toast={toast} onDismiss={handleDismissToast} />
+        ))}
+        <Toast.Viewport />
+      </div>
+    </Toast.Provider>
+  );
+};
+
+export const ErrorFallback = ({ error }: { error?: Error }) => {
+  const { t } = useTranslation(meta.id);
+  const errorString = error?.toString() ?? '';
+  return (
+    <div
+      role='alert'
+      data-testid='error-boundary-fallback'
+      className={mx('overflow-auto p-8 dx-attention-surface grid place-items-center')}
+    >
+      <p className={mx(descriptionMessage, 'break-words rounded-md p-8', errorString.length < 256 && 'text-lg')}>
+        {error ? errorString : t('error-fallback.message')}
+      </p>
+    </div>
+  );
+};

package/src/components/Layout/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Layout';

package/src/core.ts

@@ -2,17 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { OperationPlugin, type Plugin, RuntimePlugin, SettingsPlugin } from '@dxos/app-framework';
+import { OperationPlugin, type Plugin, RuntimePlugin } from '@dxos/app-framework';
 import { AttentionPlugin } from '@dxos/plugin-attention';
-import { ClientPlugin } from '@dxos/plugin-client';
 import { GraphPlugin } from '@dxos/plugin-graph';
+import { SettingsPlugin } from '@dxos/plugin-settings';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { defaultTx } from '@dxos/ui-theme';
 
-// TODO(burdon): Remove this.
-// Re-export common framework plugins.
-export { AttentionPlugin, ClientPlugin, GraphPlugin, OperationPlugin, RuntimePlugin, SettingsPlugin, ThemePlugin };
-
 /**
  * Core plugins for testing/storybook environments.
  * NOTE: Does not include SpacePlugin to avoid circular dependencies.

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/storybook-layout',
+  id: 'org.dxos.plugin.storybook-layout',
   name: 'Storybook',
   description: trim`
     Development layout optimized for Storybook component testing and documentation.

package/src/operations/add-toast.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { updateState } from './update-state';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.AddToast> = LayoutOperation.AddToast.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      yield* updateState((state) => ({
+        toasts: [...state.toasts, input as LayoutOperation.Toast],
+      }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/close.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Close> = LayoutOperation.Close.pipe(
+  Operation.withHandler(() => Effect.void),
+);
+
+export default handler;

package/src/operations/index.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const TestingOperationHandlerSet = OperationHandlerSet.lazy(
+  () => import('./add-toast'),
+  () => import('./close'),
+  () => import('./open'),
+  () => import('./scroll-into-view'),
+  () => import('./set-layout-mode'),
+  () => import('./switch-workspace'),
+  () => import('./update-complementary'),
+  () => import('./update-dialog'),
+  () => import('./update-popover'),
+  () => import('./update-sidebar'),
+);

package/src/operations/open.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Open> = LayoutOperation.Open.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      return input.subject;
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/scroll-into-view.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.ScrollIntoView> = LayoutOperation.ScrollIntoView.pipe(
+  Operation.withHandler(() => Effect.void),
+);
+
+export default handler;

package/src/operations/set-layout-mode.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.SetLayoutMode> = LayoutOperation.SetLayoutMode.pipe(
+  Operation.withHandler(() => Effect.void),
+);
+
+export default handler;

package/src/operations/switch-workspace.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { updateState } from './update-state';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.SwitchWorkspace> = LayoutOperation.SwitchWorkspace.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ subject }) {
+      yield* updateState(() => ({ workspace: subject }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-complementary.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { updateState } from './update-state';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateComplementary> =
+  LayoutOperation.UpdateComplementary.pipe(
+    Operation.withHandler(
+      Effect.fnUntraced(function* ({ state }) {
+        yield* updateState((layout) => {
+          const next = state ?? layout.complementarySidebarState;
+          if (next !== layout.complementarySidebarState) {
+            return { complementarySidebarState: next };
+          }
+          return {};
+        });
+      }),
+    ),
+  );
+
+export default handler;

package/src/operations/update-dialog.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { updateState } from './update-state';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateDialog> = LayoutOperation.UpdateDialog.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ subject, state, type, blockAlign, overlayClasses, overlayStyle, props }) {
+      yield* updateState(() => ({
+        dialogOpen: state ?? Boolean(subject),
+        dialogType: type ?? 'default',
+        dialogBlockAlign: blockAlign ?? 'center',
+        dialogOverlayClasses: overlayClasses,
+        dialogOverlayStyle: overlayStyle,
+        dialogContent: subject ? { component: subject, props } : null,
+      }));
+    }),
+  ),
+);
+
+export default handler;