@superblocksteam/library 2.0.89 → 2.0.90

package/dist/lib/index.js

@@ -1,11 +1,11 @@
 import { n as consoleLogAttributes, t as early_console_buffer_default } from "../early-console-buffer-D4wVuyBf.js";
-import { A as useSuperblocksProfiles, B as PropsCategory, C as addNewPromise, D as getAppMode, E as SuperblocksContextProvider, F as iframeMessageHandler, H as createPropertiesPanelDefinition, I as isEmbeddedBySuperblocksFirstParty, L as isEditMode, M as sendNotification, N as colors$1, O as useSuperblocksContext, P as editorBridge, R as createManagedPropsList, S as api_hmr_tracker_default, T as resolveById, U as getEditStore, V as Section, _ as root_store_default, a as FixWithClarkButton, b as createIframeSpan, c as ErrorContent, d as ErrorMessage$1, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, j as useSuperblocksUser, k as useSuperblocksGroups, 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 startEditorSync, w as rejectById, x as getContextFromTraceHeaders, y as generateId, z as Prop } from "../jsx-wrapper-DL2O6Y1G.js";
+import { A as useSuperblocksGroups, B as createManagedPropsList, C as addNewPromise, D as getAppMode, E as SuperblocksContextProvider, F as editorBridge, G as getEditStore, H as PropsCategory, I as iframeMessageHandler, L as isEmbeddedBySuperblocksFirstParty, M as useSuperblocksUser, N as sendNotification, O as useSuperblocksContext, P as colors$1, R as sendMessageImmediately, S as api_hmr_tracker_default, T as resolveById, U as Section, V as Prop, W as createPropertiesPanelDefinition, _ as root_store_default, a as FixWithClarkButton, b as createIframeSpan, c as ErrorContent, d as ErrorMessage$1, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, j as useSuperblocksProfiles, k as useSuperblocksDataTags, 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 startEditorSync, w as rejectById, x as getContextFromTraceHeaders, y as generateId, z as isEditMode } from "../jsx-wrapper-C8LEtdzp.js";
 import { n as initTracerProviderWithOrigin } from "../utils-BGEEeYie.js";
 import { action, autorun, computed, makeAutoObservable, makeObservable, observable, reaction, when } from "mobx";
 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 { UNSAFE_DataRouterContext, generatePath, useLocation, useNavigate, useParams, useRouteError } from "react-router";
 import * as React$1 from "react";
-import React, { Suspense, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { Suspense, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { isEqual } from "lodash";
 import { ISocketWithClientAuth, OBS_TAG_APPLICATION_ID, connectWebSocket, createISocketClient } from "@superblocksteam/shared";
 import { AiContextMode, AiGenerationState, ViteMessageKind } from "@superblocksteam/library-shared/types";
@@ -16,6 +16,8 @@ import defaultTheme from "tailwindcss/defaultTheme";
 import postcss from "postcss";
 import colors from "tailwindcss/colors";
 import { Observer, observer } from "mobx-react-lite";
+import { execute, isStreamingApi } from "@superblocksteam/sdk-api";
+import zodToJsonSchema from "zod-to-json-schema";
 import * as Dialog from "@radix-ui/react-dialog";
 import posthog from "posthog-js";
 import { Graph } from "@dagrejs/graphlib";
@@ -776,6 +778,102 @@ function registerHtmlElements() {
 	registerComponent("meta", htmlTagSectionsTemplate({ hasChildren: false }));
 }
 
+//#endregion
+//#region src/lib/internal-details/lib/jwt-utils.ts
+/**
+* Known claim keys that are standard or Superblocks-specific.
+* These are excluded from customClaims to avoid duplication.
+*/
+const KNOWN_CLAIM_KEYS = new Set([
+	"sub",
+	"email",
+	"user_email",
+	"name",
+	"groups",
+	"iss",
+	"aud",
+	"exp",
+	"nbf",
+	"iat",
+	"jti",
+	"userId",
+	"user_id",
+	"organizationId",
+	"org_id"
+]);
+/**
+* Decodes a base64url-encoded string.
+*
+* JWT uses base64url encoding which replaces + with - and / with _.
+* This function handles the conversion and decoding.
+*/
+function base64UrlDecode(str) {
+	const base64 = str.replace(/-/g, "+").replace(/_/g, "/");
+	const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, "=");
+	try {
+		const binaryStr = atob(padded);
+		const bytes = Uint8Array.from(binaryStr, (c) => c.charCodeAt(0));
+		return new TextDecoder().decode(bytes);
+	} catch (error) {
+		console.warn("[jwt-utils] Failed to decode base64url string -- JWT payload cannot be parsed:", error);
+		return "";
+	}
+}
+/**
+* Parses a JWT token and extracts the payload claims.
+*
+* @param token - The JWT token string (with or without "Bearer " prefix)
+* @returns The decoded claims object, or null if parsing fails
+*/
+function parseJwtClaims(token) {
+	if (!token) return null;
+	const parts = (token.startsWith("Bearer ") ? token.slice(7) : token).split(".");
+	if (parts.length !== 3) return null;
+	try {
+		const payloadJson = base64UrlDecode(parts[1]);
+		return JSON.parse(payloadJson);
+	} catch (error) {
+		console.warn("[jwt-utils] Failed to parse JWT claims:", error);
+		return null;
+	}
+}
+/**
+* Extracts SDK user information from JWT claims.
+*
+* Maps standard JWT claims to the SdkApiUser interface expected
+* by the SDK's executeApi function.
+*
+* @param claims - Parsed JWT claims
+* @returns SdkApiUser object with extracted user info
+*/
+function extractSdkUserFromClaims(claims) {
+	const userId = claims.sub || claims.userId || claims.user_id || "anonymous";
+	const email = claims.email ?? claims.user_email;
+	const groups = Array.isArray(claims.groups) ? claims.groups : [];
+	const customClaims = {};
+	for (const [key, value] of Object.entries(claims)) if (!KNOWN_CLAIM_KEYS.has(key)) customClaims[key] = value;
+	return {
+		userId,
+		email,
+		name: claims.name,
+		groups,
+		customClaims: Object.freeze(customClaims)
+	};
+}
+/**
+* Parses a JWT token and extracts SDK user information.
+*
+* Convenience function that combines parseJwtClaims and extractSdkUserFromClaims.
+*
+* @param token - The JWT token string
+* @returns SdkApiUser object, or null if parsing fails
+*/
+function extractSdkUserFromJwt(token) {
+	const claims = parseJwtClaims(token);
+	if (!claims) return null;
+	return extractSdkUserFromClaims(claims);
+}
+
 //#endregion
 //#region src/lib/internal-details/handle-bootstrap-response.ts
 const handleBootstrapResponse = (event) => {
@@ -783,6 +881,14 @@ const handleBootstrapResponse = (event) => {
 	root_store_default.userId = event.data.payload.userId;
 	root_store_default.apis.agentUrls = event.data.payload.agentUrls;
 	root_store_default.apis.agents = event.data.payload.agents;
+	const sdkApiEnabled = !!event.data.payload.featureFlags?.["clark.sdk-api.enabled"];
+	root_store_default.setSdkApiEnabled(sdkApiEnabled);
+	const sdkUser = extractSdkUserFromJwt(event.data.payload.token);
+	if (sdkUser) root_store_default.setSdkUser(sdkUser);
+	else if (event.data.payload.userId) {
+		console.log("[handle-bootstrap-response] Auth0 JWT not available for SDK user extraction. Custom claims (groups, email) will not be available. Falling back to userId from payload.");
+		root_store_default.setSdkUser({ userId: event.data.payload.userId });
+	} else console.log("[handle-bootstrap-response] No user info available for SDK API execution. Neither auth0 JWT nor userId was provided in the bootstrap payload.");
 	root_store_default.apis.setTokens(event.data.payload.token, event.data.payload.accessToken);
 	root_store_default.apis.notifyBootstrapComplete();
 	const featureFlags = event.data.payload.featureFlags;
@@ -853,53 +959,294 @@ function useGetCurrentUserQuery() {
 }
 
 //#endregion
-//#region src/lib/internal-details/use-api.ts
-const getApiPath = (name) => {
-	let apiPath = name;
-	if (!apiPath.startsWith("/apis")) apiPath = `/apis/${name}/api.yaml`;
-	return apiPath;
-};
+//#region src/lib/internal-details/lib/utils/zod-to-typescript.ts
 /**
-* React hook for executing Superblocks APIs with type-safe inputs and outputs.
+* Zod schema conversion utilities.
 *
-* @param name - The name of the registered API to execute
-* @returns An object with `run` and `cancel` functions
+* Converts Zod schemas to TypeScript type strings and JSON Schema for display in the UI.
+*/
+/**
+* Convert a Zod schema to JSON Schema format.
 *
-* @example
-* ```typescript
-* const myApi = useApiStateful("getUserData");
+* @param schema - The Zod schema to convert
+* @returns JSON Schema representation
+*/
+function convertToJsonSchema(schema) {
+	try {
+		return zodToJsonSchema(schema, {
+			$refStrategy: "none",
+			errorMessages: false
+		});
+	} catch (error) {
+		console.warn("[zod-to-typescript] Failed to convert to JSON Schema:", error);
+		return { type: "unknown" };
+	}
+}
+/**
+* Convert a JSON Schema to TypeScript type string.
 *
-* try {
-*   const result = await myApi.run({ userId: "123" });
-*   console.log(result);
-* } catch (error) {
-*   // error is a string describing what went wrong
-*   console.error(error);
-* }
-* ```
+* @param schema - The JSON Schema to convert
+* @param indent - Current indentation level
+* @returns TypeScript type string representation
+*/
+function jsonSchemaToTypescript(schema, indent = 0) {
+	const indentStr = "  ".repeat(indent);
+	const nextIndent = "  ".repeat(indent + 1);
+	if (schema.$ref) return schema.$ref.split("/").pop() || "unknown";
+	if (schema.const !== void 0) return typeof schema.const === "string" ? `"${schema.const}"` : String(schema.const);
+	if (schema.enum) return schema.enum.map((v) => typeof v === "string" ? `"${v}"` : String(v)).join(" | ");
+	if (schema.anyOf) return schema.anyOf.map((s) => jsonSchemaToTypescript(s, indent)).join(" | ");
+	if (schema.oneOf) return schema.oneOf.map((s) => jsonSchemaToTypescript(s, indent)).join(" | ");
+	if (schema.allOf) return schema.allOf.map((s) => jsonSchemaToTypescript(s, indent)).join(" & ");
+	const nullable = schema.nullable ? " | null" : "";
+	switch (Array.isArray(schema.type) ? schema.type[0] : schema.type || "unknown") {
+		case "string": return "string" + nullable;
+		case "number":
+		case "integer": return "number" + nullable;
+		case "boolean": return "boolean" + nullable;
+		case "null": return "null";
+		case "array":
+			if (schema.items) {
+				if (Array.isArray(schema.items)) return `[${schema.items.map((s) => jsonSchemaToTypescript(s, indent)).join(", ")}]` + nullable;
+				const itemType = jsonSchemaToTypescript(schema.items, indent);
+				return (itemType.includes(" | ") || itemType.includes(" & ") ? `(${itemType})[]` : `${itemType}[]`) + nullable;
+			}
+			return "unknown[]" + nullable;
+		case "object": {
+			if (!schema.properties || Object.keys(schema.properties).length === 0) {
+				if (schema.additionalProperties) return `Record<string, ${typeof schema.additionalProperties === "object" ? jsonSchemaToTypescript(schema.additionalProperties, indent) : "unknown"}>` + nullable;
+				return "{}" + nullable;
+			}
+			const required = schema.required || [];
+			return `{\n${Object.entries(schema.properties).map(([key, propSchema]) => {
+				const isRequired = required.includes(key);
+				const propType = jsonSchemaToTypescript(propSchema, indent + 1);
+				return `${nextIndent}${key}${isRequired ? "" : "?"}: ${propType}`;
+			}).join(";\n")};\n${indentStr}}` + nullable;
+		}
+		default: return "unknown" + nullable;
+	}
+}
+/**
+* Convert a Zod schema to both TypeScript string and JSON Schema.
+*
+* @param schema - The Zod schema to convert
+* @returns Object containing both representations
+*/
+function convertZodSchema(schema) {
+	const jsonSchema = convertToJsonSchema(schema);
+	return {
+		typescript: jsonSchemaToTypescript(jsonSchema),
+		jsonSchema
+	};
+}
+
+//#endregion
+//#region src/lib/internal-details/lib/sdk-api-registry.ts
+/**
+* SDK API Registry for the library iframe.
+*
+* Tracks registered SDK APIs and notifies ui-code-mode when APIs are
+* registered or unregistered (for display in the sidebar).
+*/
+/**
+* Set of registered API names to prevent duplicate registrations.
+*/
+const registeredApis = /* @__PURE__ */ new Set();
+/**
+* Extract metadata from a compiled API for display in the UI.
+*
+* @param name - The API name
+* @param api - The compiled API (regular or streaming)
+* @param sourceCode - Optional TypeScript source code
+* @returns SdkApiMetadata for the API
+*/
+function extractSdkApiMetadata(name, api, sourceCode) {
+	const streaming = isStreamingApi(api);
+	const inputSchema = convertZodSchema(api.inputSchema);
+	let outputSchema;
+	let chunkSchema;
+	if (streaming) chunkSchema = convertZodSchema(api.chunkSchema);
+	else outputSchema = convertZodSchema(api.outputSchema);
+	return {
+		name,
+		inputSchema,
+		outputSchema,
+		chunkSchema,
+		isStreaming: streaming,
+		integrations: (api.integrations ?? []).map((integration) => ({
+			key: integration.key,
+			pluginId: integration.pluginId,
+			name: integration.key,
+			id: integration.id
+		})),
+		sourceCode
+	};
+}
+/**
+* Register an SDK API and notify ui-code-mode.
 *
-* ## Error Handling
+* @param name - The API name
+* @param api - The compiled API
+* @param sourceCode - Optional TypeScript source code for display in the UI
+* @returns true if the API was newly registered, false if already existed
+*/
+function registerSdkApi(name, api, sourceCode) {
+	const isNew = !registeredApis.has(name);
+	registeredApis.add(name);
+	sendMessageImmediately({
+		type: "sdk-api-registered",
+		payload: {
+			name,
+			metadata: extractSdkApiMetadata(name, api, sourceCode)
+		}
+	});
+	console.debug(`[sdk-api-registry] ${isNew ? "Registered" : "Updated"} SDK API: ${name}`);
+	return isNew;
+}
+/**
+* Update the source code for an already-registered SDK API.
+* This is called by the dev server when an API file changes.
 *
-* When an API execution fails, the `run` function throws a **string** error message.
-* The error format can be one of:
+* @param name - The API name
+* @param sourceCode - The new TypeScript source code
+*/
+function updateSdkApiSourceCode(name, sourceCode) {
+	if (!registeredApis.has(name)) {
+		console.warn(`[sdk-api-registry] Cannot update source for unregistered API: ${name}`);
+		return;
+	}
+	sendMessageImmediately({
+		type: "sdk-api-source-updated",
+		payload: {
+			name,
+			sourceCode
+		}
+	});
+	console.debug(`[sdk-api-registry] Updated source code for SDK API: ${name}`);
+}
+/**
+* Clear all registered SDK APIs.
+* Useful for testing or when the application reloads.
+*/
+function clearSdkApiRegistry() {
+	registeredApis.clear();
+}
+
+//#endregion
+//#region src/lib/internal-details/lib/sdk-api-discovery.ts
+/**
+* SDK API Discovery Module.
 *
-* - **Client errors (4xx)**: System error message from the server
-*   - Example: `"Authentication failed"`, `"Invalid request parameters"`
+* Discovers and registers all SDK APIs by importing the app's API registry
+* at server/apis/index.ts. This enables SDK APIs to appear in the sidebar
+* immediately, rather than waiting for them to be executed.
+*/
+/**
+* Discover and register all SDK APIs from the app's API registry.
 *
-* - **API execution errors**: Formatted message from unhandled API errors
-*   - Example: `"Error in API: Division by zero"`, `"Error in API: Database connection failed"`
+* Imports server/apis/index.ts (the same registry used by useApi for type
+* inference) and registers each exported API with the SDK API registry.
+*/
+async function discoverAndRegisterSdkApis() {
+	if (!root_store_default.sdkApiEnabled) return;
+	try {
+		const apis = (await import(new URL("/server/apis/index.ts", window.location.origin).href)).default;
+		const apiNames = Object.keys(apis);
+		if (apiNames.length === 0) {
+			console.debug("[sdk-api-discovery] No SDK APIs found in registry");
+			return;
+		}
+		console.debug(`[sdk-api-discovery] Discovering ${apiNames.length} SDK APIs:`, apiNames);
+		const sourcePromises = apiNames.map(async (name) => {
+			try {
+				const resp = await fetch(`/sb-raw-source/server/apis/${name}/api.ts`);
+				return resp.ok ? await resp.text() : void 0;
+			} catch {
+				return;
+			}
+		});
+		const sources = await Promise.all(sourcePromises);
+		const results = await Promise.allSettled(apiNames.map(async (name, i) => {
+			const apiModule = apis[name];
+			if (!apiModule) throw new Error(`API ${name} not found in registry`);
+			registerSdkApi(name, apiModule, sources[i]);
+		}));
+		const succeeded = results.filter((r) => r.status === "fulfilled").length;
+		const failed = results.filter((r) => r.status === "rejected").length;
+		console.debug(`[sdk-api-discovery] Registered ${succeeded} APIs, ${failed} failed`);
+	} catch (error) {
+		console.error("[sdk-api-discovery] Failed to discover SDK APIs:", error);
+	}
+}
+if (import.meta.hot) import.meta.hot.accept("/server/apis/index.ts", () => {
+	if (!root_store_default.sdkApiEnabled) return;
+	console.debug("[sdk-api-discovery] API registry updated via HMR, re-running discovery");
+	clearSdkApiRegistry();
+	discoverAndRegisterSdkApis();
+});
+
+//#endregion
+//#region src/lib/internal-details/use-api.ts
+/**
+* Unified API hook module.
 *
-* - **Infrastructure errors**: High-level error messages
-*   - Example: `"No application ID was found"`, `"No active agent found"`
+* Provides both the legacy YAML-based API system (`useApiStateful`) and the
+* new SDK-based API system (`useSdkApi`). The public `useApi` hook delegates
+* to one or the other based on the `sdkApiEnabled` feature flag on rootStore.
 *
-* The error is also logged to the console before being thrown.
+* The flag is set once at bootstrap time and never changes within a session,
+* so the conditional hook delegation is safe.
+*/
+/**
+* Get the API path for an API by name.
 *
-* ## Usage Notes
+* When SDK APIs are enabled, paths point to `/server/apis/<name>/api.ts`.
+* When using legacy YAML mode, paths point to `/apis/<name>/api.yaml`.
+*/
+const getApiPath = (name) => {
+	if (root_store_default.sdkApiEnabled) {
+		let apiPath$1 = name;
+		if (!apiPath$1.startsWith("/server/apis")) apiPath$1 = `/server/apis/${name}/api.ts`;
+		return apiPath$1;
+	}
+	let apiPath = name;
+	if (!apiPath.startsWith("/apis")) apiPath = `/apis/${name}/api.yaml`;
+	return apiPath;
+};
+/**
+* Resolve integration configs from the parent before API execution.
+* Only used when SDK API mode is enabled.
 *
-* - Always wrap `run()` calls in try/catch blocks to handle errors gracefully
-* - Errors are thrown as strings, not Error objects
-* - If the API executes successfully but returns no data, `run()` returns `undefined`
-* - Use `cancel()` to abort in-flight API requests
+* @deprecated Kept for backward compatibility with edit mode.
+*/
+async function resolveIntegrations(integrations) {
+	if (integrations.length === 0) return [];
+	return new Promise((resolve, reject) => {
+		const callbackId = addNewPromise((result) => {
+			resolve(result);
+		}, false, reject);
+		sendMessageImmediately({
+			type: "sdk-resolve-integrations",
+			payload: {
+				integrations: integrations.map((i) => ({
+					key: i.key,
+					pluginId: i.pluginId,
+					id: i.id
+				})),
+				callbackId
+			}
+		});
+	});
+}
+/**
+* React hook for executing YAML-based Superblocks APIs.
+*
+* This is the legacy API system that uses `rootStore.apis.runApiByPath`.
+* It remains the default when the `sdkApiEnabled` flag is off.
+*
+* @param name - The name of the registered API to execute
+* @returns An object with `run` and `cancel` functions
 */
 function useApiStateful(name) {
 	const { sourceId } = useJSXContext();
@@ -923,6 +1270,49 @@ function useApiStateful(name) {
 		}, [name])
 	};
 }
+/**
+* React hook for calling SDK-based APIs via postMessage to the parent frame.
+* Only active when `rootStore.sdkApiEnabled` is true.
+*/
+function useSdkApi(apiName) {
+	return {
+		run: useCallback(async (inputs) => {
+			return new Promise((resolve, reject) => {
+				const callbackId = addNewPromise((result) => {
+					const executionResult = result;
+					if (executionResult.success) resolve(executionResult.output);
+					else reject(executionResult.error ?? /* @__PURE__ */ new Error("API execution failed"));
+				}, false, reject);
+				sendMessageImmediately({
+					type: "sdk-execute-api",
+					payload: {
+						apiName,
+						input: inputs ?? {},
+						callbackId
+					}
+				});
+			});
+		}, [apiName]),
+		cancel: useCallback(async () => {
+			throw new Error(`Cancellation is not yet implemented for SDK APIs. API "${apiName}" will continue executing.`);
+		}, [apiName])
+	};
+}
+function useApi(apiName) {
+	if (root_store_default.sdkApiEnabled) return useSdkApi(apiName);
+	return useApiStateful(apiName);
+}
+/**
+* Creates a typed version of useApi bound to a specific API registry type.
+*
+* This enables full type inference using only type imports from the server,
+* keeping backend code out of the client bundle.
+*
+* @returns A typed useApi function
+*/
+function useTypedApi() {
+	return useApi;
+}
 
 //#endregion
 //#region src/lib/internal-details/embed-store.ts
@@ -1634,10 +2024,21 @@ var AsyncSocket = class {
 //#endregion
 //#region src/edit-mode/source-update-api.ts
 const PING_INTERVAL_MS = 15e3;
+function safeStringifyError(error) {
+	if (!error) return "Unknown error";
+	if (typeof error === "string") return error;
+	if (error instanceof Error) return error.message;
+	try {
+		return JSON.stringify(error);
+	} catch {
+		return String(error);
+	}
+}
 var OperationAPI = class {
 	retryAttempts = 0;
 	asyncSocket = new AsyncSocket();
 	isocket = null;
+	currentAuthorization;
 	constructor(serverUrl) {
 		this.serverUrl = serverUrl;
 	}
@@ -1645,6 +2046,7 @@ var OperationAPI = class {
 	* @throws {Error} if the websocket connection can't be initiated after 3 attempts
 	*/
 	async connect({ peerId, userId, authorization, applicationId, traceContext, connectionType, connectionTarget }) {
+		this.currentAuthorization = authorization;
 		try {
 			const result = await connectSocket(this.serverUrl, {
 				peerId,
@@ -1657,7 +2059,6 @@ var OperationAPI = class {
 				onClose: this.handleSocketClose({
 					peerId,
 					userId,
-					authorization,
 					applicationId
 				})
 			});
@@ -1666,13 +2067,12 @@ var OperationAPI = class {
 				this.asyncSocket.setSocket(result.socket);
 				this.isocket = result.isocket;
 			} else throw new Error("Failed to create socket connection");
-		} catch {
+		} catch (error) {
 			this.retryAttempts++;
-			console.info(`App<>Dev box initial connection failed, retrying attempt ${this.retryAttempts}...`);
+			console.info(`App<>Dev box initial connection failed, retrying attempt ${this.retryAttempts}...`, safeStringifyError(error));
 			await this.retryConnection({
 				peerId,
 				userId,
-				authorization,
 				applicationId
 			});
 		}
@@ -1689,12 +2089,13 @@ var OperationAPI = class {
 	* This is called when the token is refreshed in the parent window.
 	*/
 	updateAuthorization(newAuthorization) {
+		this.currentAuthorization = newAuthorization;
 		if (this.isocket) {
 			this.isocket.setAuthorization(newAuthorization);
 			console.log("[internal] [OperationAPI]  Updated iframe socket authorization token");
 		} else console.warn("[internal] [OperationAPI] Cannot update authorization: socket not yet initialized");
 	}
-	handleSocketClose({ peerId, userId, authorization, applicationId }) {
+	handleSocketClose({ peerId, userId, applicationId }) {
 		return async (event) => {
 			if (event.code === 1008) {
 				sendNotification({
@@ -1708,24 +2109,34 @@ var OperationAPI = class {
 			}
 			console.info(`[internal] [OperationAPI] App<>Dev box Socket closed, retrying attempt ${this.retryAttempts + 1}...`);
 			root_store_default.editStore?.connectionManager.disconnect();
-			await this.retryConnection({
+			try {
+				await this.retryConnection({
+					peerId,
+					userId,
+					applicationId
+				});
+			} catch (error) {
+				console.error("[internal] [OperationAPI] Failed to reconnect after all retry attempts", safeStringifyError(error));
+				this.asyncSocket.clearSocket();
+				sendNotification({
+					message: "Connection lost",
+					description: "Failed to reconnect to the dev server. Please refresh the page.",
+					type: "error",
+					duration: 600
+				});
+			}
+		};
+	}
+	async retryConnection({ peerId, userId, applicationId }) {
+		if (this.retryAttempts < 3) {
+			if (!this.currentAuthorization) console.warn("[internal] [OperationAPI] Retrying connection without authorization token");
+			await this.connect({
 				peerId,
 				userId,
-				authorization,
+				authorization: this.currentAuthorization,
 				applicationId
 			});
-			if (this.retryAttempts >= 3) this.asyncSocket.clearSocket();
-			this.retryAttempts++;
-		};
-	}
-	async retryConnection({ peerId, userId, authorization, applicationId }) {
-		if (this.retryAttempts < 3) await this.connect({
-			peerId,
-			userId,
-			authorization,
-			applicationId
-		});
-		else {
+		} else {
 			console.info(`[internal] [OperationAPI] App<>Dev box Socket closed, failed to reconnect after 3 attempts. Throwing error.`);
 			throw new Error("Failed to reconnect after 3 attempts");
 		}
@@ -1805,6 +2216,11 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, authori
 						name: err.name
 					};
 				}
+			}],
+			sdkApiSourceUpdated: [async (payload) => {
+				const { apiName, sourceCode } = payload;
+				console.debug(`[source-update-api] SDK API source updated: ${apiName}`);
+				updateSdkApiSourceCode(apiName, sourceCode);
 			}]
 		}, [], trace.getTracer("superblocks-ui-framework"), {
 			onClose: (event) => {
@@ -3480,16 +3896,66 @@ function EditorHotkeys({ children }) {
 //#endregion
 //#region src/edit-mode/screenshot-handler.ts
 let cleanupCallback$1 = void 0;
+const MAX_SCREENSHOT_DIMENSION = 8e3 * .98;
 /**
 * Calculate the scale factor for screenshot capture to keep output image
 * dimensions under API limits (Claude's limit is 8000px).
 */
 function calculateScreenshotScale(elementWidth, elementHeight) {
-	const MAX_SCREENSHOT_DIMENSION = 8e3 * .98;
 	const maxOutputDim = Math.max(elementWidth, elementHeight);
 	return maxOutputDim > MAX_SCREENSHOT_DIMENSION ? MAX_SCREENSHOT_DIMENSION / maxOutputDim : 1;
 }
 /**
+* Measure the full content dimensions for a target element, accounting for
+* cases where scrolling happens in a nested child rather than the target
+* itself. When the target is the root element its own scrollHeight may only
+* reflect the viewport while a child container holds the real content extent.
+*/
+function measureContentDimensions(targetElement, rootElement) {
+	let width$1 = Math.max(targetElement.scrollWidth, targetElement.offsetWidth);
+	let height$1 = Math.max(targetElement.scrollHeight, targetElement.offsetHeight);
+	if (targetElement === rootElement) {
+		width$1 = Math.max(width$1, document.documentElement.scrollWidth, document.body.scrollWidth);
+		height$1 = Math.max(height$1, document.documentElement.scrollHeight, document.body.scrollHeight);
+	}
+	return {
+		width: width$1,
+		height: height$1
+	};
+}
+/**
+* Load a data-URL image and return its actual pixel dimensions.
+*/
+function loadImage(dataUrl) {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+		img.onload = () => resolve(img);
+		img.onerror = reject;
+		img.src = dataUrl;
+	});
+}
+/**
+* Downscale a data-URL image so that neither dimension exceeds
+* MAX_SCREENSHOT_DIMENSION. Returns the original if already within limits.
+*/
+async function ensureWithinDimensionLimit(dataUrl) {
+	const img = await loadImage(dataUrl);
+	const { naturalWidth: width$1, naturalHeight: height$1 } = img;
+	const maxDim = Math.max(width$1, height$1);
+	if (maxDim <= MAX_SCREENSHOT_DIMENSION) return dataUrl;
+	console.warn(`[Library Screenshot Handler] Output image ${width$1}x${height$1} exceeds ${MAX_SCREENSHOT_DIMENSION}px limit, resizing…`);
+	const scale = MAX_SCREENSHOT_DIMENSION / maxDim;
+	const targetWidth = Math.round(width$1 * scale);
+	const targetHeight = Math.round(height$1 * scale);
+	const canvas = document.createElement("canvas");
+	canvas.width = targetWidth;
+	canvas.height = targetHeight;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) throw new Error("Canvas 2d context not available");
+	ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+	return canvas.toDataURL("image/webp", .85);
+}
+/**
 * Counts loading indicators in the DOM that signal data is still being
 * fetched or the UI hasn't finished rendering.
 */
@@ -3556,8 +4022,7 @@ function initializeScreenshotHandler() {
 				targetLabel = `"${selector}"`;
 				console.log(`${LOG_PREFIX} Selector "${selector}" matched element (${matched.offsetWidth}x${matched.offsetHeight})`);
 			}
-			const elementWidth = Math.max(targetElement.scrollWidth, targetElement.offsetWidth);
-			const elementHeight = Math.max(targetElement.scrollHeight, targetElement.offsetHeight);
+			const { width: elementWidth, height: elementHeight } = measureContentDimensions(targetElement, rootElement);
 			const scale = calculateScreenshotScale(elementWidth, elementHeight);
 			const captureStartTime = performance.now();
 			console.log(`${LOG_PREFIX} Starting domToWebp capture of ${targetLabel} (element: ${elementWidth}x${elementHeight}, scale: ${scale.toFixed(2)}, output: ~${Math.round(elementWidth * scale)}x${Math.round(elementHeight * scale)})...`);
@@ -3575,11 +4040,11 @@ function initializeScreenshotHandler() {
 				} }
 			});
 			const captureMs = performance.now() - captureStartTime;
-			const dataUrlSizeKB = (dataUrl.length / 1024).toFixed(1);
-			console.log(`${LOG_PREFIX} domToWebp completed in ${captureMs.toFixed(1)}ms, output size: ${dataUrlSizeKB}KB`);
+			console.log(`${LOG_PREFIX} domToWebp completed in ${captureMs.toFixed(1)}ms, output size: ${(dataUrl.length / 1024).toFixed(1)}KB`);
+			const safeDataUrl = await ensureWithinDimensionLimit(dataUrl);
 			const totalMs = performance.now() - handlerStartTime;
 			console.log(`${LOG_PREFIX} Screenshot captured successfully! Total: ${totalMs.toFixed(1)}ms (import: ${importMs.toFixed(1)}ms, capture: ${captureMs.toFixed(1)}ms)`);
-			editorBridge.sendCaptureScreenshotResponse(callbackId, dataUrl);
+			editorBridge.sendCaptureScreenshotResponse(callbackId, safeDataUrl);
 		} catch (error) {
 			const errorMessage = error instanceof Error ? error.message : String(error);
 			const totalMs = performance.now() - handlerStartTime;
@@ -3704,10 +4169,15 @@ if (import.meta.hot) {
 	});
 	import.meta.hot.on("vite:beforeUpdate", (args) => {
 		try {
-			const pathStr = (args?.updates ?? []).map((update) => update.path).join(", ");
+			const paths = (args?.updates ?? []).map((update) => update.path);
+			const pathStr = paths.join(", ");
 			console.debug("[internal] [iframe-wrappers] vite:beforeUpdate", pathStr);
-		} catch (_error) {
-			console.debug("[internal] [iframe-wrappers] vite:beforeUpdate");
+			if (paths.some((path) => path.includes("server/apis/index.ts")) && root_store_default.sdkApiEnabled) {
+				console.debug("[internal] [iframe-wrappers] API registry updated, re-discovering APIs");
+				discoverAndRegisterSdkApis();
+			}
+		} catch (error) {
+			console.warn("[internal] [iframe-wrappers] vite:beforeUpdate error:", error);
 		}
 	});
 }
@@ -3768,6 +4238,11 @@ const IframeConnected = observer(function IframeConnected$1(props) {
 		console.debug("[internal] [iframe-wrappers] sending ready");
 		editorBridge.sendReady();
 	}, []);
+	useEffect(() => {
+		return reaction(() => root_store_default.sdkApiEnabled, (enabled) => {
+			if (enabled) discoverAndRegisterSdkApis();
+		}, { fireImmediately: true });
+	}, []);
 	useEffect(() => {
 		return linkModifierInterceptor({ isEditMode: true });
 	}, []);
@@ -5991,6 +6466,174 @@ function RouteLoadError() {
 	] }) });
 }
 
+//#endregion
+//#region src/lib/internal-details/use-streaming-api.ts
+/**
+* React hook for calling streaming SDK APIs with real-time chunk delivery.
+*
+* Returns an AsyncGenerator that yields chunks as they arrive, allowing
+* natural iteration with `for await...of`.
+*
+* @param api - The imported CompiledStreamingApi definition
+* @returns Object with `stream` function and `cancel` function
+*
+* @example
+* ```typescript
+* import StreamChatApi from "../apis/StreamChat/api";
+* import { useStreamingApi } from "@superblocksteam/library";
+*
+* const { stream, cancel } = useStreamingApi(StreamChatApi);
+*
+* // Execute and iterate over chunks
+* const generator = stream({ prompt: "Hello!" });
+*
+* for await (const chunk of generator) {
+*   console.log(chunk.text);
+*   // Update UI with each chunk
+* }
+* ```
+*
+* @example With try/catch for error handling
+* ```typescript
+* const { stream } = useStreamingApi(StreamChatApi);
+*
+* try {
+*   for await (const chunk of stream({ prompt: "Hello!" })) {
+*     appendToOutput(chunk.text);
+*   }
+*   console.log("Stream completed!");
+* } catch (error) {
+*   console.error("Stream error:", error);
+* }
+* ```
+*/
+function useStreamingApi(api) {
+	const sdkApiEnabled = root_store_default.sdkApiEnabled;
+	const cancelRef = useRef(null);
+	return {
+		stream: useCallback((inputs) => {
+			if (!sdkApiEnabled) throw new Error("useStreamingApi requires SDK API mode to be enabled. This hook is only available in fullstack applications.");
+			return createStreamGenerator(api, inputs, cancelRef);
+		}, [api, sdkApiEnabled]),
+		cancel: useCallback(() => {
+			if (cancelRef.current) cancelRef.current();
+		}, [])
+	};
+}
+/**
+* Creates an async generator for streaming API execution.
+*/
+async function* createStreamGenerator(api, inputs, cancelRef) {
+	if (!isStreamingApi(api)) throw new Error("Expected a streaming API. Use useApi() for non-streaming APIs.");
+	const executeQuery = async (integrationId, request, input) => {
+		return new Promise((resolve, reject) => {
+			sendMessageImmediately({
+				type: "sdk-execute-query",
+				payload: {
+					integrationId,
+					request,
+					input,
+					callbackId: addNewPromise(resolve, false, reject)
+				}
+			});
+		});
+	};
+	const executeStreamingQuery = async function* (integrationId, request) {
+		const chunkQueue = [];
+		let resolveNext = null;
+		let streamComplete = false;
+		let streamError = null;
+		const streamId = `stream-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+		const handleChunk = (event) => {
+			if (event.source !== window.parent) return;
+			if (event.data?.type === "sdk-stream-chunk" && event.data?.payload?.streamId === streamId) {
+				const { chunk, done, error } = event.data.payload;
+				if (error) {
+					streamError = new Error(error.message || "Stream error");
+					streamComplete = true;
+					if (resolveNext) {
+						resolveNext({
+							value: void 0,
+							done: true
+						});
+						resolveNext = null;
+					}
+					return;
+				}
+				if (done) {
+					streamComplete = true;
+					if (resolveNext) {
+						resolveNext({
+							value: void 0,
+							done: true
+						});
+						resolveNext = null;
+					}
+					return;
+				}
+				if (chunk !== void 0) if (resolveNext) {
+					resolveNext({
+						value: chunk,
+						done: false
+					});
+					resolveNext = null;
+				} else chunkQueue.push(chunk);
+			}
+		};
+		window.addEventListener("message", handleChunk);
+		cancelRef.current = () => {
+			streamComplete = true;
+			if (resolveNext) {
+				resolveNext({
+					value: void 0,
+					done: true
+				});
+				resolveNext = null;
+			}
+			window.removeEventListener("message", handleChunk);
+			sendMessageImmediately({
+				type: "sdk-cancel-stream",
+				payload: { streamId }
+			});
+		};
+		sendMessageImmediately({
+			type: "sdk-execute-streaming-query",
+			payload: {
+				integrationId,
+				request,
+				streamId
+			}
+		});
+		try {
+			while (!streamComplete || chunkQueue.length > 0) {
+				if (streamError) throw streamError;
+				if (chunkQueue.length > 0) yield chunkQueue.shift();
+				else if (!streamComplete) {
+					const result = await new Promise((resolve) => {
+						resolveNext = resolve;
+					});
+					if (!result.done) yield result.value;
+				}
+			}
+			if (streamError) throw streamError;
+		} finally {
+			window.removeEventListener("message", handleChunk);
+			cancelRef.current = null;
+		}
+	};
+	const resolvedIntegrations = await resolveIntegrations(api.integrations ?? []);
+	const generator = execute(api, {
+		input: inputs ?? {},
+		integrations: resolvedIntegrations,
+		executionId: `sdk-stream-${Date.now()}`,
+		env: {},
+		user: root_store_default.sdkUser,
+		executeQuery,
+		executeStreamingQuery
+	});
+	for await (const chunk of generator) yield chunk;
+}
+
 //#endregion
 //#region src/lib/user-facing/global-functions.ts
 async function logoutIntegrations() {
@@ -6170,5 +6813,5 @@ early_console_buffer_default.getInstance().patchEarly();
 registerHtmlElements();
 
 //#endregion
-export { App, PageNotFound, Prop, Property, PropsCategory, RouteLoadError, Section, Superblocks, sb_provider_default as SuperblocksProvider, embedStore, getAppMode, logoutIntegrations, registerComponent, tailwindStylesCategory, useApiStateful as useApi, useEmbedEvent, useEmbedProperties, useEmitEmbedEvent, useSuperblocksGroups, useSuperblocksProfiles, useSuperblocksUser };
+export { App, PageNotFound, Prop, Property, PropsCategory, RouteLoadError, Section, Superblocks, sb_provider_default as SuperblocksProvider, createElement, embedStore, getAppMode, logoutIntegrations, registerComponent, tailwindStylesCategory, useApi, useApiStateful, useEmbedEvent, useEmbedProperties, useEmitEmbedEvent, useStreamingApi, useSuperblocksDataTags, useSuperblocksGroups, useSuperblocksProfiles, useSuperblocksUser, useTypedApi };
 //# sourceMappingURL=index.js.map