@dxos/app-framework 0.8.4-main.5ea62a8 → 0.8.4-main.72ec0f3

package/src/core/manager.test.ts

@@ -7,7 +7,7 @@ import { afterEach, describe, expect, it } from 'vitest';
 
 import { Trigger } from '@dxos/async';
 import { raise } from '@dxos/debug';
-import { updateCounter } from '@dxos/echo-schema/testing';
+import { updateCounter } from '@dxos/echo/testing';
 import { registerSignalsRuntime } from '@dxos/echo-signals';
 import { invariant } from '@dxos/invariant';
 import { live } from '@dxos/live-object';
@@ -17,7 +17,7 @@ import { Events } from '../common';
 import { type PluginContext, contributes, defineCapability } from './capabilities';
 import { allOf, defineEvent, oneOf } from './events';
 import { PluginManager } from './manager';
-import { type Plugin, defineModule, definePlugin } from './plugin';
+import { Plugin, defineModule } from './plugin';
 
 registerSignalsRuntime();
 
@@ -43,7 +43,7 @@ describe('PluginManager', () => {
   });
 
   it('should be able to add and remove plugins', async () => {
-    const Test = definePlugin(testMeta, []);
+    const Test = new Plugin(testMeta, []);
     plugins = [Test];
 
     const manager = new PluginManager({ pluginLoader });
@@ -59,7 +59,7 @@ describe('PluginManager', () => {
       activatesOn: Events.Startup,
       activate: () => contributes(String, { string: 'hello' }),
     });
-    const Test = definePlugin(testMeta, [Hello]);
+    const Test = new Plugin(testMeta, [Hello]);
 
     const manager = new PluginManager({ plugins: [Test], core: [], pluginLoader });
     await manager.enable(testMeta.id);
@@ -76,7 +76,7 @@ describe('PluginManager', () => {
       activatesOn: Events.Startup,
       activate: () => contributes(String, { string: 'hello' }),
     });
-    const Test = definePlugin(testMeta, [Hello]);
+    const Test = new Plugin(testMeta, [Hello]);
 
     const manager = new PluginManager({ plugins: [Test], enabled: [Test.meta.id], pluginLoader });
     expect(manager.plugins).toEqual([Test]);
@@ -95,7 +95,7 @@ describe('PluginManager', () => {
       activatesOn: FailEvent,
       activate: async () => raise(new Error('test')),
     });
-    plugins = [definePlugin(testMeta, [Fail])];
+    plugins = [new Plugin(testMeta, [Fail])];
 
     const manager = new PluginManager({ pluginLoader });
     await manager.add(testMeta.id);
@@ -114,7 +114,7 @@ describe('PluginManager', () => {
       // TODO(wittjosiah): Test and catch more failure modes.
       activate: async () => async () => raise(new Error('test')),
     });
-    plugins = [definePlugin(testMeta, [Hello, Fail])];
+    plugins = [new Plugin(testMeta, [Hello, Fail])];
 
     const manager = new PluginManager({ pluginLoader });
     const activating = new Trigger<boolean>();
@@ -149,7 +149,7 @@ describe('PluginManager', () => {
         return contributes(String, { string: 'hello' });
       },
     });
-    plugins = [definePlugin(testMeta, [Hello])];
+    plugins = [new Plugin(testMeta, [Hello])];
 
     const manager = new PluginManager({ pluginLoader });
 
@@ -180,21 +180,21 @@ describe('PluginManager', () => {
   });
 
   it('should be able to fire custom activation events', async () => {
-    const Plugin1 = definePlugin({ id: 'dxos.org/test/plugin-1', name: 'Plugin 1' }, [
+    const Plugin1 = new Plugin({ id: 'dxos.org/test/plugin-1', name: 'Plugin 1' }, [
       defineModule({
         id: 'dxos.org/test/plugin-1',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 1 })],
       }),
     ]);
-    const Plugin2 = definePlugin({ id: 'dxos.org/test/plugin-2', name: 'Plugin 2' }, [
+    const Plugin2 = new Plugin({ id: 'dxos.org/test/plugin-2', name: 'Plugin 2' }, [
       defineModule({
         id: 'dxos.org/test/plugin-2',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 2 })],
       }),
     ]);
-    const Plugin3 = definePlugin({ id: 'dxos.org/test/plugin-3', name: 'Plugin 3' }, [
+    const Plugin3 = new Plugin({ id: 'dxos.org/test/plugin-3', name: 'Plugin 3' }, [
       defineModule({
         id: 'dxos.org/test/plugin-3',
         activatesOn: CountEvent,
@@ -231,7 +231,7 @@ describe('PluginManager', () => {
         return contributes(String, { string: 'hello' });
       },
     });
-    plugins = [definePlugin(testMeta, [Hello])];
+    plugins = [new Plugin(testMeta, [Hello])];
 
     const manager = new PluginManager({ pluginLoader });
     expect(manager.active).toEqual([]);
@@ -257,7 +257,7 @@ describe('PluginManager', () => {
         return contributes(String, { string: 'hello' });
       },
     });
-    plugins = [definePlugin(testMeta, [Hello])];
+    plugins = [new Plugin(testMeta, [Hello])];
 
     const manager = new PluginManager({ pluginLoader });
     expect(manager.active).toEqual([]);
@@ -283,7 +283,7 @@ describe('PluginManager', () => {
       state.total = numbers.reduce((acc, n) => acc + n.number, 0);
     };
 
-    const Count = definePlugin({ id: 'dxos.org/test/count', name: 'Count' }, [
+    const Count = new Plugin({ id: 'dxos.org/test/count', name: 'Count' }, [
       defineModule({
         id: 'dxos.org/test/count',
         activatesOn: Events.Startup,
@@ -295,7 +295,7 @@ describe('PluginManager', () => {
       }),
     ]);
 
-    const Test = definePlugin(testMeta, [
+    const Test = new Plugin(testMeta, [
       defineModule({
         id: 'dxos.org/test/plugin-1',
         activatesOn: CountEvent,
@@ -353,7 +353,7 @@ describe('PluginManager', () => {
     const id = 'dxos.org/test/counter';
     const stateEvent = Events.createStateEvent(id);
 
-    const Test = definePlugin(testMeta, [
+    const Test = new Plugin(testMeta, [
       defineModule({
         id,
         activatesOn: Events.Startup,
@@ -390,21 +390,21 @@ describe('PluginManager', () => {
   });
 
   it('should be reactive', async () => {
-    const Plugin1 = definePlugin({ id: 'dxos.org/test/plugin-1', name: 'Plugin 1' }, [
+    const Plugin1 = new Plugin({ id: 'dxos.org/test/plugin-1', name: 'Plugin 1' }, [
       defineModule({
         id: 'dxos.org/test/plugin-1',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 1 })],
       }),
     ]);
-    const Plugin2 = definePlugin({ id: 'dxos.org/test/plugin-2', name: 'Plugin 2' }, [
+    const Plugin2 = new Plugin({ id: 'dxos.org/test/plugin-2', name: 'Plugin 2' }, [
       defineModule({
         id: 'dxos.org/test/plugin-2',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 2 })],
       }),
     ]);
-    const Plugin3 = definePlugin({ id: 'dxos.org/test/plugin-3', name: 'Plugin 3' }, [
+    const Plugin3 = new Plugin({ id: 'dxos.org/test/plugin-3', name: 'Plugin 3' }, [
       defineModule({
         id: 'dxos.org/test/plugin-3',
         activatesOn: CountEvent,

package/src/core/manager.ts

@@ -2,9 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Registry } from '@effect-rx/rx-react';
+import { Registry } from '@effect-atom/atom-react';
 import { untracked } from '@preact/signals-core';
-import { Array, Duration, Effect, Fiber, HashSet, Match, Ref, pipe } from 'effect';
+import * as Array from 'effect/Array';
+import * as Duration from 'effect/Duration';
+import * as Effect from 'effect/Effect';
+import * as Fiber from 'effect/Fiber';
+import * as Function from 'effect/Function';
+import * as HashSet from 'effect/HashSet';
+import * as Match from 'effect/Match';
+import * as Ref from 'effect/Ref';
 
 import { Event } from '@dxos/async';
 import { type Live, live } from '@dxos/live-object';
@@ -48,7 +55,7 @@ export class PluginManager {
   readonly context: PluginContext;
   readonly registry: Registry.Registry;
 
-  // TODO(wittjosiah): Replace with Rx.
+  // TODO(wittjosiah): Replace with Atom.
   private readonly _state: Live<PluginManagerState>;
   private readonly _pluginLoader: PluginManagerOptions['pluginLoader'];
   private readonly _capabilities = new Map<string, AnyCapability[]>();
@@ -396,7 +403,7 @@ export class PluginManager {
       this.activation.emit({ event: key, state: 'activating' });
 
       // Fire activatesBefore events.
-      yield* pipe(
+      yield* Function.pipe(
         modules,
         Array.flatMap((module) => module.activatesBefore ?? []),
         HashSet.fromIterable,
@@ -407,7 +414,7 @@ export class PluginManager {
       );
 
       // Concurrently triggers loading of lazy capabilities.
-      const getCapabilities = yield* pipe(
+      const getCapabilities = yield* Function.pipe(
         modules,
         Array.map((mod) => this._loadModule(mod)),
         Effect.allWith({ concurrency: 'unbounded' }),
@@ -418,7 +425,7 @@ export class PluginManager {
       );
 
       // Contribute the capabilities from the activated modules.
-      yield* pipe(
+      yield* Function.pipe(
         modules,
         Array.zip(getCapabilities),
         Array.map(([module, capabilities]) => this._contributeCapabilities(module, capabilities)),
@@ -428,7 +435,7 @@ export class PluginManager {
       );
 
       // Fire activatesAfter events.
-      yield* pipe(
+      yield* Function.pipe(
         modules,
         Array.flatMap((module) => module.activatesAfter ?? []),
         HashSet.fromIterable,

package/src/core/plugin.ts

@@ -110,6 +110,11 @@ export type PluginMeta = {
    * A grep-able symbol string which can be resolved to an icon asset by @ch-ui/icons, via @ch-ui/vite-plugin-icons.
    */
   icon?: string;
+
+  /**
+   * Icon hue (ChromaticPalette).
+   */
+  iconHue?: string;
 };
 
 /**
@@ -124,9 +129,15 @@ export class Plugin {
   ) {}
 }
 
+export type PluginFactory<T = void> = ((args: T) => Plugin) & { meta: PluginMeta };
+
 /**
  * Helper to define a plugin.
  */
-export const definePlugin = (meta: PluginMeta, modules: PluginModule[]) => {
-  return new Plugin(meta, modules);
+export const definePlugin = <T = void>(meta: PluginMeta, provider: (args: T) => PluginModule[]): PluginFactory<T> => {
+  const factory = (args: T) => {
+    return new Plugin(meta, provider(args));
+  };
+
+  return Object.assign(factory, { meta });
 };

package/src/index.ts

@@ -2,9 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './App';
 export * from './common';
 export * from './core';
 export * from './plugin-intent';
 export * from './plugin-settings';
-export * from './react';

package/src/playground/debug/Debug.tsx

@@ -22,7 +22,7 @@ export const Debug = () => {
   };
 
   return (
-    <SyntaxHighlighter language='json' classNames='flex w-full text-xs opacity-75 rounded'>
+    <SyntaxHighlighter language='json' classNames='text-xs opacity-75 rounded'>
       {JSON.stringify(object, undefined, 2)}
     </SyntaxHighlighter>
   );

package/src/playground/debug/plugin.ts

@@ -7,11 +7,10 @@ import { defineModule, definePlugin, lazy } from '../../core';
 
 const Debug = lazy(() => import('./Debug'));
 
-export const DebugPlugin = () =>
-  definePlugin({ id: 'dxos.org/test/plugin-debug', name: 'Debug' }, [
-    defineModule({
-      id: 'dxos.org/test/debug/main',
-      activatesOn: Events.Startup,
-      activate: Debug,
-    }),
-  ]);
+export const DebugPlugin = definePlugin({ id: 'dxos.org/test/plugin-debug', name: 'Debug' }, () => [
+  defineModule({
+    id: 'dxos.org/test/debug/main',
+    activatesOn: Events.Startup,
+    activate: Debug,
+  }),
+]);

package/src/playground/generator/Main.tsx

@@ -30,7 +30,6 @@ const Item = ({
           variant='ghost'
           icon='ph--x--regular'
           label='Remove'
-          size={5}
           disabled={disabled}
           onClick={handleRemove}
         />

package/src/playground/generator/generator.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { Capabilities, Events } from '../../common';
 import { contributes, defineCapability, defineEvent, defineModule, definePlugin } from '../../core';
@@ -26,7 +26,7 @@ export const createGeneratorIntent = (id: string) => {
 export const createNumberPlugin = (id: string) => {
   const number = Math.floor(Math.random() * 100);
 
-  return definePlugin({ id, name: `Plugin ${id}` }, [
+  return definePlugin({ id, name: `Plugin ${id}` }, () => [
     defineModule({
       id: `${id}/main`,
       activatesOn: CountEvent,

package/src/playground/generator/plugin.ts

@@ -8,16 +8,15 @@ import { defineModule, definePlugin, lazy } from '../../core';
 const Main = lazy(() => import('./Main'));
 const Toolbar = lazy(() => import('./Toolbar'));
 
-export const GeneratorPlugin = () =>
-  definePlugin({ id: 'dxos.org/test/generator', name: 'Generator' }, [
-    defineModule({
-      id: 'dxos.org/test/generator/main',
-      activatesOn: Events.Startup,
-      activate: Main,
-    }),
-    defineModule({
-      id: 'dxos.org/test/generator/toolbar',
-      activatesOn: Events.Startup,
-      activate: Toolbar,
-    }),
-  ]);
+export const GeneratorPlugin = definePlugin({ id: 'dxos.org/test/generator', name: 'Generator' }, () => [
+  defineModule({
+    id: 'dxos.org/test/generator/main',
+    activatesOn: Events.Startup,
+    activate: Main,
+  }),
+  defineModule({
+    id: 'dxos.org/test/generator/toolbar',
+    activatesOn: Events.Startup,
+    activate: Toolbar,
+  }),
+]);

package/src/playground/layout/plugin.ts

@@ -7,11 +7,12 @@ import { defineModule, definePlugin, lazy } from '../../core';
 
 const Layout = lazy(() => import('./Layout'));
 
-export const LayoutPlugin = () =>
-  definePlugin({ id: 'dxos.org/test/layout', name: 'Layout' }, [
-    defineModule({
-      id: 'dxos.org/test/layout/root',
-      activatesOn: Events.Startup,
-      activate: Layout,
-    }),
-  ]);
+const meta = { id: 'dxos.org/test/layout', name: 'Layout' };
+
+export const LayoutPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: 'dxos.org/test/layout/root',
+    activatesOn: Events.Startup,
+    activate: Layout,
+  }),
+]);

package/src/playground/logger/plugin.ts

@@ -12,26 +12,30 @@ import { Log } from './schema';
 
 const Toolbar = lazy(() => import('./Toolbar'));
 
-export const LoggerPlugin = () =>
-  definePlugin({ id: 'dxos.org/test/logger', name: 'Logger' }, [
-    defineModule({
-      id: 'dxos.org/test/logger/intents',
-      activatesOn: Events.SetupIntentResolver,
-      activate: () => [
-        contributes(
-          Capabilities.IntentResolver,
-          createResolver({
-            intent: Log,
-            resolve: ({ message }) => {
-              log.info(message);
-            },
-          }),
-        ),
-      ],
-    }),
-    defineModule({
-      id: 'dxos.org/test/logger/surfaces',
-      activatesOn: Events.Startup,
-      activate: Toolbar,
-    }),
-  ]);
+const meta = {
+  id: 'dxos.org/test/logger',
+  name: 'Logger',
+};
+
+export const LoggerPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: 'dxos.org/test/logger/intents',
+    activatesOn: Events.SetupIntentResolver,
+    activate: () => [
+      contributes(
+        Capabilities.IntentResolver,
+        createResolver({
+          intent: Log,
+          resolve: ({ message }) => {
+            log.info(message);
+          },
+        }),
+      ),
+    ],
+  }),
+  defineModule({
+    id: 'dxos.org/test/logger/surfaces',
+    activatesOn: Events.Startup,
+    activate: Toolbar,
+  }),
+]);

package/src/playground/logger/schema.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 export class Log extends Schema.TaggedClass<Log>()('dxos.org/test/logger/log', {
   input: Schema.Struct({

package/src/playground/playground.stories.tsx

@@ -2,22 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { useApp } from '../App';
 import { IntentPlugin } from '../plugin-intent';
+import { useApp } from '../react';
 
 import { DebugPlugin } from './debug';
 import { GeneratorPlugin, createNumberPlugin } from './generator';
 import { LayoutPlugin } from './layout';
 import { LoggerPlugin } from './logger';
 
-const plugins = [IntentPlugin(), LayoutPlugin(), DebugPlugin(), LoggerPlugin(), GeneratorPlugin()];
+const pluginFactories = [IntentPlugin, LayoutPlugin, DebugPlugin(), LoggerPlugin(), GeneratorPlugin()];
+const plugins = pluginFactories.map((factory) => (typeof factory === 'function' ? factory() : factory));
 
 const Placeholder = () => {
   return <div>Loading...</div>;
@@ -25,7 +24,7 @@ const Placeholder = () => {
 
 const DefaultStory = () => {
   const App = useApp({
-    pluginLoader: (id) => createNumberPlugin(id),
+    pluginLoader: (id) => createNumberPlugin(id)(),
     plugins,
     core: plugins.map((plugin) => plugin.meta.id),
     placeholder: Placeholder,
@@ -37,7 +36,7 @@ const DefaultStory = () => {
 const meta = {
   title: 'sdk/app-framework/playground',
   render: DefaultStory,
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/plugin-intent/IntentPlugin.ts

@@ -5,17 +5,16 @@
 import { Events } from '../common';
 import { defineModule, definePlugin, lazy } from '../core';
 
-import { INTENT_PLUGIN } from './actions';
+import { meta } from './meta';
 
-export const IntentPlugin = () =>
-  definePlugin({ id: INTENT_PLUGIN, name: 'Intent' }, [
-    defineModule({
-      id: `${INTENT_PLUGIN}/module/dispatcher`,
-      // TODO(wittjosiah): This will mean that startup needs to be reset when intents are added or removed.
-      //   This is fine for now because it's how it worked prior to capabilities api anyways.
-      //   In the future, the intent dispatcher should be able to be reset without resetting the entire app.
-      activatesOn: Events.Startup,
-      activatesAfter: [Events.DispatcherReady],
-      activate: lazy(() => import('./intent-dispatcher')),
-    }),
-  ]);
+export const IntentPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/dispatcher`,
+    // TODO(wittjosiah): This will mean that startup needs to be reset when intents are added or removed.
+    //   This is fine for now because it's how it worked prior to capabilities api anyways.
+    //   In the future, the intent dispatcher should be able to be reset without resetting the entire app.
+    activatesOn: Events.Startup,
+    activatesAfter: [Events.DispatcherReady],
+    activate: lazy(() => import('./intent-dispatcher')),
+  }),
+]);

package/src/plugin-intent/actions.ts

@@ -2,18 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { Label } from './intent';
-
-export const INTENT_PLUGIN = 'dxos.org/plugin/intent';
-export const INTENT_ACTION = `${INTENT_PLUGIN}/action`;
+import { meta } from './meta';
 
 export namespace IntentAction {
   /**
    * Log an intent.
    */
-  export class Track extends Schema.TaggedClass<Track>()(`${INTENT_ACTION}/track`, {
+  export class Track extends Schema.TaggedClass<Track>()(`${meta.id}/action/track`, {
     input: Schema.Struct({
       intents: Schema.Array(Schema.String),
       error: Schema.optional(Schema.String),
@@ -24,7 +22,7 @@ export namespace IntentAction {
   /**
    * Fired after an intent is dispatched if the intent is undoable.
    */
-  export class ShowUndo extends Schema.TaggedClass<ShowUndo>()(`${INTENT_ACTION}/show-undo`, {
+  export class ShowUndo extends Schema.TaggedClass<ShowUndo>()(`${meta.id}/action/show-undo`, {
     input: Schema.Struct({
       message: Label,
     }),

package/src/plugin-intent/errors.ts

@@ -24,10 +24,11 @@ export class BaseError extends Error {
 
 export class NoResolversError extends BaseError {
   constructor(action: string) {
-    super('NO_RESOLVERS', 'No resolvers were found for the action', { action });
+    super('NO_RESOLVERS', `No resolvers were found for the action: ${action}`, { action });
   }
 }
 
+// TODO(burdon): Detect loops.
 export class CycleDetectedError extends BaseError {
   constructor(context?: Record<string, any>) {
     super(

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

@@ -2,7 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Effect, Fiber, Schema, pipe } from 'effect';
+import * as Effect from 'effect/Effect';
+import * as Fiber from 'effect/Fiber';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
 import { describe, expect, test } from 'vitest';
 
 import { chain, createIntent } from './intent';
@@ -104,7 +107,11 @@ describe('Intent dispatcher', () => {
 
   test('chain intents', async () => {
     const { dispatch } = createDispatcher(() => [computeResolver, toStringResolver, concatResolver]);
-    const intent = pipe(createIntent(Compute, { value: 1 }), chain(ToString, {}), chain(Concat, { plus: '!' }));
+    const intent = Function.pipe(
+      createIntent(Compute, { value: 1 }),
+      chain(ToString, {}),
+      chain(Concat, { plus: '!' }),
+    );
 
     expect(intent.first.id).toBe(Compute._tag);
     expect(intent.last.id).toBe(Concat._tag);
@@ -120,7 +127,7 @@ describe('Intent dispatcher', () => {
 
   test('undo chained intent', async () => {
     const { dispatch, undo } = createDispatcher(() => [computeResolver, toStringResolver, concatResolver]);
-    const intent = pipe(createIntent(Compute, { value: 1 }), chain(Compute, {}), chain(Compute, {}));
+    const intent = Function.pipe(createIntent(Compute, { value: 1 }), chain(Compute, {}), chain(Compute, {}));
     const program = Effect.gen(function* () {
       const a = yield* dispatch(intent);