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

package/dist/{widget-wrapper-naming-DxFT8zmk.js → jsx-wrapper-Ddb528TO.js}

@@ -1,7 +1,7 @@
 import { t as getTracer } from "./utils-AzBGeVXo.js";
-import { getQueryParams, pathStringToArray, toMobXPatch } from "@superblocksteam/library-shared";
+import { NO_SELECT_ATTRIBUTE, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, URL_PARAMS, getQueryParams, pathStringToArray, toMobXPatch } from "@superblocksteam/library-shared";
 import * as React$1 from "react";
-import React, { createContext, isValidElement, useCallback, useContext, useSyncExternalStore } from "react";
+import React, { Component, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, 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";
@@ -9,11 +9,13 @@ import { ApiResponseType, OrchestratorViewMode, SUPERBLOCKS_AUTHORIZATION_HEADER
 import { NotificationPosition } from "@superblocksteam/library-shared/types";
 import isString from "lodash/isString";
 import { toast } from "sonner";
-import styled from "styled-components";
+import styled, { keyframes } 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";
+import { Observer } from "mobx-react-lite";
+import polyfill from "@oddbird/css-anchor-positioning/fn";
 
 //#region src/lib/internal-details/is-edit-mode.ts
 const getIsEditMode = () => {
@@ -398,11 +400,13 @@ var SuperblocksEditorBridge = class SuperblocksEditorBridge {
 			editStore.ai.addTargetedSelector(selectorId);
 			return;
 		}
+		const label = editStore.runtimeTrackingStore.getComponent(selectorId)?.displayName;
 		this.sendImmediate({
 			type: "ai-updates",
 			payload: {
 				type: "add-component-to-context",
-				component: sourceId
+				component: sourceId,
+				label
 			}
 		});
 	}
@@ -950,9 +954,11 @@ function useSuperblocksUser() {
 	return useSyncExternalStore((onStoreChange) => {
 		return reaction(() => context$2.user, onStoreChange);
 	}, () => {
-		return context$2.user;
+		if (!context$2.user) return;
+		return toJS(context$2.user);
 	}, () => {
-		return context$2.user;
+		if (!context$2.user) return;
+		return toJS(context$2.user);
 	});
 }
 function useSuperblocksGroups() {
@@ -960,9 +966,11 @@ function useSuperblocksGroups() {
 	return useSyncExternalStore((onStoreChange) => {
 		return reaction(() => context$2.groups, onStoreChange);
 	}, () => {
-		return context$2.groups;
+		if (!context$2.groups) return;
+		return toJS(context$2.groups);
 	}, () => {
-		return context$2.groups;
+		if (!context$2.groups) return;
+		return toJS(context$2.groups);
 	});
 }
 function useSuperblocksProfiles() {
@@ -971,15 +979,22 @@ function useSuperblocksProfiles() {
 		profiles: useSyncExternalStore((onStoreChange) => {
 			return reaction(() => context$2.profiles, onStoreChange);
 		}, () => {
-			return context$2.profiles;
+			if (!context$2.profiles) return;
+			return toJS(context$2.profiles);
 		}, () => {
-			return context$2.profiles;
+			if (!context$2.profiles) return;
+			return toJS(context$2.profiles);
 		}),
 		setProfile: useCallback((profileName) => {
 			context$2.setProfile(profileName);
 		}, [context$2])
 	};
 }
+function getAppMode() {
+	const appMode = new URL(window.location.href).searchParams.get(URL_PARAMS.appMode);
+	if (!appMode) console.warn("No app mode found in URL");
+	return appMode;
+}
 
 //#endregion
 //#region src/lib/internal-details/lib/resolve-id-singleton.ts
@@ -1026,6 +1041,69 @@ function rejectById(id, payload) {
 	}
 }
 
+//#endregion
+//#region src/lib/internal-details/lib/features/api-hmr-tracker.ts
+var ApiHmrTracker = class ApiHmrTracker {
+	static CLEAR_REF_DELAY = 18e4;
+	reloadCount = 0;
+	propagatedReloadCount = 0;
+	seenHashes = /* @__PURE__ */ new Set();
+	lastResultByHash = {};
+	clearRefAfterDelay(value) {
+		clearTimeout(value.clearTimer);
+		value.clearTimer = setTimeout(() => {
+			value.clearTimer = void 0;
+			delete value.hardRef;
+		}, ApiHmrTracker.CLEAR_REF_DELAY);
+	}
+	getAndRefreshResult(callHash) {
+		const lastResult = this.lastResultByHash[callHash];
+		if (!lastResult) return null;
+		const result = lastResult.hardRef ?? lastResult.weakRef.deref();
+		if (result) {
+			this.clearRefAfterDelay(lastResult);
+			return result;
+		}
+		return null;
+	}
+	shouldSkipRun(callHash) {
+		if (!this.seenHashes.has(callHash)) {
+			this.seenHashes.add(callHash);
+			return false;
+		}
+		if (!this.getAndRefreshResult(callHash)) return false;
+		return this.propagatedReloadCount !== this.reloadCount;
+	}
+	getCachedResult(callHash) {
+		return this.getAndRefreshResult(callHash);
+	}
+	setResult(callHash, result) {
+		this.lastResultByHash[callHash] = {
+			weakRef: new WeakRef(result),
+			hardRef: result
+		};
+		this.clearRefAfterDelay(this.lastResultByHash[callHash]);
+	}
+	incReloadCount() {
+		this.reloadCount++;
+	}
+	mountLikeTimer = null;
+	reportJSXActivity() {
+		const reloadCount = this.reloadCount;
+		if (this.mountLikeTimer) clearTimeout(this.mountLikeTimer);
+		this.mountLikeTimer = setTimeout(() => {
+			requestIdleCallback(() => {
+				this.propagatedReloadCount = Math.max(this.propagatedReloadCount, reloadCount);
+			});
+		}, 0);
+	}
+};
+const tracker = new ApiHmrTracker();
+if (import.meta.hot) import.meta.hot.on("vite:beforeUpdate", () => {
+	tracker.incReloadCount();
+});
+var api_hmr_tracker_default = tracker;
+
 //#endregion
 //#region src/lib/tracing/context-utils.ts
 function getContextFromTraceHeaders(traceHeaders) {
@@ -1400,7 +1478,7 @@ var ApiManager = class {
 				error: void 0
 			};
 		}
-		const result = await this.executeApiInternal({
+		const result = await this.executeApi({
 			apiId: context$2.apiId,
 			apiName: context$2.apiName,
 			path: context$2.path,
@@ -1414,12 +1492,24 @@ var ApiManager = class {
 			error: result.error
 		};
 	}
-	@action async runApiByPath({ path, inputs, callId, callback, isTestRun }) {
+	@action async runApiByPath({ path, inputs, callId, callback, isTestRun, injectedCallerId }) {
+		console.log("[api-store.runApiByPath] Called with:", {
+			path,
+			inputs,
+			callId,
+			isTestRun,
+			hasCallback: !!callback
+		});
 		await this.awaitInitApiIfNeeded();
 		const apiName = path.match(/^\/apis\/([^/]+)\/api\.yaml$/)?.[1];
-		if (!apiName) throw new Error(`Invalid path: ${path}`);
+		if (!apiName) {
+			console.error("[api-store.runApiByPath] Invalid path:", path);
+			throw new Error(`Invalid path: ${path}`);
+		}
+		console.log("[api-store.runApiByPath] Extracted apiName:", apiName);
 		editorBridge.setApiStarted(apiName);
-		const result = await this.executeApiInternal({
+		console.log("[api-store.runApiByPath] Executing API internally...");
+		const result = await this.executeApi({
 			apiId: apiName,
 			apiName,
 			path,
@@ -1427,14 +1517,38 @@ var ApiManager = class {
 			options: inputs ?? {},
 			callId,
 			isTestRun,
-			callback
+			callback,
+			injectedCallerId
 		});
+		console.log("[api-store.runApiByPath] Execution complete, calling setApiResponse for:", apiName);
 		editorBridge.setApiResponse(apiName, result.parsedResult);
 		return {
 			data: result.data,
 			error: result.error
 		};
 	}
+	getHMRCallHash(params) {
+		return `${params.injectedCallerId ?? ""}-${params.apiId}`;
+	}
+	getCachedHMRExecution(params) {
+		if (params.callId) return null;
+		const hmrCallHash = this.getHMRCallHash(params);
+		if (api_hmr_tracker_default.shouldSkipRun(hmrCallHash)) {
+			const result = api_hmr_tracker_default.getCachedResult(hmrCallHash);
+			if (result) return result;
+		}
+		return null;
+	}
+	async executeApi(params) {
+		if (isEditMode()) {
+			const cachedResult = this.getCachedHMRExecution(params);
+			if (cachedResult) return cachedResult;
+			const result = await this.executeApiInternal(params);
+			api_hmr_tracker_default.setResult(this.getHMRCallHash(params), result);
+			return result;
+		}
+		return this.executeApiInternal(params);
+	}
 	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)}`;
@@ -3054,6 +3168,180 @@ function FixWithClarkButton({ identifier, error, onClick }) {
 	});
 }
 
+//#endregion
+//#region src/lib/internal-details/css-constants.ts
+const CSS_CLASSES = {
+	SUSPENSE_FALLBACK: "sb-suspense-fallback",
+	ANCHOR_NAME: "sb-anchor-name"
+};
+
+//#endregion
+//#region src/lib/internal-details/lib/suspense/suspense-fallback.tsx
+const shimmerAnimation = keyframes`
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+`;
+const ShimmerDiv = styled.div`
+  min-height: 12px;
+  min-width: 12px;
+  background-color: ${(props) => props.$backgroundColor};
+  border-radius: ${(props) => props.$borderRadius};
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(
+    90deg,
+    ${(props) => props.$backgroundColor} 25%,
+    ${(props) => props.$shimmerHighlight} 50%,
+    ${(props) => props.$backgroundColor} 75%
+  );
+  background-size: max(100%, 200px) 100%;
+  animation: ${shimmerAnimation} 5s infinite linear;
+`;
+/**
+* Default fallback component displayed while components are suspended.
+*/
+function SuspenseFallback({ style, className, noBorderRadius }) {
+	const backgroundColor = "#f8f9fa";
+	const shimmerHighlight = "#ffffff";
+	const borderRadius = noBorderRadius ? "0px" : "4px";
+	const classes = useMemo(() => [CSS_CLASSES.ANCHOR_NAME, className].filter(Boolean).join(" "), [className]);
+	return /* @__PURE__ */ jsx(ShimmerDiv, {
+		$backgroundColor: backgroundColor,
+		$shimmerHighlight: shimmerHighlight,
+		$borderRadius: borderRadius,
+		style: style?.(),
+		className: classes,
+		"data-test": "suspense-fallback"
+	});
+}
+
+//#endregion
+//#region src/lib/user-facing/component-base/error-boundary.tsx
+const ErrorBoundaryContainer = styled.div`
+  background: white;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border: 1px solid ${colors.GREY_100};
+  border-left: 3px solid ${colors.RED_500};
+  border-radius: 4px;
+  width: 100%;
+  color: ${colors.GREY_700};
+`;
+const ErrorDetailsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const ErrorActionsContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;
+var ErrorBoundary = class extends Component {
+	state = {
+		id: generateId(),
+		hasError: false
+	};
+	disposeAutoReset;
+	static getDerivedStateFromError(e) {
+		const error = e instanceof Error ? e : new Error(typeof e === "object" && e !== null ? JSON.stringify(e) : String(e));
+		return {
+			id: generateId(),
+			hasError: true,
+			error
+		};
+	}
+	componentDidCatch(error, errorInfo) {
+		console.error("Uncaught error:", error, errorInfo);
+		if (isEditMode()) root_store_default.editStore?.ai.handleRuntimeError({
+			id: this.state.id,
+			error: String(error),
+			errorInfo,
+			identifier: this.props.identifier
+		});
+	}
+	reset = () => {
+		if (isEditMode()) root_store_default.editStore?.ai.clearRuntimeError(this.state.id);
+		this.setState({
+			hasError: false,
+			error: void 0
+		});
+	};
+	componentWillUnmount() {
+		if (this.state.hasError && isEditMode()) root_store_default.editStore?.ai.clearRuntimeError(this.state.id);
+		this.disposeAutoReset?.();
+	}
+	handleFixWithClarkInitiated = () => {
+		const ai = root_store_default.editStore?.ai;
+		if (!ai) return;
+		this.disposeAutoReset?.();
+		this.disposeAutoReset = void 0;
+		let sawStart = ai.getIsEditing();
+		this.disposeAutoReset = reaction(() => ai.getIsEditing(), (isEditing) => {
+			if (!sawStart && isEditing) sawStart = true;
+			if (sawStart && !isEditing) {
+				this.reset();
+				this.disposeAutoReset?.();
+				this.disposeAutoReset = void 0;
+			}
+		}, {
+			fireImmediately: true,
+			name: "error-boundary-ai-auto-reset"
+		});
+	};
+	handleFixWithAi() {
+		const { identifier } = this.props;
+		if (identifier) editorBridge.addComponentToAiContext(identifier.sourceId, identifier.selectorId);
+		let prompt = `Fix this error: `;
+		if (this.state.error?.stack) {
+			const lines = this.state.error.stack.split("\n");
+			const nodeModulesIndex = lines.findIndex((line) => line.includes("node_modules"));
+			const relevantLines = nodeModulesIndex > -1 ? lines.slice(0, nodeModulesIndex) : lines;
+			prompt += relevantLines.slice(0, 5).join("\n");
+		} else prompt += this.state.error?.toString();
+		editorBridge.aiGenerate(prompt);
+	}
+	render() {
+		if (this.state.hasError) return /* @__PURE__ */ jsx(Observer, { children: () => {
+			if (root_store_default.editStore?.ai.getIsEditing() ?? false) return /* @__PURE__ */ jsx(SuspenseFallback, {});
+			return /* @__PURE__ */ jsxs(ErrorBoundaryContainer, { children: [/* @__PURE__ */ jsxs(ErrorDetailsContainer, { children: [/* @__PURE__ */ jsx("h3", { children: this.props.header || "Something went wrong." }), /* @__PURE__ */ jsxs("details", {
+				style: { fontSize: "0.8em" },
+				children: [/* @__PURE__ */ jsx("summary", {
+					style: { paddingLeft: "0.25rem" },
+					children: "Error details"
+				}), /* @__PURE__ */ jsx("div", {
+					style: {
+						marginTop: "0.5rem",
+						maxWidth: "100%",
+						overflowX: "auto",
+						scrollbarWidth: "thin"
+					},
+					children: /* @__PURE__ */ jsx("pre", {
+						style: { color: "gray" },
+						children: /* @__PURE__ */ jsx("code", { children: this.state.error?.stack ? this.state.error.stack : this.state.error?.toString() })
+					})
+				})]
+			})] }), /* @__PURE__ */ jsxs(ErrorActionsContainer, { children: [isEditMode() && /* @__PURE__ */ jsx(FixWithClarkButton, {
+				onClick: this.handleFixWithClarkInitiated,
+				error: this.state.error,
+				identifier: this.props.identifier
+			}), /* @__PURE__ */ jsx(SecondaryButton, {
+				onClick: this.reset,
+				children: "Try again"
+			})] })] });
+		} });
+		return this.props.children;
+	}
+};
+var error_boundary_default = ErrorBoundary;
+
 //#endregion
 //#region src/lib/utils/widget-wrapper-naming.ts
 const getWidgetAnchorName = (selectorId) => {
@@ -3064,5 +3352,110 @@ const getWidgetRectAnchorName = (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
+//#region src/edit-mode/edit-wrapper.tsx
+if (typeof window !== "undefined" && typeof document.documentElement !== "undefined" && !("anchorName" in document.documentElement.style)) polyfill();
+const createAnchorNameStyle = (props) => {
+	return { "--anchor-name": getWidgetAnchorName(props.selectorId) };
+};
+
+//#endregion
+//#region src/edit-mode/instance-tracker.ts
+/**
+* Tracks and recycles instance numbers for each sourceId to generate stable, unique selector IDs.
+* When components unmount, their instance numbers are released and can be reused.
+*/
+var InstanceTracker = class {
+	sourceIdToUsedInstances = /* @__PURE__ */ new Map();
+	getNextAvailableInstance(sourceId) {
+		const usedInstances = this.sourceIdToUsedInstances.get(sourceId) ?? /* @__PURE__ */ new Set();
+		let instance = 0;
+		while (usedInstances.has(instance)) instance++;
+		usedInstances.add(instance);
+		this.sourceIdToUsedInstances.set(sourceId, usedInstances);
+		return instance;
+	}
+	releaseInstance(sourceId, instance) {
+		const usedInstances = this.sourceIdToUsedInstances.get(sourceId);
+		if (usedInstances) {
+			usedInstances.delete(instance);
+			if (usedInstances.size === 0) this.sourceIdToUsedInstances.delete(sourceId);
+		}
+	}
+};
+const instanceTracker = new InstanceTracker();
+
+//#endregion
+//#region src/edit-mode/jsx-wrapper.tsx
+const JSXContext = React.createContext({
+	selectorId: "S-<unknown>",
+	sourceId: "SB-<unknown>"
+});
+const makeWrappedComponent = (type) => {
+	const isTag = typeof type === "string";
+	const isRegisteredSbComponent = root_store_default.componentRegistry.hasComponent(type);
+	const Component$1 = React.forwardRef((props, ref) => {
+		const { selectorId: parentSelectorId } = useJSXContext();
+		const sourceId = props[SOURCE_ID_ATTRIBUTE];
+		const noSelect = props[NO_SELECT_ATTRIBUTE];
+		const instanceNumberRef = useRef();
+		const selectorId = useRef("S-<unknown>");
+		if (selectorId.current === "S-<unknown>") {
+			instanceNumberRef.current = instanceTracker.getNextAvailableInstance(sourceId);
+			selectorId.current = `S-x-${sourceId}-${instanceNumberRef.current}`;
+		}
+		useEffect(() => {
+			root_store_default.editStore?.runtimeTrackingStore.registerComponent(selectorId.current, {
+				sourceId,
+				type,
+				parentSelectorId,
+				isSbComponent: isRegisteredSbComponent,
+				isHtmlElement: isTag,
+				noSelect
+			});
+			return () => {
+				root_store_default.editStore?.runtimeTrackingStore.unregisterComponent(selectorId.current);
+				if (instanceNumberRef.current !== void 0) instanceTracker.releaseInstance(sourceId, instanceNumberRef.current);
+			};
+		}, []);
+		useEffect(() => {
+			root_store_default.editStore?.runtimeTrackingStore.updatePropsForComponent(selectorId.current, props);
+		}, [props]);
+		const jsxContext = useMemo(() => ({
+			selectorId: selectorId.current,
+			sourceId
+		}), [sourceId]);
+		const selectorProps = { [SELECTOR_ID_ATTRIBUTE]: selectorId.current };
+		if (parentSelectorId) selectorProps["data-sb-parent-selector-id"] = parentSelectorId;
+		const style = useMemo(() => {
+			return {
+				...props.style,
+				...createAnchorNameStyle({ selectorId: selectorId.current })
+			};
+		}, [props.style]);
+		const element = React.createElement(type, {
+			ref,
+			...props,
+			...selectorProps,
+			className: ["sb-anchor-name", props.className].filter(Boolean).join(" "),
+			style
+		});
+		if (!root_store_default.editStore?.isInitialized) return element;
+		return /* @__PURE__ */ jsx(JSXContext.Provider, {
+			value: jsxContext,
+			children: /* @__PURE__ */ jsx(error_boundary_default, { children: element })
+		});
+	});
+	try {
+		Component$1.displayName = typeof type === "string" ? type : type.displayName || type.name || "Component";
+	} catch (e) {
+		console.error("Error setting displayName", e);
+	}
+	return Component$1;
+};
+const useJSXContext = () => {
+	return React.useContext(JSXContext);
+};
+
+//#endregion
+export { SuperblocksContextProvider as A, iframeMessageHandler as B, startEditorSync as C, api_hmr_tracker_default as D, getContextFromTraceHeaders as E, useSuperblocksUser as F, isEditMode as H, sendNotification as I, colors as L, useSuperblocksContext as M, useSuperblocksGroups as N, rejectById as O, useSuperblocksProfiles as P, editorBridge as R, createPropertiesPanelDefinition as S, createIframeSpan as T, isEmbeddedBySuperblocksFirstParty as V, root_store_default as _, FixWithClarkButton as a, PropsCategory as b, ErrorContent as c, ErrorMessage as d, ErrorStack as f, StyledClarkIcon as g, SecondaryButton as h, getWidgetRectAnchorName as i, getAppMode as j, resolveById as k, ErrorDetails as l, ErrorTitle as m, useJSXContext as n, ActionsContainer as o, ErrorSummary as p, getWidgetAnchorName as r, ErrorContainer as s, makeWrappedComponent as t, ErrorIconContainer as u, createManagedPropsList as v, generateId as w, Section as x, Prop as y, getEditStore as z };
+//# sourceMappingURL=jsx-wrapper-Ddb528TO.js.map