@dxos/app-framework 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/src/core/manager.ts

@@ -4,16 +4,16 @@
 
 import { Registry } from '@effect-rx/rx-react';
 import { untracked } from '@preact/signals-core';
-import { Array as A, Effect, Either, Match, pipe } from 'effect';
+import { Array, Duration, Effect, Fiber, HashSet, Match, Ref, pipe } from 'effect';
 
 import { Event } from '@dxos/async';
-import { live, type Live } from '@dxos/live-object';
+import { type Live, live } from '@dxos/live-object';
 import { log } from '@dxos/log';
 import { type MaybePromise } from '@dxos/util';
 
 import { type AnyCapability, PluginContext } from './capabilities';
 import { type ActivationEvent, eventKey, getEvents, isAllOf } from './events';
-import { type PluginModule, type Plugin } from './plugin';
+import { type Plugin, type PluginModule } from './plugin';
 
 // TODO(wittjosiah): Factor out?
 const isPromise = (value: unknown): value is Promise<unknown> => {
@@ -52,6 +52,9 @@ export class PluginManager {
   private readonly _state: Live<PluginManagerState>;
   private readonly _pluginLoader: PluginManagerOptions['pluginLoader'];
   private readonly _capabilities = new Map<string, AnyCapability[]>();
+  private readonly _moduleMemoMap = new Map<PluginModule['id'], Promise<AnyCapability[]>>();
+  private readonly _activatingEvents = Effect.runSync(Ref.make<string[]>([]));
+  private readonly _activatingModules = Effect.runSync(Ref.make<string[]>([]));
 
   constructor({
     pluginLoader,
@@ -74,8 +77,8 @@ export class PluginManager {
       enabled,
       modules: [],
       active: [],
-      pendingReset: [],
       eventsFired: [],
+      pendingReset: [],
     });
     plugins.forEach((plugin) => this._addPlugin(plugin));
     core.forEach((id) => this.enable(id));
@@ -268,6 +271,7 @@ export class PluginManager {
   private _addPlugin(plugin: Plugin): void {
     untracked(() => {
       log('add plugin', { id: plugin.meta.id });
+      // TODO(wittjosiah): Find a way to add a warning for duplicate plugins that doesn't cause log spam.
       if (!this._state.plugins.includes(plugin)) {
         this._state.plugins.push(plugin);
       }
@@ -287,6 +291,7 @@ export class PluginManager {
   private _addModule(module: PluginModule): void {
     untracked(() => {
       log('add module', { id: module.id });
+      // TODO(wittjosiah): Find a way to add a warning for duplicate modules that doesn't cause log spam.
       if (!this._state.modules.includes(module)) {
         this._state.modules.push(module);
       }
@@ -329,7 +334,7 @@ export class PluginManager {
         .map(eventKey)
         .filter((key) => this._state.eventsFired.includes(key));
 
-      const pendingReset = Array.from(new Set(activationEvents)).filter(
+      const pendingReset = Array.fromIterable(new Set(activationEvents)).filter(
         (event) => !this._state.pendingReset.includes(event),
       );
       if (pendingReset.length > 0) {
@@ -343,24 +348,42 @@ export class PluginManager {
    * @internal
    */
   // TODO(wittjosiah): Improve error typing.
-  _activate(event: ActivationEvent | string): Effect.Effect<boolean, Error> {
+  _activate(
+    event: ActivationEvent | string,
+    params?: { before?: string; after?: string },
+  ): Effect.Effect<boolean, Error> {
     return Effect.gen(this, function* () {
       const key = typeof event === 'string' ? event : eventKey(event);
-      log('activating', { key });
+      log('activating', { key, ...params });
+      yield* Ref.update(this._activatingEvents, (activating) => Array.append(activating, key));
       const pendingIndex = this._state.pendingReset.findIndex((event) => event === key);
       if (pendingIndex !== -1) {
         this._state.pendingReset.splice(pendingIndex, 1);
       }
 
+      const activatingEvents = yield* this._activatingEvents;
+      const activatingModules = yield* this._activatingModules;
       const modules = this._getInactiveModulesByEvent(key).filter((module) => {
         const allOf = isAllOf(module.activatesOn);
         if (!allOf) {
           return true;
         }
 
+        // Check to see if all of the events in the `allOf` have been fired.
+        // An event can be considered "fired" if it is in the `eventsFired` list or if it is currently being activated.
         const events = module.activatesOn.events.filter((event) => eventKey(event) !== key);
-        return events.every((event) => this._state.eventsFired.includes(eventKey(event)));
+        return (
+          events.every(
+            (event) => this._state.eventsFired.includes(eventKey(event)) || activatingEvents.includes(eventKey(event)),
+          ) && !activatingModules.includes(module.id)
+        );
       });
+      yield* Ref.update(this._activatingModules, (activating) =>
+        Array.appendAll(
+          activating,
+          modules.map((module) => module.id),
+        ),
+      );
       if (modules.length === 0) {
         log('no modules to activate', { key });
         if (!this._state.eventsFired.includes(key)) {
@@ -372,31 +395,53 @@ export class PluginManager {
       log('activating modules', { key, modules: modules.map((module) => module.id) });
       this.activation.emit({ event: key, state: 'activating' });
 
+      // Fire activatesBefore events.
+      yield* pipe(
+        modules,
+        Array.flatMap((module) => module.activatesBefore ?? []),
+        HashSet.fromIterable,
+        HashSet.toValues,
+        Array.filter((event) => !activatingEvents.includes(eventKey(event))),
+        Array.map((event) => this._activate(event, { before: key })),
+        Effect.allWith({ concurrency: 'unbounded' }),
+      );
+
       // Concurrently triggers loading of lazy capabilities.
-      const getCapabilities = yield* Effect.all(
-        modules.map(({ activate }) =>
-          Effect.tryPromise({
-            try: async () => activate(this.context),
-            catch: (error) => error as Error,
-          }),
-        ),
-        { concurrency: 'unbounded' },
+      const getCapabilities = yield* pipe(
+        modules,
+        Array.map((mod) => this._loadModule(mod)),
+        Effect.allWith({ concurrency: 'unbounded' }),
+        Effect.catchAll((error) => {
+          this.activation.emit({ event: key, state: 'error', error });
+          return Effect.fail(error);
+        }),
       );
 
-      const result = yield* pipe(
+      // Contribute the capabilities from the activated modules.
+      yield* pipe(
         modules,
-        A.zip(getCapabilities),
-        A.map(([module, getCapabilities]) => this._activateModule(module, getCapabilities)),
+        Array.zip(getCapabilities),
+        Array.map(([module, capabilities]) => this._contributeCapabilities(module, capabilities)),
         // TODO(wittjosiah): This currently can't be run in parallel.
         //   Running this with concurrency causes races with `allOf` activation events.
         Effect.all,
-        Effect.either,
       );
 
-      if (Either.isLeft(result)) {
-        this.activation.emit({ event: key, state: 'error', error: result.left });
-        yield* Effect.fail(result.left);
-      }
+      // Fire activatesAfter events.
+      yield* pipe(
+        modules,
+        Array.flatMap((module) => module.activatesAfter ?? []),
+        HashSet.fromIterable,
+        HashSet.toValues,
+        Array.filter((event) => !activatingEvents.includes(eventKey(event))),
+        Array.map((event) => this._activate(event, { after: key })),
+        Effect.allWith({ concurrency: 'unbounded' }),
+      );
+
+      yield* Ref.update(this._activatingEvents, (activating) => Array.filter(activating, (event) => event !== key));
+      yield* Ref.update(this._activatingModules, (activating) =>
+        Array.filter(activating, (module) => !modules.map((module) => module.id).includes(module)),
+      );
 
       if (!this._state.eventsFired.includes(key)) {
         this._state.eventsFired.push(key);
@@ -409,43 +454,60 @@ export class PluginManager {
     });
   }
 
-  private _activateModule(
-    module: PluginModule,
-    getCapabilities: AnyCapability | AnyCapability[] | (() => Promise<AnyCapability | AnyCapability[]>),
-  ): Effect.Effect<void, Error> {
-    return Effect.gen(this, function* () {
-      yield* Effect.all(module.activatesBefore?.map((event) => this._activate(event)) ?? [], {
-        concurrency: 'unbounded',
-      });
+  // Memoized with _moduleMemoMap
+  private _loadModule = (mod: PluginModule): Effect.Effect<AnyCapability[], Error> =>
+    Effect.tryPromise({
+      try: async () => {
+        const entry = this._moduleMemoMap.get(mod.id);
+        if (entry) {
+          return entry;
+        }
 
-      log('activating module...', { module: module.id });
-      // TODO(wittjosiah): This is not handling errors thrown if this is synchronous.
-      const maybeCapabilities = typeof getCapabilities === 'function' ? getCapabilities() : getCapabilities;
-      const resolvedCapabilities = yield* Match.value(maybeCapabilities).pipe(
-        // TODO(wittjosiah): Activate with an effect?
-        // Match.when(Effect.isEffect, (effect) => effect),
-        Match.when(isPromise, (promise) =>
-          Effect.tryPromise({
-            try: () => promise,
-            catch: (error) => error as Error,
-          }),
+        const promise = (async () => {
+          const start = performance.now();
+          let failed = false;
+          try {
+            log('loading module', { module: mod.id });
+            // TODO(wittjosiah): Support activation with an effect.
+            let activationResult = await mod.activate(this.context);
+            if (typeof activationResult === 'function') {
+              activationResult = await activationResult();
+            }
+            return Array.isArray(activationResult) ? activationResult : [activationResult];
+          } catch (error) {
+            failed = true;
+            throw error;
+          } finally {
+            performance.measure('activate-module', {
+              start,
+              end: performance.now(),
+              detail: {
+                module: mod.id,
+              },
+            });
+            log('loaded module', { module: mod.id, elapsed: performance.now() - start, failed });
+          }
+        })();
+        this._moduleMemoMap.set(mod.id, promise);
+        return promise;
+      },
+      catch: (error) => error as Error,
+    }).pipe(
+      Effect.withSpan('PluginManager._loadModule'),
+      together(
+        Effect.sleep(Duration.seconds(10)).pipe(
+          Effect.andThen(Effect.sync(() => log.warn(`module is taking a long time to activate`, { module: mod.id }))),
         ),
-        Match.orElse((program) => Effect.succeed(program)),
-      );
-      const capabilities = Match.value(resolvedCapabilities).pipe(
-        Match.when(Array.isArray, (array) => array),
-        Match.orElse((value) => [value]),
-      );
+      ),
+    );
+
+  private _contributeCapabilities(module: PluginModule, capabilities: AnyCapability[]): Effect.Effect<void, Error> {
+    return Effect.gen(this, function* () {
       capabilities.forEach((capability) => {
         this.context.contributeCapability({ module: module.id, ...capability });
       });
       this._state.active.push(module.id);
       this._capabilities.set(module.id, capabilities);
-      log('activated module', { module: module.id });
-
-      yield* Effect.all(module.activatesAfter?.map((event) => this._activate(event)) ?? [], {
-        concurrency: 'unbounded',
-      });
     });
   }
 
@@ -469,6 +531,7 @@ export class PluginManager {
     return Effect.gen(this, function* () {
       const id = module.id;
       log('deactivating', { id });
+      this._moduleMemoMap.delete(id);
 
       const capabilities = this._capabilities.get(id);
       if (capabilities) {
@@ -517,3 +580,18 @@ export class PluginManager {
     });
   }
 }
+
+/**
+ * Runs an effect concurrently with another effect.
+ * If the first effect completes, the second effect is interrupted.
+ */
+// TODO(dmaretskyi): Effect.race > Effect.asVoid
+const together =
+  <R1>(togetherEffect: Effect.Effect<void, never, R1>) =>
+  <A, E, R2>(effect: Effect.Effect<A, E, R2>): Effect.Effect<A, E, R1 | R2> =>
+    Effect.gen(function* () {
+      const togetherFiber = yield* Effect.fork(togetherEffect);
+      const result = yield* effect;
+      yield* Fiber.interrupt(togetherFiber);
+      return result;
+    });

package/src/helpers.test.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 import { topologicalSort } from './helpers';
 

package/src/playground/generator/Toolbar.tsx

@@ -6,12 +6,13 @@ import React, { useCallback } from 'react';
 
 import { Button } from '@dxos/react-ui';
 
-import { createGeneratorIntent, createPluginId, Number } from './generator';
 import { Capabilities } from '../../common';
 import { contributes } from '../../core';
 import { createIntent } from '../../plugin-intent';
 import { useCapabilities, useIntentDispatcher, usePluginManager } from '../../react';
 
+import { Number, createGeneratorIntent, createPluginId } from './generator';
+
 export const Toolbar = () => {
   const manager = usePluginManager();
   const { dispatchPromise: dispatch } = useIntentDispatcher();

package/src/playground/generator/generator.ts

@@ -5,8 +5,8 @@
 import { Schema } from 'effect';
 
 import { Capabilities, Events } from '../../common';
-import { contributes, defineEvent, defineCapability, defineModule, definePlugin } from '../../core';
-import { createResolver, type IntentSchema } from '../../plugin-intent';
+import { contributes, defineCapability, defineEvent, defineModule, definePlugin } from '../../core';
+import { type IntentSchema, createResolver } from '../../plugin-intent';
 
 export const Number = defineCapability<number>('dxos.org/test/generator/number');
 

package/src/playground/layout/plugin.ts

@@ -3,7 +3,7 @@
 //
 
 import { Events } from '../../common';
-import { definePlugin, lazy, defineModule } from '../../core';
+import { defineModule, definePlugin, lazy } from '../../core';
 
 const Layout = lazy(() => import('./Layout'));
 

package/src/playground/logger/Toolbar.tsx

@@ -6,12 +6,13 @@ import React, { useCallback } from 'react';
 
 import { Button } from '@dxos/react-ui';
 
-import { Log } from './schema';
 import { Capabilities, createSurface } from '../../common';
 import { contributes } from '../../core';
 import { createIntent } from '../../plugin-intent';
 import { useIntentDispatcher } from '../../react';
 
+import { Log } from './schema';
+
 export const Logger = () => {
   const { dispatchPromise } = useIntentDispatcher();
   const handleClick = useCallback(() => dispatchPromise(createIntent(Log, { message: 'Hello, world!' })), []);

package/src/playground/logger/plugin.ts

@@ -4,11 +4,12 @@
 
 import { log } from '@dxos/log';
 
-import { Log } from './schema';
 import { Capabilities, Events } from '../../common';
-import { contributes, defineModule, lazy, definePlugin } from '../../core';
+import { contributes, defineModule, definePlugin, lazy } from '../../core';
 import { createResolver } from '../../plugin-intent';
 
+import { Log } from './schema';
+
 const Toolbar = lazy(() => import('./Toolbar'));
 
 export const LoggerPlugin = () =>

package/src/playground/playground.stories.tsx

@@ -8,12 +8,13 @@ import React from 'react';
 
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
+import { useApp } from '../App';
+import { IntentPlugin } from '../plugin-intent';
+
 import { DebugPlugin } from './debug';
-import { createNumberPlugin, GeneratorPlugin } from './generator';
+import { GeneratorPlugin, createNumberPlugin } from './generator';
 import { LayoutPlugin } from './layout';
 import { LoggerPlugin } from './logger';
-import { useApp } from '../App';
-import { IntentPlugin } from '../plugin-intent';
 
 const plugins = [IntentPlugin(), LayoutPlugin(), DebugPlugin(), LoggerPlugin(), GeneratorPlugin()];
 

package/src/plugin-intent/IntentPlugin.ts

@@ -2,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { INTENT_PLUGIN } from './actions';
 import { Events } from '../common';
 import { defineModule, definePlugin, lazy } from '../core';
 
+import { INTENT_PLUGIN } from './actions';
+
 export const IntentPlugin = () =>
   definePlugin({ id: INTENT_PLUGIN, name: 'Intent' }, [
     defineModule({

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

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema, Effect, Fiber, pipe } from 'effect';
+import { Effect, Fiber, Schema, pipe } from 'effect';
 import { describe, expect, test } from 'vitest';
 
 import { chain, createIntent } from './intent';

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

@@ -2,17 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Effect, Option, pipe, Ref } from 'effect';
+import { Effect, Option, Ref, pipe } from 'effect';
 import { type Simplify } from 'effect/Types';
 
 import { live } from '@dxos/live-object';
 import { log } from '@dxos/log';
-import { byPosition, type MaybePromise, type Position, type GuardedType } from '@dxos/util';
+import { type GuardedType, type MaybePromise, type Position, byPosition } from '@dxos/util';
+
+import { Capabilities, Events } from '../common';
+import { type PluginContext, contributes } from '../core';
 
 import { IntentAction } from './actions';
 import { CycleDetectedError, NoResolversError } from './errors';
 import {
-  createIntent,
   type AnyIntent,
   type AnyIntentChain,
   type Intent,
@@ -22,9 +24,8 @@ import {
   type IntentResultData,
   type IntentSchema,
   type Label,
+  createIntent,
 } from './intent';
-import { Events, Capabilities } from '../common';
-import { contributes, type PluginContext } from '../core';
 
 const EXECUTION_LIMIT = 100;
 const HISTORY_LIMIT = 100;

package/src/plugin-settings/SettingsPlugin.ts

@@ -2,11 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { SETTINGS_PLUGIN } from './actions';
-import { translations } from './translations';
 import { Capabilities, Events } from '../common';
 import { contributes, defineModule, definePlugin, lazy } from '../core';
 
+import { SETTINGS_PLUGIN } from './actions';
+import { translations } from './translations';
+
 // TODO(wittjosiah): Add options to exclude some modules.
 export const SettingsPlugin = () =>
   definePlugin({ id: SETTINGS_PLUGIN, name: 'Settings' }, [

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

@@ -5,15 +5,16 @@
 import { Rx } from '@effect-rx/rx-react';
 import { Option, pipe } from 'effect';
 
-import { createExtension, ROOT_ID } from '@dxos/app-graph';
+import { ROOT_ID, createExtension } 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 PluginContext } from '../core';
+import { type PluginContext, type PluginMeta, contributes } from '../core';
 import { createIntent } from '../plugin-intent';
 
+import { SETTINGS_ID, SETTINGS_KEY, SETTINGS_PLUGIN, SettingsAction } from './actions';
+
 export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({

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

@@ -4,10 +4,11 @@
 
 import { pipe } from 'effect';
 
-import { SETTINGS_ID, SETTINGS_KEY, SettingsAction } from './actions';
 import { Capabilities, LayoutAction } from '../common';
 import { contributes } from '../core';
-import { createResolver, createIntent, chain } from '../plugin-intent';
+import { chain, createIntent, createResolver } from '../plugin-intent';
+
+import { SETTINGS_ID, SETTINGS_KEY, SettingsAction } from './actions';
 
 export default () =>
   contributes(

package/src/plugin-settings/store.ts

@@ -5,7 +5,7 @@
 import { RootSettingsStore } from '@dxos/local-storage';
 
 import { Capabilities } from '../common';
-import { contributes, type PluginContext } from '../core';
+import { type PluginContext, contributes } from '../core';
 
 export default (context: PluginContext) => {
   // TODO(wittjosiah): Replace with rx?

package/src/react/ErrorBoundary.tsx

@@ -2,38 +2,40 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { Component, type FC, type PropsWithChildren } from 'react';
+import React, { Component, type FC, type JSX, type PropsWithChildren, type ReactNode } from 'react';
 
-type Props = PropsWithChildren<{ data?: any; fallback: FC<{ data?: any; error: Error; reset: () => void }> }>;
-type State = { error: Error | undefined };
+type State = {
+  error: Error | undefined;
+};
+
+export type ErrorBoundaryProps = PropsWithChildren<{
+  data?: any;
+  fallback?: FC<{ data?: any; error: Error }>;
+}>;
 
 /**
  * Surface error boundary.
- *
  * For basic usage prefer providing a fallback component to `Surface`.
  *
- * For more information on error boundaries, see:
- * https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+ * Ref: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
  */
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { error: undefined };
-  }
-
+export class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
   static getDerivedStateFromError(error: Error): { error: Error } {
     return { error };
   }
 
-  override componentDidUpdate(prevProps: Props): void {
+  override state = { error: undefined };
+
+  override componentDidUpdate(prevProps: ErrorBoundaryProps): void {
     if (prevProps.data !== this.props.data) {
       this.resetError();
     }
   }
 
-  override render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined {
+  override render(): string | number | boolean | JSX.Element | Iterable<ReactNode> | null | undefined {
     if (this.state.error) {
-      return <this.props.fallback data={this.props.data} error={this.state.error} reset={this.resetError} />;
+      const Fallback = this.props.fallback ?? DefaultFallback;
+      return <Fallback data={this.props.data} error={this.state.error} />;
     }
 
     return this.props.children;
@@ -43,3 +45,10 @@ export class ErrorBoundary extends Component<Props, State> {
     this.setState({ error: undefined });
   }
 }
+
+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>
+);

package/src/react/IntentContext.tsx

@@ -2,15 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Context, createContext, useContext, type Provider, useEffect } from 'react';
+import { type Context, type Provider, createContext, useContext, useEffect } from 'react';
 
 import { raise } from '@dxos/debug';
 import { pick } from '@dxos/util';
 
-import { usePluginManager } from './PluginManagerProvider';
 import { Capabilities } from '../common';
 import { type AnyIntentResolver, type IntentContext } from '../plugin-intent';
 
+import { usePluginManager } from './PluginManagerProvider';
+
 const IntentContext: Context<IntentContext | undefined> = createContext<IntentContext | undefined>(undefined);
 
 export const useIntentDispatcher = (): Pick<IntentContext, 'dispatch' | 'dispatchPromise'> => {

package/src/react/Surface.stories.tsx

@@ -10,12 +10,13 @@ import { faker } from '@dxos/random';
 import { Button, List, ListItem } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { PluginManagerProvider, usePluginManager } from './PluginManagerProvider';
-import { Surface, useSurfaces } from './Surface';
 import { Capabilities, createSurface } from '../common';
 import { type PluginManager } from '../core';
 import { setupPluginManager } from '../testing';
 
+import { PluginManagerProvider, 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 });

package/src/react/Surface.tsx

@@ -2,16 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { memo, forwardRef, Suspense, useMemo, Fragment } from 'react';
+import React, { Fragment, Suspense, forwardRef, memo, useMemo } from 'react';
 
 import { useDefaultValue } from '@dxos/react-hooks';
 import { byPosition } from '@dxos/util';
 
-import { ErrorBoundary } from './ErrorBoundary';
-import { useCapabilities } from './useCapabilities';
 import { Capabilities, type SurfaceDefinition, type SurfaceProps } from '../common';
 import { type PluginContext } from '../core';
 
+import { ErrorBoundary } from './ErrorBoundary';
+import { useCapabilities } from './useCapabilities';
+
 const DEFAULT_PLACEHOLDER = <Fragment />;
 
 /**

package/src/react/common.ts

@@ -2,9 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useCapability } from './useCapabilities';
 import { Capabilities } from '../common';
 
+import { useCapability } from './useCapabilities';
+
 export const useIntentDispatcher = () => useCapability(Capabilities.IntentDispatcher);
 
 export const useAppGraph = () => useCapability(Capabilities.AppGraph);