@dxos/app-framework 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

package/dist/types/src/testing/withPluginManager.d.ts

@@ -10,6 +10,7 @@ export type WithPluginManagerOptions = CreateAppOptions & {
 };
 /**
  * Wraps a story with a plugin manager.
+ * NOTE: This builds up and tears down the plugin manager on every render.
  */
 export declare const withPluginManager: (options?: WithPluginManagerOptions) => Decorator;
 //# sourceMappingURL=withPluginManager.d.ts.map

package/dist/types/src/testing/withPluginManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withPluginManager.d.ts","sourceRoot":"","sources":["../../../../src/testing/withPluginManager.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKlD,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE1D,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,aAAa,EAKlB,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;AAC/C,MAAM,MAAM,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;AACvD,eAAO,MAAM,QAAQ,GAAI,CAAC,EAAE,CAAC,EAAE,iBAAiB,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,KAAG,CAEnF,CAAC;AA+BF,MAAM,MAAM,wBAAwB,GAAG,gBAAgB,GAAG;IACxD,YAAY,CAAC,EAAE,eAAe,CAAC,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;IAC/D,UAAU,CAAC,EAAE,CAAC,eAAe,GAAG,MAAM,CAAC,EAAE,CAAC;CAC3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAS,wBAA6B,KAAG,SAyB1E,CAAC"}
+{"version":3,"file":"withPluginManager.d.ts","sourceRoot":"","sources":["../../../../src/testing/withPluginManager.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKlD,OAAO,EAAU,KAAK,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAEvD,OAAO,EAIL,KAAK,eAAe,EACpB,KAAK,aAAa,EAElB,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAGjB,MAAM,MAAM,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;AAC/C,MAAM,MAAM,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;AACvD,eAAO,MAAM,QAAQ,GAAI,CAAC,EAAE,CAAC,EAAE,iBAAiB,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,KAAG,CAEnF,CAAC;AA+BF,MAAM,MAAM,wBAAwB,GAAG,gBAAgB,GAAG;IACxD,YAAY,CAAC,EAAE,eAAe,CAAC,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;IAC/D,UAAU,CAAC,EAAE,CAAC,eAAe,GAAG,MAAM,CAAC,EAAE,CAAC;CAC3C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,UAAS,wBAA6B,KAAG,SAmC1E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-framework",
-  "version": "0.8.2-main.fbd8ed0",
+  "version": "0.8.2-staging.4d6ad0f",
   "description": "A framework for building applications from composible plugins.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,20 +37,22 @@
     }
   },
   "dependencies": {
-    "@preact/signals-core": "^1.6.0",
-    "@dxos/app-graph": "0.8.2-main.fbd8ed0",
-    "@dxos/async": "0.8.2-main.fbd8ed0",
-    "@dxos/client-protocol": "0.8.2-main.fbd8ed0",
-    "@dxos/artifact": "0.8.2-main.fbd8ed0",
-    "@dxos/debug": "0.8.2-main.fbd8ed0",
-    "@dxos/echo-schema": "0.8.2-main.fbd8ed0",
-    "@dxos/keys": "0.8.2-main.fbd8ed0",
-    "@dxos/invariant": "0.8.2-main.fbd8ed0",
-    "@dxos/local-storage": "0.8.2-main.fbd8ed0",
-    "@dxos/live-object": "0.8.2-main.fbd8ed0",
-    "@dxos/log": "0.8.2-main.fbd8ed0",
-    "@dxos/react-hooks": "0.8.2-main.fbd8ed0",
-    "@dxos/util": "0.8.2-main.fbd8ed0"
+    "@preact/signals-core": "^1.9.0",
+    "@dxos/ai": "0.8.2-staging.4d6ad0f",
+    "@dxos/app-graph": "0.8.2-staging.4d6ad0f",
+    "@dxos/artifact": "0.8.2-staging.4d6ad0f",
+    "@dxos/client-protocol": "0.8.2-staging.4d6ad0f",
+    "@dxos/async": "0.8.2-staging.4d6ad0f",
+    "@dxos/debug": "0.8.2-staging.4d6ad0f",
+    "@dxos/echo-schema": "0.8.2-staging.4d6ad0f",
+    "@dxos/invariant": "0.8.2-staging.4d6ad0f",
+    "@dxos/keys": "0.8.2-staging.4d6ad0f",
+    "@dxos/live-object": "0.8.2-staging.4d6ad0f",
+    "@dxos/log": "0.8.2-staging.4d6ad0f",
+    "@dxos/schema": "0.8.2-staging.4d6ad0f",
+    "@dxos/util": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-hooks": "0.8.2-staging.4d6ad0f",
+    "@dxos/local-storage": "0.8.2-staging.4d6ad0f"
   },
   "devDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
@@ -60,11 +62,11 @@
     "effect": "3.14.21",
     "react": "~18.2.0",
     "typedoc": "0.28.1",
-    "@dxos/echo-signals": "0.8.2-main.fbd8ed0",
-    "@dxos/random": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-syntax-highlighter": "0.8.2-main.fbd8ed0",
-    "@dxos/storybook-utils": "0.8.2-main.fbd8ed0"
+    "@dxos/echo-signals": "0.8.2-staging.4d6ad0f",
+    "@dxos/random": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui": "0.8.2-staging.4d6ad0f",
+    "@dxos/storybook-utils": "0.8.2-staging.4d6ad0f",
+    "@dxos/react-ui-syntax-highlighter": "0.8.2-staging.4d6ad0f"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",

package/src/App.tsx

@@ -4,10 +4,11 @@
 
 import { RegistryContext } from '@effect-rx/rx-react';
 import { effect } from '@preact/signals-core';
-import React, { useEffect, useState, type FC, type PropsWithChildren } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, type FC, type PropsWithChildren } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { live } from '@dxos/live-object';
+import { useDefaultValue } from '@dxos/react-hooks';
 
 import { Capabilities, Events } from './common';
 import { PluginManager, type PluginManagerOptions, type Plugin } from './core';
@@ -53,72 +54,109 @@ export type CreateAppOptions = {
  * @param params.cacheEnabled Whether to cache enabled plugins in localStorage.
  * @param params.safeMode Whether to enable safe mode, which disables optional plugins.
  */
-export const createApp = ({
+export const useApp = ({
   pluginManager,
   pluginLoader: _pluginLoader,
-  plugins = [],
-  core = plugins.map(({ meta }) => meta.id),
-  defaults = [],
+  plugins: _plugins,
+  core: _core,
+  defaults: _defaults,
   placeholder,
   fallback = DefaultFallback,
   cacheEnabled = false,
   safeMode = false,
 }: CreateAppOptions) => {
+  const plugins = useDefaultValue(_plugins, () => []);
+  const core = useDefaultValue(_core, () => plugins.map(({ meta }) => meta.id));
+  const defaults = useDefaultValue(_defaults, () => []);
+
   // TODO(wittjosiah): Provide a custom plugin loader which supports loading via url.
-  const pluginLoader =
-    _pluginLoader ??
-    ((id: string) => {
-      const plugin = plugins.find((plugin) => plugin.meta.id === id);
-      invariant(plugin, `Plugin not found: ${id}`);
-      return plugin;
+  const pluginLoader = useMemo(
+    () =>
+      _pluginLoader ??
+      ((id: string) => {
+        const plugin = plugins.find((plugin) => plugin.meta.id === id);
+        invariant(plugin, `Plugin not found: ${id}`);
+        return plugin;
+      }),
+    [_pluginLoader, plugins],
+  );
+
+  const state = useMemo(() => live({ ready: false, error: null }), []);
+  const cached: string[] = useMemo(() => JSON.parse(localStorage.getItem(ENABLED_KEY) ?? '[]'), []);
+  const enabled = useMemo(
+    () => (safeMode ? [] : cacheEnabled && cached.length > 0 ? cached : defaults),
+    [safeMode, cacheEnabled, cached, defaults],
+  );
+  const manager = useMemo(
+    () => pluginManager ?? new PluginManager({ pluginLoader, plugins, core, enabled }),
+    [pluginManager, pluginLoader, plugins, core, enabled],
+  );
+
+  useEffect(() => {
+    return manager.activation.on(({ event, state: _state, error }) => {
+      // Once the app is ready the first time, don't show the fallback again.
+      if (!state.ready && event === Events.Startup.id) {
+        state.ready = _state === 'activated';
+      }
+
+      if (error && !state.ready && !state.error) {
+        state.error = error;
+      }
     });
+  }, [manager, state]);
 
-  const state = live({ ready: false, error: null });
-  const cached: string[] = JSON.parse(localStorage.getItem(ENABLED_KEY) ?? '[]');
-  const enabled = safeMode ? [] : cacheEnabled && cached.length > 0 ? cached : defaults;
-  const manager = pluginManager ?? new PluginManager({ pluginLoader, plugins, core, enabled });
+  useEffect(() => {
+    effect(() => {
+      cacheEnabled && localStorage.setItem(ENABLED_KEY, JSON.stringify(manager.enabled));
+    });
+  }, [cacheEnabled, manager]);
 
-  manager.activation.on(({ event, state: _state, error }) => {
-    // Once the app is ready the first time, don't show the fallback again.
-    if (!state.ready && event === Events.Startup.id) {
-      state.ready = _state === 'activated';
-    }
+  useEffect(() => {
+    manager.context.contributeCapability({
+      interface: Capabilities.PluginManager,
+      implementation: manager,
+      module: 'dxos.org/app-framework/plugin-manager',
+    });
 
-    if (error && !state.ready && !state.error) {
-      state.error = error;
-    }
-  });
-
-  effect(() => {
-    cacheEnabled && localStorage.setItem(ENABLED_KEY, JSON.stringify(manager.enabled));
-  });
-
-  manager.context.contributeCapability({
-    interface: Capabilities.PluginManager,
-    implementation: manager,
-    module: 'dxos.org/app-framework/plugin-manager',
-  });
-
-  manager.context.contributeCapability({
-    interface: Capabilities.RxRegistry,
-    implementation: manager.registry,
-    module: 'dxos.org/app-framework/rx-registry',
-  });
-
-  setupDevtools(manager);
-
-  // TODO(wittjosiah): Factor out such that this could be called per surface role when attempting to render.
-  void manager.activate(Events.SetupReactSurface);
-  void manager.activate(Events.Startup);
-
-  return () => (
-    <ErrorBoundary fallback={fallback}>
-      <PluginManagerProvider value={manager}>
-        <RegistryContext.Provider value={manager.registry}>
-          <App placeholder={placeholder} state={state} />
-        </RegistryContext.Provider>
-      </PluginManagerProvider>
-    </ErrorBoundary>
+    manager.context.contributeCapability({
+      interface: Capabilities.RxRegistry,
+      implementation: manager.registry,
+      module: 'dxos.org/app-framework/rx-registry',
+    });
+
+    return () => {
+      manager.context.removeCapability(Capabilities.PluginManager, manager);
+      manager.context.removeCapability(Capabilities.RxRegistry, manager.registry);
+    };
+  }, [manager]);
+
+  useEffect(() => {
+    setupDevtools(manager);
+  }, [manager]);
+
+  useEffect(() => {
+    const timeout = setTimeout(async () => {
+      await Promise.all([
+        // TODO(wittjosiah): Factor out such that this could be called per surface role when attempting to render.
+        manager.activate(Events.SetupReactSurface),
+        manager.activate(Events.Startup),
+      ]);
+    });
+
+    return () => clearTimeout(timeout);
+  }, [manager]);
+
+  return useCallback(
+    () => (
+      <ErrorBoundary fallback={fallback}>
+        <PluginManagerProvider value={manager}>
+          <RegistryContext.Provider value={manager.registry}>
+            <App placeholder={placeholder} state={state} />
+          </RegistryContext.Provider>
+        </PluginManagerProvider>
+      </ErrorBoundary>
+    ),
+    [fallback, manager, placeholder, state],
   );
 };
 

package/src/common/capabilities.ts

@@ -6,16 +6,18 @@ import { type Registry } from '@effect-rx/rx-react';
 import { type Schema } from 'effect';
 import { type FC, type PropsWithChildren } from 'react';
 
+import { type ExecutableTool } from '@dxos/ai';
 import { type GraphBuilder, type BuilderExtensions } from '@dxos/app-graph';
-import { type ArtifactDefinition, type Tool } from '@dxos/artifact';
+import { type ArtifactDefinition } from '@dxos/artifact';
 import { type Space } from '@dxos/client-protocol';
 import { type RootSettingsStore } from '@dxos/local-storage';
+import { type AnchoredTo } from '@dxos/schema';
 
 import { type FileInfo } from './file';
 import { type NodeSerializer } from './graph';
 import { type SurfaceDefinition } from './surface';
 import { type Resource } from './translations';
-import { defineCapability, type PluginManager } from '../core';
+import { type PluginManager, defineCapability } from '../core';
 import { type AnyIntentResolver, type IntentContext } from '../plugin-intent';
 
 export namespace Capabilities {
@@ -94,11 +96,17 @@ export namespace Capabilities {
   export type Metadata = Readonly<{ id: string; metadata: Record<string, any> }>;
   export const Metadata = defineCapability<Metadata>('dxos.org/app-framework/capability/metadata');
 
-  export const Tools = defineCapability<Tool[]>('dxos.org/app-framework/capability/tools');
+  export const Tools = defineCapability<ExecutableTool[]>('dxos.org/app-framework/capability/tools');
   export const ArtifactDefinition = defineCapability<ArtifactDefinition>(
     'dxos.org/app-framework/capability/artifact-definition',
   );
 
   export type FileUploader = (file: File, space: Space) => Promise<FileInfo | undefined>;
   export const FileUploader = defineCapability<FileUploader>('dxos.org/app-framework/capability/file-uploader');
+
+  type AnchorSort = {
+    key: string;
+    sort: (anchorA: AnchoredTo, anchorB: AnchoredTo) => number;
+  };
+  export const AnchorSort = defineCapability<AnchorSort>('dxos.org/app-framework/capability/anchor-sort');
 }

package/src/common/collaboration.ts

@@ -2,22 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema, SchemaAST } from 'effect';
+import { Schema } from 'effect';
 
 import { Expando, Ref } from '@dxos/echo-schema';
-// TODO(dmaretskyi): Import from @dxos/echo
-import { SpaceId } from '@dxos/keys';
 
 export namespace CollaborationActions {
   export class InsertContent extends Schema.TaggedClass<InsertContent>()('assistant/intent-content', {
     input: Schema.Struct({
-      spaceId: SpaceId,
-      target: Ref(Expando),
+      target: Expando,
       object: Ref(Expando),
+      at: Schema.optional(Schema.String),
       label: Schema.String.pipe(Schema.optional),
     }).annotations({
-      [SchemaAST.DescriptionAnnotationId]:
-        'Enables plugins to inject content blocks or references into a related entity.',
+      description: 'Enables plugins to inject content blocks or references into a related entity.',
     }),
     output: Schema.Void,
   }) {}

package/src/common/layout.ts

@@ -97,10 +97,18 @@ export namespace LayoutAction {
       ),
       options: Schema.Struct({
         state: Schema.optional(Schema.Boolean.annotations({ description: 'Whether the dialog is open or closed.' })),
+        type: Schema.optional(Schema.Literal('default', 'alert').annotations({ description: 'The type of dialog.' })),
         blockAlign: Schema.optional(
           Schema.Literal('start', 'center', 'end').annotations({ description: 'The alignment of the dialog.' }),
         ),
-        type: Schema.optional(Schema.Literal('default', 'alert').annotations({ description: 'The type of dialog.' })),
+        overlayClasses: Schema.optional(
+          Schema.String.annotations({ description: 'Additional classes for the dialog overlay.' }),
+        ),
+        overlayStyle: Schema.optional(
+          Schema.Record({ key: Schema.String, value: Schema.Any }).annotations({
+            description: 'Additional styles for the dialog overlay.',
+          }),
+        ),
         props: Schema.optional(
           Schema.Record({ key: Schema.String, value: Schema.Any }).annotations({
             description: 'Additional props for the dialog.',

package/src/core/capabilities.ts

@@ -150,7 +150,7 @@ export class PluginContext {
     module: string;
     interface: InterfaceDef<T>;
     implementation: T;
-  }) {
+  }): void {
     const current = this._registry.get(this._capabilityImpls(interfaceDef.identifier));
     const capability = new CapabilityImpl(moduleId, implementation);
     if (current.includes(capability)) {
@@ -168,7 +168,7 @@ export class PluginContext {
   /**
    * @internal
    */
-  removeCapability<T>(interfaceDef: InterfaceDef<T>, implementation: T) {
+  removeCapability<T>(interfaceDef: InterfaceDef<T>, implementation: T): void {
     const current = this._registry.get(this._capabilityImpls(interfaceDef.identifier));
     if (current.length === 0) {
       return;

package/src/core/manager.ts

@@ -265,7 +265,7 @@ export class PluginManager {
     return untracked(() => Effect.runPromise(this._reset(event)));
   }
 
-  private _addPlugin(plugin: Plugin) {
+  private _addPlugin(plugin: Plugin): void {
     untracked(() => {
       log('add plugin', { id: plugin.meta.id });
       if (!this._state.plugins.includes(plugin)) {
@@ -274,7 +274,7 @@ export class PluginManager {
     });
   }
 
-  private _removePlugin(id: string) {
+  private _removePlugin(id: string): void {
     untracked(() => {
       log('remove plugin', { id });
       const pluginIndex = this._state.plugins.findIndex((plugin) => plugin.meta.id === id);
@@ -284,7 +284,7 @@ export class PluginManager {
     });
   }
 
-  private _addModule(module: PluginModule) {
+  private _addModule(module: PluginModule): void {
     untracked(() => {
       log('add module', { id: module.id });
       if (!this._state.modules.includes(module)) {
@@ -293,7 +293,7 @@ export class PluginManager {
     });
   }
 
-  private _removeModule(id: string) {
+  private _removeModule(id: string): void {
     untracked(() => {
       log('remove module', { id });
       const moduleIndex = this._state.modules.findIndex((module) => module.id === id);
@@ -303,27 +303,27 @@ export class PluginManager {
     });
   }
 
-  private _getPlugin(id: string) {
+  private _getPlugin(id: string): Plugin | undefined {
     return this._state.plugins.find((plugin) => plugin.meta.id === id);
   }
 
-  private _getActiveModules() {
+  private _getActiveModules(): PluginModule[] {
     return this._state.modules.filter((module) => this._state.active.includes(module.id));
   }
 
-  private _getInactiveModules() {
+  private _getInactiveModules(): PluginModule[] {
     return this._state.modules.filter((module) => !this._state.active.includes(module.id));
   }
 
-  private _getActiveModulesByEvent(key: string) {
+  private _getActiveModulesByEvent(key: string): PluginModule[] {
     return this._getActiveModules().filter((module) => getEvents(module.activatesOn).map(eventKey).includes(key));
   }
 
-  private _getInactiveModulesByEvent(key: string) {
+  private _getInactiveModulesByEvent(key: string): PluginModule[] {
     return this._getInactiveModules().filter((module) => getEvents(module.activatesOn).map(eventKey).includes(key));
   }
 
-  private _setPendingResetByModule(module: PluginModule) {
+  private _setPendingResetByModule(module: PluginModule): void {
     return untracked(() => {
       const activationEvents = getEvents(module.activatesOn)
         .map(eventKey)

package/src/playground/playground.stories.tsx

@@ -12,7 +12,7 @@ import { DebugPlugin } from './debug';
 import { createNumberPlugin, GeneratorPlugin } from './generator';
 import { LayoutPlugin } from './layout';
 import { LoggerPlugin } from './logger';
-import { createApp } from '../App';
+import { useApp } from '../App';
 import { IntentPlugin } from '../plugin-intent';
 
 const plugins = [IntentPlugin(), LayoutPlugin(), DebugPlugin(), LoggerPlugin(), GeneratorPlugin()];
@@ -21,13 +21,17 @@ const Placeholder = () => {
   return <div>Loading...</div>;
 };
 
-const Story = createApp({
-  pluginLoader: (id) => createNumberPlugin(id),
-  plugins,
-  core: plugins.map((plugin) => plugin.meta.id),
-  // Having a non-empty placeholder makes it clear if it's taking a while to load.
-  placeholder: Placeholder,
-});
+const Story = () => {
+  const App = useApp({
+    pluginLoader: (id) => createNumberPlugin(id),
+    plugins,
+    core: plugins.map((plugin) => plugin.meta.id),
+    // Having a non-empty placeholder makes it clear if it's taking a while to load.
+    placeholder: Placeholder,
+  });
+
+  return <App />;
+};
 
 export const Playground = {};
 

package/src/react/ErrorBoundary.tsx

@@ -21,7 +21,7 @@ export class ErrorBoundary extends Component<Props, State> {
     this.state = { error: undefined };
   }
 
-  static getDerivedStateFromError(error: Error) {
+  static getDerivedStateFromError(error: Error): { error: Error } {
     return { error };
   }
 
@@ -31,7 +31,7 @@ export class ErrorBoundary extends Component<Props, State> {
     }
   }
 
-  override render() {
+  override render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined {
     if (this.state.error) {
       return <this.props.fallback data={this.props.data} error={this.state.error} reset={this.resetError} />;
     }
@@ -39,7 +39,7 @@ export class ErrorBoundary extends Component<Props, State> {
     return this.props.children;
   }
 
-  private resetError() {
+  private resetError(): void {
     this.setState({ error: undefined });
   }
 }

package/src/testing/withPluginManager.tsx

@@ -3,18 +3,18 @@
 //
 
 import { type Decorator } from '@storybook/react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { createApp, type CreateAppOptions } from '../App';
+import { useApp, type CreateAppOptions } from '../App';
 import { Capabilities, Events } from '../common';
 import {
-  type ActivationEvent,
-  type AnyCapability,
   contributes,
   defineModule,
   definePlugin,
+  type ActivationEvent,
+  type AnyCapability,
   PluginManager,
   type PluginContext,
 } from '../core';
@@ -62,16 +62,13 @@ export type WithPluginManagerOptions = CreateAppOptions & {
 
 /**
  * Wraps a story with a plugin manager.
+ * NOTE: This builds up and tears down the plugin manager on every render.
  */
 export const withPluginManager = (options: WithPluginManagerOptions = {}): Decorator => {
-  const pluginManager = setupPluginManager(options);
-  const App = createApp({ pluginManager });
-
-  options.fireEvents?.forEach((event) => {
-    void pluginManager.activate(event);
-  });
-
   return (Story, context) => {
+    const pluginManager = useMemo(() => setupPluginManager(options), [options]);
+
+    // Set-up root capability.
     useEffect(() => {
       const capability = contributes(Capabilities.ReactRoot, {
         id: context.id,
@@ -83,8 +80,22 @@ export const withPluginManager = (options: WithPluginManagerOptions = {}): Decor
         module: 'dxos.org/app-framework/withPluginManager',
       });
 
-      return () => pluginManager.context.removeCapability(capability.interface, capability.implementation);
-    }, []);
+      return () => {
+        pluginManager.context.removeCapability(capability.interface, capability.implementation);
+      };
+    }, [pluginManager, context]);
+
+    // Fire events.
+    useEffect(() => {
+      const timeout = setTimeout(async () => {
+        await Promise.all(options.fireEvents?.map((event) => pluginManager.activate(event)) ?? []);
+      });
+
+      return () => clearTimeout(timeout);
+    }, [pluginManager]);
+
+    // Create app.
+    const App = useApp({ pluginManager });
 
     return <App />;
   };

package/tsconfig.json

@@ -7,62 +7,7 @@
   "include": [
     "src"
   ],
-  "references": [
-    {
-      "path": "../../common/async"
-    },
-    {
-      "path": "../../common/debug"
-    },
-    {
-      "path": "../../common/invariant"
-    },
-    {
-      "path": "../../common/keys"
-    },
-    {
-      "path": "../../common/local-storage"
-    },
-    {
-      "path": "../../common/log"
-    },
-    {
-      "path": "../../common/random"
-    },
-    {
-      "path": "../../common/storybook-utils"
-    },
-    {
-      "path": "../../common/util"
-    },
-    {
-      "path": "../../core/echo/echo-schema"
-    },
-    {
-      "path": "../../core/echo/echo-signals"
-    },
-    {
-      "path": "../../core/echo/live-object"
-    },
-    {
-      "path": "../../experimental/artifact"
-    },
-    {
-      "path": "../../ui/primitives/react-hooks"
-    },
-    {
-      "path": "../../ui/react-ui"
-    },
-    {
-      "path": "../../ui/react-ui-syntax-highlighter"
-    },
-    {
-      "path": "../app-graph"
-    },
-    {
-      "path": "../client-protocol"
-    }
-  ],
+  "references": [],
   "ts-node": {
     "compilerOptions": {
       "module": "CommonJS"

package/typedoc/assets/navigation.js

@@ -1 +1 @@
-window.navigationData = "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"
+window.navigationData = "eJylmmFv2zYQhv+LPwfbmrTdlm+u7RVG0ySInQ1FMRSMRNtEaVGgqLTpsP8+SLItHnm8o7GP0b33WAqplzyePv8zcfK7m1xPZqIWT0orp2QzuZjUwu0m15O9KVstm5/96E87t9eTi8lXVZWT69cXk2KndGllNbn+fML9obR8rLURpbQjzr3UIcwXQvLlL7//+urN5b8XJ+iycrJyD7Ix+pnBQikHvhEvpnUkcJBwoI/SiVI4QaKOIg72IEXhZqbq/6SAvjAL+mBMBrFTZeFWrd2IQvLEg5CDrqRzqto2JPAo4mDTqtgZuzLWe+JnYZV4iib2KIXQK8Cr6/dW1DuedhBmsN61SoMXhUEe9BnklbRKaPXjDPiYQvGtUxtRuLncqEo5ZSqeH6UQfNw/EuS0h1zF9jFXTS1cscvghgksO7Ymkozb0xXlTAke5k5XtDElSLg5AdZtqzXL6UQE4163W1V9FJXYZvy7gJqg4o6ZgKZdM2ZCw6SAsWnGtMgvKSDqmZD5/UFuVePsC088SQlebL8JGm7BKGvljOUfGKgJ6toYzd9er6IoVlSNFp0TZcA8ccT826POjNbiydheOi0C+mlDhaiyNlbLqpF2mLaVNyULLZomxQU58FdeXf4G7n7xLCuH3O9wPesOj+vIgxQlOiMPLKAjhmn0X44YKFlb5XieKmOKczSgo3ltTe0yRt6oY3lZ6zUgn7Nc9xn8Gujzs5fAXk2tXz41Y/nqdZwP+8xMG+61lHf6zDzrbGvOo3wmaVEe1wnr2pqiDQqCUVgpnFw54WSfM8I2bTW4zhEWSiH17WtgP8OkGHwrNiE/mmVFq5359liVJvZJgDrKYmsEi0XxleH0GtpfB0tJPaAfzfPaslwb0SALAUAdZdQDzrRpJMPpNRRk8b3mKYOIwtzVsmIgnYRCPMhnad1fxn5tavCOo7RATYFXhTVaLytn/lTyG8OFYhIruUFcSXL8VtIN8o+m5B4XaEnoN+WKXe5/MVBT4Me6FE7OzL7Wci8rJ/zNKwpHMvgfmCuhzTaLPEh5ZFiREUisKsOQ96Y2YMUkmActD12pUj6JPOhBS/oftBlVOdkviAEPsZnLN2/TnHHt4TBg/Xm8n0/Xiy830093j2uWBtTk5v24LKcMGsazLBr3sgDEuVkXH4rguNQjkDCF2flba+w701Yl+i6CMHWrw2/GgOE6nxmV7xCAFuwYJzpbgBz0MAHl9EOfxPRRitINx3O/KQt2SsOZZhBmTzOhPDoiDeP86ejLqcx9iWB+MIO0DIrSE2WJVJ4EYbYT/gwKMH00m7XYbGTRlRmtTt+ZL8omp/oQkeAcInWXefeXHs78sZz1e/ZpXd/VQeVxIAVxjtcd0C6rjQk5x+t5jZ8wO29WEVPqjPl0kOLNGBDMI82RJtEYyWQgJ9mAlDi45nn4RMRVeezhDcNOH3x2qDqHTd3zOe/3kHEvrNhH896P/b9m5XkO4b//6ZkzxvN4q2In9wnWEMvjwArbp8RFNc7od5JzucEoxxjfw32SOgT0F7nMW1NKrE82IGCUY4HNRcI9MU0mV8ZjP0ZYhjV71UjOPBKys+jYlIgEfG+5Ma2N+8rH67n5H2S0FHqhXMqNqLat2Cbv5hjnm9uHuVTegkJ9oMEoyxoOJbui2FTIChnGM3lpm44EmcR7a+roPfBjHKeUG9Fq120Y1l0yVvOFGqa93G08QgscYVBBdX5v14vb9ZfpbL28u8VIQMCD7m8e3y8p0CAgmxvACf2iOHJDmNgXyMSjAAEPSj8KEOS2ie+teVaJ7wFQIdmHDb1lZOH+gqYDa4kJkb2gkNhZYhLuLvBcf7FeL2/fr4jxCyQ5sOWcBC3nOZAPi08k5cPiUw4mPZ8CCQVL93z4Fo/Q+s7bpIy9jj4QdTa8fgksP8bEIi4+YKKpnFVPrfMtz0sfwxSkL9ewFd8jBRoWF9ZkIQqrzhBMvEEOQfgmGUFFQxuS0AEGoLJb2CRWQo+sUMPikh0yL8xCwmOokIIdRCGY8HQuxGCndAAju7sFtjcijjEifStdeHA15p+CBOBQgiUfw48TGNVMU+/yIUQm31UyldyHyOTDNJw+C6U758E5oYpAavEDHY/uOpFmUg9hmEc4njSnRwEqCFTbdMdIGGKIsKnBVxJhPvJxRAjBv3wGoPTnz0kYOiBAQIPSVRrA0VUaDqUsNxLRwLAZBkBY+ysEJM7qAYc4sO8+H/gPDJ/+Jw=="