@dxos/app-framework 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/src/plugin-intent/intent-dispatcher.ts

@@ -2,8 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Effect, Option, Ref, pipe } from 'effect';
-import { type Simplify } from 'effect/Types';
+import * as Effect from 'effect/Effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import * as Ref from 'effect/Ref';
+import type * as Types from 'effect/Types';
 
 import { live } from '@dxos/live-object';
 import { log } from '@dxos/log';
@@ -132,7 +135,7 @@ export const createResolver = <Tag extends string, Fields extends IntentParams,
  */
 export type PromiseIntentDispatcher = <Fields extends IntentParams>(
   intent: IntentChain<any, any, any, Fields>,
-) => Promise<Simplify<IntentDispatcherResult<IntentData<Fields>, IntentResultData<Fields>>>>;
+) => Promise<Types.Simplify<IntentDispatcherResult<IntentData<Fields>, IntentResultData<Fields>>>>;
 
 /**
  * Creates an effect for intents.
@@ -141,7 +144,7 @@ export type IntentDispatcher = <Fields extends IntentParams>(
   intent: IntentChain<any, any, any, Fields>,
   depth?: number,
 ) => Effect.Effect<
-  Simplify<Required<IntentDispatcherResult<IntentData<Fields>, IntentResultData<Fields>>>['data']>,
+  Types.Simplify<Required<IntentDispatcherResult<IntentData<Fields>, IntentResultData<Fields>>>['data']>,
   Error
 >;
 
@@ -197,7 +200,6 @@ export const createDispatcher = (
         .filter((resolver) => !resolver.filter || resolver.filter(intent.data))
         .toSorted(byPosition);
       if (candidates.length === 0) {
-        log.info('no resolvers found', { intent: intent.id });
         return yield* Effect.fail(new NoResolversError(intent.id));
       }
 
@@ -207,6 +209,7 @@ export const createDispatcher = (
     });
 
   const dispatch: IntentDispatcher = (intentChain, depth = 0) => {
+    log('dispatch', { intentChain: intentChain.all.map((i) => i.id), depth });
     return Effect.gen(function* () {
       if (depth > executionLimit) {
         return yield* Effect.fail(new CycleDetectedError());
@@ -214,8 +217,10 @@ export const createDispatcher = (
 
       const resultsRef = yield* Ref.make<AnyIntentResult[]>([]);
       for (const intent of intentChain.all) {
+        log('processing', { intent });
         const { data: prev } = (yield* resultsRef.get)[0] ?? {};
         const result = yield* handleIntent({ ...intent, data: { ...intent.data, ...prev } });
+        log('ok', { intent: intent.id, result });
         yield* Ref.update(resultsRef, (results) => [result, ...results]);
         if (result.intents) {
           for (const intent of result.intents) {
@@ -232,6 +237,7 @@ export const createDispatcher = (
           //     error: result.error.message,
           //   }),
           // );
+          log.error('failed', { intent: intent.id, error: result.error });
           return yield* Effect.fail(result.error);
         }
       }
@@ -253,7 +259,7 @@ export const createDispatcher = (
 
       if (result.undoable && isUndoable(results)) {
         // TODO(wittjosiah): Is there a better way to handle showing undo for chains?
-        yield* pipe(
+        yield* Function.pipe(
           dispatch(createIntent(IntentAction.ShowUndo, { message: result.undoable.message })),
           Effect.catchSome((err) =>
             err instanceof NoResolversError ? Option.some(Effect.succeed(undefined)) : Option.none(),
@@ -261,6 +267,7 @@ export const createDispatcher = (
         );
       }
 
+      log('done', { intent: intentChain.all.map((i) => i.id), result: result.data });
       return result.data;
     });
   };

package/src/plugin-intent/intent.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 export type IntentParams = {
   readonly input: Schema.Schema.All;

package/src/plugin-intent/meta.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const meta: PluginMeta = {
+  id: 'dxos.org/plugin/intent',
+  name: 'Intent',
+};

package/src/plugin-settings/SettingsPlugin.ts

@@ -5,32 +5,30 @@
 import { Capabilities, Events } from '../common';
 import { contributes, defineModule, definePlugin, lazy } from '../core';
 
-import { SETTINGS_PLUGIN } from './actions';
+import { meta } from './meta';
 import { translations } from './translations';
 
-// TODO(wittjosiah): Add options to exclude some modules.
-export const SettingsPlugin = () =>
-  definePlugin({ id: SETTINGS_PLUGIN, name: 'Settings' }, [
-    defineModule({
-      id: `${SETTINGS_PLUGIN}/module/store`,
-      activatesOn: Events.Startup,
-      activatesBefore: [Events.SetupSettings],
-      activatesAfter: [Events.SettingsReady],
-      activate: lazy(() => import('./store')),
-    }),
-    defineModule({
-      id: `${SETTINGS_PLUGIN}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${SETTINGS_PLUGIN}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: lazy(() => import('./intent-resolver')),
-    }),
-    defineModule({
-      id: `${SETTINGS_PLUGIN}/module/app-graph-builder`,
-      activatesOn: Events.SetupAppGraph,
-      activate: lazy(() => import('./app-graph-builder')),
-    }),
-  ]);
+export const SettingsPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/store`,
+    activatesOn: Events.Startup,
+    activatesBefore: [Events.SetupSettings],
+    activatesAfter: [Events.SettingsReady],
+    activate: lazy(() => import('./store')),
+  }),
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: lazy(() => import('./intent-resolver')),
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: lazy(() => import('./app-graph-builder')),
+  }),
+]);

package/src/plugin-settings/actions.ts

@@ -2,28 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
-export const SETTINGS_PLUGIN = 'dxos.org/plugin/settings';
-export const SETTINGS_ACTION = `${SETTINGS_PLUGIN}/action`;
-// 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.
+import { meta } from './meta';
+
+// TODO(burdon): Document.
 export const SETTINGS_ID = '!dxos:settings';
 export const SETTINGS_KEY = 'settings';
 
 export namespace SettingsAction {
-  export class Open extends Schema.TaggedClass<Open>()(`${SETTINGS_ACTION}/open`, {
+  export class Open extends Schema.TaggedClass<Open>()(`${meta.id}/open`, {
     input: Schema.Struct({
       plugin: Schema.optional(Schema.String),
     }),
     output: Schema.Void,
   }) {}
 
-  export class OpenPluginRegistry extends Schema.TaggedClass<OpenPluginRegistry>()(
-    `${SETTINGS_ACTION}/open-plugin-registry`,
-    {
-      input: Schema.Void,
-      output: Schema.Void,
-    },
-  ) {}
+  export class OpenPluginRegistry extends Schema.TaggedClass<OpenPluginRegistry>()(`${meta.id}/open-plugin-registry`, {
+    input: Schema.Void,
+    output: Schema.Void,
+  }) {}
 }

package/src/plugin-settings/app-graph-builder.ts

@@ -2,8 +2,9 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import { Atom } from '@effect-atom/atom-react';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 import { ROOT_ID, createExtension } from '@dxos/app-graph';
 import { type SettingsStore, type SettingsValue } from '@dxos/local-storage';
@@ -13,26 +14,27 @@ import { Capabilities } from '../common';
 import { type PluginContext, type PluginMeta, contributes } from '../core';
 import { createIntent } from '../plugin-intent';
 
-import { SETTINGS_ID, SETTINGS_KEY, SETTINGS_PLUGIN, SettingsAction } from './actions';
+import { SETTINGS_ID, SETTINGS_KEY, SettingsAction } from './actions';
+import { meta } from './meta';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
-      id: `${SETTINGS_PLUGIN}/action`,
+      id: `${meta.id}/action`,
       actions: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => [
               {
-                id: SETTINGS_PLUGIN,
+                id: meta.id,
                 data: async () => {
                   const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
                   await dispatch(createIntent(SettingsAction.Open));
                 },
                 properties: {
-                  label: ['open settings label', { ns: SETTINGS_PLUGIN }],
+                  label: ['open settings label', { ns: meta.id }],
                   icon: 'ph--gear--regular',
                   disposition: 'menu',
                   keyBinding: {
@@ -47,18 +49,18 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${SETTINGS_PLUGIN}/core`,
+      id: `${meta.id}/core`,
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map(() => [
               {
                 id: SETTINGS_ID,
-                type: SETTINGS_PLUGIN,
+                type: meta.id,
                 properties: {
-                  label: ['app settings label', { ns: SETTINGS_PLUGIN }],
+                  label: ['app settings label', { ns: meta.id }],
                   icon: 'ph--gear--regular',
                   disposition: 'pin-end',
                   position: 'hoist',
@@ -71,10 +73,10 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${SETTINGS_PLUGIN}/core-plugins`,
+      id: `${meta.id}/core-plugins`,
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id !== SETTINGS_ID ? Option.none() : Option.some(node))),
             Option.map(() => {
@@ -106,7 +108,7 @@ export default (context: PluginContext) =>
                   id: `${SETTINGS_KEY}:custom-plugins`,
                   type: 'category',
                   properties: {
-                    label: ['custom plugins label', { ns: SETTINGS_PLUGIN }],
+                    label: ['custom plugins label', { ns: meta.id }],
                     icon: 'ph--squares-four--regular',
                     role: 'branch',
                     disposition: 'collection',
@@ -119,10 +121,10 @@ export default (context: PluginContext) =>
         ),
     }),
     createExtension({
-      id: `${SETTINGS_PLUGIN}/custom-plugins`,
+      id: `${meta.id}/custom-plugins`,
       connector: (node) =>
-        Rx.make((get) =>
-          pipe(
+        Atom.make((get) =>
+          Function.pipe(
             get(node),
             Option.flatMap((node) =>
               node.id !== `${SETTINGS_KEY}:custom-plugins` ? Option.none() : Option.some(node),

package/src/plugin-settings/intent-resolver.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import * as Function from 'effect/Function';
 
 import { Capabilities, LayoutAction } from '../common';
 import { contributes } from '../core';
@@ -20,7 +20,7 @@ export default () =>
         return {
           intents: [
             plugin
-              ? pipe(
+              ? Function.pipe(
                   openSettings,
                   chain(LayoutAction.Open, {
                     part: 'main',

package/src/plugin-settings/meta.ts

@@ -0,0 +1,10 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const meta: PluginMeta = {
+  id: 'dxos.org/plugin/settings',
+  name: 'Settings',
+};

package/src/plugin-settings/store.ts

@@ -8,11 +8,11 @@ import { Capabilities } from '../common';
 import { type PluginContext, contributes } from '../core';
 
 export default (context: PluginContext) => {
-  // TODO(wittjosiah): Replace with rx?
+  // TODO(wittjosiah): Replace with atom?
   const settingsStore = new RootSettingsStore();
 
   let previous: Capabilities.Settings[] = [];
-  const registry = context.getCapability(Capabilities.RxRegistry);
+  const registry = context.getCapability(Capabilities.AtomRegistry);
   const cancel = registry.subscribe(
     context.capabilities(Capabilities.Settings),
     (allSettings) => {

package/src/plugin-settings/translations.ts

@@ -1,15 +1,15 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
-import { type Resource } from '@dxos/react-ui';
+import { type Resource } from '../common';
 
-import { SETTINGS_PLUGIN } from './actions';
+import { meta } from './meta';
 
 export const translations = [
   {
     'en-US': {
-      [SETTINGS_PLUGIN]: {
+      [meta.id]: {
         'open settings label': 'Open settings',
         'app settings label': 'Settings',
         'custom plugins label': 'Plugins',

package/src/{components → react}/App.stories.tsx

@@ -2,12 +2,10 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { useApp } from './useApp';
 

package/src/{components → react}/App.tsx

@@ -6,9 +6,9 @@ import React, { type PropsWithChildren } from 'react';
 
 import { Capabilities } from '../common';
 import { topologicalSort } from '../helpers';
-import { useCapabilities } from '../react';
 
 import { type UseAppOptions } from './useApp';
+import { useCapabilities } from './useCapabilities';
 import { LoadingState, useLoading } from './useLoading';
 
 export type AppProps = Pick<UseAppOptions, 'placeholder' | 'debounce'> & {

package/src/{components → react}/DefaultFallback.tsx

@@ -19,7 +19,7 @@ export const DefaultFallback = ({ error }: { error: Error }) => {
       }}
     >
       {/* TODO(wittjosiah): Link to docs for replacing default. */}
-      <h1 style={{ margin: '0.5rem 0', fontSize: '1.2rem' }}>[ERROR]: {error.message}</h1>
+      <h1 style={{ margin: '0.5rem 0', fontSize: '1.2rem' }}>ERROR: {error.message}</h1>
       <pre style={{ overflow: 'auto', fontSize: '1rem', whiteSpace: 'pre-wrap', color: '#888888' }}>{error.stack}</pre>
     </div>
   );

package/src/react/ErrorBoundary.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { Component, type FC, type JSX, type PropsWithChildren, type ReactNode } from 'react';
+import React, { Component, type FC, type PropsWithChildren, type ReactNode } from 'react';
 
 type State = {
   error: Error | undefined;
@@ -32,7 +32,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
     }
   }
 
-  override render(): string | number | boolean | JSX.Element | Iterable<ReactNode> | null | undefined {
+  override render(): ReactNode {
     if (this.state.error) {
       const Fallback = this.props.fallback ?? DefaultFallback;
       return <Fallback data={this.props.data} error={this.state.error} />;
@@ -46,9 +46,11 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
   }
 }
 
-const DefaultFallback: NonNullable<ErrorBoundaryProps['fallback']> = ({ data, error }) => (
-  <div className='flex flex-col gap-2 overflow-hidden border border-red-500 rounded-sm'>
-    <pre className='whitespace-pre-wrap font-sm text-xs p-2'>ERROR: {error.message}</pre>
-    <pre className='whitespace-pre-wrap font-sm text-xs p-2 text-subdued'>{JSON.stringify(data, null, 2)}</pre>
-  </div>
-);
+const DefaultFallback: NonNullable<ErrorBoundaryProps['fallback']> = ({ data, error }) => {
+  return (
+    <div className='flex flex-col gap-2 overflow-hidden border border-red-500 rounded-sm'>
+      <h1 className='p-2'>ERROR: {error.message}</h1>
+      <pre className='p-2 overflow-y-auto text-sm text-subdued'>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+};

package/src/react/Surface.stories.tsx

@@ -2,98 +2,119 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { Button, List, ListItem } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { List, ListItem, Toolbar } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
+import { getHashStyles, mx } from '@dxos/react-ui-theme';
 
 import { Capabilities, createSurface } from '../common';
-import { type PluginManager } from '../core';
-import { setupPluginManager } from '../testing';
+import { withPluginManager } from '../testing';
 
-import { PluginManagerProvider, usePluginManager } from './PluginManagerProvider';
+import { usePluginManager } from './PluginManagerProvider';
 import { Surface, useSurfaces } from './Surface';
 
-const randomColor = (): string => {
-  const hue = faker.number.int({ min: 0, max: 360 });
-  const saturation = faker.number.int({ min: 50, max: 90 });
-  const lightness = faker.number.int({ min: 40, max: 70 });
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-};
-
-const Component = () => {
+const DefaultStory = () => {
+  const [selected, setSelected] = useState<string | undefined>();
   const manager = usePluginManager();
   const surfaces = useSurfaces();
-  const [picked, setPicked] = useState('test');
 
   const handleAdd = useCallback(() => {
-    const id = `test-${faker.number.int({ min: 0, max: 1_000_000 })}`;
-    const backgroundColor = randomColor();
+    const id = `test-${faker.number.int({ min: 0, max: 1_000 })}`;
+    const styles = getHashStyles(id);
 
     manager.context.contributeCapability({
       module: 'test',
       interface: Capabilities.ReactSurface,
       implementation: createSurface({
         id,
-        role: id,
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === id,
         component: () => (
-          <div className='flex-1' style={{ backgroundColor }}>
-            {id}
+          <div className={mx('flex justify-center items-center border rounded', styles.surface, styles.border)}>
+            <span className={mx('dx-tag font-mono text-lg', styles.text)}>{id}</span>
           </div>
         ),
       }),
     });
 
-    setPicked(id);
+    setSelected(id);
   }, [manager]);
 
-  const handlePick = useCallback(() => {
-    setPicked(faker.helpers.arrayElement(surfaces).id);
+  const handleSelect = useCallback(() => {
+    setSelected(faker.helpers.arrayElement(surfaces)?.id);
   }, [surfaces]);
 
+  const handleError = useCallback(() => {
+    manager.context.contributeCapability({
+      module: 'error',
+      interface: Capabilities.ReactSurface,
+      implementation: createSurface({
+        id: 'error',
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === 'error',
+        component: () => {
+          const [count, setCount] = useState(3);
+          useEffect(() => {
+            const interval = setInterval(() => {
+              setCount((count) => {
+                if (count <= 1) {
+                  clearInterval(interval);
+                }
+
+                return count - 1;
+              });
+            }, 1_000);
+            return () => clearInterval(interval);
+          }, []);
+
+          if (count <= 0) {
+            throw new Error('BANG!');
+          }
+
+          return (
+            <div className='flex justify-center items-center border border-roseFill rounded'>
+              <span className='font-mono'>Ticking... {count}</span>
+            </div>
+          );
+        },
+      }),
+    });
+
+    setSelected('error');
+  }, [manager]);
+
   return (
-    <div className='flex flex-col gap-2'>
-      <div className='flex gap-2'>
-        <Button onClick={handleAdd}>Add</Button>
-        <Button onClick={handlePick}>Pick</Button>
-      </div>
-      <div className='flex gap-2'>
-        <div className='flex-1'>
-          <List itemSizes='one'>
+    <div className='flex flex-col bs-full overflow-hidden'>
+      <Toolbar.Root>
+        <Toolbar.Button onClick={handleAdd}>Add</Toolbar.Button>
+        <Toolbar.Button onClick={handleSelect}>Pick</Toolbar.Button>
+        <Toolbar.Button onClick={handleError}>Error</Toolbar.Button>
+      </Toolbar.Root>
+      <div className='grid grid-cols-2 bs-full gap-4 overflow-hidden'>
+        <Surface role='item' data={selected ? { id: selected } : undefined} limit={1} />
+        <div className='overflow-y-auto bs-full'>
+          <List>
             {surfaces.map((surface) => (
               <ListItem.Root key={surface.id} id={surface.id}>
-                <ListItem.Heading classNames='grow pbs-2'>{surface.id}</ListItem.Heading>
+                <ListItem.Heading classNames='flex items-center'>{surface.id}</ListItem.Heading>
               </ListItem.Root>
             ))}
           </List>
         </div>
-        <div className='flex-1'>
-          <Surface role={picked} limit={1} />
-        </div>
       </div>
     </div>
   );
 };
 
-const DefaultStory = (props: { manager: PluginManager }) => {
-  return (
-    <PluginManagerProvider value={props.manager}>
-      <Component />
-    </PluginManagerProvider>
-  );
-};
-
 const meta = {
   title: 'sdk/app-framework/Surface',
   render: DefaultStory,
-  // NOTE: Intentionally not using withPluginManager to try to reduce surface area of the story.
-  decorators: [withTheme, withLayout()],
-  args: {
-    manager: setupPluginManager(),
+  decorators: [withTheme, withPluginManager({ capabilities: [] })],
+  parameters: {
+    layout: 'fullscreen',
   },
 } satisfies Meta<typeof DefaultStory>;