@dxos/app-framework 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/dist/lib/browser/{chunk-XYNO72GQ.mjs → chunk-C46IKYBD.mjs}

@@ -2,89 +2,93 @@ import {
   PluginManagerContext
 } from "./chunk-FHQTHCX7.mjs";
 import {
-  ActivationEvent,
-  Capability
-} from "./chunk-BLQJSGL3.mjs";
+  capabilities_exports
+} from "./chunk-IGRQWMWW.mjs";
+import {
+  activation_events_exports
+} from "./chunk-NPUEVX42.mjs";
 import {
   plugin_manager_exports
-} from "./chunk-FMZN33N4.mjs";
-
-// src/react/common.ts
-import { RegistryContext, useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
-import { useCallback as useCallback2, useContext as useContext2 } from "react";
-
-// src/react/useCapabilities.ts
-import { useAtomValue } from "@effect-atom/atom-react";
-import { useCallback } from "react";
-import { invariant } from "@dxos/invariant";
+} from "./chunk-WGWEEBUV.mjs";
+import {
+  __export
+} from "./chunk-J5LGTIGS.mjs";
 
-// src/react/PluginManagerProvider.ts
-import { createContext, useContext } from "react";
-import { raise } from "@dxos/debug";
-var PluginManagerContext2 = createContext(void 0);
-var usePluginManager = () => useContext(PluginManagerContext2) ?? raise(new Error("Missing PluginManagerContext"));
-var PluginManagerProvider = PluginManagerContext2.Provider;
+// src/ui/components/App.tsx
+import React4 from "react";
 
-// src/react/useCapabilities.ts
-var __dxlog_file = "/__w/dxos/dxos/packages/sdk/app-framework/src/react/useCapabilities.ts";
-var useCapabilities = (interfaceDef) => {
-  const manager = usePluginManager();
-  return useAtomValue(manager.capabilities.atom(interfaceDef));
-};
-var useCapability = (interfaceDef) => {
-  const capabilities = useCapabilities(interfaceDef);
-  invariant(capabilities.length > 0, `No capability found for ${interfaceDef.identifier}`, {
-    F: __dxlog_file,
-    L: 31,
-    S: void 0,
-    A: [
-      "capabilities.length > 0",
-      "`No capability found for ${interfaceDef.identifier}`"
-    ]
-  });
-  return capabilities[0];
-};
-var useAtomCapability = (atomCapability) => {
-  const atom = useCapability(atomCapability);
-  return useAtomValue(atom);
-};
-var useAtomCapabilityState = (atomCapability) => {
-  const registry = useCapability(Capability.AtomRegistry);
-  const atom = useCapability(atomCapability);
-  const value = useAtomValue(atom);
-  const update = useCallback((fn) => {
-    registry.set(atom, fn(registry.get(atom)));
-  }, [
-    registry,
-    atom
-  ]);
-  return [
-    value,
-    update
-  ];
+// src/helpers.ts
+var topologicalSort = (nodes) => {
+  const getDependencies = (nodeId, seen = /* @__PURE__ */ new Set(), path = /* @__PURE__ */ new Set()) => {
+    if (path.has(nodeId)) {
+      throw new Error(`Circular dependency detected involving ${nodeId}`);
+    }
+    if (seen.has(nodeId)) {
+      return [];
+    }
+    const node = nodes.find((n) => n.id === nodeId);
+    if (!node) {
+      throw new Error(`Node ${nodeId} not found but is listed as a dependency`);
+    }
+    const newPath = /* @__PURE__ */ new Set([
+      ...path,
+      nodeId
+    ]);
+    const newSeen = /* @__PURE__ */ new Set([
+      ...seen,
+      nodeId
+    ]);
+    const dependsOn = node.dependsOn ?? [];
+    return [
+      ...dependsOn.flatMap((depId) => getDependencies(depId, newSeen, newPath)),
+      nodeId
+    ];
+  };
+  const allDependencies = nodes.map((node) => node.id).flatMap((id) => getDependencies(id)).filter((id, index, self) => self.indexOf(id) === index);
+  return allDependencies.map((id) => nodes.find((node) => node.id === id)).filter((node) => node !== void 0);
 };
 
-// src/react/common.ts
-var useOperationInvoker = () => useCapability(Capability.OperationInvoker);
-var useAppGraph = () => useCapability(Capability.AppGraph);
-var useLayout = () => useAtomCapability(Capability.Layout);
-var useSettingsState = (atom) => {
-  const registry = useContext2(RegistryContext);
-  const settings = useAtomValue2(atom);
-  const updateSettings = useCallback2((fn) => {
-    registry.set(atom, fn(registry.get(atom)));
-  }, [
-    registry,
-    atom
-  ]);
-  return {
-    settings,
-    updateSettings
-  };
+// src/ui/hooks/useApp.tsx
+import { RegistryContext } from "@effect-atom/atom-react";
+import * as Effect from "effect/Effect";
+import * as Fiber from "effect/Fiber";
+import * as PubSub from "effect/PubSub";
+import * as Queue from "effect/Queue";
+import React3, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { runAndForwardErrors } from "@dxos/effect";
+import { invariant } from "@dxos/invariant";
+import { log } from "@dxos/log";
+import { useAsyncEffect, useDefaultValue } from "@dxos/react-hooks";
+import { ContextProtocolProvider } from "@dxos/web-context-react";
+
+// src/ui/components/DefaultFallback.tsx
+import React from "react";
+var DefaultFallback = ({ error }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    style: {
+      margin: "1rem",
+      padding: "1rem",
+      overflow: "hidden",
+      border: "4px solid teal",
+      borderRadius: "1rem"
+    }
+  }, /* @__PURE__ */ React.createElement("h1", {
+    style: {
+      margin: "0.5rem 0",
+      fontSize: "1.2rem"
+    }
+  }, "ERROR: ", error.message), /* @__PURE__ */ React.createElement("pre", {
+    style: {
+      overflow: "auto",
+      fontSize: "1rem",
+      whiteSpace: "pre-wrap",
+      color: "#888888"
+    }
+  }, error.stack));
 };
 
-// src/react/ErrorBoundary.tsx
-import React, { Component } from "react";
+// src/ui/components/ErrorBoundary.tsx
+import React2, { Component } from "react";
 var ErrorBoundary = class extends Component {
   static getDerivedStateFromError(error) {
     return {
@@ -101,8 +105,8 @@ var ErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.error) {
-      const Fallback = this.props.fallback ?? DefaultFallback;
-      return /* @__PURE__ */ React.createElement(Fallback, {
+      const Fallback = this.props.fallback ?? DefaultFallback2;
+      return /* @__PURE__ */ React2.createElement(Fallback, {
         data: this.props.data,
         error: this.state.error
       });
@@ -115,345 +119,213 @@ var ErrorBoundary = class extends Component {
     });
   }
 };
-var DefaultFallback = ({ data, error }) => {
-  return /* @__PURE__ */ React.createElement("div", {
+var DefaultFallback2 = ({ data, error }) => {
+  return /* @__PURE__ */ React2.createElement("div", {
     className: "flex flex-col gap-2 overflow-hidden border border-red-500 rounded-sm"
-  }, /* @__PURE__ */ React.createElement("h1", {
+  }, /* @__PURE__ */ React2.createElement("h1", {
     className: "p-2"
-  }, "ERROR: ", error.message), /* @__PURE__ */ React.createElement("pre", {
+  }, "ERROR: ", error.message), /* @__PURE__ */ React2.createElement("pre", {
     className: "p-2 overflow-y-auto text-sm text-subdued"
   }, JSON.stringify(data, null, 2)));
 };
 
-// src/react/Surface.tsx
-import React3, { Fragment, Suspense, createContext as createContext2, forwardRef as forwardRef2, memo, useContext as useContext3, useEffect, useMemo, useRef } from "react";
-import { raise as raise2 } from "@dxos/debug";
-import { log } from "@dxos/log";
-import { useDefaultValue } from "@dxos/react-hooks";
-import { byPosition } from "@dxos/util";
+// src/ui/components/PluginManagerProvider.ts
+import { createContext, useContext } from "react";
+import { raise } from "@dxos/debug";
+var PluginManagerContext2 = createContext(void 0);
+var usePluginManager = () => useContext(PluginManagerContext2) ?? raise(new Error("Missing PluginManagerContext"));
+var PluginManagerProvider = PluginManagerContext2.Provider;
 
-// src/react/SurfaceInfo.tsx
-import React2, { cloneElement, forwardRef, useCallback as useCallback3, useLayoutEffect, useState } from "react";
-import { createPortal } from "react-dom";
-import { addEventListener, combine } from "@dxos/async";
-import { useMergeRefs } from "@dxos/react-hooks";
-var SurfaceInfo = /* @__PURE__ */ forwardRef(({ children }, forwardedRef) => {
-  const [rect, setRect] = useState(null);
-  const [expand, setExpand] = useState(false);
-  const info = useSurface();
-  const [root, setRoot] = useState(null);
-  const measureRef = useCallback3((node) => setRoot(node), []);
-  const mergedRef = useMergeRefs([
-    measureRef,
-    forwardedRef
+// src/ui/hooks/useApp.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/sdk/app-framework/src/ui/hooks/useApp.tsx";
+var ENABLED_KEY = "dxos.org/app-framework/enabled";
+var useApp = ({ pluginManager, pluginLoader: pluginLoaderProp, plugins: pluginsProp, core: coreProp, defaults: defaultsProp, setupEvents: setupEventsProp, placeholder, fallback = DefaultFallback, cacheEnabled = false, safeMode = false, debounce = 0, timeout = 3e4 }) => {
+  const plugins = useDefaultValue(pluginsProp, () => []);
+  const core = useDefaultValue(coreProp, () => plugins.map(({ meta }) => meta.id));
+  const defaults = useDefaultValue(defaultsProp, () => []);
+  const setupEvents = useDefaultValue(setupEventsProp, () => []);
+  const pluginLoader = useMemo(() => pluginLoaderProp ?? ((id) => Effect.sync(() => {
+    const plugin = plugins.find((plugin2) => plugin2.meta.id === id);
+    invariant(plugin, `Plugin not found: ${id}`, {
+      F: __dxlog_file,
+      L: 98,
+      S: void 0,
+      A: [
+        "plugin",
+        "`Plugin not found: ${id}`"
+      ]
+    });
+    return plugin;
+  })), [
+    pluginLoaderProp,
+    plugins
   ]);
-  const childWithRef = /* @__PURE__ */ cloneElement(children, {
-    ref: mergedRef
-  });
-  useLayoutEffect(() => {
-    if (!root) {
-      setRect(null);
+  const readyRef = useRef(false);
+  const [ready, setReady] = useState(false);
+  const errorRef = useRef(null);
+  const [error, setError] = useState(null);
+  const cached = useMemo(() => JSON.parse(localStorage.getItem(ENABLED_KEY) ?? "[]"), []);
+  const enabled = useMemo(() => safeMode ? [] : cacheEnabled && cached.length > 0 ? cached : defaults, [
+    safeMode,
+    cacheEnabled,
+    cached,
+    defaults
+  ]);
+  const manager = useMemo(() => pluginManager ?? plugin_manager_exports.make({
+    pluginLoader,
+    plugins,
+    core,
+    enabled
+  }), [
+    pluginManager,
+    pluginLoader,
+    plugins,
+    core,
+    enabled
+  ]);
+  useEffect(() => {
+    if (!cacheEnabled) {
       return;
     }
-    const measure = () => {
-      setRect(root.getBoundingClientRect());
-    };
-    const observer = new ResizeObserver(measure);
-    observer.observe(root);
-    measure();
-    return combine(addEventListener(window, "scroll", measure, true), addEventListener(window, "resize", measure), () => {
-      observer.disconnect();
+    return manager.registry.subscribe(manager.enabled, (value) => {
+      localStorage.setItem(ENABLED_KEY, JSON.stringify(value));
     });
   }, [
-    root
+    cacheEnabled,
+    manager
   ]);
-  const padding = 0;
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, childWithRef, rect && /* @__PURE__ */ createPortal(
-    /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: "z-[100] fixed flex flex-col-reverse scrollbar-none overflow-auto pointer-events-none",
-      style: {
-        top: rect.top + padding,
-        left: rect.left + padding,
-        width: rect.width - padding * 2,
-        height: rect.height - padding * 2
-      }
-    }, expand ? /* @__PURE__ */ React2.createElement("div", {
-      className: "absolute inset-0 bg-deckSurface border border-green-500 cursor-pointer pointer-events-auto overflow-auto",
-      onPointerDown: (ev) => ev.stopPropagation(),
-      onClick: (ev) => {
-        ev.stopPropagation();
-        setExpand(false);
-      }
-    }, /* @__PURE__ */ React2.createElement("pre", {
-      className: "p-2 text-xs text-description font-mono"
-    }, JSON.stringify({
-      info
-    }, null, 2))) : /* @__PURE__ */ React2.createElement("span", {
-      className: "absolute right-1 bottom-0 flex items-center p-1 text-green-500 opacity-80 hover:opacity-100 text-xl cursor-pointer pointer-events-auto",
-      title: info.id,
-      onPointerDown: (ev) => ev.stopPropagation(),
-      onClick: (ev) => {
-        ev.stopPropagation();
-        setExpand(true);
-      }
-    }, "\u24D8")),
-    // TODO(burdon): Create well-known element to gather all debug portals.
-    document.body
-  ));
-});
-
-// src/react/Surface.tsx
-var __dxlog_file2 = "/__w/dxos/dxos/packages/sdk/app-framework/src/react/Surface.tsx";
-var DEFAULT_PLACEHOLDER = /* @__PURE__ */ React3.createElement(Fragment, null);
-var DEBUG = import.meta.env.VITE_DEBUG;
-var SurfaceContext = /* @__PURE__ */ createContext2(void 0);
-var WebComponentWrapper = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ id, role, data, limit, definition, ...rest }, forwardedRef) => {
-  const containerRef = useRef(null);
-  const elementRef = useRef(null);
-  const propsRef = useRef({
-    id,
-    role,
-    data,
-    limit,
-    ...rest
-  });
-  propsRef.current = {
-    id,
-    role,
-    data,
-    limit,
-    ...rest
-  };
   useEffect(() => {
-    if (!containerRef.current || elementRef.current) return;
-    const element = document.createElement(definition.tagName);
-    elementRef.current = element;
-    Object.assign(element, propsRef.current);
-    containerRef.current.appendChild(element);
-    if (typeof forwardedRef === "function") {
-      forwardedRef(element);
-    } else if (forwardedRef) {
-      forwardedRef.current = element;
-    }
-    return () => {
-      if (elementRef.current && containerRef.current?.contains(elementRef.current)) {
-        containerRef.current.removeChild(elementRef.current);
-      }
-      if (typeof forwardedRef === "function") {
-        forwardedRef(null);
-      } else if (forwardedRef) {
-        forwardedRef.current = null;
-      }
-      elementRef.current = null;
-    };
+    setupDevtools(manager);
   }, [
-    definition.tagName,
-    forwardedRef
+    manager
   ]);
-  useEffect(() => {
-    const element = elementRef.current;
-    if (!element) return;
-    Object.assign(element, propsRef.current);
-  });
-  return /* @__PURE__ */ React3.createElement("div", {
-    ref: containerRef
-  });
-}));
-WebComponentWrapper.displayName = "WebComponentWrapper";
-var SurfaceContextProvider = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ id, role, data, limit, fallback = DefaultFallback2, definition, ...rest }, forwardedRef) => {
-  const contextValue = useMemo(() => ({
-    id,
-    role,
-    data
-  }), [
-    id,
-    role,
-    data
+  useAsyncEffect(async () => {
+    manager.capabilities.contribute({
+      interface: capabilities_exports.PluginManager,
+      implementation: manager,
+      module: "dxos.org/app-framework/plugin-manager"
+    });
+    manager.capabilities.contribute({
+      interface: capabilities_exports.AtomRegistry,
+      implementation: manager.registry,
+      module: "dxos.org/app-framework/atom-registry"
+    });
+    const fiber = Effect.gen(function* () {
+      const queue = yield* PubSub.subscribe(manager.activation);
+      const listener = yield* Effect.forkDaemon(Queue.take(queue).pipe(Effect.tap(({ event, state, error: error$ }) => Effect.sync(() => {
+        if (event === activation_events_exports.Startup.id && state === "activated") {
+          clearTimeout(timeoutId);
+          setReady(true);
+          readyRef.current = true;
+        }
+        if (error$ && !readyRef.current) {
+          setError(error$);
+          errorRef.current = error$;
+        }
+      })), Effect.forever));
+      yield* Effect.all([
+        ...setupEvents.map((event) => manager.activate(event)),
+        manager.activate(activation_events_exports.SetupReactSurface),
+        manager.activate(activation_events_exports.Startup)
+      ]);
+      return yield* Fiber.join(listener);
+    }).pipe(Effect.scoped, Effect.runFork);
+    const timeoutId = setTimeout(() => {
+      if (!readyRef.current && !errorRef.current) {
+        log.warn("startup timeout diagnostic", {
+          eventsFired: manager.getEventsFired(),
+          activeModules: manager.getActive(),
+          pendingReset: manager.getPendingReset()
+        }, {
+          F: __dxlog_file,
+          L: 178,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        void runAndForwardErrors(Fiber.interrupt(fiber));
+        setError(new Error(`Startup timed out after ${timeout}ms`));
+      }
+    }, timeout);
+    return () => {
+      clearTimeout(timeoutId);
+      void runAndForwardErrors(Fiber.interrupt(fiber));
+      manager.capabilities.remove(capabilities_exports.PluginManager, manager);
+      manager.capabilities.remove(capabilities_exports.AtomRegistry, manager.registry);
+    };
+  }, [
+    manager
   ]);
-  if (definition.kind === "web-component") {
-    return /* @__PURE__ */ React3.createElement(ErrorBoundary, {
-      data,
-      fallback
-    }, /* @__PURE__ */ React3.createElement(SurfaceContext.Provider, {
-      value: contextValue
-    }, /* @__PURE__ */ React3.createElement(WebComponentWrapper, {
-      id,
-      role,
-      data,
-      limit,
-      definition,
-      ref: forwardedRef,
-      ...rest
-    })));
-  }
-  const Component2 = definition.component;
-  const debug = DEBUG || "__DX_DEBUG__" in window;
-  if (debug) {
-    return /* @__PURE__ */ React3.createElement(ErrorBoundary, {
-      data,
-      fallback
-    }, /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
-      className: "contents",
-      "data-id": id,
-      "data-role": role
-    }, /* @__PURE__ */ React3.createElement(SurfaceContext.Provider, {
-      value: contextValue
-    }, /* @__PURE__ */ React3.createElement(SurfaceInfo, {
-      ref: forwardedRef
-    }, /* @__PURE__ */ React3.createElement(Component2, {
-      id,
-      role,
-      data,
-      limit,
-      ...rest
-    })))));
-  }
-  return /* @__PURE__ */ React3.createElement(ErrorBoundary, {
-    data,
+  return useCallback(() => /* @__PURE__ */ React3.createElement(ErrorBoundary, {
     fallback
-  }, /* @__PURE__ */ React3.createElement("div", {
-    role: "none",
-    className: "contents",
-    "data-id": id,
-    "data-role": role
-  }, /* @__PURE__ */ React3.createElement(SurfaceContext.Provider, {
-    value: contextValue
-  }, /* @__PURE__ */ React3.createElement(Component2, {
-    id,
-    role,
-    data,
-    limit,
-    ...rest,
-    ref: forwardedRef
-  }))));
-}));
-SurfaceContextProvider.displayName = "SurfaceContextProvider";
-var useSurface = () => {
-  const context = useContext3(SurfaceContext) ?? raise2(new Error("Missing SurfaceContext"));
-  return context;
-};
-var Surface = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ id: _id, role, data: dataProp, limit, placeholder = DEFAULT_PLACEHOLDER, ...rest }, forwardedRef) => {
-  const data = useDefaultValue(dataProp, () => ({}));
-  const surfaces = useSurfaces();
-  const definitions = findCandidates(surfaces, {
-    role,
-    data
-  });
-  const candidates = limit ? definitions.slice(0, limit) : definitions;
-  if (DEBUG && candidates.length === 0) {
-    log.warn("no candidates for surface", {
-      role,
-      data
-    }, {
-      F: __dxlog_file2,
-      L: 191,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-    return null;
-  }
-  return /* @__PURE__ */ React3.createElement(Suspense, {
-    fallback: placeholder
-  }, candidates.map((definition) => /* @__PURE__ */ React3.createElement(SurfaceContextProvider, {
-    key: definition.id,
-    id: definition.id,
-    role,
-    data,
-    limit,
-    definition,
-    ref: forwardedRef,
-    ...rest
-  })));
-}));
-Surface.displayName = "Surface";
-var findCandidates = (surfaces, { role, data }) => {
-  return Object.values(surfaces).filter((definition) => Array.isArray(definition.role) ? definition.role.includes(role) : definition.role === role).filter(({ filter }) => filter ? filter(data ?? {}) : true).toSorted(byPosition);
-};
-var DefaultFallback2 = ({ data, error, dev }) => {
-  if (dev) {
-    return /* @__PURE__ */ React3.createElement("div", {
-      className: "flex flex-col gap-4 p-4 is-full overflow-y-auto"
-    }, /* @__PURE__ */ React3.createElement("h1", {
-      className: "flex gap-2 text-sm mbs-2"
-    }, error.message), /* @__PURE__ */ React3.createElement("pre", {
-      className: "overflow-auto text-xs text-description"
-    }, JSON.stringify(data, null, 2)));
-  }
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: "flex flex-col gap-4 p-4 is-full overflow-y-auto border border-roseFill"
-  }, /* @__PURE__ */ React3.createElement("h1", {
-    className: "flex gap-2 text-sm mbs-2 text-rose-500"
-  }, error.message), /* @__PURE__ */ React3.createElement("pre", {
-    className: "overflow-auto text-xs text-description"
-  }, error.stack), /* @__PURE__ */ React3.createElement("pre", {
-    className: "overflow-auto text-xs text-description"
-  }, JSON.stringify(data, null, 2)));
-};
-var useSurfaces = () => {
-  const surfaces = useCapabilities(Capability.ReactSurface);
-  return useMemo(() => surfaces.flat(), [
-    surfaces
+  }, /* @__PURE__ */ React3.createElement(PluginManagerProvider, {
+    value: manager
+  }, /* @__PURE__ */ React3.createElement(ContextProtocolProvider, {
+    value: manager,
+    context: PluginManagerContext
+  }, /* @__PURE__ */ React3.createElement(RegistryContext.Provider, {
+    value: manager.registry
+  }, /* @__PURE__ */ React3.createElement(App, {
+    placeholder,
+    ready,
+    error,
+    debounce
+  }))))), [
+    fallback,
+    manager,
+    placeholder,
+    ready,
+    error
   ]);
 };
-var isSurfaceAvailable = (capabilityManager, { role, data }) => {
-  const surfaces = capabilityManager.getAll(Capability.ReactSurface);
-  const candidates = findCandidates(surfaces.flat(), {
-    role,
-    data
-  });
-  return candidates.length > 0;
+var setupDevtools = (manager) => {
+  globalThis.composer ??= {};
+  globalThis.composer.manager = manager;
 };
 
-// src/react/useApp.tsx
-import { RegistryContext as RegistryContext2 } from "@effect-atom/atom-react";
-import * as Effect from "effect/Effect";
-import * as Fiber from "effect/Fiber";
-import * as PubSub from "effect/PubSub";
-import * as Queue from "effect/Queue";
-import React6, { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
-import { runAndForwardErrors } from "@dxos/effect";
+// src/ui/hooks/useCapabilities.ts
+import { useAtomValue } from "@effect-atom/atom-react";
+import { useCallback as useCallback2 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { log as log2 } from "@dxos/log";
-import { useAsyncEffect, useDefaultValue as useDefaultValue2 } from "@dxos/react-hooks";
-import { ContextProtocolProvider } from "@dxos/web-context-react";
-
-// src/react/App.tsx
-import React4 from "react";
-
-// src/helpers.ts
-var topologicalSort = (nodes) => {
-  const getDependencies = (nodeId, seen = /* @__PURE__ */ new Set(), path = /* @__PURE__ */ new Set()) => {
-    if (path.has(nodeId)) {
-      throw new Error(`Circular dependency detected involving ${nodeId}`);
-    }
-    if (seen.has(nodeId)) {
-      return [];
-    }
-    const node = nodes.find((n) => n.id === nodeId);
-    if (!node) {
-      throw new Error(`Node ${nodeId} not found but is listed as a dependency`);
-    }
-    const newPath = /* @__PURE__ */ new Set([
-      ...path,
-      nodeId
-    ]);
-    const newSeen = /* @__PURE__ */ new Set([
-      ...seen,
-      nodeId
-    ]);
-    const dependsOn = node.dependsOn ?? [];
-    return [
-      ...dependsOn.flatMap((depId) => getDependencies(depId, newSeen, newPath)),
-      nodeId
-    ];
-  };
-  const allDependencies = nodes.map((node) => node.id).flatMap((id) => getDependencies(id)).filter((id, index, self) => self.indexOf(id) === index);
-  return allDependencies.map((id) => nodes.find((node) => node.id === id)).filter((node) => node !== void 0);
+var __dxlog_file2 = "/__w/dxos/dxos/packages/sdk/app-framework/src/ui/hooks/useCapabilities.ts";
+var useCapabilities = (interfaceDef) => {
+  const manager = usePluginManager();
+  return useAtomValue(manager.capabilities.atom(interfaceDef));
+};
+var useCapability = (interfaceDef) => {
+  const capabilities = useCapabilities(interfaceDef);
+  invariant2(capabilities.length > 0, `No capability found for ${interfaceDef.identifier}`, {
+    F: __dxlog_file2,
+    L: 30,
+    S: void 0,
+    A: [
+      "capabilities.length > 0",
+      "`No capability found for ${interfaceDef.identifier}`"
+    ]
+  });
+  return capabilities[0];
+};
+var useAtomCapability = (atomCapability) => {
+  const atom = useCapability(atomCapability);
+  return useAtomValue(atom);
+};
+var useAtomCapabilityState = (atomCapability) => {
+  const registry = useCapability(capabilities_exports.AtomRegistry);
+  const atom = useCapability(atomCapability);
+  const value = useAtomValue(atom);
+  const update = useCallback2((fn) => {
+    registry.set(atom, fn(registry.get(atom)));
+  }, [
+    registry,
+    atom
+  ]);
+  return [
+    value,
+    update
+  ];
 };
+var useOperationInvoker = () => useCapability(capabilities_exports.OperationInvoker);
 
-// src/react/useLoading.tsx
+// src/ui/hooks/useLoading.tsx
 import { useEffect as useEffect2, useState as useState2 } from "react";
 var LoadingState = /* @__PURE__ */ (function(LoadingState2) {
   LoadingState2[LoadingState2["Loading"] = 0] = "Loading";
@@ -503,23 +375,76 @@ var useLoading = (ready, debounce = 0) => {
   return stage;
 };
 
-// src/react/App.tsx
-var App = ({ placeholder: Placeholder, ready, error, debounce }) => {
-  const reactContexts = useCapabilities(Capability.ReactContext);
-  const reactRoots = useCapabilities(Capability.ReactRoot);
-  const stage = useLoading(ready, debounce);
-  if (error) {
-    throw error;
-  }
-  if (stage < LoadingState.Done) {
-    if (!Placeholder) {
-      return null;
-    }
-    return /* @__PURE__ */ React4.createElement(Placeholder, {
-      stage
+// src/ui/hooks/useOperationResolver.ts
+import { useEffect as useEffect3, useMemo as useMemo2 } from "react";
+var useOperationResolver = (module, resolver) => {
+  const manager = usePluginManager();
+  const resolverArray = useMemo2(() => [
+    resolver
+  ], [
+    resolver
+  ]);
+  useEffect3(() => {
+    manager.capabilities.contribute({
+      module,
+      interface: capabilities_exports.OperationResolver,
+      implementation: resolverArray
     });
-  }
-  const ComposedContext = composeContexts(reactContexts);
+    return () => manager.capabilities.remove(capabilities_exports.OperationResolver, resolverArray);
+  }, [
+    module,
+    resolverArray
+  ]);
+};
+
+// src/ui/hooks/useSettingsState.ts
+import { RegistryContext as RegistryContext2, useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
+import { useCallback as useCallback3, useContext as useContext2 } from "react";
+var useSettingsState = (atom) => {
+  const registry = useContext2(RegistryContext2);
+  const settings = useAtomValue2(atom);
+  const updateSettings = useCallback3((fn) => {
+    registry.set(atom, fn(registry.get(atom)));
+  }, [
+    registry,
+    atom
+  ]);
+  return {
+    settings,
+    updateSettings
+  };
+};
+
+// src/ui/hooks/useSurface.ts
+import { useContext as useContext3 } from "react";
+import { raise as raise2 } from "@dxos/debug";
+
+// src/ui/components/surface/context.ts
+import { createContext as createContext2 } from "react";
+var SurfaceContext = createContext2(void 0);
+
+// src/ui/hooks/useSurface.ts
+var useSurface = () => {
+  return useContext3(SurfaceContext) ?? raise2(new Error("Missing SurfaceContext"));
+};
+
+// src/ui/components/App.tsx
+var App = ({ placeholder: Placeholder, ready, error, debounce }) => {
+  const reactContexts = useCapabilities(capabilities_exports.ReactContext);
+  const reactRoots = useCapabilities(capabilities_exports.ReactRoot);
+  const stage = useLoading(ready, debounce);
+  if (error) {
+    throw error;
+  }
+  if (stage < LoadingState.Done) {
+    if (!Placeholder) {
+      return null;
+    }
+    return /* @__PURE__ */ React4.createElement(Placeholder, {
+      stage
+    });
+  }
+  const ComposedContext = composeContexts(reactContexts);
   return /* @__PURE__ */ React4.createElement(ComposedContext, null, reactRoots.map(({ id, root: Component2 }) => /* @__PURE__ */ React4.createElement(Component2, {
     key: id
   })));
@@ -531,216 +456,326 @@ var composeContexts = (contexts) => {
   return topologicalSort(contexts).map(({ context }) => context).reduce((Acc, Next) => ({ children }) => /* @__PURE__ */ React4.createElement(Acc, null, /* @__PURE__ */ React4.createElement(Next, null, children)));
 };
 
-// src/react/DefaultFallback.tsx
-import React5 from "react";
-var DefaultFallback3 = ({ error }) => {
-  return /* @__PURE__ */ React5.createElement("div", {
-    style: {
-      margin: "1rem",
-      padding: "1rem",
-      overflow: "hidden",
-      border: "4px solid teal",
-      borderRadius: "1rem"
-    }
-  }, /* @__PURE__ */ React5.createElement("h1", {
-    style: {
-      margin: "0.5rem 0",
-      fontSize: "1.2rem"
-    }
-  }, "ERROR: ", error.message), /* @__PURE__ */ React5.createElement("pre", {
-    style: {
-      overflow: "auto",
-      fontSize: "1rem",
-      whiteSpace: "pre-wrap",
-      color: "#888888"
-    }
-  }, error.stack));
-};
+// src/ui/components/surface/index.ts
+var surface_exports = {};
+__export(surface_exports, {
+  Surface: () => Surface,
+  create: () => create,
+  createWeb: () => createWeb,
+  isAvailable: () => isSurfaceAvailable
+});
 
-// src/react/useApp.tsx
-var __dxlog_file3 = "/__w/dxos/dxos/packages/sdk/app-framework/src/react/useApp.tsx";
-var ENABLED_KEY = "dxos.org/app-framework/enabled";
-var useApp = ({ pluginManager, pluginLoader: pluginLoaderProp, plugins: pluginsProp, core: coreProp, defaults: defaultsProp, placeholder, fallback = DefaultFallback3, cacheEnabled = false, safeMode = false, debounce = 0, timeout = 3e4 }) => {
-  const plugins = useDefaultValue2(pluginsProp, () => []);
-  const core = useDefaultValue2(coreProp, () => plugins.map(({ meta }) => meta.id));
-  const defaults = useDefaultValue2(defaultsProp, () => []);
-  const pluginLoader = useMemo2(() => pluginLoaderProp ?? ((id) => Effect.sync(() => {
-    const plugin = plugins.find((plugin2) => plugin2.meta.id === id);
-    invariant2(plugin, `Plugin not found: ${id}`, {
-      F: __dxlog_file3,
-      L: 92,
-      S: void 0,
-      A: [
-        "plugin",
-        "`Plugin not found: ${id}`"
-      ]
-    });
-    return plugin;
-  })), [
-    pluginLoaderProp,
-    plugins
-  ]);
-  const readyRef = useRef2(false);
-  const [ready, setReady] = useState3(false);
-  const errorRef = useRef2(null);
-  const [error, setError] = useState3(null);
-  const cached = useMemo2(() => JSON.parse(localStorage.getItem(ENABLED_KEY) ?? "[]"), []);
-  const enabled = useMemo2(() => safeMode ? [] : cacheEnabled && cached.length > 0 ? cached : defaults, [
-    safeMode,
-    cacheEnabled,
-    cached,
-    defaults
-  ]);
-  const manager = useMemo2(() => pluginManager ?? plugin_manager_exports.make({
-    pluginLoader,
-    plugins,
-    core,
-    enabled
-  }), [
-    pluginManager,
-    pluginLoader,
-    plugins,
-    core,
-    enabled
+// src/ui/components/surface/types.ts
+var create = (definition) => ({
+  ...definition,
+  kind: "react"
+});
+var createWeb = (definition) => ({
+  ...definition,
+  kind: "web-component"
+});
+
+// src/ui/components/surface/SurfaceComponent.tsx
+import React6, { Fragment, Suspense, forwardRef as forwardRef2, memo, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2 } from "react";
+import { log as log2 } from "@dxos/log";
+import { useDefaultValue as useDefaultValue2 } from "@dxos/react-hooks";
+import { ScrollArea } from "@dxos/react-ui";
+import { byPosition } from "@dxos/util";
+
+// src/ui/components/surface/SurfaceInfo.tsx
+import React5, { cloneElement, forwardRef, useCallback as useCallback4, useLayoutEffect, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+import { addEventListener, combine } from "@dxos/async";
+import { useMergeRefs } from "@dxos/react-hooks";
+var SurfaceInfo = /* @__PURE__ */ forwardRef(({ children }, forwardedRef) => {
+  const [rect, setRect] = useState3(null);
+  const [expand, setExpand] = useState3(false);
+  const info = useSurface();
+  const [root, setRoot] = useState3(null);
+  const measureRef = useCallback4((node) => setRoot(node), []);
+  const mergedRef = useMergeRefs([
+    measureRef,
+    forwardedRef
   ]);
-  useEffect3(() => {
-    if (!cacheEnabled) {
+  const childWithRef = /* @__PURE__ */ cloneElement(children, {
+    ref: mergedRef
+  });
+  useLayoutEffect(() => {
+    if (!root) {
+      setRect(null);
       return;
     }
-    return manager.registry.subscribe(manager.enabled, (value) => {
-      localStorage.setItem(ENABLED_KEY, JSON.stringify(value));
+    const measure = () => {
+      setRect(root.getBoundingClientRect());
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+    measure();
+    return combine(addEventListener(window, "scroll", measure, true), addEventListener(window, "resize", measure), () => {
+      observer.disconnect();
     });
   }, [
-    cacheEnabled,
-    manager
-  ]);
-  useEffect3(() => {
-    setupDevtools(manager);
-  }, [
-    manager
+    root
   ]);
-  useAsyncEffect(async () => {
-    manager.capabilities.contribute({
-      interface: Capability.PluginManager,
-      implementation: manager,
-      module: "dxos.org/app-framework/plugin-manager"
-    });
-    manager.capabilities.contribute({
-      interface: Capability.AtomRegistry,
-      implementation: manager.registry,
-      module: "dxos.org/app-framework/atom-registry"
-    });
-    const fiber = Effect.gen(function* () {
-      const queue = yield* PubSub.subscribe(manager.activation);
-      const listener = yield* Effect.forkDaemon(Queue.take(queue).pipe(Effect.tap(({ event, state, error: error$ }) => Effect.sync(() => {
-        if (event === ActivationEvent.Startup.id && state === "activated") {
-          clearTimeout(timeoutId);
-          setReady(true);
-          readyRef.current = true;
-        }
-        if (error$ && !readyRef.current) {
-          setError(error$);
-          errorRef.current = error$;
-        }
-      })), Effect.forever));
-      yield* Effect.all([
-        manager.activate(ActivationEvent.SetupSettings),
-        manager.activate(ActivationEvent.SetupReactSurface),
-        manager.activate(ActivationEvent.Startup)
-      ]);
-      return yield* Fiber.join(listener);
-    }).pipe(Effect.scoped, Effect.runFork);
-    const timeoutId = setTimeout(() => {
-      if (!readyRef.current && !errorRef.current) {
-        log2.warn("startup timeout diagnostic", {
-          eventsFired: manager.getEventsFired(),
-          activeModules: manager.getActive(),
-          pendingReset: manager.getPendingReset()
-        }, {
-          F: __dxlog_file3,
-          L: 172,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        void runAndForwardErrors(Fiber.interrupt(fiber));
-        setError(new Error(`Startup timed out after ${timeout}ms`));
+  const padding = 0;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, childWithRef, rect && /* @__PURE__ */ createPortal(
+    /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "z-[100] fixed flex flex-col-reverse scrollbar-none overflow-auto pointer-events-none",
+      style: {
+        top: rect.top + padding,
+        left: rect.left + padding,
+        width: rect.width - padding * 2,
+        height: rect.height - padding * 2
       }
-    }, timeout);
+    }, expand ? /* @__PURE__ */ React5.createElement("div", {
+      className: "absolute inset-0 bg-deckSurface border border-green-500 cursor-pointer pointer-events-auto overflow-auto",
+      onPointerDown: (ev) => ev.stopPropagation(),
+      onClick: (ev) => {
+        ev.stopPropagation();
+        setExpand(false);
+      }
+    }, /* @__PURE__ */ React5.createElement("pre", {
+      className: "p-2 text-xs text-description font-mono"
+    }, JSON.stringify({
+      info
+    }, null, 2))) : /* @__PURE__ */ React5.createElement("span", {
+      className: "absolute right-1 bottom-0 flex items-center p-1 text-green-500 opacity-80 hover:opacity-100 text-xl cursor-pointer pointer-events-auto",
+      title: info.id,
+      onPointerDown: (ev) => ev.stopPropagation(),
+      onClick: (ev) => {
+        ev.stopPropagation();
+        setExpand(true);
+      }
+    }, "\u24D8")),
+    // TODO(burdon): Create well-known element to gather all debug portals.
+    document.body
+  ));
+});
+
+// src/ui/components/surface/SurfaceComponent.tsx
+var __dxlog_file3 = "/__w/dxos/dxos/packages/sdk/app-framework/src/ui/components/surface/SurfaceComponent.tsx";
+var DEFAULT_PLACEHOLDER = /* @__PURE__ */ React6.createElement(Fragment, null);
+var DEBUG = import.meta.env.VITE_DEBUG;
+var WebComponentWrapper = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ id, role, data, limit, definition, ...rest }, forwardedRef) => {
+  const containerRef = useRef2(null);
+  const elementRef = useRef2(null);
+  const propsRef = useRef2({
+    id,
+    role,
+    data,
+    limit,
+    ...rest
+  });
+  propsRef.current = {
+    id,
+    role,
+    data,
+    limit,
+    ...rest
+  };
+  useEffect4(() => {
+    if (!containerRef.current || elementRef.current) {
+      return;
+    }
+    const element = document.createElement(definition.tagName);
+    elementRef.current = element;
+    Object.assign(element, propsRef.current);
+    containerRef.current.appendChild(element);
+    if (typeof forwardedRef === "function") {
+      forwardedRef(element);
+    } else if (forwardedRef) {
+      forwardedRef.current = element;
+    }
     return () => {
-      clearTimeout(timeoutId);
-      void runAndForwardErrors(Fiber.interrupt(fiber));
-      manager.capabilities.remove(Capability.PluginManager, manager);
-      manager.capabilities.remove(Capability.AtomRegistry, manager.registry);
+      if (elementRef.current && containerRef.current?.contains(elementRef.current)) {
+        containerRef.current.removeChild(elementRef.current);
+      }
+      if (typeof forwardedRef === "function") {
+        forwardedRef(null);
+      } else if (forwardedRef) {
+        forwardedRef.current = null;
+      }
+      elementRef.current = null;
     };
   }, [
-    manager
+    definition.tagName,
+    forwardedRef
   ]);
-  return useCallback4(() => /* @__PURE__ */ React6.createElement(ErrorBoundary, {
-    fallback
-  }, /* @__PURE__ */ React6.createElement(PluginManagerProvider, {
-    value: manager
-  }, /* @__PURE__ */ React6.createElement(ContextProtocolProvider, {
-    value: manager,
-    context: PluginManagerContext
-  }, /* @__PURE__ */ React6.createElement(RegistryContext2.Provider, {
-    value: manager.registry
-  }, /* @__PURE__ */ React6.createElement(App, {
-    placeholder,
-    ready,
-    error,
-    debounce
-  }))))), [
-    fallback,
-    manager,
-    placeholder,
-    ready,
-    error
+  useEffect4(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    Object.assign(element, propsRef.current);
+  });
+  return /* @__PURE__ */ React6.createElement("div", {
+    ref: containerRef
+  });
+}));
+WebComponentWrapper.displayName = "WebComponentWrapper";
+var SurfaceContextProvider = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ id, role, data, limit, fallback = DefaultFallback3, definition, ...rest }, forwardedRef) => {
+  const contextValue = useMemo3(() => ({
+    id,
+    role,
+    data
+  }), [
+    id,
+    role,
+    data
   ]);
+  if (definition.kind === "web-component") {
+    return /* @__PURE__ */ React6.createElement(ErrorBoundary, {
+      data,
+      fallback
+    }, /* @__PURE__ */ React6.createElement(SurfaceContext.Provider, {
+      value: contextValue
+    }, /* @__PURE__ */ React6.createElement(WebComponentWrapper, {
+      id,
+      role,
+      data,
+      limit,
+      definition,
+      ref: forwardedRef,
+      ...rest
+    })));
+  }
+  const Component2 = definition.component;
+  const debug = DEBUG || "__DX_DEBUG__" in window;
+  if (debug) {
+    return /* @__PURE__ */ React6.createElement(ErrorBoundary, {
+      data,
+      fallback
+    }, /* @__PURE__ */ React6.createElement("div", {
+      role: "none",
+      className: "contents",
+      "data-id": id,
+      "data-role": role
+    }, /* @__PURE__ */ React6.createElement(SurfaceContext.Provider, {
+      value: contextValue
+    }, /* @__PURE__ */ React6.createElement(SurfaceInfo, {
+      ref: forwardedRef
+    }, /* @__PURE__ */ React6.createElement(Component2, {
+      id,
+      role,
+      data,
+      limit,
+      ...rest
+    })))));
+  }
+  return /* @__PURE__ */ React6.createElement(ErrorBoundary, {
+    data,
+    fallback
+  }, /* @__PURE__ */ React6.createElement("div", {
+    role: "none",
+    className: "contents",
+    "data-id": id,
+    "data-role": role
+  }, /* @__PURE__ */ React6.createElement(SurfaceContext.Provider, {
+    value: contextValue
+  }, /* @__PURE__ */ React6.createElement(Component2, {
+    id,
+    role,
+    data,
+    limit,
+    ...rest,
+    ref: forwardedRef
+  }))));
+}));
+SurfaceContextProvider.displayName = "SurfaceContextProvider";
+var Surface = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ id: _id, role, data: dataProp, limit, placeholder = DEFAULT_PLACEHOLDER, ...rest }, forwardedRef) => {
+  const data = useDefaultValue2(dataProp, () => ({}));
+  const surfaces = useSurfaces();
+  const definitions = findCandidates(surfaces, {
+    role,
+    data
+  });
+  const candidates = limit ? definitions.slice(0, limit) : definitions;
+  if (DEBUG && candidates.length === 0) {
+    log2.warn("no candidates for surface", {
+      role,
+      data
+    }, {
+      F: __dxlog_file3,
+      L: 185,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(Suspense, {
+    fallback: placeholder
+  }, candidates.map((definition) => /* @__PURE__ */ React6.createElement(SurfaceContextProvider, {
+    key: definition.id,
+    id: definition.id,
+    role,
+    data,
+    limit,
+    definition,
+    ref: forwardedRef,
+    ...rest
+  })));
+}));
+Surface.displayName = "Surface";
+var findCandidates = (surfaces, { role, data }) => {
+  return Object.values(surfaces).filter((definition) => Array.isArray(definition.role) ? definition.role.includes(role) : definition.role === role).filter(({ filter }) => filter ? filter(data ?? {}) : true).toSorted(byPosition);
 };
-var setupDevtools = (manager) => {
-  globalThis.composer ??= {};
-  globalThis.composer.manager = manager;
+var DefaultFallback3 = ({ data, error, dev }) => {
+  if (dev) {
+    return /* @__PURE__ */ React6.createElement(ScrollArea.Root, {
+      orientation: "vertical"
+    }, /* @__PURE__ */ React6.createElement(ScrollArea.Viewport, {
+      classNames: "p-4 gap-4"
+    }, /* @__PURE__ */ React6.createElement("h1", {
+      className: "flex gap-2 text-sm mbs-2"
+    }, error.message), /* @__PURE__ */ React6.createElement("pre", {
+      className: "overflow-auto text-xs text-description"
+    }, JSON.stringify(data, null, 2))));
+  }
+  return /* @__PURE__ */ React6.createElement(ScrollArea.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React6.createElement(ScrollArea.Viewport, {
+    classNames: "p-4 gap-4 border border-roseFill"
+  }, /* @__PURE__ */ React6.createElement("h1", {
+    className: "flex gap-2 text-sm mbs-2 text-errorText"
+  }, error.message), /* @__PURE__ */ React6.createElement("pre", {
+    className: "overflow-x-auto text-xs text-description"
+  }, error.stack), /* @__PURE__ */ React6.createElement("pre", {
+    className: "overflow-x-auto text-xs text-description"
+  }, JSON.stringify(data, null, 2))));
 };
-
-// src/react/useOperationResolver.ts
-import { useEffect as useEffect4, useMemo as useMemo3 } from "react";
-var useOperationResolver = (module, resolver) => {
-  const manager = usePluginManager();
-  const resolverArray = useMemo3(() => [
-    resolver
-  ], [
-    resolver
-  ]);
-  useEffect4(() => {
-    manager.capabilities.contribute({
-      module,
-      interface: Capability.OperationResolver,
-      implementation: resolverArray
-    });
-    return () => manager.capabilities.remove(Capability.OperationResolver, resolverArray);
-  }, [
-    module,
-    resolverArray
+var useSurfaces = () => {
+  const surfaces = useCapabilities(capabilities_exports.ReactSurface);
+  return useMemo3(() => surfaces.flat(), [
+    surfaces
   ]);
 };
+var isSurfaceAvailable = (capabilityManager, { role, data }) => {
+  const surfaces = capabilityManager.getAll(capabilities_exports.ReactSurface);
+  const candidates = findCandidates(surfaces.flat(), {
+    role,
+    data
+  });
+  return candidates.length > 0;
+};
 
 export {
+  DefaultFallback,
+  ErrorBoundary,
   usePluginManager,
   PluginManagerProvider,
+  useApp,
   useCapabilities,
   useCapability,
   useAtomCapability,
   useAtomCapabilityState,
   useOperationInvoker,
-  useAppGraph,
-  useLayout,
+  LoadingState,
+  useLoading,
+  useOperationResolver,
   useSettingsState,
-  ErrorBoundary,
   useSurface,
-  Surface,
-  useSurfaces,
-  isSurfaceAvailable,
-  useApp,
-  useOperationResolver
+  App,
+  surface_exports
 };
-//# sourceMappingURL=chunk-XYNO72GQ.mjs.map
+//# sourceMappingURL=chunk-C46IKYBD.mjs.map