@dxos/plugin-simple-layout 0.8.4-main.69d29f4 → 0.8.4-main.7996785055

package/src/hooks/useNavbarActions.ts

@@ -0,0 +1,87 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import { useMemo } from 'react';
+
+import { useCapability } 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';
+import { useSimpleLayoutState } from './useSimpleLayoutState';
+
+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 stateAtom = useCapability(SimpleLayoutState);
+  const { updateState } = useSimpleLayoutState();
+
+  // 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',
+          updateState,
+        });
+
+        // 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, relation: 'child' });
+
+        // Get menu actions from root actions (on 'action' edge relation).
+        const rootActions = get(graph.actions(Node.RootId));
+        const menuActions = rootActions.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, relation: 'child' });
+        });
+
+        return { nodes, edges };
+      }),
+    [graph, stateAtom, updateState, t],
+  );
+
+  return { actions: actionsAtom, onAction: runAction };
+};

package/src/hooks/useSimpleLayoutState.ts

@@ -5,18 +5,18 @@
 import { RegistryContext, useAtomValue } from '@effect-atom/atom-react';
 import { useCallback, useContext } from 'react';
 
-import { useCapability } from '@dxos/app-framework/react';
+import { useCapability } from '@dxos/app-framework/ui';
 
-import { type SimpleLayoutState, SimpleLayoutState as SimpleLayoutStateCapability } from '../types';
+import { SimpleLayoutState } from '../types';
 
-export type SimpleLayoutStateHook = {
+export type UseSimpleLayoutState = {
   state: SimpleLayoutState;
   updateState: (fn: (current: SimpleLayoutState) => SimpleLayoutState) => void;
 };
 
-export const useSimpleLayoutState = (): SimpleLayoutStateHook => {
+export const useSimpleLayoutState = (): UseSimpleLayoutState => {
   const registry = useContext(RegistryContext);
-  const stateAtom = useCapability(SimpleLayoutStateCapability);
+  const stateAtom = useCapability(SimpleLayoutState);
   const state = useAtomValue(stateAtom);
 
   const updateState = useCallback(

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/simple-layout',
+  id: 'org.dxos.plugin.simple-layout',
   name: 'Simple Layout',
   description: trim`
     Minimal layout plugin for simplified UI contexts like popover windows.

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;

package/src/operations/update-popover.ts

@@ -0,0 +1,35 @@
+// 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.UpdatePopover> = LayoutOperation.UpdatePopover.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* (input) {
+      const { updateState } = yield* layoutStateAccess;
+
+      updateState((state) => ({
+        ...state,
+        popoverOpen: input.state ?? Boolean(input.subject),
+        popoverKind: input.kind ?? 'base',
+        popoverTitle: input.kind === 'card' ? input.title : undefined,
+        popoverContent:
+          typeof input.subject === 'string'
+            ? { component: input.subject, props: input.props }
+            : input.subject
+              ? { subject: input.subject }
+              : undefined,
+        popoverSide: input.side,
+        popoverVariant: input.variant,
+        popoverAnchor: input.variant === 'virtual' ? input.anchor : state.popoverAnchor,
+        popoverAnchorId: input.variant !== 'virtual' ? input.anchorId : state.popoverAnchorId,
+      }));
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/update-sidebar.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.UpdateSidebar> = LayoutOperation.UpdateSidebar.pipe(
+  Operation.withHandler(() => Effect.void),
+);
+
+export default handler;

package/src/translations.ts

@@ -3,10 +3,12 @@
 //
 
 import { type Resource } from '@dxos/react-ui';
+import { translations as searchTranslations } from '@dxos/react-ui-search';
 
 import { meta } from './meta';
 
 export const translations = [
+  ...searchTranslations,
   {
     'en-US': {
       [meta.id]: {
@@ -20,8 +22,13 @@ export const translations = [
         'profile label': 'Profile',
         'app menu label': 'App menu',
         'main menu label': 'Main menu',
+        'companions menu label': 'Companions',
         'error fallback message': 'An error occurred',
-        'search placeholder': 'Search...',
+        'drawer label': 'Drawer',
+        'close drawer label': 'Close drawer',
+        'expand drawer label': 'Expand drawer',
+        'collapse drawer label': 'Collapse drawer',
+        'actions menu label': 'Actions',
       },
     },
   },

package/src/types/capabilities.ts

@@ -9,11 +9,17 @@ import { type Label } from '@dxos/react-ui';
 
 import { meta } from '../meta';
 
+export type DrawerState = 'closed' | 'open' | 'expanded';
+
 // TODO(wittjosiah): Handle toasts.
 export type SimpleLayoutState = {
   /** Data to be passed to the main content Surface. */
   content?: any;
 
+  previousWorkspace: string;
+  workspace: string;
+  active?: string;
+
   dialogOpen: boolean;
   dialogType?: 'default' | 'alert';
   dialogBlockAlign?: 'start' | 'center' | 'end';
@@ -31,14 +37,17 @@ export type SimpleLayoutState = {
   popoverTitle?: Label;
   popoverContent?: any;
 
-  workspace: string;
-  previousWorkspace: string;
-  active?: string;
+  /** Bottom drawer state. */
+  drawerState: DrawerState;
+
   /** Stack of previously active item IDs for back navigation. */
   history: string[];
 
   /** Whether running in popover window context (hides mobile-specific UI). */
   isPopover?: boolean;
+
+  /** Variant of the companion to display in the drawer (e.g., "comments", "assistant-chat"). */
+  companionVariant?: string;
 };
 
-export const SimpleLayoutState = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}/state`);
+export const SimpleLayoutState = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}.state`);

package/src/types/events.ts

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ActivationEvent, Common } from '@dxos/app-framework';
+import { type ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 
 import { SimpleLayoutState } from './capabilities';
 
 export namespace SimpleLayoutEvents {
   /** Fired when SimpleLayoutState capability is ready. */
-  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(
+  export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(
     SimpleLayoutState.identifier,
   );
 }

package/dist/lib/browser/chunk-CLPGTNWJ.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts", "../../../src/types/capabilities.ts", "../../../src/types/events.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n  id: 'dxos.org/plugin/simple-layout',\n  name: 'Simple Layout',\n  description: trim`\n    Minimal layout plugin for simplified UI contexts like popover windows.\n    Provides basic content rendering without sidebars or complex navigation.\n  `,\n  icon: 'ph--layout--regular',\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Atom } from '@effect-atom/atom-react';\n\nimport { Capability } from '@dxos/app-framework';\nimport { type Label } from '@dxos/react-ui';\n\nimport { meta } from '../meta';\n\n// TODO(wittjosiah): Handle toasts.\nexport type SimpleLayoutState = {\n  /** Data to be passed to the main content Surface. */\n  content?: any;\n\n  dialogOpen: boolean;\n  dialogType?: 'default' | 'alert';\n  dialogBlockAlign?: 'start' | 'center' | 'end';\n  dialogOverlayClasses?: string;\n  dialogOverlayStyle?: Record<string, any>;\n  /** Data to be passed to the dialog Surface. */\n  dialogContent?: any;\n\n  popoverOpen?: boolean;\n  popoverSide?: 'top' | 'right' | 'bottom' | 'left';\n  popoverVariant?: 'virtual' | 'react';\n  popoverAnchor?: HTMLButtonElement;\n  popoverAnchorId?: string;\n  popoverKind?: 'base' | 'card';\n  popoverTitle?: Label;\n  popoverContent?: any;\n\n  workspace: string;\n  previousWorkspace: string;\n  active?: string;\n  /** Stack of previously active item IDs for back navigation. */\n  history: string[];\n\n  /** Whether running in popover window context (hides mobile-specific UI). */\n  isPopover?: boolean;\n};\n\nexport const SimpleLayoutState = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}/state`);\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { type ActivationEvent, Common } from '@dxos/app-framework';\n\nimport { SimpleLayoutState } from './capabilities';\n\nexport namespace SimpleLayoutEvents {\n  /** Fired when SimpleLayoutState capability is ready. */\n  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(\n    SimpleLayoutState.identifier,\n  );\n}\n"],
-  "mappings": ";AAKA,SAASA,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaC;;;;EAIbC,MAAM;AACR;;;ACTA,SAASC,kBAAkB;AAqCpB,IAAMC,oBAAoBC,WAAWC,KAAuC,GAAGC,KAAKC,EAAE,QAAQ;;;ACvCrG,SAA+BC,cAAc;UAI5BC,qBAAAA;sBAEFC,aAA8CC,OAAOC,gBAAgBC,iBAChFC,kBAAkBC,UAAU;AAEhC,GALiBN,uBAAAA,qBAAAA,CAAAA,EAAAA;;",
-  "names": ["trim", "meta", "id", "name", "description", "trim", "icon", "Capability", "SimpleLayoutState", "Capability", "make", "meta", "id", "Common", "SimpleLayoutEvents", "StateReady", "Common", "ActivationEvent", "createStateEvent", "SimpleLayoutState", "identifier"]
-}