@cfp-studio/iframe 18.2.0 → 18.3.0

package/README.md

@@ -26,7 +26,7 @@ CFP Studio 预览 iframe 通信与渲染核心包，负责 iframe 与主应用/
 集成于 CFP Studio 设计器/主应用，无需单独调用。自定义渲染器可参考 preview/renderer/
 
 ## 依赖
-- `assert-never`、`immer`、`typescript`、`vite`、`unbuild`
+- `assert-never`、`immer`、`typescript`、`vite`、`tsdown`
 
 ## 构建
 ```sh

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-//#region ../node_modules/.pnpm/vite@6.4.5_@types+node@24.19.2_jiti@2.6.1_less@4.2.2_lightningcss@1.30.2_sass@1.85.1_terser@5.40.0_tsx@4.19.3_yaml@2.7.0/node_modules/vite/types/hmrPayload.d.ts
+//#region ../../../../node_modules/.pnpm/vite@6.4.5_@types+node@24.19.2_jiti@2.6.1_less@4.2.2_lightningcss@1.30.2_sass@1.85.1_terser@5.40.0_tsx@4.19.3_yaml@2.7.0/node_modules/vite/types/hmrPayload.d.ts
 interface UpdatePayload {
   type: 'update';
   updates: Update[];

package/dist/index.mjs

@@ -1,769 +1 @@
-//#region \0rolldown/runtime.js
-var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
-//#endregion
-//#region ../node_modules/.pnpm/immer@10.1.1/node_modules/immer/dist/immer.mjs
-var import_assert_never = (/* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.assertNever = assertNever;
-	/**
-	* Helper function for exhaustive checks of discriminated unions.
-	* https://basarat.gitbooks.io/typescript/docs/types/discriminated-unions.html
-	*
-	* @example
-	*
-	*    type A = {type: 'a'};
-	*    type B = {type: 'b'};
-	*    type Union = A | B;
-	*
-	*    function doSomething(arg: Union) {
-	*      if (arg.type === 'a') {
-	*        return something;
-	*      }
-	*
-	*      if (arg.type === 'b') {
-	*        return somethingElse;
-	*      }
-	*
-	*      // TS will error if there are other types in the union
-	*      // Will throw an Error when called at runtime.
-	*      // Use `assertNever(arg, true)` instead to fail silently.
-	*      return assertNever(arg);
-	*    }
-	*/
-	function assertNever(value, errorMessageOrNoThrow) {
-		if (typeof errorMessageOrNoThrow === "string") throw new Error(errorMessageOrNoThrow);
-		if (typeof errorMessageOrNoThrow === "function") throw new Error(errorMessageOrNoThrow(value));
-		if (errorMessageOrNoThrow) return value;
-		throw new Error("Unhandled discriminated union member: ".concat(JSON.stringify(value)));
-	}
-})))();
-var NOTHING = Symbol.for("immer-nothing");
-var DRAFTABLE = Symbol.for("immer-draftable");
-var DRAFT_STATE = Symbol.for("immer-state");
-var errors = process.env.NODE_ENV !== "production" ? [
-	function(plugin) {
-		return `The plugin for '${plugin}' has not been loaded into Immer. To enable the plugin, import and call \`enable${plugin}()\` when initializing your application.`;
-	},
-	function(thing) {
-		return `produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '${thing}'`;
-	},
-	"This object has been frozen and should not be mutated",
-	function(data) {
-		return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? " + data;
-	},
-	"An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.",
-	"Immer forbids circular references",
-	"The first or second argument to `produce` must be a function",
-	"The third argument to `produce` must be a function or undefined",
-	"First argument to `createDraft` must be a plain object, an array, or an immerable object",
-	"First argument to `finishDraft` must be a draft returned by `createDraft`",
-	function(thing) {
-		return `'current' expects a draft, got: ${thing}`;
-	},
-	"Object.defineProperty() cannot be used on an Immer draft",
-	"Object.setPrototypeOf() cannot be used on an Immer draft",
-	"Immer only supports deleting array indices",
-	"Immer only supports setting array indices and the 'length' property",
-	function(thing) {
-		return `'original' expects a draft, got: ${thing}`;
-	}
-] : [];
-function die(error, ...args) {
-	if (process.env.NODE_ENV !== "production") {
-		const e = errors[error];
-		const msg = typeof e === "function" ? e.apply(null, args) : e;
-		throw new Error(`[Immer] ${msg}`);
-	}
-	throw new Error(`[Immer] minified error nr: ${error}. Full error at: https://bit.ly/3cXEKWf`);
-}
-var getPrototypeOf = Object.getPrototypeOf;
-function isDraft(value) {
-	return !!value && !!value[DRAFT_STATE];
-}
-function isDraftable(value) {
-	if (!value) return false;
-	return isPlainObject(value) || Array.isArray(value) || !!value[DRAFTABLE] || !!value.constructor?.[DRAFTABLE] || isMap(value) || isSet(value);
-}
-var objectCtorString = Object.prototype.constructor.toString();
-function isPlainObject(value) {
-	if (!value || typeof value !== "object") return false;
-	const proto = getPrototypeOf(value);
-	if (proto === null) return true;
-	const Ctor = Object.hasOwnProperty.call(proto, "constructor") && proto.constructor;
-	if (Ctor === Object) return true;
-	return typeof Ctor == "function" && Function.toString.call(Ctor) === objectCtorString;
-}
-function each(obj, iter) {
-	if (getArchtype(obj) === 0) Reflect.ownKeys(obj).forEach((key) => {
-		iter(key, obj[key], obj);
-	});
-	else obj.forEach((entry, index) => iter(index, entry, obj));
-}
-function getArchtype(thing) {
-	const state = thing[DRAFT_STATE];
-	return state ? state.type_ : Array.isArray(thing) ? 1 : isMap(thing) ? 2 : isSet(thing) ? 3 : 0;
-}
-function has(thing, prop) {
-	return getArchtype(thing) === 2 ? thing.has(prop) : Object.prototype.hasOwnProperty.call(thing, prop);
-}
-function set(thing, propOrOldValue, value) {
-	const t = getArchtype(thing);
-	if (t === 2) thing.set(propOrOldValue, value);
-	else if (t === 3) thing.add(value);
-	else thing[propOrOldValue] = value;
-}
-function is(x, y) {
-	if (x === y) return x !== 0 || 1 / x === 1 / y;
-	else return x !== x && y !== y;
-}
-function isMap(target) {
-	return target instanceof Map;
-}
-function isSet(target) {
-	return target instanceof Set;
-}
-function latest(state) {
-	return state.copy_ || state.base_;
-}
-function shallowCopy(base, strict) {
-	if (isMap(base)) return new Map(base);
-	if (isSet(base)) return new Set(base);
-	if (Array.isArray(base)) return Array.prototype.slice.call(base);
-	const isPlain = isPlainObject(base);
-	if (strict === true || strict === "class_only" && !isPlain) {
-		const descriptors = Object.getOwnPropertyDescriptors(base);
-		delete descriptors[DRAFT_STATE];
-		let keys = Reflect.ownKeys(descriptors);
-		for (let i = 0; i < keys.length; i++) {
-			const key = keys[i];
-			const desc = descriptors[key];
-			if (desc.writable === false) {
-				desc.writable = true;
-				desc.configurable = true;
-			}
-			if (desc.get || desc.set) descriptors[key] = {
-				configurable: true,
-				writable: true,
-				enumerable: desc.enumerable,
-				value: base[key]
-			};
-		}
-		return Object.create(getPrototypeOf(base), descriptors);
-	} else {
-		const proto = getPrototypeOf(base);
-		if (proto !== null && isPlain) return { ...base };
-		const obj = Object.create(proto);
-		return Object.assign(obj, base);
-	}
-}
-function freeze(obj, deep = false) {
-	if (isFrozen(obj) || isDraft(obj) || !isDraftable(obj)) return obj;
-	if (getArchtype(obj) > 1) obj.set = obj.add = obj.clear = obj.delete = dontMutateFrozenCollections;
-	Object.freeze(obj);
-	if (deep) Object.entries(obj).forEach(([key, value]) => freeze(value, true));
-	return obj;
-}
-function dontMutateFrozenCollections() {
-	die(2);
-}
-function isFrozen(obj) {
-	return Object.isFrozen(obj);
-}
-var plugins = {};
-function getPlugin(pluginKey) {
-	const plugin = plugins[pluginKey];
-	if (!plugin) die(0, pluginKey);
-	return plugin;
-}
-var currentScope;
-function getCurrentScope() {
-	return currentScope;
-}
-function createScope(parent_, immer_) {
-	return {
-		drafts_: [],
-		parent_,
-		immer_,
-		canAutoFreeze_: true,
-		unfinalizedDrafts_: 0
-	};
-}
-function usePatchesInScope(scope, patchListener) {
-	if (patchListener) {
-		getPlugin("Patches");
-		scope.patches_ = [];
-		scope.inversePatches_ = [];
-		scope.patchListener_ = patchListener;
-	}
-}
-function revokeScope(scope) {
-	leaveScope(scope);
-	scope.drafts_.forEach(revokeDraft);
-	scope.drafts_ = null;
-}
-function leaveScope(scope) {
-	if (scope === currentScope) currentScope = scope.parent_;
-}
-function enterScope(immer2) {
-	return currentScope = createScope(currentScope, immer2);
-}
-function revokeDraft(draft) {
-	const state = draft[DRAFT_STATE];
-	if (state.type_ === 0 || state.type_ === 1) state.revoke_();
-	else state.revoked_ = true;
-}
-function processResult(result, scope) {
-	scope.unfinalizedDrafts_ = scope.drafts_.length;
-	const baseDraft = scope.drafts_[0];
-	if (result !== void 0 && result !== baseDraft) {
-		if (baseDraft[DRAFT_STATE].modified_) {
-			revokeScope(scope);
-			die(4);
-		}
-		if (isDraftable(result)) {
-			result = finalize(scope, result);
-			if (!scope.parent_) maybeFreeze(scope, result);
-		}
-		if (scope.patches_) getPlugin("Patches").generateReplacementPatches_(baseDraft[DRAFT_STATE].base_, result, scope.patches_, scope.inversePatches_);
-	} else result = finalize(scope, baseDraft, []);
-	revokeScope(scope);
-	if (scope.patches_) scope.patchListener_(scope.patches_, scope.inversePatches_);
-	return result !== NOTHING ? result : void 0;
-}
-function finalize(rootScope, value, path) {
-	if (isFrozen(value)) return value;
-	const state = value[DRAFT_STATE];
-	if (!state) {
-		each(value, (key, childValue) => finalizeProperty(rootScope, state, value, key, childValue, path));
-		return value;
-	}
-	if (state.scope_ !== rootScope) return value;
-	if (!state.modified_) {
-		maybeFreeze(rootScope, state.base_, true);
-		return state.base_;
-	}
-	if (!state.finalized_) {
-		state.finalized_ = true;
-		state.scope_.unfinalizedDrafts_--;
-		const result = state.copy_;
-		let resultEach = result;
-		let isSet2 = false;
-		if (state.type_ === 3) {
-			resultEach = new Set(result);
-			result.clear();
-			isSet2 = true;
-		}
-		each(resultEach, (key, childValue) => finalizeProperty(rootScope, state, result, key, childValue, path, isSet2));
-		maybeFreeze(rootScope, result, false);
-		if (path && rootScope.patches_) getPlugin("Patches").generatePatches_(state, path, rootScope.patches_, rootScope.inversePatches_);
-	}
-	return state.copy_;
-}
-function finalizeProperty(rootScope, parentState, targetObject, prop, childValue, rootPath, targetIsSet) {
-	if (process.env.NODE_ENV !== "production" && childValue === targetObject) die(5);
-	if (isDraft(childValue)) {
-		const res = finalize(rootScope, childValue, rootPath && parentState && parentState.type_ !== 3 && !has(parentState.assigned_, prop) ? rootPath.concat(prop) : void 0);
-		set(targetObject, prop, res);
-		if (isDraft(res)) rootScope.canAutoFreeze_ = false;
-		else return;
-	} else if (targetIsSet) targetObject.add(childValue);
-	if (isDraftable(childValue) && !isFrozen(childValue)) {
-		if (!rootScope.immer_.autoFreeze_ && rootScope.unfinalizedDrafts_ < 1) return;
-		finalize(rootScope, childValue);
-		if ((!parentState || !parentState.scope_.parent_) && typeof prop !== "symbol" && Object.prototype.propertyIsEnumerable.call(targetObject, prop)) maybeFreeze(rootScope, childValue);
-	}
-}
-function maybeFreeze(scope, value, deep = false) {
-	if (!scope.parent_ && scope.immer_.autoFreeze_ && scope.canAutoFreeze_) freeze(value, deep);
-}
-function createProxyProxy(base, parent) {
-	const isArray = Array.isArray(base);
-	const state = {
-		type_: isArray ? 1 : 0,
-		scope_: parent ? parent.scope_ : getCurrentScope(),
-		modified_: false,
-		finalized_: false,
-		assigned_: {},
-		parent_: parent,
-		base_: base,
-		draft_: null,
-		copy_: null,
-		revoke_: null,
-		isManual_: false
-	};
-	let target = state;
-	let traps = objectTraps;
-	if (isArray) {
-		target = [state];
-		traps = arrayTraps;
-	}
-	const { revoke, proxy } = Proxy.revocable(target, traps);
-	state.draft_ = proxy;
-	state.revoke_ = revoke;
-	return proxy;
-}
-var objectTraps = {
-	get(state, prop) {
-		if (prop === DRAFT_STATE) return state;
-		const source = latest(state);
-		if (!has(source, prop)) return readPropFromProto(state, source, prop);
-		const value = source[prop];
-		if (state.finalized_ || !isDraftable(value)) return value;
-		if (value === peek(state.base_, prop)) {
-			prepareCopy(state);
-			return state.copy_[prop] = createProxy(value, state);
-		}
-		return value;
-	},
-	has(state, prop) {
-		return prop in latest(state);
-	},
-	ownKeys(state) {
-		return Reflect.ownKeys(latest(state));
-	},
-	set(state, prop, value) {
-		const desc = getDescriptorFromProto(latest(state), prop);
-		if (desc?.set) {
-			desc.set.call(state.draft_, value);
-			return true;
-		}
-		if (!state.modified_) {
-			const current2 = peek(latest(state), prop);
-			const currentState = current2?.[DRAFT_STATE];
-			if (currentState && currentState.base_ === value) {
-				state.copy_[prop] = value;
-				state.assigned_[prop] = false;
-				return true;
-			}
-			if (is(value, current2) && (value !== void 0 || has(state.base_, prop))) return true;
-			prepareCopy(state);
-			markChanged(state);
-		}
-		if (state.copy_[prop] === value && (value !== void 0 || prop in state.copy_) || Number.isNaN(value) && Number.isNaN(state.copy_[prop])) return true;
-		state.copy_[prop] = value;
-		state.assigned_[prop] = true;
-		return true;
-	},
-	deleteProperty(state, prop) {
-		if (peek(state.base_, prop) !== void 0 || prop in state.base_) {
-			state.assigned_[prop] = false;
-			prepareCopy(state);
-			markChanged(state);
-		} else delete state.assigned_[prop];
-		if (state.copy_) delete state.copy_[prop];
-		return true;
-	},
-	getOwnPropertyDescriptor(state, prop) {
-		const owner = latest(state);
-		const desc = Reflect.getOwnPropertyDescriptor(owner, prop);
-		if (!desc) return desc;
-		return {
-			writable: true,
-			configurable: state.type_ !== 1 || prop !== "length",
-			enumerable: desc.enumerable,
-			value: owner[prop]
-		};
-	},
-	defineProperty() {
-		die(11);
-	},
-	getPrototypeOf(state) {
-		return getPrototypeOf(state.base_);
-	},
-	setPrototypeOf() {
-		die(12);
-	}
-};
-var arrayTraps = {};
-each(objectTraps, (key, fn) => {
-	arrayTraps[key] = function() {
-		arguments[0] = arguments[0][0];
-		return fn.apply(this, arguments);
-	};
-});
-arrayTraps.deleteProperty = function(state, prop) {
-	if (process.env.NODE_ENV !== "production" && isNaN(parseInt(prop))) die(13);
-	return arrayTraps.set.call(this, state, prop, void 0);
-};
-arrayTraps.set = function(state, prop, value) {
-	if (process.env.NODE_ENV !== "production" && prop !== "length" && isNaN(parseInt(prop))) die(14);
-	return objectTraps.set.call(this, state[0], prop, value, state[0]);
-};
-function peek(draft, prop) {
-	const state = draft[DRAFT_STATE];
-	return (state ? latest(state) : draft)[prop];
-}
-function readPropFromProto(state, source, prop) {
-	const desc = getDescriptorFromProto(source, prop);
-	return desc ? `value` in desc ? desc.value : desc.get?.call(state.draft_) : void 0;
-}
-function getDescriptorFromProto(source, prop) {
-	if (!(prop in source)) return void 0;
-	let proto = getPrototypeOf(source);
-	while (proto) {
-		const desc = Object.getOwnPropertyDescriptor(proto, prop);
-		if (desc) return desc;
-		proto = getPrototypeOf(proto);
-	}
-}
-function markChanged(state) {
-	if (!state.modified_) {
-		state.modified_ = true;
-		if (state.parent_) markChanged(state.parent_);
-	}
-}
-function prepareCopy(state) {
-	if (!state.copy_) state.copy_ = shallowCopy(state.base_, state.scope_.immer_.useStrictShallowCopy_);
-}
-var Immer2 = class {
-	constructor(config) {
-		this.autoFreeze_ = true;
-		this.useStrictShallowCopy_ = false;
-		/**
-		* The `produce` function takes a value and a "recipe function" (whose
-		* return value often depends on the base state). The recipe function is
-		* free to mutate its first argument however it wants. All mutations are
-		* only ever applied to a __copy__ of the base state.
-		*
-		* Pass only a function to create a "curried producer" which relieves you
-		* from passing the recipe function every time.
-		*
-		* Only plain objects and arrays are made mutable. All other objects are
-		* considered uncopyable.
-		*
-		* Note: This function is __bound__ to its `Immer` instance.
-		*
-		* @param {any} base - the initial state
-		* @param {Function} recipe - function that receives a proxy of the base state as first argument and which can be freely modified
-		* @param {Function} patchListener - optional function that will be called with all the patches produced here
-		* @returns {any} a new state, or the initial state if nothing was modified
-		*/
-		this.produce = (base, recipe, patchListener) => {
-			if (typeof base === "function" && typeof recipe !== "function") {
-				const defaultBase = recipe;
-				recipe = base;
-				const self = this;
-				return function curriedProduce(base2 = defaultBase, ...args) {
-					return self.produce(base2, (draft) => recipe.call(this, draft, ...args));
-				};
-			}
-			if (typeof recipe !== "function") die(6);
-			if (patchListener !== void 0 && typeof patchListener !== "function") die(7);
-			let result;
-			if (isDraftable(base)) {
-				const scope = enterScope(this);
-				const proxy = createProxy(base, void 0);
-				let hasError = true;
-				try {
-					result = recipe(proxy);
-					hasError = false;
-				} finally {
-					if (hasError) revokeScope(scope);
-					else leaveScope(scope);
-				}
-				usePatchesInScope(scope, patchListener);
-				return processResult(result, scope);
-			} else if (!base || typeof base !== "object") {
-				result = recipe(base);
-				if (result === void 0) result = base;
-				if (result === NOTHING) result = void 0;
-				if (this.autoFreeze_) freeze(result, true);
-				if (patchListener) {
-					const p = [];
-					const ip = [];
-					getPlugin("Patches").generateReplacementPatches_(base, result, p, ip);
-					patchListener(p, ip);
-				}
-				return result;
-			} else die(1, base);
-		};
-		this.produceWithPatches = (base, recipe) => {
-			if (typeof base === "function") return (state, ...args) => this.produceWithPatches(state, (draft) => base(draft, ...args));
-			let patches, inversePatches;
-			return [
-				this.produce(base, recipe, (p, ip) => {
-					patches = p;
-					inversePatches = ip;
-				}),
-				patches,
-				inversePatches
-			];
-		};
-		if (typeof config?.autoFreeze === "boolean") this.setAutoFreeze(config.autoFreeze);
-		if (typeof config?.useStrictShallowCopy === "boolean") this.setUseStrictShallowCopy(config.useStrictShallowCopy);
-	}
-	createDraft(base) {
-		if (!isDraftable(base)) die(8);
-		if (isDraft(base)) base = current(base);
-		const scope = enterScope(this);
-		const proxy = createProxy(base, void 0);
-		proxy[DRAFT_STATE].isManual_ = true;
-		leaveScope(scope);
-		return proxy;
-	}
-	finishDraft(draft, patchListener) {
-		const state = draft && draft[DRAFT_STATE];
-		if (!state || !state.isManual_) die(9);
-		const { scope_: scope } = state;
-		usePatchesInScope(scope, patchListener);
-		return processResult(void 0, scope);
-	}
-	/**
-	* Pass true to automatically freeze all copies created by Immer.
-	*
-	* By default, auto-freezing is enabled.
-	*/
-	setAutoFreeze(value) {
-		this.autoFreeze_ = value;
-	}
-	/**
-	* Pass true to enable strict shallow copy.
-	*
-	* By default, immer does not copy the object descriptors such as getter, setter and non-enumrable properties.
-	*/
-	setUseStrictShallowCopy(value) {
-		this.useStrictShallowCopy_ = value;
-	}
-	applyPatches(base, patches) {
-		let i;
-		for (i = patches.length - 1; i >= 0; i--) {
-			const patch = patches[i];
-			if (patch.path.length === 0 && patch.op === "replace") {
-				base = patch.value;
-				break;
-			}
-		}
-		if (i > -1) patches = patches.slice(i + 1);
-		const applyPatchesImpl = getPlugin("Patches").applyPatches_;
-		if (isDraft(base)) return applyPatchesImpl(base, patches);
-		return this.produce(base, (draft) => applyPatchesImpl(draft, patches));
-	}
-};
-function createProxy(value, parent) {
-	const draft = isMap(value) ? getPlugin("MapSet").proxyMap_(value, parent) : isSet(value) ? getPlugin("MapSet").proxySet_(value, parent) : createProxyProxy(value, parent);
-	(parent ? parent.scope_ : getCurrentScope()).drafts_.push(draft);
-	return draft;
-}
-function current(value) {
-	if (!isDraft(value)) die(10, value);
-	return currentImpl(value);
-}
-function currentImpl(value) {
-	if (!isDraftable(value) || isFrozen(value)) return value;
-	const state = value[DRAFT_STATE];
-	let copy;
-	if (state) {
-		if (!state.modified_) return state.base_;
-		state.finalized_ = true;
-		copy = shallowCopy(value, state.scope_.immer_.useStrictShallowCopy_);
-	} else copy = shallowCopy(value, true);
-	each(copy, (key, childValue) => {
-		set(copy, key, currentImpl(childValue));
-	});
-	if (state) state.finalized_ = false;
-	return copy;
-}
-var immer = new Immer2();
-var produce = immer.produce;
-immer.produceWithPatches.bind(immer);
-immer.setAutoFreeze.bind(immer);
-immer.setUseStrictShallowCopy.bind(immer);
-immer.applyPatches.bind(immer);
-immer.createDraft.bind(immer);
-immer.finishDraft.bind(immer);
-//#endregion
-//#region src/index.ts
-/**
-* 创建预览 iframe 控制器
-* @param options - 创建控制器的选项
-* @returns 预览 iframe 控制器实例
-*/
-function createController(options) {
-	const controller = new PreviewIframeControllerImpl(options);
-	window.__PREVIEWJS_CONTROLLER__ = controller;
-	return controller;
-}
-/**
-* 预览 iframe 控制器的实现类
-*/
-var PreviewIframeControllerImpl = class {
-	/**
-	* 构造函数
-	* @param options - 创建控制器的选项
-	*/
-	constructor(options) {
-		this.options = options;
-		this.lastRender = null;
-		this.bootstrapStatus = "pending";
-		this.state = {
-			loading: false,
-			rendered: false,
-			errors: [],
-			logs: [],
-			actions: []
-		};
-		this.onViteBeforeUpdateLogsLength = 0;
-		this.onViteBeforeUpdateErrorsLength = 0;
-	}
-	/**
-	* 渲染预览
-	* @param previewableId - 可预览项的 ID
-	* @param options - 渲染选项
-	*/
-	async render(previewableId, options) {
-		const previousRender = this.lastRender;
-		this.lastRender = {
-			previewableId,
-			options
-		};
-		if (previousRender?.previewableId !== previewableId || this.bootstrapStatus === "failure") {
-			this.resetIframe(previewableId);
-			return;
-		}
-		const iframeWindow = this.options.getIframe()?.contentWindow;
-		if (!iframeWindow || this.bootstrapStatus !== "success") return;
-		if (!iframeWindow.__PREVIEWJS_IFRAME__.render) {
-			iframeWindow.__PREVIEWJS_IFRAME__.reportEvent({
-				kind: "error",
-				source: "renderer",
-				message: "Iframe was bootstrapped but not fully initialised."
-			});
-			return;
-		}
-		const renderPromise = iframeWindow.__PREVIEWJS_IFRAME__.render(options);
-		this.clearExpectRenderTimeout();
-		this.expectRenderTimeout = setTimeout(() => {
-			console.warn("Expected render did not occur after 5 seconds. Reloading iframe...");
-			this.resetIframe(previewableId);
-		}, 5e3);
-		await renderPromise;
-	}
-	/**
-	* 重置 iframe
-	* @param id - 可预览项的 ID
-	*/
-	resetIframe(id) {
-		const iframe = this.options.getIframe();
-		if (!iframe) return;
-		iframe.src = `/${id}/?t=${Date.now()}`;
-		this.bootstrapStatus = "not-started";
-	}
-	/**
-	* 处理预览事件
-	* @param event - 预览事件对象
-	*/
-	onPreviewEvent(event) {
-		if (this.bootstrapStatus === "not-started") {
-			if (event.kind !== "bootstrapping") return;
-		}
-		switch (event.kind) {
-			case "bootstrapping":
-				this.bootstrapStatus = "pending";
-				break;
-			case "bootstrapped":
-				this.bootstrapStatus = "success";
-				this.onViteBeforeUpdateLogsLength = 0;
-				this.onViteBeforeUpdateErrorsLength = 0;
-				this.updateState((state) => {
-					state.loading = true;
-					state.rendered = false;
-					state.errors = [];
-					state.logs = [];
-				});
-				if (this.lastRender) this.render(this.lastRender.previewableId, this.lastRender.options).catch(console.error);
-				break;
-			case "vite-before-reload":
-				this.updateState((state) => {
-					state.logs = [];
-					state.errors = [];
-				});
-				if (this.lastRender) this.resetIframe(this.lastRender.previewableId);
-				break;
-			case "vite-before-update":
-				this.onViteBeforeUpdateLogsLength = this.state.logs.length;
-				this.updateState((state) => {
-					for (const update of event.payload.updates) state.errors = state.errors.filter((e) => e.source !== "hmr" || e.modulePath !== update.acceptedPath);
-				});
-				this.onViteBeforeUpdateErrorsLength = this.state.errors.length;
-				break;
-			case "vite-invalidate":
-				this.updateState((state) => {
-					this.onViteBeforeUpdateLogsLength = 0;
-					this.onViteBeforeUpdateErrorsLength = 0;
-					state.logs = [];
-				});
-				break;
-			case "vite-after-update":
-				this.updateState((state) => {
-					const logsSliceStart = this.onViteBeforeUpdateLogsLength;
-					const errorsSliceStart = this.onViteBeforeUpdateErrorsLength;
-					this.onViteBeforeUpdateLogsLength = 0;
-					this.onViteBeforeUpdateErrorsLength = 0;
-					state.logs = state.logs.slice(logsSliceStart);
-					state.errors = state.errors.slice(errorsSliceStart);
-				});
-				break;
-			case "before-render":
-				this.updateState((state) => {
-					this.onViteBeforeUpdateLogsLength = 0;
-					state.logs = [];
-				});
-				break;
-			case "rendered":
-				this.updateState((state) => {
-					state.loading = false;
-					state.rendered = true;
-				});
-				this.clearExpectRenderTimeout();
-				break;
-			case "error":
-				this.updateState((state) => {
-					state.loading = false;
-					if (event.source === "vite" && event.message.includes("Failed to fetch dynamically imported module") && state.errors.find((e) => e.source === "vite")) return;
-					state.errors = state.errors.filter((e) => e.source !== event.source);
-					state.errors.push(event);
-				});
-				this.clearExpectRenderTimeout();
-				if (this.bootstrapStatus === "pending") this.bootstrapStatus = "failure";
-				break;
-			case "log-message":
-				this.updateState((state) => {
-					state.logs.push(event);
-				});
-				break;
-			case "action":
-				this.updateState((state) => {
-					state.actions.push(event);
-				});
-				break;
-			case "toggle-inspect": {
-				const window = this.options.getIframe()?.contentWindow;
-				if (window) {
-					window.__PREVIEWJS_IFRAME__.toggleInspect = event.enabled;
-					window.__PREVIEWJS_IFRAME__.refresh({ refetchWrapperModule: true });
-				}
-				break;
-			}
-			default: throw (0, import_assert_never.assertNever)(event);
-		}
-	}
-	/**
-	* 更新状态
-	* @param stateModifier - 状态修改函数
-	*/
-	updateState(stateModifier) {
-		this.state = produce(this.state, stateModifier);
-		this.options.onStateUpdate?.(this.state);
-	}
-	/**
-	* 清除期望渲染的超时定时器
-	*/
-	clearExpectRenderTimeout() {
-		if (this.expectRenderTimeout) {
-			clearTimeout(this.expectRenderTimeout);
-			this.expectRenderTimeout = null;
-		}
-	}
-};
-//#endregion
-export { createController };
+var e=((e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports))((e=>{Object.defineProperty(e,`__esModule`,{value:!0}),e.assertNever=t;function t(e,t){if(typeof t==`string`)throw Error(t);if(typeof t==`function`)throw Error(t(e));if(t)return e;throw Error(`Unhandled discriminated union member: ${JSON.stringify(e)}`)}}))(),t=Symbol.for(`immer-nothing`),n=Symbol.for(`immer-draftable`),r=Symbol.for(`immer-state`),i=process.env.NODE_ENV===`production`?[]:[function(e){return`The plugin for '${e}' has not been loaded into Immer. To enable the plugin, import and call \`enable${e}()\` when initializing your application.`},function(e){return`produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '${e}'`},`This object has been frozen and should not be mutated`,function(e){return`Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? `+e},`An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.`,`Immer forbids circular references`,"The first or second argument to `produce` must be a function","The third argument to `produce` must be a function or undefined","First argument to `createDraft` must be a plain object, an array, or an immerable object","First argument to `finishDraft` must be a draft returned by `createDraft`",function(e){return`'current' expects a draft, got: ${e}`},`Object.defineProperty() cannot be used on an Immer draft`,`Object.setPrototypeOf() cannot be used on an Immer draft`,`Immer only supports deleting array indices`,`Immer only supports setting array indices and the 'length' property`,function(e){return`'original' expects a draft, got: ${e}`}];function a(e,...t){if(process.env.NODE_ENV!==`production`){let n=i[e],r=typeof n==`function`?n.apply(null,t):n;throw Error(`[Immer] ${r}`)}throw Error(`[Immer] minified error nr: ${e}. Full error at: https://bit.ly/3cXEKWf`)}var o=Object.getPrototypeOf;function s(e){return!!e&&!!e[r]}function c(e){return e?u(e)||Array.isArray(e)||!!e[n]||!!e.constructor?.[n]||g(e)||_(e):!1}var l=Object.prototype.constructor.toString();function u(e){if(!e||typeof e!=`object`)return!1;let t=o(e);if(t===null)return!0;let n=Object.hasOwnProperty.call(t,`constructor`)&&t.constructor;return n===Object?!0:typeof n==`function`&&Function.toString.call(n)===l}function d(e,t){f(e)===0?Reflect.ownKeys(e).forEach(n=>{t(n,e[n],e)}):e.forEach((n,r)=>t(r,n,e))}function f(e){let t=e[r];return t?t.type_:Array.isArray(e)?1:g(e)?2:_(e)?3:0}function p(e,t){return f(e)===2?e.has(t):Object.prototype.hasOwnProperty.call(e,t)}function m(e,t,n){let r=f(e);r===2?e.set(t,n):r===3?e.add(n):e[t]=n}function h(e,t){return e===t?e!==0||1/e==1/t:e!==e&&t!==t}function g(e){return e instanceof Map}function _(e){return e instanceof Set}function v(e){return e.copy_||e.base_}function y(e,t){if(g(e))return new Map(e);if(_(e))return new Set(e);if(Array.isArray(e))return Array.prototype.slice.call(e);let n=u(e);if(t===!0||t===`class_only`&&!n){let t=Object.getOwnPropertyDescriptors(e);delete t[r];let n=Reflect.ownKeys(t);for(let r=0;r<n.length;r++){let i=n[r],a=t[i];a.writable===!1&&(a.writable=!0,a.configurable=!0),(a.get||a.set)&&(t[i]={configurable:!0,writable:!0,enumerable:a.enumerable,value:e[i]})}return Object.create(o(e),t)}else{let t=o(e);if(t!==null&&n)return{...e};let r=Object.create(t);return Object.assign(r,e)}}function b(e,t=!1){return S(e)||s(e)||!c(e)?e:(f(e)>1&&(e.set=e.add=e.clear=e.delete=x),Object.freeze(e),t&&Object.entries(e).forEach(([e,t])=>b(t,!0)),e)}function x(){a(2)}function S(e){return Object.isFrozen(e)}var C={};function w(e){let t=C[e];return t||a(0,e),t}var T;function E(){return T}function D(e,t){return{drafts_:[],parent_:e,immer_:t,canAutoFreeze_:!0,unfinalizedDrafts_:0}}function O(e,t){t&&(w(`Patches`),e.patches_=[],e.inversePatches_=[],e.patchListener_=t)}function k(e){A(e),e.drafts_.forEach(M),e.drafts_=null}function A(e){e===T&&(T=e.parent_)}function j(e){return T=D(T,e)}function M(e){let t=e[r];t.type_===0||t.type_===1?t.revoke_():t.revoked_=!0}function N(e,n){n.unfinalizedDrafts_=n.drafts_.length;let i=n.drafts_[0];return e!==void 0&&e!==i?(i[r].modified_&&(k(n),a(4)),c(e)&&(e=P(n,e),n.parent_||I(n,e)),n.patches_&&w(`Patches`).generateReplacementPatches_(i[r].base_,e,n.patches_,n.inversePatches_)):e=P(n,i,[]),k(n),n.patches_&&n.patchListener_(n.patches_,n.inversePatches_),e===t?void 0:e}function P(e,t,n){if(S(t))return t;let i=t[r];if(!i)return d(t,(r,a)=>F(e,i,t,r,a,n)),t;if(i.scope_!==e)return t;if(!i.modified_)return I(e,i.base_,!0),i.base_;if(!i.finalized_){i.finalized_=!0,i.scope_.unfinalizedDrafts_--;let t=i.copy_,r=t,a=!1;i.type_===3&&(r=new Set(t),t.clear(),a=!0),d(r,(r,o)=>F(e,i,t,r,o,n,a)),I(e,t,!1),n&&e.patches_&&w(`Patches`).generatePatches_(i,n,e.patches_,e.inversePatches_)}return i.copy_}function F(e,t,n,r,i,o,l){if(process.env.NODE_ENV!==`production`&&i===n&&a(5),s(i)){let a=P(e,i,o&&t&&t.type_!==3&&!p(t.assigned_,r)?o.concat(r):void 0);if(m(n,r,a),s(a))e.canAutoFreeze_=!1;else return}else l&&n.add(i);if(c(i)&&!S(i)){if(!e.immer_.autoFreeze_&&e.unfinalizedDrafts_<1)return;P(e,i),(!t||!t.scope_.parent_)&&typeof r!=`symbol`&&Object.prototype.propertyIsEnumerable.call(n,r)&&I(e,i)}}function I(e,t,n=!1){!e.parent_&&e.immer_.autoFreeze_&&e.canAutoFreeze_&&b(t,n)}function L(e,t){let n=Array.isArray(e),r={type_:n?1:0,scope_:t?t.scope_:E(),modified_:!1,finalized_:!1,assigned_:{},parent_:t,base_:e,draft_:null,copy_:null,revoke_:null,isManual_:!1},i=r,a=R;n&&(i=[r],a=z);let{revoke:o,proxy:s}=Proxy.revocable(i,a);return r.draft_=s,r.revoke_=o,s}var R={get(e,t){if(t===r)return e;let n=v(e);if(!p(n,t))return V(e,n,t);let i=n[t];return e.finalized_||!c(i)?i:i===B(e.base_,t)?(W(e),e.copy_[t]=K(i,e)):i},has(e,t){return t in v(e)},ownKeys(e){return Reflect.ownKeys(v(e))},set(e,t,n){let i=H(v(e),t);if(i?.set)return i.set.call(e.draft_,n),!0;if(!e.modified_){let i=B(v(e),t),a=i?.[r];if(a&&a.base_===n)return e.copy_[t]=n,e.assigned_[t]=!1,!0;if(h(n,i)&&(n!==void 0||p(e.base_,t)))return!0;W(e),U(e)}return e.copy_[t]===n&&(n!==void 0||t in e.copy_)||Number.isNaN(n)&&Number.isNaN(e.copy_[t])?!0:(e.copy_[t]=n,e.assigned_[t]=!0,!0)},deleteProperty(e,t){return B(e.base_,t)!==void 0||t in e.base_?(e.assigned_[t]=!1,W(e),U(e)):delete e.assigned_[t],e.copy_&&delete e.copy_[t],!0},getOwnPropertyDescriptor(e,t){let n=v(e),r=Reflect.getOwnPropertyDescriptor(n,t);return r&&{writable:!0,configurable:e.type_!==1||t!==`length`,enumerable:r.enumerable,value:n[t]}},defineProperty(){a(11)},getPrototypeOf(e){return o(e.base_)},setPrototypeOf(){a(12)}},z={};d(R,(e,t)=>{z[e]=function(){return arguments[0]=arguments[0][0],t.apply(this,arguments)}}),z.deleteProperty=function(e,t){return process.env.NODE_ENV!==`production`&&isNaN(parseInt(t))&&a(13),z.set.call(this,e,t,void 0)},z.set=function(e,t,n){return process.env.NODE_ENV!==`production`&&t!==`length`&&isNaN(parseInt(t))&&a(14),R.set.call(this,e[0],t,n,e[0])};function B(e,t){let n=e[r];return(n?v(n):e)[t]}function V(e,t,n){let r=H(t,n);return r?`value`in r?r.value:r.get?.call(e.draft_):void 0}function H(e,t){if(!(t in e))return;let n=o(e);for(;n;){let e=Object.getOwnPropertyDescriptor(n,t);if(e)return e;n=o(n)}}function U(e){e.modified_||(e.modified_=!0,e.parent_&&U(e.parent_))}function W(e){e.copy_||=y(e.base_,e.scope_.immer_.useStrictShallowCopy_)}var G=class{constructor(e){this.autoFreeze_=!0,this.useStrictShallowCopy_=!1,this.produce=(e,n,r)=>{if(typeof e==`function`&&typeof n!=`function`){let t=n;n=e;let r=this;return function(e=t,...i){return r.produce(e,e=>n.call(this,e,...i))}}typeof n!=`function`&&a(6),r!==void 0&&typeof r!=`function`&&a(7);let i;if(c(e)){let t=j(this),a=K(e,void 0),o=!0;try{i=n(a),o=!1}finally{o?k(t):A(t)}return O(t,r),N(i,t)}else if(!e||typeof e!=`object`){if(i=n(e),i===void 0&&(i=e),i===t&&(i=void 0),this.autoFreeze_&&b(i,!0),r){let t=[],n=[];w(`Patches`).generateReplacementPatches_(e,i,t,n),r(t,n)}return i}else a(1,e)},this.produceWithPatches=(e,t)=>{if(typeof e==`function`)return(t,...n)=>this.produceWithPatches(t,t=>e(t,...n));let n,r;return[this.produce(e,t,(e,t)=>{n=e,r=t}),n,r]},typeof e?.autoFreeze==`boolean`&&this.setAutoFreeze(e.autoFreeze),typeof e?.useStrictShallowCopy==`boolean`&&this.setUseStrictShallowCopy(e.useStrictShallowCopy)}createDraft(e){c(e)||a(8),s(e)&&(e=q(e));let t=j(this),n=K(e,void 0);return n[r].isManual_=!0,A(t),n}finishDraft(e,t){let n=e&&e[r];(!n||!n.isManual_)&&a(9);let{scope_:i}=n;return O(i,t),N(void 0,i)}setAutoFreeze(e){this.autoFreeze_=e}setUseStrictShallowCopy(e){this.useStrictShallowCopy_=e}applyPatches(e,t){let n;for(n=t.length-1;n>=0;n--){let r=t[n];if(r.path.length===0&&r.op===`replace`){e=r.value;break}}n>-1&&(t=t.slice(n+1));let r=w(`Patches`).applyPatches_;return s(e)?r(e,t):this.produce(e,e=>r(e,t))}};function K(e,t){let n=g(e)?w(`MapSet`).proxyMap_(e,t):_(e)?w(`MapSet`).proxySet_(e,t):L(e,t);return(t?t.scope_:E()).drafts_.push(n),n}function q(e){return s(e)||a(10,e),J(e)}function J(e){if(!c(e)||S(e))return e;let t=e[r],n;if(t){if(!t.modified_)return t.base_;t.finalized_=!0,n=y(e,t.scope_.immer_.useStrictShallowCopy_)}else n=y(e,!0);return d(n,(e,t)=>{m(n,e,J(t))}),t&&(t.finalized_=!1),n}var Y=new G,X=Y.produce;Y.produceWithPatches.bind(Y),Y.setAutoFreeze.bind(Y),Y.setUseStrictShallowCopy.bind(Y),Y.applyPatches.bind(Y),Y.createDraft.bind(Y),Y.finishDraft.bind(Y);function Z(e){let t=new Q(e);return window.__PREVIEWJS_CONTROLLER__=t,t}var Q=class{constructor(e){this.options=e,this.lastRender=null,this.bootstrapStatus=`pending`,this.state={loading:!1,rendered:!1,errors:[],logs:[],actions:[]},this.onViteBeforeUpdateLogsLength=0,this.onViteBeforeUpdateErrorsLength=0}async render(e,t){let n=this.lastRender;if(this.lastRender={previewableId:e,options:t},n?.previewableId!==e||this.bootstrapStatus===`failure`){this.resetIframe(e);return}let r=this.options.getIframe()?.contentWindow;if(!r||this.bootstrapStatus!==`success`)return;if(!r.__PREVIEWJS_IFRAME__.render){r.__PREVIEWJS_IFRAME__.reportEvent({kind:`error`,source:`renderer`,message:`Iframe was bootstrapped but not fully initialised.`});return}let i=r.__PREVIEWJS_IFRAME__.render(t);this.clearExpectRenderTimeout(),this.expectRenderTimeout=setTimeout(()=>{console.warn(`Expected render did not occur after 5 seconds. Reloading iframe...`),this.resetIframe(e)},5e3),await i}resetIframe(e){let t=this.options.getIframe();t&&(t.src=`/${e}/?t=${Date.now()}`,this.bootstrapStatus=`not-started`)}onPreviewEvent(t){if(!(this.bootstrapStatus===`not-started`&&t.kind!==`bootstrapping`))switch(t.kind){case`bootstrapping`:this.bootstrapStatus=`pending`;break;case`bootstrapped`:this.bootstrapStatus=`success`,this.onViteBeforeUpdateLogsLength=0,this.onViteBeforeUpdateErrorsLength=0,this.updateState(e=>{e.loading=!0,e.rendered=!1,e.errors=[],e.logs=[]}),this.lastRender&&this.render(this.lastRender.previewableId,this.lastRender.options).catch(console.error);break;case`vite-before-reload`:this.updateState(e=>{e.logs=[],e.errors=[]}),this.lastRender&&this.resetIframe(this.lastRender.previewableId);break;case`vite-before-update`:this.onViteBeforeUpdateLogsLength=this.state.logs.length,this.updateState(e=>{for(let n of t.payload.updates)e.errors=e.errors.filter(e=>e.source!==`hmr`||e.modulePath!==n.acceptedPath)}),this.onViteBeforeUpdateErrorsLength=this.state.errors.length;break;case`vite-invalidate`:this.updateState(e=>{this.onViteBeforeUpdateLogsLength=0,this.onViteBeforeUpdateErrorsLength=0,e.logs=[]});break;case`vite-after-update`:this.updateState(e=>{let t=this.onViteBeforeUpdateLogsLength,n=this.onViteBeforeUpdateErrorsLength;this.onViteBeforeUpdateLogsLength=0,this.onViteBeforeUpdateErrorsLength=0,e.logs=e.logs.slice(t),e.errors=e.errors.slice(n)});break;case`before-render`:this.updateState(e=>{this.onViteBeforeUpdateLogsLength=0,e.logs=[]});break;case`rendered`:this.updateState(e=>{e.loading=!1,e.rendered=!0}),this.clearExpectRenderTimeout();break;case`error`:this.updateState(e=>{e.loading=!1,!(t.source===`vite`&&t.message.includes(`Failed to fetch dynamically imported module`)&&e.errors.find(e=>e.source===`vite`))&&(e.errors=e.errors.filter(e=>e.source!==t.source),e.errors.push(t))}),this.clearExpectRenderTimeout(),this.bootstrapStatus===`pending`&&(this.bootstrapStatus=`failure`);break;case`log-message`:this.updateState(e=>{e.logs.push(t)});break;case`action`:this.updateState(e=>{e.actions.push(t)});break;case`toggle-inspect`:{let e=this.options.getIframe()?.contentWindow;e&&(e.__PREVIEWJS_IFRAME__.toggleInspect=t.enabled,e.__PREVIEWJS_IFRAME__.refresh({refetchWrapperModule:!0}));break}default:throw(0,e.assertNever)(t)}}updateState(e){this.state=X(this.state,e),this.options.onStateUpdate?.(this.state)}clearExpectRenderTimeout(){this.expectRenderTimeout&&=(clearTimeout(this.expectRenderTimeout),null)}};export{Z as createController};

package/package.json

@@ -1,22 +1,29 @@
 {
   "name": "@cfp-studio/iframe",
-  "version": "18.2.0",
+  "version": "18.3.0",
   "license": "MIT",
-  "type": "module",
-  "main": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
   "files": [
     "dist",
     "preview"
   ],
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "dependencies": {
+    "@cfp-studio/fiber-reader": "0.2.0"
+  },
   "devDependencies": {
     "assert-never": "1.4.0",
     "immer": "10.1.1",
     "typescript": "5.9.3",
     "vite": "6.4.5"
   },
-  "dependencies": {
-    "@cfp-studio/fiber-reader": "0.1.0"
+  "engines": {
+    "node": ">=20"
+  },
+  "cfp": {
+    "domain": "web-preview",
+    "layer": "engine"
   },
   "scripts": {
     "build": "tsdown",

package/preview/__previewjs_internal__/runtime-bridge.ts

@@ -20,6 +20,7 @@ import {
 	type RuntimeNode,
 	type RuntimeNodeDetail,
 	type RuntimeSnapshot,
+	summarizeComputedStyle,
 	type RuntimeSourceLocation,
 } from "@cfp-studio/fiber-reader";
 
@@ -101,6 +102,15 @@ export function setupRuntimeBridge(): void {
 			const runtimeNodeId = String(event.data.runtimeNodeId ?? "");
 			const detail = collectRuntimeNodeDetail(runtimeNodeId);
 			publishToHost({ kind: "cfp-runtime-detail", requestId, detail });
+		} else if (event.data?.kind === "cfp:computed-style") {
+			// Computed Styles 视图的订阅：只在该视图可见且选中节点时建立，
+			// 之后由 MutationObserver + resize 触发增量推送（见 subscribeComputedStyle）。
+			const runtimeNodeId = String(event.data.runtimeNodeId ?? "");
+			if (event.data.subscribe === true && runtimeNodeId) {
+				subscribeComputedStyle(runtimeNodeId);
+			} else {
+				unsubscribeComputedStyle();
+			}
 		}
 	});
 	document.addEventListener("click", handleInspectClick, true);
@@ -210,6 +220,10 @@ export function publishRuntimeSnapshot(): void {
 	}
 	const snapshot = collectRuntimeSnapshot();
 	publishToHost({ kind: "cfp-runtime-snapshot", snapshot });
+	// 重新渲染会重建 nodeElements：订阅中的节点要么拿到新值，要么显式告知已消失。
+	if (computedStyleSubscription) {
+		scheduleComputedStylePublish();
+	}
 }
 
 /**
@@ -341,6 +355,7 @@ function collectRuntimeNodeDetail(runtimeNodeId: string): RuntimeNodeDetail | un
 			scrollY: window.scrollY,
 			devicePixelRatio: window.devicePixelRatio,
 		},
+		computedStyle: summarizeComputedStyle(window.getComputedStyle(element)),
 		dom: {
 			tag: element.tagName.toLowerCase(),
 			id: element.id || undefined,
@@ -359,6 +374,126 @@ function collectRuntimeNodeDetail(runtimeNodeId: string): RuntimeNodeDetail | un
 	};
 }
 
+/**
+ * Computed Styles 视图的订阅态。
+ *
+ * 为什么不是"每次请求返回一次"：视图要跟着 DOM / 样式变化刷新（Codux 的
+ * computed-styles 也是订阅式）。这里用 MutationObserver + resize，节流成
+ * "120ms 静默后推一次、最长 600ms 必推"，并且只在摘要真的变了才发（避免噪声）。
+ */
+interface ComputedStyleSubscription {
+	runtimeNodeId: string;
+	/** 上次推送的摘要（JSON），用于去重。 */
+	lastPayload: string;
+	timer: number | undefined;
+	firstScheduledAt: number | undefined;
+}
+
+const COMPUTED_STYLE_DEBOUNCE_MS = 120;
+const COMPUTED_STYLE_MAX_DELAY_MS = 600;
+
+let computedStyleSubscription: ComputedStyleSubscription | undefined;
+let computedStyleObserver: MutationObserver | undefined;
+let computedStyleResizeListener = false;
+
+function publishComputedStyle(subscription: ComputedStyleSubscription): void {
+	const element = nodeElements.get(subscription.runtimeNodeId);
+	const computedStyle = element ? summarizeComputedStyle(window.getComputedStyle(element)) : null;
+	const payload = JSON.stringify(computedStyle);
+	if (payload === subscription.lastPayload) {
+		return;
+	}
+	subscription.lastPayload = payload;
+	publishToHost({
+		kind: "cfp-computed-style",
+		runtimeNodeId: subscription.runtimeNodeId,
+		computedStyle,
+		capturedAt: Date.now(),
+	});
+}
+
+function scheduleComputedStylePublish(): void {
+	const subscription = computedStyleSubscription;
+	if (!subscription) {
+		return;
+	}
+	const now = Date.now();
+	subscription.firstScheduledAt ??= now;
+	if (subscription.timer !== undefined) {
+		window.clearTimeout(subscription.timer);
+	}
+	const remaining = COMPUTED_STYLE_MAX_DELAY_MS - (now - subscription.firstScheduledAt);
+	const delay = Math.max(0, Math.min(COMPUTED_STYLE_DEBOUNCE_MS, remaining));
+	subscription.timer = window.setTimeout(() => {
+		if (computedStyleSubscription !== subscription) {
+			return;
+		}
+		subscription.timer = undefined;
+		subscription.firstScheduledAt = undefined;
+		publishComputedStyle(subscription);
+	}, delay);
+}
+
+function isOverlayMutation(record: MutationRecord): boolean {
+	const target = record.target;
+	if (target instanceof Element) {
+		return isOverlayChrome(target);
+	}
+	const parent = target.parentElement;
+	return Boolean(parent && isOverlayChrome(parent));
+}
+
+function subscribeComputedStyle(runtimeNodeId: string): void {
+	if (computedStyleSubscription?.runtimeNodeId === runtimeNodeId) {
+		return;
+	}
+	unsubscribeComputedStyle();
+	const subscription: ComputedStyleSubscription = {
+		runtimeNodeId,
+		lastPayload: "",
+		timer: undefined,
+		firstScheduledAt: undefined,
+	};
+	computedStyleSubscription = subscription;
+	if (!computedStyleObserver && typeof MutationObserver !== "undefined") {
+		computedStyleObserver = new MutationObserver((records) => {
+			// inspect 悬停会让 overlay 自己变形；shadow root 内的变更本来就不上报，
+			// 但 host 节点的属性变更会——这类变更不影响被选节点的 computed style。
+			if (records.every(isOverlayMutation)) {
+				return;
+			}
+			scheduleComputedStylePublish();
+		});
+		// 观察整棵树（父/兄弟节点变化也会改 computed style）；overlay 自身的变更
+		// 由 isOverlayChrome 过滤，避免 inspect 悬停时无谓重算。
+		computedStyleObserver.observe(document.documentElement, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			characterData: true,
+		});
+	}
+	if (!computedStyleResizeListener) {
+		window.addEventListener("resize", scheduleComputedStylePublish);
+		computedStyleResizeListener = true;
+	}
+	publishComputedStyle(subscription);
+}
+
+function unsubscribeComputedStyle(): void {
+	const subscription = computedStyleSubscription;
+	if (subscription?.timer !== undefined) {
+		window.clearTimeout(subscription.timer);
+	}
+	computedStyleSubscription = undefined;
+	computedStyleObserver?.disconnect();
+	computedStyleObserver = undefined;
+	if (computedStyleResizeListener) {
+		window.removeEventListener("resize", scheduleComputedStylePublish);
+		computedStyleResizeListener = false;
+	}
+}
+
 /**
  * Turn a fiber chain into packet frames, root → node.
  *