@dxos/plugin-simple-layout 0.0.0

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@dxos/plugin-simple-layout",
+  "version": "0.0.0",
+  "description": "Simple layout plugin for minimal UI contexts like popover windows.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "sideEffects": true,
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@preact-signals/safe-react": "^0.9.0",
+    "@radix-ui/react-context": "1.1.1",
+    "@dxos/app-framework": "0.8.3",
+    "@dxos/log": "0.8.3",
+    "@dxos/react-ui-menu": "0.8.3",
+    "@dxos/live-object": "0.8.3",
+    "@dxos/plugin-graph": "0.8.3",
+    "@dxos/operation": "0.0.0",
+    "@dxos/react-ui-searchlist": "0.8.3",
+    "@dxos/schema": "0.8.3",
+    "@dxos/react-ui-attention": "0.8.3",
+    "@dxos/react-ui-stack": "0.8.3",
+    "@dxos/util": "0.8.3",
+    "@dxos/react-ui-mosaic": "0.8.3"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.19.11",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "7.1.9",
+    "@dxos/echo-signals": "0.8.3",
+    "@dxos/plugin-search": "0.8.3",
+    "@dxos/plugin-client": "0.8.3",
+    "@dxos/plugin-space": "0.8.3",
+    "@dxos/plugin-testing": "0.0.0",
+    "@dxos/ui-theme": "0.0.0",
+    "@dxos/react-ui": "0.8.3",
+    "@dxos/storybook-utils": "0.8.3"
+  },
+  "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"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/SimpleLayoutPlugin.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability, Common, Plugin } from '@dxos/app-framework';
+
+import { OperationResolver, ReactRoot, type SimpleLayoutStateOptions, State } from './capabilities';
+import { meta } from './meta';
+import { translations } from './translations';
+
+export type SimpleLayoutPluginOptions = {
+  /** Whether running in popover window context (hides mobile-specific UI). */
+  isPopover?: boolean;
+};
+
+export const SimpleLayoutPlugin = Plugin.define<SimpleLayoutPluginOptions>(meta).pipe(
+  Plugin.addModule(({ isPopover = false }) => ({
+    id: Capability.getModuleTag(State),
+    activatesOn: Common.ActivationEvent.Startup,
+    activatesAfter: [Common.ActivationEvent.LayoutReady],
+    activate: () => State({ initialState: { isPopover } } satisfies SimpleLayoutStateOptions),
+  })),
+  Plugin.addModule({
+    id: Capability.getModuleTag(ReactRoot),
+    activatesOn: Common.ActivationEvent.Startup,
+    activate: ReactRoot,
+  }),
+  Common.Plugin.addOperationResolverModule({ activate: OperationResolver }),
+  Common.Plugin.addTranslationsModule({ translations }),
+  Plugin.make,
+);

package/src/capabilities/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './operation-resolver';
+export * from './react-root';
+export * from './state';

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

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Capability, Capability as Capability$ } from '@dxos/app-framework';
+
+export const OperationResolver: Capability.LazyCapability = Capability$.lazy(
+  'OperationResolver',
+  () => import('./operation-resolver'),
+);

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

@@ -0,0 +1,135 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { Operation, OperationResolver } from '@dxos/operation';
+
+import { SimpleLayoutState } from '../../types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Common.Capability.OperationResolver, [
+      //
+      // UpdateSidebar - No-op for simple layout.
+      //
+      OperationResolver.make({
+        operation: Common.LayoutOperation.UpdateSidebar,
+        handler: () => Effect.void,
+      }),
+
+      //
+      // UpdateComplementary - No-op for simple layout.
+      //
+      OperationResolver.make({
+        operation: Common.LayoutOperation.UpdateComplementary,
+        handler: () => Effect.void,
+      }),
+
+      //
+      // UpdateDialog
+      //
+      OperationResolver.make({
+        operation: Common.LayoutOperation.UpdateDialog,
+        handler: Effect.fnUntraced(function* (input) {
+          const layout = yield* Capability.get(SimpleLayoutState);
+          layout.dialogOpen = input.state ?? Boolean(input.subject);
+          layout.dialogType = input.type ?? 'default';
+          layout.dialogBlockAlign = input.blockAlign ?? 'center';
+          layout.dialogOverlayClasses = input.overlayClasses;
+          layout.dialogOverlayStyle = input.overlayStyle;
+          layout.dialogContent = input.subject ? { component: input.subject, props: input.props } : null;
+        }),
+      }),
+
+      //
+      // UpdatePopover
+      //
+      OperationResolver.make({
+        operation: Common.LayoutOperation.UpdatePopover,
+        handler: Effect.fnUntraced(function* (input) {
+          const layout = yield* Capability.get(SimpleLayoutState);
+          layout.popoverOpen = input.state ?? Boolean(input.subject);
+          layout.popoverContent =
+            typeof input.subject === 'string'
+              ? { component: input.subject, props: input.props }
+              : input.subject
+                ? { subject: input.subject }
+                : undefined;
+          layout.popoverSide = input.side;
+          layout.popoverVariant = input.variant;
+          if (input.variant === 'virtual') {
+            layout.popoverAnchor = input.anchor;
+          } else {
+            layout.popoverAnchorId = input.anchorId;
+          }
+        }),
+      }),
+
+      //
+      // SwitchWorkspace
+      //
+      OperationResolver.make({
+        operation: Common.LayoutOperation.SwitchWorkspace,
+        handler: Effect.fnUntraced(function* (input) {
+          const layout = yield* Capability.get(SimpleLayoutState);
+          // TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
+          //  Ideally this should be worked into the data model in a generic way.
+          if (!layout.workspace.startsWith('!')) {
+            layout.previousWorkspace = layout.workspace;
+          }
+          layout.workspace = input.subject;
+          layout.active = undefined;
+        }),
+      }),
+
+      //
+      // RevertWorkspace
+      //
+      OperationResolver.make({
+        operation: Common.LayoutOperation.RevertWorkspace,
+        handler: Effect.fnUntraced(function* () {
+          const layout = yield* Capability.get(SimpleLayoutState);
+          yield* Operation.invoke(Common.LayoutOperation.SwitchWorkspace, {
+            subject: layout.previousWorkspace,
+          });
+        }),
+      }),
+
+      //
+      // Open
+      //
+      OperationResolver.make({
+        operation: Common.LayoutOperation.Open,
+        handler: Effect.fnUntraced(function* (input) {
+          const layout = yield* Capability.get(SimpleLayoutState);
+          layout.active = input.subject[0];
+        }),
+      }),
+
+      //
+      // Close
+      //
+      OperationResolver.make({
+        operation: Common.LayoutOperation.Close,
+        handler: Effect.fnUntraced(function* () {
+          const layout = yield* Capability.get(SimpleLayoutState);
+          layout.active = undefined;
+        }),
+      }),
+
+      //
+      // Set
+      //
+      OperationResolver.make({
+        operation: Common.LayoutOperation.Set,
+        handler: Effect.fnUntraced(function* (input) {
+          const layout = yield* Capability.get(SimpleLayoutState);
+          layout.active = input.subject[0];
+        }),
+      }),
+    ]);
+  }),
+);

package/src/capabilities/react-root/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ReactRoot = Capability.lazy('ReactRoot', () => import('./react-root'));

package/src/capabilities/react-root/react-root.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capability, Common } from '@dxos/app-framework';
+
+import { SimpleLayout } from '../../components';
+import { meta } from '../../meta';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Common.Capability.ReactRoot, {
+      id: meta.id,
+      root: () => {
+        return <SimpleLayout />;
+      },
+    }),
+  ),
+);

package/src/capabilities/state/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const State = Capability.lazy('State', () => import('./state'));
+
+export type { SimpleLayoutStateOptions } from './state';

package/src/capabilities/state/state.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { live } from '@dxos/live-object';
+
+import { type SimpleLayoutState } from '../../types';
+import { SimpleLayoutState as SimpleLayoutStateCapability } from '../../types';
+
+const defaultState: SimpleLayoutState = {
+  dialogOpen: false,
+  workspace: 'default',
+  previousWorkspace: 'default',
+  isPopover: false,
+};
+
+export type SimpleLayoutStateOptions = {
+  initialState?: Partial<SimpleLayoutState>;
+};
+
+export default Capability.makeModule(({ initialState }: SimpleLayoutStateOptions = {}) =>
+  Effect.sync(() => {
+    const state = live<SimpleLayoutState>({ ...defaultState, ...initialState });
+
+    const layout = live<Common.Capability.Layout>({
+      get mode() {
+        return 'simple';
+      },
+      get dialogOpen() {
+        return state.dialogOpen;
+      },
+      get sidebarOpen() {
+        return false;
+      },
+      get complementarySidebarOpen() {
+        return false;
+      },
+      get workspace() {
+        return state.workspace;
+      },
+      get active() {
+        return state.active ? [state.active] : [];
+      },
+      get inactive() {
+        return [];
+      },
+      get scrollIntoView() {
+        return undefined;
+      },
+    });
+
+    return [
+      Capability.contributes(SimpleLayoutStateCapability, state),
+      Capability.contributes(Common.Capability.Layout, layout),
+    ];
+  }),
+);

package/src/components/ContentError.stories.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../translations';
+
+import { ContentError } from './ContentError';
+
+const meta = {
+  title: 'plugins/plugin-simple-layout/ContentError',
+  component: ContentError,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof ContentError>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithError: Story = {
+  args: {
+    error: new Error('Something went wrong while loading the content'),
+  },
+};
+
+export const WithTypeError: Story = {
+  args: {
+    error: new TypeError('Cannot read property "foo" of undefined'),
+  },
+};

package/src/components/ContentError.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { useTranslation } from '@dxos/react-ui';
+import { descriptionMessage, mx } from '@dxos/ui-theme';
+
+import { meta } from '../meta';
+
+// TODO(burdon): Factor out.
+export const ContentError = ({ error }: { error?: Error }) => {
+  const { t } = useTranslation(meta.id);
+  const errorString = error?.toString() ?? '';
+  return (
+    <div role='none' className='grid place-items-center overflow-y-auto attention-surface'>
+      <p role='alert' className={mx(descriptionMessage, 'p-2 break-all rounded-sm')}>
+        {error ? errorString : t('error fallback message')}
+      </p>
+    </div>
+  );
+};

package/src/components/ContentLoading.stories.tsx

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { ContentLoading } from './ContentLoading';
+
+const meta = {
+  title: 'plugins/plugin-simple-layout/ContentLoading',
+  component: ContentLoading,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ContentLoading>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/ContentLoading.tsx

@@ -0,0 +1,10 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+// TODO(burdon): Show skeleton: https://github.com/dxos/dxos/issues/8259
+export const ContentLoading = () => {
+  return <div role='none' className='grid place-items-center attention-surface' />;
+};

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Surface, useCapability } from '@dxos/app-framework/react';
+import { AlertDialog, Dialog as NaturalDialog } from '@dxos/react-ui';
+
+import { SimpleLayoutState } from '../../types';
+import { ContentError } from '../ContentError';
+
+export const Dialog = () => {
+  const layout = useCapability(SimpleLayoutState);
+
+  const DialogRoot = layout.dialogType === 'alert' ? AlertDialog.Root : NaturalDialog.Root;
+  const DialogOverlay = layout.dialogType === 'alert' ? AlertDialog.Overlay : NaturalDialog.Overlay;
+
+  return (
+    <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>
+  );
+};

package/src/components/Dialog/index.ts

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

package/src/components/Home/Home.tsx

@@ -0,0 +1,138 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { Common } from '@dxos/app-framework';
+import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+import { Graph, Node, useConnections } from '@dxos/plugin-graph';
+import { Avatar, Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui-mosaic';
+import { SearchList, useSearchListItem, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { mx } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+
+type HomeProps = ThemedClassName;
+
+export const Home = ({ classNames }: HomeProps) => {
+  const { t } = useTranslation(meta.id);
+  const workspaces = useWorkspaces();
+  useLoadDescendents(Node.RootId);
+
+  const { results, handleSearch } = useSearchListResults({
+    items: workspaces,
+    extract: (node) => toLocalizedString(node.properties.label, t),
+  });
+
+  return (
+    <div className={mx('flex flex-col pli-3', classNames)}>
+      {/* <div className='container-max-width'>{t('workspaces heading')}</div> */}
+      <SearchList.Root onSearch={handleSearch} classNames='container-max-width'>
+        <div className='plb-3'>
+          <SearchList.Input placeholder={t('search placeholder')} autoFocus />
+        </div>
+        <SearchList.Content>
+          <SearchList.Viewport classNames='flex flex-col gap-1'>
+            {results.map((node) => (
+              <Workspace key={node.id} node={node} />
+            ))}
+          </SearchList.Viewport>
+        </SearchList.Content>
+      </SearchList.Root>
+    </div>
+  );
+};
+
+const Workspace = ({ node }: { node: Node.Node }) => {
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleSelect = useCallback(
+    () => invokePromise(Common.LayoutOperation.SwitchWorkspace, { subject: node.id }),
+    [invokePromise, node.id],
+  );
+
+  useLoadDescendents(node.id);
+
+  const name = toLocalizedString(node.properties.label, t);
+  const isSelected = selectedValue === node.id;
+
+  // Register this workspace with the search context.
+  useEffect(() => {
+    if (ref.current) {
+      registerItem(node.id, ref.current, handleSelect);
+    }
+
+    return () => unregisterItem(node.id);
+  }, [node.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'
+      tabIndex={-1}
+      data-selected={isSelected}
+      classNames={mx('dx-focus-ring', isSelected && 'bg-hoverOverlay')}
+      onClick={handleSelect}
+    >
+      <Card.Chrome classNames='grid grid-cols-[min-content_1fr_min-content] items-center gap-cardSpacingInline pie-cardSpacingInline'>
+        <Avatar.Root>
+          <Avatar.Content
+            hue={node.properties.hue}
+            icon={node.properties.icon}
+            hueVariant='surface'
+            variant='square'
+            size={12}
+            fallback={name}
+          />
+          <Avatar.Label>{name}</Avatar.Label>
+          <Icon icon='ph--caret-right--regular' />
+        </Avatar.Root>
+      </Card.Chrome>
+    </Card.Root>
+  );
+};
+
+const useLoadDescendents = (nodeId?: string) => {
+  const { graph } = useAppGraph();
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (nodeId) {
+        Graph.expand(graph, nodeId, 'outbound');
+        Graph.getConnections(graph, nodeId, 'outbound').forEach((child) => {
+          Graph.expand(graph, child.id, 'outbound');
+        });
+      }
+    });
+
+    return () => cancelAnimationFrame(frame);
+  }, [nodeId, graph]);
+};
+
+const useWorkspaces = () => {
+  const { graph } = useAppGraph();
+
+  // Get root connections to find collections.
+  const rootConnections = useConnections(graph, Node.RootId);
+  const collections = useMemo(
+    () => rootConnections.filter((node) => node.properties.disposition === 'collection'),
+    [rootConnections],
+  );
+
+  // Get first collection's children as workspaces.
+  // TODO(wittjosiah): Support multiple collections or nested workspaces if needed.
+  const firstCollection = collections[0];
+  return useConnections(graph, firstCollection?.id);
+};

package/src/components/Home/index.ts

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