@superblocksteam/library 2.0.59-next.2 → 2.0.59-next.3

package/dist/lib/index.js

@@ -1,6 +1,6 @@
-import { A as useSuperblocksUser, C as generateId, D as useSuperblocksContext, E as SuperblocksContextProvider, F as iframeMessageHandler, I as isEmbeddedBySuperblocksFirstParty, L as isEditMode, M as colors$1, N as editorBridge, O as useSuperblocksGroups, P as getEditStore, S as startEditorSync, T as resolveById, _ as createManagedPropsList, a as ActionsContainer, b as Section, c as ErrorDetails, d as ErrorStack, f as ErrorSummary, g as root_store_default, h as StyledClarkIcon, i as ai_stars_default, j as sendNotification, k as useSuperblocksProfiles, l as ErrorIconContainer, m as SecondaryButton, n as getWidgetRectAnchorName, o as ErrorContainer, p as ErrorTitle, r as FixWithClarkButton, s as ErrorContent, t as getWidgetAnchorName, u as ErrorMessage, v as Prop, w as rejectById, x as createPropertiesPanelDefinition, y as PropsCategory } from "../widget-wrapper-naming-DxFT8zmk.js";
+import { A as SuperblocksContextProvider, B as iframeMessageHandler, C as startEditorSync, E as getContextFromTraceHeaders, F as useSuperblocksUser, H as isEditMode, I as sendNotification, L as colors$1, M as useSuperblocksContext, N as useSuperblocksGroups, O as rejectById, P as useSuperblocksProfiles, R as editorBridge, S as createPropertiesPanelDefinition, T as createIframeSpan, V as isEmbeddedBySuperblocksFirstParty, _ as root_store_default, a as FixWithClarkButton, b as PropsCategory, c as ErrorContent, d as ErrorMessage, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, j as getAppMode, k as resolveById, l as ErrorDetails, m as ErrorTitle, n as useJSXContext, o as ActionsContainer, p as ErrorSummary, r as getWidgetAnchorName, s as ErrorContainer, u as ErrorIconContainer, v as createManagedPropsList, w as generateId, x as Section, y as Prop, z as getEditStore } from "../jsx-wrapper-Ddb528TO.js";
 import "../utils-AzBGeVXo.js";
-import { t as early_console_buffer_default } from "../early-console-buffer-SSPd-jq2.js";
+import { n as consoleLogAttributes, t as early_console_buffer_default } from "../early-console-buffer-oUqxIuRK.js";
 import { Dim, NATIVE_COMPONENT_TYPES, NO_SELECT_ATTRIBUTE, Property, Property as Property$1, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, generateSourceId, getBindingIdentifier } from "@superblocksteam/library-shared";
 import * as React$1 from "react";
 import React, { Suspense, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
@@ -363,6 +363,7 @@ let cachedBorderPresets = null;
 const borderWidth = defaultTheme.borderWidth;
 const borderRadius = defaultTheme.borderRadius;
 const boxShadow = defaultTheme.boxShadow;
+const DEFAULT_KEY = "DEFAULT";
 function isBoxShadowValue(value) {
 	const trimmedValue = value.trim().toLowerCase();
 	const isBoxShadow = /^(0|none|inset|outset|shadow-sm|shadow|shadow-md|shadow-lg|shadow-xl|shadow-2xl|shadow-inner|shadow-none)$/.test(trimmedValue);
@@ -402,24 +403,23 @@ function getBorderPresets() {
 	for (const [prop, value] of Object.entries(cssVariables.dark)) addCssSize(prop, value);
 	const borderWidthPresets = [...sizePresets];
 	const borderRadiusPresets = [...sizePresets];
-	for (const [key, value] of Object.entries(borderWidth)) if (typeof value === "string") borderWidthPresets.push({
-		label: formatLabel(key),
-		value: key,
-		rawValue: convertRemToPixels(value),
-		type: "tailwind"
-	});
-	for (const [key, value] of Object.entries(borderRadius)) if (typeof value === "string") borderRadiusPresets.push({
-		label: formatLabel(key),
-		value: key,
-		rawValue: convertRemToPixels(value),
-		type: "tailwind"
-	});
-	for (const [key, value] of Object.entries(boxShadow)) if (typeof value === "string") boxShadowPresets.push({
-		label: formatLabel(key),
-		value: key,
-		rawValue: value,
-		type: "tailwind"
-	});
+	function addTailwindProperty(presets, key, value, valueConverter) {
+		if (key === DEFAULT_KEY && typeof value === "string") presets.push({
+			label: "default",
+			value: "",
+			rawValue: valueConverter ? valueConverter(value) : convertRemToPixels(value),
+			type: "tailwind"
+		});
+		else if (typeof value === "string") presets.push({
+			label: formatLabel(key),
+			value: key,
+			rawValue: valueConverter ? valueConverter(value) : convertRemToPixels(value),
+			type: "tailwind"
+		});
+	}
+	for (const [key, value] of Object.entries(borderWidth)) addTailwindProperty(borderWidthPresets, key, value, convertRemToPixels);
+	for (const [key, value] of Object.entries(borderRadius)) addTailwindProperty(borderRadiusPresets, key, value, convertRemToPixels);
+	for (const [key, value] of Object.entries(boxShadow)) addTailwindProperty(boxShadowPresets, key, value);
 	const seen = /* @__PURE__ */ new Set();
 	const uniqueBorderWidthPresets = borderWidthPresets.filter((preset) => {
 		if (seen.has(preset.value)) return false;
@@ -825,14 +825,17 @@ const getApiPath = (name) => {
 	return apiPath;
 };
 function useApiStateful(name) {
+	const { sourceId } = useJSXContext();
 	return {
 		run: useCallback(async (inputs) => {
 			const apiPath = getApiPath(name);
+			const editMode = isEditMode();
 			return (await root_store_default.apis.runApiByPath({
 				path: apiPath,
-				inputs: inputs ?? {}
+				inputs: inputs ?? {},
+				...editMode ? { injectedCallerId: sourceId } : {}
 			})).data;
-		}, [name]),
+		}, [name, sourceId]),
 		cancel: useCallback(async () => {
 			await root_store_default.apis.cancelApi(name);
 		}, [name])
@@ -1345,13 +1348,16 @@ var OperationAPI = class {
 	/**
 	* @throws {Error} if the websocket connection can't be initiated after 3 attempts
 	*/
-	async connect({ peerId, userId, authorization, applicationId }) {
+	async connect({ peerId, userId, authorization, applicationId, traceContext, connectionType, connectionTarget }) {
 		try {
 			const socket = await connectSocket(this.serverUrl, {
 				peerId,
 				userId,
 				authorization,
 				applicationId,
+				traceContext,
+				connectionType,
+				connectionTarget,
 				onClose: this.handleSocketClose({
 					peerId,
 					userId,
@@ -1440,13 +1446,29 @@ function startSocketHeartbeat(socket) {
 		clearTimeout(timeoutId);
 	};
 }
-async function connectSocket(serverUrl, { peerId, userId, applicationId, authorization, onClose }) {
+async function connectSocket(serverUrl, { peerId, userId, applicationId, authorization, onClose, traceContext, connectionType, connectionTarget }) {
 	if (!serverUrl) return;
 	const wsUrl = new URL("/sb-updates", serverUrl);
 	wsUrl.searchParams.set("peerId", peerId);
 	if (userId) wsUrl.searchParams.set("userId", userId);
 	wsUrl.searchParams.set("applicationId", applicationId);
 	root_store_default.editStore?.connectionManager.initializeSocket();
+	let parentContext;
+	if (traceContext) parentContext = getContextFromTraceHeaders(traceContext);
+	const appWebsocketSpan = createIframeSpan("devServerAppWebSocketConnection", {
+		url: wsUrl.toString(),
+		connection_source: "app",
+		connection_type: connectionType || "initial",
+		connection_target: connectionTarget || "default",
+		application_id: applicationId
+	}, parentContext);
+	const wsStartTime = Date.now();
+	console.log("Dev server connection app websocket starting", consoleLogAttributes({
+		url: wsUrl.toString(),
+		connectionSource: "app",
+		connectionType: connectionType || "initial",
+		connectionTarget: connectionTarget || "default"
+	}));
 	try {
 		let stopSocketHeartbeat;
 		const socket = createISocketClient(new ISocketWithClientAuth(await connectWebSocket(wsUrl.toString()), authorization, {
@@ -1485,7 +1507,11 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, authori
 				stopSocketHeartbeat?.();
 				stopSocketHeartbeat = void 0;
 				onClose(event);
-				console.log("App<>Dev box Socket closed");
+				console.log("Dev server connection app websocket closed", consoleLogAttributes({
+					connectionSource: "app",
+					connectionType: connectionType || "initial",
+					connectionTarget: connectionTarget || "default"
+				}));
 				root_store_default.editStore?.connectionManager.disconnect();
 			},
 			timeouts: {
@@ -1493,12 +1519,47 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, authori
 				noResponseTimeoutInSeconds: 60
 			}
 		}));
-		console.log("connected to socket");
+		const wsDuration = Date.now() - wsStartTime;
+		console.log("Dev server connection app websocket succeeded", consoleLogAttributes({
+			connectionSource: "app",
+			connectionType: connectionType || "initial",
+			connectionTarget: connectionTarget || "default",
+			durationMs: wsDuration
+		}));
+		window.parent.postMessage({
+			type: "app-websocket-connected",
+			payload: {
+				success: true,
+				durationMs: wsDuration
+			}
+		}, "*");
+		appWebsocketSpan.end();
 		stopSocketHeartbeat = startSocketHeartbeat(socket);
 		root_store_default.editStore?.connectionManager.connect();
 		return socket;
 	} catch (error) {
-		console.error("Error connecting to socket", error);
+		const wsDuration = Date.now() - wsStartTime;
+		console.error("Dev server connection app websocket failed", consoleLogAttributes({
+			connectionSource: "app",
+			connectionType: connectionType || "initial",
+			connectionTarget: connectionTarget || "default",
+			durationMs: wsDuration,
+			error: error instanceof Error ? error.message : String(error)
+		}));
+		window.parent.postMessage({
+			type: "app-websocket-connected",
+			payload: {
+				success: false,
+				durationMs: wsDuration,
+				error: {
+					message: error instanceof Error ? error.message : String(error),
+					type: error instanceof Error ? error.constructor.name : "Unknown",
+					stack: error instanceof Error ? error.stack : void 0
+				}
+			}
+		}, "*");
+		if (error instanceof Error) appWebsocketSpan.recordException(error);
+		appWebsocketSpan.end();
 		root_store_default.editStore?.connectionManager.disconnect();
 		throw error;
 	}
@@ -1859,10 +1920,10 @@ var RuntimeComponentNode = class {
 			if (result) return result;
 		}
 	}
-	get nearestRegisteredAncestor() {
-		if (this.isSbComponent && (!this.noSelect || !this.isHtmlElement)) return this.selectorId;
+	get nearestSelectableAncestor() {
+		if (this.isSbComponent && !this.noSelect) return this.selectorId;
 		const componentParent = this.store.graph.parent(this.selectorId);
-		if (componentParent) return this.store.jsxNodes[componentParent]?.nearestRegisteredAncestor;
+		if (componentParent) return this.store.jsxNodes[componentParent]?.nearestSelectableAncestor;
 	}
 	get displayName() {
 		if (this.isHtmlElement) return this.type;
@@ -1930,13 +1991,13 @@ var RuntimeTrackingStore = class {
 	getFirstAnchorableTag(selectorId) {
 		return this.jsxNodes[selectorId]?.firstRenderedTag;
 	}
-	getNearestRegisteredAncestor(selectorId, skipSelf = false) {
+	getNearestSelectableAncestor(selectorId, skipSelf = false) {
 		if (skipSelf) {
 			const componentParent = this.graph.parent(selectorId);
-			if (componentParent) return this.jsxNodes[componentParent]?.nearestRegisteredAncestor;
+			if (componentParent) return this.jsxNodes[componentParent]?.nearestSelectableAncestor;
 			return;
 		}
-		return this.jsxNodes[selectorId]?.nearestRegisteredAncestor;
+		return this.jsxNodes[selectorId]?.nearestSelectableAncestor;
 	}
 	updatePropsForComponent(selectorId, props) {
 		const componentNode = this.jsxNodes[selectorId];
@@ -2530,23 +2591,23 @@ const Layers = {
 
 //#endregion
 //#region src/edit-mode/assets/close.svg
-var _path$1;
-function _extends$6() {
-	return _extends$6 = Object.assign ? Object.assign.bind() : function(n) {
+var _path$2;
+function _extends$7() {
+	return _extends$7 = 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$6.apply(null, arguments);
+	}, _extends$7.apply(null, arguments);
 }
 var SvgClose = function SvgClose$1(props) {
-	return /* @__PURE__ */ React$1.createElement("svg", _extends$6({
+	return /* @__PURE__ */ React$1.createElement("svg", _extends$7({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: 16,
 		height: 16,
 		fill: "none"
-	}, props), _path$1 || (_path$1 = /* @__PURE__ */ React$1.createElement("path", {
+	}, props), _path$2 || (_path$2 = /* @__PURE__ */ React$1.createElement("path", {
 		stroke: "currentColor",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
@@ -2557,6 +2618,37 @@ var close_default = SvgClose;
 
 //#endregion
 //#region src/edit-mode/assets/pencil.svg
+var _path$1, _path2$1;
+function _extends$6() {
+	return _extends$6 = 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$6.apply(null, arguments);
+}
+var SvgPencil = function SvgPencil$1(props) {
+	return /* @__PURE__ */ React$1.createElement("svg", _extends$6({
+		xmlns: "http://www.w3.org/2000/svg",
+		width: 16,
+		height: 16,
+		fill: "none"
+	}, props), _path$1 || (_path$1 = /* @__PURE__ */ React$1.createElement("path", {
+		fill: "#fff",
+		d: "m2.5 13.5 1.196-3.189a4 4 0 0 1 .917-1.424L10 3.5A2.5 2.5 0 0 0 12.5 6l-5.387 5.387a4 4 0 0 1-1.424.917z",
+		opacity: .12
+	})), _path2$1 || (_path2$1 = /* @__PURE__ */ React$1.createElement("path", {
+		stroke: "#fff",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		d: "M10 3.5 4.613 8.887a4 4 0 0 0-.917 1.424L2.5 13.5l3.189-1.196a4 4 0 0 0 1.424-.917L12.5 6M10 3.5l.75-.75a1.768 1.768 0 1 1 2.5 2.5L12.5 6M10 3.5A2.5 2.5 0 0 0 12.5 6"
+	})));
+};
+var pencil_default = SvgPencil;
+
+//#endregion
+//#region src/edit-mode/assets/target.svg
 var _path, _path2;
 function _extends$5() {
 	return _extends$5 = Object.assign ? Object.assign.bind() : function(n) {
@@ -2567,7 +2659,7 @@ function _extends$5() {
 		return n;
 	}, _extends$5.apply(null, arguments);
 }
-var SvgPencil = function SvgPencil$1(props) {
+var SvgTarget = function SvgTarget$1(props) {
 	return /* @__PURE__ */ React$1.createElement("svg", _extends$5({
 		xmlns: "http://www.w3.org/2000/svg",
 		width: 16,
@@ -2575,16 +2667,18 @@ var SvgPencil = function SvgPencil$1(props) {
 		fill: "none"
 	}, props), _path || (_path = /* @__PURE__ */ React$1.createElement("path", {
 		fill: "#fff",
-		d: "m2.5 13.5 1.196-3.189a4 4 0 0 1 .917-1.424L10 3.5A2.5 2.5 0 0 0 12.5 6l-5.387 5.387a4 4 0 0 1-1.424.917z",
+		fillRule: "evenodd",
+		d: "M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0M8 9.263a1.263 1.263 0 1 0 0-2.526 1.263 1.263 0 0 0 0 2.526",
+		clipRule: "evenodd",
 		opacity: .12
 	})), _path2 || (_path2 = /* @__PURE__ */ React$1.createElement("path", {
 		stroke: "#fff",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		d: "M10 3.5 4.613 8.887a4 4 0 0 0-.917 1.424L2.5 13.5l3.189-1.196a4 4 0 0 0 1.424-.917L12.5 6M10 3.5l.75-.75a1.768 1.768 0 1 1 2.5 2.5L12.5 6M10 3.5A2.5 2.5 0 0 0 12.5 6"
+		d: "M14 8a6 6 0 0 1-6 6m6-6a6 6 0 0 0-6-6m6 6h-2m-4 6a6 6 0 0 1-6-6m6 6v-2M2 8a6 6 0 0 1 6-6M2 8h2m4-6v2m1.263 4a1.263 1.263 0 1 1-2.526 0 1.263 1.263 0 0 1 2.526 0"
 	})));
 };
-var pencil_default = SvgPencil;
+var target_default = SvgTarget;
 
 //#endregion
 //#region src/edit-mode/interaction-utils.ts
@@ -2702,12 +2796,11 @@ function InteractionRectActions(props) {
 		event.stopPropagation();
 		event.preventDefault();
 		const sourceId = getEditStore().runtimeTrackingStore.getComponent(selectorId)?.sourceId;
-		if (sourceId) editorBridge.addComponentToAiContext(sourceId, selectorId);
+		if (sourceId) editorBridge.toggleComponentInAiContext(sourceId, selectorId, displayName);
 	};
 	const aiContextMode = getEditStore().ai.getAiContextMode();
 	const isAiTaggingEnabled = getEditStore().ai.getIsTaggingEnabled();
 	const shouldHideActions = !isPrimarySelectorId;
-	const shouldShowAddToChatButton = isAiTaggingEnabled && (aiContextMode === AiContextMode.SILENT || aiContextMode === AiContextMode.HIGHLIGHT && type !== "TARGETED");
 	const shouldShowAiPurplePill = isAiTaggingEnabled && (aiContextMode === AiContextMode.AUTO_SELECT || aiContextMode === AiContextMode.HIGHLIGHT && type === "TARGETED");
 	const renderedTagSelectorId = getEditStore().runtimeTrackingStore.getFirstAnchorableTag(selectorId);
 	const showDesignModeToggle = getEditStore().interactionMode === "interactive";
@@ -2750,15 +2843,15 @@ function InteractionRectActions(props) {
 					children: /* @__PURE__ */ jsx(close_default, {})
 				})
 			}), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipContent$1, { children: "Exit design mode" }) })] }) }),
-			shouldShowAddToChatButton && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Root, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			isAiTaggingEnabled && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Root, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				asChild: true,
 				children: /* @__PURE__ */ jsx("button", {
-					"aria-label": "Add to chat",
+					"aria-label": type === "TARGETED" ? "Remove from chat" : "Add to chat",
 					className: "sb-edit-add-to-chat-button",
 					onPointerDownCapture: handleAddToChat,
-					children: /* @__PURE__ */ jsx(ai_stars_default, {})
+					children: /* @__PURE__ */ jsx(target_default, {})
 				})
-			}), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipContent$1, { children: "Add to chat" }) })] }) }),
+			}), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipContent$1, { children: type === "TARGETED" ? "Remove from chat" : "Add to chat" }) })] }) }),
 			/* @__PURE__ */ jsx(interaction_rect_name_pill_default, {
 				selectorId,
 				displayName,
@@ -2920,7 +3013,7 @@ const InteractionRectTargetBorder = ({ selectorId }) => {
 };
 const InteractionRect = (props) => {
 	const { selectionType, selectorId } = props;
-	const parentSelectorId = getEditStore().runtimeTrackingStore.getNearestRegisteredAncestor(selectorId);
+	const parentSelectorId = getEditStore().runtimeTrackingStore.getNearestSelectableAncestor(selectorId);
 	const renderedParentTagSelectorId = parentSelectorId ? getEditStore().runtimeTrackingStore.getFirstAnchorableTag(parentSelectorId) : void 0;
 	const renderedTagSelectorId = getEditStore().runtimeTrackingStore.getFirstAnchorableTag(selectorId);
 	const aiContextMode = getEditStore().ai.getAiContextMode();
@@ -3056,7 +3149,10 @@ const IframeConnected = observer(function IframeConnected$1(props) {
 					peerId: data.payload.peerId,
 					userId: data.payload.userId,
 					authorization: data.payload.devServerAuthorization,
-					applicationId: data.payload.appId
+					applicationId: data.payload.appId,
+					traceContext: data.payload.traceContext,
+					connectionType: data.payload.connectionType,
+					connectionTarget: data.payload.connectionTarget
 				});
 			} catch (error) {
 				console.error("Error connecting to internal socket from library", error);
@@ -3127,7 +3223,7 @@ const EmbedWrapper = (props) => {
 				root_store_default.windowOriginUrl = event.data.payload.logContext.superblocks_window_origin_url;
 				if (root_store_default.windowOriginUrl) import("../utils-DR35eYvX.js").then(({ initTracerProviderWithOrigin }) => {
 					initTracerProviderWithOrigin(root_store_default.windowOriginUrl);
-					import("../logs-CgCPS9qr.js").then(({ initLibraryLoggerProvider }) => {
+					import("../logs-CQnzO-hw.js").then(({ initLibraryLoggerProvider }) => {
 						initLibraryLoggerProvider({
 							windowOriginUrl: root_store_default.windowOriginUrl,
 							appId: event.data.payload.appId,
@@ -3288,19 +3384,45 @@ const EmbedWrapper = (props) => {
 					}
 					case "RUN_API": {
 						const { apiName, traceHeaders, callId, isTestRun, inputs } = action$1.payload;
-						if (isTestRun) root_store_default.apis.runApiByPath({
-							path: getApiPath(apiName),
-							inputs: {
-								...traceHeaders,
-								...inputs
-							},
-							isTestRun: true
-						}).catch((error$1) => {
-							console.error(`Failed to test API ${apiName}:`, error$1);
-						});
-						else if (callId) root_store_default.apis.rerunApiByCallId(callId).catch((error$1) => {
-							console.error(`Failed to re-run API with callId ${callId}:`, error$1);
+						console.log("[iframe-wrappers] Received RUN_API:", {
+							apiName,
+							callId,
+							isTestRun,
+							hasInputs: !!inputs,
+							inputs,
+							traceHeaders
 						});
+						if (isTestRun) {
+							console.log("[iframe-wrappers] Running as test run");
+							root_store_default.apis.runApiByPath({
+								path: getApiPath(apiName),
+								inputs: {
+									...traceHeaders,
+									...inputs
+								},
+								isTestRun: true
+							}).catch((error$1) => {
+								console.error(`Failed to test API ${apiName}:`, error$1);
+							});
+						} else if (callId) {
+							console.log("[iframe-wrappers] Re-running with callId:", callId);
+							root_store_default.apis.rerunApiByCallId(callId).catch((error$1) => {
+								console.error(`Failed to re-run API with callId ${callId}:`, error$1);
+							});
+						} else {
+							console.log("[iframe-wrappers] This might be a Clark request - executing API normally");
+							root_store_default.apis.runApiByPath({
+								path: getApiPath(apiName),
+								inputs: {
+									...traceHeaders,
+									...inputs
+								},
+								callId,
+								isTestRun: false
+							}).catch((error$1) => {
+								console.error(`Failed to run API ${apiName}:`, error$1);
+							});
+						}
 						break;
 					}
 				}
@@ -3442,7 +3564,7 @@ const getWidgetFromPointHelper = (params) => {
 	const extendedWidget = widgetsWithBuffer.hoveredActual.find((item) => {
 		let actualSelectorId = item.selectorId;
 		if (item.noSelect) {
-			actualSelectorId = editStore.runtimeTrackingStore.getNearestRegisteredAncestor(item.selectorId, false);
+			actualSelectorId = editStore.runtimeTrackingStore.getNearestSelectableAncestor(item.selectorId, false);
 			if (!actualSelectorId) return false;
 		}
 		const componentType = editStore.runtimeTrackingStore.getComponent(actualSelectorId)?.type;
@@ -3456,7 +3578,7 @@ const getWidgetFromPointHelper = (params) => {
 	});
 	return getFirstItemWithFocusedSelectorPrioritized(atPointWidgets.hoveredPills) ?? atPointWidgets.hoveredActual[0];
 };
-const shouldBubbleUpForNearestRegisteredAncestor = (selectorId) => {
+const shouldBubbleUpForNearestSelectableAncestor = (selectorId) => {
 	const editStore = getEditStore();
 	if (editStore.runtimeTrackingStore.getComponent(selectorId)?.noSelect) return true;
 	const parentSelectorId = editStore.runtimeTrackingStore.getComponentParent(selectorId);
@@ -3492,8 +3614,8 @@ function getMostRelevantWidgetAtPoint(params) {
 		const relevantParent = getRelevantParentIfItReducesRepetition(widget.selectorId);
 		if (relevantParent) return relevantParent;
 	}
-	if (shouldBubbleUpForNearestRegisteredAncestor(widget.selectorId)) {
-		const registeredAncestor = editStore.runtimeTrackingStore.getNearestRegisteredAncestor(widget.selectorId, false);
+	if (shouldBubbleUpForNearestSelectableAncestor(widget.selectorId)) {
+		const registeredAncestor = editStore.runtimeTrackingStore.getNearestSelectableAncestor(widget.selectorId, false);
 		if (registeredAncestor) return registeredAncestor;
 	}
 	return widget.selectorId;
@@ -3586,16 +3708,29 @@ function useWidgetClick() {
 				event.preventDefault();
 				event.stopPropagation();
 			}
-			if (event.altKey || editStore.ai.getIsTaggingEnabled() && editStore.ai.shouldToggleComponentInAiContext()) {
+			if (event.altKey || editStore.ai.shouldToggleComponentInAiContext()) {
 				console.log("[useWidgetClick] Toggling component in AI context");
 				editorBridge.toggleComponentInAiContext(sourceId, selectorId, displayName);
 				return;
 			}
 			editStore.ui.selectWidget(selectorId, event.shiftKey === true);
 		};
+		const isInsideInteractionLayer = (element) => {
+			if (!(element instanceof Element)) return false;
+			return element.closest(`[${INTERACTION_LAYER_ATTRIBUTE}="true"]`) !== null;
+		};
+		const handlePointerDown = (event) => {
+			const isTargetMode = editStore.ai.shouldToggleComponentInAiContext();
+			if ((editStore.interactionMode === "design" || isTargetMode) && !isInsideInteractionLayer(event.target)) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
 		rootElement?.addEventListener("click", handleClick, { capture: true });
+		rootElement?.addEventListener("pointerdown", handlePointerDown, { capture: true });
 		return () => {
 			rootElement?.removeEventListener("click", handleClick, { capture: true });
+			rootElement?.removeEventListener("pointerdown", handlePointerDown, { capture: true });
 		};
 	}, []);
 }
@@ -3692,7 +3827,14 @@ const ExternalInteractionLayer = observer(() => {
 	const isEditStoreInitialized = Boolean(root_store_default.editStore?.isInitialized);
 	const interactionLayerVisible = root_store_default.editStore?.interactionMode === "design" || root_store_default.editStore?.interactionMode === "interactive";
 	if (!(isEditStoreInitialized && interactionLayerVisible)) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InteractionLayerManager, {}), root_store_default.editStore?.interactionMode === "design" && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `* { cursor: crosshair !important; }` } })] });
+	const isDesignMode = root_store_default.editStore?.interactionMode === "design";
+	const isTargetMode = root_store_default.editStore?.ai.shouldToggleComponentInAiContext();
+	const pencilCursor = `url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.12" d="M2.5 13.5L3.69577 10.3113C3.89627 9.77662 4.2089 9.2911 4.61266 8.88734L10 3.5C10 4.88071 11.1193 6 12.5 6L7.11266 11.3873C6.7089 11.7911 6.22338 12.1037 5.68873 12.3042L2.5 13.5Z" fill="black"/><path d="M10 3.5L4.61266 8.88734C4.2089 9.2911 3.89627 9.77662 3.69577 10.3113L2.5 13.5L5.68873 12.3042C6.22338 12.1037 6.7089 11.7911 7.11266 11.3873L12.5 6M10 3.5L10.75 2.75C11.4404 2.05964 12.5596 2.05964 13.25 2.75C13.9404 3.44036 13.9404 4.55964 13.25 5.25L12.5 6M10 3.5C10 4.88071 11.1193 6 12.5 6" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 3.5L4.61266 8.88734C4.2089 9.2911 3.89627 9.77662 3.69577 10.3113L2.5 13.5L5.68873 12.3042C6.22338 12.1037 6.7089 11.7911 7.11266 11.3873L12.5 6M10 3.5L10.75 2.75C11.4404 2.05964 12.5596 2.05964 13.25 2.75C13.9404 3.44036 13.9404 4.55964 13.25 5.25L12.5 6M10 3.5C10 4.88071 11.1193 6 12.5 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') 2 14, auto`;
+	const targetCursor = `url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.12" fill-rule="evenodd" clip-rule="evenodd" d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM8 9.26316C8.69762 9.26316 9.26316 8.69762 9.26316 8C9.26316 7.30238 8.69762 6.73684 8 6.73684C7.30238 6.73684 6.73684 7.30238 6.73684 8C6.73684 8.69762 7.30238 9.26316 8 9.26316Z" fill="black"/><path d="M14 8C14 11.3137 11.3137 14 8 14M14 8C14 4.68629 11.3137 2 8 2M14 8H12M8 14C4.68629 14 2 11.3137 2 8M8 14V12M2 8C2 4.68629 4.68629 2 8 2M2 8H4M8 2V4M9.26316 8C9.26316 8.69762 8.69762 9.26316 8 9.26316C7.30238 9.26316 6.73684 8.69762 6.73684 8C6.73684 7.30238 7.30238 6.73684 8 6.73684C8.69762 6.73684 9.26316 7.30238 9.26316 8Z" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 8C14 11.3137 11.3137 14 8 14M14 8C14 4.68629 11.3137 2 8 2M14 8H12M8 14C4.68629 14 2 11.3137 2 8M8 14V12M2 8C2 4.68629 4.68629 2 8 2M2 8H4M8 2V4M9.26316 8C9.26316 8.69762 8.69762 9.26316 8 9.26316C7.30238 9.26316 6.73684 8.69762 6.73684 8C6.73684 7.30238 7.30238 6.73684 8 6.73684C8.69762 6.73684 9.26316 7.30238 9.26316 8Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>') 8 8, auto`;
+	let cursorStyle = "";
+	if (isTargetMode) cursorStyle = `* { cursor: ${targetCursor} !important; }`;
+	else if (isDesignMode) cursorStyle = `* { cursor: ${pencilCursor} !important; }`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InteractionLayerManager, {}), cursorStyle && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: cursorStyle } })] });
 });
 var interaction_layer_default = ExternalInteractionLayer;
 
@@ -3737,7 +3879,7 @@ const EmbedWrapper$1 = (props) => {
 				root_store_default.windowOriginUrl = event.data.payload.logContext.superblocks_window_origin_url;
 				if (root_store_default.windowOriginUrl) import("../utils-DR35eYvX.js").then(({ initTracerProviderWithOrigin }) => {
 					initTracerProviderWithOrigin(root_store_default.windowOriginUrl);
-					import("../logs-CgCPS9qr.js").then(({ initLibraryLoggerProvider }) => {
+					import("../logs-CQnzO-hw.js").then(({ initLibraryLoggerProvider }) => {
 						initLibraryLoggerProvider({
 							windowOriginUrl: root_store_default.windowOriginUrl,
 							appId: event.data.payload.appId,
@@ -5003,5 +5145,5 @@ early_console_buffer_default.getInstance().patchEarly();
 registerHtmlElements();
 
 //#endregion
-export { App, PageNotFound, Prop, Property, PropsCategory, RouteLoadError, Section, sb_provider_default as SuperblocksProvider, registerComponent, tailwindStylesCategory, useApiStateful as useApi, useSuperblocksGroups, useSuperblocksProfiles, useSuperblocksUser };
+export { App, PageNotFound, Prop, Property, PropsCategory, RouteLoadError, Section, sb_provider_default as SuperblocksProvider, getAppMode, registerComponent, tailwindStylesCategory, useApiStateful as useApi, useSuperblocksGroups, useSuperblocksProfiles, useSuperblocksUser };
 //# sourceMappingURL=index.js.map