@dxos/app-framework 0.8.1-main.ba2dec9 → 0.8.1-staging.31c3ee1

package/src/App.tsx

@@ -3,7 +3,7 @@
 //
 
 import { effect } from '@preact/signals-core';
-import React, { type PropsWithChildren, type ReactNode } from 'react';
+import React, { useEffect, useState, type FC, type PropsWithChildren } from 'react';
 
 import { invariant } from '@dxos/invariant';
 import { create } from '@dxos/live-object';
@@ -21,7 +21,7 @@ export type CreateAppOptions = {
   plugins?: Plugin[];
   core?: string[];
   defaults?: string[];
-  placeholder?: ReactNode;
+  placeholder?: FC<{ stage: number }>;
   fallback?: ErrorBoundary['props']['fallback'];
   cacheEnabled?: boolean;
 };
@@ -56,7 +56,7 @@ export const createApp = ({
   plugins = [],
   core = plugins.map(({ meta }) => meta.id),
   defaults = [],
-  placeholder = null,
+  placeholder,
   fallback = DefaultFallback,
   cacheEnabled = false,
 }: CreateAppOptions) => {
@@ -110,22 +110,79 @@ export const createApp = ({
   );
 };
 
-type AppProps = Required<Pick<CreateAppOptions, 'placeholder'>> & {
+const DELAY_PLACEHOLDER = 2_000;
+
+enum LoadingState {
+  Loading = 0,
+  FadeIn = 1,
+  FadeOut = 2,
+  Done = 3,
+}
+
+/**
+ * To avoid "flashing" the placeholder, we wait a period of time before starting the loading animation.
+ * If loading completes during this time the placehoder is not shown, otherwise is it displayed for a minimum period of time.
+ *
+ * States:
+ * 0: Loading   - Wait for a period of time before starting the loading animation.
+ * 1: Fade-in   - Display a loading animation.
+ * 2: Fade-out  - Fade out the loading animation.
+ * 3: Done      - Remove the placeholder.
+ */
+const useLoading = (state: AppProps['state']) => {
+  const [stage, setStage] = useState<LoadingState>(LoadingState.Loading);
+  useEffect(() => {
+    const i = setInterval(() => {
+      setStage((tick) => {
+        switch (tick) {
+          case LoadingState.Loading:
+            if (!state.ready) {
+              return LoadingState.FadeIn;
+            } else {
+              clearInterval(i);
+              return LoadingState.Done;
+            }
+          case LoadingState.FadeIn:
+            if (state.ready) {
+              return LoadingState.FadeOut;
+            }
+            break;
+          case LoadingState.FadeOut:
+            clearInterval(i);
+            return LoadingState.Done;
+        }
+
+        return tick;
+      });
+    }, DELAY_PLACEHOLDER);
+
+    return () => clearInterval(i);
+  }, []);
+
+  return stage;
+};
+
+type AppProps = Pick<CreateAppOptions, 'placeholder'> & {
   state: { ready: boolean; error: unknown };
 };
 
-const App = ({ placeholder, state }: AppProps) => {
+const App = ({ placeholder: Placeholder, state }: AppProps) => {
   const reactContexts = useCapabilities(Capabilities.ReactContext);
   const reactRoots = useCapabilities(Capabilities.ReactRoot);
+  const stage = useLoading(state);
 
   if (state.error) {
-    // This trigger the error boundary to provide UI feedback for the startup error.
+    // This triggers the error boundary to provide UI feedback for the startup error.
     throw state.error;
   }
 
   // TODO(wittjosiah): Consider using Suspense instead?
-  if (!state.ready) {
-    return <>{placeholder}</>;
+  if (stage < LoadingState.Done) {
+    if (!Placeholder) {
+      return null;
+    }
+
+    return <Placeholder stage={stage} />;
   }
 
   const ComposedContext = composeContexts(reactContexts);

package/src/common/layout.ts

@@ -176,6 +176,7 @@ export namespace LayoutAction {
       options: S.optional(
         S.Struct({
           state: S.optional(S.Literal(true).annotations({ description: 'The items are being added.' })),
+          variant: S.optional(S.String.annotations({ description: 'The variant of the item to open.' })),
           key: S.optional(
             S.String.annotations({ description: 'If provided, will replace item with a matching key (id prefix).' }),
           ),

package/src/common/surface.ts

@@ -78,4 +78,9 @@ export type SurfaceDefinition<T extends Record<string, any> = any> = Readonly<{
   component: SurfaceComponent<GuardedType<SurfaceDefinition<T>['filter']>>;
 }>;
 
-export const createSurface = <T extends Record<string, any> = any>(definition: SurfaceDefinition<T>) => definition;
+/**
+ * Creates a surface definition.
+ */
+export const createSurface = <T extends Record<string, any> = any>(
+  definition: SurfaceDefinition<T>,
+): SurfaceDefinition<T> => definition;

package/src/core/capabilities.test.ts

@@ -2,6 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Effect } from 'effect';
 import { describe, expect, it } from 'vitest';
 
 import { updateCounter } from '@dxos/echo-schema/testing';
@@ -12,8 +13,8 @@ import { defineCapability, PluginsContext } from './capabilities';
 registerSignalsRuntime();
 
 const defaultOptions = {
-  activate: () => Promise.resolve(false),
-  reset: () => Promise.resolve(false),
+  activate: () => Effect.succeed(false),
+  reset: () => Effect.succeed(false),
 };
 
 describe('PluginsContext', () => {

package/src/core/capabilities.ts

@@ -6,7 +6,7 @@
 //
 
 import { effect, untracked } from '@preact/signals-core';
-import { type Effect } from 'effect';
+import { Effect } from 'effect';
 
 import { Trigger } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
@@ -56,8 +56,8 @@ export type Capability<T> = {
 export type AnyCapability = Capability<any>;
 
 type PluginsContextOptions = {
-  activate: (event: ActivationEvent) => MaybePromise<boolean>;
-  reset: (event: ActivationEvent) => MaybePromise<boolean>;
+  activate: (event: ActivationEvent) => Effect.Effect<boolean, Error>;
+  reset: (event: ActivationEvent) => Effect.Effect<boolean, Error>;
 };
 
 // NOTE: This is implemented as a class to prevent it from being proxied by PluginManager state.
@@ -219,4 +219,12 @@ export class PluginsContext {
     unsubscribe();
     return capability;
   }
+
+  async activatePromise(event: ActivationEvent): Promise<boolean> {
+    return this.activate(event).pipe(Effect.runPromise);
+  }
+
+  async resetPromise(event: ActivationEvent): Promise<boolean> {
+    return this.reset(event).pipe(Effect.runPromise);
+  }
 }

package/src/core/manager.test.ts

@@ -28,7 +28,7 @@ const Total = defineCapability<{ total: number }>('dxos.org/test/total');
 const CountEvent = defineEvent('dxos.org/test/count');
 const FailEvent = defineEvent('dxos.org/test/fail');
 
-const testMeta = { id: 'dxos.org/plugin/test' };
+const testMeta = { id: 'dxos.org/plugin/test', name: 'Test' };
 
 describe('PluginManager', () => {
   let plugins: Plugin[] = [];
@@ -180,46 +180,46 @@ describe('PluginManager', () => {
   });
 
   it('should be able to fire custom activation events', async () => {
-    const One = definePlugin({ id: 'dxos.org/test/one' }, [
+    const Plugin1 = definePlugin({ id: 'dxos.org/test/plugin-1', name: 'Plugin 1' }, [
       defineModule({
-        id: 'dxos.org/test/one',
+        id: 'dxos.org/test/plugin-1',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 1 })],
       }),
     ]);
-    const Two = definePlugin({ id: 'dxos.org/test/two' }, [
+    const Plugin2 = definePlugin({ id: 'dxos.org/test/plugin-2', name: 'Plugin 2' }, [
       defineModule({
-        id: 'dxos.org/test/two',
+        id: 'dxos.org/test/plugin-2',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 2 })],
       }),
     ]);
-    const Three = definePlugin({ id: 'dxos.org/test/three' }, [
+    const Plugin3 = definePlugin({ id: 'dxos.org/test/plugin-3', name: 'Plugin 3' }, [
       defineModule({
-        id: 'dxos.org/test/three',
+        id: 'dxos.org/test/plugin-3',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 3 })],
       }),
     ]);
-    plugins = [One, Two, Three];
+    plugins = [Plugin1, Plugin2, Plugin3];
 
     const manager = new PluginManager({ pluginLoader });
     expect(manager.active).toEqual([]);
     expect(manager.context.requestCapabilities(Number)).toHaveLength(0);
 
-    await manager.add(One.meta.id);
+    await manager.add(Plugin1.meta.id);
     await manager.activate(CountEvent);
-    expect(manager.active).toEqual([One.meta.id]);
+    expect(manager.active).toEqual([Plugin1.meta.id]);
     expect(manager.context.requestCapabilities(Number)).toHaveLength(1);
 
-    await manager.add(Two.meta.id);
+    await manager.add(Plugin2.meta.id);
     await manager.activate(CountEvent);
-    expect(manager.active).toEqual([One.meta.id, Two.meta.id]);
+    expect(manager.active).toEqual([Plugin1.meta.id, Plugin2.meta.id]);
     expect(manager.context.requestCapabilities(Number)).toHaveLength(2);
 
-    await manager.add(Three.meta.id);
+    await manager.add(Plugin3.meta.id);
     await manager.activate(CountEvent);
-    expect(manager.active).toEqual([One.meta.id, Two.meta.id, Three.meta.id]);
+    expect(manager.active).toEqual([Plugin1.meta.id, Plugin2.meta.id, Plugin3.meta.id]);
     expect(manager.context.requestCapabilities(Number)).toHaveLength(3);
   });
 
@@ -283,7 +283,7 @@ describe('PluginManager', () => {
       state.total = numbers.reduce((acc, n) => acc + n.number, 0);
     };
 
-    const Count = definePlugin({ id: 'dxos.org/test/count' }, [
+    const Count = definePlugin({ id: 'dxos.org/test/count', name: 'Count' }, [
       defineModule({
         id: 'dxos.org/test/count',
         activatesOn: Events.Startup,
@@ -297,17 +297,17 @@ describe('PluginManager', () => {
 
     const Test = definePlugin(testMeta, [
       defineModule({
-        id: 'dxos.org/test/one',
+        id: 'dxos.org/test/plugin-1',
         activatesOn: CountEvent,
         activate: () => contributes(Number, { number: 1 }),
       }),
       defineModule({
-        id: 'dxos.org/test/two',
+        id: 'dxos.org/test/plugin-2',
         activatesOn: CountEvent,
         activate: () => contributes(Number, { number: 2 }),
       }),
       defineModule({
-        id: 'dxos.org/test/three',
+        id: 'dxos.org/test/plugin-3',
         activatesOn: CountEvent,
         activate: () => contributes(Number, { number: 3 }),
       }),
@@ -390,28 +390,28 @@ describe('PluginManager', () => {
   });
 
   it('should be reactive', async () => {
-    const One = definePlugin({ id: 'dxos.org/test/one' }, [
+    const Plugin1 = definePlugin({ id: 'dxos.org/test/plugin-1', name: 'Plugin 1' }, [
       defineModule({
-        id: 'dxos.org/test/one',
+        id: 'dxos.org/test/plugin-1',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 1 })],
       }),
     ]);
-    const Two = definePlugin({ id: 'dxos.org/test/two' }, [
+    const Plugin2 = definePlugin({ id: 'dxos.org/test/plugin-2', name: 'Plugin 2' }, [
       defineModule({
-        id: 'dxos.org/test/two',
+        id: 'dxos.org/test/plugin-2',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 2 })],
       }),
     ]);
-    const Three = definePlugin({ id: 'dxos.org/test/three' }, [
+    const Plugin3 = definePlugin({ id: 'dxos.org/test/plugin-3', name: 'Plugin 3' }, [
       defineModule({
-        id: 'dxos.org/test/three',
+        id: 'dxos.org/test/plugin-3',
         activatesOn: CountEvent,
         activate: () => [contributes(Number, { number: 3 })],
       }),
     ]);
-    plugins = [One, Two, Three];
+    plugins = [Plugin1, Plugin2, Plugin3];
 
     const manager = new PluginManager({ pluginLoader });
     using pluginUpdates = updateCounter(() => {
@@ -439,7 +439,7 @@ describe('PluginManager', () => {
     expect(eventsFiredUpdates.count).toEqual(0);
     expect(pendingResetUpdates.count).toEqual(0);
 
-    await manager.add(One.meta.id);
+    await manager.add(Plugin1.meta.id);
     expect(pluginUpdates.count).toEqual(1);
     expect(enabledUpdates.count).toEqual(1);
     expect(modulesUpdates.count).toEqual(1);
@@ -455,7 +455,7 @@ describe('PluginManager', () => {
     expect(eventsFiredUpdates.count).toEqual(1);
     expect(pendingResetUpdates.count).toEqual(0);
 
-    await manager.add(Two.meta.id);
+    await manager.add(Plugin2.meta.id);
     expect(pluginUpdates.count).toEqual(2);
     expect(enabledUpdates.count).toEqual(2);
     expect(modulesUpdates.count).toEqual(2);
@@ -471,7 +471,7 @@ describe('PluginManager', () => {
     expect(eventsFiredUpdates.count).toEqual(1);
     expect(pendingResetUpdates.count).toEqual(2);
 
-    await manager.add(Three.meta.id);
+    await manager.add(Plugin3.meta.id);
     expect(pluginUpdates.count).toEqual(3);
     expect(enabledUpdates.count).toEqual(3);
     expect(modulesUpdates.count).toEqual(3);
@@ -488,7 +488,7 @@ describe('PluginManager', () => {
     expect(eventsFiredUpdates.count).toEqual(1);
     expect(pendingResetUpdates.count).toEqual(4);
 
-    await manager.disable(One.meta.id);
+    await manager.disable(Plugin1.meta.id);
     expect(pluginUpdates.count).toEqual(3);
     expect(enabledUpdates.count).toEqual(4);
     expect(modulesUpdates.count).toEqual(4);
@@ -496,7 +496,7 @@ describe('PluginManager', () => {
     expect(eventsFiredUpdates.count).toEqual(1);
     expect(pendingResetUpdates.count).toEqual(4);
 
-    await manager.remove(One.meta.id);
+    await manager.remove(Plugin1.meta.id);
     expect(pluginUpdates.count).toEqual(4);
     expect(enabledUpdates.count).toEqual(4);
     expect(modulesUpdates.count).toEqual(4);

package/src/core/manager.ts

@@ -45,8 +45,8 @@ export class PluginManager {
   readonly activation = new Event<{ event: string; state: 'activating' | 'activated' | 'error'; error?: any }>();
 
   readonly context = new PluginsContext({
-    activate: (event) => this.activate(event),
-    reset: (id) => this.reset(id),
+    activate: (event) => this._activate(event),
+    reset: (id) => this._reset(id),
   });
 
   private readonly _state: ReactiveObject<PluginManagerState>;

package/src/core/plugin.ts

@@ -79,7 +79,7 @@ export type PluginMeta = {
   /**
    * Human-readable name.
    */
-  name?: string;
+  name: string;
 
   /**
    * Short description of plugin functionality.

package/src/playground/debug/plugin.ts

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

package/src/playground/generator/generator.ts

@@ -26,7 +26,7 @@ export const createGeneratorIntent = (id: string) => {
 export const createNumberPlugin = (id: string) => {
   const number = Math.floor(Math.random() * 100);
 
-  return definePlugin({ id }, [
+  return definePlugin({ id, name: `Plugin ${id}` }, [
     defineModule({
       id: `${id}/main`,
       activatesOn: CountEvent,

package/src/playground/generator/plugin.ts

@@ -9,7 +9,7 @@ const Main = lazy(() => import('./Main'));
 const Toolbar = lazy(() => import('./Toolbar'));
 
 export const GeneratorPlugin = () =>
-  definePlugin({ id: 'dxos.org/test/generator' }, [
+  definePlugin({ id: 'dxos.org/test/generator', name: 'Generator' }, [
     defineModule({
       id: 'dxos.org/test/generator/main',
       activatesOn: Events.Startup,

package/src/playground/layout/plugin.ts

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

package/src/playground/logger/plugin.ts

@@ -12,7 +12,7 @@ import { createResolver } from '../../plugin-intent';
 const Toolbar = lazy(() => import('./Toolbar'));
 
 export const LoggerPlugin = () =>
-  definePlugin({ id: 'dxos.org/test/logger' }, [
+  definePlugin({ id: 'dxos.org/test/logger', name: 'Logger' }, [
     defineModule({
       id: 'dxos.org/test/logger/intents',
       activatesOn: Events.SetupIntentResolver,

package/src/playground/playground.stories.tsx

@@ -17,12 +17,16 @@ import { IntentPlugin } from '../plugin-intent';
 
 const plugins = [IntentPlugin(), LayoutPlugin(), DebugPlugin(), LoggerPlugin(), GeneratorPlugin()];
 
+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: <div>Loading...</div>,
+  placeholder: Placeholder,
 });
 
 export const Playground = {};

package/src/plugin-intent/IntentPlugin.tsx

@@ -7,7 +7,7 @@ import { Events } from '../common';
 import { defineModule, definePlugin, lazy } from '../core';
 
 export const IntentPlugin = () =>
-  definePlugin({ id: INTENT_PLUGIN }, [
+  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.

package/src/plugin-intent/actions.ts

@@ -10,6 +10,17 @@ export const INTENT_PLUGIN = 'dxos.org/plugin/intent';
 export const INTENT_ACTION = `${INTENT_PLUGIN}/action`;
 
 export namespace IntentAction {
+  /**
+   * Log an intent.
+   */
+  export class Track extends S.TaggedClass<Track>()(`${INTENT_ACTION}/track`, {
+    input: S.Struct({
+      intents: S.Array(S.String),
+      error: S.optional(S.String),
+    }),
+    output: S.Void,
+  }) {}
+
   /**
    * Fired after an intent is dispatched if the intent is undoable.
    */

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

@@ -83,7 +83,9 @@ export type IntentDispatcherResult<Input, Output> = Pick<IntentEffectResult<Inpu
 export type IntentEffectDefinition<Input, Output> = (
   data: Input,
   undo: boolean,
-) => MaybePromise<IntentEffectResult<Input, Output> | void> | Effect.Effect<IntentEffectResult<Input, Output> | void>;
+) =>
+  | MaybePromise<IntentEffectResult<Input, Output> | void>
+  | Effect.Effect<IntentEffectResult<Input, Output> | void, Error>;
 
 /**
  * Intent resolver to match intents to their effects.
@@ -174,8 +176,8 @@ export const createDispatcher = (
   const handleIntent = (intent: AnyIntent) =>
     Effect.gen(function* () {
       const candidates = getResolvers(intent.module)
-        .filter((r) => r.intent._tag === intent.id)
-        .filter((r) => !r.filter || r.filter(intent.data))
+        .filter((resolver) => resolver.intent._tag === intent.id)
+        .filter((resolver) => !resolver.filter || resolver.filter(intent.data))
         .toSorted(byPosition);
       if (candidates.length === 0) {
         yield* Effect.fail(new NoResolversError(intent.id));
@@ -199,17 +201,28 @@ export const createDispatcher = (
         yield* Ref.update(resultsRef, (results) => [result, ...results]);
         if (result.intents) {
           for (const intent of result.intents) {
-            // Returned intents are dispatched but not yielded into results,
-            // as such they cannot be undone.
+            // Returned intents are dispatched but not yielded into results, as such they cannot be undone.
             // TODO(wittjosiah): Use higher execution concurrency?
             yield* dispatch(intent, depth + 1);
           }
         }
+
         if (result.error) {
+          // yield* dispatch(
+          //   createIntent(IntentAction.Track, {
+          //     intents: intentChain.all.map((i) => i.id),
+          //     error: result.error.message,
+          //   }),
+          // );
           yield* Effect.fail(result.error);
         }
       }
 
+      // Track the intent chain.
+      // if (intentChain.all.some((intent) => intent.id !== IntentAction.Track._tag)) {
+      //   yield* dispatch(createIntent(IntentAction.Track, { intents: intentChain.all.map((i) => i.id) }));
+      // }
+
       const results = yield* resultsRef.get;
       const result = results[0];
       yield* Ref.update(historyRef, (history) => {

package/src/plugin-settings/SettingsPlugin.ts

@@ -9,7 +9,7 @@ import { contributes, defineModule, definePlugin, lazy } from '../core';
 
 // TODO(wittjosiah): Add options to exclude some modules.
 export const SettingsPlugin = () =>
-  definePlugin({ id: SETTINGS_PLUGIN }, [
+  definePlugin({ id: SETTINGS_PLUGIN, name: 'Settings' }, [
     defineModule({
       id: `${SETTINGS_PLUGIN}/module/store`,
       activatesOn: Events.Startup,

package/src/plugin-settings/actions.ts

@@ -6,6 +6,8 @@ import { Schema as S } from 'effect';
 
 export const SETTINGS_PLUGIN = 'dxos.org/plugin/settings';
 export const SETTINGS_ACTION = `${SETTINGS_PLUGIN}/action`;
+// TODO(wittjosiah): This is a hack to prevent the previous deck from being set for pinned items.
+//  Ideally this should be worked into the data model in a generic way.
 export const SETTINGS_ID = '!dxos:settings';
 export const SETTINGS_KEY = 'settings';
 

package/src/react/Surface.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { memo, forwardRef, Suspense, useMemo } from 'react';
+import React, { memo, forwardRef, Suspense, useMemo, Fragment } from 'react';
 
 import { useDefaultValue } from '@dxos/react-hooks';
 import { byPosition } from '@dxos/util';
@@ -12,6 +12,8 @@ import { useCapabilities } from './useCapabilities';
 import { Capabilities, type SurfaceDefinition, type SurfaceProps } from '../common';
 import { type PluginsContext } from '../core';
 
+const DEFAULT_PLACEHOLDER = <Fragment />;
+
 /**
  * @internal
  */
@@ -43,7 +45,7 @@ export const isSurfaceAvailable = (context: PluginsContext, { role, data }: Pick
  */
 export const Surface = memo(
   forwardRef<HTMLElement, SurfaceProps>(
-    ({ id: _id, role, data: _data, limit, fallback, placeholder, ...rest }, forwardedRef) => {
+    ({ id: _id, role, data: _data, limit, fallback, placeholder = DEFAULT_PLACEHOLDER, ...rest }, forwardedRef) => {
       // TODO(wittjosiah): This will make all surfaces depend on a single signal.
       //   This isn't ideal because it means that any change to the data will cause all surfaces to re-render.
       //   This effectively means that plugin modules which contribute surfaces need to all be activated at startup.
@@ -59,7 +61,7 @@ export const Surface = memo(
         <Component ref={forwardedRef} key={id} id={id} role={role} data={data} limit={limit} {...rest} />
       ));
 
-      const suspense = placeholder ? <Suspense fallback={placeholder}>{nodes}</Suspense> : nodes;
+      const suspense = <Suspense fallback={placeholder}>{nodes}</Suspense>;
 
       return fallback ? (
         <ErrorBoundary data={data} fallback={fallback}>

package/src/testing/withPluginManager.stories.tsx

@@ -12,7 +12,7 @@ import { Capabilities, createSurface } from '../common';
 import { contributes } from '../core';
 import { Surface } from '../react';
 
-const Render = () => {
+const DefaultStory = () => {
   console.log('Render');
   return (
     <div>
@@ -24,7 +24,7 @@ const Render = () => {
 
 const meta: Meta = {
   title: 'sdk/app-framework/withPluginManager',
-  render: Render,
+  render: DefaultStory,
   decorators: [
     withTheme,
     withPluginManager({

package/src/testing/withPluginManager.tsx

@@ -86,6 +86,6 @@ export const withPluginManager = (options: WithPluginManagerOptions = {}): Decor
 // This is necessary because `createApp` expects the startup event to complete before the app is ready.
 const STORY_PLUGIN = 'dxos.org/app-framework/story';
 const StoryPlugin = () =>
-  definePlugin({ id: STORY_PLUGIN }, [
+  definePlugin({ id: STORY_PLUGIN, name: 'Story' }, [
     defineModule({ id: STORY_PLUGIN, activatesOn: Events.Startup, activate: () => [] }),
   ]);