@dxos/app-framework 0.8.4-main.b97322e → 0.8.4-main.c4373fc

package/.storybook/main.mts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createConfig } from '../../../../tools/storybook/.storybook/main';
+
+export const stories = [
+  '../src/**/*.stories.tsx',
+]
+
+export default createConfig({ stories });

package/.storybook/preview.mts

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { preview } from '../../../../tools/storybook/.storybook/preview';
+
+export * from '../../../../tools/storybook/.storybook/preview';
+export default preview;

package/dist/lib/browser/{app-graph-builder-LYF7EKNN.mjs → app-graph-builder-77MY7KAY.mjs}

@@ -1,26 +1,27 @@
 import {
   SETTINGS_ID,
   SETTINGS_KEY,
-  SETTINGS_PLUGIN,
-  SettingsAction
-} from "./chunk-ORWHM7CO.mjs";
+  SettingsAction,
+  meta
+} from "./chunk-SCPE4ZO2.mjs";
 import {
   Capabilities,
   contributes,
   createIntent
-} from "./chunk-FMN65HSW.mjs";
+} from "./chunk-OKF2PAWO.mjs";
 
 // src/plugin-settings/app-graph-builder.ts
 import { Rx } from "@effect-rx/rx-react";
-import { Option, pipe } from "effect";
-import { createExtension, ROOT_ID } from "@dxos/app-graph";
+import * as Function from "effect/Function";
+import * as Option from "effect/Option";
+import { ROOT_ID, createExtension } from "@dxos/app-graph";
 import { isNonNullable } from "@dxos/util";
-var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBuilder, [
+var app_graph_builder_default = ((context) => contributes(Capabilities.AppGraphBuilder, [
   createExtension({
-    id: `${SETTINGS_PLUGIN}/action`,
-    actions: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => [
+    id: `${meta.id}/action`,
+    actions: (node) => Rx.make((get) => Function.pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => [
       {
-        id: SETTINGS_PLUGIN,
+        id: meta.id,
         data: async () => {
           const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
           await dispatch(createIntent(SettingsAction.Open));
@@ -29,7 +30,7 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
           label: [
             "open settings label",
             {
-              ns: SETTINGS_PLUGIN
+              ns: meta.id
             }
           ],
           icon: "ph--gear--regular",
@@ -43,16 +44,16 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
     ]), Option.getOrElse(() => [])))
   }),
   createExtension({
-    id: `${SETTINGS_PLUGIN}/core`,
-    connector: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => [
+    id: `${meta.id}/core`,
+    connector: (node) => Rx.make((get) => Function.pipe(get(node), Option.flatMap((node2) => node2.id === ROOT_ID ? Option.some(node2) : Option.none()), Option.map(() => [
       {
         id: SETTINGS_ID,
-        type: SETTINGS_PLUGIN,
+        type: meta.id,
         properties: {
           label: [
             "app settings label",
             {
-              ns: SETTINGS_PLUGIN
+              ns: meta.id
             }
           ],
           icon: "ph--gear--regular",
@@ -64,8 +65,8 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
     ]), Option.getOrElse(() => [])))
   }),
   createExtension({
-    id: `${SETTINGS_PLUGIN}/core-plugins`,
-    connector: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id !== SETTINGS_ID ? Option.none() : Option.some(node2)), Option.map(() => {
+    id: `${meta.id}/core-plugins`,
+    connector: (node) => Rx.make((get) => Function.pipe(get(node), Option.flatMap((node2) => node2.id !== SETTINGS_ID ? Option.none() : Option.some(node2)), Option.map(() => {
       const manager = get(context.capability(Capabilities.PluginManager));
       const [settingsStore] = get(context.capabilities(Capabilities.SettingsStore));
       return [
@@ -78,13 +79,13 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
             plugin.meta,
             settings
           ];
-        }).filter(isNonNullable).map(([meta, settings]) => ({
-          id: `${SETTINGS_KEY}:${meta.id.replaceAll("/", ":")}`,
+        }).filter(isNonNullable).map(([meta2, settings]) => ({
+          id: `${SETTINGS_KEY}:${meta2.id.replaceAll("/", ":")}`,
           type: "category",
           data: settings,
           properties: {
-            label: meta.name ?? meta.id,
-            icon: meta.icon ?? "ph--circle--regular"
+            label: meta2.name ?? meta2.id,
+            icon: meta2.icon ?? "ph--circle--regular"
           }
         })),
         {
@@ -94,7 +95,7 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
             label: [
               "custom plugins label",
               {
-                ns: SETTINGS_PLUGIN
+                ns: meta.id
               }
             ],
             icon: "ph--squares-four--regular",
@@ -106,8 +107,8 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
     }), Option.getOrElse(() => [])))
   }),
   createExtension({
-    id: `${SETTINGS_PLUGIN}/custom-plugins`,
-    connector: (node) => Rx.make((get) => pipe(get(node), Option.flatMap((node2) => node2.id !== `${SETTINGS_KEY}:custom-plugins` ? Option.none() : Option.some(node2)), Option.map(() => {
+    id: `${meta.id}/custom-plugins`,
+    connector: (node) => Rx.make((get) => Function.pipe(get(node), Option.flatMap((node2) => node2.id !== `${SETTINGS_KEY}:custom-plugins` ? Option.none() : Option.some(node2)), 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) => {
@@ -119,19 +120,19 @@ var app_graph_builder_default = (context) => contributes(Capabilities.AppGraphBu
           plugin.meta,
           settings
         ];
-      }).filter(isNonNullable).map(([meta, settings]) => ({
-        id: `${SETTINGS_KEY}:${meta.id.replaceAll("/", ":")}`,
+      }).filter(isNonNullable).map(([meta2, settings]) => ({
+        id: `${SETTINGS_KEY}:${meta2.id.replaceAll("/", ":")}`,
         type: "category",
         data: settings,
         properties: {
-          label: meta.name ?? meta.id,
-          icon: meta.icon ?? "ph--circle--regular"
+          label: meta2.name ?? meta2.id,
+          icon: meta2.icon ?? "ph--circle--regular"
         }
       }));
     }), Option.getOrElse(() => [])))
   })
-]);
+]));
 export {
   app_graph_builder_default as default
 };
-//# sourceMappingURL=app-graph-builder-LYF7EKNN.mjs.map
+//# sourceMappingURL=app-graph-builder-77MY7KAY.mjs.map

package/dist/lib/browser/app-graph-builder-77MY7KAY.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/plugin-settings/app-graph-builder.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Rx } from '@effect-rx/rx-react';\nimport * as Function from 'effect/Function';\nimport * as Option from 'effect/Option';\n\nimport { ROOT_ID, createExtension } from '@dxos/app-graph';\nimport { type SettingsStore, type SettingsValue } from '@dxos/local-storage';\nimport { isNonNullable } from '@dxos/util';\n\nimport { Capabilities } from '../common';\nimport { type PluginContext, type PluginMeta, contributes } from '../core';\nimport { createIntent } from '../plugin-intent';\n\nimport { SETTINGS_ID, SETTINGS_KEY, SettingsAction } from './actions';\nimport { meta } from './meta';\n\nexport default (context: PluginContext) =>\n  contributes(Capabilities.AppGraphBuilder, [\n    createExtension({\n      id: `${meta.id}/action`,\n      actions: (node) =>\n        Rx.make((get) =>\n          Function.pipe(\n            get(node),\n            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),\n            Option.map(() => [\n              {\n                id: meta.id,\n                data: async () => {\n                  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);\n                  await dispatch(createIntent(SettingsAction.Open));\n                },\n                properties: {\n                  label: ['open settings label', { ns: meta.id }],\n                  icon: 'ph--gear--regular',\n                  disposition: 'menu',\n                  keyBinding: {\n                    macos: 'meta+,',\n                    windows: 'alt+,',\n                  },\n                },\n              },\n            ]),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n    createExtension({\n      id: `${meta.id}/core`,\n      connector: (node) =>\n        Rx.make((get) =>\n          Function.pipe(\n            get(node),\n            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),\n            Option.map(() => [\n              {\n                id: SETTINGS_ID,\n                type: meta.id,\n                properties: {\n                  label: ['app settings label', { ns: meta.id }],\n                  icon: 'ph--gear--regular',\n                  disposition: 'pin-end',\n                  position: 'hoist',\n                  testId: 'treeView.appSettings',\n                },\n              },\n            ]),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n    createExtension({\n      id: `${meta.id}/core-plugins`,\n      connector: (node) =>\n        Rx.make((get) =>\n          Function.pipe(\n            get(node),\n            Option.flatMap((node) => (node.id !== SETTINGS_ID ? Option.none() : Option.some(node))),\n            Option.map(() => {\n              const manager = get(context.capability(Capabilities.PluginManager));\n              const [settingsStore] = get(context.capabilities(Capabilities.SettingsStore));\n              return [\n                ...manager.plugins\n                  .filter((plugin) => manager.core.includes(plugin.meta.id))\n                  .map((plugin): [PluginMeta, SettingsStore<SettingsValue>] | null => {\n                    const settings = settingsStore?.getStore(plugin.meta.id);\n                    if (!settings) {\n                      return null;\n                    }\n\n                    return [plugin.meta, settings];\n                  })\n                  .filter(isNonNullable)\n                  .map(([meta, settings]) => ({\n                    id: `${SETTINGS_KEY}:${meta.id.replaceAll('/', ':')}`,\n                    type: 'category',\n                    data: settings,\n                    properties: {\n                      label: meta.name ?? meta.id,\n                      icon: meta.icon ?? 'ph--circle--regular',\n                    },\n                  })),\n\n                {\n                  id: `${SETTINGS_KEY}:custom-plugins`,\n                  type: 'category',\n                  properties: {\n                    label: ['custom plugins label', { ns: meta.id }],\n                    icon: 'ph--squares-four--regular',\n                    role: 'branch',\n                    disposition: 'collection',\n                  },\n                },\n              ];\n            }),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n    createExtension({\n      id: `${meta.id}/custom-plugins`,\n      connector: (node) =>\n        Rx.make((get) =>\n          Function.pipe(\n            get(node),\n            Option.flatMap((node) =>\n              node.id !== `${SETTINGS_KEY}:custom-plugins` ? Option.none() : Option.some(node),\n            ),\n            Option.map(() => {\n              const manager = get(context.capability(Capabilities.PluginManager));\n              const [settingsStore] = get(context.capabilities(Capabilities.SettingsStore));\n              return manager.plugins\n                .filter((plugin) => !manager.core.includes(plugin.meta.id))\n                .map((plugin): [PluginMeta, SettingsStore<SettingsValue>] | null => {\n                  const settings = settingsStore?.getStore(plugin.meta.id);\n                  if (!settings) {\n                    return null;\n                  }\n\n                  return [plugin.meta, settings];\n                })\n                .filter(isNonNullable)\n                .map(([meta, settings]) => ({\n                  id: `${SETTINGS_KEY}:${meta.id.replaceAll('/', ':')}`,\n                  type: 'category',\n                  data: settings,\n                  properties: {\n                    label: meta.name ?? meta.id,\n                    icon: meta.icon ?? 'ph--circle--regular',\n                  },\n                }));\n            }),\n            Option.getOrElse(() => []),\n          ),\n        ),\n    }),\n  ]);\n"],
+  "mappings": "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",
+  "names": ["Rx", "Function", "Option", "ROOT_ID", "createExtension", "isNonNullable", "context", "contributes", "Capabilities", "AppGraphBuilder", "createExtension", "id", "meta", "actions", "node", "Rx", "make", "get", "pipe", "flatMap", "ROOT_ID", "some", "none", "map", "data", "dispatchPromise", "dispatch", "getCapability", "IntentDispatcher", "createIntent", "SettingsAction", "Open", "properties", "label", "ns", "icon", "disposition", "keyBinding", "macos", "windows", "getOrElse", "connector", "SETTINGS_ID", "type", "position", "testId", "manager", "capability", "PluginManager", "settingsStore", "capabilities", "SettingsStore", "plugins", "filter", "plugin", "core", "includes", "settings", "getStore", "isNonNullable", "SETTINGS_KEY", "replaceAll", "name", "role"]
+}

package/dist/lib/browser/{chunk-FO2PH7M3.mjs → chunk-4NFLRSTX.mjs}

@@ -2,7 +2,7 @@ import {
   Capabilities,
   Events,
   PluginManager
-} from "./chunk-FMN65HSW.mjs";
+} from "./chunk-OKF2PAWO.mjs";
 
 // src/react/PluginManagerProvider.ts
 import { createContext, useContext } from "react";
@@ -23,7 +23,7 @@ var useCapability = (interfaceDef) => {
   const capabilities = useCapabilities(interfaceDef);
   invariant(capabilities.length > 0, `No capability found for ${interfaceDef.identifier}`, {
     F: __dxlog_file,
-    L: 28,
+    L: 29,
     S: void 0,
     A: [
       "capabilities.length > 0",
@@ -39,14 +39,22 @@ var useAppGraph = () => useCapability(Capabilities.AppGraph);
 var useLayout = () => useCapability(Capabilities.Layout);
 
 // src/react/ErrorBoundary.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { Component } from "react";
-var ErrorBoundary = class extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      error: void 0
-    };
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
+  return obj;
+}
+var ErrorBoundary = class extends Component {
   static getDerivedStateFromError(error) {
     return {
       error
@@ -59,10 +67,10 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ React.createElement(this.props.fallback, {
+      const Fallback = this.props.fallback ?? DefaultFallback;
+      return /* @__PURE__ */ React.createElement(Fallback, {
         data: this.props.data,
-        error: this.state.error,
-        reset: this.resetError
+        error: this.state.error
       });
     }
     return this.props.children;
@@ -72,11 +80,30 @@ var ErrorBoundary = class extends Component {
       error: void 0
     });
   }
+  constructor(...args) {
+    super(...args), _define_property(this, "state", {
+      error: void 0
+    });
+  }
+};
+var DefaultFallback = ({ data, error }) => {
+  var _effect = _useSignals();
+  try {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "flex flex-col gap-2 overflow-hidden border border-red-500 rounded-sm"
+    }, /* @__PURE__ */ React.createElement("h1", {
+      className: "p-2"
+    }, "ERROR: ", error.message), /* @__PURE__ */ React.createElement("pre", {
+      className: "p-2 overflow-y-auto text-sm text-subdued"
+    }, JSON.stringify(data, null, 2)));
+  } finally {
+    _effect.f();
+  }
 };
 
 // src/react/Surface.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React2, { memo, forwardRef, Suspense, useMemo, Fragment } from "react";
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import React2, { Fragment, Suspense, forwardRef, memo, useMemo } from "react";
 import { useDefaultValue } from "@dxos/react-hooks";
 import { byPosition } from "@dxos/util";
 var DEFAULT_PLACEHOLDER = /* @__PURE__ */ React2.createElement(Fragment, null);
@@ -98,7 +125,7 @@ var isSurfaceAvailable = (context, { role, data }) => {
   return candidates.length > 0;
 };
 var Surface = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ id: _id, role, data: _data, limit, fallback, placeholder = DEFAULT_PLACEHOLDER, ...rest }, forwardedRef) => {
-  var _effect = _useSignals();
+  var _effect = _useSignals2();
   try {
     const surfaces = useSurfaces();
     const data = useDefaultValue(_data, () => ({}));
@@ -146,14 +173,17 @@ var useIntentResolver = (module, resolver) => {
   ]);
 };
 
-// src/App.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+// src/components/useApp.tsx
 import { RegistryContext } from "@effect-rx/rx-react";
 import { effect } from "@preact/signals-core";
-import React3, { useCallback, useEffect as useEffect2, useMemo as useMemo2, useState } from "react";
+import React5, { useCallback, useEffect as useEffect3, useMemo as useMemo2 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { live } from "@dxos/live-object";
-import { useDefaultValue as useDefaultValue2 } from "@dxos/react-hooks";
+import { useAsyncEffect, useDefaultValue as useDefaultValue2 } from "@dxos/react-hooks";
+
+// src/components/App.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3 from "react";
 
 // src/helpers.ts
 var topologicalSort = (nodes) => {
@@ -186,10 +216,125 @@ var topologicalSort = (nodes) => {
   return allDependencies.map((id) => nodes.find((node) => node.id === id)).filter((node) => node !== void 0);
 };
 
-// src/App.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/sdk/app-framework/src/App.tsx";
+// src/components/useLoading.tsx
+import { useEffect as useEffect2, useState } from "react";
+var LoadingState = /* @__PURE__ */ (function(LoadingState2) {
+  LoadingState2[LoadingState2["Loading"] = 0] = "Loading";
+  LoadingState2[LoadingState2["FadeIn"] = 1] = "FadeIn";
+  LoadingState2[LoadingState2["FadeOut"] = 2] = "FadeOut";
+  LoadingState2[LoadingState2["Done"] = 3] = "Done";
+  return LoadingState2;
+})({});
+var useLoading = (state, debounce = 0) => {
+  const [stage, setStage] = useState(0);
+  useEffect2(() => {
+    if (!debounce) {
+      return;
+    }
+    const i = setInterval(() => {
+      setStage((stage2) => {
+        switch (stage2) {
+          case 0: {
+            if (!state.ready) {
+              return 1;
+            } else {
+              clearInterval(i);
+              return 3;
+            }
+          }
+          case 1: {
+            if (state.ready) {
+              return 2;
+            }
+            break;
+          }
+          case 2: {
+            clearInterval(i);
+            return 3;
+          }
+        }
+        return stage2;
+      });
+    }, debounce);
+    return () => clearInterval(i);
+  }, [
+    debounce
+  ]);
+  if (!debounce) {
+    return state.ready ? 3 : 0;
+  }
+  return stage;
+};
+
+// src/components/App.tsx
+var App = ({ placeholder: Placeholder, state, debounce }) => {
+  var _effect = _useSignals3();
+  try {
+    const reactContexts = useCapabilities(Capabilities.ReactContext);
+    const reactRoots = useCapabilities(Capabilities.ReactRoot);
+    const stage = useLoading(state, debounce);
+    if (state.error) {
+      throw state.error;
+    }
+    if (stage < LoadingState.Done) {
+      if (!Placeholder) {
+        return null;
+      }
+      return /* @__PURE__ */ React3.createElement(Placeholder, {
+        stage
+      });
+    }
+    const ComposedContext = composeContexts(reactContexts);
+    return /* @__PURE__ */ React3.createElement(ComposedContext, null, reactRoots.map(({ id, root: Component2 }) => /* @__PURE__ */ React3.createElement(Component2, {
+      key: id
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var composeContexts = (contexts) => {
+  if (contexts.length === 0) {
+    return ({ children }) => /* @__PURE__ */ React3.createElement(React3.Fragment, null, children);
+  }
+  return topologicalSort(contexts).map(({ context }) => context).reduce((Acc, Next) => ({ children }) => /* @__PURE__ */ React3.createElement(Acc, null, /* @__PURE__ */ React3.createElement(Next, null, children)));
+};
+
+// src/components/DefaultFallback.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+import React4 from "react";
+var DefaultFallback2 = ({ error }) => {
+  var _effect = _useSignals4();
+  try {
+    return /* @__PURE__ */ React4.createElement("div", {
+      style: {
+        margin: "1rem",
+        padding: "1rem",
+        overflow: "hidden",
+        border: "4px solid teal",
+        borderRadius: "1rem"
+      }
+    }, /* @__PURE__ */ React4.createElement("h1", {
+      style: {
+        margin: "0.5rem 0",
+        fontSize: "1.2rem"
+      }
+    }, "[ERROR]: ", error.message), /* @__PURE__ */ React4.createElement("pre", {
+      style: {
+        overflow: "auto",
+        fontSize: "1rem",
+        whiteSpace: "pre-wrap",
+        color: "#888888"
+      }
+    }, error.stack));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/useApp.tsx
+var __dxlog_file2 = "/__w/dxos/dxos/packages/sdk/app-framework/src/components/useApp.tsx";
 var ENABLED_KEY = "dxos.org/app-framework/enabled";
-var useApp = ({ pluginManager, pluginLoader: _pluginLoader, plugins: _plugins, core: _core, defaults: _defaults, placeholder, fallback = DefaultFallback, cacheEnabled = false, safeMode = false }) => {
+var useApp = ({ pluginManager, pluginLoader: _pluginLoader, plugins: _plugins, core: _core, defaults: _defaults, placeholder, fallback = DefaultFallback2, cacheEnabled = false, safeMode = false, debounce = 0 }) => {
   const plugins = useDefaultValue2(_plugins, () => []);
   const core = useDefaultValue2(_core, () => plugins.map(({ meta }) => meta.id));
   const defaults = useDefaultValue2(_defaults, () => []);
@@ -197,7 +342,7 @@ var useApp = ({ pluginManager, pluginLoader: _pluginLoader, plugins: _plugins, c
     const plugin = plugins.find((plugin2) => plugin2.meta.id === id);
     invariant2(plugin, `Plugin not found: ${id}`, {
       F: __dxlog_file2,
-      L: 78,
+      L: 82,
       S: void 0,
       A: [
         "plugin",
@@ -232,7 +377,7 @@ var useApp = ({ pluginManager, pluginLoader: _pluginLoader, plugins: _plugins, c
     core,
     enabled
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     return manager.activation.on(({ event, state: _state, error }) => {
       if (!state.ready && event === Events.Startup.id) {
         state.ready = _state === "activated";
@@ -245,7 +390,7 @@ var useApp = ({ pluginManager, pluginLoader: _pluginLoader, plugins: _plugins, c
     manager,
     state
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     effect(() => {
       cacheEnabled && localStorage.setItem(ENABLED_KEY, JSON.stringify(manager.enabled));
     });
@@ -253,7 +398,12 @@ var useApp = ({ pluginManager, pluginLoader: _pluginLoader, plugins: _plugins, c
     cacheEnabled,
     manager
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
+    setupDevtools(manager);
+  }, [
+    manager
+  ]);
+  useAsyncEffect(async () => {
     manager.context.contributeCapability({
       interface: Capabilities.PluginManager,
       implementation: manager,
@@ -264,6 +414,11 @@ var useApp = ({ pluginManager, pluginLoader: _pluginLoader, plugins: _plugins, c
       implementation: manager.registry,
       module: "dxos.org/app-framework/rx-registry"
     });
+    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 () => {
       manager.context.removeCapability(Capabilities.PluginManager, manager);
       manager.context.removeCapability(Capabilities.RxRegistry, manager.registry);
@@ -271,32 +426,16 @@ var useApp = ({ pluginManager, pluginLoader: _pluginLoader, plugins: _plugins, c
   }, [
     manager
   ]);
-  useEffect2(() => {
-    setupDevtools(manager);
-  }, [
-    manager
-  ]);
-  useEffect2(() => {
-    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(() => /* @__PURE__ */ React3.createElement(ErrorBoundary, {
+  return useCallback(() => /* @__PURE__ */ React5.createElement(ErrorBoundary, {
     fallback
-  }, /* @__PURE__ */ React3.createElement(PluginManagerProvider, {
+  }, /* @__PURE__ */ React5.createElement(PluginManagerProvider, {
     value: manager
-  }, /* @__PURE__ */ React3.createElement(RegistryContext.Provider, {
+  }, /* @__PURE__ */ React5.createElement(RegistryContext.Provider, {
     value: manager.registry
-  }, /* @__PURE__ */ React3.createElement(App, {
+  }, /* @__PURE__ */ React5.createElement(App, {
     placeholder,
-    state
+    state,
+    debounce
   })))), [
     fallback,
     manager,
@@ -304,96 +443,9 @@ var useApp = ({ pluginManager, pluginLoader: _pluginLoader, plugins: _plugins, c
     state
   ]);
 };
-var DELAY_PLACEHOLDER = 2e3;
-var useLoading = (state) => {
-  const [stage, setStage] = useState(0);
-  useEffect2(() => {
-    const i = setInterval(() => {
-      setStage((tick) => {
-        switch (tick) {
-          case 0:
-            if (!state.ready) {
-              return 1;
-            } else {
-              clearInterval(i);
-              return 3;
-            }
-          case 1:
-            if (state.ready) {
-              return 2;
-            }
-            break;
-          case 2:
-            clearInterval(i);
-            return 3;
-        }
-        return tick;
-      });
-    }, DELAY_PLACEHOLDER);
-    return () => clearInterval(i);
-  }, []);
-  return stage;
-};
-var App = ({ placeholder: Placeholder, state }) => {
-  var _effect = _useSignals2();
-  try {
-    const reactContexts = useCapabilities(Capabilities.ReactContext);
-    const reactRoots = useCapabilities(Capabilities.ReactRoot);
-    const stage = useLoading(state);
-    if (state.error) {
-      throw state.error;
-    }
-    if (stage < 3) {
-      if (!Placeholder) {
-        return null;
-      }
-      return /* @__PURE__ */ React3.createElement(Placeholder, {
-        stage
-      });
-    }
-    const ComposedContext = composeContexts(reactContexts);
-    return /* @__PURE__ */ React3.createElement(ComposedContext, null, reactRoots.map(({ id, root: Component2 }) => /* @__PURE__ */ React3.createElement(Component2, {
-      key: id
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-var DefaultFallback = ({ error }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React3.createElement("div", {
-      style: {
-        margin: "0.5rem",
-        padding: "1rem",
-        overflow: "hidden",
-        border: "1px solid red"
-      }
-    }, /* @__PURE__ */ React3.createElement("h1", {
-      style: {
-        margin: "0.5rem 0",
-        fontSize: "1.2rem"
-      }
-    }, "[ERROR]: ", error.message), /* @__PURE__ */ React3.createElement("pre", {
-      style: {
-        overflow: "auto",
-        fontSize: "1rem",
-        whiteSpace: "pre-wrap",
-        color: "#888888"
-      }
-    }, error.stack));
-  } finally {
-    _effect.f();
-  }
-};
-var composeContexts = (contexts) => {
-  if (contexts.length === 0) {
-    return ({ children }) => /* @__PURE__ */ React3.createElement(React3.Fragment, null, children);
-  }
-  return topologicalSort(contexts).map(({ context }) => context).reduce((Acc, Next) => ({ children }) => /* @__PURE__ */ React3.createElement(Acc, null, /* @__PURE__ */ React3.createElement(Next, null, children)));
-};
 var setupDevtools = (manager) => {
-  globalThis.composer ??= {};
+  var _globalThis;
+  (_globalThis = globalThis).composer ?? (_globalThis.composer = {});
   globalThis.composer.manager = manager;
 };
 
@@ -412,4 +464,4 @@ export {
   useIntentResolver,
   useApp
 };
-//# sourceMappingURL=chunk-FO2PH7M3.mjs.map
+//# sourceMappingURL=chunk-4NFLRSTX.mjs.map