@dxos/plugin-simple-layout 0.8.4-main.6fa680abb7 → 0.8.4-main.7996785055

package/src/components/SimpleLayout/Main.tsx

@@ -7,12 +7,11 @@ import React, { useMemo } from 'react';
 import { Surface } from '@dxos/app-framework/ui';
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useNode } from '@dxos/plugin-graph';
-import { ErrorFallback } from '@dxos/react-ui';
+import { ErrorFallback, Panel } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
-import { mx } from '@dxos/ui-theme';
 
 import { useAppBarProps, useNavbarActions, useSimpleLayoutState } from '../../hooks';
-import { ContentLoading } from '../ContentLoading';
+import { Loading } from '../Loading';
 import { useExpandPath } from '../hooks';
 import { useMobileLayout } from '../MobileLayout';
 
@@ -32,7 +31,7 @@ export const Main = () => {
   const { actions, onAction } = useNavbarActions();
   const appBarProps = useAppBarProps();
 
-  const placeholder = useMemo(() => <ContentLoading />, []);
+  const placeholder = useMemo(() => <Loading />, []);
 
   const { graph } = useAppGraph();
   const node = useNode(graph, id);
@@ -53,18 +52,11 @@ export const Main = () => {
   const showNavBar = !keyboardOpen && !state.isPopover && state.drawerState === 'closed';
 
   return (
-    <div
-      role='none'
-      className={mx(
-        'h-full grid overflow-hidden bg-toolbar-surface',
-        showNavBar
-          ? 'grid-rows-[var(--dx-rail-action)_1fr_var(--dx-toolbar-size)]'
-          : 'grid-rows-[var(--dx-rail-action)_1fr]',
-      )}
-      {...attentionAttrs}
-    >
-      <AppBar {...appBarProps} />
-      <article className='h-full overflow-hidden bg-base-surface'>
+    <Panel.Root {...attentionAttrs} className='dx-document'>
+      <Panel.Toolbar asChild>
+        <AppBar {...appBarProps} />
+      </Panel.Toolbar>
+      <Panel.Content role='article' className='bg-base-surface'>
         <Surface.Surface
           key={id}
           role='article'
@@ -73,9 +65,13 @@ export const Main = () => {
           fallback={ErrorFallback}
           placeholder={placeholder}
         />
-      </article>
-      {showNavBar && <NavBar classNames='border-y border-subdued-separator' actions={actions} onAction={onAction} />}
-    </div>
+      </Panel.Content>
+      {showNavBar && (
+        <Panel.Statusbar asChild>
+          <NavBar actions={actions} onAction={onAction} />
+        </Panel.Statusbar>
+      )}
+    </Panel.Root>
   );
 };
 

package/src/components/SimpleLayout/NavBar.tsx

@@ -5,30 +5,29 @@
 import { type Atom } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { type ThemedClassName } from '@dxos/react-ui';
 import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
-import { mx } from '@dxos/ui-theme';
+import { composable, composableProps } from '@dxos/ui-theme';
 
 const NAVBAR_NAME = 'SimpleLayout.NavBar';
 
-export type NavBarProps = ThemedClassName<{
+export type NavBarProps = {
   /** Action graph atom for the toolbar. */
   actions: Atom.Atom<ActionGraphProps>;
   /** Action executor callback. */
   onAction?: ActionExecutor;
-}>;
+};
 
 /**
  * Presentational navbar component that renders a toolbar from an action graph.
  */
-export const NavBar = ({ classNames, actions, onAction }: NavBarProps) => {
-  const menu = useMenuActions(actions);
+export const NavBar = composable<HTMLDivElement, NavBarProps>(({ actions, onAction, ...props }, forwardedRef) => {
+  const menuActions = useMenuActions(actions);
 
   return (
-    <Menu.Root {...menu} alwaysActive onAction={onAction}>
-      <Menu.Toolbar density='coarse' classNames={mx(classNames)} />
+    <Menu.Root {...menuActions} alwaysActive onAction={onAction}>
+      <Menu.Toolbar {...composableProps(props)} ref={forwardedRef} />
     </Menu.Root>
   );
-};
+});
 
 NavBar.displayName = NAVBAR_NAME;

package/src/components/SimpleLayout/SimpleLayout.stories.tsx

@@ -5,80 +5,69 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';
+import { ActivationEvents, Capability, Plugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 import { Collection } from '@dxos/echo';
-import { ClientOperation, ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { SearchPlugin } from '@dxos/plugin-search';
 import { SpacePlugin } from '@dxos/plugin-space';
-import { SpaceOperation } from '@dxos/plugin-space/types';
 import { corePlugins } from '@dxos/plugin-testing';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { translations as searchTranslation } from '@dxos/react-ui-searchlist';
+import { withLayout } from '@dxos/react-ui/testing';
+import { translations as searchTranslation } from '@dxos/react-ui-search';
 
-import { OperationResolver, type SimpleLayoutStateOptions, State } from '../../capabilities';
+import { ReactRoot, ReactSurface, State } from '../../capabilities';
 import { meta as pluginMeta } from '../../meta';
 import { type SimpleLayoutPluginOptions } from '../../SimpleLayoutPlugin';
 import { translations } from '../../translations';
+import { SimpleLayoutEvents } from '../../types';
 
 import { SimpleLayout } from './SimpleLayout';
 
-const TestPlugin = Plugin.define<SimpleLayoutPluginOptions>(pluginMeta).pipe(
-  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
-  Plugin.addModule(({ isPopover = false }) => ({
-    id: Capability.getModuleTag(State),
-    activatesOn: ActivationEvents.Startup,
-    activatesAfter: [AppActivationEvents.LayoutReady],
-    activate: () => State({ initialState: { isPopover } } satisfies SimpleLayoutStateOptions),
-  })),
-  Plugin.addModule({
-    id: 'setup',
-    activatesOn: ActivationEvents.OperationInvokerReady,
-    activate: Effect.fnUntraced(function* () {
-      const { invoke } = yield* Capability.get(Capabilities.OperationInvoker);
-      yield* invoke(ClientOperation.CreateIdentity, {});
-      const { space: work } = yield* invoke(SpaceOperation.Create, { name: 'Work Space' });
-      const { space: sharedProject } = yield* invoke(SpaceOperation.Create, { name: 'Shared Project' });
-
-      // Add collections to Work Space.
-      yield* invoke(SpaceOperation.AddObject, {
-        target: work.db,
-        object: Collection.make({ name: 'Projects', objects: [] }),
-      });
-      yield* invoke(SpaceOperation.AddObject, {
-        target: work.db,
-        object: Collection.make({ name: 'Documents', objects: [] }),
-      });
-
-      // Add collections to Shared Project.
-      yield* invoke(SpaceOperation.AddObject, {
-        target: sharedProject.db,
-        object: Collection.make({ name: 'Tasks', objects: [] }),
-      });
-      yield* invoke(SpaceOperation.AddObject, {
-        target: sharedProject.db,
-        object: Collection.make({ name: 'Notes', objects: [] }),
-      });
-    }),
-  }),
-  Plugin.make,
-);
-
-const createPluginManager = ({ isPopover }: { isPopover: boolean }) => {
+const createPluginManager = ({ isPopover }: { isPopover?: boolean }) => {
   return withPluginManager({
+    setupEvents: [AppActivationEvents.SetupSettings],
     plugins: [
       ...corePlugins(),
       ClientPlugin({
         types: [Collection.Collection],
+        onClientInitialized: ({ client }) =>
+          Effect.gen(function* () {
+            yield* Effect.promise(() => client.halo.createIdentity());
+          }),
       }),
+
       SearchPlugin(),
       SpacePlugin({}),
-      TestPlugin({ isPopover }),
+
+      // TODO(burdon): This should be factored ouf from SimpleLayoutPlugin.
+      Plugin.define<SimpleLayoutPluginOptions>(pluginMeta).pipe(
+        Plugin.addModule(({ isPopover = false }) => ({
+          id: Capability.getModuleTag(State),
+          activatesOn: ActivationEvents.Startup,
+          activatesAfter: [SimpleLayoutEvents.StateReady, AppActivationEvents.LayoutReady],
+          activate: () => State({ initialState: { isPopover } }),
+        })),
+        Plugin.addModule({
+          id: Capability.getModuleTag(ReactRoot),
+          activatesOn: ActivationEvents.Startup,
+          activate: ReactRoot,
+        }),
+        Plugin.addModule({
+          id: Capability.getModuleTag(ReactSurface),
+          activatesOn: ActivationEvents.Startup,
+          activate: ReactSurface,
+        }),
+        Plugin.make,
+      )({ isPopover }),
     ],
   });
 };
 
+/**
+ * NOTE: To expose to iphone on network:
+ * `moon run storybook-react:serve dev -H 0.0.0.0`
+ */
 const meta = {
   title: 'plugins/plugin-simple-layout/components/SimpleLayout',
   component: SimpleLayout,
@@ -92,22 +81,10 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-/**
- * NOTE: To expose to iphone on network:
- * `moon run storybook-react:serve dev -H 0.0.0.0`
- */
 export const Default: Story = {
-  decorators: [
-    withTheme(),
-    withLayout({ layout: 'column', classNames: 'relative' }),
-    createPluginManager({ isPopover: false }),
-  ],
+  decorators: [withLayout({ layout: 'column', classNames: 'relative' }), createPluginManager({})],
 };
 
 export const Popover: Story = {
-  decorators: [
-    withTheme(),
-    withLayout({ layout: 'column', classNames: 'relative' }),
-    createPluginManager({ isPopover: true }),
-  ],
+  decorators: [withLayout({ layout: 'column', classNames: 'relative' }), createPluginManager({ isPopover: true })],
 };

package/src/components/SimpleLayout/SimpleLayout.tsx

@@ -2,12 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 
 import { Splitter, type SplitterMode } from '@dxos/react-ui';
 import { Mosaic } from '@dxos/react-ui-mosaic';
 
 import { useSimpleLayoutState } from '../../hooks';
+import { DebugOverlay } from '../DebugOverlay';
 import { Dialog } from '../Dialog';
 import { MobileLayout } from '../MobileLayout';
 import { PopoverContent, PopoverRoot } from '../Popover';
@@ -15,45 +16,43 @@ import { PopoverContent, PopoverRoot } from '../Popover';
 import { Drawer } from './Drawer';
 import { Main } from './Main';
 
-// TODO(burdon): Mobile/Desktop variance?
 export const SimpleLayout = () => {
   const { state } = useSimpleLayoutState();
   const [keyboardOpen, setKeyboardOpen] = useState(false);
   const [splitterMode, setSplitterMode] = useState<SplitterMode>('upper');
 
   const drawerRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (keyboardOpen) {
-      // Determine which panel has focus and expand that one.
-      const activeElement = document.activeElement;
-      const drawerHasFocus = drawerRef.current?.contains(activeElement);
-      setSplitterMode(drawerHasFocus ? 'lower' : 'upper');
-    } else {
+
+  // Restore Splitter mode when keyboard closes.
+  useLayoutEffect(() => {
+    if (!keyboardOpen) {
       setSplitterMode(state.drawerState === 'closed' ? 'upper' : state.drawerState === 'open' ? 'both' : 'lower');
     }
   }, [state.drawerState, keyboardOpen]);
 
   return (
-    <Mosaic.Root classNames='contents'>
-      <MobileLayout.Root
-        classNames='bg-toolbar-surface'
-        onKeyboardOpenChange={(keyboardOpen: boolean) => setKeyboardOpen(keyboardOpen)}
-      >
-        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
-          <PopoverRoot>
-            <Splitter.Root mode={splitterMode} ratio={0.55}>
-              <Splitter.Panel position='upper'>
-                <Main />
-              </Splitter.Panel>
-              <Splitter.Panel position='lower' ref={drawerRef}>
-                <Drawer />
-              </Splitter.Panel>
-            </Splitter.Root>
-            <Dialog />
-            <PopoverContent />
-          </PopoverRoot>
-        </MobileLayout.Panel>
-      </MobileLayout.Root>
-    </Mosaic.Root>
+    <DebugOverlay.Root enabled={false}>
+      <PopoverRoot>
+        <Mosaic.Root classNames='dx-container grid relative'>
+          <MobileLayout.Root
+            classNames='bg-toolbar-surface'
+            onKeyboardOpenChange={(nextKeyboardOpen) => setKeyboardOpen(nextKeyboardOpen)}
+          >
+            <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'upper' }}>
+              <Splitter.Root mode={splitterMode} ratio={0.55}>
+                <Splitter.Panel position='upper'>
+                  <Main />
+                </Splitter.Panel>
+                <Splitter.Panel position='lower' ref={drawerRef}>
+                  <Drawer />
+                </Splitter.Panel>
+              </Splitter.Root>
+              <Dialog />
+              <PopoverContent />
+            </MobileLayout.Panel>
+          </MobileLayout.Root>
+        </Mosaic.Root>
+      </PopoverRoot>
+    </DebugOverlay.Root>
   );
 };

package/src/components/index.ts

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './ContentLoading';
+export * from './DebugOverlay';
 export * from './Home';
+export * from './Loading';
 export * from './MobileLayout';
 export * from './Popover';
 export * from './SimpleLayout';

package/src/hooks/useAppBarProps.ts

@@ -27,7 +27,7 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
   const stateAtom = useCapability(SimpleLayoutStateCapability);
   const state = useAtomValue(stateAtom);
   const { graph } = useAppGraph();
-  const { invokeSync } = useOperationInvoker();
+  const { invokePromise } = useOperationInvoker();
   const runAction = useActionRunner();
 
   // Derive activeId from state.
@@ -64,7 +64,7 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
           const settingsAction = {
             id: `appbar-settings-${alternateTreeNode.id}`,
             type: Node.ActionType,
-            data: () => Effect.sync(() => invokeSync(LayoutOperation.Open, { subject: [alternateTreeNode.id] })),
+            data: () => Effect.promise(() => invokePromise(LayoutOperation.Open, { subject: [alternateTreeNode.id] })),
             properties: {
               label: alternateTreeNode.properties.label ?? alternateTreeNode.id,
               icon: alternateTreeNode.properties.icon ?? 'ph--placeholder--regular',
@@ -91,15 +91,15 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
 
       // If history is empty and this is a workspace, go to home.
       if (state.history.length === 0 && isWorkspace) {
-        invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
       } else {
         // Otherwise, close (which will pop from history or clear active).
-        invokeSync(LayoutOperation.Close, { subject: [state.active] });
+        void invokePromise(LayoutOperation.Close, { subject: [state.active] });
       }
     } else {
-      invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+      void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
     }
-  }, [graph, invokeSync, state.active, state.history.length]);
+  }, [graph, invokePromise, state.active, state.history.length]);
 
   // Compute popover anchor ID.
   const popoverAnchorId = node && state.popoverAnchorId === `${meta.id}:${node.id}` ? state.popoverAnchorId : undefined;

package/src/hooks/useDrawerActions.ts

@@ -47,7 +47,7 @@ export const useDrawerActions = (consumerName: string): DrawerActions => {
         // Add companion tab actions.
         const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
           idPrefix: 'drawer',
-          selectedVariant: state.companionVariant,
+          selectedVariant: state.drawerState !== 'closed' ? state.companionVariant : undefined,
           updateState,
         });
 

package/src/operations/close.ts

@@ -0,0 +1,34 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Close> = LayoutOperation.Close.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      const { updateState } = yield* layoutStateAccess;
+
+      updateState((state) => {
+        if (state.history.length > 0) {
+          const newHistory = [...state.history];
+          const previousActive = newHistory.pop();
+          return {
+            ...state,
+            active: previousActive,
+            history: newHistory,
+          };
+        }
+        return {
+          ...state,
+          active: undefined,
+        };
+      });
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/index.ts

@@ -0,0 +1,16 @@
+// Copyright 2025 DXOS.org
+
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const SimpleLayoutOperationHandlerSet = OperationHandlerSet.lazy(
+  () => import('./close'),
+  () => import('./open'),
+  () => import('./revert-workspace'),
+  () => import('./set'),
+  () => 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,32 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.Open> = LayoutOperation.Open.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const { updateState } = yield* layoutStateAccess;
+      const id = input.subject[0];
+
+      updateState((state) => {
+        const newHistory = state.active ? [...state.history, state.active] : state.history;
+        const trimmedHistory =
+          newHistory.length > MAX_HISTORY_LENGTH ? newHistory.slice(-MAX_HISTORY_LENGTH) : newHistory;
+        return {
+          ...state,
+          active: id,
+          history: trimmedHistory,
+        };
+      });
+    }),
+  ),
+);
+
+export default handler;
+
+const MAX_HISTORY_LENGTH = 50;

package/src/operations/revert-workspace.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 { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.RevertWorkspace> = LayoutOperation.RevertWorkspace.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* () {
+      const { getState } = yield* layoutStateAccess;
+      const state = getState();
+      yield* Operation.invoke(LayoutOperation.SwitchWorkspace, {
+        subject: state.previousWorkspace,
+      });
+    }),
+  ),
+);
+
+export default handler;

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

@@ -0,0 +1,12 @@
+// 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.fnUntraced(function* () {})),
+);
+
+export default handler;

package/src/operations/set.ts

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

package/src/operations/state-access.ts

@@ -0,0 +1,19 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+
+import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+
+export const layoutStateAccess = Effect.gen(function* () {
+  const registry = yield* Capability.get(Capabilities.AtomRegistry);
+  const stateAtom = yield* Capability.get(SimpleLayoutStateCapability);
+
+  return {
+    getState: () => registry.get(stateAtom),
+    updateState: (fn: (current: SimpleLayoutState) => SimpleLayoutState) => {
+      registry.set(stateAtom, fn(registry.get(stateAtom)));
+    },
+  };
+});

package/src/operations/switch-workspace.ts

@@ -0,0 +1,26 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { isPinnedWorkspace, LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.SwitchWorkspace> = LayoutOperation.SwitchWorkspace.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const { updateState } = yield* layoutStateAccess;
+
+      updateState((state) => ({
+        ...state,
+        previousWorkspace: !isPinnedWorkspace(state.workspace) ? state.workspace : state.previousWorkspace,
+        workspace: input.subject,
+        active: undefined,
+        history: [],
+      }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-complementary.ts

@@ -0,0 +1,34 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { getCompanionVariant, LayoutOperation } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+
+import { layoutStateAccess } from './state-access';
+
+const handler: Operation.WithHandler<typeof LayoutOperation.UpdateComplementary> =
+  LayoutOperation.UpdateComplementary.pipe(
+    Operation.withHandler(
+      Effect.fnUntraced(function* (input) {
+        const { updateState } = yield* layoutStateAccess;
+
+        if (input.state === 'closed') {
+          updateState((state) => ({
+            ...state,
+            drawerState: 'closed',
+            companionVariant: undefined,
+          }));
+        } else if (input.subject) {
+          const variant = getCompanionVariant(input.subject);
+          updateState((state) => ({
+            ...state,
+            companionVariant: variant,
+            drawerState: input.state === 'expanded' ? 'expanded' : 'open',
+          }));
+        }
+      }),
+    ),
+  );
+
+export default handler;

package/src/operations/update-dialog.ts

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