@superblocksteam/library 2.0.174-next.0 → 2.0.175-next.0

package/dist/{root-store-G9HJE1Mf.js → jsx-wrapper-BAO7prWO.js}

@@ -1,19 +1,36 @@
-import { t as getTracer } from "./utils-DXaAwgS_.js";
+import { initBrowserMetrics } from "@superblocksteam/telemetry/browser";
 import { action, entries, isComputedProp, isObservableArray, isObservableMap, isObservableObject, makeAutoObservable, makeObservable, observable, observe, reaction, toJS, values } from "mobx";
 import { matchRoutes } from "react-router";
-import { URL_PARAMS, getQueryParams, pathStringToArray, toMobXPatch } from "@superblocksteam/library-shared";
+import { NO_SELECT_ATTRIBUTE, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, URL_PARAMS, getQueryParams, pathStringToArray, toMobXPatch } from "@superblocksteam/library-shared";
 import * as React$1 from "react";
-import { createContext, isValidElement, useCallback, useContext, useMemo, useSyncExternalStore } from "react";
-import { pick, throttle } from "lodash";
-import { ApiResponseType, OrchestratorViewMode, SUPERBLOCKS_AUTHORIZATION_HEADER, SUPERBLOCKS_REQUEST_ID_HEADER, ViewMode, decodeBytestrings } from "@superblocksteam/shared";
-import isString from "lodash/isString.js";
+import React, { Component, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { throttle } from "lodash-es";
+import { ApiResponseType, SUPERBLOCKS_AUTHORIZATION_HEADER, SUPERBLOCKS_REQUEST_ID_HEADER, ViewMode, decodeBytestrings } from "@superblocksteam/shared";
 import { toast } from "sonner";
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import { NotificationPosition } from "@superblocksteam/library-shared/types";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ROOT_CONTEXT, context, propagation, trace } from "@opentelemetry/api";
+import { CompositePropagator, W3CBaggagePropagator, W3CTraceContextPropagator } from "@opentelemetry/core";
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
+import { resourceFromAttributes } from "@opentelemetry/resources";
+import { BatchSpanProcessor } from "@opentelemetry/sdk-trace-base";
+import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
+import { ATTR_SERVICE_NAME } from "@opentelemetry/semantic-conventions";
 import diff from "microdiff";
-//#region src/lib/internal-details/is-edit-mode.ts
+import { Observer } from "mobx-react-lite";
+// \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+// src/lib/internal-details/is-edit-mode.ts
 const getIsEditMode = () => {
 	return window._SB_VIEW_MODE === "dev";
 };
@@ -22,8 +39,7 @@ const isEditMode = () => {
 	if (editMode === void 0) editMode = getIsEditMode();
 	return editMode;
 };
-//#endregion
-//#region src/lib/utils/clean-object.ts
+// src/lib/utils/clean-object.ts
 const isReactElement = (obj) => {
 	return obj && (obj.$$typeof === Symbol.for("react.element") || isValidElement(obj) || typeof Node !== "undefined" && obj instanceof Node);
 };
@@ -60,8 +76,7 @@ function cleanObject(obj) {
 		return acc;
 	}, {});
 }
-//#endregion
-//#region src/lib/internal-details/lib/iframe.ts
+// src/lib/internal-details/lib/iframe.ts
 function isEmbeddedBySuperblocksFirstParty() {
 	return typeof window !== "undefined" && window !== window.parent;
 }
@@ -129,8 +144,7 @@ var SbIframeEventInternal = class extends Event {
 };
 var SbMessageHandler = class extends EventTarget {};
 const iframeMessageHandler = new SbMessageHandler();
-//#endregion
-//#region src/edit-mode/base-editor-bridge.ts
+// src/edit-mode/base-editor-bridge.ts
 var DeployedParentBridge = class {
 	navigateTo(url, newWindow) {
 		sendMessageImmediately({
@@ -191,8 +205,7 @@ var DeployedParentBridge = class {
 		});
 	}
 };
-//#endregion
-//#region src/edit-mode/get-edit-store.ts
+// src/edit-mode/get-edit-store.ts
 /**
 * Get the global EditStore instance
 * @returns The EditStore instance
@@ -201,8 +214,7 @@ function getEditStore() {
 	if (!window.__SUPERBLOCKS_EDITOR_HOOK__ || !window.__SUPERBLOCKS_EDITOR_HOOK__.isInitialized) throw new Error("EditStore not initialized");
 	return window.__SUPERBLOCKS_EDITOR_HOOK__;
 }
-//#endregion
-//#region src/edit-mode/load-timings.ts
+// src/edit-mode/load-timings.ts
 const MARK_PREFIX = "sb-load:";
 const SLOWEST_RESOURCE_COUNT = 5;
 /** Records the first time this iframe document reaches a load milestone. */
@@ -265,8 +277,7 @@ function summarizeLoadTimings(input) {
 		}))
 	};
 }
-//#endregion
-//#region src/edit-mode/message-queue.ts
+// src/edit-mode/message-queue.ts
 const MESSAGE_BATCH_TIME = 50;
 const DEFAULT_KEY = "default";
 var MessageQueue = class {
@@ -295,8 +306,7 @@ var MessageQueue = class {
 	}
 };
 var message_queue_default = new MessageQueue();
-//#endregion
-//#region src/edit-mode/superblocks-editor-bridge.ts
+// src/edit-mode/superblocks-editor-bridge.ts
 var SuperblocksEditorBridge = class SuperblocksEditorBridge {
 	static instance;
 	messagesToSend = [];
@@ -656,12 +666,11 @@ const MAX_AI_PROMPT_LENGTH = 16e3;
 const TRUNCATION_SUFFIX = "... (truncated)";
 function clampPromptLength(prompt) {
 	if (prompt.length <= MAX_AI_PROMPT_LENGTH) return prompt;
-	const available = Math.max(MAX_AI_PROMPT_LENGTH - 15, 0);
+	const available = Math.max(15985, 0);
 	return `${prompt.slice(0, available)}${TRUNCATION_SUFFIX}`;
 }
 const editorBridge = SuperblocksEditorBridge.getInstance();
-//#endregion
-//#region src/lib/internal-details/location-store.ts
+// src/lib/internal-details/location-store.ts
 var LocationStore = class {
 	route;
 	rootStore;
@@ -707,106 +716,101 @@ var LocationStore = class {
 		};
 	}
 };
-//#endregion
-//#region src/lib/user-facing/assets/icons/system-danger.svg
-var _path$3;
-function _extends$3() {
-	return _extends$3 = Object.assign ? Object.assign.bind() : function(n) {
+// src/lib/user-facing/assets/icons/system-danger.svg
+var _path$5;
+function _extends$5() {
+	return _extends$5 = Object.assign ? Object.assign.bind() : function(n) {
 		for (var e = 1; e < arguments.length; e++) {
 			var t = arguments[e];
 			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
 		}
 		return n;
-	}, _extends$3.apply(null, arguments);
+	}, _extends$5.apply(null, arguments);
 }
 var SvgSystemDanger = function SvgSystemDanger(props) {
-	return /* @__PURE__ */ React$1.createElement("svg", _extends$3({
+	return /*#__PURE__*/ React$1.createElement("svg", _extends$5({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: 16,
 		height: 16,
 		fill: "none"
-	}, props), _path$3 || (_path$3 = /* @__PURE__ */ React$1.createElement("path", {
+	}, props), _path$5 || (_path$5 = /*#__PURE__*/ React$1.createElement("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
 		d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m.75-10a.75.75 0 0 0-1.5 0v3a.75.75 0 1 0 1.5 0zM8 9.75a1 1 0 1 0 0 2 1 1 0 0 0 0-2",
 		clipRule: "evenodd"
 	})));
 };
-//#endregion
-//#region src/lib/user-facing/assets/icons/system-error.svg
-var _path$2;
-function _extends$2() {
-	return _extends$2 = Object.assign ? Object.assign.bind() : function(n) {
+// src/lib/user-facing/assets/icons/system-error.svg
+var _path$4;
+function _extends$4() {
+	return _extends$4 = Object.assign ? Object.assign.bind() : function(n) {
 		for (var e = 1; e < arguments.length; e++) {
 			var t = arguments[e];
 			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
 		}
 		return n;
-	}, _extends$2.apply(null, arguments);
+	}, _extends$4.apply(null, arguments);
 }
 var SvgSystemError = function SvgSystemError(props) {
-	return /* @__PURE__ */ React$1.createElement("svg", _extends$2({
+	return /*#__PURE__*/ React$1.createElement("svg", _extends$4({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: 16,
 		height: 16,
 		fill: "none"
-	}, props), _path$2 || (_path$2 = /* @__PURE__ */ React$1.createElement("path", {
+	}, props), _path$4 || (_path$4 = /*#__PURE__*/ React$1.createElement("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
 		d: "M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0M5.942 5.058a.625.625 0 1 0-.884.884L7.116 8l-2.058 2.058a.625.625 0 1 0 .884.884L8 8.884l2.058 2.058a.625.625 0 1 0 .884-.884L8.884 8l2.058-2.058a.625.625 0 1 0-.884-.884L8 7.116z",
 		clipRule: "evenodd"
 	})));
 };
-//#endregion
-//#region src/lib/user-facing/assets/icons/system-info.svg
-var _path$1;
-function _extends$1() {
-	return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
+// src/lib/user-facing/assets/icons/system-info.svg
+var _path$3;
+function _extends$3() {
+	return _extends$3 = Object.assign ? Object.assign.bind() : function(n) {
 		for (var e = 1; e < arguments.length; e++) {
 			var t = arguments[e];
 			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
 		}
 		return n;
-	}, _extends$1.apply(null, arguments);
+	}, _extends$3.apply(null, arguments);
 }
 var SvgSystemInfo = function SvgSystemInfo(props) {
-	return /* @__PURE__ */ React$1.createElement("svg", _extends$1({
+	return /*#__PURE__*/ React$1.createElement("svg", _extends$3({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: 16,
 		height: 16,
 		fill: "none"
-	}, props), _path$1 || (_path$1 = /* @__PURE__ */ React$1.createElement("path", {
+	}, props), _path$3 || (_path$3 = /*#__PURE__*/ React$1.createElement("path", {
 		fill: "currentColor",
 		d: "M8 1a7 7 0 1 0 7 7 7.014 7.014 0 0 0-7-7m-.135 3.23a.808.808 0 1 1 0 1.616.808.808 0 0 1 0-1.615m.673 7.54H8a.54.54 0 0 1-.538-.54V8a.538.538 0 1 1 0-1.077H8a.54.54 0 0 1 .538.539v3.23a.538.538 0 1 1 0 1.077"
 	})));
 };
-//#endregion
-//#region src/lib/user-facing/assets/icons/system-success.svg
-var _path;
-function _extends() {
-	return _extends = Object.assign ? Object.assign.bind() : function(n) {
+// src/lib/user-facing/assets/icons/system-success.svg
+var _path$2;
+function _extends$2() {
+	return _extends$2 = Object.assign ? Object.assign.bind() : function(n) {
 		for (var e = 1; e < arguments.length; e++) {
 			var t = arguments[e];
 			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
 		}
 		return n;
-	}, _extends.apply(null, arguments);
+	}, _extends$2.apply(null, arguments);
 }
 var SvgSystemSuccess = function SvgSystemSuccess(props) {
-	return /* @__PURE__ */ React$1.createElement("svg", _extends({
+	return /*#__PURE__*/ React$1.createElement("svg", _extends$2({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: 16,
 		height: 16,
 		fill: "none"
-	}, props), _path || (_path = /* @__PURE__ */ React$1.createElement("path", {
+	}, props), _path$2 || (_path$2 = /*#__PURE__*/ React$1.createElement("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
 		d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m3.442-8.058a.625.625 0 1 0-.884-.884L7.5 9.116 5.942 7.558a.625.625 0 1 0-.884.884l2 2c.244.244.64.244.884 0z",
 		clipRule: "evenodd"
 	})));
 };
-//#endregion
-//#region src/lib/user-facing/styling/colors.ts
+// src/lib/user-facing/styling/colors.ts
 const colors = {
 	WHITE: "#FFFFFF",
 	BLACK: "#000000",
@@ -936,8 +940,7 @@ const CLASS_NAMES = {
 	CODE_EDITOR: "sb-code-editor",
 	ERROR_INLINE_MESSAGE: "sb-error-inline-message"
 };
-//#endregion
-//#region src/lib/user-facing/utils/notification.tsx
+// src/lib/user-facing/utils/notification.tsx
 const activeNotifications = /* @__PURE__ */ new Map();
 const StatusIconWrapper = styled.div`
   color: ${(props) => props.color};
@@ -980,7 +983,7 @@ const messageWithCount = (key, message, dataTest) => {
 			count,
 			message
 		});
-		if (count > 1 && isString(message)) updatedMessage = `${message} (${count} times)`;
+		if (count > 1 && typeof message === "string") updatedMessage = `${message} (${count} times)`;
 	}
 	return styleMessage(updatedMessage, dataTest);
 };
@@ -990,7 +993,7 @@ const messageWithCount = (key, message, dataTest) => {
 * @returns A string key based on inputs
 */
 const getKey = (type, message, description, duration) => {
-	return isString(message) ? `${type}--${String(message)}--${description}--${duration}` : void 0;
+	return typeof message === "string" ? `${type}--${String(message)}--${description}--${duration}` : void 0;
 };
 const removeNotificationsWithKey = (key) => {
 	document.querySelectorAll(`[data-testid="notification_${key}"]`).forEach((el) => {
@@ -1019,7 +1022,6 @@ const getIcon = (type) => {
 		case "warning":
 			icon = /* @__PURE__ */ jsx(SvgSystemDanger, {});
 			color = colors.WARNING;
-			break;
 	}
 	return /* @__PURE__ */ jsx(StatusIconWrapper, {
 		color,
@@ -1060,13 +1062,11 @@ function sendNotification({ message, description, duration, key = getKey("succes
 		onAutoClose: handleClose
 	});
 }
-//#endregion
-//#region src/lib/utils/generate-id.ts
+// src/lib/utils/generate-id.ts
 const generateId = () => {
 	return Math.random().toString(36).substring(2, 15);
 };
-//#endregion
-//#region src/lib/internal-details/embed-store.ts
+// src/lib/internal-details/embed-store.ts
 /**
 * Store for managing embed properties and events.
 * Used when the library is embedded in an external application (third-party embedding).
@@ -1117,15 +1117,13 @@ var EmbedStore = class {
 	}
 };
 const embedStore = new EmbedStore();
-//#endregion
-//#region src/lib/internal-details/scope/types.ts
+// src/lib/internal-details/scope/types.ts
 const AppMode = {
 	EDIT: "EDIT",
 	PUBLISHED: "PUBLISHED",
 	PREVIEW: "PREVIEW"
 };
-//#endregion
-//#region src/lib/internal-details/superblocks-context.tsx
+// src/lib/internal-details/superblocks-context.tsx
 var SuperblocksAppContext = class {
 	context;
 	constructor() {
@@ -1226,8 +1224,7 @@ function getAppMode() {
 	}
 	return appMode;
 }
-//#endregion
-//#region src/lib/internal-details/lib/resolve-id-singleton.ts
+// src/lib/internal-details/lib/resolve-id-singleton.ts
 const EMBED_STRING = `embedded-`;
 let promiseCount = 0;
 const resolverMap = /* @__PURE__ */ new Map();
@@ -1331,8 +1328,55 @@ const tracker = new class ApiHmrTracker {
 if (import.meta.hot) import.meta.hot.on("vite:beforeUpdate", () => {
 	tracker.incReloadCount();
 });
-//#endregion
-//#region src/lib/tracing/context-utils.ts
+// src/lib/utils.ts
+var utils_exports = /* @__PURE__ */ __exportAll({
+	getTracer: () => getTracer,
+	initTracerProviderWithOrigin: () => initTracerProviderWithOrigin
+});
+const serviceName = "superblocks-ui-framework";
+let otlpEndpoint = void 0;
+const otlpPath = "/api/v1/traces";
+let metricsInitialized = false;
+let currentProvider;
+const ATTR_DEPLOYMENT_ENVIRONMENT_NAME = "deployment.environment.name";
+function initTracerProviderWithOrigin(windowOriginUrl) {
+	otlpEndpoint = windowOriginUrl + otlpPath;
+	const resource = resourceFromAttributes({
+		[ATTR_DEPLOYMENT_ENVIRONMENT_NAME]: getEnvironmentFromHostname(new URL(windowOriginUrl).hostname),
+		[ATTR_SERVICE_NAME]: serviceName
+	});
+	if (!metricsInitialized) {
+		initBrowserMetrics({
+			otlpUrl: windowOriginUrl + "/api/v1/metrics",
+			resource,
+			serviceName
+		});
+		metricsInitialized = true;
+	}
+	console.debug("Initializing direct OTLP tracer provider for iframe to:", otlpEndpoint);
+	const provider = new WebTracerProvider({
+		resource,
+		spanProcessors: [new BatchSpanProcessor(new OTLPTraceExporter({ url: otlpEndpoint }))]
+	});
+	provider.register({ propagator: new CompositePropagator({ propagators: [new W3CBaggagePropagator(), new W3CTraceContextPropagator()] }) });
+	currentProvider = provider;
+	console.debug("Direct OTLP tracing initialized for iframe with dynamic origin");
+	return provider;
+}
+function getEnvironmentFromHostname(hostname) {
+	if (hostname.match(/^app\.superblocks(?:hq)?\.com/)) return "prod";
+	else if (hostname.match(/^eu\.superblocks(?:hq)?\.com/)) return "prod-eu";
+	else if (hostname.match(/^staging\.superblocks(?:hq)?\.com/)) return "staging";
+	else if (hostname.match(/^dev\.superblocks(?:hq)?\.com/)) return "dev";
+	else if (hostname.match(/^pr-[0-9]+(?:-cp)?\.superblocks(?:hq)?\.dev/)) return "ephemeral";
+	else if (hostname.match(/^localhost/)) return "local";
+	else return "other";
+}
+function getTracer(name) {
+	if (!currentProvider) console.error("Tracer provider not initialized. Call initTracerProviderWithOrigin() first with a valid windowOriginUrl. Tracing will be disabled.");
+	return trace.getTracer(name || serviceName);
+}
+// src/lib/tracing/context-utils.ts
 function getContextFromTraceHeaders(traceHeaders) {
 	let parentContext = context.active();
 	try {
@@ -1351,8 +1395,7 @@ function getTraceContextHeadersFromSpan(span) {
 	propagation.inject(contextWithSpan, traceContextHeaders);
 	return traceContextHeaders;
 }
-//#endregion
-//#region src/lib/internal-details/lib/features/api-utils.ts
+// src/lib/internal-details/lib/features/api-utils.ts
 async function executeV2Api(params) {
 	const { body, apiName, controlFlowOnlyFiles, notifyOnSystemError, eventType, onMessage, processStreamEvents, responseType, abortController, baseUrl, viewMode, accessToken, token, maxResponseBytes, traceHeaders } = params;
 	let parentContext = context.active();
@@ -1685,6 +1728,7 @@ const boundRunRecordStepLogs = (stepLogs, reuse) => {
 	};
 };
 var ResponseSizeLimitError = class extends Error {
+	limitBytes;
 	constructor(limitBytes) {
 		super(`Response blocked: exceeded orchestrator /execute response limit of ${limitBytes} bytes.`);
 		this.limitBytes = limitBytes;
@@ -1766,8 +1810,7 @@ const decodeBytestringsInV2ExecutionResponse = (response) => {
 		if (typedEvent?.end?.output?.result != null) typedEvent.end.output.result = decodeBytestrings(typedEvent.end.output.result, false);
 	});
 };
-//#endregion
-//#region src/lib/internal-details/lib/features/file-utils.ts
+// src/lib/internal-details/lib/features/file-utils.ts
 function isNativeFile(value) {
 	return typeof File !== "undefined" && value instanceof File;
 }
@@ -1841,8 +1884,7 @@ async function getInputsWithFileMetadata(inputs) {
 		files: Object.values(filesForRequest)
 	};
 }
-//#endregion
-//#region src/lib/internal-details/lib/features/url-utils.ts
+// src/lib/internal-details/lib/features/url-utils.ts
 /**
 * Ensures a base URL has a trailing slash for proper path joining.
 *
@@ -1858,9 +1900,13 @@ async function getInputsWithFileMetadata(inputs) {
 function withTrailingSlash(baseUrl) {
 	return baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
 }
-//#endregion
-//#region src/lib/internal-details/lib/features/api-store.ts
+// src/lib/internal-details/lib/features/api-store.ts
 const ENVIRONMENT_ALL = "*";
+const OrchestratorViewMode = {
+	EDIT: 1,
+	PREVIEW: 2,
+	DEPLOYED: 3
+};
 function getFetchByPathViewMode(appMode, editMode) {
 	if (appMode === AppMode.PREVIEW) return OrchestratorViewMode.PREVIEW;
 	if (appMode === AppMode.PUBLISHED) return OrchestratorViewMode.DEPLOYED;
@@ -1879,6 +1925,7 @@ function isAgentProfileSupported(agent, targetEnvironment) {
 	return supportedProfiles.includes(targetEnvironment);
 }
 var ApiManager = class {
+	rootStore;
 	/**
 	* Pre-filtered agent URLs for the current profile, sent by the parent.
 	* Used as fallback for cloud orgs where URLs come from
@@ -2404,8 +2451,10 @@ var ApiManager = class {
 		const abortController = new AbortController();
 		(this.runningApiControllers[apiName] ??= /* @__PURE__ */ new Set()).add(abortController);
 		const forwardAbort = () => abortController.abort();
-		if (options?.signal) if (options.signal.aborted) abortController.abort();
-		else options.signal.addEventListener("abort", forwardAbort, { once: true });
+		if (options?.signal) {
+			if (options.signal.aborted) abortController.abort();
+			else options.signal.addEventListener("abort", forwardAbort, { once: true });
+		}
 		try {
 			let entryPoint = this.rootStore.getApiEntryPoint(apiName);
 			if (!entryPoint) {
@@ -2417,7 +2466,7 @@ var ApiManager = class {
 			}
 			if (!entryPoint && this.rootStore.sdkApiEnabled) try {
 				const rediscoveryT0 = performance.now();
-				const { discoverAndRegisterSdkApis } = await import("./sdk-api-discovery-_lfMr9d5.js").then((n) => n.n);
+				const { discoverAndRegisterSdkApis } = await import("./sdk-api-discovery-CtyMcIGP.js").then((n) => n.n);
 				await discoverAndRegisterSdkApis();
 				const rediscoveryMs = Math.round(performance.now() - rediscoveryT0);
 				discoveryMs += rediscoveryMs;
@@ -2630,8 +2679,7 @@ var ApiManager = class {
 		});
 	}
 };
-//#endregion
-//#region src/lib/internal-details/lib/evaluator/sanitize-object.ts
+// src/lib/internal-details/lib/evaluator/sanitize-object.ts
 const objectFallbackCache = /* @__PURE__ */ new WeakMap();
 function sanitizeObject(obj) {
 	if (!objectFallbackCache.has(obj)) objectFallbackCache.set(obj, {});
@@ -2651,8 +2699,7 @@ function sanitizedToJS(value) {
 	if (value === null || value === void 0 || typeof value !== "object") return toJS(value);
 	return toJS(sanitizeObject(value));
 }
-//#endregion
-//#region src/edit-mode/mobx-sync/create-patch.ts
+// src/edit-mode/mobx-sync/create-patch.ts
 const microPatches = (oldValue, newValue, baseStr) => {
 	const cleanedOldValue = removeBindAndReactElements(oldValue);
 	const cleanedNewValue = removeBindAndReactElements(newValue);
@@ -2706,8 +2753,7 @@ const removeBindAndReactElements = (value) => {
 		return [key, removeBindAndReactElements(value)];
 	}));
 };
-//#endregion
-//#region src/edit-mode/mobx-sync/deep-observe.ts
+// src/edit-mode/mobx-sync/deep-observe.ts
 function buildPath(entry) {
 	if (!entry) return "ROOT";
 	const res = [];
@@ -2765,7 +2811,6 @@ function deepObserve(target, listener) {
 					const entry = entrySet.get(change.object[i]);
 					if (entry) entry.path = "" + i;
 				}
-				break;
 		}
 	}
 	function observeRecursively(thing, parent, path) {
@@ -2798,8 +2843,7 @@ function deepObserve(target, listener) {
 		unobserveRecursively(target);
 	};
 }
-//#endregion
-//#region src/edit-mode/mobx-sync/mobx-editor-sync.ts
+// src/edit-mode/mobx-sync/mobx-editor-sync.ts
 /**
 * Syncs a mobx store to the editor automatically through postmessage
 */
@@ -2811,7 +2855,7 @@ function startEditorSync(options) {
 		name: `editor-sync(${storeId})`
 	};
 	let initialState;
-	if (keys) initialState = sanitizedToJS(pick(store, Object.keys(keys)));
+	if (keys) initialState = sanitizedToJS(Object.fromEntries(Object.keys(keys).filter((key) => key in store).map((key) => [key, Reflect.get(store, key)])));
 	else if (projection) initialState = sanitizedToJS(projection(store));
 	else initialState = sanitizedToJS(store);
 	editorBridge.initializeEditorSyncedStore({
@@ -2903,8 +2947,7 @@ function startEditorSync(options) {
 		disposers.forEach((disposer) => disposer());
 	};
 }
-//#endregion
-//#region src/lib/internal-details/lib/features/type-defs-utils.ts
+// src/lib/internal-details/lib/features/type-defs-utils.ts
 const analyzePropertyType = (propData, prop) => {
 	let dataType;
 	if (propData.dataType === "composite" && prop && typeof prop.getProps === "function") {
@@ -2923,13 +2966,13 @@ const analyzePropertyType = (propData, prop) => {
 	else dataType = "unknown";
 	return dataType;
 };
-//#endregion
-//#region src/lib/internal-details/lib/features/component-registry.ts
+// src/lib/internal-details/lib/features/component-registry.ts
 /**
 * TODO: The component registry could be split into two a thin layer always on, and move some stuff to the EditStore.
 * Some of the actions (rename, delete) and some of the data (isDroppable) are editor-only.
 */
 var ComponentRegistry = class {
+	rootStore;
 	_componentRegistry = /* @__PURE__ */ new Map();
 	_componentToType = /* @__PURE__ */ new WeakMap();
 	constructor(rootStore) {
@@ -3041,8 +3084,7 @@ var ComponentRegistry = class {
 		return this._componentToType.has(component);
 	}
 };
-//#endregion
-//#region src/lib/internal-details/lib/root-store.ts
+// src/lib/internal-details/lib/root-store.ts
 const ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG = "orchestrator.execute.response-size-limit.bytes";
 /**
 * Default user object for when no user info is available.
@@ -3250,7 +3292,629 @@ var RootStore = class {
 	}
 };
 var root_store_default = new RootStore();
-//#endregion
-export { getParentOrigin as C, isEditMode as D, sendMessageImmediately as E, getEditStore as S, isEmbeddedBySuperblocksFirstParty as T, generateId as _, tracker as a, editorBridge as b, resolveById as c, useSuperblocksContext as d, useSuperblocksDataTags as f, embedStore as g, useSuperblocksUser as h, getContextFromTraceHeaders as i, SuperblocksContextProvider as l, useSuperblocksProfiles as m, root_store_default as n, addNewPromise as o, useSuperblocksGroups as p, createIframeSpan as r, rejectById as s, ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG as t, getAppMode as u, sendNotification as v, iframeMessageHandler as w, markLoad as x, colors as y };
+// src/lib/user-facing/assets/images/clark.svg
+var _path$1;
+var _path2;
+var _path3;
+var _path4;
+var _path5;
+var _path6;
+var _path7;
+var _defs;
+function _extends$1() {
+	return _extends$1 = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends$1.apply(null, arguments);
+}
+var SvgClark = function SvgClark(props) {
+	return /*#__PURE__*/ React$1.createElement("svg", _extends$1({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 28,
+		height: 20,
+		fill: "none"
+	}, props), _path$1 || (_path$1 = /*#__PURE__*/ React$1.createElement("path", {
+		fill: "url(#clark_svg__a)",
+		d: "M20.41 1.239a5.16 5.16 0 0 0-4.703 5.413l2.648-.232a2.227 2.227 0 1 1 2.886 2.49l.18 2.062.035.02c.575-.05 1.213-.454 1.57-.748 1.617-1.337 1.71-3.2 1.705-3.672 0-.063.047-.117.11-.123l.27-.024a.18.18 0 0 0 .167-.206c-.068-.444-.304-1.577-1.018-2.419-.064-.074-.019-.194.079-.203l.402-.035c.142-.012.218-.166.13-.28-.492-.64-1.994-2.26-4.46-2.043"
+	})), _path2 || (_path2 = /*#__PURE__*/ React$1.createElement("path", {
+		fill: "#2A333D",
+		d: "M18.333 6.987a2.226 2.226 0 0 0 2.411 2.024l.555-.048c-.612-2.74-1.987-3.551-1.987-3.551.153-.386 1.044-.836 1.044-.836a2.226 2.226 0 0 0-2.023 2.411",
+		opacity: .12
+	})), _path3 || (_path3 = /*#__PURE__*/ React$1.createElement("path", {
+		fill: "url(#clark_svg__b)",
+		d: "m6.65 12.564.045.492-.228-2.607A2.338 2.338 0 1 1 8.58 6.587l2.588-.226a5.16 5.16 0 0 0-5.371-3.584c-2.467.216-3.665 2.072-4.039 2.787-.066.127.035.266.177.253l.403-.035c.097-.008.162.102.113.186-.558.953-.593 2.11-.583 2.56a.18.18 0 0 0 .2.173l.27-.023a.12.12 0 0 1 .13.101c.078.467.492 2.285 2.317 3.32.402.228 1.291.515 1.866.465"
+	})), _path4 || (_path4 = /*#__PURE__*/ React$1.createElement("path", {
+		fill: "#2A333D",
+		d: "M9.161 7.938a2.337 2.337 0 0 1-2.124 2.53l-.582.052c.133-2.944 1.406-4.032 1.406-4.032-.227-.371-1.231-.675-1.231-.675A2.337 2.337 0 0 1 9.16 7.938",
+		opacity: .12
+	})), _path5 || (_path5 = /*#__PURE__*/ React$1.createElement("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M21.72 10.543c-.461-3.366-2.697-6.01-6.685-6.252-.109-.006-.163-.01-.202-.031a.2.2 0 0 1-.078-.084c-.02-.04-.02-.092-.02-.197v-.572a.192.192 0 0 0-.308-.153l-.938.708a.192.192 0 0 1-.309-.154v-.361a.192.192 0 0 0-.318-.145l-.807.717a9 9 0 0 1-.5.431 2 2 0 0 1-.305.2c-.119.069-.414.205-1.004.477-2.794 1.29-4.104 3.885-3.852 6.757.43 4.911 3.404 6.652 8.266 6.226 4.215-.368 7.758-2.469 7.06-7.567M11.64 10.2c.142.62-.16 1.221-.678 1.34-.518.12-1.053-.286-1.197-.907a1.3 1.3 0 0 1-.018-.521.384.384 0 1 0 .376-.667.8.8 0 0 1 .32-.153c.517-.12 1.053.287 1.196.908m7.042-.148c.51-.146.782-.761.606-1.374-.176-.612-.732-.99-1.242-.844a.83.83 0 0 0-.375.23.384.384 0 1 1-.284.713q-.01.211.052.431c.176.613.732.99 1.243.844m-5.448 3.596-.253-2.896a2.08 2.08 0 0 1 4.092-.685l.704 2.82a2.31 2.31 0 1 1-4.543.761",
+		clipRule: "evenodd"
+	})), _path6 || (_path6 = /*#__PURE__*/ React$1.createElement("path", {
+		fill: "url(#clark_svg__c)",
+		d: "M13.88 14.096a2.3 2.3 0 0 0 1.847.492 2.3 2.3 0 0 0 1.585-1.066 1.79 1.79 0 0 1-3.431.574",
+		opacity: .5
+	})), _path7 || (_path7 = /*#__PURE__*/ React$1.createElement("path", {
+		fill: "url(#clark_svg__d)",
+		d: "M13.191 13.144a2.312 2.312 0 0 0 4.465-.748l.123.491a2.31 2.31 0 1 1-4.544.761z",
+		opacity: .5
+	})), _defs || (_defs = /*#__PURE__*/ React$1.createElement("defs", null, /*#__PURE__*/ React$1.createElement("linearGradient", {
+		id: "clark_svg__a",
+		x1: 21.636,
+		x2: 17.027,
+		y1: 4.149,
+		y2: 8.785,
+		gradientUnits: "userSpaceOnUse"
+	}, /*#__PURE__*/ React$1.createElement("stop", { stopColor: "currentColor" }), /*#__PURE__*/ React$1.createElement("stop", {
+		offset: 1,
+		stopColor: "currentColor",
+		stopOpacity: .84
+	})), /*#__PURE__*/ React$1.createElement("linearGradient", {
+		id: "clark_svg__b",
+		x1: 4.534,
+		x2: 10.643,
+		y1: 6.603,
+		y2: 9.712,
+		gradientUnits: "userSpaceOnUse"
+	}, /*#__PURE__*/ React$1.createElement("stop", { stopColor: "currentColor" }), /*#__PURE__*/ React$1.createElement("stop", {
+		offset: 1,
+		stopColor: "currentColor",
+		stopOpacity: .84
+	})), /*#__PURE__*/ React$1.createElement("linearGradient", {
+		id: "clark_svg__c",
+		x1: 15.788,
+		x2: 16.004,
+		y1: 13.866,
+		y2: 15.093,
+		gradientUnits: "userSpaceOnUse"
+	}, /*#__PURE__*/ React$1.createElement("stop", {
+		stopColor: "currentColor",
+		stopOpacity: .6
+	}), /*#__PURE__*/ React$1.createElement("stop", {
+		offset: 1,
+		stopColor: "currentColor"
+	})), /*#__PURE__*/ React$1.createElement("linearGradient", {
+		id: "clark_svg__d",
+		x1: 15.704,
+		x2: 16.07,
+		y1: 13.597,
+		y2: 15.67,
+		gradientUnits: "userSpaceOnUse"
+	}, /*#__PURE__*/ React$1.createElement("stop", {
+		stopColor: "currentColor",
+		stopOpacity: .6
+	}), /*#__PURE__*/ React$1.createElement("stop", {
+		offset: 1,
+		stopColor: "currentColor"
+	})))));
+};
+// src/lib/internal-details/internal-components/common.ts
+const ErrorIconContainer = styled.div`
+  width: 60px;
+  height: 60px;
+  min-width: 60px;
+  min-height: 60px;
+  background: linear-gradient(135deg, #aab 0%, #000033 50%, #000066 100%);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  flex-shrink: 0;
+  animation: scaleIn 0.3s ease-out forwards;
+  opacity: 0;
+  box-shadow:
+    0 0 1px black,
+    0 4px 12px rgba(0, 85, 187, 0.15),
+    0 2px 4px rgba(0, 85, 187, 0.05);
+
+  @keyframes scaleIn {
+    from {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+`;
+const StyledClarkIcon = styled(SvgClark)`
+  width: 54px;
+  height: 54px;
+  color: white;
+  margin-top: 3px;
+  margin-left: 1px;
+  animation: scaleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  opacity: 0;
+
+  @keyframes scaleIn {
+    0% {
+      transform: scale(0.6);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.1);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+`;
+const ErrorTitle = styled.h2`
+  font-family: Inter;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 1.35;
+  text-align: center;
+  margin-bottom: 6px;
+  flex-shrink: 0;
+`;
+const ErrorMessage = styled.p`
+  font-family: Inter;
+  font-size: 14px;
+  color: #6c7689;
+  line-height: 1.5715;
+  text-align: center;
+  flex-shrink: 0;
+  margin-top: 0;
+  margin-bottom: 16px;
+`;
+const ErrorDetails = styled.details`
+  margin-top: 24px;
+  text-align: left;
+  background-color: #f9fafb;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow:
+    0px 0px 1px 0px #22272f52,
+    0px 1px 3px 0px #22272f1f;
+  flex-shrink: 0;
+  font-family: Inter;
+
+  &[open] summary {
+    margin-bottom: 12px;
+  }
+`;
+const ErrorSummary = styled.summary`
+  cursor: pointer;
+  font-weight: 500;
+  color: #374151;
+  font-size: 14px;
+  user-select: none;
+`;
+const ErrorStack = styled.pre`
+  font-size: 12px;
+  color: #dc2626;
+  overflow: auto;
+  white-space: pre-wrap;
+  margin: 16px;
+  font-family: monospace;
+`;
+const ErrorContainer = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.5);
+  pointer-events: auto;
+`;
+const ErrorContent = styled.div`
+  max-width: 700px;
+  padding: 40px;
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  opacity: 0;
+  animation: fadeIn 0.3s ease-out forwards;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+const SecondaryButton = styled.button`
+  color: ${colors.GREY_700};
+  border: 1px solid ${colors.GREY_100};
+  width: fit-content;
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  height: fit-content;
+  font-size: 12px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+`;
+const ActionsContainer = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+`;
+// src/edit-mode/assets/ai-stars.svg
+var _path;
+function _extends() {
+	return _extends = Object.assign ? Object.assign.bind() : function(n) {
+		for (var e = 1; e < arguments.length; e++) {
+			var t = arguments[e];
+			for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+		}
+		return n;
+	}, _extends.apply(null, arguments);
+}
+var SvgAiStars = function SvgAiStars(props) {
+	return /*#__PURE__*/ React$1.createElement("svg", _extends({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 13,
+		height: 14,
+		fill: "none"
+	}, props), _path || (_path = /*#__PURE__*/ React$1.createElement("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M10.5.9a.6.6 0 0 1 .586.472l.133.605a.4.4 0 0 0 .305.305l.605.132a.6.6 0 0 1 0 1.172l-.605.133a.4.4 0 0 0-.305.305l-.133.605a.6.6 0 0 1-1.172 0l-.132-.605a.4.4 0 0 0-.305-.305l-.605-.133a.6.6 0 0 1 0-1.172l.605-.132a.4.4 0 0 0 .305-.305l.132-.605A.6.6 0 0 1 10.5.9M5.077 3.833a.6.6 0 0 0-1.153 0l-.215.74A2.4 2.4 0 0 1 2.074 6.21l-.741.215a.6.6 0 0 0 0 1.153l.74.215A2.4 2.4 0 0 1 3.71 9.427l.215.74a.6.6 0 0 0 1.153 0l.215-.74a2.4 2.4 0 0 1 1.635-1.635l.74-.215a.6.6 0 0 0 0-1.153l-.74-.215a2.4 2.4 0 0 1-1.635-1.635zm6.01 5.539a.6.6 0 0 0-1.173 0l-.132.605a.4.4 0 0 1-.305.305l-.605.133a.6.6 0 0 0 0 1.172l.605.132a.4.4 0 0 1 .305.305l.132.605a.6.6 0 0 0 1.172 0l.133-.605a.4.4 0 0 1 .305-.305l.605-.132a.6.6 0 0 0 0-1.172l-.605-.133a.4.4 0 0 1-.305-.305z",
+		clipRule: "evenodd"
+	})));
+};
+// src/lib/internal-details/internal-components/fix-with-clark-button.tsx
+const MAX_STACK_FRAMES = 10;
+const MAX_PROMPT_LENGTH = 8e3;
+function buildRuntimeErrorPrompt(error) {
+	const defaultPrompt = "Fix this error: Unknown error";
+	if (!error) return defaultPrompt;
+	const [messageLine, ...rawFrames] = error.stack?.split("\n") ?? [];
+	const message = (messageLine || error.message || error.toString()).trim();
+	const filteredFrames = rawFrames.filter((line) => line && !line.includes("node_modules"));
+	const selectedFrames = filteredFrames.slice(0, MAX_STACK_FRAMES);
+	const omittedCount = filteredFrames.length - selectedFrames.length;
+	const frameSection = [...selectedFrames, ...omittedCount > 0 ? [`... (${omittedCount} additional frame${omittedCount > 1 ? "s" : ""} omitted)`] : []].map((line) => line.trimEnd()).join("\n");
+	const prompt = `Fix this error: ${frameSection ? `${message}\n${frameSection}` : message}`;
+	if (prompt.length <= MAX_PROMPT_LENGTH) return prompt;
+	const suffix = "... (truncated)";
+	const availableChars = Math.max(7985, 0);
+	return `${prompt.slice(0, availableChars)}${suffix}`;
+}
+const FixWithClarkButtonContainer = styled.button`
+  padding: 6px 12px;
+  background-color: ${colors.ACCENT_BLUE_500};
+  border-radius: 4px;
+  border: none;
+  color: white;
+  height: fit-content;
+  display: flex;
+  gap: 4px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  font-size: 12px;
+  align-items: center;
+
+  &:hover:not(:disabled) {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+function FixWithClarkButton({ identifier, error, onClick }) {
+	const isAiEditing = root_store_default.editStore?.ai.getIsEditing() ?? false;
+	const handleFixWithAi = () => {
+		onClick?.();
+		if (identifier) editorBridge.addComponentToAiContext(identifier.sourceId, identifier.selectorId);
+		const prompt = buildRuntimeErrorPrompt(error);
+		editorBridge.aiGenerate(prompt, true);
+	};
+	return /* @__PURE__ */ jsxs(FixWithClarkButtonContainer, {
+		onClick: handleFixWithAi,
+		disabled: isAiEditing,
+		children: [/* @__PURE__ */ jsx(SvgAiStars, {}), " Fix with Clark"]
+	});
+}
+// src/lib/internal-details/css-constants.ts
+const CSS_CLASSES = {
+	SUSPENSE_FALLBACK: "sb-suspense-fallback",
+	ANCHOR_NAME: "sb-anchor-name"
+};
+// src/lib/internal-details/lib/suspense/suspense-fallback.tsx
+const shimmerAnimation = keyframes`
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+`;
+const ShimmerDiv = styled.div`
+  min-height: 12px;
+  min-width: 12px;
+  background-color: ${(props) => props.$backgroundColor};
+  border-radius: ${(props) => props.$borderRadius};
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(
+    90deg,
+    ${(props) => props.$backgroundColor} 25%,
+    ${(props) => props.$shimmerHighlight} 50%,
+    ${(props) => props.$backgroundColor} 75%
+  );
+  background-size: max(100%, 200px) 100%;
+  animation: ${shimmerAnimation} 5s infinite linear;
+`;
+/**
+* Default fallback component displayed while components are suspended.
+*/
+function SuspenseFallback({ style, className, noBorderRadius }) {
+	const backgroundColor = "#f8f9fa";
+	const shimmerHighlight = "#ffffff";
+	const borderRadius = noBorderRadius ? "0px" : "4px";
+	const classes = useMemo(() => [CSS_CLASSES.ANCHOR_NAME, className].filter(Boolean).join(" "), [className]);
+	return /* @__PURE__ */ jsx(ShimmerDiv, {
+		$backgroundColor: backgroundColor,
+		$shimmerHighlight: shimmerHighlight,
+		$borderRadius: borderRadius,
+		style: style?.(),
+		className: classes,
+		"data-test": "suspense-fallback"
+	});
+}
+// src/lib/user-facing/component-base/error-boundary.tsx
+const ErrorBoundaryContainer = styled.div`
+  background: white;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid ${colors.GREY_100};
+  border-left: 3px solid ${colors.RED_500};
+  border-radius: 4px;
+  width: 100%;
+  color: ${colors.GREY_700};
+`;
+const ErrorDetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const ErrorActionsContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;
+var ErrorBoundary = class extends Component {
+	state = {
+		id: generateId(),
+		hasError: false
+	};
+	disposeAutoReset;
+	static getDerivedStateFromError(e) {
+		const error = e instanceof Error ? e : new Error(typeof e === "object" && e !== null ? JSON.stringify(e) : String(e));
+		return {
+			id: generateId(),
+			hasError: true,
+			error
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		if (isEditMode()) root_store_default.editStore?.ai.handleRuntimeError({
+			id: this.state.id,
+			error: String(error),
+			errorInfo,
+			identifier: this.props.identifier
+		});
+	}
+	reset = () => {
+		if (isEditMode()) root_store_default.editStore?.ai.clearRuntimeError(this.state.id);
+		this.setState({
+			hasError: false,
+			error: void 0
+		});
+	};
+	componentWillUnmount() {
+		if (this.state.hasError && isEditMode()) root_store_default.editStore?.ai.clearRuntimeError(this.state.id);
+		this.disposeAutoReset?.();
+	}
+	handleFixWithClarkInitiated = () => {
+		const ai = root_store_default.editStore?.ai;
+		if (!ai) return;
+		this.disposeAutoReset?.();
+		this.disposeAutoReset = void 0;
+		let sawStart = ai.getIsEditing();
+		this.disposeAutoReset = reaction(() => ai.getIsEditing(), (isEditing) => {
+			if (!sawStart && isEditing) sawStart = true;
+			if (sawStart && !isEditing) {
+				this.reset();
+				this.disposeAutoReset?.();
+				this.disposeAutoReset = void 0;
+			}
+		}, {
+			fireImmediately: true,
+			name: "error-boundary-ai-auto-reset"
+		});
+	};
+	handleFixWithAi() {
+		const { identifier } = this.props;
+		if (identifier) editorBridge.addComponentToAiContext(identifier.sourceId, identifier.selectorId);
+		let prompt = `Fix this error: `;
+		if (this.state.error?.stack) {
+			const lines = this.state.error.stack.split("\n");
+			const nodeModulesIndex = lines.findIndex((line) => line.includes("node_modules"));
+			const relevantLines = nodeModulesIndex > -1 ? lines.slice(0, nodeModulesIndex) : lines;
+			prompt += relevantLines.slice(0, 5).join("\n");
+		} else prompt += this.state.error?.toString();
+		editorBridge.aiGenerate(prompt);
+	}
+	render() {
+		if (this.state.hasError) return /* @__PURE__ */ jsx(Observer, { children: () => {
+			if (root_store_default.editStore?.ai.getIsEditing() ?? false) return /* @__PURE__ */ jsx(SuspenseFallback, {});
+			return /* @__PURE__ */ jsxs(ErrorBoundaryContainer, { children: [/* @__PURE__ */ jsxs(ErrorDetailsContainer, {
+				"data-testid": "runtime-error-details",
+				children: [/* @__PURE__ */ jsx("h3", { children: this.props.header || "Something went wrong." }), /* @__PURE__ */ jsxs("details", {
+					style: { fontSize: "0.8em" },
+					children: [/* @__PURE__ */ jsx("summary", {
+						style: { paddingLeft: "0.25rem" },
+						children: "Error details"
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							marginTop: "0.5rem",
+							maxWidth: "100%",
+							overflowX: "auto",
+							scrollbarWidth: "thin"
+						},
+						children: /* @__PURE__ */ jsx("pre", {
+							style: { color: "gray" },
+							children: /* @__PURE__ */ jsx("code", { children: this.state.error?.stack ? this.state.error.stack : this.state.error?.toString() })
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ jsxs(ErrorActionsContainer, { children: [isEditMode() && /* @__PURE__ */ jsx(FixWithClarkButton, {
+				onClick: this.handleFixWithClarkInitiated,
+				error: this.state.error,
+				identifier: this.props.identifier
+			}), /* @__PURE__ */ jsx(SecondaryButton, {
+				onClick: this.reset,
+				children: "Try again"
+			})] })] });
+		} });
+		return this.props.children;
+	}
+};
+// src/lib/utils/widget-wrapper-naming.ts
+const getWidgetAnchorName = (selectorId) => {
+	return `--widget-${selectorId}`;
+};
+const getWidgetRectAnchorName = (selectorId) => {
+	return `--widget-rect-${selectorId}`;
+};
+// src/edit-mode/edit-wrapper.tsx
+if (typeof window !== "undefined" && typeof document.documentElement !== "undefined" && !("anchorName" in document.documentElement.style) && isEditMode()) import("@oddbird/css-anchor-positioning/fn").then(({ default: polyfill }) => polyfill()).catch((error) => console.warn("Failed to load the CSS anchor positioning polyfill", error));
+const createAnchorNameStyle = (props) => {
+	return { "--anchor-name": getWidgetAnchorName(props.selectorId) };
+};
+// src/edit-mode/instance-tracker.ts
+/**
+* Tracks and recycles instance numbers for each sourceId to generate stable, unique selector IDs.
+* When components unmount, their instance numbers are released and can be reused.
+*/
+var InstanceTracker = class {
+	sourceIdToUsedInstances = /* @__PURE__ */ new Map();
+	getNextAvailableInstance(sourceId) {
+		const usedInstances = this.sourceIdToUsedInstances.get(sourceId) ?? /* @__PURE__ */ new Set();
+		let instance = 0;
+		while (usedInstances.has(instance)) instance++;
+		usedInstances.add(instance);
+		this.sourceIdToUsedInstances.set(sourceId, usedInstances);
+		return instance;
+	}
+	releaseInstance(sourceId, instance) {
+		const usedInstances = this.sourceIdToUsedInstances.get(sourceId);
+		if (usedInstances) {
+			usedInstances.delete(instance);
+			if (usedInstances.size === 0) this.sourceIdToUsedInstances.delete(sourceId);
+		}
+	}
+};
+const instanceTracker = new InstanceTracker();
+// src/edit-mode/jsx-wrapper.tsx
+const JSXContext = React.createContext({
+	selectorId: "S-<unknown>",
+	sourceId: "SB-<unknown>"
+});
+const makeWrappedComponent = (type) => {
+	const isTag = typeof type === "string";
+	const isRegisteredSbComponent = root_store_default.componentRegistry.hasComponent(type);
+	const Component = React.forwardRef((props, ref) => {
+		const { selectorId: parentSelectorId } = useJSXContext();
+		const sourceId = props[SOURCE_ID_ATTRIBUTE];
+		const noSelect = props[NO_SELECT_ATTRIBUTE];
+		const instanceNumberRef = useRef();
+		const selectorId = useRef("S-<unknown>");
+		if (selectorId.current === "S-<unknown>") {
+			instanceNumberRef.current = instanceTracker.getNextAvailableInstance(sourceId);
+			selectorId.current = `S-x-${sourceId}-${instanceNumberRef.current}`;
+		}
+		useEffect(() => {
+			root_store_default.editStore?.runtimeTrackingStore.registerComponent(selectorId.current, {
+				sourceId,
+				type,
+				parentSelectorId,
+				isSbComponent: isRegisteredSbComponent,
+				isHtmlElement: isTag,
+				noSelect
+			});
+			return () => {
+				root_store_default.editStore?.runtimeTrackingStore.unregisterComponent(selectorId.current);
+				if (instanceNumberRef.current !== void 0) instanceTracker.releaseInstance(sourceId, instanceNumberRef.current);
+			};
+		}, []);
+		const disabled = Boolean(props.disabled);
+		useEffect(() => {
+			root_store_default.editStore?.runtimeTrackingStore.setComponentDisabled(selectorId.current, disabled);
+		}, [disabled]);
+		const jsxContext = useMemo(() => ({
+			selectorId: selectorId.current,
+			sourceId
+		}), [sourceId]);
+		const selectorProps = { [SELECTOR_ID_ATTRIBUTE]: selectorId.current };
+		if (parentSelectorId) selectorProps["data-sb-parent-selector-id"] = parentSelectorId;
+		const { style: propsStyle, className: propsClassName } = props;
+		const style = useMemo(() => {
+			return {
+				...propsStyle,
+				...createAnchorNameStyle({ selectorId: selectorId.current })
+			};
+		}, [propsStyle]);
+		const className = useMemo(() => {
+			return typeof propsClassName === "function" ? (...args) => ["sb-anchor-name", propsClassName(...args)].filter(Boolean).join(" ") : ["sb-anchor-name", propsClassName].filter(Boolean).join(" ");
+		}, [propsClassName]);
+		const element = React.createElement(type, {
+			ref,
+			...props,
+			...selectorProps,
+			className,
+			style
+		});
+		if (!root_store_default.editStore?.isInitialized) return /* @__PURE__ */ jsx(JSXContext.Provider, {
+			value: jsxContext,
+			children: element
+		});
+		return /* @__PURE__ */ jsx(JSXContext.Provider, {
+			value: jsxContext,
+			children: /* @__PURE__ */ jsx(ErrorBoundary, { children: element })
+		});
+	});
+	try {
+		Component.displayName = typeof type === "string" ? type : type.displayName || type.name || "Component";
+	} catch (e) {
+		console.error("Error setting displayName", e);
+	}
+	return Component;
+};
+const useJSXContext = () => {
+	return React.useContext(JSXContext);
+};
+export { useSuperblocksDataTags as A, getEditStore as B, tracker as C, SuperblocksContextProvider as D, resolveById as E, generateId as F, isEditMode as G, iframeMessageHandler as H, sendNotification as I, __exportAll as K, colors as L, useSuperblocksProfiles as M, useSuperblocksUser as N, getAppMode as O, embedStore as P, editorBridge as R, utils_exports as S, rejectById as T, isEmbeddedBySuperblocksFirstParty as U, getParentOrigin as V, sendMessageImmediately as W, ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG as _, FixWithClarkButton as a, getContextFromTraceHeaders as b, ErrorContent as c, ErrorMessage as d, ErrorStack as f, StyledClarkIcon as g, SecondaryButton as h, getWidgetRectAnchorName as i, useSuperblocksGroups as j, useSuperblocksContext as k, ErrorDetails as l, ErrorTitle as m, useJSXContext as n, ActionsContainer as o, ErrorSummary as p, getWidgetAnchorName as r, ErrorContainer as s, makeWrappedComponent as t, ErrorIconContainer as u, root_store_default as v, addNewPromise as w, initTracerProviderWithOrigin as x, createIframeSpan as y, markLoad as z };
 
-//# sourceMappingURL=root-store-G9HJE1Mf.js.map
+//# sourceMappingURL=jsx-wrapper-BAO7prWO.js.map