@superblocksteam/library 2.0.156 → 2.0.157-next.1

package/dist/lib/index.js

@@ -1,11 +1,11 @@
 import { n as consoleLogAttributes, t as LibraryEarlyConsoleBuffer } from "../early-console-buffer-BJWsc4E3.js";
-import { A as Section, C as iframeMessageHandler, D as createManagedPropsList, E as isEditMode, M as getEditStore, O as Prop, S as getParentOrigin, T as sendMessageImmediately, _ as embedStore, a as getContextFromTraceHeaders, b as colors$1, c as rejectById, d as getAppMode, f as useSuperblocksContext, g as useSuperblocksUser, h as useSuperblocksProfiles, i as createIframeSpan, j as createPropertiesPanelDefinition, k as PropsCategory, l as resolveById, m as useSuperblocksGroups, n as root_store_default, o as tracker, p as useSuperblocksDataTags, r as startEditorSync, s as addNewPromise, t as ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG, u as SuperblocksContextProvider, v as generateId, w as isEmbeddedBySuperblocksFirstParty, x as editorBridge, y as sendNotification } from "../root-store-CBgNjMop.js";
-import { n as initTracerProviderWithOrigin } from "../utils-kXteBlMZ.js";
-import { r as updateSdkApiSourceCode, t as discoverAndRegisterSdkApis } from "../sdk-api-discovery-CzLjjfXy.js";
-import { a as FixWithClarkButton, c as ErrorContent, d as ErrorMessage$1, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, l as ErrorDetails, m as ErrorTitle, n as useJSXContext, o as ActionsContainer, p as ErrorSummary, r as getWidgetAnchorName, s as ErrorContainer, u as ErrorIconContainer } from "../jsx-wrapper-D00bNznz.js";
+import { A as Section, C as iframeMessageHandler, D as createManagedPropsList, E as isEditMode, M as getEditStore, O as Prop, S as getParentOrigin, T as sendMessageImmediately, _ as embedStore, a as getContextFromTraceHeaders, b as colors$1, c as rejectById, d as getAppMode, f as useSuperblocksContext, g as useSuperblocksUser, h as useSuperblocksProfiles, i as createIframeSpan, j as createPropertiesPanelDefinition, k as PropsCategory, l as resolveById, m as useSuperblocksGroups, n as root_store_default, o as tracker, p as useSuperblocksDataTags, r as startEditorSync, s as addNewPromise, t as ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG, u as SuperblocksContextProvider, v as generateId, w as isEmbeddedBySuperblocksFirstParty, x as editorBridge, y as sendNotification } from "../root-store-DFc-KUI6.js";
+import { n as initTracerProviderWithOrigin } from "../utils-Blrvh8kW.js";
+import { r as updateSdkApiSourceCode, t as discoverAndRegisterSdkApis } from "../sdk-api-discovery-ChkM2xTd.js";
+import { a as FixWithClarkButton, c as ErrorContent, d as ErrorMessage$1, f as ErrorStack, g as StyledClarkIcon, h as SecondaryButton, i as getWidgetRectAnchorName, l as ErrorDetails, m as ErrorTitle, n as useJSXContext, o as ActionsContainer, p as ErrorSummary, r as getWidgetAnchorName, s as ErrorContainer, u as ErrorIconContainer } from "../jsx-wrapper-CAKd0FsI.js";
 import { action, autorun, computed, makeAutoObservable, makeObservable, observable, reaction, when } from "mobx";
 import { UNSAFE_DataRouterContext, generatePath, useLocation, useNavigate, useParams, useRouteError } from "react-router";
-import { Dim, NATIVE_COMPONENT_TYPES, NO_SELECT_ATTRIBUTE, Property, Property as Property$1, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, URL_PARAMS, generateSourceId, getBindingIdentifier } from "@superblocksteam/library-shared";
+import { Dim, NATIVE_COMPONENT_TYPES, NO_SELECT_ATTRIBUTE, Property, Property as Property$1, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, URL_PARAMS, generateSourceId, getBindingIdentifier, getDevServerAuthorizationRejectionReason, hasCompactJwtShape } from "@superblocksteam/library-shared";
 import * as React$1 from "react";
 import React, { Suspense, createElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { isEqual } from "lodash";
@@ -13,7 +13,7 @@ import { ISocketWithClientAuth, OBS_TAG_APPLICATION_ID, connectWebSocket, create
 import styled from "styled-components";
 import { AiContextMode, AiGenerationState, ViteMessageKind } from "@superblocksteam/library-shared/types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { trace } from "@opentelemetry/api";
+import { metrics, trace } from "@opentelemetry/api";
 import defaultTheme from "tailwindcss/defaultTheme";
 import postcss from "postcss";
 import colors from "tailwindcss/colors";
@@ -1108,7 +1108,7 @@ const handleBootstrapResponse = (event) => {
 		if (featureFlags["ui.disable-design-mode"]) root_store_default.editStore.setDesignModeDisabled(true);
 	}
 	root_store_default.windowOriginUrl = event.data.payload.logContext?.superblocks_window_origin_url;
-	if (root_store_default.windowOriginUrl) import("../utils-kXteBlMZ.js").then((n) => n.r).then(({ initTracerProviderWithOrigin }) => {
+	if (root_store_default.windowOriginUrl) import("../utils-Blrvh8kW.js").then((n) => n.r).then(({ initTracerProviderWithOrigin }) => {
 		initTracerProviderWithOrigin(root_store_default.windowOriginUrl);
 		import("../logs-DwKJqoRc.js").then(({ initLibraryLoggerProvider }) => {
 			initLibraryLoggerProvider({
@@ -2048,6 +2048,15 @@ function linkModifierInterceptor({ isEmbedMode = false, appMode } = {}) {
 	};
 }
 //#endregion
+//#region src/edit-mode/bootstrap-authorization.ts
+function getBootstrapDevServerAuthorization(payload) {
+	if ("devServerAuthorization" in payload) return payload.devServerAuthorization ?? void 0;
+	return payload.accessToken ? `Bearer ${payload.accessToken}` : void 0;
+}
+function isLegacyBootstrapAuthorization(payload) {
+	return !("devServerAuthorization" in payload) && payload.accessToken !== void 0;
+}
+//#endregion
 //#region src/edit-mode/build-error-notification.tsx
 const ModalOverlay = styled(Dialog.Overlay)`
   position: fixed;
@@ -2382,7 +2391,7 @@ async function createComponent({ componentType, parent, scopeName, basePropertie
 //#endregion
 //#region src/edit-mode/features/ai-store.ts
 var AiManager = class {
-	_isTaggingEnabled = false;
+	_isTaggingEnabled = true;
 	_isEditing = false;
 	_editingComponents = [];
 	_contextMode = AiContextMode.SILENT;
@@ -2552,9 +2561,22 @@ var AsyncSocket = class {
 	}
 };
 //#endregion
+//#region src/edit-mode/authorization-metrics.ts
+let devServerAuthorizationEvents;
+function recordDevServerAuthorizationEvent(event, attributes) {
+	if (!devServerAuthorizationEvents) devServerAuthorizationEvents = metrics.getMeter("superblocks-library").createCounter("dev_server_authorization_events_total", { description: "Count of dev-server authorization compatibility, rejection, and retry-exhaustion events" });
+	devServerAuthorizationEvents.add(1, {
+		event,
+		...attributes
+	});
+}
+//#endregion
 //#region src/edit-mode/source-update-api.ts
 const PING_INTERVAL_MS = 15e3;
+const AUTH_REFRESH_RESPONSE_TIMEOUT_MS = 6e4;
+const MAX_AUTH_REFRESH_ATTEMPTS = 3;
 const INVALID_OR_EXPIRED_TOKEN_MESSAGE = "Invalid or expired token";
+const INSUFFICIENT_TOKEN_SCOPE_MESSAGE = "Insufficient token scope";
 const BEARER_PREFIX = "Bearer ";
 const RETRY_BUDGET_MS = 12e4;
 const MIN_RETRY_ATTEMPTS = 8;
@@ -2563,21 +2585,35 @@ const MAX_RETRY_DELAY_MS = 1e4;
 function sleep(ms) {
 	return new Promise((resolve) => setTimeout(resolve, ms));
 }
-function getAuthorizationExpirationMs(authorization) {
+function getAuthorizationClaims(authorization) {
 	const encodedPayload = (authorization?.startsWith(BEARER_PREFIX) ? authorization.slice(7) : authorization)?.split(".")[1];
 	if (!encodedPayload) return;
 	try {
 		const normalizedPayload = encodedPayload.replace(/-/g, "+").replace(/_/g, "/");
 		const paddedPayload = normalizedPayload.padEnd(Math.ceil(normalizedPayload.length / 4) * 4, "=");
 		const payload = JSON.parse(atob(paddedPayload));
-		return typeof payload.exp === "number" ? payload.exp * 1e3 : void 0;
+		return isRecord(payload) ? payload : void 0;
 	} catch {
 		return;
 	}
 }
-function shouldUseAuthorizationCandidate(currentAuthorization, candidateAuthorization) {
+function getAuthorizationExpirationMs(authorization) {
+	const expiration = getAuthorizationClaims(authorization)?.exp;
+	return typeof expiration === "number" ? expiration * 1e3 : void 0;
+}
+function isDevServerAuthorization(authorization, applicationId) {
+	return getDevServerAuthorizationRejectionReason(authorization, applicationId) === void 0;
+}
+function isUnexpiredLegacyAuthorization(authorization) {
+	if (!hasCompactJwtShape(authorization)) return false;
+	const claims = getAuthorizationClaims(authorization);
+	const expirationMs = getAuthorizationExpirationMs(authorization);
+	return claims !== void 0 && typeof claims.app_id !== "string" && expirationMs !== void 0 && expirationMs > Date.now();
+}
+function shouldUseAuthorizationCandidate(currentAuthorization, candidateAuthorization, applicationId) {
 	if (!candidateAuthorization) return !currentAuthorization;
-	if (!currentAuthorization || currentAuthorization === candidateAuthorization) return true;
+	if (!isDevServerAuthorization(candidateAuthorization, applicationId)) return false;
+	if (!currentAuthorization || currentAuthorization === candidateAuthorization || !isDevServerAuthorization(currentAuthorization, applicationId)) return true;
 	const currentExpirationMs = getAuthorizationExpirationMs(currentAuthorization);
 	const candidateExpirationMs = getAuthorizationExpirationMs(candidateAuthorization);
 	if (currentExpirationMs !== void 0 && candidateExpirationMs !== void 0) return candidateExpirationMs >= currentExpirationMs;
@@ -2593,16 +2629,28 @@ function safeStringifyError(error) {
 		return String(error);
 	}
 }
-function isInvalidOrExpiredTokenError(error) {
-	return (typeof error === "object" && error && "message" in error ? String(error.message) : safeStringifyError(error)).includes(INVALID_OR_EXPIRED_TOKEN_MESSAGE);
+function isRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+function isDevServerAuthorizationError(error) {
+	if (isRecord(error) && (error.code === 401 || error.code === 403)) return true;
+	const message = isRecord(error) && "message" in error ? String(error.message) : safeStringifyError(error);
+	return message.includes(INVALID_OR_EXPIRED_TOKEN_MESSAGE) || message.includes(INSUFFICIENT_TOKEN_SCOPE_MESSAGE);
 }
 var OperationAPI = class {
 	retryAttempts = 0;
 	retryWindowStartMs;
+	authorizationRefreshApplicationId;
+	authorizationRefreshAttempts = 0;
+	authorizationRefreshExhausted = false;
+	authorizationRefreshPendingSinceMs;
+	authorizationRefreshStartedAtMs;
 	asyncSocket = new AsyncSocket();
 	isocket = null;
+	applicationId;
 	connectionGeneration = 0;
 	currentAuthorization;
+	currentAuthorizationAllowsLegacy = false;
 	constructor(serverUrl) {
 		this.serverUrl = serverUrl;
 	}
@@ -2615,7 +2663,12 @@ var OperationAPI = class {
 			this.retryAttempts = 0;
 			this.retryWindowStartMs = Date.now();
 		}
-		if (shouldUseAuthorizationCandidate(this.currentAuthorization, authorization)) this.currentAuthorization = authorization;
+		this.applicationId = applicationId;
+		if (this.currentAuthorization && !this.currentAuthorizationAllowsLegacy && !isDevServerAuthorization(this.currentAuthorization, applicationId)) this.currentAuthorization = void 0;
+		if (shouldUseAuthorizationCandidate(this.currentAuthorization, authorization, applicationId)) {
+			this.currentAuthorization = authorization;
+			this.currentAuthorizationAllowsLegacy = false;
+		}
 		const connectionGeneration = ++this.connectionGeneration;
 		const previousSocket = this.isocket;
 		if (previousSocket) {
@@ -2641,6 +2694,13 @@ var OperationAPI = class {
 					connectionTarget,
 					connectionStartTime
 				}),
+				onAuthorizationFailure: (error) => this.handleAuthorizationFailure(error, {
+					applicationId,
+					connectionStartTime,
+					connectionTarget,
+					connectionType
+				}),
+				onAuthorizationSuccess: () => this.resetAuthorizationRefresh(),
 				isCurrentConnection: () => this.connectionGeneration === connectionGeneration
 			});
 			if (result?.socket) {
@@ -2679,12 +2739,80 @@ var OperationAPI = class {
 	* Updates the authorization token for the socket connection.
 	* This is called when the token is refreshed in the parent window.
 	*/
-	updateAuthorization(newAuthorization) {
+	updateAuthorization(newAuthorization, { allowLegacyAuthorization } = {}) {
+		const rejectionReason = newAuthorization ? getDevServerAuthorizationRejectionReason(newAuthorization, this.applicationId) : void 0;
+		const acceptsLegacyAuthorization = newAuthorization !== void 0 && rejectionReason !== void 0 && (allowLegacyAuthorization ?? this.currentAuthorizationAllowsLegacy) && isUnexpiredLegacyAuthorization(newAuthorization) && (!this.currentAuthorization || !isDevServerAuthorization(this.currentAuthorization, this.applicationId));
+		if (allowLegacyAuthorization === false) this.currentAuthorizationAllowsLegacy = false;
+		if (newAuthorization === void 0 && allowLegacyAuthorization === false && this.currentAuthorization && isDevServerAuthorization(this.currentAuthorization, this.applicationId)) return false;
+		if (newAuthorization && rejectionReason !== void 0 && !acceptsLegacyAuthorization) {
+			recordDevServerAuthorizationEvent("authorization_rejected", { reason: rejectionReason });
+			if (this.currentAuthorization && !this.currentAuthorizationAllowsLegacy && !isDevServerAuthorization(this.currentAuthorization, this.applicationId)) {
+				this.currentAuthorization = void 0;
+				this.currentAuthorizationAllowsLegacy = false;
+				this.isocket?.setAuthorization(void 0);
+			}
+			console.warn("[internal] [OperationAPI] Ignoring invalid dev server authorization", consoleLogAttributes({
+				"application.id": this.applicationId,
+				"error.type": rejectionReason
+			}));
+			return false;
+		}
+		if (acceptsLegacyAuthorization) recordDevServerAuthorizationEvent("legacy_authorization_accepted");
+		this.authorizationRefreshPendingSinceMs = void 0;
 		this.currentAuthorization = newAuthorization;
+		this.currentAuthorizationAllowsLegacy = acceptsLegacyAuthorization;
 		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");
+		return true;
+	}
+	handleAuthorizationFailure(error, { applicationId, connectionStartTime, connectionTarget, connectionType }) {
+		if (this.authorizationRefreshApplicationId !== applicationId) {
+			this.resetAuthorizationRefresh();
+			this.authorizationRefreshApplicationId = applicationId;
+		}
+		if (this.authorizationRefreshExhausted) return;
+		const now = Date.now();
+		if (this.authorizationRefreshPendingSinceMs !== void 0 && now - this.authorizationRefreshPendingSinceMs < AUTH_REFRESH_RESPONSE_TIMEOUT_MS) return;
+		if (this.authorizationRefreshAttempts >= MAX_AUTH_REFRESH_ATTEMPTS) {
+			this.authorizationRefreshExhausted = true;
+			recordDevServerAuthorizationEvent("authorization_refresh_exhausted");
+			sendNotification({
+				message: "Authorization failed",
+				description: "Failed to refresh dev-server authorization. Please refresh the page.",
+				type: "error",
+				duration: 600
+			});
+			window.parent.postMessage({
+				type: "app-websocket-exhausted",
+				payload: {
+					durationMs: now - (this.authorizationRefreshStartedAtMs ?? now),
+					connectionStartTime,
+					connectionType,
+					connectionTarget,
+					error: {
+						message: safeStringifyError(error),
+						type: "AuthorizationRefreshExhausted"
+					}
+				}
+			}, getParentOrigin() ?? "*");
+			return;
+		}
+		this.authorizationRefreshAttempts++;
+		this.authorizationRefreshPendingSinceMs = now;
+		this.authorizationRefreshStartedAtMs ??= now;
+		sendMessageImmediately({
+			type: "sb-editor-request-bootstrap",
+			payload: { forceRefreshScopedToken: true }
+		});
+	}
+	resetAuthorizationRefresh() {
+		this.authorizationRefreshApplicationId = void 0;
+		this.authorizationRefreshAttempts = 0;
+		this.authorizationRefreshExhausted = false;
+		this.authorizationRefreshPendingSinceMs = void 0;
+		this.authorizationRefreshStartedAtMs = void 0;
 	}
 	handleSocketClose({ peerId, userId, applicationId, connectionGeneration, connectionTarget, connectionStartTime }) {
 		return async (event) => {
@@ -2771,25 +2899,19 @@ var OperationAPI = class {
 };
 var source_update_api_default = new OperationAPI(typeof window !== "undefined" ? window.location.origin : "");
 /** Returns a function that can be used to stop the heartbeat */
-function startSocketHeartbeat(socket, isCurrentConnection) {
+function startSocketHeartbeat(socket, isCurrentConnection, onAuthorizationFailure, onAuthorizationSuccess) {
 	let timeoutId;
 	let canceled = false;
-	let lastBootstrapRequestTime = 0;
 	(function loop() {
 		if (canceled) return;
 		timeoutId = setTimeout(async () => {
 			try {
 				await socket.call.editor.ping();
+				onAuthorizationSuccess();
 			} catch (e) {
 				console.warn("[internal] [OperationAPI] Ping library socket error", e);
-				if (isInvalidOrExpiredTokenError(e) && Date.now() - lastBootstrapRequestTime > PING_INTERVAL_MS) {
-					lastBootstrapRequestTime = Date.now();
-					if (isCurrentConnection()) sendMessageImmediately({
-						type: "sb-editor-request-bootstrap",
-						payload: { forceRefreshScopedToken: true }
-					});
-					else socket.close("Stale socket expired token");
-				}
+				if (isDevServerAuthorizationError(e)) if (!isCurrentConnection()) socket.close("Stale socket expired token");
+				else onAuthorizationFailure(e);
 			}
 			loop();
 		}, PING_INTERVAL_MS);
@@ -2799,7 +2921,7 @@ function startSocketHeartbeat(socket, isCurrentConnection) {
 		clearTimeout(timeoutId);
 	};
 }
-async function connectSocket(serverUrl, { peerId, userId, applicationId, getAuthorization, onClose, isCurrentConnection, traceContext, connectionType, connectionTarget, connectionStartTime }) {
+async function connectSocket(serverUrl, { peerId, userId, applicationId, getAuthorization, onClose, isCurrentConnection, onAuthorizationFailure, onAuthorizationSuccess, traceContext, connectionType, connectionTarget, connectionStartTime }) {
 	if (!serverUrl) return;
 	const wsUrl = new URL("/sb-updates", serverUrl);
 	wsUrl.searchParams.set("peerId", peerId);
@@ -2902,7 +3024,7 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, getAuth
 			}
 		}, getParentOrigin() ?? "*");
 		appWebsocketSpan.end();
-		stopSocketHeartbeat = startSocketHeartbeat(socket, isCurrentConnection);
+		stopSocketHeartbeat = startSocketHeartbeat(socket, isCurrentConnection, onAuthorizationFailure, onAuthorizationSuccess);
 		root_store_default.editStore?.connectionManager.connect();
 		return {
 			socket,
@@ -5112,9 +5234,9 @@ if (isEditMode()) {
 				}
 			}
 		};
-		const updateDevServerAuthorization = (authorization) => {
+		const updateDevServerAuthorization = (authorization, allowLegacyAuthorization) => {
+			if (!source_update_api_default.updateAuthorization(authorization, { allowLegacyAuthorization })) return;
 			const generation = ++tokenUpdateGeneration;
-			source_update_api_default.updateAuthorization(authorization);
 			tokenUpdateAbortController?.abort();
 			if (!authorization) return;
 			const abortController = new AbortController();
@@ -5123,11 +5245,10 @@ if (isEditMode()) {
 		};
 		const handleTokenUpdate = ({ data }) => {
 			const { authorization } = data.payload;
-			console.log("Received sb-update-token message from iframe", authorization?.substring(0, 20));
 			updateDevServerAuthorization(authorization);
 		};
 		const handleBootstrapTokenUpdate = ({ data }) => {
-			if (data.payload.accessToken) updateDevServerAuthorization(`Bearer ${data.payload.accessToken}`);
+			updateDevServerAuthorization(getBootstrapDevServerAuthorization(data.payload), isLegacyBootstrapAuthorization(data.payload));
 		};
 		iframeMessageHandler.addEventListener("sb-init", handleInit);
 		iframeMessageHandler.addEventListener("sb-bootstrap-response", handleBootstrapTokenUpdate);