@dxos/app-framework 0.8.2-main.f11618f → 0.8.2-staging.42af850

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

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema as S, Effect, Fiber, pipe } from 'effect';
+import { Schema, Effect, Fiber, pipe } from 'effect';
 import { describe, expect, test } from 'vitest';
 
 import { chain, createIntent } from './intent';
@@ -134,25 +134,6 @@ describe('Intent dispatcher', () => {
     await Effect.runPromise(program);
   });
 
-  test('filter resolvers by plugin', async () => {
-    const otherComputeResolver = createResolver({
-      intent: Compute,
-      resolve: async (data) => ({ data: { value: data?.value * 3 } }),
-    });
-    const { dispatch } = createDispatcher((module) => (module === 'test' ? [computeResolver] : [otherComputeResolver]));
-    const program = Effect.gen(function* () {
-      const a = yield* dispatch(createIntent(Compute, { value: 1 }));
-
-      expect(a.value).toBe(3);
-
-      const b = yield* dispatch(createIntent(Compute, { value: 1 }, { module: 'test' }));
-
-      expect(b.value).toBe(2);
-    });
-
-    await Effect.runPromise(program);
-  });
-
   test('filter resolvers by predicate', async () => {
     const conditionalComputeResolver = createResolver({
       intent: Compute,
@@ -224,12 +205,12 @@ describe('Intent dispatcher', () => {
   test.todo('follow up intents');
 });
 
-class ToString extends S.TaggedClass<ToString>()('ToString', {
-  input: S.Struct({
-    value: S.Number,
+class ToString extends Schema.TaggedClass<ToString>()('ToString', {
+  input: Schema.Struct({
+    value: Schema.Number,
   }),
-  output: S.Struct({
-    string: S.String,
+  output: Schema.Struct({
+    string: Schema.String,
   }),
 }) {}
 
@@ -238,12 +219,12 @@ const toStringResolver = createResolver({
   resolve: async (data) => ({ data: { string: data.value.toString() } }),
 });
 
-class Compute extends S.TaggedClass<Compute>()('Compute', {
-  input: S.Struct({
-    value: S.Number,
+class Compute extends Schema.TaggedClass<Compute>()('Compute', {
+  input: Schema.Struct({
+    value: Schema.Number,
   }),
-  output: S.Struct({
-    value: S.Number,
+  output: Schema.Struct({
+    value: Schema.Number,
   }),
 }) {}
 
@@ -262,13 +243,13 @@ const computeResolver = createResolver({
   },
 });
 
-class Concat extends S.TaggedClass<Concat>()('Concat', {
-  input: S.Struct({
-    string: S.String,
-    plus: S.String,
+class Concat extends Schema.TaggedClass<Concat>()('Concat', {
+  input: Schema.Struct({
+    string: Schema.String,
+    plus: Schema.String,
   }),
-  output: S.Struct({
-    string: S.String,
+  output: Schema.Struct({
+    string: Schema.String,
   }),
 }) {}
 
@@ -277,9 +258,9 @@ const concatResolver = createResolver({
   resolve: async (data) => ({ data: { string: data.string + data.plus } }),
 });
 
-class Add extends S.TaggedClass<Add>()('Add', {
-  input: S.Tuple(S.Number, S.Number),
-  output: S.Number,
+class Add extends Schema.TaggedClass<Add>()('Add', {
+  input: Schema.Tuple(Schema.Number, Schema.Number),
+  output: Schema.Number,
 }) {}
 
 const addResolver = createResolver({
@@ -287,9 +268,9 @@ const addResolver = createResolver({
   resolve: async (data) => ({ data: data[0] + data[1] }),
 });
 
-class SideEffect extends S.TaggedClass<SideEffect>()('SideEffect', {
-  input: S.Void,
-  output: S.Void,
+class SideEffect extends Schema.TaggedClass<SideEffect>()('SideEffect', {
+  input: Schema.Void,
+  output: Schema.Void,
 }) {}
 
 const sideEffectResolver = createResolver({

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

@@ -24,7 +24,7 @@ import {
   type Label,
 } from './intent';
 import { Events, Capabilities } from '../common';
-import { contributes, type PluginsContext } from '../core';
+import { contributes, type PluginContext } from '../core';
 
 const EXECUTION_LIMIT = 100;
 const HISTORY_LIMIT = 100;
@@ -184,14 +184,14 @@ export type IntentContext = {
  * @param params.executionLimit The maximum recursion depth of intent chains.
  */
 export const createDispatcher = (
-  getResolvers: (module?: string) => AnyIntentResolver[],
+  getResolvers: () => AnyIntentResolver[],
   { executionLimit = EXECUTION_LIMIT, historyLimit = HISTORY_LIMIT } = {},
 ): IntentContext => {
   const historyRef = Effect.runSync(Ref.make<AnyIntentResult[][]>([]));
 
   const handleIntent = (intent: AnyIntent) =>
     Effect.gen(function* () {
-      const candidates = getResolvers(intent.module)
+      const candidates = getResolvers()
         .filter((resolver) => resolver.intent._tag === intent.id)
         .filter((resolver) => !resolver.filter || resolver.filter(intent.data))
         .toSorted(byPosition);
@@ -302,7 +302,7 @@ export const createDispatcher = (
 const defaultEffect = () => Effect.fail(new Error('Intent runtime not ready'));
 const defaultPromise = () => Effect.runPromise(defaultEffect());
 
-export default (context: PluginsContext) => {
+export default (context: PluginContext) => {
   const state = live<IntentContext>({
     dispatch: defaultEffect,
     dispatchPromise: defaultPromise,
@@ -311,15 +311,11 @@ export default (context: PluginsContext) => {
   });
 
   // TODO(wittjosiah): Make getResolver callback async and allow resolvers to be requested on demand.
-  const { dispatch, dispatchPromise, undo, undoPromise } = createDispatcher((module) =>
-    context
-      .requestCapabilities(Capabilities.IntentResolver, (c, moduleId): c is AnyIntentResolver => {
-        return module ? moduleId === module : true;
-      })
-      .flat(),
+  const { dispatch, dispatchPromise, undo, undoPromise } = createDispatcher(() =>
+    context.getCapabilities(Capabilities.IntentResolver).flat(),
   );
 
-  const manager = context.requestCapability(Capabilities.PluginManager);
+  const manager = context.getCapability(Capabilities.PluginManager);
   state.dispatch = (intentChain, depth) => {
     return Effect.gen(function* () {
       yield* manager._activate(Events.SetupIntentResolver);

package/src/plugin-intent/intent.ts

@@ -2,20 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema as S } from 'effect';
+import { Schema } from 'effect';
 
 export type IntentParams = {
-  readonly input: S.Schema.All;
-  readonly output: S.Schema.All;
+  readonly input: Schema.Schema.All;
+  readonly output: Schema.Schema.All;
 };
 
 export type IntentData<Fields extends IntentParams> =
-  S.Schema.Type<S.Struct<Fields>> extends { readonly input: any } ? S.Schema.Type<S.Struct<Fields>>['input'] : any;
+  Schema.Schema.Type<Schema.Struct<Fields>> extends { readonly input: any }
+    ? Schema.Schema.Type<Schema.Struct<Fields>>['input']
+    : any;
 
 export type IntentResultData<Fields extends IntentParams> =
-  S.Schema.Type<S.Struct<Fields>> extends { readonly output: any } ? S.Schema.Type<S.Struct<Fields>>['output'] : any;
+  Schema.Schema.Type<Schema.Struct<Fields>> extends { readonly output: any }
+    ? Schema.Schema.Type<Schema.Struct<Fields>>['output']
+    : any;
 
-export type IntentSchema<Tag extends string, Fields extends IntentParams> = S.TaggedClass<any, Tag, Fields>;
+export type IntentSchema<Tag extends string, Fields extends IntentParams> = Schema.TaggedClass<any, Tag, Fields>;
 
 /**
  * An intent is an abstract description of an operation to be performed.
@@ -34,13 +38,6 @@ export type Intent<Tag extends string, Fields extends IntentParams> = {
    */
   data: IntentData<Fields>;
 
-  /**
-   * Module ID.
-   * If specified, the intent will be sent explicitly to the plugin module.
-   * Otherwise, the intent will be sent to all plugins, in order and the first to resolve a non-null value will be used.
-   */
-  module?: string;
-
   /**
    * Whether or not the intent is being undone.
    */
@@ -76,11 +73,11 @@ export type AnyIntentChain = IntentChain<any, any, any, any>;
 export const createIntent = <Tag extends string, Fields extends IntentParams>(
   schema: IntentSchema<Tag, Fields>,
   data: IntentData<Fields> = {},
-  params: Pick<AnyIntent, 'module' | 'undo'> = {},
+  params: Pick<AnyIntent, 'undo'> = {},
 ): IntentChain<Tag, Tag, Fields, Fields> => {
   // The output of validateSync breaks proxy objects so this is just used for validation.
   // TODO(wittjosiah): Is there a better way to make theses types align?
-  const _ = S.validateSync(schema.fields.input as S.Schema<any, any, unknown>)(data);
+  const _ = Schema.validateSync(schema.fields.input as Schema.Schema<any, any, unknown>)(data);
   const intent = {
     ...params,
     _schema: schema,
@@ -112,7 +109,7 @@ export const chain =
   >(
     schema: IntentSchema<NextTag, NextFields>,
     data: Omit<IntentData<NextFields>, keyof IntentResultData<LastFields>> = {},
-    params: Pick<AnyIntent, 'module' | 'undo'> = {},
+    params: Pick<AnyIntent, 'undo'> = {},
   ) =>
   (
     intent: IntentChain<FirstTag, any, FirstFields, LastFields>,
@@ -139,8 +136,13 @@ export const chain =
 
 // NOTE: Should maintain compatibility with `i18next` (and @dxos/react-ui).
 // TODO(wittjosiah): Making this immutable breaks type compatibility.
-export const Label = S.Union(
-  S.String,
-  S.mutable(S.Tuple(S.String, S.mutable(S.Struct({ ns: S.String, count: S.optional(S.Number) })))),
+export const Label = Schema.Union(
+  Schema.String,
+  Schema.mutable(
+    Schema.Tuple(
+      Schema.String,
+      Schema.mutable(Schema.Struct({ ns: Schema.String, count: Schema.optional(Schema.Number) })),
+    ),
+  ),
 );
-export type Label = S.Schema.Type<typeof Label>;
+export type Label = Schema.Schema.Type<typeof Label>;

package/src/plugin-settings/actions.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema as S } from 'effect';
+import { Schema } from 'effect';
 
 export const SETTINGS_PLUGIN = 'dxos.org/plugin/settings';
 export const SETTINGS_ACTION = `${SETTINGS_PLUGIN}/action`;
@@ -12,18 +12,18 @@ export const SETTINGS_ID = '!dxos:settings';
 export const SETTINGS_KEY = 'settings';
 
 export namespace SettingsAction {
-  export class Open extends S.TaggedClass<Open>()(`${SETTINGS_ACTION}/open`, {
-    input: S.Struct({
-      plugin: S.optional(S.String),
+  export class Open extends Schema.TaggedClass<Open>()(`${SETTINGS_ACTION}/open`, {
+    input: Schema.Struct({
+      plugin: Schema.optional(Schema.String),
     }),
-    output: S.Void,
+    output: Schema.Void,
   }) {}
 
-  export class OpenPluginRegistry extends S.TaggedClass<OpenPluginRegistry>()(
+  export class OpenPluginRegistry extends Schema.TaggedClass<OpenPluginRegistry>()(
     `${SETTINGS_ACTION}/open-plugin-registry`,
     {
-      input: S.Void,
-      output: S.Void,
+      input: Schema.Void,
+      output: Schema.Void,
     },
   ) {}
 }

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

@@ -2,121 +2,156 @@
 // Copyright 2025 DXOS.org
 //
 
-import { createExtension, type Node } from '@dxos/app-graph';
+import { Rx } from '@effect-rx/rx-react';
+import { Option, pipe } from 'effect';
+
+import { createExtension, ROOT_ID } from '@dxos/app-graph';
 import { type SettingsStore, type SettingsValue } from '@dxos/local-storage';
 import { isNonNullable } from '@dxos/util';
 
 import { SETTINGS_ID, SETTINGS_KEY, SETTINGS_PLUGIN, SettingsAction } from './actions';
 import { Capabilities } from '../common';
-import { contributes, type PluginMeta, type PluginsContext } from '../core';
+import { contributes, type PluginMeta, type PluginContext } from '../core';
 import { createIntent } from '../plugin-intent';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
       id: `${SETTINGS_PLUGIN}/action`,
-      filter: (node): node is Node<null> => node.id === 'root',
-      actions: () => [
-        {
-          id: SETTINGS_PLUGIN,
-          data: async () => {
-            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-            await dispatch(createIntent(SettingsAction.Open));
-          },
-          properties: {
-            label: ['open settings label', { ns: SETTINGS_PLUGIN }],
-            icon: 'ph--gear--regular',
-            keyBinding: {
-              macos: 'meta+,',
-              windows: 'alt+,',
-            },
-          },
-        },
-      ],
+      actions: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
+            Option.map(() => [
+              {
+                id: SETTINGS_PLUGIN,
+                data: async () => {
+                  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+                  await dispatch(createIntent(SettingsAction.Open));
+                },
+                properties: {
+                  label: ['open settings label', { ns: SETTINGS_PLUGIN }],
+                  icon: 'ph--gear--regular',
+                  disposition: 'menu',
+                  keyBinding: {
+                    macos: 'meta+,',
+                    windows: 'alt+,',
+                  },
+                },
+              },
+            ]),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
     createExtension({
       id: `${SETTINGS_PLUGIN}/core`,
-      filter: (node): node is Node<null> => node.id === 'root',
-      connector: () => [
-        {
-          id: SETTINGS_ID,
-          type: SETTINGS_PLUGIN,
-          properties: {
-            label: ['app settings label', { ns: SETTINGS_PLUGIN }],
-            icon: 'ph--gear--regular',
-            disposition: 'pin-end',
-            position: 'hoist',
-            testId: 'treeView.appSettings',
-          },
-        },
-      ],
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
+            Option.map(() => [
+              {
+                id: SETTINGS_ID,
+                type: SETTINGS_PLUGIN,
+                properties: {
+                  label: ['app settings label', { ns: SETTINGS_PLUGIN }],
+                  icon: 'ph--gear--regular',
+                  disposition: 'pin-end',
+                  position: 'hoist',
+                  testId: 'treeView.appSettings',
+                },
+              },
+            ]),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
     createExtension({
       id: `${SETTINGS_PLUGIN}/core-plugins`,
-      filter: (node): node is Node<null> => node.id === SETTINGS_ID,
-      connector: () => {
-        const manager = context.requestCapability(Capabilities.PluginManager);
-        const [settingsStore] = context.requestCapabilities(Capabilities.SettingsStore);
-        return [
-          ...manager.plugins
-            .filter((plugin) => manager.core.includes(plugin.meta.id))
-            .map((plugin): [PluginMeta, SettingsStore<SettingsValue>] | null => {
-              const settings = settingsStore?.getStore(plugin.meta.id);
-              if (!settings) {
-                return null;
-              }
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (node.id !== SETTINGS_ID ? Option.none() : Option.some(node))),
+            Option.map(() => {
+              const manager = get(context.capability(Capabilities.PluginManager));
+              const [settingsStore] = get(context.capabilities(Capabilities.SettingsStore));
+              return [
+                ...manager.plugins
+                  .filter((plugin) => manager.core.includes(plugin.meta.id))
+                  .map((plugin): [PluginMeta, SettingsStore<SettingsValue>] | null => {
+                    const settings = settingsStore?.getStore(plugin.meta.id);
+                    if (!settings) {
+                      return null;
+                    }
 
-              return [plugin.meta, settings];
-            })
-            .filter(isNonNullable)
-            .map(([meta, settings]) => ({
-              id: `${SETTINGS_KEY}:${meta.id.replaceAll('/', ':')}`,
-              type: 'category',
-              data: settings,
-              properties: {
-                label: meta.name ?? meta.id,
-                icon: meta.icon ?? 'ph--circle--regular',
-              },
-            })),
+                    return [plugin.meta, settings];
+                  })
+                  .filter(isNonNullable)
+                  .map(([meta, settings]) => ({
+                    id: `${SETTINGS_KEY}:${meta.id.replaceAll('/', ':')}`,
+                    type: 'category',
+                    data: settings,
+                    properties: {
+                      label: meta.name ?? meta.id,
+                      icon: meta.icon ?? 'ph--circle--regular',
+                    },
+                  })),
 
-          {
-            id: `${SETTINGS_KEY}:custom-plugins`,
-            type: 'collection',
-            properties: {
-              label: ['custom plugins label', { ns: SETTINGS_PLUGIN }],
-              icon: 'ph--squares-four--regular',
-              role: 'branch',
-            },
-          },
-        ];
-      },
+                {
+                  id: `${SETTINGS_KEY}:custom-plugins`,
+                  type: 'category',
+                  properties: {
+                    label: ['custom plugins label', { ns: SETTINGS_PLUGIN }],
+                    icon: 'ph--squares-four--regular',
+                    role: 'branch',
+                    disposition: 'collection',
+                  },
+                },
+              ];
+            }),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
     createExtension({
       id: `${SETTINGS_PLUGIN}/custom-plugins`,
-      filter: (node): node is Node<null> => node.id === `${SETTINGS_KEY}:custom-plugins`,
-      connector: () => {
-        const manager = context.requestCapability(Capabilities.PluginManager);
-        const [settingsStore] = context.requestCapabilities(Capabilities.SettingsStore);
-        return manager.plugins
-          .filter((plugin) => !manager.core.includes(plugin.meta.id))
-          .map((plugin): [PluginMeta, SettingsStore<SettingsValue>] | null => {
-            const settings = settingsStore?.getStore(plugin.meta.id);
-            if (!settings) {
-              return null;
-            }
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) =>
+              node.id !== `${SETTINGS_KEY}:custom-plugins` ? Option.none() : Option.some(node),
+            ),
+            Option.map(() => {
+              const manager = get(context.capability(Capabilities.PluginManager));
+              const [settingsStore] = get(context.capabilities(Capabilities.SettingsStore));
+              return manager.plugins
+                .filter((plugin) => !manager.core.includes(plugin.meta.id))
+                .map((plugin): [PluginMeta, SettingsStore<SettingsValue>] | null => {
+                  const settings = settingsStore?.getStore(plugin.meta.id);
+                  if (!settings) {
+                    return null;
+                  }
 
-            return [plugin.meta, settings];
-          })
-          .filter(isNonNullable)
-          .map(([meta, settings]) => ({
-            id: `${SETTINGS_KEY}:${meta.id.replaceAll('/', ':')}`,
-            type: 'category',
-            data: settings,
-            properties: {
-              label: meta.name ?? meta.id,
-              icon: meta.icon ?? 'ph--circle--regular',
-            },
-          }));
-      },
+                  return [plugin.meta, settings];
+                })
+                .filter(isNonNullable)
+                .map(([meta, settings]) => ({
+                  id: `${SETTINGS_KEY}:${meta.id.replaceAll('/', ':')}`,
+                  type: 'category',
+                  data: settings,
+                  properties: {
+                    label: meta.name ?? meta.id,
+                    icon: meta.icon ?? 'ph--circle--regular',
+                  },
+                }));
+            }),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
   ]);

package/src/plugin-settings/store.ts

@@ -2,29 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
-import { effect } from '@preact/signals-core';
-
 import { RootSettingsStore } from '@dxos/local-storage';
 
 import { Capabilities } from '../common';
-import { contributes, type PluginsContext } from '../core';
+import { contributes, type PluginContext } from '../core';
 
-export default (context: PluginsContext) => {
+export default (context: PluginContext) => {
+  // TODO(wittjosiah): Replace with rx?
   const settingsStore = new RootSettingsStore();
 
   let previous: Capabilities.Settings[] = [];
-  const unsubscribe = effect(() => {
-    const allSettings = context.requestCapabilities(Capabilities.Settings);
-    const added = allSettings.filter((setting) => !previous.includes(setting));
-    const removed = previous.filter((setting) => !allSettings.includes(setting));
-    previous = allSettings;
-    added.forEach((setting) => {
-      settingsStore.createStore(setting as any);
-    });
-    removed.forEach((setting) => {
-      settingsStore.removeStore(setting.prefix);
-    });
-  });
+  const registry = context.getCapability(Capabilities.RxRegistry);
+  const cancel = registry.subscribe(
+    context.capabilities(Capabilities.Settings),
+    (allSettings) => {
+      const added = allSettings.filter((setting) => !previous.includes(setting));
+      const removed = previous.filter((setting) => !allSettings.includes(setting));
+      previous = allSettings;
+      added.forEach((setting) => {
+        settingsStore.createStore(setting as any);
+      });
+      removed.forEach((setting) => {
+        settingsStore.removeStore(setting.prefix);
+      });
+    },
+    { immediate: true },
+  );
 
-  return contributes(Capabilities.SettingsStore, settingsStore, () => unsubscribe());
+  return contributes(Capabilities.SettingsStore, settingsStore, () => cancel());
 };

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/react/Surface.stories.tsx

@@ -87,7 +87,7 @@ export default {
     );
   },
   // NOTE: Intentionally not using withPluginManager to try to reduce surface area of the story.
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
   args: {
     manager: setupPluginManager(),
   },

package/src/react/Surface.tsx

@@ -10,7 +10,7 @@ import { byPosition } from '@dxos/util';
 import { ErrorBoundary } from './ErrorBoundary';
 import { useCapabilities } from './useCapabilities';
 import { Capabilities, type SurfaceDefinition, type SurfaceProps } from '../common';
-import { type PluginsContext } from '../core';
+import { type PluginContext } from '../core';
 
 const DEFAULT_PLACEHOLDER = <Fragment />;
 
@@ -34,8 +34,8 @@ const findCandidates = (surfaces: SurfaceDefinition[], { role, data }: Pick<Surf
 /**
  * @returns `true` if there is a contributed surface which matches the specified role & data, `false` otherwise.
  */
-export const isSurfaceAvailable = (context: PluginsContext, { role, data }: Pick<SurfaceProps, 'role' | 'data'>) => {
-  const surfaces = context.requestCapabilities(Capabilities.ReactSurface);
+export const isSurfaceAvailable = (context: PluginContext, { role, data }: Pick<SurfaceProps, 'role' | 'data'>) => {
+  const surfaces = context.getCapabilities(Capabilities.ReactSurface);
   const candidates = findCandidates(surfaces.flat(), { role, data });
   return candidates.length > 0;
 };