@dxos/app-framework 0.10.0 → 0.11.0

package/dist/lib/ui.mjs

@@ -0,0 +1,636 @@
+import { a as make } from "./chunk-plugin-manager.mjs";
+import { AtomRegistry, OperationInvoker, PluginManager, ProcessManagerRuntime, ReactContext, ReactRoot } from "./common/capabilities.mjs";
+import { SetupReactSurface, Startup } from "./common/activation-events.mjs";
+import { t as PluginManagerContext } from "./chunk-context.mjs";
+import { C as topologicalSort, S as usePluginManager, _ as surfaceMetrics, a as makeFilter, b as PluginManagerProvider, c as SurfaceProfilerProvider, d as useSurfaceProfilerEntries, f as useSurfaceProfilerStats, g as setSurfaceDebug, h as isSurfaceDebugEnabled, i as isFilter, l as useSurfaceProfilerCallback, m as useSurfaceManager, n as create, o as SurfaceComponent, p as SurfaceManagerProvider, r as createWeb, s as useIsSurfaceAvailable, t as SurfaceManager, u as useSurfaceProfilerClear, v as useSurfaceMetrics, x as useOptionalPluginManager, y as SurfaceContext } from "./chunk-SurfaceManager.mjs";
+import * as Effect from "effect/Effect";
+import * as Layer from "effect/Layer";
+import { Atom } from "@effect-atom/atom";
+import { invariant } from "@dxos/invariant";
+import { log } from "@dxos/log";
+import * as Fiber from "effect/Fiber";
+import * as PubSub from "effect/PubSub";
+import { EffectEx } from "@dxos/effect";
+import * as Queue from "effect/Queue";
+import { forwardRef, use, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { ErrorBoundary, ErrorFallback } from "@dxos/react-error-boundary";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { raise } from "@dxos/debug";
+import { useAsyncEffect, useDefaultValue } from "@dxos/react-hooks";
+import { RegistryContext, useAtomValue } from "@effect-atom/atom-react";
+import { ContextProtocolProvider } from "@dxos/web-context-react";
+import { Operation, ServiceResolver } from "@dxos/compute";
+import { Button, Input, Popover, SystemIconButton } from "@dxos/react-ui";
+import { mx } from "@dxos/ui-theme";
+//#region src/ui/hooks/useApp.tsx
+var __dxlog_file$1 = "/__w/dxos/dxos/packages/sdk/app-framework/src/ui/hooks/useApp.tsx";
+var ENABLED_KEY = "org.dxos.app-framework.enabled";
+/**
+* Expected usage is for this to be the entrypoint of the application.
+* Initializes plugins and renders the root components.
+*
+* @example
+* const plugins = [LayoutPlugin(), MyPlugin()];
+* const defaults = [MyPluginId];
+* const fallback = () => <div>Initializing Plugins...</div>;
+* const App = useApp({ plugins, defaults, fallback });
+* createRoot(document.getElementById('root')!).render(
+*   <StrictMode>
+*     <App />
+*   </StrictMode>,
+* );
+*
+* @param params.pluginLoader A function which loads new plugins.
+* @param params.plugins All plugins available to the application. Plugins whose `meta.profile.tags` includes `'system'` are treated as core (force-enabled, not user-toggleable).
+* @param params.defaults Default plugins are enabled by default but can be disabled by the user.
+* @param params.cacheEnabled Whether to cache enabled plugins in localStorage.
+* @param params.safeMode Whether to enable safe mode, which disables optional plugins.
+* @param params.fallback Fallback component to render if an error occurs during startup.
+*/
+var useApp = ({ pluginManager, pluginLoader: pluginLoaderProp, onPluginRemove, pluginRegistryProvider, plugins: pluginsProp, defaults: defaultsProp, setupEvents: setupEventsProp, fallback = ErrorFallback, cacheEnabled = false, safeMode = false, debounce = 0, timeout = 3e4 }) => {
+	const plugins = useDefaultValue(pluginsProp, () => []);
+	const defaults = useDefaultValue(defaultsProp, () => []);
+	const setupEvents = useDefaultValue(setupEventsProp, () => []);
+	const pluginLoader = useMemo(() => pluginLoaderProp ?? ((id) => Effect.sync(() => {
+		const plugin = plugins.find((plugin) => plugin.meta.profile.key === id);
+		invariant(plugin, `Plugin not found: ${id}`, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$1,
+			L: 127,
+			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 ?? make({
+			pluginLoader,
+			plugins,
+			enabled,
+			onRemove: onPluginRemove,
+			pluginRegistryProvider
+		});
+		log("useApp: useMemo created/reused manager", { provided: !!pluginManager }, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$1,
+			L: 159,
+			S: void 0
+		});
+		return mgr;
+	}, [
+		pluginManager,
+		pluginLoader,
+		plugins,
+		enabled,
+		onPluginRemove,
+		pluginRegistryProvider
+	]);
+	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, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$1,
+			L: 177,
+			S: void 0
+		});
+		manager.capabilities.contribute({
+			interface: PluginManager,
+			implementation: manager,
+			module: "org.dxos.app-framework.plugin-manager"
+		});
+		manager.capabilities.contribute({
+			interface: AtomRegistry,
+			implementation: manager.registry,
+			module: "org.dxos.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, module, error: error$ }) => Effect.sync(() => {
+				if (event === Startup.id && state === "activated" && !module) {
+					clearTimeout(timeoutId);
+					setReady(true);
+					readyRef.current = true;
+					globalThis.composer?.profiler?.dump();
+					if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent("app-framework:startup-activated"));
+					return;
+				}
+				if (module && state === "activating" && !readyRef.current) setStartupProgress((current) => ({
+					...current,
+					event: event || void 0,
+					module,
+					humanizedName: humanizeModuleId(module)
+				}));
+				if (module && state === "activated" && !readyRef.current) {
+					const active = manager.getActive();
+					const total = manager.getModules().length;
+					setStartupProgress((current) => ({
+						...current,
+						activated: active.length,
+						total,
+						progress: total > 0 ? active.length / total : 0
+					}));
+				}
+				if (event && !module && state === "activating" && !readyRef.current) setStartupProgress((current) => ({
+					...current,
+					event,
+					module: void 0,
+					humanizedName: humanizeEventKey(event)
+				}));
+				if (error$ && !readyRef.current) {
+					setError(error$);
+					errorRef.current = error$;
+				}
+			})), Effect.forever));
+			yield* Effect.all([
+				...setupEvents.map((event) => manager.activate(event)),
+				manager.activate(SetupReactSurface),
+				manager.activate(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()
+				}, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$1,
+					L: 297,
+					S: void 0
+				});
+				EffectEx.runAndForwardErrors(Fiber.interrupt(fiber));
+				setError(/* @__PURE__ */ new Error(`Startup timed out after ${timeout}ms`));
+			}
+		}, timeout);
+		return () => {
+			log("useApp: effect cleanup", void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file$1,
+				L: 308,
+				S: void 0
+			});
+			clearTimeout(timeoutId);
+			EffectEx.runAndForwardErrors(Fiber.interrupt(fiber));
+			if (!isExternalManager) EffectEx.runAndForwardErrors(manager.shutdown());
+		};
+	}, [manager]);
+	const progressRef = useRef(startupProgress);
+	progressRef.current = startupProgress;
+	const surfaces = useMemo(() => new SurfaceManager(manager.capabilities), [manager]);
+	return useCallback(() => /* @__PURE__ */ jsx(ErrorBoundary, {
+		name: "app",
+		FallbackComponent: fallback,
+		children: /* @__PURE__ */ jsx(PluginManagerProvider, {
+			value: manager,
+			children: /* @__PURE__ */ jsx(ContextProtocolProvider, {
+				value: manager,
+				context: PluginManagerContext,
+				children: /* @__PURE__ */ jsx(RegistryContext.Provider, {
+					value: manager.registry,
+					children: /* @__PURE__ */ jsx(SurfaceManagerProvider, {
+						value: surfaces,
+						children: /* @__PURE__ */ jsx(App, {
+							ready,
+							error,
+							debounce,
+							progress: progressRef.current
+						})
+					})
+				})
+			})
+		})
+	}), [
+		fallback,
+		manager,
+		surfaces,
+		ready,
+		error
+	]);
+};
+var setupDevtools = (manager) => {
+	globalThis.composer ??= {};
+	globalThis.composer.manager = manager;
+};
+/**
+* Extracts a human-readable label from a module ID.
+*
+* Module IDs follow `org.dxos.plugin.<plugin-slug>.module.<module-name>`,
+* where `<plugin-slug>` is kebab-case and `<module-name>` is either an
+* explicit string (often kebab-case, e.g. `'observability'`, `'namespace'`)
+* or a capability tag in PascalCase from `Capability.getModuleTag(...)`
+* (e.g. `'ReactSurface'`, `'AppGraphBuilder'`). The output is
+* `"Title Case Plugin: kebab-module"` so the visible status names both the
+* plugin and the aspect being activated, helping disambiguate the multiple
+* modules a plugin contributes.
+*
+* Examples:
+*   - "org.dxos.plugin.markdown.module.ReactSurface" → "Markdown: react-surface"
+*   - "org.dxos.plugin.observability.module.AppGraphBuilder" → "Observability: app-graph-builder"
+*   - "org.dxos.plugin.observability.module.observability" → "Observability"
+*     (the module name matches the plugin slug — collapsed to avoid
+*     "Observability: observability" noise.)
+*/
+var humanizeModuleId = (moduleId) => {
+	const match = moduleId.match(/\.plugin\.([^.]+)\.module\.(.+)$/);
+	if (!match) {
+		const parts = moduleId.split(".");
+		return parts[parts.length - 1];
+	}
+	const [, pluginSlug, moduleName] = match;
+	const pluginLabel = pluginSlug.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+	const moduleLabel = moduleName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase();
+	if (moduleLabel === pluginSlug) return pluginLabel;
+	return `${pluginLabel}: ${moduleLabel}`;
+};
+/**
+* Extracts a human-readable label from an activation event key.
+* E.g., "org.dxos.app-framework.event.setup-react-surface" → "Setup React Surface".
+*/
+var humanizeEventKey = (eventKey) => {
+	const id = eventKey.split(":")[0];
+	const match = id.match(/\.event\.(.+)$/);
+	return (match ? match[1] : id.split(".").pop() ?? id).split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+};
+//#endregion
+//#region src/ui/hooks/useCapabilities.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/sdk/app-framework/src/ui/hooks/useCapabilities.ts";
+/** Stable empty result for capability lookups made outside a plugin manager. */
+var emptyCapabilities = Atom.make(() => []);
+/** Stable atom yielding `undefined`, used as the fallback for optional atom-capability lookups. */
+var emptyAtomValue = Atom.make(() => void 0);
+/**
+* Hook to request capabilities from the plugin context.
+* @returns An array of capabilities.
+*/
+var useCapabilities = (interfaceDef) => {
+	return useAtomValue(usePluginManager().capabilities.atom(interfaceDef));
+};
+/**
+* Hook to request a capability from the plugin context.
+* @returns The capability.
+* @throws If no capability is found.
+*/
+var useCapability = (interfaceDef) => {
+	const capabilities = useCapabilities(interfaceDef);
+	invariant(capabilities.length > 0, `No capability found for ${interfaceDef.identifier}`, {
+		"~LogMeta": "~LogMeta",
+		F: __dxlog_file,
+		L: 38,
+		S: void 0,
+		A: ["capabilities.length > 0", "`No capability found for ${interfaceDef.identifier}`"]
+	});
+	return capabilities[0];
+};
+/**
+* Hook to request capabilities without requiring a plugin manager.
+* @returns An array of capabilities, or an empty array when rendered outside a {@link PluginManagerProvider}.
+*/
+var useOptionalCapabilities = (interfaceDef) => {
+	const manager = useOptionalPluginManager();
+	return useAtomValue(manager ? manager.capabilities.atom(interfaceDef) : emptyCapabilities);
+};
+/**
+* Hook to request a single capability without requiring a plugin manager.
+* @returns The first matching capability, or `undefined` when none is registered (or there is no plugin manager).
+*/
+var useOptionalCapability = (interfaceDef) => useOptionalCapabilities(interfaceDef)[0];
+/**
+* Hook to get the current value of an atom capability.
+* Automatically subscribes to changes.
+* @example const settings = useAtomCapability(CommentCapabilities.Settings);
+*/
+var useAtomCapability = (atomCapability) => {
+	return useAtomValue(useCapability(atomCapability));
+};
+/**
+* Hook to get value and updater for an atom capability.
+* Returns [currentValue, updateFn] similar to useState.
+* @example const [settings, updateSettings] = useAtomCapabilityState(CommentCapabilities.Settings);
+*/
+var useAtomCapabilityState = (atomCapability) => {
+	const registry = useCapability(AtomRegistry);
+	const atom = useCapability(atomCapability);
+	return [useAtomValue(atom), useCallback((fn) => {
+		registry.set(atom, fn(registry.get(atom)));
+	}, [registry, atom])];
+};
+/**
+* Tolerant variant of {@link useAtomCapabilityState}: returns `[undefined, noop]` when the atom
+* capability is not registered (e.g. the contributing plugin is not installed) rather than
+* throwing. The updater is a no-op while the capability is absent.
+*/
+var useOptionalAtomCapabilityState = (atomCapability) => {
+	const registry = useOptionalCapability(AtomRegistry);
+	const atom = useOptionalCapability(atomCapability);
+	return [useAtomValue(atom ?? emptyAtomValue), useCallback((fn) => {
+		if (registry && atom) registry.set(atom, fn(registry.get(atom)));
+	}, [registry, atom])];
+};
+/**
+* Hook to get the operation invoker capability.
+*/
+var useOperationInvoker = () => useCapability(OperationInvoker);
+//#endregion
+//#region src/ui/hooks/useLoading.tsx
+var LoadingState = /* @__PURE__ */ function(LoadingState) {
+	LoadingState[LoadingState["Loading"] = 0] = "Loading";
+	LoadingState[LoadingState["FadeIn"] = 1] = "FadeIn";
+	LoadingState[LoadingState["FadeOut"] = 2] = "FadeOut";
+	LoadingState[LoadingState["Done"] = 3] = "Done";
+	return LoadingState;
+}({});
+/**
+* To avoid "flashing" the placeholder, we wait a period of time before starting the loading animation.
+* If loading completes during this time the placehoder is not shown, otherwise is it displayed for a minimum period of time.
+*
+* States:
+* 0: Loading   - Wait for a period of time before starting the loading animation.
+* 1: Fade-in   - Display a loading animation.
+* 2: Fade-out  - Fade out the loading animation.
+* 3: Done      - Remove the placeholder.
+*/
+var useLoading = (ready, debounce = 0) => {
+	const [stage, setStage] = useState(0);
+	const readyRef = useRef(ready);
+	readyRef.current = ready;
+	useEffect(() => {
+		if (!debounce) return;
+		const i = setInterval(() => {
+			setStage((stage) => {
+				const isReady = readyRef.current;
+				switch (stage) {
+					case 0:
+						if (!isReady) return 1;
+						clearInterval(i);
+						return 3;
+					case 1:
+						if (isReady) return 2;
+						break;
+					case 2:
+						clearInterval(i);
+						return 3;
+				}
+				return stage;
+			});
+		}, debounce);
+		return () => clearInterval(i);
+	}, [debounce]);
+	if (!debounce) return ready ? 3 : 0;
+	return stage;
+};
+//#endregion
+//#region src/ui/hooks/useProcessManagerRuntime.ts
+/**
+* Resolve the shared {@link Capabilities.ProcessManagerRuntime} from the plugin context.
+*/
+var useProcessManagerRuntime = () => useCapability(ProcessManagerRuntime);
+/**
+* Build a callback that runs an effect on the {@link Capabilities.ProcessManagerRuntime}
+* with space-scoped services resolved via {@link ServiceResolver.provide}.
+*
+* The `tags` tuple must list every service the effect requires (beyond the
+* fixed {@link Capabilities.ProcessManagerRuntimeServices}); these services are
+* resolved for the given `spaceId` through the runtime's service resolver.
+*
+* Nested `Operation.invoke` / `Operation.schedule` calls within the effect
+* inherit `spaceId` as a default {@link Operation.InvokeOptions} so that
+* spawned operation processes have a space context (and therefore can resolve
+* space-scoped services like `Database.Service`) without each call site having
+* to thread the id through manually.
+*/
+var useSpaceCallback = (spaceId, tags, fn, deps) => {
+	const runtime = useProcessManagerRuntime();
+	return useCallback(() => {
+		if (spaceId === void 0) throw new TypeError("Space not provided to useSpaceCallback");
+		const layer = Layer.merge(ServiceResolver.provide({ space: spaceId }, ...tags), Operation.withInvocationOptions({ spaceId }));
+		return runtime.runPromise(fn().pipe(Effect.provide(layer)));
+	}, [
+		runtime,
+		spaceId,
+		...deps ?? []
+	]);
+};
+/**
+* Suspensefully resolve a single space-scoped service via the
+* {@link Capabilities.ProcessManagerRuntime}'s service resolver.
+*/
+var useSpaceService = (tag, spaceId) => {
+	const runtime = useProcessManagerRuntime();
+	const promise = useMemo(() => {
+		if (spaceId === void 0) return;
+		const layer = ServiceResolver.provide({ space: spaceId }, tag);
+		const effect = Effect.flatMap(tag, (service) => Effect.succeed(service)).pipe(Effect.provide(layer));
+		return runtime.runPromiseExit(effect);
+	}, [
+		runtime,
+		spaceId,
+		tag
+	]);
+	if (!promise) return;
+	return EffectEx.unwrapExit(use(promise));
+};
+//#endregion
+//#region src/ui/hooks/useSettingsState.ts
+/**
+* Hook to read and update a settings atom.
+* Returns the current value and an update function.
+*/
+var useSettingsState = (atom) => {
+	const registry = useContext(RegistryContext);
+	return {
+		settings: useAtomValue(atom),
+		updateSettings: useCallback((fn) => {
+			registry.set(atom, fn(registry.get(atom)));
+		}, [registry, atom])
+	};
+};
+//#endregion
+//#region src/ui/hooks/useSurface.ts
+var useSurface = () => {
+	return useContext(Surface.Context) ?? raise(/* @__PURE__ */ new Error("Missing SurfaceContext"));
+};
+//#endregion
+//#region src/ui/components/App/loader.ts
+var bootLoader = typeof window !== "undefined" ? window.__bootLoader : void 0;
+//#endregion
+//#region src/ui/components/App/App.tsx
+var FIRST_INTERACTIVE_MARK = "app-framework:first-interactive";
+var App = ({ ready, error, debounce, progress }) => {
+	const reactContexts = useCapabilities(ReactContext);
+	const reactRoots = useCapabilities(ReactRoot);
+	const stage = useLoading(ready, debounce);
+	const placeholderDismissed = stage >= LoadingState.Done;
+	useEffect(() => {
+		if (stage >= LoadingState.FadeOut) return;
+		const fraction = progress?.progress ?? 0;
+		bootLoader?.progress(.5 + fraction * .5);
+		if (progress?.humanizedName) bootLoader?.status({
+			event: progress.event,
+			module: progress.module,
+			humanized: `Activating ${progress.humanizedName}`
+		});
+	}, [
+		stage,
+		progress?.progress,
+		progress?.event,
+		progress?.module,
+		progress?.humanizedName
+	]);
+	useLayoutEffect(() => {
+		if (stage >= LoadingState.FadeOut) bootLoader?.ready();
+	}, [stage]);
+	useEffect(() => {
+		if (!placeholderDismissed) return;
+		if (performance.getEntriesByName(FIRST_INTERACTIVE_MARK).length === 0) performance.mark(FIRST_INTERACTIVE_MARK);
+		bootLoader?.dismiss();
+	}, [placeholderDismissed]);
+	if (location.search === "?throw") throw new Error("Test error");
+	if (error) throw error;
+	if (!placeholderDismissed) return null;
+	return /* @__PURE__ */ jsx(composeContexts(reactContexts), { children: reactRoots.map(({ id, root: Component }) => /* @__PURE__ */ jsx(Component, {}, id)) });
+};
+var composeContexts = (contexts) => {
+	if (contexts.length === 0) return ({ children }) => /* @__PURE__ */ jsx(Fragment$1, { children });
+	return topologicalSort(contexts).map(({ context }) => context).reduce((Acc, Next) => ({ children }) => /* @__PURE__ */ jsx(Acc, { children: /* @__PURE__ */ jsx(Next, { children }) }));
+};
+//#endregion
+//#region src/ui/components/HomeSection/HomeSection.tsx
+/**
+* Shared container for a Home content section: a centered, max-width column. Home surface
+* contributors (welcome, recent, dashboard, suggestions) render inside one so they share a
+* consistent width and rhythm regardless of which plugin owns them.
+*/
+var HomeSectionRoot = forwardRef(({ classNames, children }, forwardedRef) => /* @__PURE__ */ jsx("div", {
+	ref: forwardedRef,
+	className: mx("flex flex-col w-full mx-auto max-w-[40rem]", classNames),
+	children
+}));
+HomeSectionRoot.displayName = "HomeSection.Root";
+/**
+* Header row for a Home section: a muted title, an optional trailing actions slot (`children`),
+* and an optional close affordance. `children` render before the close button so section-specific
+* controls (e.g. a range selector) sit inline with it.
+*/
+var HomeSectionHeader = forwardRef(({ title, onClose, classNames, children }, forwardedRef) => /* @__PURE__ */ jsxs("div", {
+	ref: forwardedRef,
+	className: mx("flex items-center gap-2", classNames),
+	children: [
+		title && /* @__PURE__ */ jsx("h2", {
+			className: "grow truncate text-sm font-medium text-description",
+			children: title
+		}),
+		!title && /* @__PURE__ */ jsx("span", { className: "grow" }),
+		children,
+		onClose && /* @__PURE__ */ jsx(SystemIconButton.Close, {
+			variant: "ghost",
+			iconOnly: true,
+			onClick: onClose
+		})
+	]
+}));
+HomeSectionHeader.displayName = "HomeSection.Header";
+var HomeSection = {
+	Root: HomeSectionRoot,
+	Header: HomeSectionHeader
+};
+//#endregion
+//#region src/ui/components/NamePopover/NamePopover.tsx
+/**
+* Name-entry popover anchored to its trigger (mirrors the object rename popover UX).
+* Enter or the submit button commits — an empty name is allowed; Escape or dismissal cancels.
+*/
+var NamePopover = ({ children, open, placeholder, submitLabel, onSubmit, onCancel }) => {
+	const [value, setValue] = useState("");
+	const submit = () => {
+		onSubmit(value);
+		setValue("");
+	};
+	const cancel = () => {
+		onCancel();
+		setValue("");
+	};
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: (next) => !next && cancel(),
+		children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 p-2",
+			children: [/* @__PURE__ */ jsxs(Input.Root, { children: [/* @__PURE__ */ jsx(Input.Label, {
+				srOnly: true,
+				children: placeholder
+			}), /* @__PURE__ */ jsx(Input.TextInput, {
+				autoFocus: true,
+				placeholder,
+				value,
+				onChange: (event) => setValue(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Enter") submit();
+					else if (event.key === "Escape") {
+						event.preventDefault();
+						event.stopPropagation();
+						cancel();
+					}
+				}
+			})] }), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				onClick: submit,
+				children: submitLabel
+			})]
+		}), /* @__PURE__ */ jsx(Popover.Arrow, {})] }) })]
+	});
+};
+NamePopover.displayName = "NamePopover";
+//#endregion
+//#region src/ui/components/Surface/index.ts
+var Surface;
+(function(_Surface) {
+	_Surface.create = create;
+	_Surface.createWeb = createWeb;
+	_Surface.Context = SurfaceContext;
+	_Surface.Surface = SurfaceComponent;
+	_Surface.useIsAvailable = useIsSurfaceAvailable;
+	_Surface.makeFilter = makeFilter;
+	_Surface.isFilter = isFilter;
+	_Surface.isDebugEnabled = isSurfaceDebugEnabled;
+	_Surface.setDebug = setSurfaceDebug;
+	_Surface.ProfilerProvider = SurfaceProfilerProvider;
+	_Surface.useProfilerCallback = useSurfaceProfilerCallback;
+	_Surface.useProfilerEntries = useSurfaceProfilerEntries;
+	_Surface.useProfilerStats = useSurfaceProfilerStats;
+	_Surface.useProfilerClear = useSurfaceProfilerClear;
+	_Surface.useMetrics = useSurfaceMetrics;
+	_Surface.clearMetrics = () => surfaceMetrics.clear();
+})(Surface || (Surface = {}));
+//#endregion
+export { App, HomeSection, LoadingState, NamePopover, PluginManagerProvider, Surface, SurfaceManager, SurfaceManagerProvider, bootLoader, useApp, useAtomCapability, useAtomCapabilityState, useCapabilities, useCapability, useLoading, useOperationInvoker, useOptionalAtomCapabilityState, useOptionalCapabilities, useOptionalCapability, useOptionalPluginManager, usePluginManager, useProcessManagerRuntime, useSettingsState, useSpaceCallback, useSpaceService, useSurface, useSurfaceManager };
+
+//# sourceMappingURL=ui.mjs.map