@cfp-studio/iframe 18.3.0 → 18.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfp-studio/iframe",
-  "version": "18.3.0",
+  "version": "18.4.0",
   "license": "MIT",
   "files": [
     "dist",
@@ -10,7 +10,7 @@
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "dependencies": {
-    "@cfp-studio/fiber-reader": "0.2.0"
+    "@cfp-studio/fiber-reader": "0.3.0"
   },
   "devDependencies": {
     "assert-never": "1.4.0",

package/preview/__previewjs_internal__/runtime-bridge.ts

@@ -20,6 +20,7 @@ import {
 	type RuntimeNode,
 	type RuntimeNodeDetail,
 	type RuntimeSnapshot,
+	defaultStyleKeys,
 	summarizeComputedStyle,
 	type RuntimeSourceLocation,
 } from "@cfp-studio/fiber-reader";
@@ -332,6 +333,41 @@ function walk(element: Element | null, parentId: string | undefined, path: strin
 	return truncated;
 }
 
+/**
+ * 初始值基线缓存：tag → 参考元素的 computed style 摘要。
+ *
+ * 参考元素放在 shadow root 里（作者样式匹配不到影子树内部），并显式 `all: initial`，
+ * 因此拿到的是**纯 CSS 初始值**：不继承页面、也不被任何作者规则命中。
+ */
+const baselineCache = new Map<string, Record<string, string>>();
+let baselineHost: HTMLElement | undefined;
+
+function measureBaseline(tagName: string): Record<string, string> {
+	const tag = tagName.toLowerCase();
+	const cached = baselineCache.get(tag);
+	if (cached) {
+		return cached;
+	}
+	if (!baselineHost) {
+		baselineHost = document.createElement("div");
+		baselineHost.setAttribute("aria-hidden", "true");
+		baselineHost.style.cssText =
+			"position:absolute;left:-9999px;top:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;";
+		document.body.appendChild(baselineHost);
+	}
+	const root = baselineHost.shadowRoot ?? baselineHost.attachShadow({ mode: "open" });
+	root.replaceChildren();
+	const reference = document.createElement(tag);
+	// `all: initial` 让参考元素回到 **CSS 初始值**（不继承宿主、也不被作者规则命中）：
+	// 否则作者写 `div { letter-spacing: 2px }` 时，参考元素会通过继承拿到同一个值，
+	// 把用户真正设置的属性误判成默认值。
+	reference.style.all = "initial";
+	root.appendChild(reference);
+	const summary = summarizeComputedStyle(window.getComputedStyle(reference));
+	baselineCache.set(tag, summary);
+	return summary;
+}
+
 function collectRuntimeNodeDetail(runtimeNodeId: string): RuntimeNodeDetail | undefined {
 	const element = nodeElements.get(runtimeNodeId);
 	if (!element) {
@@ -345,6 +381,7 @@ function collectRuntimeNodeDetail(runtimeNodeId: string): RuntimeNodeDetail | un
 	}
 	const text = (element.textContent ?? "").replace(/\s+/g, " ").trim();
 	const outerHTML = element.outerHTML;
+	const computedStyle = summarizeComputedStyle(window.getComputedStyle(element));
 	return {
 		runtimeNodeId,
 		bounds: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
@@ -355,7 +392,8 @@ function collectRuntimeNodeDetail(runtimeNodeId: string): RuntimeNodeDetail | un
 			scrollY: window.scrollY,
 			devicePixelRatio: window.devicePixelRatio,
 		},
-		computedStyle: summarizeComputedStyle(window.getComputedStyle(element)),
+		computedStyle,
+		computedStyleDefaults: defaultStyleKeys(computedStyle, measureBaseline(element.tagName)),
 		dom: {
 			tag: element.tagName.toLowerCase(),
 			id: element.id || undefined,
@@ -408,6 +446,8 @@ function publishComputedStyle(subscription: ComputedStyleSubscription): void {
 		kind: "cfp-computed-style",
 		runtimeNodeId: subscription.runtimeNodeId,
 		computedStyle,
+		computedStyleDefaults:
+			element && computedStyle ? defaultStyleKeys(computedStyle, measureBaseline(element.tagName)) : [],
 		capturedAt: Date.now(),
 	});
 }