@dxos/plugin-simple-layout 0.0.0 → 0.8.4-main.1068cf700f

package/src/components/SimpleLayout/SimpleLayout.tsx

@@ -2,20 +2,58 @@
 // Copyright 2025 DXOS.org
 //
 
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
+import { Splitter, type SplitterMode } from '@dxos/react-ui';
+import { Mosaic } from '@dxos/react-ui-mosaic';
+
+import { useSimpleLayoutState } from '../../hooks';
 import { Dialog } from '../Dialog';
+import { MobileLayout } from '../MobileLayout';
 import { PopoverContent, PopoverRoot } from '../Popover';
 
+import { Drawer } from './Drawer';
 import { Main } from './Main';
 
-// TODO(wittjosiah): Support toast.
+// 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 {
+      setSplitterMode(state.drawerState === 'closed' ? 'upper' : state.drawerState === 'open' ? 'both' : 'lower');
+    }
+  }, [state.drawerState, keyboardOpen]);
+
   return (
-    <PopoverRoot>
-      <Main />
-      <Dialog />
-      <PopoverContent />
-    </PopoverRoot>
+    <Mosaic.Root classNames='contents'>
+      <MobileLayout.Root
+        classNames='bg-toolbarSurface'
+        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>
   );
 };

package/src/components/SimpleLayout/index.ts

@@ -2,4 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
+export * from './AppBar';
+export * from './Main';
+export * from './NavBar';
 export * from './SimpleLayout';

package/src/components/Workspace/Workspace.tsx

@@ -0,0 +1,119 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { type Node, useConnections } from '@dxos/plugin-graph';
+import { Avatar, Icon, Layout, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card, Mosaic, type StackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchList, useSearchListItem, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { mx } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+import { useLoadDescendents } from '../hooks';
+
+export type WorkspaceProps = {
+  id: string;
+};
+
+/**
+ * Displays the contents of a workspace disposition graph node as a searchable list.
+ * Shows direct children of the workspace with icons and labels,
+ * allowing users to filter via search and navigate by selecting an item.
+ */
+export const Workspace = ({ id }: WorkspaceProps) => {
+  const { t } = useTranslation(meta.id);
+  const { graph } = useAppGraph();
+
+  // Expand the workspace node to load its children.
+  useLoadDescendents(id);
+
+  // Get direct children of the workspace node.
+  const children = useConnections(graph, id, 'outbound');
+
+  const { results, handleSearch } = useSearchListResults({
+    items: children,
+    extract: (child) => toLocalizedString(child.properties.label, t),
+  });
+
+  return (
+    <Layout.Main toolbar>
+      <SearchList.Root onSearch={handleSearch}>
+        <Toolbar.Root>
+          <SearchList.Input placeholder={t('search placeholder')} autoFocus />
+        </Toolbar.Root>
+        <SearchList.Content>
+          <Mosaic.Container asChild>
+            <ScrollArea.Root orientation='vertical'>
+              <ScrollArea.Viewport classNames='p-2'>
+                <Mosaic.Stack items={results} getId={(child) => child.id} Tile={WorkspaceChildTile} />
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </Mosaic.Container>
+        </SearchList.Content>
+      </SearchList.Root>
+    </Layout.Main>
+  );
+};
+
+const WorkspaceChildTile: StackTileComponent<Node.Node> = ({ data }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokeSync } = useOperationInvoker();
+  const ref = useRef<HTMLDivElement>(null);
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
+  const isSelected = selectedValue === data.id;
+
+  const name = toLocalizedString(data.properties.label, t);
+
+  const handleSelect = useCallback(
+    () => invokeSync(LayoutOperation.Open, { subject: [data.id] }),
+    [invokeSync, data.id],
+  );
+
+  // Register this item with the search context.
+  useEffect(() => {
+    if (ref.current) {
+      registerItem(data.id, ref.current, handleSelect);
+    }
+
+    return () => unregisterItem(data.id);
+  }, [data.id, handleSelect, registerItem, unregisterItem]);
+
+  // Scroll into view when selected.
+  useEffect(() => {
+    if (isSelected && ref.current) {
+      ref.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }, [isSelected]);
+
+  return (
+    <Card.Root
+      ref={ref}
+      role='button'
+      fullWidth
+      tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
+      data-selected={isSelected}
+      classNames={mx('dx-focus-ring', isSelected && 'bg-hoverOverlay')}
+      onClick={handleSelect}
+    >
+      <Card.Toolbar density='coarse'>
+        <Avatar.Root>
+          <Avatar.Content
+            hue={data.properties.hue}
+            icon={data.properties.icon}
+            hueVariant='transparent'
+            variant='square'
+            size={12}
+            fallback={name}
+          />
+          <Avatar.Label>{name}</Avatar.Label>
+          <Icon icon='ph--caret-right--regular' />
+        </Avatar.Root>
+      </Card.Toolbar>
+    </Card.Root>
+  );
+};

package/src/components/Workspace/index.ts

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

package/src/components/hooks.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useEffect } from 'react';
+
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Graph } from '@dxos/plugin-graph';
+
+/**
+ * Hook to expand graph nodes two levels deep when directly linked to.
+ */
+export const useLoadDescendents = (nodeId?: string) => {
+  const { graph } = useAppGraph();
+
+  useEffect(() => {
+    if (nodeId) {
+      // First level: expand the node itself.
+      Graph.expand(graph, nodeId, 'outbound');
+      // Second level: expand each child.
+      Graph.getConnections(graph, nodeId, 'outbound').forEach((child) => {
+        Graph.expand(graph, child.id, 'outbound');
+      });
+    }
+  }, [nodeId, graph]);
+};

package/src/components/index.ts

@@ -4,5 +4,7 @@
 
 export * from './ContentLoading';
 export * from './Home';
+export * from './MobileLayout';
 export * from './Popover';
 export * from './SimpleLayout';
+export * from './Workspace';

package/src/hooks/actions.ts

@@ -0,0 +1,85 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+
+import { type Capabilities } from '@dxos/app-framework';
+import { type AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { Node } from '@dxos/plugin-graph';
+import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
+import { type ActionGraphProps } from '@dxos/react-ui-menu';
+import { byPosition } from '@dxos/util';
+
+import { type SimpleLayoutState } from '../types';
+
+// TODO(wittjosiah): Factor out to shared location with plugin-deck.
+export const PLANK_COMPANION_TYPE = 'dxos.org/plugin/deck/plank-companion';
+
+export type CompanionActionsConfig = {
+  /** Prefix for companion action IDs (e.g. 'navbar' or 'drawer') */
+  idPrefix: string;
+  /** Optional: highlight companion with this variant */
+  selectedVariant?: string;
+  /** invokeSync function for dispatching operations */
+  invokeSync: Capabilities.OperationInvoker['invokeSync'];
+};
+
+/**
+ * Creates action graph nodes and edges for companion actions.
+ * Shared logic between useNavbarActions and useDrawerActions.
+ */
+// TODO(burdon): Use builder pattern.
+export const createCompanionActions = (
+  graph: AppCapabilities.AppGraph['graph'],
+  stateAtom: Atom.Atom<SimpleLayoutState>,
+  get: (atom: Atom.Atom<any>) => any,
+  config: CompanionActionsConfig,
+): Pick<ActionGraphProps, 'nodes' | 'edges'> => {
+  const { idPrefix, selectedVariant, invokeSync } = config;
+
+  // Derive activeId from state atom.
+  const state = get(stateAtom);
+  const activeId = state.active ?? state.workspace;
+
+  // Get companions from graph connections for activeId.
+  const activeConnections = activeId ? get(graph.connections(activeId)) : [];
+  const companions = activeConnections
+    .filter((node: Node.Node) => node.type === PLANK_COMPANION_TYPE)
+    .toSorted((a: Node.Node, b: Node.Node) => byPosition(a.properties, b.properties));
+
+  const nodes: ActionGraphProps['nodes'] = [];
+  const edges: ActionGraphProps['edges'] = [];
+
+  // Add companion actions.
+  // TODO(burdon): Cap at 6 items.
+  companions.forEach((companion: Node.Node) => {
+    // Extract variant for highlighting if needed.
+    const [, companionVariant] = companion.id.split(ATTENDABLE_PATH_SEPARATOR);
+
+    const companionAction = {
+      id: `${idPrefix}-companion-${companion.id}`,
+      type: Node.ActionType,
+      properties: {
+        icon: companion.properties.icon ?? 'ph--placeholder--regular',
+        label: companion.properties.label,
+        iconOnly: true,
+        // Conditionally add variant highlighting.
+        ...(selectedVariant !== undefined && {
+          variant: selectedVariant === companionVariant ? 'primary' : 'ghost',
+        }),
+      },
+      data: () =>
+        Effect.sync(() =>
+          invokeSync(LayoutOperation.Open, {
+            subject: [companion.id],
+          }),
+        ),
+    };
+    nodes.push(companionAction);
+    edges.push({ source: 'root', target: companionAction.id });
+  });
+
+  return { nodes, edges };
+};

package/src/hooks/index.ts

@@ -2,4 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './useSpotlightDismiss';
+export * from './useAppBarProps';
+export * from './useCompanions';
+export * from './actions';
+export * from './useDrawerActions';
+export * from './useNavbarActions';
+export * from './useSimpleLayoutState';

package/src/hooks/useAppBarProps.ts

@@ -0,0 +1,112 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+import { useCallback, useMemo } from 'react';
+
+import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Graph, Node, useActionRunner, useNode } from '@dxos/plugin-graph';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type ActionGraphProps } from '@dxos/react-ui-menu';
+
+import { type AppBarProps } from '../components';
+import { meta } from '../meta';
+import { SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+
+/**
+ * Hook that computes all AppBar props from the app graph.
+ * Derives activeId from state atom. Returns props ready to spread into the AppBar component.
+ */
+export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
+  const { t } = useTranslation(meta.id);
+  const stateAtom = useCapability(SimpleLayoutStateCapability);
+  const state = useAtomValue(stateAtom);
+  const { graph } = useAppGraph();
+  const { invokeSync } = useOperationInvoker();
+  const runAction = useActionRunner();
+
+  // Derive activeId from state.
+  const activeId = state.active ?? state.workspace;
+  const node = useNode(graph, activeId);
+
+  // Compute title from node label.
+  const title = node ? toLocalizedString(node.properties.label, t) : undefined;
+
+  // Build actions atom filtering by disposition.
+  // Derive activeId from state atom so we don't need to recreate this atom when it changes.
+  const actionsAtom = useMemo(
+    () =>
+      Atom.make((get): ActionGraphProps => {
+        const state = get(stateAtom);
+        const activeId = state.active ?? state.workspace;
+        const allActions = activeId ? get(graph.actions(activeId)) : [];
+        const filtered = allActions.filter((action) =>
+          ['list-item', 'list-item-primary', 'heading-list-item'].includes(action.properties.disposition),
+        );
+        const nodes: ActionGraphProps['nodes'] = filtered as ActionGraphProps['nodes'];
+        const edges: ActionGraphProps['edges'] = filtered.map((action) => ({ source: 'root', target: action.id }));
+
+        // Add alternate-tree action (e.g. Settings) from the workspace node.
+        const workspaceConnections = state.workspace ? get(graph.connections(state.workspace)) : [];
+        const alternateTreeNode = workspaceConnections.find(
+          (node: Node.Node) => node.properties.disposition === 'alternate-tree',
+        );
+        if (alternateTreeNode && activeId !== alternateTreeNode.id) {
+          const settingsAction = {
+            id: `appbar-settings-${alternateTreeNode.id}`,
+            type: Node.ActionType,
+            data: () => Effect.sync(() => invokeSync(LayoutOperation.Open, { subject: [alternateTreeNode.id] })),
+            properties: {
+              label: alternateTreeNode.properties.label ?? alternateTreeNode.id,
+              icon: alternateTreeNode.properties.icon ?? 'ph--placeholder--regular',
+            },
+          };
+          nodes.push(settingsAction);
+          edges.push({ source: 'root', target: settingsAction.id });
+        }
+
+        return { nodes, edges };
+      }),
+    [graph, stateAtom],
+  );
+
+  // Back button logic.
+  const showBackButton = activeId !== undefined && activeId !== Node.RootId;
+
+  const onBack = useCallback(() => {
+    if (state.active) {
+      const isWorkspace = Graph.getNode(graph, state.active).pipe(
+        Option.map((node) => node.properties.disposition === 'workspace'),
+        Option.getOrElse(() => false),
+      );
+
+      // If history is empty and this is a workspace, go to home.
+      if (state.history.length === 0 && isWorkspace) {
+        invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+      } else {
+        // Otherwise, close (which will pop from history or clear active).
+        invokeSync(LayoutOperation.Close, { subject: [state.active] });
+      }
+    } else {
+      invokeSync(LayoutOperation.SwitchWorkspace, { subject: Node.RootId });
+    }
+  }, [graph, invokeSync, state.active, state.history.length]);
+
+  // Compute popover anchor ID.
+  const popoverAnchorId =
+    node && state.popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? state.popoverAnchorId : undefined;
+
+  return {
+    title,
+    actions: actionsAtom,
+    showBackButton,
+    popoverAnchorId,
+    onBack: onBack,
+    onAction: runAction,
+  };
+};

package/src/hooks/useCompanions.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { useConnections } from '@dxos/plugin-graph';
+import { byPosition } from '@dxos/util';
+
+import { PLANK_COMPANION_TYPE } from './actions';
+
+/**
+ * @deprecated Adopt the pattern from useNavbarActions (deriving from graph atoms)
+ *   or merge the Drawer companion display into the NavBar component.
+ */
+export const useCompanions = (nodeId?: string) => {
+  const { graph } = useAppGraph();
+  const nodes = useConnections(graph, nodeId);
+  const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
+  return useMemo(() => companions.toSorted((a, b) => byPosition(a.properties, b.properties)), [companions]);
+};

package/src/hooks/useDrawerActions.ts

@@ -0,0 +1,98 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import { useMemo } from 'react';
+
+import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Node, useActionRunner } from '@dxos/plugin-graph';
+import { useTranslation } from '@dxos/react-ui';
+import { type ActionExecutor, type ActionGraphProps, createGapSeparator } from '@dxos/react-ui-menu';
+
+import { useMobileLayout } from '../components';
+import { meta } from '../meta';
+import { SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+
+import { createCompanionActions } from './actions';
+import { useSimpleLayoutState } from './useSimpleLayoutState';
+
+export type DrawerActions = {
+  /** Action graph atom for the drawer. */
+  actions: Atom.Atom<ActionGraphProps>;
+  /** Action executor callback. */
+  onAction: ActionExecutor;
+};
+
+/**
+ * Builds the drawer actions including companion tabs and toolbar buttons.
+ */
+export const useDrawerActions = (consumerName: string): DrawerActions => {
+  const { t } = useTranslation(meta.id);
+  const stateAtom = useCapability(SimpleLayoutStateCapability);
+  const { graph } = useAppGraph();
+  const runAction = useActionRunner();
+  const { invokeSync } = useOperationInvoker();
+  const { updateState } = useSimpleLayoutState();
+  const { keyboardOpen } = useMobileLayout(consumerName);
+
+  // Create a computed atom that derives everything from graph connections and state.
+  const actionsAtom = useMemo(
+    () =>
+      Atom.make((get): ActionGraphProps => {
+        // Derive drawer state from state atom.
+        const state = get(stateAtom);
+
+        // Add companion tab actions.
+        const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
+          idPrefix: 'drawer',
+          selectedVariant: state.companionVariant,
+          invokeSync,
+        });
+
+        // Add gap separator before toolbar buttons.
+        const gapSeparator = createGapSeparator('drawer-gap');
+        nodes.push(...gapSeparator.nodes);
+        edges.push(...gapSeparator.edges);
+
+        // Add expand/collapse toggle button (hidden when keyboard is open).
+        if (!keyboardOpen) {
+          const isExpanded = state.drawerState === 'expanded';
+          const toggleExpandAction = {
+            id: 'drawer-toggle-expand',
+            type: Node.ActionType,
+            properties: {
+              icon: isExpanded ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular',
+              label: isExpanded ? t('collapse drawer label') : t('expand drawer label'),
+              iconOnly: true,
+            },
+            data: () =>
+              Effect.sync(() => updateState((state) => ({ ...state, drawerState: isExpanded ? 'open' : 'expanded' }))),
+          };
+          nodes.push(toggleExpandAction);
+          edges.push({ source: 'root', target: toggleExpandAction.id });
+        }
+
+        // Add close button.
+        const closeAction = {
+          id: 'drawer-close',
+          type: Node.ActionType,
+          properties: {
+            icon: 'ph--x--regular',
+            label: t('close drawer label'),
+            iconOnly: true,
+          },
+          data: () => Effect.sync(() => updateState((state) => ({ ...state, drawerState: 'closed' }))),
+        };
+        nodes.push(closeAction);
+        edges.push({ source: 'root', target: closeAction.id });
+
+        return { nodes, edges };
+      }),
+    [graph, stateAtom, invokeSync, updateState, keyboardOpen, t],
+  );
+
+  return { actions: actionsAtom, onAction: runAction };
+};

package/src/hooks/useNavbarActions.ts

@@ -0,0 +1,86 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import { useMemo } from 'react';
+
+import { useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Node, useActionRunner } from '@dxos/plugin-graph';
+import { useTranslation } from '@dxos/react-ui';
+import {
+  type ActionExecutor,
+  type ActionGraphProps,
+  createGapSeparator,
+  createMenuItemGroup,
+} from '@dxos/react-ui-menu';
+
+import { meta } from '../meta';
+import { SimpleLayoutState } from '../types';
+
+import { createCompanionActions } from './actions';
+
+const MAIN_MENU_GROUP_ID = 'navbar-main-menu';
+
+export type NavbarActions = {
+  /** Action graph atom for the navbar. */
+  actions: Atom.Atom<ActionGraphProps>;
+  /** Action executor callback. */
+  onAction: ActionExecutor;
+};
+
+/**
+ * Builds the navbar actions including companion icons, separator, and main menu dropdown.
+ * Derives everything from graph connection atoms for proper reactivity.
+ */
+export const useNavbarActions = (): NavbarActions => {
+  const { t } = useTranslation(meta.id);
+  const { graph } = useAppGraph();
+  const runAction = useActionRunner();
+  const { invokeSync } = useOperationInvoker();
+  const stateAtom = useCapability(SimpleLayoutState);
+
+  // Create a computed atom that derives everything from graph connections and state.
+  const actionsAtom = useMemo(
+    () =>
+      Atom.make((get): ActionGraphProps => {
+        // Add companion actions.
+        const { nodes, edges } = createCompanionActions(graph, stateAtom, get, {
+          idPrefix: 'navbar',
+          invokeSync,
+        });
+
+        // Add gap separator.
+        const gapSeparator = createGapSeparator('navbar-gap');
+        nodes.push(...gapSeparator.nodes);
+        edges.push(...gapSeparator.edges);
+
+        // Add main menu dropdown group.
+        const mainMenuGroup = createMenuItemGroup(MAIN_MENU_GROUP_ID, {
+          variant: 'dropdownMenu',
+          icon: 'ph--list--regular',
+          iconOnly: true,
+          label: t('main menu label'),
+          testId: 'simpleLayoutPlugin.addSpace',
+        });
+        nodes.push(mainMenuGroup);
+        edges.push({ source: 'root', target: mainMenuGroup.id });
+
+        // Get menu actions from root connections.
+        const rootConnections = get(graph.connections(Node.RootId));
+        const menuActions = rootConnections.filter((node) => node.properties.disposition === 'menu');
+
+        // Add menu actions as children of the dropdown group.
+        menuActions.forEach((menuAction) => {
+          nodes.push(menuAction as ActionGraphProps['nodes'][number]);
+          edges.push({ source: MAIN_MENU_GROUP_ID, target: menuAction.id });
+        });
+
+        return { nodes, edges };
+      }),
+    [graph, stateAtom, invokeSync, t],
+  );
+
+  return { actions: actionsAtom, onAction: runAction };
+};