@superblocksteam/library 2.0.165-next.0 → 2.0.166-next.0

package/dist/lib/index.js

@@ -1,11 +1,12 @@
 import { n as consoleLogAttributes, t as LibraryEarlyConsoleBuffer } from "../early-console-buffer-DMR1SCsN.js";
-import { A as Section, C as iframeMessageHandler, D as createManagedPropsList, E as isEditMode, O as Prop, S as getParentOrigin, T as sendMessageImmediately, _ as generateId, a as tracker, b as editorBridge, c as resolveById, d as useSuperblocksContext, f as useSuperblocksDataTags, g as embedStore, h as useSuperblocksUser, i as getContextFromTraceHeaders, k as PropsCategory, l as SuperblocksContextProvider, m as useSuperblocksProfiles, n as root_store_default, o as addNewPromise, p as useSuperblocksGroups, r as createIframeSpan, s as rejectById, t as ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG, u as getAppMode, v as sendNotification, w as isEmbeddedBySuperblocksFirstParty, x as getEditStore, y as colors } from "../root-store-CtsStoaR.js";
+import { C as iframeMessageHandler, E as isEditMode, S as getParentOrigin, T as sendMessageImmediately, _ as generateId, a as tracker, b as editorBridge, c as resolveById, d as useSuperblocksContext, f as useSuperblocksDataTags, g as embedStore, h as useSuperblocksUser, i as getContextFromTraceHeaders, l as SuperblocksContextProvider, m as useSuperblocksProfiles, n as root_store_default, o as addNewPromise, p as useSuperblocksGroups, r as createIframeSpan, s as rejectById, t as ORCHESTRATOR_EXECUTE_RESPONSE_SIZE_LIMIT_FLAG, u as getAppMode, v as sendNotification, w as isEmbeddedBySuperblocksFirstParty, x as getEditStore, y as colors } from "../root-store-BYYXPQRA.js";
 import { n as initTracerProviderWithOrigin } from "../utils-DXaAwgS_.js";
-import { r as updateSdkApiSourceCode, t as discoverAndRegisterSdkApis } from "../sdk-api-discovery-DdbqEI70.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-BGGZod5X.js";
+import { r as updateSdkApiSourceCode, t as discoverAndRegisterSdkApis } from "../sdk-api-discovery-DvvsdT1z.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-1kyr6-x3.js";
+import { PropsCategory } from "@superblocksteam/library-shared/props";
 import { action, computed, makeAutoObservable, makeObservable, observable, reaction, when } from "mobx";
 import { UNSAFE_DataRouterContext, generatePath, useLocation, useNavigate, useParams, useRouteError } from "react-router";
-import { NATIVE_COMPONENT_TYPES, NO_SELECT_ATTRIBUTE, Property, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, URL_PARAMS, generateSourceId, getBindingIdentifier, getDevServerAuthorizationRejectionReason, hasCompactJwtShape } from "@superblocksteam/library-shared";
+import { NATIVE_COMPONENT_TYPES, NO_SELECT_ATTRIBUTE, Property, SELECTOR_ID_ATTRIBUTE, SOURCE_ID_ATTRIBUTE, URL_PARAMS, 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";
@@ -239,6 +240,324 @@ function installDynamicImportErrorReporter(options = {}) {
 	};
 }
 //#endregion
+//#region src/lib/user-facing/properties-panel/props-builder.ts
+var Section = class Section {
+	props = {};
+	propertiesPanelConfig = {};
+	constructor(category) {
+		this.category = category;
+	}
+	static category(category) {
+		return new Section(category);
+	}
+	children(props) {
+		if (props instanceof CompositeProp || props instanceof RecordProp) this.props = {
+			...this.props,
+			...props.getProps()
+		};
+		else if (props instanceof UnionProp) this.props = {
+			...this.props,
+			...props.getProps()
+		};
+		else this.props = {
+			...this.props,
+			...props
+		};
+		return this;
+	}
+	add = this.children;
+	/** @deprecated Panel configuration is accepted for source compatibility and ignored. */
+	propertiesPanel(_config) {
+		return this;
+	}
+	get name() {
+		switch (this.category) {
+			case PropsCategory.Content: return "Content";
+			case PropsCategory.Routing: return "Routing";
+			case PropsCategory.Interaction: return "Interaction";
+			case PropsCategory.Layout: return "Layout";
+			case PropsCategory.Appearance: return "Appearance";
+			case PropsCategory.Permissions: return "Permissions";
+			case PropsCategory.EventHandlers: return "Actions";
+			case PropsCategory.Styles: return "Styles";
+			default: return "Uncategorized";
+		}
+	}
+};
+var Prop = class Prop {
+	prop;
+	constructor(typeString) {
+		this.prop = {
+			path: "",
+			dataType: typeString
+		};
+	}
+	static unset() {
+		return new Prop("any");
+	}
+	static string() {
+		return new Prop("string");
+	}
+	static number() {
+		return new Prop("number");
+	}
+	static boolean() {
+		return new Prop("boolean");
+	}
+	static array() {
+		return new Prop("array");
+	}
+	static any() {
+		return new Prop("any");
+	}
+	static jsx() {
+		return new Prop("jsx");
+	}
+	static literal(value) {
+		switch (typeof value) {
+			case "string": return Prop.string().default(value);
+			case "number": return Prop.number().default(value);
+			case "boolean": return Prop.boolean().default(value);
+			default: throw new Error(`Invalid literal value: ${value}`);
+		}
+	}
+	static eventHandler() {
+		return new Prop("eventHandler");
+	}
+	static function(implementation) {
+		return new FunctionProp(implementation);
+	}
+	/**
+	* Creates a composite property, which is a property that contains nested properties. For example,
+	* the following composite property:
+	*
+	* ```ts
+	* const prop = Prop.composite({
+	*   name: Prop.string(),
+	*   age: Prop.number(),
+	* });
+	* ```
+	*
+	* is equivalent to the following type:
+	*
+	* ```ts
+	* type Prop = {
+	*   name: string;
+	*   age: number;
+	* };
+	* ```
+	*/
+	static composite(props) {
+		return new CompositeProp(props);
+	}
+	/**
+	* Creates a record property, which is a record that maps string keys to the nestedproperties. For example,
+	* the following record property:
+	*
+	* ```ts
+	* const prop = Prop.record({
+	*   name: Prop.string(),
+	*   age: Prop.number(),
+	* });
+	* ```
+	*
+	* is equivalent to the following type:
+	*
+	* ```ts
+	* type Prop = Record<string, {
+	*   name: string;
+	*   age: number;
+	* }>;
+	* ```
+	*/
+	static record(props) {
+		return new RecordProp(props);
+	}
+	static union(props) {
+		return new UnionProp(props.shared, props.variants);
+	}
+	default(de) {
+		this.prop.default = de;
+		return this;
+	}
+	contextual(computedArgs) {
+		this.prop.contextual = true;
+		this.prop.computedArgs = computedArgs;
+		return this;
+	}
+	setName(name) {
+		this.prop.path = name;
+		return this;
+	}
+	/** @deprecated Panel configuration is accepted for source compatibility and ignored. */
+	propertiesPanel(_schema) {
+		return this;
+	}
+	/** @deprecated Panel metadata is accepted for source compatibility and ignored. */
+	setDisplayProperty(_property, _value) {
+		return this;
+	}
+	/** @deprecated Panel relations are accepted for source compatibility and ignored. */
+	dependsOn(_relations) {
+		return this;
+	}
+	getRelations() {
+		return [];
+	}
+	hasPropertiesPanelDisplay() {
+		return false;
+	}
+	toDefinition(_props) {}
+	docs(docs) {
+		this.prop.docs = docs;
+		return this;
+	}
+	build() {
+		return this.prop;
+	}
+	get type() {
+		return this.prop.dataType;
+	}
+	get path() {
+		return this.prop.path;
+	}
+};
+/**
+* See {@link Prop.composite}
+*/
+var CompositeProp = class extends Prop {
+	typeString = "composite";
+	nestedProps;
+	constructor(props) {
+		super("composite");
+		this.nestedProps = props;
+	}
+	getProps() {
+		return this.nestedProps;
+	}
+	propertiesPanelChildrenDisplayMode() {}
+};
+/**
+* See {@link Prop.record}
+*/
+var RecordProp = class extends Prop {
+	typeString = "recordOf";
+	nestedProps;
+	constructor(props) {
+		super("recordOf");
+		this.nestedProps = props;
+	}
+	getProps() {
+		return this.nestedProps;
+	}
+};
+var FunctionProp = class extends Prop {
+	typeString = "function";
+	constructor(implementation) {
+		super("function");
+		this.default(implementation);
+	}
+	/** @deprecated Action panel metadata is accepted for source compatibility and ignored. */
+	actionPanel(_panel) {
+		return this;
+	}
+	getActionPanel() {}
+};
+var UnionProp = class extends Prop {
+	typeString = "union";
+	shared;
+	variants;
+	constructor(shared, variants) {
+		super("any");
+		this.shared = shared;
+		this.variants = variants;
+	}
+	getProps() {
+		const props = { ...this.shared };
+		for (const variant of this.variants) for (const [key, prop] of Object.entries(variant)) if (!Object.hasOwn(props, key)) props[key] = prop;
+		return props;
+	}
+};
+function buildCompositeDefault(prop, name, parentDefault) {
+	const defaultThroughParent = parentDefault?.[name];
+	const selfDefault = prop.build().default;
+	let propDefault = defaultThroughParent ?? selfDefault;
+	if (!propDefault && typeof parentDefault === "function") propDefault = function getNestedDefault(s) {
+		return parentDefault.call(this, s)?.[name];
+	};
+	return propDefault;
+}
+function buildPropLeafDefault(prop, name, parentDefault) {
+	const defaultThroughParent = parentDefault?.[name];
+	let propDefault = prop.build().default ?? defaultThroughParent;
+	if (!propDefault && typeof parentDefault === "function") propDefault = function getNestedDefault(s) {
+		return parentDefault.call(this, s)?.[name];
+	};
+	return propDefault;
+}
+/**
+* Core traversal function that walks through all properties in sections
+* and calls the provided callback for each leaf property.
+*/
+function traverseProps(sections, onProp, parentPath = "") {
+	const processProps = ({ props, parentPath, parentDefault }) => {
+		for (const [name, prop] of Object.entries(props)) {
+			if (!prop) continue;
+			const fullPath = parentPath ? `${parentPath}.${name}` : name;
+			if (prop instanceof CompositeProp) {
+				const compositeDefault = buildCompositeDefault(prop, name, parentDefault);
+				processProps({
+					props: prop.nestedProps,
+					parentPath: fullPath,
+					parentDefault: compositeDefault
+				});
+			} else if (prop instanceof RecordProp) {
+				const recordPath = `${fullPath}.*`;
+				processProps({
+					props: prop.nestedProps,
+					parentPath: recordPath,
+					parentDefault: prop.build().default
+				});
+			} else if (prop instanceof Section) processProps({
+				props: prop.props,
+				parentPath
+			});
+			else if (prop instanceof UnionProp) {
+				const sharedKeys = Object.keys(prop.shared);
+				processProps({
+					props: prop.shared,
+					parentPath: fullPath
+				});
+				for (const variant of prop.variants) processProps({
+					props: Object.fromEntries(Object.entries(variant).filter(([key]) => !sharedKeys.includes(key))),
+					parentPath: fullPath
+				});
+			} else if (prop instanceof Prop) onProp(prop, fullPath, name, parentDefault);
+			else console.warn("Invalid prop type", {
+				name,
+				prop
+			});
+		}
+	};
+	for (const section of Object.values(sections)) processProps({
+		props: section.props,
+		parentPath,
+		parentDefault: void 0
+	});
+}
+function createManagedPropsList(sections, parentPath = "") {
+	const managedPropsList = [];
+	traverseProps(sections, (prop, fullPath, name, parentDefault) => {
+		let configuredProp = prop.setName(fullPath);
+		const propDefault = buildPropLeafDefault(prop, name, parentDefault);
+		if (propDefault !== void 0) configuredProp = configuredProp.default(propDefault);
+		const builtProp = configuredProp.build();
+		if (builtProp.dataType === "internal") return;
+		managedPropsList.push({ ...builtProp });
+	}, parentPath);
+	return managedPropsList;
+}
+//#endregion
 //#region src/lib/internal-details/sb-wrapper.tsx
 /**
 * Register a component to be used with the framework.
@@ -261,15 +580,7 @@ const registerComponentInternal = (Component, propertiesDefinition) => {
 		root_store_default.componentRegistry.addEditorConfig(type, defaultEditorConfig);
 	}
 	const chainableComponent = {
-		addEditorTemplate: (templateConfig) => {
-			const catalog = templateConfig.catalog ?? {
-				displayName: type,
-				category: "MISC"
-			};
-			root_store_default.componentRegistry.addEditorTemplate(type, {
-				...templateConfig,
-				catalog
-			});
+		addEditorTemplate: (_templateConfig) => {
 			return chainableComponent;
 		},
 		editorConfig: (config) => {
@@ -1779,6 +2090,46 @@ function BuildErrorModal({ isOpen, error, onClose }) {
 	});
 }
 //#endregion
+//#region src/edit-mode/dev-server-token-delivery.ts
+/**
+* Socket identity and pod TokenManager delivery are different stores.
+* `updateAuthorization` only reports whether the iframe socket changed;
+* this tracker decides whether `/_sb_update_token` still needs to run.
+*/
+function createDevServerTokenDelivery() {
+	let deliveredAuthorization;
+	let inFlightAuthorization;
+	return {
+		decide(authorizationChanged, installedAuthorization) {
+			if (!installedAuthorization) return authorizationChanged ? { action: "abort" } : { action: "skip" };
+			if (!authorizationChanged) {
+				if (installedAuthorization === inFlightAuthorization || installedAuthorization === deliveredAuthorization) return { action: "skip" };
+				return {
+					action: "post",
+					abortInFlight: false
+				};
+			}
+			return {
+				action: "post",
+				abortInFlight: true
+			};
+		},
+		markAborted() {
+			inFlightAuthorization = void 0;
+		},
+		markDelivered(authorization) {
+			deliveredAuthorization = authorization;
+			if (inFlightAuthorization === authorization) inFlightAuthorization = void 0;
+		},
+		markFailed(authorization) {
+			if (inFlightAuthorization === authorization) inFlightAuthorization = void 0;
+		},
+		markStarted(authorization) {
+			inFlightAuthorization = authorization;
+		}
+	};
+}
+//#endregion
 //#region src/edit-mode/features/ai-store.ts
 var AiManager = class {
 	_isTaggingEnabled = true;
@@ -1954,7 +2305,7 @@ var AsyncSocket = class {
 //#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" });
+	if (!devServerAuthorizationEvents) devServerAuthorizationEvents = metrics.getMeter("superblocks-library").createCounter("dev_server_authorization_events_total", { description: "Count of dev-server authorization compatibility, rejection, refresh, and retry-exhaustion events" });
 	devServerAuthorizationEvents.add(1, {
 		event,
 		...attributes
@@ -2128,23 +2479,37 @@ var OperationAPI = class {
 	/**
 	* Updates the authorization token for the socket connection.
 	* This is called when the token is refreshed in the parent window.
+	* Returns true only when the installed authorization changes.
 	*/
 	updateAuthorization(newAuthorization, { allowLegacyAuthorization } = {}) {
+		const revokesInstalledLegacyAuthorization = allowLegacyAuthorization === false && this.currentAuthorizationAllowsLegacy;
+		if (newAuthorization === this.currentAuthorization && !revokesInstalledLegacyAuthorization) return false;
 		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) {
+			let authorizationChanged = false;
 			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);
+				authorizationChanged = true;
 			}
 			console.warn("[internal] [OperationAPI] Ignoring invalid dev server authorization", consoleLogAttributes({
 				"application.id": this.applicationId,
 				"error.type": rejectionReason
 			}));
+			return authorizationChanged;
+		}
+		if (newAuthorization !== void 0 && rejectionReason === void 0 && this.applicationId !== void 0 && !shouldUseAuthorizationCandidate(this.currentAuthorization, newAuthorization, this.applicationId)) {
+			recordDevServerAuthorizationEvent("authorization_downgrade_ignored");
+			console.warn("[internal] [OperationAPI] Ignoring older dev server authorization", consoleLogAttributes({
+				"application.id": this.applicationId,
+				"authorization.candidate_expiration_ms": getAuthorizationExpirationMs(newAuthorization),
+				"authorization.installed_expiration_ms": getAuthorizationExpirationMs(this.currentAuthorization)
+			}));
 			return false;
 		}
 		if (acceptsLegacyAuthorization) recordDevServerAuthorizationEvent("legacy_authorization_accepted");
@@ -2157,6 +2522,9 @@ var OperationAPI = class {
 		} else console.warn("[internal] [OperationAPI] Cannot update authorization: socket not yet initialized");
 		return true;
 	}
+	getCurrentAuthorization() {
+		return this.currentAuthorization;
+	}
 	handleAuthorizationFailure(error, { applicationId, connectionStartTime, connectionTarget, connectionType }) {
 		if (this.authorizationRefreshApplicationId !== applicationId) {
 			this.resetAuthorizationRefresh();
@@ -2453,161 +2821,19 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, getAuth
 //#endregion
 //#region src/edit-mode/features/operation-store.ts
 var OperationManager = class {
-	pendingTransactions = [];
-	waitingForBatch = false;
-	batchOperations = [];
-	batchOperationTransactionId;
-	visibleSourceIds = [];
-	constructor() {
-		makeAutoObservable(this);
-	}
-	get allPendingTransactions() {
-		return this.pendingTransactions;
-	}
-	get pendingDeleteOperations() {
-		return this.pendingTransactions.filter((t) => t.type === "editor:deleteComponents");
-	}
-	get hasPendingOperations() {
-		return this.pendingTransactions.length > 0;
-	}
-	get allNames() {
-		return [];
-	}
-	@action executeOrAddToBatch(operation, addTransaction = true) {
-		const transactionId = this.batchOperationTransactionId ?? generateId();
-		const payload = this.waitingForBatch ? operation.payload : {
-			...operation.payload,
+	deleteComponents(sourceIds) {
+		editorBridge.editOpRequest("editor:deleteComponents", {
+			elements: sourceIds.map((sourceId) => ({ source: { id: sourceId } })),
 			transaction: {
-				id: transactionId,
+				id: generateId(),
 				origin: "LIBRARY"
 			}
-		};
-		const opWithId = {
-			...operation,
-			id: transactionId,
-			payload
-		};
-		if (addTransaction) this.addPendingTransaction(opWithId);
-		if (this.waitingForBatch) this.batchOperations.push(opWithId);
-		else switch (operation.type) {
-			case "editor:moveComponent": return editorBridge.editOpRequest("editor:moveComponent", payload);
-			case "editor:createComponent": return editorBridge.editOpRequest("editor:createComponent", payload);
-			case "editor:deleteComponents": return editorBridge.editOpRequest("editor:deleteComponents", payload);
-		}
-	}
-	@action addPendingTransaction(transaction) {
-		this.pendingTransactions.push(transaction);
-	}
-	@action clearPendingTransactions(transactionIds) {
-		const toClear = new Set(transactionIds);
-		const { cleared, remaining } = this.pendingTransactions.reduce((acc, transaction) => {
-			if (toClear.has(transaction.id)) acc.cleared.push(transaction);
-			else acc.remaining.push(transaction);
-			return acc;
-		}, {
-			cleared: [],
-			remaining: []
-		});
-		this.pendingTransactions = remaining;
-		cleared.forEach((transaction) => {
-			if (transaction.callback) transaction.callback();
 		});
 	}
-	@action batchUpdate(performOperations) {
-		this.waitingForBatch = true;
-		this.batchOperationTransactionId = generateId();
-		performOperations();
-		editorBridge.editOpRequest("editor:batchUpdate", {
-			updates: this.batchOperations.map((op) => ({
-				type: op.type,
-				payload: op.payload
-			})),
-			transaction: {
-				origin: "LIBRARY",
-				id: this.batchOperationTransactionId
-			}
-		});
-		this.waitingForBatch = false;
-		this.batchOperations = [];
-		this.batchOperationTransactionId = void 0;
-	}
-	@action createComponent(payload) {
-		this.executeOrAddToBatch({
-			type: "editor:createComponent",
-			payload
-		});
-	}
-	@action dropComponent(action) {
-		const { from, to, propsToChange } = action;
-		const payload = {
-			from,
-			to,
-			changedProps: propsToChange ?? {}
-		};
-		this.executeOrAddToBatch({
-			type: "editor:moveComponent",
-			payload
-		});
-	}
-	@action deleteComponents(sourceIds) {
-		const payload = { elements: sourceIds.map((sourceId) => ({ source: { id: sourceId } })) };
-		this.executeOrAddToBatch({
-			type: "editor:deleteComponents",
-			payload
-		}, false);
-	}
-	acknowledgeEditOperation(operation) {
-		if (!("transaction" in operation.payload) || !operation.payload.transaction?.id) {
-			console.error("No transaction id in edit operation", operation);
-			return;
-		}
-		const addOperation = (operation, batchTransactionId) => {
-			switch (operation.type) {
-				case "editor:createComponent": {
-					const { type, payload } = operation;
-					this.addPendingTransaction({
-						type,
-						id: batchTransactionId ?? payload.transaction.id,
-						payload
-					});
-					break;
-				}
-				case "editor:deleteComponents": {
-					const { type, payload } = operation;
-					this.addPendingTransaction({
-						type,
-						id: batchTransactionId ?? payload.transaction.id,
-						payload
-					});
-					break;
-				}
-				case "editor:moveComponent": {
-					const { type, payload } = operation;
-					this.addPendingTransaction({
-						type,
-						id: batchTransactionId ?? payload.transaction.id,
-						payload
-					});
-					break;
-				}
-				default: console.error("Unknown edit operation", operation);
-			}
-		};
-		if (operation.type === "editor:batchUpdate") {
-			const { payload } = operation;
-			if (!payload.transaction?.id) {
-				console.error("No transaction id in batch", operation);
-				return;
-			}
-			for (const update of payload.updates) addOperation(update, payload.transaction.id);
-		} else addOperation(operation);
-	}
+	acknowledgeEditOperation(_operation) {}
 	async ensureFilesSynced() {
 		await source_update_api_default.ensureFilesSynced();
 	}
-	generateSourceId() {
-		return generateSourceId();
-	}
 };
 //#endregion
 //#region src/edit-mode/runtime-graph/observable-graph.ts
@@ -2654,7 +2880,6 @@ var RuntimeComponentNode = class {
 	isSbComponent;
 	isHtmlElement;
 	noSelect;
-	props;
 	constructor(store, params) {
 		this.store = store;
 		this.sourceId = params.sourceId;
@@ -2663,10 +2888,7 @@ var RuntimeComponentNode = class {
 		this.isSbComponent = params.isSbComponent;
 		this.isHtmlElement = params.isHtmlElement;
 		this.noSelect = params.noSelect;
-		makeAutoObservable(this, {
-			type: observable.ref,
-			props: observable.ref
-		});
+		makeAutoObservable(this, { type: observable.ref });
 	}
 	get firstRenderedTag() {
 		if (this?.isHtmlElement) return this.selectorId;
@@ -2757,13 +2979,9 @@ var RuntimeTrackingStore = class {
 		}
 		return this.jsxNodes[selectorId]?.nearestSelectableAncestor;
 	}
-	updatePropsForComponent(selectorId, props) {
-		const componentNode = this.jsxNodes[selectorId];
-		if (componentNode) {
-			componentNode.props = props;
-			if (props.disabled) this.disabledComponents.add(selectorId);
-			else this.disabledComponents.delete(selectorId);
-		}
+	setComponentDisabled(selectorId, disabled) {
+		if (this.jsxNodes[selectorId]) if (disabled) this.disabledComponents.add(selectorId);
+		else this.disabledComponents.delete(selectorId);
 	}
 	getComponent(selectorId) {
 		return this.jsxNodes[selectorId];
@@ -4211,6 +4429,7 @@ if (isEditMode()) {
 		let tokenUpdateGeneration = 0;
 		let tokenUpdateAbortController = null;
 		let devServerTokenUpdateQueue = Promise.resolve();
+		const tokenDelivery = createDevServerTokenDelivery();
 		const postDevServerAuthorization = async (authorization, generation, signal) => {
 			const maxAttempts = 3;
 			for (let attempt = 1; attempt <= maxAttempts; attempt++) {
@@ -4222,11 +4441,15 @@ if (isEditMode()) {
 						signal
 					});
 					if (generation !== tokenUpdateGeneration) return;
-					if (response.ok) return;
+					if (response.ok) {
+						tokenDelivery.markDelivered(authorization);
+						return;
+					}
 					throw new Error(`status ${response.status}`);
 				} catch (error) {
 					if (generation !== tokenUpdateGeneration) return;
 					if (attempt === maxAttempts) {
+						tokenDelivery.markFailed(authorization);
 						console.warn("[internal] [iframe-wrappers] failed to update dev-server token", error);
 						return;
 					}
@@ -4235,13 +4458,20 @@ if (isEditMode()) {
 			}
 		};
 		const updateDevServerAuthorization = (authorization, allowLegacyAuthorization) => {
-			if (!source_update_api_default.updateAuthorization(authorization, { allowLegacyAuthorization })) return;
+			const authorizationChanged = source_update_api_default.updateAuthorization(authorization, { allowLegacyAuthorization });
+			const installedAuthorization = source_update_api_default.getCurrentAuthorization();
+			const decision = tokenDelivery.decide(authorizationChanged, installedAuthorization);
+			if (decision.action === "skip") return;
 			const generation = ++tokenUpdateGeneration;
-			tokenUpdateAbortController?.abort();
-			if (!authorization) return;
+			if (decision.action !== "post" || decision.abortInFlight) {
+				tokenUpdateAbortController?.abort();
+				tokenDelivery.markAborted();
+			}
+			if (decision.action !== "post" || !installedAuthorization) return;
 			const abortController = new AbortController();
 			tokenUpdateAbortController = abortController;
-			devServerTokenUpdateQueue = devServerTokenUpdateQueue.catch(() => void 0).then(() => postDevServerAuthorization(authorization, generation, abortController.signal));
+			tokenDelivery.markStarted(installedAuthorization);
+			devServerTokenUpdateQueue = devServerTokenUpdateQueue.catch(() => void 0).then(() => postDevServerAuthorization(installedAuthorization, generation, abortController.signal));
 		};
 		const handleTokenUpdate = ({ data }) => {
 			const { authorization } = data.payload;