@dxos/app-framework 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

package/dist/lib/node-esm/chunk-LQKOTNJW.mjs

@@ -0,0 +1,906 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  PluginManagerContext
+} from "./chunk-FKE4Z3D6.mjs";
+import {
+  capabilities_exports
+} from "./chunk-G3RTFSNG.mjs";
+import {
+  activation_events_exports
+} from "./chunk-WZCSOX5Q.mjs";
+import {
+  plugin_manager_exports
+} from "./chunk-BCEOLX47.mjs";
+
+// src/ui/components/App/App.tsx
+import React2 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);
+};
+
+// 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 React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { runAndForwardErrors } from "@dxos/effect";
+import { invariant } from "@dxos/invariant";
+import { log } from "@dxos/log";
+import { ErrorBoundary, ErrorFallback } from "@dxos/react-error-boundary";
+import { useAsyncEffect, useDefaultValue } from "@dxos/react-hooks";
+import { ContextProtocolProvider } from "@dxos/web-context-react";
+var __dxlog_file = "/__w/dxos/dxos/packages/sdk/app-framework/src/ui/hooks/useApp.tsx";
+var ENABLED_KEY = "org.dxos.app-framework.enabled";
+var useApp = ({ pluginManager, pluginLoader: pluginLoaderProp, plugins: pluginsProp, core: coreProp, defaults: defaultsProp, setupEvents: setupEventsProp, placeholder, fallback = ErrorFallback, 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: 111,
+      S: void 0,
+      A: [
+        "plugin",
+        "`Plugin not found: ${id}`"
+      ]
+    });
+    return plugin;
+  })), [
+    pluginLoaderProp,
+    plugins
+  ]);
+  const readyRef = useRef(false);
+  const [ready, setReady] = useState(false);
+  const errorRef = useRef(null);
+  const [error, setError] = useState(null);
+  const [startupProgress, setStartupProgress] = useState({
+    activated: 0,
+    total: 0,
+    progress: 0
+  });
+  const cached = useMemo(() => JSON.parse(localStorage.getItem(ENABLED_KEY) ?? "[]"), []);
+  const enabled = useMemo(() => safeMode ? [] : cacheEnabled && cached.length > 0 ? cached : defaults, [
+    safeMode,
+    cacheEnabled,
+    cached,
+    defaults
+  ]);
+  const isExternalManager = !!pluginManager;
+  const manager = useMemo(() => {
+    const mgr = pluginManager ?? plugin_manager_exports.make({
+      pluginLoader,
+      plugins,
+      core,
+      enabled
+    });
+    log("useApp: useMemo created/reused manager", {
+      provided: !!pluginManager
+    }, {
+      F: __dxlog_file,
+      L: 135,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return mgr;
+  }, [
+    pluginManager,
+    pluginLoader,
+    plugins,
+    core,
+    enabled
+  ]);
+  useEffect(() => {
+    if (!cacheEnabled) {
+      return;
+    }
+    return manager.registry.subscribe(manager.enabled, (value) => {
+      localStorage.setItem(ENABLED_KEY, JSON.stringify(value));
+    });
+  }, [
+    cacheEnabled,
+    manager
+  ]);
+  useEffect(() => {
+    setupDevtools(manager);
+  }, [
+    manager
+  ]);
+  useAsyncEffect(async () => {
+    log("useApp: effect mount", void 0, {
+      F: __dxlog_file,
+      L: 153,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    manager.capabilities.contribute({
+      interface: capabilities_exports.PluginManager,
+      implementation: manager,
+      module: "org.dxos.app-framework.plugin-manager"
+    });
+    manager.capabilities.contribute({
+      interface: capabilities_exports.AtomRegistry,
+      implementation: manager.registry,
+      module: "org.dxos.app-framework.atom-registry"
+    });
+    const progressInterval = setInterval(() => {
+      if (readyRef.current) {
+        clearInterval(progressInterval);
+        return;
+      }
+      const active = manager.getActive();
+      const modules = manager.getModules();
+      const total = modules.length;
+      const activated = active.length;
+      const lastModule = active.length > 0 ? active[active.length - 1] : void 0;
+      setStartupProgress({
+        activated,
+        total,
+        progress: total > 0 ? activated / total : 0,
+        status: lastModule ? humanizeModuleId(lastModule) : void 0
+      });
+    }, 100);
+    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);
+          clearInterval(progressInterval);
+          setReady(true);
+          readyRef.current = true;
+          globalThis.composer?.profiler?.dump();
+        }
+        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: 222,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        void runAndForwardErrors(Fiber.interrupt(fiber));
+        setError(new Error(`Startup timed out after ${timeout}ms`));
+      }
+    }, timeout);
+    return () => {
+      log("useApp: effect cleanup", void 0, {
+        F: __dxlog_file,
+        L: 233,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      clearTimeout(timeoutId);
+      clearInterval(progressInterval);
+      void runAndForwardErrors(Fiber.interrupt(fiber));
+      if (!isExternalManager) {
+        void runAndForwardErrors(manager.shutdown());
+      }
+    };
+  }, [
+    manager
+  ]);
+  return useCallback(() => /* @__PURE__ */ React.createElement(ErrorBoundary, {
+    name: "app",
+    FallbackComponent: fallback
+  }, /* @__PURE__ */ React.createElement(PluginManagerProvider, {
+    value: manager
+  }, /* @__PURE__ */ React.createElement(ContextProtocolProvider, {
+    value: manager,
+    context: PluginManagerContext
+  }, /* @__PURE__ */ React.createElement(RegistryContext.Provider, {
+    value: manager.registry
+  }, /* @__PURE__ */ React.createElement(App, {
+    placeholder,
+    ready,
+    error,
+    debounce,
+    progress: startupProgress
+  }))))), [
+    fallback,
+    manager,
+    placeholder,
+    ready,
+    error
+  ]);
+};
+var setupDevtools = (manager) => {
+  globalThis.composer ??= {};
+  globalThis.composer.manager = manager;
+};
+var humanizeModuleId = (moduleId) => {
+  const pluginMatch = moduleId.match(/\.plugin\.([^.]+)\./);
+  if (pluginMatch) {
+    const name = pluginMatch[1];
+    return name.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  }
+  const parts = moduleId.split(".");
+  return parts[parts.length - 1];
+};
+
+// 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";
+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/ui/hooks/useLoading.tsx
+import { useEffect as useEffect2, useState as useState2 } 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 = (ready, debounce = 0) => {
+  const [stage, setStage] = useState2(0);
+  useEffect2(() => {
+    if (!debounce) {
+      return;
+    }
+    const i = setInterval(() => {
+      setStage((stage2) => {
+        switch (stage2) {
+          case 0: {
+            if (!ready) {
+              return 1;
+            } else {
+              clearInterval(i);
+              return 3;
+            }
+          }
+          case 1: {
+            if (ready) {
+              return 2;
+            }
+            break;
+          }
+          case 2: {
+            clearInterval(i);
+            return 3;
+          }
+        }
+        return stage2;
+      });
+    }, debounce);
+    return () => clearInterval(i);
+  }, [
+    debounce
+  ]);
+  if (!debounce) {
+    return ready ? 3 : 0;
+  }
+  return stage;
+};
+
+// src/ui/hooks/useSettingsState.ts
+import { RegistryContext as RegistryContext2, useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
+import { useCallback as useCallback3, useContext } from "react";
+var useSettingsState = (atom) => {
+  const registry = useContext(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 useContext2 } from "react";
+import { raise } from "@dxos/debug";
+var useSurface = () => {
+  return useContext2(Surface.Context) ?? raise(new Error("Missing SurfaceContext"));
+};
+
+// src/ui/components/App/App.tsx
+var App = ({ placeholder: Placeholder, ready, error, debounce, progress }) => {
+  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__ */ React2.createElement(Placeholder, {
+      stage,
+      progress
+    });
+  }
+  const ComposedContext = composeContexts(reactContexts);
+  return /* @__PURE__ */ React2.createElement(ComposedContext, null, reactRoots.map(({ id, root: Component }) => /* @__PURE__ */ React2.createElement(Component, {
+    key: id
+  })));
+};
+var composeContexts = (contexts) => {
+  if (contexts.length === 0) {
+    return ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
+  }
+  return topologicalSort(contexts).map(({ context }) => context).reduce((Acc, Next) => ({ children }) => /* @__PURE__ */ React2.createElement(Acc, null, /* @__PURE__ */ React2.createElement(Next, null, children)));
+};
+
+// src/ui/components/PluginManager/PluginManagerProvider.ts
+import { createContext, useContext as useContext3 } from "react";
+import { raise as raise2 } from "@dxos/debug";
+var PluginManagerContext2 = createContext(void 0);
+var usePluginManager = () => useContext3(PluginManagerContext2) ?? raise2(new Error("Missing PluginManagerContext"));
+var PluginManagerProvider = PluginManagerContext2.Provider;
+
+// src/ui/components/Surface/context.ts
+import { createContext as createContext2 } from "react";
+var SurfaceContext = createContext2(void 0);
+
+// src/ui/components/Surface/SurfaceComponent.tsx
+import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
+import React5, { Fragment, Profiler, Suspense, forwardRef as forwardRef2, memo, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3 } from "react";
+import { log as log2 } from "@dxos/log";
+import { ErrorBoundary as ErrorBoundary2 } from "@dxos/react-error-boundary";
+import { useDefaultValue as useDefaultValue2 } from "@dxos/react-hooks";
+import { byPosition } from "@dxos/util";
+
+// src/ui/components/Surface/SurfaceInfo.tsx
+import React3, { 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
+  ]);
+  const childWithRef = /* @__PURE__ */ cloneElement(children, {
+    ref: mergedRef
+  });
+  useLayoutEffect(() => {
+    if (!root) {
+      setRect(null);
+      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();
+    });
+  }, [
+    root
+  ]);
+  const padding = 0;
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, childWithRef, rect && /* @__PURE__ */ createPortal(
+    /* @__PURE__ */ React3.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__ */ React3.createElement("div", {
+      className: "absolute inset-0 bg-deck-surface border border-green-500 cursor-pointer pointer-events-auto overflow-auto",
+      onPointerDown: (ev) => ev.stopPropagation(),
+      onClick: (ev) => {
+        ev.stopPropagation();
+        setExpand(false);
+      }
+    }, /* @__PURE__ */ React3.createElement("pre", {
+      className: "p-2 text-xs text-description font-mono"
+    }, JSON.stringify({
+      info
+    }, null, 2))) : /* @__PURE__ */ React3.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/SurfaceProfilerContext.tsx
+import React4, { createContext as createContext3, useContext as useContext4, useMemo as useMemo2, useRef as useRef2, useSyncExternalStore } from "react";
+var MAX_ENTRIES = 500;
+var SurfaceProfilerStore = class {
+  _entries = [];
+  _listeners = /* @__PURE__ */ new Set();
+  _snapshot = [];
+  _pendingNotify = false;
+  /** Records an entry and schedules a deferred notification to avoid re-render loops. */
+  record(entry) {
+    this._entries.push(entry);
+    if (this._entries.length > MAX_ENTRIES) {
+      this._entries = this._entries.slice(-MAX_ENTRIES);
+    }
+    this._snapshot = [
+      ...this._entries
+    ];
+    this._scheduleNotify();
+  }
+  clear() {
+    this._entries = [];
+    this._snapshot = [];
+    this._notifySync();
+  }
+  subscribe = (listener) => {
+    this._listeners.add(listener);
+    return () => {
+      this._listeners.delete(listener);
+    };
+  };
+  getSnapshot = () => {
+    return this._snapshot;
+  };
+  /**
+  * Defers notification to the next animation frame to break the
+  * Profiler onRender → record → notify → re-render → onRender loop.
+  */
+  _scheduleNotify() {
+    if (!this._pendingNotify) {
+      this._pendingNotify = true;
+      requestAnimationFrame(() => {
+        this._pendingNotify = false;
+        this._notifySync();
+      });
+    }
+  }
+  _notifySync() {
+    for (const listener of this._listeners) {
+      listener();
+    }
+  }
+};
+var SurfaceProfilerContext = /* @__PURE__ */ createContext3(void 0);
+var SurfaceProfilerProvider = ({ children }) => {
+  const storeRef = useRef2(null);
+  if (!storeRef.current) {
+    storeRef.current = new SurfaceProfilerStore();
+  }
+  return /* @__PURE__ */ React4.createElement(SurfaceProfilerContext.Provider, {
+    value: {
+      store: storeRef.current
+    }
+  }, children);
+};
+var useSurfaceProfilerCallback = () => {
+  const store = useContext4(SurfaceProfilerContext)?.store;
+  return useMemo2(() => {
+    if (!store) {
+      return void 0;
+    }
+    return (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+      store.record({
+        id,
+        phase,
+        actualDuration,
+        baseDuration,
+        startTime,
+        commitTime,
+        timestamp: Date.now()
+      });
+    };
+  }, [
+    store
+  ]);
+};
+var useSurfaceProfilerEntries = () => {
+  const context = useContext4(SurfaceProfilerContext);
+  return useSyncExternalStore(context?.store.subscribe ?? noop, context?.store.getSnapshot ?? emptySnapshot);
+};
+var useSurfaceProfilerStats = () => {
+  const entries = useSurfaceProfilerEntries();
+  const statsMap = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    let stats = statsMap.get(entry.id);
+    if (!stats) {
+      stats = {
+        id: entry.id,
+        mountCount: 0,
+        updateCount: 0,
+        totalRenders: 0,
+        avgActualDuration: 0,
+        maxActualDuration: 0,
+        avgBaseDuration: 0,
+        lastActualDuration: 0,
+        lastCommitTime: 0
+      };
+      statsMap.set(entry.id, stats);
+    }
+    if (entry.phase === "mount") {
+      stats.mountCount++;
+    } else {
+      stats.updateCount++;
+    }
+    stats.totalRenders++;
+    stats.avgActualDuration = (stats.avgActualDuration * (stats.totalRenders - 1) + entry.actualDuration) / stats.totalRenders;
+    stats.avgBaseDuration = (stats.avgBaseDuration * (stats.totalRenders - 1) + entry.baseDuration) / stats.totalRenders;
+    stats.maxActualDuration = Math.max(stats.maxActualDuration, entry.actualDuration);
+    stats.lastActualDuration = entry.actualDuration;
+    stats.lastCommitTime = entry.commitTime;
+  }
+  return [
+    ...statsMap.values()
+  ].sort((a, b) => b.maxActualDuration - a.maxActualDuration);
+};
+var useSurfaceProfilerClear = () => {
+  const store = useContext4(SurfaceProfilerContext)?.store;
+  return useMemo2(() => store ? () => store.clear() : void 0, [
+    store
+  ]);
+};
+var noop = () => () => {
+};
+var EMPTY_SNAPSHOT = [];
+var emptySnapshot = () => EMPTY_SNAPSHOT;
+
+// src/ui/components/Surface/SurfaceComponent.tsx
+var __dxlog_file3 = "/__w/dxos/dxos/packages/sdk/app-framework/src/ui/components/Surface/SurfaceComponent.tsx";
+var DEBUG = import.meta.env.VITE_DEBUG;
+var DEFAULT_PLACEHOLDER = /* @__PURE__ */ React5.createElement(Fragment, null);
+var WebComponentWrapper = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ id, role, data, limit, definition, ...rest }, forwardedRef) => {
+  const containerRef = useRef3(null);
+  const elementRef = useRef3(null);
+  const propsRef = useRef3({
+    id,
+    role,
+    data,
+    limit,
+    ...rest
+  });
+  propsRef.current = {
+    id,
+    role,
+    data,
+    limit,
+    ...rest
+  };
+  useEffect3(() => {
+    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;
+    };
+  }, [
+    definition.tagName,
+    forwardedRef
+  ]);
+  useEffect3(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return;
+    }
+    Object.assign(element, propsRef.current);
+  });
+  return /* @__PURE__ */ React5.createElement("div", {
+    ref: containerRef
+  });
+}));
+WebComponentWrapper.displayName = "WebComponentWrapper";
+var SurfaceContextProvider = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ id, role, data, limit, fallback = ErrorFallback2, definition, ...rest }, forwardedRef) => {
+  const contextValue = useMemo3(() => ({
+    id,
+    role,
+    data
+  }), [
+    id,
+    role,
+    data
+  ]);
+  const onProfilerRender = useSurfaceProfilerCallback();
+  const profilerId = `surface/${id}/${role}`;
+  if (definition.kind === "web-component") {
+    return /* @__PURE__ */ React5.createElement(ErrorBoundary2, {
+      name: "surface",
+      resetKeys: [
+        data
+      ],
+      FallbackComponent: fallback
+    }, /* @__PURE__ */ React5.createElement(SurfaceContext.Provider, {
+      value: contextValue
+    }, /* @__PURE__ */ React5.createElement(WebComponentWrapper, {
+      id,
+      role,
+      data,
+      limit,
+      definition,
+      ref: forwardedRef,
+      ...rest
+    })));
+  }
+  const Component = definition.component;
+  const debug = DEBUG || "__DX_DEBUG__" in window;
+  if (debug) {
+    return /* @__PURE__ */ React5.createElement(ErrorBoundary2, {
+      name: "surface",
+      resetKeys: [
+        data
+      ],
+      FallbackComponent: fallback
+    }, /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "contents",
+      "data-id": id,
+      "data-role": role
+    }, /* @__PURE__ */ React5.createElement(SurfaceContext.Provider, {
+      value: contextValue
+    }, /* @__PURE__ */ React5.createElement(SurfaceInfo, {
+      ref: forwardedRef
+    }, onProfilerRender && !profilerId.includes("org.dxos.plugin.debug") ? /* @__PURE__ */ React5.createElement(Profiler, {
+      id: profilerId,
+      onRender: onProfilerRender
+    }, /* @__PURE__ */ React5.createElement(Component, {
+      id,
+      role,
+      data,
+      limit,
+      ...rest
+    })) : /* @__PURE__ */ React5.createElement(Component, {
+      id,
+      role,
+      data,
+      limit,
+      ...rest
+    })))));
+  }
+  return /* @__PURE__ */ React5.createElement(ErrorBoundary2, {
+    name: "surface",
+    resetKeys: [
+      data
+    ],
+    FallbackComponent: fallback
+  }, /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "contents",
+    "data-id": id,
+    "data-role": role
+  }, /* @__PURE__ */ React5.createElement(SurfaceContext.Provider, {
+    value: contextValue
+  }, /* @__PURE__ */ React5.createElement(Component, {
+    id,
+    role,
+    data,
+    limit,
+    ...rest,
+    ref: forwardedRef
+  }))));
+}));
+SurfaceContextProvider.displayName = "SurfaceContextProvider";
+var SurfaceComponent = /* @__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: 195,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement(Suspense, {
+    fallback: placeholder
+  }, candidates.map((definition) => /* @__PURE__ */ React5.createElement(SurfaceContextProvider, {
+    key: definition.id,
+    id: definition.id,
+    role,
+    data,
+    limit,
+    definition,
+    ref: forwardedRef,
+    ...rest
+  })));
+}));
+SurfaceComponent.displayName = "Surface";
+var ErrorFallback2 = ({ error }) => {
+  const { message } = error instanceof Error ? error : {
+    message: String(error)
+  };
+  return /* @__PURE__ */ React5.createElement("div", {
+    role: "alert",
+    "data-testid": "error-boundary-fallback"
+  }, /* @__PURE__ */ React5.createElement("h1", {
+    className: "flex gap-2 text-sm mt-2 text-info-text"
+  }, message));
+};
+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 useSurfaces = () => {
+  const manager = usePluginManager();
+  const surfacesByModule = useAtomValue3(manager.capabilities.atomByModule(capabilities_exports.ReactSurface));
+  return useMemo3(() => {
+    const result = [];
+    for (const [moduleId, surfaces] of Object.entries(surfacesByModule)) {
+      for (const def of surfaces.flat()) {
+        result.push({
+          ...def,
+          id: `${moduleId}.${def.id}`
+        });
+      }
+    }
+    return result;
+  }, [
+    surfacesByModule
+  ]);
+};
+var isSurfaceAvailable = (capabilityManager, { role, data }) => {
+  const surfaces = capabilityManager.getAll(capabilities_exports.ReactSurface);
+  const candidates = findCandidates(surfaces.flat(), {
+    role,
+    data
+  });
+  return candidates.length > 0;
+};
+
+// src/ui/components/Surface/types.ts
+var create = (definition) => ({
+  ...definition,
+  kind: "react"
+});
+var createWeb = (definition) => ({
+  ...definition,
+  kind: "web-component"
+});
+
+// src/ui/components/Surface/index.ts
+(function(Surface2) {
+  Surface2.create = create;
+  Surface2.createWeb = createWeb;
+  Surface2.Context = SurfaceContext;
+  Surface2.Surface = SurfaceComponent;
+  Surface2.isAvailable = isSurfaceAvailable;
+  Surface2.ProfilerProvider = SurfaceProfilerProvider;
+  Surface2.useProfilerCallback = useSurfaceProfilerCallback;
+  Surface2.useProfilerEntries = useSurfaceProfilerEntries;
+  Surface2.useProfilerStats = useSurfaceProfilerStats;
+  Surface2.useProfilerClear = useSurfaceProfilerClear;
+})(Surface || (Surface = {}));
+var Surface;
+
+export {
+  useApp,
+  useCapabilities,
+  useCapability,
+  useAtomCapability,
+  useAtomCapabilityState,
+  useOperationInvoker,
+  LoadingState,
+  useLoading,
+  useSettingsState,
+  useSurface,
+  App,
+  usePluginManager,
+  PluginManagerProvider,
+  Surface
+};
+//# sourceMappingURL=chunk-LQKOTNJW.mjs.map