@superblocksteam/library 2.0.55 → 2.0.56-next.1

package/dist/widget-wrapper-naming-DxFT8zmk.js

@@ -0,0 +1,3068 @@
+import { t as getTracer } from "./utils-AzBGeVXo.js";
+import { getQueryParams, pathStringToArray, toMobXPatch } from "@superblocksteam/library-shared";
+import * as React$1 from "react";
+import React, { createContext, isValidElement, useCallback, useContext, useSyncExternalStore } from "react";
+import { action, entries, isComputedProp, isObservableArray, isObservableMap, isObservableObject, makeAutoObservable, makeObservable, observable, observe, reaction, toJS, values } from "mobx";
+import { matchRoutes } from "react-router";
+import { pick, throttle } from "lodash";
+import { ApiResponseType, OrchestratorViewMode, SUPERBLOCKS_AUTHORIZATION_HEADER, SUPERBLOCKS_REQUEST_ID_HEADER, ViewMode, decodeBytestrings } from "@superblocksteam/shared";
+import { NotificationPosition } from "@superblocksteam/library-shared/types";
+import isString from "lodash/isString";
+import { toast } from "sonner";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ROOT_CONTEXT, context, propagation, trace } from "@opentelemetry/api";
+import diff from "microdiff";
+import { InputType, PropsCategory } from "@superblocksteam/library-shared/props";
+
+//#region src/lib/internal-details/is-edit-mode.ts
+const getIsEditMode = () => {
+	return window._SB_VIEW_MODE === "dev";
+};
+let editMode;
+const isEditMode = () => {
+	if (editMode === void 0) editMode = getIsEditMode();
+	return editMode;
+};
+
+//#endregion
+//#region 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);
+};
+/**
+* Cleans an object by removing proxy wrappers and filtering out functions.
+* This is useful for preparing objects for JSON serialization.
+*/
+function cleanObject(obj) {
+	obj = toJS(obj);
+	if (!obj || typeof obj !== "object") return typeof obj === "function" ? void 0 : obj;
+	if (Array.isArray(obj)) return obj.map(cleanObject).filter((item) => item !== void 0);
+	if (isReactElement(obj)) return;
+	return Object.entries(obj).reduce((acc, [key, value]) => {
+		if (obj === value || key === "bind") return acc;
+		const cleaned = cleanObject(value);
+		if (cleaned !== void 0) acc[key] = cleaned;
+		return acc;
+	}, {});
+}
+
+//#endregion
+//#region src/lib/internal-details/lib/iframe.ts
+function isEmbeddedBySuperblocksFirstParty() {
+	return typeof window !== "undefined" && window !== window.parent;
+}
+const PARENT_REF = typeof window !== "undefined" && window !== window.parent ? window.parent : null;
+const SELF_REF = typeof window !== "undefined" ? window : null;
+function parentMessageHandler(e) {
+	if (e.source !== PARENT_REF && e.source !== SELF_REF) return;
+	const event = new SbIframeEventInternal(e.data.type, e.data);
+	iframeMessageHandler.dispatchEvent(event);
+}
+if (isEmbeddedBySuperblocksFirstParty() && PARENT_REF) typeof window !== "undefined" && window.addEventListener("message", parentMessageHandler);
+/** @deprecated Use editorBridge instead */
+function sendMessageImmediately(message, options) {
+	if (!PARENT_REF) {
+		console.warn("PARENT_REF is not set, message not delivered. Message: ", message);
+		return;
+	}
+	message = cleanObject(message);
+	if (isEmbeddedBySuperblocksFirstParty()) {
+		if (!PARENT_REF) throw new Error("Parent is not set");
+		try {
+			PARENT_REF.postMessage({
+				...message,
+				startTime: options?.overrideStartTime ?? +/* @__PURE__ */ new Date()
+			}, "*");
+		} catch (e) {
+			console.error("Error sending message to parent", message, e);
+		}
+	}
+}
+var SbIframeEventInternal = class extends Event {
+	data;
+	constructor(type, data) {
+		super(type);
+		this.data = data;
+	}
+};
+var SbMessageHandler = class extends EventTarget {};
+const iframeMessageHandler = new SbMessageHandler();
+
+//#endregion
+//#region src/edit-mode/base-editor-bridge.ts
+var DeployedParentBridge = class {
+	navigateTo(url, newWindow) {
+		sendMessageImmediately({
+			type: "navigate-to",
+			payload: {
+				url,
+				newWindow
+			}
+		});
+	}
+	connected() {}
+	sendReady() {}
+	sendLoadError(_error) {}
+	sendNotification(_type, _message, _description) {}
+	selectWidgets(_sourceIds) {}
+	editOpRequest(_type, _payload) {}
+	undo() {}
+	redo() {}
+	sendStreamedApiEvent(_event, _apiName) {}
+	sendStreamedApiMessage(_message, _apiName) {}
+	setApiStarted(_apiName) {}
+	setApiResponse(_apiName, _response) {}
+	updatePropertiesPanels(_updates) {}
+	addPropertiesPanel(_id, _definition) {}
+	addApiRunRecord(_apiId, _run) {}
+	updateApiRunRecord(_apiId, _callId, _updates) {}
+	initializeEditorSyncedStore(_payload) {}
+	updateEditorSyncedStore(_payload) {}
+	resolvePromise(_callbackId, _payload) {}
+	rejectPromise(_callbackId, _payload) {}
+	canvasClicked() {}
+	registerContextMenuClick(_sourceId, _clientX, _clientY) {}
+	updateRoute(routeInfo) {
+		sendMessageImmediately({
+			type: "route-change",
+			payload: routeInfo
+		});
+	}
+	socketError(_message) {}
+	aiGenerate(_prompt) {}
+	addComponentToAiContext(_sourceId, _selectorId) {}
+	toggleComponentInAiContext(_sourceId, _selectorId, _label) {}
+	setAiContextMode(_mode) {}
+	sendAiLoaderState(_shouldShowLoader) {}
+	sendRuntimeError(_data) {}
+	sendClearRuntimeError(_id) {}
+	setInteractionMode(_mode) {}
+};
+
+//#endregion
+//#region src/edit-mode/get-edit-store.ts
+/**
+* Get the global EditStore instance
+* @returns The EditStore instance
+*/
+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/message-queue.ts
+const MESSAGE_BATCH_TIME = 50;
+const DEFAULT_KEY = "default";
+var MessageQueue = class {
+	keyedActionQueue = {};
+	constructor() {}
+	flattenKeyedQueue() {
+		return Object.values(this.keyedActionQueue).flat();
+	}
+	triggerSendFromQueue = throttle(() => {
+		sendMessageImmediately({
+			type: "iframe-action-batch",
+			payload: this.flattenKeyedQueue()
+		}, { overrideStartTime: Date.now() - MESSAGE_BATCH_TIME });
+		this.keyedActionQueue = {};
+	}, MESSAGE_BATCH_TIME);
+	queueMessage(message, mergeOptions) {
+		if (mergeOptions) {
+			const { key, mergeFn } = mergeOptions;
+			this.keyedActionQueue[key] ??= [];
+			this.keyedActionQueue[key] = mergeFn(this.keyedActionQueue[key], message);
+		} else {
+			this.keyedActionQueue[DEFAULT_KEY] ??= [];
+			this.keyedActionQueue[DEFAULT_KEY].push(message);
+		}
+		this.triggerSendFromQueue();
+	}
+};
+var message_queue_default = new MessageQueue();
+
+//#endregion
+//#region src/edit-mode/superblocks-editor-bridge.ts
+var SuperblocksEditorBridge = class SuperblocksEditorBridge {
+	static instance;
+	messagesToSend = [];
+	connectedToParent = false;
+	static getInstance() {
+		const editMode$1 = isEditMode();
+		if (!SuperblocksEditorBridge.instance) SuperblocksEditorBridge.instance = editMode$1 ? new SuperblocksEditorBridge() : new DeployedParentBridge();
+		return SuperblocksEditorBridge.instance;
+	}
+	connected() {
+		this.connectedToParent = true;
+		this.messagesToSend.forEach((message) => this.queueMessage(message.payload, message.mergeOptions));
+		this.messagesToSend = [];
+	}
+	sendReady() {
+		this.sendImmediate({
+			type: "sb-ready",
+			payload: void 0
+		}, true);
+	}
+	sendLoadError(error) {
+		this.sendImmediate({
+			type: "sb-load-error",
+			payload: { error }
+		}, true);
+	}
+	sendNotification(type, message, description) {
+		this.queueMessage({
+			type: "codeMode/sendNotification",
+			payload: {
+				type,
+				message,
+				description
+			}
+		});
+	}
+	selectWidgets(sourceIds) {
+		this.queueMessage({
+			type: "client:selectWidgets",
+			payload: { sourceIds }
+		});
+	}
+	editOpRequest(type, payload) {
+		this.sendImmediate({
+			type: "sb-edit-operation-request",
+			payload: {
+				type,
+				payload
+			}
+		});
+	}
+	undo() {
+		this.sendImmediate({
+			type: "undo",
+			payload: void 0
+		});
+	}
+	redo() {
+		this.sendImmediate({
+			type: "redo",
+			payload: void 0
+		});
+	}
+	sendStreamedApiEvent(event, apiName) {
+		this.sendImmediate({
+			type: "api/stream-event",
+			payload: {
+				event,
+				apiName
+			}
+		});
+	}
+	sendStreamedApiMessage(message, apiName) {
+		this.sendImmediate({
+			type: "api/stream-message",
+			payload: {
+				message,
+				apiName
+			}
+		});
+	}
+	setApiStarted(apiName) {
+		this.sendImmediate({
+			type: "api/started-execution",
+			payload: { apiName }
+		});
+	}
+	setApiResponse(apiName, response) {
+		this.sendImmediate({
+			type: "api/set-api-response",
+			payload: {
+				apiName,
+				response
+			}
+		});
+	}
+	navigateTo(path, newWindow) {
+		this.sendImmediate({
+			type: "navigate-to",
+			payload: {
+				url: path,
+				newWindow
+			}
+		});
+	}
+	updatePropertiesPanels(updates) {
+		this.queueMessage({
+			type: "codeMode/updatePropertiesPanels",
+			payload: updates
+		});
+	}
+	addPropertiesPanel(id, definition) {
+		this.queueMessage({
+			type: "codeMode/addPropertiesPanel",
+			payload: {
+				id,
+				definition
+			}
+		});
+	}
+	addApiRunRecord(apiId, run) {
+		this.queueMessage({
+			type: "codeMode/addApiRunRecord",
+			payload: {
+				apiId,
+				run
+			}
+		});
+	}
+	updateApiRunRecord(apiId, callId, updates) {
+		this.queueMessage({
+			type: "codeMode/updateApiRunRecord",
+			payload: {
+				apiId,
+				callId,
+				updates
+			}
+		});
+	}
+	initializeEditorSyncedStore(payload) {
+		this.queueMessage({
+			type: "codeMode/editor-synced-store/init",
+			payload
+		});
+	}
+	mergeSyncedStoreUpdate(existingActions, newAction) {
+		if (!existingActions || existingActions.length === 0) return [newAction];
+		const firstAction = existingActions[0];
+		const newActionPatches = newAction.payload.patch;
+		firstAction.payload.patch = Array.isArray(firstAction.payload.patch) ? firstAction.payload.patch : [firstAction.payload.patch];
+		firstAction.payload.patch.push(...Array.isArray(newActionPatches) ? newActionPatches : [newActionPatches]);
+		return existingActions;
+	}
+	updateEditorSyncedStore(payload) {
+		this.queueMessage({
+			type: "codeMode/editor-synced-store/update",
+			payload
+		}, {
+			key: `synced-store-update-${payload.storeId}`,
+			mergeFn: this.mergeSyncedStoreUpdate
+		});
+	}
+	resolvePromise(callbackId, payload) {
+		this.sendImmediate({
+			type: "resolve-promise",
+			callbackId,
+			payload
+		});
+	}
+	rejectPromise(callbackId, payload) {
+		this.sendImmediate({
+			type: "reject-promise",
+			callbackId,
+			payload
+		});
+	}
+	canvasClicked() {
+		this.sendImmediate({
+			type: "register-click",
+			payload: {
+				type: "INSIDE_IFRAME_CLICKED",
+				context: {
+					sourceId: "",
+					clientX: 0,
+					clientY: 0
+				}
+			}
+		});
+	}
+	registerContextMenuClick(sourceId, clientX, clientY) {
+		this.sendImmediate({
+			type: "register-click",
+			payload: {
+				type: "OPEN_CONTEXT_MENU",
+				context: {
+					sourceId,
+					clientX,
+					clientY
+				}
+			}
+		});
+	}
+	updateRoute(routeInfo) {
+		this.sendImmediate({
+			type: "route-change",
+			payload: routeInfo
+		}, true);
+	}
+	addComponentToAiContext(sourceId, selectorId) {
+		const editStore = getEditStore();
+		if (editStore?.ai.isAlternateSourceIdTarget(sourceId, selectorId)) {
+			editStore.ai.addTargetedSelector(selectorId);
+			return;
+		}
+		this.sendImmediate({
+			type: "ai-updates",
+			payload: {
+				type: "add-component-to-context",
+				component: sourceId
+			}
+		});
+	}
+	toggleComponentInAiContext(sourceId, selectorId, label) {
+		const editStore = getEditStore();
+		if (editStore?.ai.isAlternateSourceIdTarget(sourceId, selectorId)) {
+			editStore.ai.toggleTargetedSelector(selectorId);
+			return;
+		}
+		this.sendImmediate({
+			type: "ai-updates",
+			payload: {
+				type: "toggle-component-in-context",
+				component: sourceId,
+				label
+			}
+		});
+	}
+	setAiContextMode(mode) {
+		this.sendImmediate({
+			type: "ai-updates",
+			payload: {
+				type: "set-ai-context-mode",
+				mode
+			}
+		});
+	}
+	aiGenerate(prompt, forceSend = false) {
+		const sanitizedPrompt = clampPromptLength(prompt);
+		this.sendImmediate({
+			type: "ai-updates",
+			payload: {
+				type: "ai-generate",
+				prompt: sanitizedPrompt
+			}
+		}, forceSend);
+	}
+	sendAiLoaderState(shouldShowLoader) {
+		this.sendImmediate({
+			type: "ai-updates",
+			payload: {
+				type: "loader-state",
+				shouldShowLoader
+			}
+		});
+	}
+	socketError(message) {
+		this.sendImmediate({
+			type: "socket/error",
+			payload: { message }
+		});
+	}
+	sendRuntimeError(data) {
+		this.sendImmediate({
+			type: "runtime-error",
+			payload: data
+		});
+	}
+	sendClearRuntimeError(id) {
+		this.sendImmediate({
+			type: "clear-runtime-error",
+			payload: { id }
+		});
+	}
+	setInteractionMode(mode) {
+		this.sendImmediate({
+			type: "set-interaction-mode",
+			payload: { interactionMode: mode }
+		});
+	}
+	queueMessage(message, mergeOptions) {
+		if (!this.connectedToParent) this.messagesToSend.push({
+			payload: message,
+			mergeOptions
+		});
+		else message_queue_default.queueMessage(message, mergeOptions);
+	}
+	sendImmediate(message, forceSend = false) {
+		if (!this.connectedToParent && !forceSend) this.messagesToSend.push({ payload: message });
+		else sendMessageImmediately(message);
+	}
+};
+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);
+	return `${prompt.slice(0, available)}${TRUNCATION_SUFFIX}`;
+}
+const editorBridge = SuperblocksEditorBridge.getInstance();
+
+//#endregion
+//#region src/lib/internal-details/location-store.ts
+var LocationStore = class {
+	route;
+	rootStore;
+	constructor(rootStore) {
+		this.rootStore = rootStore;
+	}
+	@action updateLocation(location, routes, params) {
+		this.route = this.locationToRouteInfo(location, routes, params);
+		this.sendLocationToEditor();
+	}
+	sendLocationToEditor() {
+		if (!this.route) return;
+		editorBridge.updateRoute(this.route);
+	}
+	/**
+	* Recursively searches through route tree (including nested children) to find a matching route
+	*/
+	findMatchingRoute(routes, pathname) {
+		return matchRoutes(routes, pathname)?.at(-1);
+	}
+	locationToRouteInfo(location, routes, params) {
+		const match = this.findMatchingRoute(routes, location.pathname);
+		if (!match?.pathname) return;
+		return {
+			hash: location.hash,
+			pathname: location.pathname,
+			queryParams: getQueryParams(location.search),
+			route: match.pathname,
+			routeParams: params
+		};
+	}
+};
+
+//#endregion
+//#region 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$5.apply(null, arguments);
+}
+var SvgSystemDanger = function SvgSystemDanger$1(props) {
+	return /* @__PURE__ */ React$1.createElement("svg", _extends$5({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 16,
+		height: 16,
+		fill: "none"
+	}, 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"
+	})));
+};
+var system_danger_default = SvgSystemDanger;
+
+//#endregion
+//#region 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$4.apply(null, arguments);
+}
+var SvgSystemError = function SvgSystemError$1(props) {
+	return /* @__PURE__ */ React$1.createElement("svg", _extends$4({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 16,
+		height: 16,
+		fill: "none"
+	}, 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"
+	})));
+};
+var system_error_default = SvgSystemError;
+
+//#endregion
+//#region 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$3.apply(null, arguments);
+}
+var SvgSystemInfo = function SvgSystemInfo$1(props) {
+	return /* @__PURE__ */ React$1.createElement("svg", _extends$3({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 16,
+		height: 16,
+		fill: "none"
+	}, 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"
+	})));
+};
+var system_info_default = SvgSystemInfo;
+
+//#endregion
+//#region 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$2.apply(null, arguments);
+}
+var SvgSystemSuccess = function SvgSystemSuccess$1(props) {
+	return /* @__PURE__ */ React$1.createElement("svg", _extends$2({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 16,
+		height: 16,
+		fill: "none"
+	}, 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"
+	})));
+};
+var system_success_default = SvgSystemSuccess;
+
+//#endregion
+//#region src/lib/user-facing/styling/colors.ts
+const colors = {
+	WHITE: "#FFFFFF",
+	BLACK: "#000000",
+	PLATFORM_BLACK: "#0E141B",
+	OFF_WHITE: "#F2F2F2",
+	DISABLED: "rgba(0, 0, 0, 0.25)",
+	GREY_25: "#F9FAFB",
+	GREY_50: "#F3F4F6",
+	GREY_100: "#E8EAED",
+	GREY_200: "#C6CAD2",
+	GREY_300: "#A4AAB7",
+	GREY_400: "#818A9C",
+	GREY_500: "#6C7689",
+	GREY_600: "#5A6272",
+	GREY_700: "#454D5F",
+	GREY_800: "#2F3437",
+	GREY_900: "#121517",
+	GRAY_GRID: "#CCD3DB",
+	RED_500_8: "rgba(255, 72, 72, 0.08)",
+	RED_25: "#FF48481F",
+	RED_500: "#FF4848",
+	RED_600: "#DB4949",
+	RED_700: "#C54141",
+	ORANGE_25: "#FFEEC5",
+	ORANGE_600: "#FA8A0F",
+	SUBTLE_BLUE: "#29bbff14",
+	SUBTLE_BLUE_SOLID: "#eefaff",
+	ACCENT_BLUE_NEW_DARKER: "#0087E0",
+	BLUE_MINMAX_LABELS: "#0062A3",
+	DRAG_PREVIEW_BLUE: "rgba(0, 135, 224, 0.16)",
+	ACCENT_BLUE_500: "#27BBFF",
+	ACCENT_BLUE_500_04: "#27BBFF0A",
+	ACCENT_BLUE_500_25: "#27BBFF14",
+	ACCENT_BLUE_500_50: "#27BBFF1F",
+	ACCENT_BLUE_500_18: "#27BBFF2E",
+	ACCENT_BLUE_500_24: "#27BBFF3D",
+	ACCENT_BLUE_500_48: "#27BBFF7A",
+	ACCENT_BLUE_600: "#00A8F5",
+	ACCENT_BLUE_700: "#009AE0",
+	ACCENT_ORANGE: "#FF9F35",
+	ACCENT_ORANGE_04: "#FF9F350A",
+	ACCENT_ORANGE_24: "#FF9F353D",
+	LIGHT_ORANGE: "#FF9F351E",
+	ACCENT_ORANGE_600: "#FA8A0F",
+	SUBTLE_PURPLE: "#643ADF14",
+	ACCENT_PURPLE: "#643ADF",
+	LIGHT_PURPLE: "#643ADF1E",
+	ACCENT_PURPLE_500: "#7C4FF8",
+	ACCENT_PURPLE_600: "#5227CE",
+	SUBTLE_GREEN: "#14CDB714",
+	LIGHT_GREEN: "#9BDCAD",
+	ACCENT_GREEN: "#14CDB7",
+	ACCENT_GREEN_600: "#08BAA5",
+	LIGHT_PINK: `rgba(255, 98, 164, 0.12)`,
+	ACCENT_PINK: "#FF62A4",
+	HOVER_BLUE: "#E3F8FF",
+	HOVER_GREEN: "#14CDB724",
+	CLICK_GREEN: "#14CDB734",
+	INFO: "#27BBFF",
+	WARNING: "#FF9F35",
+	DANGER: "#F45252",
+	DANGER_BRIGHT: "rgba(255, 72, 72, 1.0)",
+	DANGER_SUBTLE: "#F452521F",
+	SUCCESS: "#0CC26D",
+	NONE: "transparent"
+};
+
+//#endregion
+//#region src/lib/user-facing/themes/classnames.ts
+const MODIFIER_CLASSNAMES = {
+	DISABLED_MODIFIER: "sb-disabled",
+	ERROR_MODIFIER: "sb-error",
+	ACTIVE_MODIFIER: "sb-active"
+};
+const CLASS_NAMES = {
+	...MODIFIER_CLASSNAMES,
+	HEADING1: "sb-heading-1",
+	HEADING2: "sb-heading-2",
+	HEADING3: "sb-heading-3",
+	HEADING4: "sb-heading-4",
+	HEADING5: "sb-heading-5",
+	HEADING6: "sb-heading-6",
+	BODY1: "sb-body-1",
+	BODY2: "sb-body-2",
+	BODY3: "sb-body-3",
+	LINK: "sb-link",
+	INPUT_LABEL: "sb-input-label",
+	LABEL: "sb-label",
+	CODE_TEXT: "sb-code",
+	INPUT_TEXT: "sb-input-text",
+	INPUT_PLACEHOLDER: "sb-input-placeholder",
+	BUTTON_LABEL: "sb-button-label",
+	SYSTEM_TEXT: "sb-system-text",
+	BUILTIN_BODY: "sb-builtin-body",
+	ELLIPSIS_TEXT: "sb-ellipsis-text",
+	BUTTON: "sb-button",
+	PRIMARY_BUTTON: "sb-button-primary",
+	SECONDARY_BUTTON: "sb-button-secondary",
+	SECONDARY_NEUTRAL_BUTTON: "sb-button-secondary-neutral",
+	TERTIARY_BUTTON: "sb-button-tertiary",
+	SYSTEM_BUTTON: "sb-button-system",
+	INPUT: "sb-input",
+	SWITCH: "sb-switch",
+	CHECKBOX: "sb-checkbox",
+	RADIO: "sb-radio",
+	SECTION: "sb-section",
+	ROUNDED_CONTAINER: "sb-rounded-container",
+	CANVAS: "sb-canvas",
+	DEFAULT_CONTAINER: "sb-default-container",
+	DEFAULT_CONTAINER_STYLE_CARD: "sb-default-container-style-card",
+	DEFAULT_CONTAINER_STYLE_NONE: "sb-default-container-style-none",
+	DEFAULT_CONTAINER_BORDER: "sb-default-container-border",
+	CONTAINER_BORDER_OUTLINE: "sb-container-border-overlay",
+	POPOVER_WRAPPER: "sb-popover-wrapper",
+	TAB: "sb-tab",
+	MODAL: "sb-modal",
+	SLIDEOUT: "sb-slideout",
+	BORDER_BOTTOM: "sb-util-border-bottom",
+	BORDER_TOP: "sb-util-border-top",
+	NOTIFICATION: "sb-notification",
+	STYLED_SCROLLBAR: "sb-scrollable",
+	TOOLTIP: "sb-tooltip",
+	DROPDOWN: "sb-dropdown",
+	DROPDOWN_MENU: "sb-dropdown-menu",
+	MENU_ITEM: "sb-menu-item",
+	TAG_INPUT: "sb-tag-input",
+	DATEPICKER: "sb-datepicker",
+	DROPDOWN_CLEAR_ICON: "sb-dropdown-clear-icon",
+	CARET_ICON: "sb-caret-icon",
+	PRIMARY_COLOR_ICON: "sb-primary-color-icon",
+	CLOSE_ICON: "sb-close-icon",
+	ICON: "sb-icon",
+	PAGINATOR: "sb-rc-paginator",
+	CODE_EDITOR: "sb-code-editor",
+	ERROR_INLINE_MESSAGE: "sb-error-inline-message"
+};
+
+//#endregion
+//#region src/lib/user-facing/utils/notification.tsx
+const activeNotifications = /* @__PURE__ */ new Map();
+const StatusIconWrapper = styled.div`
+  color: ${(props) => props.color};
+  font-size: 16px;
+  margin-top: -2px;
+  margin-left: -10px;
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+const MessageWrapper = styled.div`
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.3;
+  margin-left: -26px;
+  margin-right: 0;
+  white-space: pre-wrap;
+`;
+const DescriptionWrapper = styled.div`
+  font-size: 12px;
+  margin-left: -26px;
+  margin-right: -10px;
+`;
+const styleMessage = (message, dataTest) => {
+	return /* @__PURE__ */ jsx(MessageWrapper, {
+		"data-test": dataTest ? dataTest : "notification",
+		children: message
+	});
+};
+const styleDescription = (description) => {
+	if (!description) return;
+	return /* @__PURE__ */ jsx(DescriptionWrapper, { children: description });
+};
+const messageWithCount = (key, message, dataTest) => {
+	let updatedMessage = message;
+	if (key) {
+		const count = (activeNotifications.get(key)?.count ?? 0) + 1;
+		activeNotifications.set(key, {
+			count,
+			message
+		});
+		if (count > 1 && isString(message)) updatedMessage = `${message} (${count} times)`;
+	}
+	return styleMessage(updatedMessage, dataTest);
+};
+/**
+* When a Key is used,
+* duplicate notifications are not shown but the timeout is added to the first notification.
+* @returns A string key based on inputs
+*/
+const getKey = (type, message, description, duration) => {
+	return isString(message) ? `${type}--${String(message)}--${description}--${duration}` : void 0;
+};
+const removeNotificationsWithKey = (key) => {
+	document.querySelectorAll(`[data-testid="notification_${key}"]`).forEach((el) => {
+		el.remove();
+	});
+};
+const attrSafeKey = (str) => {
+	return str.replace(/\W+/g, "_");
+};
+const getIcon = (type) => {
+	let icon;
+	let color;
+	switch (type) {
+		case "success":
+			icon = /* @__PURE__ */ jsx(system_success_default, {});
+			color = colors.SUCCESS;
+			break;
+		case "error":
+			icon = /* @__PURE__ */ jsx(system_error_default, {});
+			color = colors.DANGER;
+			break;
+		case "info":
+			icon = /* @__PURE__ */ jsx(system_info_default, {});
+			color = colors.INFO;
+			break;
+		case "warning":
+			icon = /* @__PURE__ */ jsx(system_danger_default, {});
+			color = colors.WARNING;
+			break;
+	}
+	return /* @__PURE__ */ jsx(StatusIconWrapper, {
+		color,
+		children: icon
+	});
+};
+function onAlertClose(key) {
+	if (key) activeNotifications.delete(key);
+}
+const positionToPlacement = {
+	[NotificationPosition.bottom]: "bottom-center",
+	[NotificationPosition.top]: "top-center",
+	[NotificationPosition.topLeft]: "top-left",
+	[NotificationPosition.topRight]: "top-right",
+	[NotificationPosition.bottomLeft]: "bottom-left",
+	[NotificationPosition.bottomRight]: "bottom-right"
+};
+function sendNotification({ message, description, duration, key = getKey("success", message, description, duration), placement = NotificationPosition.bottomRight, style, dataTest, type }) {
+	const icon = getIcon(type);
+	const handleClose = () => {
+		onAlertClose(key);
+		if (key) removeNotificationsWithKey(attrSafeKey(`notification-${key}`));
+	};
+	if (key) {
+		toast.dismiss(key);
+		removeNotificationsWithKey(attrSafeKey(`notification-${key}`));
+	}
+	const position = positionToPlacement[placement];
+	toast.success(messageWithCount(key, message, dataTest), {
+		id: key,
+		description: styleDescription(description),
+		icon,
+		duration: duration ? duration * 1e3 : void 0,
+		position,
+		className: CLASS_NAMES.NOTIFICATION,
+		style,
+		onDismiss: handleClose,
+		onAutoClose: handleClose
+	});
+}
+
+//#endregion
+//#region src/lib/internal-details/superblocks-context.tsx
+var SuperblocksAppContext = class {
+	context;
+	constructor() {
+		makeAutoObservable(this);
+	}
+	get user() {
+		return this.context?.user;
+	}
+	get groups() {
+		return this.context?.groups;
+	}
+	get selectedProfile() {
+		return this.context?.profiles?.selected;
+	}
+	get profiles() {
+		return this.context?.profiles;
+	}
+	setProfile(profileName) {
+		const profile = this.context?.profiles?.available.find((profile$1) => profile$1.displayName === profileName);
+		if (profile && this.context?.profiles) this.context.profiles.selected = profile;
+		else if (!profile || !this.context?.profiles) throw new Error(`Profile ${profileName} not found`);
+	}
+	updateContext(context$2) {
+		this.context = {
+			...this.context,
+			...context$2
+		};
+	}
+};
+const context$1 = new SuperblocksAppContext();
+const SuperblocksContext = createContext(context$1);
+function SuperblocksContextProvider({ children, value: contextOverride }) {
+	if (contextOverride) return /* @__PURE__ */ jsx(SuperblocksContext.Provider, {
+		value: contextOverride,
+		children
+	});
+	return /* @__PURE__ */ jsx(SuperblocksContext.Provider, {
+		value: context$1,
+		children
+	});
+}
+function useSuperblocksContext() {
+	return useContext(SuperblocksContext);
+}
+function useSuperblocksUser() {
+	const context$2 = useSuperblocksContext();
+	return useSyncExternalStore((onStoreChange) => {
+		return reaction(() => context$2.user, onStoreChange);
+	}, () => {
+		return context$2.user;
+	}, () => {
+		return context$2.user;
+	});
+}
+function useSuperblocksGroups() {
+	const context$2 = useSuperblocksContext();
+	return useSyncExternalStore((onStoreChange) => {
+		return reaction(() => context$2.groups, onStoreChange);
+	}, () => {
+		return context$2.groups;
+	}, () => {
+		return context$2.groups;
+	});
+}
+function useSuperblocksProfiles() {
+	const context$2 = useSuperblocksContext();
+	return {
+		profiles: useSyncExternalStore((onStoreChange) => {
+			return reaction(() => context$2.profiles, onStoreChange);
+		}, () => {
+			return context$2.profiles;
+		}, () => {
+			return context$2.profiles;
+		}),
+		setProfile: useCallback((profileName) => {
+			context$2.setProfile(profileName);
+		}, [context$2])
+	};
+}
+
+//#endregion
+//#region src/lib/internal-details/lib/resolve-id-singleton.ts
+const EMBED_STRING = `embedded-`;
+let promiseCount = 0;
+const resolverMap = /* @__PURE__ */ new Map();
+const rejectorMap = /* @__PURE__ */ new Map();
+const multiUseCallbacks = /* @__PURE__ */ new Map();
+function addNewPromise(resolver, isMultiUse = false, rejecter) {
+	const promiseId = `${isEmbeddedBySuperblocksFirstParty() ? EMBED_STRING : ""}p${++promiseCount}`;
+	resolverMap.set(promiseId, resolver);
+	if (isMultiUse) multiUseCallbacks.set(promiseId, resolver);
+	if (rejecter) rejectorMap.set(promiseId, rejecter);
+	return promiseId;
+}
+function resolveById(id, payload) {
+	const isEmbedId = id.startsWith(EMBED_STRING);
+	if (isEmbeddedBySuperblocksFirstParty() && !isEmbedId || !isEmbeddedBySuperblocksFirstParty() && isEmbedId) editorBridge.resolvePromise(id, payload);
+	else try {
+		const resolver = resolverMap.get(id);
+		if (!resolver) throw new Error(`Promise not found for id ${id}`);
+		resolver(payload);
+		if (!multiUseCallbacks.has(id)) {
+			resolverMap.delete(id);
+			rejectorMap.delete(id);
+		}
+	} catch (e) {
+		console.log("Error resolving promise", e);
+	}
+}
+function rejectById(id, payload) {
+	const isEmbedId = id.startsWith(EMBED_STRING);
+	if (isEmbeddedBySuperblocksFirstParty() && !isEmbedId || !isEmbeddedBySuperblocksFirstParty() && isEmbedId) editorBridge.rejectPromise(id, payload);
+	else try {
+		const rejecter = rejectorMap.get(id);
+		if (!rejecter) throw new Error(`Promise not found for id ${id}`);
+		rejecter(payload);
+		if (!multiUseCallbacks.has(id)) {
+			resolverMap.delete(id);
+			rejectorMap.delete(id);
+		}
+	} catch (e) {
+		console.log("Error rejecting promise", e);
+	}
+}
+
+//#endregion
+//#region src/lib/tracing/context-utils.ts
+function getContextFromTraceHeaders(traceHeaders) {
+	let parentContext = context.active();
+	try {
+		parentContext = propagation.extract(context.active(), traceHeaders);
+	} catch (error) {
+		console.warn("Failed to extract parent context from headers", traceHeaders, error);
+	}
+	return parentContext;
+}
+function createIframeSpan(name, attributes, parentContext) {
+	return getTracer("superblocks-iframe").startSpan(name, { attributes }, parentContext);
+}
+function getTraceContextHeadersFromSpan(span) {
+	const traceContextHeaders = {};
+	const contextWithSpan = trace.setSpan(ROOT_CONTEXT, span);
+	propagation.inject(contextWithSpan, traceContextHeaders);
+	return traceContextHeaders;
+}
+
+//#endregion
+//#region src/lib/utils/generate-id.ts
+const generateId = () => {
+	return Math.random().toString(36).substring(2, 15);
+};
+
+//#endregion
+//#region 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, traceHeaders } = params;
+	let parentContext = context.active();
+	if (traceHeaders) parentContext = getContextFromTraceHeaders(traceHeaders);
+	let applicationId = "unknown";
+	if ("fetchByPath" in body) applicationId = body.fetchByPath.applicationId;
+	const span = createIframeSpan("iframe_execute_v2_api", {
+		"api-name": apiName || "unknown",
+		"application-id": applicationId,
+		event_type: eventType,
+		response_type: responseType,
+		view_mode: viewMode
+	}, parentContext);
+	try {
+		let cleanedBody;
+		try {
+			cleanedBody = cleanObject(body);
+		} catch {
+			cleanedBody = structuredClone(body);
+		}
+		if (controlFlowOnlyFiles && controlFlowOnlyFiles.length > 0) cleanedBody = {
+			...cleanedBody,
+			files: controlFlowOnlyFiles
+		};
+		const traceContextHeaders = getTraceContextHeadersFromSpan(span);
+		const init = {
+			method: HttpMethod.Post,
+			body: JSON.stringify(cleanedBody),
+			signal: abortController?.signal,
+			headers: {
+				[SUPERBLOCKS_AUTHORIZATION_HEADER]: `Bearer ${accessToken}`,
+				Authorization: `Bearer ${token}`,
+				[SUPERBLOCKS_REQUEST_ID_HEADER]: generateId(),
+				...traceContextHeaders
+			},
+			credentials: "include"
+		};
+		return responseType === ApiResponseType.STREAM ? await fetchServerStream({
+			augmentedInit: init,
+			fullUrl: baseUrl,
+			timeoutId: setTimeout(() => {}, 1e3),
+			onMessage,
+			processStreamEvents
+		}) : await fetchServer({
+			augmentedInit: init,
+			fullUrl: baseUrl,
+			timeoutId: setTimeout(() => {}, 1e3)
+		});
+	} catch (err) {
+		const message = `Failed to execute ${apiName || "API"}. ${err}`;
+		const suppressError = viewMode !== ViewMode.EDITOR && err?.code === 20;
+		if (notifyOnSystemError && !suppressError) console.log(message);
+		return { systemError: message };
+	} finally {
+		span.end();
+	}
+}
+const HttpMethod = {
+	Get: "GET",
+	Post: "POST",
+	Put: "PUT",
+	Patch: "PATCH",
+	Delete: "DELETE"
+};
+const stream = async ({ url, headers, body, onMessage, onComplete, onError, defaultError, method, baseUrl = "/api/", signal, init: overrideInit }) => {
+	const init = overrideInit ?? {
+		body: JSON.stringify(body),
+		headers,
+		method
+	};
+	try {
+		const response = await fetch(`${baseUrl}${url}`, init);
+		if (!response.ok) try {
+			const parsed = await response.json();
+			throw new HttpError(response.status, !response.status || response.status >= 500, parsed?.error?.message ?? parsed?.responseMeta?.error?.message ?? defaultError);
+		} catch (e) {
+			if (e instanceof HttpError) throw e;
+			throw new HttpError(response.status, !response.status || response.status >= 500, response.statusText);
+		}
+		if (!response.body) return;
+		const reader = response.body.getReader();
+		const decoder = new TextDecoder();
+		let done = false;
+		let lastChunk = "";
+		while (!done) {
+			if (signal && signal.aborted) return;
+			const { value, done: readerDone } = await reader.read();
+			const chunk = lastChunk + decoder.decode(value);
+			const messages = chunk.split("\n");
+			let jsonValues = [];
+			try {
+				jsonValues = messages.filter(Boolean).map((message) => JSON.parse(message.trim()));
+				lastChunk = "";
+			} catch (e) {
+				lastChunk = chunk;
+				if (readerDone) throw e;
+			}
+			for (const jsonValue of jsonValues.filter(Boolean)) {
+				if (jsonValue?.error) {
+					onError(jsonValue.error.message ?? defaultError);
+					return;
+				}
+				onMessage(jsonValue);
+			}
+			done = readerDone && lastChunk === "";
+		}
+	} catch (e) {
+		if (e.name === "AbortError") console.log("Fetch was cancelled");
+		else onError(e.message ?? defaultError, e.code);
+	} finally {
+		onComplete();
+	}
+};
+const handleError = (rawError, { fullUrl, augmentedInit }) => {
+	const error = rawError instanceof TypeError ? new HttpError(0, true, rawError.message) : rawError;
+	console.error(`Request to '${fullUrl} has failed
+Response Status: ${error.code}
+Response Status Text: ${error.message}`);
+	let critical = error.critical;
+	if (fullUrl.match(/apis\/.*/) && (critical || error.code === 0)) critical = false;
+	if (fullUrl.match(/\/(commits|deployment).*/) && error.code === 500) critical = false;
+	if (augmentedInit.method === HttpMethod.Get && fullUrl.match(/apis\/.*/)) critical = true;
+	else if (fullUrl.match(/apis\/.*/)) {}
+	if (error.code && error.code < 500 && error.code >= 400) {
+		if (error.code === 404) critical = true;
+	}
+	if (error.code >= 500) critical = false;
+};
+const fetchServerStream = async ({ augmentedInit, fullUrl, timeoutId, onMessage, processStreamEvents }) => {
+	const handleMessage = (message) => {
+		if (message?.result?.event?.data) onMessage && onMessage(message.result.event.data);
+		else if (message?.result?.event?.start || message?.result?.event?.end) processStreamEvents && processStreamEvents(message);
+	};
+	const onComplete = () => {
+		clearTimeout(timeoutId);
+	};
+	const onError = (error, statusCode) => {
+		if (statusCode != null) handleError(new HttpError(statusCode, !statusCode || statusCode >= 500, error), {
+			fullUrl,
+			augmentedInit,
+			timeoutId
+		});
+		else handleError(new TypeError(error), {
+			fullUrl,
+			augmentedInit,
+			timeoutId
+		});
+	};
+	return stream({
+		url: fullUrl,
+		init: augmentedInit,
+		onMessage: handleMessage,
+		onComplete,
+		onError,
+		baseUrl: "",
+		signal: augmentedInit?.signal ?? void 0
+	});
+};
+const getErrorMessageFromObject = (message) => {
+	const messageJSONString = JSON.stringify(message);
+	const match = /"message"\s*:\s*"([^"]*)"/.exec(messageJSONString);
+	return match ? match[1] : messageJSONString;
+};
+const fetchServer = ({ augmentedInit, fullUrl, timeoutId }) => {
+	return fetch(fullUrl, augmentedInit).then(async (response) => {
+		try {
+			if (response.status === 204) return null;
+			const json = await response.json();
+			if (response.ok && json) {
+				if (json.data == null) return json;
+				return json.data;
+			} else {
+				let message = json.responseMeta?.error?.message ?? json?.message;
+				if (typeof message === "object") message = getErrorMessageFromObject(message);
+				throw new HttpError(response.status, !response.status || response.status >= 500, message);
+			}
+		} catch (e) {
+			if (e instanceof HttpError) throw e;
+			throw new HttpError(response.status, !response.status || response.status >= 500, response.statusText);
+		}
+	}).catch((rawError) => {
+		handleError(rawError, {
+			fullUrl,
+			augmentedInit,
+			timeoutId
+		});
+	}).finally(() => clearTimeout(timeoutId));
+};
+var HttpError = class extends Error {
+	code;
+	critical;
+	constructor(code, critical = false, m) {
+		super(m);
+		this.code = code;
+		this.critical = critical;
+	}
+};
+const parseStreamResult = (streamResult, options) => {
+	if (!streamResult || !Array.isArray(streamResult) || !streamResult.length) return;
+	const execution = streamResult[0].result.execution;
+	const [errors, events] = streamResult.reduce((accum, event) => {
+		if (event.result.event.end && event.result.event.end.error) accum[0].push(event.result.event.end.error);
+		accum[1].push(event.result.event);
+		return accum;
+	}, [[], []]);
+	const result = {
+		execution,
+		events,
+		errors,
+		status: "STATUS_COMPLETED"
+	};
+	if (options?.includeFinalOutput) {
+		let returnBlockOutput;
+		for (let i = 0; i < streamResult.length; i++) {
+			const streamEvent = streamResult[i];
+			if (streamEvent.result.event.type === "BLOCK_TYPE_RETURN" && streamEvent.result.event.end) {
+				returnBlockOutput = streamEvent.result.event.end?.output;
+				break;
+			}
+		}
+		if (returnBlockOutput) result.output = returnBlockOutput;
+		else result.output = streamResult[streamResult.length - 1].result.event.end?.output;
+	}
+	return result;
+};
+const isApiV2ExecutionResponse = (response) => {
+	return !!response && "output" in response && response?.output?.result != null;
+};
+const decodeBytestringsInV2ExecutionResponse = (response) => {
+	if (!isApiV2ExecutionResponse(response)) return;
+	if (response.output) response.output.result = decodeBytestrings(response.output.result, false);
+	if (Array.isArray(response.events)) response.events.forEach((event) => {
+		const typedEvent = event;
+		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
+function getFileUploadId(file) {
+	return `${file.name.replace(/[^a-zA-Z0-9.-]/g, "_")}-${file.size}-${file.lastModified}`;
+}
+function getFileInputData(f) {
+	const superblocksId = getFileUploadId(f);
+	const nameParts = f.name.split(".");
+	const extension = nameParts.length > 1 ? nameParts.pop() || "" : "";
+	return {
+		$superblocksId: superblocksId,
+		name: f.name,
+		extension,
+		type: f.type,
+		size: f.size,
+		encoding: "text"
+	};
+}
+async function formatFileForRequest(file, fileId) {
+	return {
+		originalName: fileId,
+		buffer: await new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = () => resolve(reader.result.split(",")[1]);
+			reader.onerror = () => reject(new Error(reader.error?.message || "Unknown error reading file"));
+			reader.readAsDataURL(file);
+		}),
+		encoding: "base64",
+		mimetype: "text/plain"
+	};
+}
+async function getInputsWithFileMetadata(inputs) {
+	const filesForRequest = {};
+	const processValue = async (value) => {
+		if (value === void 0) return null;
+		if (value instanceof File) {
+			const inputData = getFileInputData(value);
+			if (!filesForRequest[inputData.$superblocksId]) filesForRequest[inputData.$superblocksId] = await formatFileForRequest(value, inputData.$superblocksId);
+			return inputData;
+		} else if (Array.isArray(value)) return await Promise.all(value.map((item) => processValue(item)));
+		else if (typeof value === "object" && value != null && value.constructor === Object) return await processObject(value);
+		return value;
+	};
+	const processObject = async (obj) => {
+		const result = {};
+		for (const [key, value] of Object.entries(obj)) result[key] = await processValue(value);
+		return result;
+	};
+	return {
+		inputs: await processObject(inputs),
+		files: Object.values(filesForRequest)
+	};
+}
+
+//#endregion
+//#region src/lib/internal-details/lib/features/api-store.ts
+var ApiManager = class {
+	agentUrls = [];
+	token;
+	accessToken;
+	runningApiControllers = {};
+	waitForInitApiPromise = void 0;
+	callContexts = {};
+	constructor(rootStore) {
+		this.rootStore = rootStore;
+	}
+	setTokens(token, accessToken) {
+		this.token = token;
+		this.accessToken = accessToken;
+	}
+	isInitialized() {
+		return !!this.token && !!this.accessToken;
+	}
+	async awaitInitApiIfNeeded() {
+		if (this.waitForInitApiPromise) await this.waitForInitApiPromise;
+	}
+	loadApiManifest({ apis = {} }) {
+		const apisToSet = Object.values(apis).map(({ api, scopeId }) => {
+			api.apiPb.metadata.id = api.apiPb.metadata.name;
+			return {
+				...api,
+				scopeId
+			};
+		});
+		this.waitForInitApiPromise = new Promise((resolve) => {
+			const callbackId = addNewPromise(resolve);
+			window.parent.postMessage({
+				type: "set-apis-deployed-mode",
+				payload: {
+					apis: apisToSet,
+					callbackId
+				}
+			}, "*");
+		});
+	}
+	@action async rerunApiByCallId(callId) {
+		const context$2 = this.callContexts[callId];
+		if (!context$2) {
+			console.error(`No call context found for callId: ${callId}`);
+			throw new Error(`No call context found for callId: ${callId}`);
+		}
+		if (context$2.callback) {
+			await context$2.callback();
+			return {
+				data: void 0,
+				error: void 0
+			};
+		}
+		const result = await this.executeApiInternal({
+			apiId: context$2.apiId,
+			apiName: context$2.apiName,
+			path: context$2.path,
+			inputs: context$2.inputs,
+			options: context$2.options,
+			callId,
+			callback: void 0
+		});
+		return {
+			data: result.data,
+			error: result.error
+		};
+	}
+	@action async runApiByPath({ path, inputs, callId, callback, isTestRun }) {
+		await this.awaitInitApiIfNeeded();
+		const apiName = path.match(/^\/apis\/([^/]+)\/api\.yaml$/)?.[1];
+		if (!apiName) throw new Error(`Invalid path: ${path}`);
+		editorBridge.setApiStarted(apiName);
+		const result = await this.executeApiInternal({
+			apiId: apiName,
+			apiName,
+			path,
+			inputs,
+			options: inputs ?? {},
+			callId,
+			isTestRun,
+			callback
+		});
+		editorBridge.setApiResponse(apiName, result.parsedResult);
+		return {
+			data: result.data,
+			error: result.error
+		};
+	}
+	async executeApiInternal({ apiId, apiName, path, inputs, options, callId: providedCallId, callback, isTestRun }) {
+		const executionStartTime = Date.now();
+		const callId = providedCallId ?? `${apiId}-${executionStartTime}-${Math.random().toString(36).substr(2, 9)}`;
+		const isRerun = !!this.callContexts[callId];
+		if (isRerun) editorBridge.updateApiRunRecord(apiId, callId, { loading: true });
+		if (!this.rootStore.applicationId) {
+			sendNotification({
+				message: "No application ID was found, ensure the app was bootstrap correctly.",
+				type: "error"
+			});
+			return {
+				parsedResult: {
+					status: "STATUS_COMPLETED",
+					execution: "",
+					errors: [{ message: "No application ID was found, ensure the app was bootstrap correctly." }]
+				},
+				data: null,
+				error: "No application ID was found"
+			};
+		}
+		if (!this.agentUrls.length) {
+			sendNotification({
+				message: "No active agent found",
+				type: "error"
+			});
+			return {
+				parsedResult: {
+					status: "STATUS_COMPLETED",
+					execution: "",
+					errors: [{ message: "No active agent found" }]
+				},
+				data: null,
+				error: "No active agent found"
+			};
+		}
+		const agentBaseUrl = this.agentUrls[Math.floor(Math.random() * this.agentUrls.length)];
+		const orchestratorUrl = new URL("v2/execute", agentBaseUrl).href;
+		const profileKey = context$1.profiles?.selected?.key ?? "staging";
+		const profileId = context$1.profiles?.selected?.id ?? "";
+		const events = [];
+		await this.rootStore.editStore?.operationManager.ensureFilesSynced();
+		const abortController = new AbortController();
+		this.runningApiControllers[apiName] = abortController;
+		const editMode$1 = isEditMode();
+		const isStream = editMode$1 ? true : false;
+		const authResult = await new Promise((resolve) => {
+			const callbackId = addNewPromise(resolve);
+			window.parent.postMessage({
+				type: "authenticate-api-request",
+				payload: {
+					apiId,
+					callbackId
+				}
+			}, "*");
+		});
+		if (authResult?.errors && authResult.errors.length > 0) console.error("API Authentication returned with errors", authResult.errors);
+		const { traceHeaders,...restArgs } = options;
+		const { inputs: finalInputs, files } = await getInputsWithFileMetadata({
+			...restArgs,
+			...inputs
+		});
+		const syncResponse = await executeV2Api({
+			body: {
+				inputs: finalInputs,
+				fetchByPath: {
+					path,
+					applicationId: this.rootStore.applicationId ?? "",
+					branchName: "main",
+					profile: {
+						name: profileKey,
+						id: profileId
+					},
+					viewMode: OrchestratorViewMode.UNSPECIFIED
+				},
+				options: {
+					includeEventOutputs: editMode$1,
+					includeEvents: isStream || editMode$1,
+					includeResolved: editMode$1
+				}
+			},
+			apiName,
+			controlFlowOnlyFiles: files,
+			environment: profileKey,
+			eventType: "api",
+			notifyOnSystemError: true,
+			responseType: isStream ? ApiResponseType.STREAM : ApiResponseType.SYNC,
+			baseUrl: isStream ? orchestratorUrl + "/stream" : orchestratorUrl,
+			agents: [],
+			viewMode: editMode$1 ? ViewMode.EDITOR : ViewMode.DEPLOYED,
+			accessToken: this.accessToken ?? "",
+			token: this.token ?? "",
+			traceHeaders,
+			abortController,
+			onMessage: (message) => {
+				editorBridge.sendStreamedApiMessage(message, apiName);
+			},
+			processStreamEvents: (event) => {
+				events.push(event);
+				editorBridge.sendStreamedApiEvent(event, apiName);
+			}
+		});
+		const parsedResult = (isStream ? parseStreamResult(events, { includeFinalOutput: true }) : syncResponse) ?? void 0;
+		if (parsedResult) decodeBytestringsInV2ExecutionResponse(parsedResult);
+		delete this.runningApiControllers[apiName];
+		const error = this.findError(parsedResult ?? void 0);
+		const data = isApiV2ExecutionResponse(parsedResult) ? parsedResult?.output?.result : null;
+		const timeTaken = Date.now() - executionStartTime;
+		this.callContexts[callId] = {
+			apiId,
+			apiName,
+			path,
+			inputs,
+			options,
+			callback
+		};
+		if (isRerun) editorBridge.updateApiRunRecord(apiId, callId, {
+			timestamp: executionStartTime,
+			statusCode: this.extractStatusCode(parsedResult),
+			timeTaken,
+			inputs,
+			response: data,
+			error,
+			loading: false,
+			isTestRun
+		});
+		else editorBridge.addApiRunRecord(apiId, {
+			id: `${apiId}-${executionStartTime}`,
+			callId,
+			timestamp: executionStartTime,
+			statusCode: this.extractStatusCode(parsedResult),
+			timeTaken,
+			inputs,
+			response: data,
+			error,
+			loading: false,
+			isTestRun
+		});
+		return {
+			parsedResult,
+			data,
+			error
+		};
+	}
+	findError(apiResponse) {
+		if (apiResponse && "systemError" in apiResponse) return;
+		const firstUnhandledError = apiResponse?.errors?.find((error) => !error?.handled);
+		if (!firstUnhandledError) return;
+		return `Error in API: ${firstUnhandledError?.message}`;
+	}
+	extractStatusCode(response) {
+		if (!response) return 500;
+		if ("systemError" in response) return 500;
+		if ("errors" in response && response.errors && response.errors.length > 0) return 500;
+		if ("status" in response && response.status === "STATUS_COMPLETED") return 200;
+		return 500;
+	}
+	@action async cancelApi(apiName, _scopeId) {
+		const abortController = this.runningApiControllers[apiName];
+		if (!abortController) {
+			console.warn(`No running API execution found for ${apiName}`);
+			return;
+		}
+		abortController.abort();
+		delete this.runningApiControllers[apiName];
+		editorBridge.setApiResponse(apiName, {
+			status: "STATUS_CANCELLED",
+			execution: null,
+			events: [],
+			errors: [{ message: "API execution was cancelled" }],
+			output: null
+		});
+	}
+};
+var api_store_default = ApiManager;
+
+//#endregion
+//#region src/lib/internal-details/lib/evaluator/sanitize-object.ts
+const objectFallbackCache = /* @__PURE__ */ new WeakMap();
+function sanitizeObject(obj) {
+	if (!objectFallbackCache.has(obj)) objectFallbackCache.set(obj, {});
+	const fallbackCache = objectFallbackCache.get(obj);
+	return new Proxy(obj, { get(target, prop) {
+		try {
+			const value = target[prop];
+			if (typeof prop === "string") fallbackCache[prop] = value;
+			return value;
+		} catch (error) {
+			if (error instanceof Promise) return typeof prop === "string" ? fallbackCache[prop] : void 0;
+			throw error;
+		}
+	} });
+}
+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
+const microPatches = (oldValue, newValue, baseStr) => {
+	const cleanedOldValue = removeBindAndReactElements(oldValue);
+	const cleanedNewValue = removeBindAndReactElements(newValue);
+	if (cleanedOldValue === void 0) return [{
+		op: "add",
+		path: pathStringToArray(baseStr),
+		value: cleanedNewValue
+	}];
+	if (isPrimitive(cleanedOldValue) || isPrimitive(cleanedNewValue)) {
+		if (cleanedOldValue !== cleanedNewValue) return [{
+			op: "update",
+			path: pathStringToArray(baseStr),
+			value: cleanedNewValue
+		}];
+		return [];
+	}
+	const diffs = diff(cleanedOldValue, cleanedNewValue);
+	const basePath = pathStringToArray(baseStr);
+	return diffs.map((diff$1) => toMobXPatchFromMicroDiff(diff$1, basePath));
+};
+function isPrimitive(value) {
+	return value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || typeof value === "undefined";
+}
+function toMobXPatchFromMicroDiff(diff$1, basePath) {
+	const type = diff$1.type;
+	const fullPath = [...basePath, ...diff$1.path];
+	switch (type) {
+		case "CREATE": return {
+			op: "add",
+			path: fullPath,
+			value: diff$1.value
+		};
+		case "CHANGE": return {
+			op: "update",
+			path: fullPath,
+			value: diff$1.value
+		};
+		case "REMOVE": return {
+			op: "remove",
+			path: fullPath
+		};
+		default: throw new Error(`Unhandled diff type: ${type}`);
+	}
+}
+const removeBindAndReactElements = (value) => {
+	if (!value || typeof value !== "object") return value;
+	if (isReactElement(value)) return;
+	if (Array.isArray(value)) return value.map(removeBindAndReactElements);
+	return Object.fromEntries(Object.entries(value).map(([key, value$1]) => {
+		if (key === "bind") return [key, void 0];
+		return [key, removeBindAndReactElements(value$1)];
+	}));
+};
+
+//#endregion
+//#region src/edit-mode/mobx-sync/deep-observe.ts
+function buildPath(entry) {
+	if (!entry) return "ROOT";
+	const res = [];
+	while (entry.parent) {
+		res.push(entry.path);
+		entry = entry.parent;
+	}
+	return res.reverse().join("/");
+}
+function isRecursivelyObservable(thing) {
+	return isObservableObject(thing) || isObservableArray(thing) || isObservableMap(thing);
+}
+/**
+* Given an object, deeply observes the given object.
+* It is like `observe` from mobx, but applied recursively, including all future children.
+*
+* Note that the given object cannot ever contain cycles and should be a tree.
+*
+* As benefit: path and root will be provided in the callback, so the signature of the listener is
+* (change, path, root) => void
+*
+* The returned disposer can be invoked to clean up the listener
+*
+* deepObserve cannot be used on computed values.
+*
+* @example
+* const disposer = deepObserve(target, (change, path) => {
+*    console.dir(change)
+* })
+*/
+function deepObserve(target, listener) {
+	const entrySet = /* @__PURE__ */ new WeakMap();
+	function genericListener(change) {
+		const entry = entrySet.get(change.object);
+		processChange(change, entry);
+		listener(change, buildPath(entry), target);
+	}
+	function processChange(change, parent) {
+		switch (change.type) {
+			case "add":
+				observeRecursively(change.newValue, parent, change.name);
+				break;
+			case "update":
+				unobserveRecursively(change.oldValue);
+				observeRecursively(change.newValue, parent, change.name || "" + change.index);
+				break;
+			case "remove":
+			case "delete":
+				unobserveRecursively(change.oldValue);
+				break;
+			case "splice":
+				change.removed.map(unobserveRecursively);
+				change.added.forEach((value, idx) => observeRecursively(value, parent, "" + (change.index + idx)));
+				for (let i = change.index + change.addedCount; i < change.object.length; i++) if (isRecursivelyObservable(change.object[i])) {
+					const entry = entrySet.get(change.object[i]);
+					if (entry) entry.path = "" + i;
+				}
+				break;
+		}
+	}
+	function observeRecursively(thing, parent, path) {
+		if (isRecursivelyObservable(thing)) {
+			const entry = entrySet.get(thing);
+			if (entry) {
+				if (entry.parent !== parent || entry.path !== path) throw new Error(`The same observable object cannot appear twice in the same tree, trying to assign it to '${buildPath(parent)}/${path}', but it already exists at '${buildPath(entry.parent)}/${entry.path}'`);
+			} else {
+				const entry$1 = {
+					parent,
+					path,
+					dispose: observe(thing, genericListener)
+				};
+				entrySet.set(thing, entry$1);
+				entries(thing).forEach(([key, value]) => observeRecursively(value, entry$1, "" + key));
+			}
+		}
+	}
+	function unobserveRecursively(thing) {
+		if (isRecursivelyObservable(thing)) {
+			const entry = entrySet.get(thing);
+			if (!entry) return;
+			entrySet.delete(thing);
+			entry.dispose();
+			values(thing).forEach(unobserveRecursively);
+		}
+	}
+	observeRecursively(target, void 0, "");
+	return () => {
+		unobserveRecursively(target);
+	};
+}
+
+//#endregion
+//#region src/edit-mode/mobx-sync/mobx-editor-sync.ts
+/**
+* Syncs a mobx store to the editor automatically through postmessage
+*/
+function startEditorSync(options) {
+	if (!isEditMode()) return () => {};
+	const { store, storeId, keys, projection, debounce } = options;
+	const reactionOptions = {
+		delay: debounce,
+		name: `editor-sync(${storeId})`
+	};
+	let initialState;
+	if (keys) initialState = sanitizedToJS(pick(store, Object.keys(keys)));
+	else if (projection) initialState = sanitizedToJS(projection(store));
+	else initialState = sanitizedToJS(store);
+	editorBridge.initializeEditorSyncedStore({
+		storeId,
+		initialState
+	});
+	if (projection) {
+		const initialProjection = projection(store);
+		const projectionKeys = Object.keys(initialProjection);
+		const createDisposer = (key) => {
+			let lastValue;
+			return reaction(() => {
+				return sanitizedToJS(projection(store)[key]);
+			}, (value) => {
+				const diffs = microPatches(lastValue, value, key);
+				lastValue = value;
+				if (!(diffs.length === 0)) editorBridge.updateEditorSyncedStore({
+					storeId,
+					patch: diffs
+				});
+			}, reactionOptions);
+		};
+		const projectionDisposers = projectionKeys.reduce((acc, key) => {
+			acc[key] = createDisposer(key);
+			return acc;
+		}, {});
+		const projectionKeysDisposer = reaction(() => Object.keys(projection(store)), (newKeys) => {
+			const lastKeys = Object.keys(projectionDisposers);
+			const deletedKeys = lastKeys.filter((key) => !newKeys.includes(key));
+			newKeys.filter((key) => !lastKeys.includes(key)).forEach((key) => {
+				projectionDisposers[key] = createDisposer(key);
+				editorBridge.updateEditorSyncedStore({
+					storeId,
+					patch: {
+						op: "update",
+						path: [key],
+						value: sanitizedToJS(projection(store)[key])
+					}
+				});
+			});
+			deletedKeys.forEach((key) => {
+				projectionDisposers[key]();
+				delete projectionDisposers[key];
+				editorBridge.updateEditorSyncedStore({
+					storeId,
+					patch: {
+						op: "remove",
+						path: [key]
+					}
+				});
+			});
+		}, reactionOptions);
+		return () => {
+			projectionKeysDisposer();
+			Object.values(projectionDisposers).forEach((disposer) => disposer());
+		};
+	}
+	const keyArr = Object.keys(keys ?? store);
+	const computedKeys = keyArr.filter((key) => isComputedProp(store, key));
+	const observableKeys = keyArr.filter((key) => !computedKeys.includes(key));
+	const disposers = [];
+	const computedDisposers = computedKeys.map((key) => reaction(() => store[key], (value) => {
+		editorBridge.updateEditorSyncedStore({
+			storeId,
+			patch: {
+				op: "update",
+				path: [key],
+				value
+			}
+		});
+	}, reactionOptions));
+	disposers.push(...computedDisposers);
+	if (observableKeys.length > 0 || !(keys !== void 0)) {
+		const deepDisposer = deepObserve(store, (change, pathStr) => {
+			const patch = toMobXPatch(change, pathStr);
+			if (keys && !keys[patch.path[0]]) return;
+			try {
+				editorBridge.updateEditorSyncedStore({
+					storeId,
+					patch
+				});
+			} catch (error) {
+				console.error(`[startEditorSync][${storeId}] Failed to send patch:`, error);
+			}
+		});
+		disposers.push(deepDisposer);
+	}
+	return () => {
+		disposers.forEach((disposer) => disposer());
+	};
+}
+
+//#endregion
+//#region src/lib/user-facing/properties-panel/properties-panel-definition.ts
+function createPropertiesPanelDefinition(sections, componentProps) {
+	const sectionDefs = [];
+	const getSectionChildren = (propDefinitions, parentPath) => {
+		const properties = [];
+		/**
+		* There are three ways we can display a Composite prop:
+		* 1. Prop control + popover panel (e.g: TextStyle)
+		* 2. Prop control (e.g: Border)
+		* 3. Inline, without a prop control (e.g: Search prop on Table, which contains backgroundColor, borderRadius, etc.)
+		*
+		* isCompositeWithInlineNestedProps is used to determine if a prop is of type (3).
+		*/
+		const isCompositeWithInlineNestedProps = (prop, fullPath) => {
+			if (!(prop instanceof CompositeProp) || !prop.hasPropertiesPanelDisplay()) return false;
+			const displayMode = prop.propertiesPanelChildrenDisplayMode();
+			if (!displayMode) return false;
+			return (typeof displayMode === "function" ? displayMode(componentProps, fullPath) : displayMode)?.type === "inline";
+		};
+		for (const [name, prop] of Object.entries(propDefinitions)) {
+			if (!prop) continue;
+			const fullPath = parentPath ? `${parentPath}.${name}` : name;
+			if (isCompositeWithInlineNestedProps(prop, fullPath)) {
+				const inlinePropertiesDefs = getSectionChildren(prop.nestedProps, fullPath);
+				properties.push(...inlinePropertiesDefs);
+			} else if (prop.hasPropertiesPanelDisplay()) {
+				const def = prop.setName(fullPath).toDefinition(componentProps);
+				if (def) properties.push(def);
+			}
+		}
+		return properties;
+	};
+	for (const section of Object.values(sections)) {
+		const children = getSectionChildren(section.props, "");
+		if (children.length === 0) continue;
+		sectionDefs.push({
+			name: section.name,
+			category: section.category,
+			children,
+			showHeader: section.propertiesPanelConfig.showHeader,
+			isDefaultOpen: section.propertiesPanelConfig.isDefaultOpen,
+			headerType: section.propertiesPanelConfig.headerType,
+			subHeader: section.propertiesPanelConfig.subHeader
+		});
+	}
+	return { sections: sectionDefs };
+}
+
+//#endregion
+//#region src/lib/user-facing/properties-panel/props-builder.ts
+function mergeRelations(existingRelations, relations) {
+	if (!existingRelations || existingRelations.length === 0) return relations;
+	if (!relations || relations.length === 0) return existingRelations;
+	return existingRelations && existingRelations.length > 0 ? existingRelations.flatMap((existing) => relations.map((relation) => [...existing, ...relation])) : relations;
+}
+function getChildren(input, path, props) {
+	function getChildrenFromSection(section) {
+		return Object.keys(section.props).reduce((acc, key) => {
+			const prop = section.props[key];
+			if (!prop) return acc;
+			const definition = prop.setName(path + "." + key).toDefinition(props);
+			if (definition) acc[key] = definition;
+			return acc;
+		}, {});
+	}
+	let children;
+	if (input instanceof Section) children = getChildrenFromSection(input);
+	else if (Object.values(input).every((c) => c instanceof Section)) children = Object.values(input).reduce((acc, section) => {
+		return {
+			...acc,
+			...getChildrenFromSection(section)
+		};
+	}, {});
+	else children = Object.fromEntries(Object.entries(input).map(([key, prop]) => {
+		return [key, prop.setName(path + "." + key).toDefinition(props)];
+	}));
+	return children;
+}
+var Section = class Section {
+	props = {};
+	propertiesPanelConfig = {
+		showHeader: true,
+		isDefaultOpen: true
+	};
+	constructor(category) {
+		this.category = category;
+	}
+	static category(category) {
+		return new Section(category);
+	}
+	children(props) {
+		if (props instanceof CompositeProp || props instanceof RecordProp) this.props = {
+			...this.props,
+			...props.getProps()
+		};
+		else if (props instanceof UnionProp) this.props = {
+			...this.props,
+			...props.getProps()
+		};
+		else this.props = {
+			...this.props,
+			...props
+		};
+		return this;
+	}
+	add = this.children;
+	propertiesPanel(config) {
+		this.propertiesPanelConfig = {
+			...this.propertiesPanelConfig,
+			...config
+		};
+		return this;
+	}
+	get name() {
+		switch (this.category) {
+			case PropsCategory.Content: return "Content";
+			case PropsCategory.Routing: return "Routing";
+			case PropsCategory.Interaction: return "Interaction";
+			case PropsCategory.Layout: return "Layout";
+			case PropsCategory.Appearance: return "Appearance";
+			case PropsCategory.Permissions: return "Permissions";
+			case PropsCategory.EventHandlers: return "Actions";
+			case PropsCategory.Styles: return "Styles";
+			case PropsCategory.Uncategorized: return "Uncategorized";
+			default: return "Uncategorized";
+		}
+	}
+};
+var Prop = class Prop {
+	prop;
+	/**
+	* Relations are an array of arrays
+	* each sub-array is AND requirements, and each element is an OR requirement
+	*/
+	relations = [];
+	constructor(typeString) {
+		this.prop = {
+			path: "",
+			dataType: typeString
+		};
+	}
+	static unset() {
+		return new Prop("any");
+	}
+	static string() {
+		return new Prop("string");
+	}
+	static number() {
+		return new Prop("number");
+	}
+	static boolean() {
+		return new Prop("boolean");
+	}
+	static array() {
+		return new Prop("array");
+	}
+	static any() {
+		return new Prop("any");
+	}
+	static jsx() {
+		return new Prop("jsx");
+	}
+	static literal(value) {
+		switch (typeof value) {
+			case "string": return Prop.string().default(value);
+			case "number": return Prop.number().default(value);
+			case "boolean": return Prop.boolean().default(value);
+			default: {
+				const exhaustiveCheck = value;
+				throw new Error(`Invalid literal value: ${exhaustiveCheck}`);
+			}
+		}
+	}
+	static eventHandler() {
+		return new Prop("eventHandler");
+	}
+	static function(implementation) {
+		return new FunctionProp(implementation);
+	}
+	/**
+	* Creates a composite property, which is a property that contains nested properties. For example,
+	* the following composite property:
+	*
+	* ```ts
+	* const prop = Prop.composite({
+	*   name: Prop.string(),
+	*   age: Prop.number(),
+	* });
+	* ```
+	*
+	* is equivalent to the following type:
+	*
+	* ```ts
+	* type Prop = {
+	*   name: string;
+	*   age: number;
+	* };
+	* ```
+	*/
+	static composite(props) {
+		return new CompositeProp(props);
+	}
+	/**
+	* Creates a record property, which is a record that maps string keys to the nestedproperties. For example,
+	* the following record property:
+	*
+	* ```ts
+	* const prop = Prop.record({
+	*   name: Prop.string(),
+	*   age: Prop.number(),
+	* });
+	* ```
+	*
+	* is equivalent to the following type:
+	*
+	* ```ts
+	* type Prop = Record<string, {
+	*   name: string;
+	*   age: number;
+	* }>;
+	* ```
+	*/
+	static record(props) {
+		return new RecordProp(props);
+	}
+	static union(props) {
+		return new UnionProp(props.shared, props.variants);
+	}
+	default(de) {
+		this.prop.default = de;
+		if (this.prop.propertiesPanelDisplay && this.prop.propertiesPanelDisplay.defaultValue === void 0) this.prop.propertiesPanelDisplay.defaultValue = de;
+		return this;
+	}
+	contextual(computedArgs) {
+		this.prop.contextual = true;
+		this.prop.computedArgs = computedArgs;
+		return this;
+	}
+	setName(name) {
+		this.prop.path = name;
+		return this;
+	}
+	propertiesPanel(schema) {
+		let baseControlType;
+		let isJSConvertible = true;
+		let isTriggerProperty = false;
+		let inputType;
+		switch (this.prop.dataType) {
+			case "string":
+				baseControlType = "INPUT_TEXT";
+				break;
+			case "number":
+				baseControlType = "INPUT_TEXT";
+				inputType = InputType.NUMBER;
+				break;
+			case "array":
+				baseControlType = "INPUT_TEXT";
+				break;
+			case "boolean":
+				baseControlType = "SWITCH";
+				break;
+			case "eventHandler":
+				baseControlType = "EVENT_HANDLER";
+				isJSConvertible = false;
+				isTriggerProperty = true;
+				break;
+			case "jsx":
+				baseControlType = "JSX";
+				break;
+			case "any":
+			default:
+				baseControlType = "INPUT_JS_EXPR";
+				break;
+		}
+		const propertiesPanelDisplay = {
+			controlType: baseControlType,
+			isJSConvertible,
+			isTriggerProperty,
+			defaultValue: schema.defaultValue ?? this.prop.default,
+			defaultOnAdd: this.prop.propertiesPanelDisplay?.defaultOnAdd,
+			inputType,
+			...schema
+		};
+		this.prop.propertiesPanelDisplay = propertiesPanelDisplay;
+		return this;
+	}
+	setDisplayProperty(property, value) {
+		if (!this.prop.propertiesPanelDisplay) return this;
+		this.prop.propertiesPanelDisplay[property] = value;
+		return this;
+	}
+	docs(docs) {
+		this.prop.docs = docs;
+		return this;
+	}
+	build() {
+		return this.prop;
+	}
+	toDefinition(props) {
+		const evaluatedProperties = Object.entries(this.prop.propertiesPanelDisplay ?? {}).reduce((acc, [key, value]) => {
+			if (typeof value === "function") try {
+				acc[key] = value.bind(props)(this.prop.path);
+			} catch (e) {
+				console.error(`Error evaluating property ${key}:`, e);
+			}
+			return acc;
+		}, {});
+		if (evaluatedProperties.isVisible === false) return;
+		const propertiesPanelDisplay = {
+			...this.prop.propertiesPanelDisplay,
+			...evaluatedProperties
+		};
+		if ("treatDefaultAsNull" in propertiesPanelDisplay) {
+			if (propertiesPanelDisplay.treatDefaultAsNull) {
+				if (propertiesPanelDisplay.defaultOnAdd === void 0) propertiesPanelDisplay.defaultOnAdd = propertiesPanelDisplay.defaultValue;
+				propertiesPanelDisplay.defaultValue = void 0;
+			}
+		}
+		let panelConfig;
+		const childrenDisplay = propertiesPanelDisplay?.childrenDisplayMode;
+		if (childrenDisplay?.type === "popover") {
+			if (!(this instanceof CompositeProp || this instanceof RecordProp)) {
+				console.error(this);
+				throw new Error("Only composite properties can be used in popover properties at the moment");
+			}
+			const content = this.getProps();
+			const { type,...rest } = childrenDisplay;
+			let contentDef;
+			if (content instanceof Section) contentDef = { content };
+			else if (Object.values(content).every((c) => c instanceof Section)) contentDef = content;
+			else contentDef = { content: Section.category(PropsCategory.Content).propertiesPanel({ showHeader: false }).children(content) };
+			panelConfig = {
+				...createPropertiesPanelDefinition(contentDef, props),
+				...rest
+			};
+		}
+		if (this.prop.computedArgs) propertiesPanelDisplay.computedArgs = typeof this.prop.computedArgs === "function" ? this.prop.computedArgs(props) : this.prop.computedArgs;
+		const propertiesPanelDisplayWithPanelConfig = {
+			...propertiesPanelDisplay,
+			...panelConfig && { panelConfig }
+		};
+		return {
+			path: this.prop.path,
+			dataType: this.prop.dataType,
+			relations: this.relations,
+			propertiesPanelDisplay: propertiesPanelDisplayWithPanelConfig
+		};
+	}
+	getRelations() {
+		return this.relations;
+	}
+	dependsOn(relations) {
+		this.relations = relations;
+		return this;
+	}
+	hasPropertiesPanelDisplay() {
+		return this.prop.propertiesPanelDisplay !== void 0;
+	}
+	get type() {
+		return this.prop.dataType;
+	}
+	get path() {
+		return this.prop.path;
+	}
+};
+/**
+* See {@link Prop.composite}
+*/
+var CompositeProp = class extends Prop {
+	typeString = "composite";
+	nestedProps;
+	constructor(props) {
+		super("composite");
+		this.nestedProps = props;
+	}
+	getProps() {
+		return this.nestedProps;
+	}
+	toDefinition(props) {
+		const definition = super.toDefinition(props);
+		if (!definition) return;
+		return {
+			...definition,
+			children: getChildren(this.nestedProps, this.prop.path, props)
+		};
+	}
+	propertiesPanelChildrenDisplayMode() {
+		return this.prop.propertiesPanelDisplay?.childrenDisplayMode;
+	}
+};
+/**
+* See {@link Prop.record}
+*/
+var RecordProp = class extends Prop {
+	typeString = "recordOf";
+	nestedProps;
+	constructor(props) {
+		super("recordOf");
+		this.nestedProps = props;
+	}
+	getProps() {
+		return this.nestedProps;
+	}
+	toDefinition(props) {
+		const definition = super.toDefinition(props);
+		if (!definition) return;
+		return {
+			...definition,
+			children: getChildren(this.nestedProps, this.prop.path, props)
+		};
+	}
+};
+var FunctionProp = class extends Prop {
+	typeString = "function";
+	_actionPanel;
+	constructor(implementation) {
+		super("function");
+		this.default(implementation);
+	}
+	actionPanel(panel) {
+		this._actionPanel = panel || {};
+		return this;
+	}
+	getActionPanel() {
+		return this._actionPanel;
+	}
+};
+var UnionProp = class extends Prop {
+	typeString = "union";
+	shared;
+	variants;
+	constructor(shared, variants) {
+		super("any");
+		this.shared = shared;
+		this.variants = variants;
+	}
+	getProps() {
+		const sharedKeys = Object.keys(this.shared);
+		const variants = this.variants;
+		const preMergeRelationsMap = variants.reduce((acc, v) => {
+			Object.entries(v).forEach(([key, prop]) => {
+				const existingRelations = acc[key] ?? [];
+				const newRelations = prop.getRelations() ?? [];
+				acc[key] = [...existingRelations, ...newRelations];
+			});
+			return acc;
+		}, {});
+		const mergedVariants = variants.reduce((acc, v) => {
+			const relations = Object.entries(v).filter(([key]) => sharedKeys.includes(key)).map(([key, prop]) => {
+				return {
+					key,
+					value: prop.build().default
+				};
+			});
+			const filteredVariant = Object.fromEntries(Object.entries(v).filter(([key]) => !sharedKeys.includes(key)).map(([key, prop]) => {
+				const existingRelations = prop?.getRelations() ?? [];
+				const preMergeRelations = preMergeRelationsMap[key];
+				const existingNonPreMergeRelations = existingRelations.filter((r) => !preMergeRelations.some((p) => p === r));
+				const newProp = prop.dependsOn([...existingNonPreMergeRelations, ...mergeRelations(preMergeRelations, [relations])]);
+				if (acc[key]) {
+					const existingPropRelations = acc[key].getRelations() ?? [];
+					const newPropRelations = newProp.getRelations() ?? [];
+					const seenHashes = /* @__PURE__ */ new Set();
+					const uniqueRelations = [...existingPropRelations, ...newPropRelations].filter((relationGroup) => {
+						const hash = relationGroup.map((r) => `${r.key}:${String(r.value)}`).sort().join("|");
+						if (seenHashes.has(hash)) return false;
+						seenHashes.add(hash);
+						return true;
+					});
+					return [key, acc[key].dependsOn(uniqueRelations)];
+				}
+				return [key, newProp];
+			}));
+			return {
+				...acc,
+				...filteredVariant
+			};
+		}, {});
+		return {
+			...this.shared,
+			...mergedVariants
+		};
+	}
+};
+
+//#endregion
+//#region src/lib/user-facing/properties-panel/create-managed-props-list.ts
+const RECORD_PATH_IDENTIFIER = "*";
+function buildCompositeDefault(prop, name, parentDefault) {
+	const defaultThroughParent = parentDefault?.[name];
+	const selfDefault = prop.build().default;
+	let propDefault = defaultThroughParent ?? selfDefault;
+	if (!propDefault && typeof parentDefault === "function") propDefault = function getNestedDefault(s) {
+		return parentDefault.call(this, s)?.[name];
+	};
+	return propDefault;
+}
+function buildPropLeafDefault(prop, name, parentDefault) {
+	const defaultThroughParent = parentDefault?.[name];
+	let propDefault = prop.build().default ?? defaultThroughParent;
+	if (!propDefault && typeof parentDefault === "function") propDefault = function getNestedDefault(s) {
+		return parentDefault.call(this, s)?.[name];
+	};
+	return propDefault;
+}
+/**
+* Core traversal function that walks through all properties in sections
+* and calls the provided callback for each leaf property.
+*/
+function traverseProps(sections, onProp, parentPath = "") {
+	const processProps = ({ props, parentPath: parentPath$1, parentDefault }) => {
+		for (const [name, prop] of Object.entries(props)) {
+			if (!prop) continue;
+			const fullPath = parentPath$1 ? `${parentPath$1}.${name}` : name;
+			if (prop instanceof CompositeProp) {
+				const compositeDefault = buildCompositeDefault(prop, name, parentDefault);
+				processProps({
+					props: prop.nestedProps,
+					parentPath: fullPath,
+					parentDefault: compositeDefault
+				});
+			} else if (prop instanceof RecordProp) {
+				const recordPath = `${fullPath}.${RECORD_PATH_IDENTIFIER}`;
+				processProps({
+					props: prop.nestedProps,
+					parentPath: recordPath,
+					parentDefault: prop.build().default
+				});
+			} else if (prop instanceof Section) processProps({
+				props: prop.props,
+				parentPath: parentPath$1
+			});
+			else if (prop instanceof UnionProp) {
+				const sharedKeys = Object.keys(prop.shared);
+				processProps({
+					props: prop.shared,
+					parentPath: fullPath
+				});
+				for (const variant of prop.variants) processProps({
+					props: Object.fromEntries(Object.entries(variant).filter(([key]) => !sharedKeys.includes(key))),
+					parentPath: fullPath
+				});
+			} else if (prop instanceof Prop) onProp(prop, fullPath, name, parentDefault);
+			else console.warn("Invalid prop type", {
+				name,
+				prop
+			});
+		}
+	};
+	for (const section of Object.values(sections)) processProps({
+		props: section.props,
+		parentPath,
+		parentDefault: void 0
+	});
+}
+function createManagedPropsList(sections, parentPath = "") {
+	const managedPropsList = [];
+	traverseProps(sections, (prop, fullPath, name, parentDefault) => {
+		let configuredProp = prop.setName(fullPath);
+		const propDefault = buildPropLeafDefault(prop, name, parentDefault);
+		if (propDefault !== void 0) configuredProp = configuredProp.default(propDefault);
+		const builtProp = configuredProp.build();
+		if (builtProp.dataType === "internal") return;
+		managedPropsList.push({ ...builtProp });
+	}, parentPath);
+	return managedPropsList;
+}
+
+//#endregion
+//#region 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") {
+		const nestedProps = prop.getProps();
+		const objectFields = {};
+		for (const [key, nestedProp] of Object.entries(nestedProps)) if (nestedProp && typeof nestedProp.build === "function") {
+			const nestedPropData = nestedProp.build();
+			if (nestedPropData && nestedPropData.isExternallyReadable) objectFields[key] = analyzePropertyType(nestedPropData, nestedProp);
+		}
+		if (Object.keys(objectFields).length > 0) dataType = objectFields;
+	} else if (propData.dataType === "dimension") dataType = {
+		mode: "string",
+		value: "number"
+	};
+	else if (propData.dataType === "string" || propData.dataType === "number" || propData.dataType === "boolean" || propData.dataType === "array" || propData.dataType === "function") dataType = propData.dataType;
+	else dataType = "unknown";
+	return dataType;
+};
+
+//#endregion
+//#region 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 {
+	_componentRegistry = /* @__PURE__ */ new Map();
+	_componentToType = /* @__PURE__ */ new WeakMap();
+	_defaultContainerType;
+	_defaultButtonType;
+	_defaultTextType;
+	constructor(rootStore) {
+		this.rootStore = rootStore;
+		makeAutoObservable(this);
+		startEditorSync({
+			store: this,
+			storeId: "component-registry",
+			keys: {
+				customComponentList: true,
+				libraryComponentCatalogs: true,
+				libraryComponentEditorConfigs: true,
+				entityDefinitions: true
+			}
+		});
+	}
+	getOrCreateMetadata(type) {
+		let metadata = this._componentRegistry.get(type);
+		if (!metadata) {
+			metadata = {
+				type,
+				propertiesDefinition: {},
+				managedProps: [],
+				internalProps: [],
+				editorTemplates: [],
+				editorConfig: void 0
+			};
+			this._componentRegistry.set(type, metadata);
+		}
+		return metadata;
+	}
+	addComponent(type, rawComponent, propertiesDefinition) {
+		const metadata = this.getOrCreateMetadata(type);
+		metadata.propertiesDefinition = propertiesDefinition;
+		if (typeof rawComponent !== "string") this._componentToType.set(rawComponent, type);
+	}
+	deleteComponent(type) {
+		this._componentRegistry.delete(type);
+	}
+	renameComponent(oldName, newName) {
+		const metadata = this._componentRegistry.get(oldName);
+		if (metadata) {
+			metadata.type = newName;
+			this._componentRegistry.set(newName, metadata);
+			this._componentRegistry.delete(oldName);
+		}
+	}
+	addManagedProps(type, props) {
+		const metadata = this.getOrCreateMetadata(type);
+		metadata.managedProps = props;
+	}
+	deleteManagedProps(type) {
+		const metadata = this.getOrCreateMetadata(type);
+		metadata.managedProps = [];
+	}
+	addEditorTemplate(type, template) {
+		const metadata = this.getOrCreateMetadata(type);
+		const existingTemplates = metadata.editorTemplates;
+		if (existingTemplates.some((t) => t.catalog?.displayName === template.catalog?.displayName && t.catalog?.category === template.catalog?.category)) return;
+		metadata.editorTemplates = [...existingTemplates, template];
+	}
+	getEditorTemplates(type) {
+		return this._componentRegistry.get(type)?.editorTemplates;
+	}
+	getEditorConfigFromComponentType(type) {
+		const componentStrType = this.getTypeForComponent(type);
+		return componentStrType ? this.getEditorConfig(componentStrType) : void 0;
+	}
+	addEditorConfig(type, config) {
+		if (config.useAs) {
+			if (config.useAs.defaultContainer) this._defaultContainerType = type;
+			if (config.useAs.defaultButton) this._defaultButtonType = type;
+			if (config.useAs.defaultText) this._defaultTextType = type;
+		}
+		const metadata = this.getOrCreateMetadata(type);
+		metadata.editorConfig = config;
+	}
+	addInternalProps(type, props) {
+		const metadata = this.getOrCreateMetadata(type);
+		metadata.internalProps = props;
+	}
+	getInternalProps(type) {
+		return this._componentRegistry.get(type)?.internalProps ?? [];
+	}
+	getEditorConfig(type) {
+		return this._componentRegistry.get(type)?.editorConfig;
+	}
+	get entityDefinitions() {
+		const entityDefinitions = {};
+		for (const [componentType, metadata] of this._componentRegistry.entries()) {
+			const propertiesDefinition = metadata.propertiesDefinition;
+			if (!propertiesDefinition) continue;
+			const entityDefinition = {
+				description: metadata.editorConfig?.description,
+				props: {}
+			};
+			for (const section of Object.values(propertiesDefinition)) for (const [propKey, propValue] of Object.entries(section.props)) {
+				if (!propValue) continue;
+				const prop = propValue;
+				const propData = prop.build();
+				if (propData && propData.isExternallyReadable) {
+					const dataType = analyzePropertyType(propData, prop);
+					const entityDefEntry = {
+						label: propData.docs?.label,
+						description: propData.docs?.description,
+						isSettable: propData.isExternallySettable,
+						dataType
+					};
+					entityDefinition.props[propKey] = entityDefEntry;
+				}
+			}
+			entityDefinitions[componentType] = entityDefinition;
+		}
+		return entityDefinitions;
+	}
+	get libraryComponentCatalogs() {
+		const catalogs = [];
+		for (const [componentType, metadata] of this._componentRegistry.entries()) for (const template of metadata.editorTemplates) {
+			const catalog = template.catalog;
+			if (catalog) catalogs.push({
+				...catalog,
+				componentType
+			});
+		}
+		return catalogs;
+	}
+	get libraryComponentEditorConfigs() {
+		const configs = {};
+		for (const [componentType, metadata] of this._componentRegistry.entries()) if (metadata.editorConfig) configs[componentType] = metadata.editorConfig;
+		return configs;
+	}
+	get customComponentList() {
+		return Array.from(this._componentRegistry.keys());
+	}
+	get containerTypes() {
+		return new Set([this.defaultTagNames.container]);
+	}
+	get defaultTagNames() {
+		if (!this._defaultContainerType) console.warn("No default container registered - defaulting to 'Container'.");
+		if (!this._defaultButtonType) console.warn("No default button registered - defaulting to 'Button'.");
+		if (!this._defaultTextType) console.warn("No default text registered - defaulting to 'Text'.");
+		return {
+			container: this._defaultContainerType ?? "Container",
+			button: this._defaultButtonType ?? "Button",
+			text: this._defaultTextType ?? "Text"
+		};
+	}
+	get managedPropsRegistry() {
+		const registry = /* @__PURE__ */ new Map();
+		for (const [type, metadata] of this._componentRegistry.entries()) registry.set(type, metadata.managedProps);
+		return registry;
+	}
+	getManagedProps(type) {
+		return this._componentRegistry.get(type)?.managedProps ?? [];
+	}
+	/**
+	* Get the component type string for a raw component reference.
+	* Used for registry-based component identity checking.
+	*/
+	getTypeForComponent(component) {
+		return this._componentToType.get(component);
+	}
+	/**
+	* Check if a component or element type is registered in the component registry.
+	* Accepts both component references and string element names (e.g., "div").
+	* Used for component identity checking instead of symbol-based approach.
+	*/
+	hasComponent(component) {
+		if (typeof component === "string") return this._componentRegistry.has(component);
+		return this._componentToType.has(component);
+	}
+	/**
+	* Get the property path with the record identifier if it exists. For example,
+	* `columns.columnName.label` becomes `columns.*.label`, for record properties.
+	*/
+	getPropertyWithRecordIdentifier(type, path) {
+		const managedProps = this.getManagedProps(type);
+		const splitPath = path.split(".");
+		if (splitPath.length === 1) return path;
+		const [parentKey, _maybeTheRecordKey, ...rest] = splitPath;
+		for (const prop of managedProps) if (prop.path.startsWith(parentKey) && prop.path.includes(RECORD_PATH_IDENTIFIER) && rest.length > 0 && prop.path.endsWith(rest.join("."))) return [
+			parentKey,
+			RECORD_PATH_IDENTIFIER,
+			rest.join(".")
+		].join(".");
+		return path;
+	}
+};
+
+//#endregion
+//#region src/lib/internal-details/lib/root-store.ts
+var RootStore = class {
+	apis;
+	componentRegistry;
+	editStore;
+	locationStore;
+	currentPageScopeId;
+	applicationId;
+	userId;
+	windowOriginUrl;
+	editorRegisteredCallbacks = [];
+	constructor() {
+		this.apis = new api_store_default(this);
+		this.componentRegistry = new ComponentRegistry(this);
+		this.locationStore = new LocationStore(this);
+		makeObservable(this, {
+			editStore: observable.shallow,
+			setEditStore: action,
+			applicationId: observable,
+			userId: observable
+		});
+	}
+	setEditStore(editStore) {
+		if (this.editStore) return;
+		this.editStore = editStore;
+		this.editorRegisteredCallbacks.forEach((fn) => fn());
+		this.editorRegisteredCallbacks = [];
+	}
+	onEditorRegistered(fn) {
+		this.editorRegisteredCallbacks.push(fn);
+	}
+};
+var root_store_default = new RootStore();
+
+//#endregion
+//#region src/lib/user-facing/assets/images/clark.svg
+var _path$1, _path2, _path3, _path4, _path5, _path6, _path7, _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$1(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"
+	})))));
+};
+var clark_default = SvgClark;
+
+//#endregion
+//#region 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(clark_default)`
+  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;
+`;
+
+//#endregion
+//#region 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$1(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"
+	})));
+};
+var ai_stars_default = SvgAiStars;
+
+//#endregion
+//#region 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(MAX_PROMPT_LENGTH - 15, 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(ai_stars_default, {}), " Fix with Clark"]
+	});
+}
+
+//#endregion
+//#region src/lib/utils/widget-wrapper-naming.ts
+const getWidgetAnchorName = (selectorId) => {
+	return `--widget-${selectorId}`;
+};
+const getWidgetRectAnchorName = (selectorId) => {
+	return `--widget-rect-${selectorId}`;
+};
+
+//#endregion
+export { useSuperblocksUser as A, generateId as C, useSuperblocksContext as D, SuperblocksContextProvider as E, iframeMessageHandler as F, isEmbeddedBySuperblocksFirstParty as I, isEditMode as L, colors as M, editorBridge as N, useSuperblocksGroups as O, getEditStore as P, startEditorSync as S, resolveById as T, createManagedPropsList as _, ActionsContainer as a, Section as b, ErrorDetails as c, ErrorStack as d, ErrorSummary as f, root_store_default as g, StyledClarkIcon as h, ai_stars_default as i, sendNotification as j, useSuperblocksProfiles as k, ErrorIconContainer as l, SecondaryButton as m, getWidgetRectAnchorName as n, ErrorContainer as o, ErrorTitle as p, FixWithClarkButton as r, ErrorContent as s, getWidgetAnchorName as t, ErrorMessage as u, Prop as v, rejectById as w, createPropertiesPanelDefinition as x, PropsCategory as y };
+//# sourceMappingURL=widget-wrapper-naming-DxFT8zmk.js.map