@dxos/plugin-testing 0.0.0 → 0.8.4-main.21d9917

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/plugin-testing",
-  "version": "0.0.0",
+  "version": "0.8.4-main.21d9917",
   "description": "Plugin testing utils",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
@@ -21,15 +25,16 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@dxos/app-framework": "0.8.3",
-    "@dxos/operation": "0.0.0",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/plugin-attention": "0.8.3",
-    "@dxos/plugin-client": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/plugin-theme": "0.8.3",
-    "@dxos/plugin-graph": "0.8.3"
+    "@effect-atom/atom": "^0.4.13",
+    "@effect-atom/atom-react": "^0.4.6",
+    "@dxos/app-framework": "0.8.4-main.21d9917",
+    "@dxos/operation": "0.8.4-main.21d9917",
+    "@dxos/plugin-client": "0.8.4-main.21d9917",
+    "@dxos/plugin-attention": "0.8.4-main.21d9917",
+    "@dxos/plugin-theme": "0.8.4-main.21d9917",
+    "@dxos/react-ui-mosaic": "0.8.4-main.21d9917",
+    "@dxos/plugin-graph": "0.8.4-main.21d9917",
+    "@dxos/util": "0.8.4-main.21d9917"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -38,15 +43,15 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/ui-theme": "0.0.0"
+    "@dxos/react-ui": "0.8.4-main.21d9917",
+    "@dxos/ui-theme": "0.8.4-main.21d9917"
   },
   "peerDependencies": {
     "effect": "3.19.11",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/ui-theme": "0.0.0"
+    "@dxos/ui-theme": "0.8.4-main.21d9917",
+    "@dxos/react-ui": "0.8.4-main.21d9917"
   },
   "publishConfig": {
     "access": "public"

package/src/StorybookPlugin.ts

@@ -9,10 +9,10 @@ import { Capability, Common, Plugin } from '@dxos/app-framework';
 import { OperationResolver, State } from './capabilities';
 import { Layout } from './components';
 import { meta } from './meta';
-import { type LayoutState } from './types';
+import { type LayoutStateProps } from './types';
 
 export type StorybookPluginOptions = {
-  initialState?: Partial<LayoutState>;
+  initialState?: Partial<LayoutStateProps>;
 };
 
 export const StorybookPlugin = Plugin.define<StorybookPluginOptions>(meta).pipe(

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -7,29 +7,41 @@ import * as Effect from 'effect/Effect';
 import { Capability, Common } from '@dxos/app-framework';
 import { OperationResolver } from '@dxos/operation';
 
-import { LayoutState } from '../../types';
+import { LayoutState, type LayoutStateProps } from '../../types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
+    const registry = yield* Capability.get(Common.Capability.AtomRegistry);
+    const stateAtom = yield* Capability.get(LayoutState);
+
+    const updateState = (fn: (state: LayoutStateProps) => Partial<LayoutStateProps>) => {
+      const current = registry.get(stateAtom);
+      registry.set(stateAtom, { ...current, ...fn(current) });
+    };
+
     return Capability.contributes(Common.Capability.OperationResolver, [
       OperationResolver.make({
         operation: Common.LayoutOperation.UpdateSidebar,
         handler: Effect.fnUntraced(function* ({ state }) {
-          const layout = yield* Capability.get(LayoutState);
-          const next = state ?? layout.sidebarState;
-          if (next !== layout.sidebarState) {
-            layout.sidebarState = next;
-          }
+          updateState((layout) => {
+            const next = state ?? layout.sidebarState;
+            if (next !== layout.sidebarState) {
+              return { sidebarState: next };
+            }
+            return {};
+          });
         }),
       }),
       OperationResolver.make({
         operation: Common.LayoutOperation.UpdateComplementary,
         handler: Effect.fnUntraced(function* ({ state }) {
-          const layout = yield* Capability.get(LayoutState);
-          const next = state ?? layout.complementarySidebarState;
-          if (next !== layout.complementarySidebarState) {
-            layout.complementarySidebarState = next;
-          }
+          updateState((layout) => {
+            const next = state ?? layout.complementarySidebarState;
+            if (next !== layout.complementarySidebarState) {
+              return { complementarySidebarState: next };
+            }
+            return {};
+          });
         }),
       }),
       OperationResolver.make({
@@ -43,38 +55,42 @@ export default Capability.makeModule(
           overlayStyle,
           props,
         }) {
-          const layout = yield* Capability.get(LayoutState);
-          layout.dialogOpen = state ?? Boolean(subject);
-          layout.dialogType = type ?? 'default';
-          layout.dialogBlockAlign = blockAlign ?? 'center';
-          layout.dialogOverlayClasses = overlayClasses;
-          layout.dialogOverlayStyle = overlayStyle;
-          layout.dialogContent = subject ? { component: subject, props } : null;
+          updateState(() => ({
+            dialogOpen: state ?? Boolean(subject),
+            dialogType: type ?? 'default',
+            dialogBlockAlign: blockAlign ?? 'center',
+            dialogOverlayClasses: overlayClasses,
+            dialogOverlayStyle: overlayStyle,
+            dialogContent: subject ? { component: subject, props } : null,
+          }));
         }),
       }),
       OperationResolver.make({
         operation: Common.LayoutOperation.UpdatePopover,
         handler: Effect.fnUntraced(function* (input) {
-          const layout = yield* Capability.get(LayoutState);
-          const { subject, state, side, props } = input;
-          layout.popoverContent =
-            typeof subject === 'string' ? { component: subject, props } : subject ? { subject } : undefined;
-          layout.popoverOpen = state ?? Boolean(subject);
-          layout.popoverSide = side;
-          if ('variant' in input && input.variant === 'virtual') {
-            layout.popoverVariant = 'virtual';
-            layout.popoverAnchor = input.anchor;
-          } else if ('anchorId' in input) {
-            layout.popoverVariant = 'react';
-            layout.popoverAnchorId = input.anchorId;
-          }
+          const { subject, state, side, kind, props } = input;
+          updateState(() => {
+            const base: Partial<LayoutStateProps> = {
+              popoverKind: kind ?? 'base',
+              popoverTitle: kind === 'card' ? input.title : undefined,
+              popoverContent:
+                typeof subject === 'string' ? { component: subject, props } : subject ? { subject } : undefined,
+              popoverOpen: state ?? Boolean(subject),
+              popoverSide: side,
+            };
+            if ('variant' in input && input.variant === 'virtual') {
+              return { ...base, popoverVariant: 'virtual', popoverAnchor: input.anchor };
+            } else if ('anchorId' in input) {
+              return { ...base, popoverVariant: 'react', popoverAnchorId: input.anchorId };
+            }
+            return base;
+          });
         }),
       }),
       OperationResolver.make({
         operation: Common.LayoutOperation.SwitchWorkspace,
         handler: Effect.fnUntraced(function* ({ subject }) {
-          const layout = yield* Capability.get(LayoutState);
-          layout.workspace = subject;
+          updateState(() => ({ workspace: subject }));
         }),
       }),
     ]);

package/src/capabilities/state/state.tsx

@@ -2,14 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Atom } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 
 import { Capability, Common } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
 
-import { LayoutState } from '../../types';
+import { LayoutState, type LayoutStateProps } from '../../types';
 
-const defaultState: LayoutState = {
+const defaultState: LayoutStateProps = {
   sidebarState: 'closed',
   complementarySidebarState: 'closed',
   dialogOpen: false,
@@ -17,37 +17,27 @@ const defaultState: LayoutState = {
 };
 
 export default Capability.makeModule(
-  Effect.fnUntraced(function* (props?: { initialState?: Partial<LayoutState> }) {
+  Effect.fnUntraced(function* (props?: { initialState?: Partial<LayoutStateProps> }) {
     const { initialState } = props ?? {};
-    const state = live<LayoutState>({ ...defaultState, ...initialState });
+    const stateAtom = Atom.make<LayoutStateProps>({ ...defaultState, ...initialState });
 
-    const layout = live<Common.Capability.Layout>({
-      get mode() {
-        return 'storybook';
-      },
-      get dialogOpen() {
-        return state.dialogOpen;
-      },
-      get sidebarOpen() {
-        return state.sidebarState === 'expanded';
-      },
-      get complementarySidebarOpen() {
-        return state.complementarySidebarState === 'expanded';
-      },
-      get workspace() {
-        return state.workspace;
-      },
-      get active() {
-        return [];
-      },
-      get inactive() {
-        return [];
-      },
-      get scrollIntoView() {
-        return undefined;
-      },
+    const layoutAtom = Atom.make((get): Common.Capability.Layout => {
+      const state = get(stateAtom);
+      return {
+        mode: 'storybook',
+        dialogOpen: state.dialogOpen,
+        sidebarOpen: state.sidebarState === 'expanded',
+        complementarySidebarOpen: state.complementarySidebarState === 'expanded',
+        workspace: state.workspace,
+        active: [],
+        inactive: [],
+        scrollIntoView: undefined,
+      };
     });
 
-    return [Capability.contributes(LayoutState, state), Capability.contributes(Common.Capability.Layout, layout)];
+    return [
+      Capability.contributes(LayoutState, stateAtom),
+      Capability.contributes(Common.Capability.Layout, layoutAtom),
+    ];
   }),
 );

package/src/components/Layout.tsx

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+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/react';
 import {
@@ -11,23 +12,36 @@ import {
   Main,
   Popover,
   type PopoverContentInteractOutsideEvent,
+  toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
+import { Card, Mosaic } from '@dxos/react-ui-mosaic';
 import { descriptionMessage, mx } from '@dxos/ui-theme';
 
 import { meta } from '../meta';
-import { LayoutState } from '../types';
+import { LayoutState, type LayoutStateProps } from '../types';
 
 const debounce_delay = 100;
 
 // TODO(wittjosiah): Support dialogs, tooltips, maybe toast.
 export const Layout = ({ children }: PropsWithChildren<{}>) => {
+  const { t } = useTranslation(meta.id);
   const trigger = useRef<HTMLButtonElement | null>(null);
-  const layout = useCapability(LayoutState);
+  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) {
@@ -41,77 +55,103 @@ export const Layout = ({ children }: PropsWithChildren<{}>) => {
     }
   }, [layout.popoverAnchor, layout.popoverContent, layout.popoverOpen]);
 
-  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 {
-      setOpen(false);
-      layout.popoverOpen = false;
-      layout.popoverAnchor = undefined;
-      layout.popoverAnchorId = undefined;
-      layout.popoverSide = undefined;
-    }
-  }, []);
+  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 DialogRoot = layout.dialogType === 'alert' ? AlertDialog.Root : Dialog.Root;
   const DialogOverlay = layout.dialogType === 'alert' ? AlertDialog.Overlay : Dialog.Overlay;
 
   return (
     <div role='none' className='fixed inset-0 flex overflow-hidden'>
-      <Popover.Root open={open}>
-        <Main.Root
-          navigationSidebarState={layout.sidebarState}
-          complementarySidebarState={layout.complementarySidebarState}
-          onNavigationSidebarStateChange={(next) => (layout.sidebarState = next)}
-          onComplementarySidebarStateChange={(next) => (layout.complementarySidebarState = next)}
-        >
-          {children}
-        </Main.Root>
-
-        <DialogRoot
-          modal={layout.dialogBlockAlign !== 'end'}
-          open={layout.dialogOpen}
-          onOpenChange={(nextOpen) => (layout.dialogOpen = nextOpen)}
-        >
-          {layout.dialogBlockAlign === 'end' ? (
-            <Surface
-              role='dialog'
-              data={layout.dialogContent}
-              limit={1}
-              fallback={ContentError}
-              placeholder={<div />}
-            />
-          ) : (
-            <DialogOverlay
-              blockAlign={layout.dialogBlockAlign}
-              classNames={layout.dialogOverlayClasses}
-              style={layout.dialogOverlayStyle}
-            >
-              <Surface role='dialog' data={layout.dialogContent} limit={1} fallback={ContentError} />
-            </DialogOverlay>
-          )}
-        </DialogRoot>
+      <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>
 
-        <Popover.VirtualTrigger key={iter} virtualRef={trigger} />
-        <Popover.Portal>
-          <Popover.Content
-            side={layout.popoverSide}
-            onInteractOutside={handleInteractOutside}
-            onEscapeKeyDown={handleInteractOutside}
-            sticky='always'
-            hideWhenDetached
+          <DialogRoot
+            modal={layout.dialogBlockAlign !== 'end'}
+            open={layout.dialogOpen}
+            onOpenChange={(nextOpen) => updateState({ dialogOpen: nextOpen })}
           >
-            <Popover.Viewport>
-              <Surface role='card--popover' data={layout.popoverContent} limit={1} />
-            </Popover.Viewport>
-            <Popover.Arrow />
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
+            {layout.dialogBlockAlign === 'end' ? (
+              <Surface
+                role='dialog'
+                data={layout.dialogContent}
+                limit={1}
+                fallback={ContentError}
+                placeholder={<div />}
+              />
+            ) : (
+              <DialogOverlay
+                blockAlign={layout.dialogBlockAlign}
+                classNames={layout.dialogOverlayClasses}
+                style={layout.dialogOverlayStyle}
+              >
+                <Surface role='dialog' data={layout.dialogContent} limit={1} fallback={ContentError} />
+              </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.Close onClick={handleClose} />
+                    </Card.Toolbar>
+                    <Surface role='card--content' data={layout.popoverContent} limit={1} />
+                  </Card.Root>
+                )}
+                {layout.popoverKind === 'base' && <Surface role='popover' data={layout.popoverContent} limit={1} />}
+              </Popover.Viewport>
+              <Popover.Arrow />
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+      </Mosaic.Root>
     </div>
   );
 };

package/src/core.ts

@@ -9,16 +9,9 @@ import { GraphPlugin } from '@dxos/plugin-graph';
 import { ThemePlugin } from '@dxos/plugin-theme';
 import { defaultTx } from '@dxos/ui-theme';
 
-export {
-  // Re-export common framework plugins.
-  AttentionPlugin,
-  ClientPlugin,
-  GraphPlugin,
-  OperationPlugin,
-  RuntimePlugin,
-  SettingsPlugin,
-  ThemePlugin,
-};
+// TODO(burdon): Remove this.
+// Re-export common framework plugins.
+export { AttentionPlugin, ClientPlugin, GraphPlugin, OperationPlugin, RuntimePlugin, SettingsPlugin, ThemePlugin };
 
 /**
  * Core plugins for testing/storybook environments.

package/src/types/capabilities.ts

@@ -2,11 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Atom } from '@effect-atom/atom-react';
+
 import { Capability } from '@dxos/app-framework';
+import { type Label } from '@dxos/react-ui';
 
 import { meta } from '../meta';
 
-export type LayoutState = {
+export type LayoutStateProps = {
   sidebarState?: 'expanded' | 'collapsed' | 'closed';
   complementarySidebarState?: 'expanded' | 'collapsed' | 'closed';
 
@@ -23,9 +26,11 @@ export type LayoutState = {
   popoverVariant?: 'virtual' | 'react';
   popoverAnchor?: HTMLButtonElement;
   popoverAnchorId?: string;
+  popoverKind?: 'base' | 'card';
+  popoverTitle?: Label;
   popoverContent?: any;
 
   workspace: string;
 };
 
-export const LayoutState = Capability.make<LayoutState>(`${meta.id}/state`);
+export const LayoutState = Capability.make<Atom.Writable<LayoutStateProps>>(`${meta.id}/state`);