dsh-calorie 0.3.40 → 0.3.43

package/dist/client.js

@@ -1208,141 +1208,358 @@ window.__ModuleLoader__.load({
 			}, react.createElement("span", { style: S$2.product }, props.product), react.createElement("span", { style: S$2.purpose }, props.purpose));
 		}
 		//#endregion
-		//#region ../plugin-manager/src/seal-scroll.ts
-		/** 印章卷轴 · 纯组件（`title-seal.ts` 的配套件，不认任何一家）。
-		*
-		* 来源：原型定稿 2026-10-05（记录见 `docs/plugins/plugin-manager/印章原型-定稿.md` 第九节）。
-		* 点印后弹出的那块：**外框逐档照抄对应那枚印的材质**（底色＋边线都照抄，不许简化成"一圈金属色"），
-		* **中间是纯纸**，内容固定三段——进展／状态／计划。
-		*
-		* 三条形状（逐值照原型锁死）：
-		*   外框：厚 1.125em（16px 下＝18px，这是下限；只给 10px 整张卡会读成"白底加一圈边"），
-		*     材质随 `role`×`tier` 九档之一，挂 `roughFrame` 糙边滤镜。
-		*   纸：`bg-layer-2` 底＋`border-l1` 描边，压在材质上（外框那层在纸下面，只露一圈）。
-		*   字：标题居中 1em／字距 .16em；档位字 .66em／字距 .42em；三段标签 .66em／字距 .34em；
-		*     正文 .84em／行高 1.9；段间 1px 细线＋.94em 上距。
-		*
-		* 颜色分治（照 `title-seal.ts` 的先例）：
-		*   印那一份（外框材质、档位字色）**固定色**——纸变印不变，印不管纸面派生；
-		*   纸那一份（纸底、纸边、标题、正文、段间线）走 DSH 主题别名。
-		*
-		* 糙边滤镜两条分开：印是小块，`scale 2.2` 就够；外框有几百像素宽，同一条会被稀释到看不出，
-		* 故外框单用 `scale 5` 的 `roughFrame`。滤镜只挂外框那层，纸不挂（否则纸的直边也会被抖）。
-		*
-		* 本件是纯函数：吃 props 回元素树，不留状态、不取数。手写 `React.createElement`（本包 client 束禁 JSX）。
-		*/
-		/** 糙边滤镜 id（文档作用域，故每页只许挂一次 `SealFilterDefs`）。 */
-		const ROUGH_EDGE = "dshLifeSealRoughEdge";
-		const ROUGH_FRAME = "dshLifeSealRoughFrame";
-		/** 档位话：标题下那一行不再印档位字，直接说档位所处的阶段（渲染期用，顶层可放行）。 */
-		const TIER_TEXT = {
-			gold: "精雕细琢中",
-			silver: "全打通中",
-			copper: "基础建设中"
-		};
-		/** 纸面四色是印自带的（羊皮纸底＋ availability 墨色），不跟宿主主题跑——
-		*  深色下宿主变量会把纸染黑，故这里写死定稿值；字族仍继承（定稿零字族）。 */
-		const PAPER_BG = "#fdfaf2";
-		const LABEL_SUB = "#4b4335";
-		/** 九档材质（3 角色 × 3 档）。键就是原型里的 `role`／`tier`。 */
-		const MATERIALS = {
+		//#region ../plugin-manager/src/seal-palette.ts
+		/** 九档调色板（3 角色 × 3 档）。键就是契约里的 `role`／`tier`。 */
+		const SEAL_PALETTE = {
 			skill: {
 				copper: {
-					frame: {
-						background: "linear-gradient(180deg,#8a4a28,#6e3418)",
-						border: "3px solid #a5652f",
-						boxShadow: "inset 0 0 0 1px #f8f1e2aa, inset 0 2px 0 #ffffff26, inset 0 -3px 6px #0000004d"
-					},
+					background: "linear-gradient(180deg,#8a4a28,#6e3418)",
+					border: "3px solid #a5652f",
 					accent: "#9a5f2a",
 					ruler: "#c08145b3"
 				},
 				silver: {
-					frame: {
-						background: "linear-gradient(180deg,#b73124,#8e1f14)",
-						border: "3px double #eef3f6",
-						boxShadow: "inset 0 0 0 1px #fff, inset 0 2px 0 #ffffff2e, inset 0 -3px 6px #0000004d"
-					},
+					background: "linear-gradient(180deg,#b73124,#8e1f14)",
+					border: "3px double #eef3f6",
 					accent: "#6f767c",
 					ruler: "#9aa0a6b3"
 				},
 				gold: {
-					frame: {
-						background: "linear-gradient(180deg,#d34a35,#a32216)",
-						border: "3px double #f5d97a",
-						boxShadow: "inset 0 0 0 1px #fff8, inset 0 2px 0 #ffffff33, inset 0 -3px 6px #0000004d"
-					},
+					background: "linear-gradient(180deg,#d34a35,#a32216)",
+					border: "3px double #f5d97a",
 					accent: "#9c7a16",
 					ruler: "#d8b338b3"
 				}
 			},
 			help: {
 				copper: {
-					frame: {
-						background: "linear-gradient(180deg,#b06a3a,#7e3f1d)",
-						border: "3px solid #a5652f",
-						boxShadow: "inset 0 2px 0 #ffffff26, inset 0 -3px 6px #0000004d"
-					},
+					background: "linear-gradient(180deg,#b06a3a,#7e3f1d)",
+					border: "3px solid #a5652f",
 					accent: "#9a5f2a",
 					ruler: "#c08145b3"
 				},
 				silver: {
-					frame: {
-						background: "linear-gradient(180deg,#8f979e,#5f666d)",
-						border: "3px double #e8eef2",
-						boxShadow: "inset 0 2px 0 #ffffff2e, inset 0 -3px 6px #0000004d"
-					},
+					background: "linear-gradient(180deg,#8f979e,#5f666d)",
+					border: "3px double #e8eef2",
 					accent: "#6f767c",
 					ruler: "#9aa0a6b3"
 				},
 				gold: {
-					frame: {
-						background: "linear-gradient(180deg,#c63d2a,#a32216)",
-						border: "3px double #f5d97a",
-						boxShadow: "inset 0 2px 0 #ffffff33, inset 0 -3px 6px #0000004d"
-					},
+					background: "linear-gradient(180deg,#c63d2a,#a32216)",
+					border: "3px double #f5d97a",
 					accent: "#9c7a16",
 					ruler: "#d8b338b3"
 				}
 			},
 			plugin: {
 				copper: {
-					frame: {
-						background: "linear-gradient(180deg,#b4773c,#7e3f1d 60%,#66300f)",
-						boxShadow: "inset 0 1px 0 #d99a5e88, inset 0 -2px 5px #0006, 0 0 0 1px #5e2c12, inset 0 2px 0 #ffffff26"
-					},
+					background: "linear-gradient(180deg,#b4773c,#7e3f1d 60%,#66300f)",
 					accent: "#9a5f2a",
-					ruler: "#c08145b3",
-					rivet: {
-						background: "radial-gradient(circle at 34% 28%,#f0c088,#a5652f 55%,#6a3216)",
-						boxShadow: "inset 0 -1px 1px #00000055,0 1px 2px #00000088"
-					}
+					ruler: "#c08145b3"
 				},
 				silver: {
-					frame: {
-						background: "linear-gradient(180deg,#d8dee3,#a7aeb4 55%,#818990)",
-						boxShadow: "inset 0 1px 0 #ffffffdd, inset 0 -2px 5px #0005, 0 0 0 1px #6f767c, inset 0 2px 0 #ffffff33"
-					},
+					background: "linear-gradient(180deg,#d8dee3,#a7aeb4 55%,#818990)",
 					accent: "#6f767c",
-					ruler: "#9aa0a6b3",
-					rivet: {
-						background: "radial-gradient(circle at 34% 28%,#ffffff,#c3cad0 50%,#7d848b)",
-						boxShadow: "inset 0 -1px 1px #00000044,0 1px 2px #00000077"
-					}
+					ruler: "#9aa0a6b3"
 				},
 				gold: {
-					frame: {
-						background: "linear-gradient(180deg,#f2dc86,#c9a227 55%,#9c7d16)",
-						boxShadow: "inset 0 1px 0 #fff8d8dd, inset 0 -2px 5px #0005, 0 0 0 1px #8a6a15"
-					},
+					background: "linear-gradient(180deg,#f2dc86,#c9a227 55%,#9c7d16)",
 					accent: "#9c7a16",
-					ruler: "#d8b338b3",
-					rivet: {
-						background: "radial-gradient(circle at 34% 28%,#fffbe0,#e3c565 50%,#a5841d)",
-						boxShadow: "inset 0 -1px 1px #00000044,0 1px 2px #00000077,0 0 6px #c9a22788"
-					}
+					ruler: "#d8b338b3"
 				}
 			}
 		};
+		/** 插件档那两颗铆钉（**两处共用的小件**：印面两颗、卷轴外框四角，必须同形，故住这一层）。 */
+		const SEAL_RIVET = {
+			copper: {
+				background: "radial-gradient(circle at 34% 28%,#f0c088,#a5652f 55%,#6a3216)",
+				boxShadow: "inset 0 -1px 1px #00000055,0 1px 2px #00000088"
+			},
+			silver: {
+				background: "radial-gradient(circle at 34% 28%,#ffffff,#c3cad0 50%,#7d848b)",
+				boxShadow: "inset 0 -1px 1px #00000044,0 1px 2px #00000077"
+			},
+			gold: {
+				background: "radial-gradient(circle at 34% 28%,#fffbe0,#e3c565 50%,#a5841d)",
+				boxShadow: "inset 0 -1px 1px #00000044,0 1px 2px #00000077,0 0 6px #c9a22788"
+			}
+		};
+		/** 档位金属边（铜／银／金）：绦带（关闭钮）只借这一条，主体恒朱砂。 */
+		const TIER_EDGE = {
+			gold: "#f5d97a",
+			silver: "#d8dee3",
+			copper: "#a5652f"
+		};
+		/** 档位语三档金属（鎏金／冷银／暖铜）：主色＋渐变（`backgroundClip:text` 描出金属光泽）。 */
+		const TIER_METAL = {
+			gold: {
+				flat: "#b8912a",
+				gradient: "linear-gradient(180deg,#f6e27a 0%,#d9b53c 45%,#a5811b 100%)"
+			},
+			silver: {
+				flat: "#8b959d",
+				gradient: "linear-gradient(180deg,#f7fafc 0%,#c3ccd3 45%,#8b959d 100%)"
+			},
+			copper: {
+				flat: "#a8663a",
+				gradient: "linear-gradient(180deg,#f0bd8e 0%,#c07b45 45%,#8a4a24 100%)"
+			}
+		};
+		//#endregion
+		//#region ../plugin-manager/src/seal-paper-schemes.ts
+		/** 卷轴纸面字排 ＋ 关闭钮样子 · **定稿件**（2026-10-06 定档，原型选型期结束）。
+		*
+		* 定稿形状（逐值锁死，改动须同步 `test/seal-scroll.test.mjs` 与 `test/seal-bundle-1158.test.mjs`）：
+		*   纸面：三段紧凑行内（进展／状态／计划），行首一枚朱砂小方印（进／状／计），标签与正文同行基线对齐；
+		*       末行吃回 0.5em 行距（不然底比顶空一截）；饰线上距加宽到 `0.5em 0 0.75em`；纸底与头部沿用原样式。
+		*   档位语：该档金属渐变压进字里（金＝鎏金／银＝冷银／铜＝暖铜），不再一律金。
+		*   关闭钮：右上角斜披的朱砂菱形绦带（正立「收卷」字独立成层），两条飘尾沿菱形两条下边各向底尖收，
+		*          各自朝外 26°（左尾朝左下、右尾朝右下）；尾是两层——外层过糙边出毛边，内层纯色芯不受滤镜。
+		*
+		* 为什么单独一件：`seal-scroll.ts` 已接近告警线（外框／纸／浮层／滤镜都住那里），纸面字排与关闭钮住这里。
+		* 本件是纯函数：吃 ctx 回五件，不留状态、不取数。原型期的二十余档方案已按「定稿后只留胜出那一档」删除。
+		*/
+		/** 材质底层：**糙边滤镜只挂这一层**——文字住在它外面，所以字是清晰的（照插件章「金属带＋印文」的老做法）。 */
+		function bgLayer(style, children) {
+			return react.createElement("span", {
+				"aria-hidden": true,
+				style: {
+					position: "absolute",
+					inset: 0,
+					...style
+				}
+			}, children ?? null);
+		}
+		/** 清晰字面：压在材质层之上，不参与任何滤镜。 */
+		function crisp(text, style) {
+			return react.createElement("span", { style: {
+				position: "relative",
+				zIndex: 1,
+				...style
+			} }, text);
+		}
+		/** 档位级两个色（金属边、档位语金属渐变）从九档总表引，本件不再各写一份。 */
+		const edgeOf = (tierKey) => TIER_EDGE[tierKey] ?? TIER_EDGE.gold;
+		const metalOf = (tierKey) => TIER_METAL[tierKey] ?? TIER_METAL.gold;
+		const KAI = "\"Kaiti SC\",\"KaiTi\",\"STKaiti\",serif";
+		/** 关闭钮（定稿：绦带·飘尾）。右上角一枚斜披 45° 的朱砂菱形，两条飘尾分挂两条下边，尾先画、带后画压住尾根。 */
+		function closeLook(tierKey) {
+			const crimson = "linear-gradient(135deg,#c63d2a 8%,#a32216 50%,#7e1a10)";
+			/** 档位金属边（铜／银／金）：绦带**只借这一条**——主体恒朱砂，边随档走，跟章「红底＋金属边」同构。 */
+			const edge = edgeOf(tierKey);
+			const ribbon = bgLayer({
+				borderRadius: "0.375em",
+				background: crimson,
+				boxShadow: "0 0 0 1px #5c110a59, 0 2px 8px #3d241066, inset 0 0 0 2px " + edge,
+				transform: "rotate(45deg)",
+				filter: "url(#" + SEAL_ROUGH_METAL_ID + ")"
+			}, null);
+			/** 尾色＝绦带上亮一档的朱砂（悬在纸上也不发灰、不发黑）：两条尾同色。 */
+			const TAIL_FILL = "linear-gradient(180deg,#e8573c 0%,#c33a24 55%,#a52612 100%)";
+			/** 飘尾：屏幕坐标（不随菱形旋转）——左尾往左下、右尾往右下（CSS 正角＝尾梢往左）。
+			*  两层：外层过糙边滤镜出毛边，内层纯色芯不受滤镜——尾悬在纸上还是悬在暗底上都是同一色。 */
+			const loose = (key, left, deg, len, top) => react.createElement("span", {
+				key,
+				"aria-hidden": true,
+				style: {
+					position: "absolute",
+					left,
+					top,
+					width: "0.4375em",
+					height: len,
+					transformOrigin: "top center",
+					transform: "rotate(" + deg + "deg)"
+				}
+			}, bgLayer({
+				borderRadius: "0 0 0.1875em 0.1875em",
+				background: TAIL_FILL,
+				boxShadow: "0 0 0 1.5px " + edge + "cc, 0 1px 3px #00000055",
+				filter: "url(#" + SEAL_ROUGH_METAL_ID + ")"
+			}), react.createElement("span", {
+				"aria-hidden": true,
+				style: {
+					position: "absolute",
+					inset: "0.5px",
+					borderRadius: "0 0 0.15625em 0.15625em",
+					background: TAIL_FILL
+				}
+			}));
+			return {
+				label: crisp("收卷", {
+					fontFamily: KAI,
+					fontSize: "0.8125em",
+					letterSpacing: "0.22em",
+					textIndent: "0.22em",
+					color: "#f8f1e2",
+					textShadow: "0 1px 2px #000000aa"
+				}),
+				decor: react.createElement(react.Fragment, null, loose("tL", "calc(50% - 0.8125em)", 26, "2em", "2.8125em"), loose("tR", "calc(50% + 0.4375em)", -26, "2em", "2.8125em"), ribbon),
+				style: {
+					boxSizing: "border-box",
+					padding: 0,
+					position: "absolute",
+					right: "-1.5em",
+					top: "-1.5em",
+					width: "3.25em",
+					height: "3.25em",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					cursor: "pointer",
+					border: "none",
+					background: "transparent"
+				}
+			};
+		}
+		/** 画一条饰线（方向 90/270 决定渐变朝向；定稿的段上距是 0.5em 0 0.75em）。 */
+		function ornament(st, ruler) {
+			const line = (key, dir) => react.createElement("span", {
+				key,
+				style: {
+					...st.ornLine,
+					background: "linear-gradient(" + dir + "deg,#0000," + ruler + ")"
+				}
+			});
+			return react.createElement("div", { style: {
+				...st.orn,
+				margin: "0.5em 0 0.75em"
+			} }, line("l", "90"), react.createElement("i", { style: {
+				...st.ornDot,
+				background: ruler
+			} }), line("r", "270"));
+		}
+		/** 行首那枚朱砂小印（进／状／计）：**两层**——材质层过印那条糙边滤镜（印泥压出来的毛边与斑驳），
+		*  字独立成层保持清晰；方块各带一点歪斜（真印章不会次次压得方正）。
+		*  外框仍是 0.7em 字／1.6 行高／左右 0.375em 垫——换的是质感，版面逐值不动。 */
+		function inkMark(name) {
+			const tilt = name === "进展" ? -2.4 : name === "状态" ? 1.6 : -1.2;
+			return react.createElement("span", { style: {
+				position: "relative",
+				flex: "0 0 auto",
+				fontSize: "0.7em",
+				lineHeight: 1.6,
+				padding: "0 0.375em",
+				transform: "rotate(" + tilt + "deg)"
+			} }, react.createElement("span", {
+				"aria-hidden": true,
+				style: {
+					position: "absolute",
+					inset: 0,
+					borderRadius: "0.1875em",
+					background: "#d92b1c",
+					filter: "url(#" + SEAL_ROUGH_INK_ID + ")"
+				}
+			}, react.createElement("span", {
+				"aria-hidden": true,
+				style: {
+					position: "absolute",
+					inset: 0,
+					borderRadius: "inherit",
+					background: "radial-gradient(circle at 72% 76%,#a81a0e33 0%,#0000 58%), radial-gradient(circle at 20% 62%,#f0715a3d 0%,#0000 52%), radial-gradient(circle at 52% 12%,#ee6a5233 0%,#0000 46%)"
+				}
+			})), react.createElement("span", { style: {
+				position: "relative",
+				color: "#fdf7ea",
+				opacity: .95
+			} }, name.slice(0, 1)));
+		}
+		/** 三段：一行紧凑（行首朱砂小方印＋标签＋正文同一基线）。 */
+		function inlineRows(st, ctx) {
+			const one = (key, name, text, last = false) => react.createElement("div", {
+				key,
+				style: {
+					margin: last ? "0 0 -0.5em" : "0 0 0.5em",
+					display: "flex",
+					alignItems: "baseline",
+					gap: "0.5em"
+				}
+			}, inkMark(name), react.createElement("span", { style: {
+				...st.label,
+				flex: "0 0 auto",
+				display: "inline",
+				marginBottom: 0,
+				fontSize: "0.8em",
+				color: ctx.accent
+			} }, name + "："), react.createElement("span", { style: {
+				...st.text,
+				flex: "1 1 auto",
+				display: "inline",
+				margin: 0,
+				fontSize: "0.9em"
+			} }, text));
+			return react.createElement(react.Fragment, null, one("progress", "进展", ctx.progress), one("status", "状态", ctx.status), one("plan", "计划", ctx.plan, true));
+		}
+		/** 档位语（一行）：该档金属渐变压进字里。 */
+		function tierNode(ctx) {
+			const metal = metalOf(ctx.tierKey);
+			return react.createElement("div", { style: {
+				...ctx.styles.tier,
+				fontFamily: KAI,
+				fontSize: "1.0625em",
+				letterSpacing: "0.34em",
+				textIndent: "0.34em",
+				color: "transparent",
+				backgroundImage: metal.gradient,
+				WebkitBackgroundClip: "text",
+				backgroundClip: "text"
+			} }, ctx.tierText);
+		}
+		/** 组装一件：纸底／头部／档位语／饰线／三段（定稿不覆盖纸底与头部，故两者缺席＝用 `seal-scroll.ts` 的原样式）。 */
+		function paperParts(ctx) {
+			return {
+				paper: void 0,
+				head: void 0,
+				tier: tierNode(ctx),
+				orn: ornament(ctx.styles, ctx.ruler),
+				body: inlineRows(ctx.styles, ctx)
+			};
+		}
+		//#endregion
+		//#region ../plugin-manager/src/seal-scroll.ts
+		/** 印章卷轴 · 纯组件（`title-seal.ts` 的配套件，不认任何一家）。
+		*
+		* 来源：原型定稿 2026-10-05（记录见 `docs/plugins/plugin-manager/印章原型-定稿.md` 第九节）。
+		* 点印后弹出的那块：**外框逐档照抄对应那枚印的材质**（底色＋边线都照抄，不许简化成"一圈金属色"），
+		* **中间是纯纸**，内容固定三段——进展／状态／计划。
+		*
+		* 三条形状（逐值照原型锁死）：
+		*   外框：厚 1.125em（16px 下＝18px，这是下限；只给 10px 整张卡会读成"白底加一圈边"），
+		*     材质随 `role`×`tier` 九档之一，挂 `roughFrame` 糙边滤镜。
+		*   纸：`bg-layer-2` 底＋`border-l1` 描边，压在材质上（外框那层在纸下面，只露一圈）。
+		*   字：标题居中 1em／字距 .16em；档位字 .66em／字距 .42em；三段标签 .66em／字距 .34em；
+		*     正文 .84em／行高 1.9；段间 1px 细线＋.94em 上距。
+		*
+		* 颜色分治（照 `title-seal.ts` 的先例）：
+		*   印那一份（外框材质、档位字色）**固定色**——纸变印不变，印不管纸面派生；
+		*   纸那一份（纸底、纸边、标题、正文、段间线）走 DSH 主题别名。
+		*
+		* 糙边滤镜两条分开：印是小块，`scale 2.2` 就够；外框有几百像素宽，同一条会被稀释到看不出，
+		* 故外框单用 `scale 5` 的 `roughFrame`。滤镜只挂外框那层，纸不挂（否则纸的直边也会被抖）。
+		*
+		* 本件是纯函数：吃 props 回元素树，不留状态、不取数。手写 `React.createElement`（本包 client 束禁 JSX）。
+		*/
+		/** 糙边滤镜 id（文档作用域，故每页只许挂一次 `SealFilterDefs`）。 */
+		const ROUGH_EDGE = "dshLifeSealRoughEdge";
+		const ROUGH_FRAME = "dshLifeSealRoughFrame";
+		/** 中等件（轴杆／纸筒／绦带这类几十像素宽的件）那条糙边：2.2 太细、5 会抖过头。 */
+		const ROUGH_METAL = "dshLifeSealRoughMetal";
+		/** 印泥那条（行首那几枚小印）：同 2.2 的抖动，末尾再加一点高斯模糊——印泥压在纸上边缘会洇开，
+		*  光有抖动边只会读成「毛边贴纸」。字住在滤镜之外，所以糊的只有泥、不是字。 */
+		const ROUGH_INK = "dshLifeSealInkEdge";
+		/** 中等件那条糙边 id（关闭钮引用；定义只此一处）。 */
+		const SEAL_ROUGH_METAL_ID = ROUGH_METAL;
+		/** 印泥那条糙边 id（纸面行首小印引用；定义只此一处）。 */
+		const SEAL_ROUGH_INK_ID = ROUGH_INK;
+		/** 档位话：标题下那一行不再印档位字，直接说档位所处的阶段（渲染期用，顶层可放行）。 */
+		const TIER_TEXT = {
+			gold: "精雕细琢中",
+			silver: "全打通中",
+			copper: "基础建设中"
+		};
+		/** 纸面四色是印自带的（羊皮纸底＋ availability 墨色），不跟宿主主题跑——
+		*  深色下宿主变量会把纸染黑，故这里写死定稿值；字族仍继承（定稿零字族）。 */
+		const PAPER_BG = "#fdfaf2";
+		const PAPER_EDGE = "#e6d9bd";
 		const S$1 = {
 			/** 外框（`.frame`）：绝对铺满，挂糙边滤镜；纸压在它上面，只露一圈。 */
 			frame: {
@@ -1377,7 +1594,7 @@ window.__ModuleLoader__.load({
 			},
 			inner: {
 				position: "relative",
-				padding: "1.75em 2em 1.875em"
+				padding: "1.75em 2em"
 			},
 			head: {
 				textAlign: "center",
@@ -1427,7 +1644,7 @@ window.__ModuleLoader__.load({
 				fontSize: "0.84em",
 				lineHeight: 1.9,
 				letterSpacing: "0.02em",
-				color: LABEL_SUB
+				color: "#4b4335"
 			},
 			/** 卷轴浮层：卡片内绝对定位（卡片 `S.card` 是 relative 定位祖先），上沿悬在三枚章之下、左右各留半 em——
 			*  不是 modal：无遮罩、不锁滚动，点章切换、点「关闭」收起。 */
@@ -1441,11 +1658,12 @@ window.__ModuleLoader__.load({
 				justifyContent: "center",
 				pointerEvents: "auto"
 			},
-			/** 浮层内框：宽按 em 给（16px 下≈25em），窄卡上收满可用宽，永不捅破卡片；
+			/** 浮层内框：**宽随内容**（`max-content`，正好包住最长那一行；不是固定 25em 那块大纸）。
+			*  `maxWidth:100%` 是窄卡的兜底（收满可用宽、永不捅破卡片），此时长行换行、高度自己长。
 			*  挂卷轴展开动画（从上而下舒卷，240ms；纯声明式，无 hook，纯函数可直测）。 */
 			popInner: {
 				position: "relative",
-				width: "25em",
+				width: "max-content",
 				maxWidth: "100%",
 				transformOrigin: "50% 0",
 				animation: "dshLifeSealUnroll 240ms ease-out"
@@ -1464,16 +1682,47 @@ window.__ModuleLoader__.load({
 				cursor: "pointer"
 			}
 		};
+		/** 外框专有的内阴影（随档；底色与边线不在这张表里，从调色板来）。
+		*  外框比印面大得多，同一圈金色在小章上够、在几百像素的框上会被稀释，故这一层是外框自己的排法。 */
+		const FRAME_INSET = {
+			skill: {
+				copper: "inset 0 0 0 1px #f8f1e2aa, inset 0 2px 0 #ffffff26, inset 0 -3px 6px #0000004d",
+				silver: "inset 0 0 0 1px #fff, inset 0 2px 0 #ffffff2e, inset 0 -3px 6px #0000004d",
+				gold: "inset 0 0 0 1px #fff8, inset 0 2px 0 #ffffff33, inset 0 -3px 6px #0000004d"
+			},
+			help: {
+				copper: "inset 0 2px 0 #ffffff26, inset 0 -3px 6px #0000004d",
+				silver: "inset 0 2px 0 #ffffff2e, inset 0 -3px 6px #0000004d",
+				gold: "inset 0 2px 0 #ffffff33, inset 0 -3px 6px #0000004d"
+			},
+			plugin: {
+				copper: "inset 0 1px 0 #d99a5e88, inset 0 -2px 5px #0006, 0 0 0 1px #5e2c12, inset 0 2px 0 #ffffff26",
+				silver: "inset 0 1px 0 #ffffffdd, inset 0 -2px 5px #0005, 0 0 0 1px #6f767c, inset 0 2px 0 #ffffff33",
+				gold: "inset 0 1px 0 #fff8d8dd, inset 0 -2px 5px #0005, 0 0 0 1px #8a6a15"
+			}
+		};
+		/** 取一档材质：底色与边线从调色板来（与印共用一份取值），外框专有的内阴影与铆钉在这里合成。 */
 		function materialOf(role, tier) {
-			const found = MATERIALS[role]?.[tier];
-			if (!found) throw new Error("未知的印档：" + role + "／" + tier);
-			return found;
+			const palette = SEAL_PALETTE[role]?.[tier];
+			if (palette === void 0) throw new Error("未知的印档：" + role + "／" + tier);
+			return {
+				frame: {
+					background: palette.background,
+					...palette.border === void 0 ? {} : { border: palette.border },
+					boxShadow: FRAME_INSET[role][tier]
+				},
+				accent: palette.accent,
+				ruler: palette.ruler,
+				rivet: role === "plugin" ? SEAL_RIVET[tier] : void 0
+			};
 		}
 		/** 糙边滤镜定义：两条分开（印用 edge，卷轴外框用 frame），每页只挂一次。
 		*
-		* 挂在文档任意位置都行（`width/height=0` 不占位），同页重复挂会撞 id。 */
+		* 挂在文档任意位置都行（`width/height=0` 不占位），同页重复挂会撞 id。
+		* 印章交互（悬停上浮高亮／按压回缩／焦点环／级别 tooltip）也住这里：scoped 类名，纯 CSS、无 hook。
+		* 悬停高亮须把糙边 url 原样带上（filter 单属性，另写会把糙边冲掉）。 */
 		function SealFilterDefs() {
-			return react.createElement("svg", {
+			return react.createElement(react.Fragment, null, react.createElement("style", null, ".dshLifeSealBtn{position:relative;transition:transform 160ms ease-out,filter 160ms ease-out}.dshLifeSealBtn:hover{transform:translateY(-2px);filter:url(#dshLifeSealRoughEdge) brightness(1.12)}.dshLifeSealBtn:active{transform:translateY(0) scale(.96)}.dshLifeSealBtn:focus-visible{outline:2px solid #f5d97a;outline-offset:2px}.dshLifeSealBtn::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#241f19ee;color:#f8f1e2;font-size:.72em;letter-spacing:.1em;padding:.4em .9em;border-radius:.5em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 150ms ease;z-index:30}.dshLifeSealBtn:hover::after,.dshLifeSealBtn:focus-visible::after{opacity:1}"), react.createElement("svg", {
 				width: 0,
 				height: 0,
 				"aria-hidden": true,
@@ -1497,6 +1746,21 @@ window.__ModuleLoader__.load({
 				y: "-6%",
 				width: "112%",
 				height: "112%"
+			}, react.createElement("feTurbulence", {
+				baseFrequency: .6,
+				numOctaves: 3,
+				result: "n"
+			}), react.createElement("feDisplacementMap", {
+				in: "SourceGraphic",
+				in2: "n",
+				scale: 6.5
+			})), react.createElement("filter", {
+				id: ROUGH_METAL,
+				key: ROUGH_METAL,
+				x: "-8%",
+				y: "-14%",
+				width: "116%",
+				height: "128%"
 			}, react.createElement("feTurbulence", {
 				baseFrequency: .9,
 				numOctaves: 2,
@@ -1504,8 +1768,43 @@ window.__ModuleLoader__.load({
 			}), react.createElement("feDisplacementMap", {
 				in: "SourceGraphic",
 				in2: "n",
-				scale: 5
-			})));
+				scale: 3.2
+			})), react.createElement("filter", {
+				id: ROUGH_INK,
+				key: ROUGH_INK,
+				x: "-25%",
+				y: "-25%",
+				width: "150%",
+				height: "150%"
+			}, react.createElement("feTurbulence", {
+				type: "fractalNoise",
+				baseFrequency: .9,
+				numOctaves: 2,
+				result: "n"
+			}), react.createElement("feDisplacementMap", {
+				in: "SourceGraphic",
+				in2: "n",
+				scale: 2.2,
+				result: "d"
+			}), react.createElement("feGaussianBlur", {
+				in: "d",
+				stdDeviation: .3,
+				result: "b"
+			}), react.createElement("feTurbulence", {
+				type: "fractalNoise",
+				baseFrequency: .75,
+				numOctaves: 3,
+				result: "g"
+			}), react.createElement("feColorMatrix", {
+				in: "g",
+				type: "matrix",
+				values: "0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  .7 .45 0 0 .35",
+				result: "mask"
+			}), react.createElement("feComposite", {
+				in: "b",
+				in2: "mask",
+				operator: "in"
+			}))));
 		}
 		/** 一卷：外框材质 ＋ 纯纸 ＋ 进展／状态／计划三段。 */
 		function SealScroll(props) {
@@ -1548,38 +1847,38 @@ window.__ModuleLoader__.load({
 					}
 				})
 			] : [];
-			const line = (key, dir) => react.createElement("span", {
-				key,
-				style: {
-					...S$1.ornLine,
-					background: "linear-gradient(" + dir + "deg,#0000," + material.ruler + ")"
+			/** 纸面字排：定稿件直出五件。 */
+			const parts = paperParts({
+				tierKey: props.tier,
+				tierText: TIER_TEXT[props.tier],
+				progress: props.progress,
+				status: props.status,
+				plan: props.plan,
+				accent: material.accent,
+				ruler: material.ruler,
+				paperEdge: PAPER_EDGE,
+				styles: {
+					head: S$1.head,
+					paper: S$1.paper,
+					tier: S$1.tier,
+					orn: S$1.orn,
+					ornLine: S$1.ornLine,
+					ornDot: S$1.ornDot,
+					block: S$1.block,
+					blockDivided: S$1.blockDivided,
+					blockLast: S$1.blockLast,
+					label: S$1.label,
+					text: S$1.text
 				}
 			});
-			const block = (key, name, text, divided, last = false) => react.createElement("div", {
-				key,
-				style: last ? divided ? {
-					...S$1.blockLast,
-					paddingTop: "0.9375em",
-					borderTop: "1px solid #e6d9bd"
-				} : S$1.blockLast : divided ? S$1.blockDivided : S$1.block
-			}, react.createElement("div", { style: {
-				...S$1.label,
-				color: material.accent
-			} }, name), react.createElement("p", { style: S$1.text }, text));
 			return react.createElement("div", { style: S$1.scroll }, react.createElement("div", { style: {
 				...S$1.frame,
 				...material.frame
-			} }, ...frameChildren), react.createElement("div", { style: S$1.paper }, react.createElement("div", { style: S$1.inner }, react.createElement("div", { style: S$1.head }, react.createElement(SealStamp, {
+			} }, ...frameChildren), react.createElement("div", { style: parts.paper === void 0 ? S$1.paper : parts.paper }, react.createElement("div", { style: S$1.inner }, react.createElement("div", { style: parts.head === void 0 ? S$1.head : parts.head }, react.createElement(SealStamp, {
 				role: props.role,
 				tier: props.tier,
 				label: props.title
-			}), react.createElement("div", { style: {
-				...S$1.tier,
-				color: material.accent
-			} }, TIER_TEXT[props.tier])), react.createElement("div", { style: S$1.orn }, line("l", "90"), react.createElement("i", { style: {
-				...S$1.ornDot,
-				background: material.accent
-			} }), line("r", "270")), block("progress", "进展", props.progress, false), block("status", "状态", props.status, true), block("plan", "计划", props.plan, true, true))));
+			}), parts.tier), parts.orn, parts.body)));
 		}
 		/** 卷轴浮层：popover ＋ 点击别处关闭 ＋ 卷轴展开动画 ＋ 关闭。`open` 为假时不渲染（纯函数，不收自己的状态）。 */
 		function SealScrollDialog(props) {
@@ -1602,16 +1901,27 @@ window.__ModuleLoader__.load({
 				"aria-hidden": true,
 				onClick: props.onClose
 			}), react.createElement("div", {
-				style: S$1.dialog,
+				style: props.anchor === void 0 ? S$1.dialog : {
+					...S$1.dialog,
+					...props.anchor
+				},
 				role: "dialog",
 				"aria-modal": false,
 				"aria-label": props.title
-			}, react.createElement("style", null, "@keyframes dshLifeSealUnroll{from{opacity:0;transform:translateY(-10px) scaleY(.7)}to{opacity:1;transform:none}}"), react.createElement("div", { style: S$1.popInner }, react.createElement("button", {
-				type: "button",
-				style: S$1.close,
-				"data-ilife-press": "seal-close",
-				onClick: props.onClose
-			}, "关闭"), react.createElement(SealScroll, scroll))));
+			}, react.createElement("style", null, "@keyframes dshLifeSealUnroll{from{opacity:0;transform:translateY(-10px) scaleY(.7)}to{opacity:1;transform:none}}"), react.createElement("div", { style: S$1.popInner }, (() => {
+				const look = closeLook(props.tier);
+				return react.createElement("button", {
+					type: "button",
+					className: "dshLifeSealBtn",
+					style: {
+						zIndex: 20,
+						...look.style
+					},
+					"data-ilife-press": "seal-close",
+					"data-ilife-close": "tie",
+					onClick: props.onClose
+				}, look.decor ?? null, look.label);
+			})(), react.createElement(SealScroll, scroll))));
 		}
 		//#endregion
 		//#region ../plugin-manager/src/seal-stamp.ts
@@ -1653,88 +1963,64 @@ window.__ModuleLoader__.load({
 				color: "#f8f1e2"
 			}
 		};
-		/** 九档印面（底色加边线都照抄对应那枚印，不许简化）。 */
-		const FACE = {
+		/** 印面专有的内圈高光与外发光（随档；底色与边线不在这张表里，从调色板来）。 */
+		const FACE_EXTRA = {
 			skill: {
 				copper: {
-					background: "linear-gradient(180deg,#8a4a28,#6e3418)",
 					color: "#f8f1e2",
-					border: "3px solid #a5652f",
 					boxShadow: "inset 0 0 0 1px #f8f1e2aa"
 				},
 				silver: {
-					background: "linear-gradient(180deg,#b73124,#8e1f14)",
 					color: "#f8f1e2",
-					border: "3px double #eef3f6",
 					boxShadow: "inset 0 0 0 1px #fff"
 				},
 				gold: {
-					background: "linear-gradient(180deg,#d34a35,#a32216)",
 					color: "#fff8e0",
-					border: "3px double #f5d97a",
 					boxShadow: "inset 0 0 0 1px #fff8,0 4px 16px #c9a22755"
 				}
 			},
 			help: {
-				copper: {
-					background: "linear-gradient(180deg,#b06a3a,#7e3f1d)",
-					border: "3px solid #a5652f"
-				},
-				silver: {
-					background: "linear-gradient(180deg,#8f979e,#5f666d)",
-					border: "3px double #e8eef2"
-				},
-				gold: {
-					background: "linear-gradient(180deg,#c63d2a,#a32216)",
-					border: "3px double #f5d97a"
-				}
+				copper: {},
+				silver: {},
+				gold: {}
 			},
 			plugin: {
-				copper: { background: "linear-gradient(180deg,#b4773c,#7e3f1d 60%,#66300f)" },
-				silver: { background: "linear-gradient(180deg,#d8dee3,#a7aeb4 55%,#818990)" },
-				gold: { background: "linear-gradient(180deg,#f2dc86,#c9a227 55%,#9c7d16)" }
+				copper: {},
+				silver: {},
+				gold: {}
 			}
 		};
 		/** 插件整面金属带的描边（随档）。 */
 		const BAND_EDGE = {
-			copper: { boxShadow: "inset 0 1px 0 #d99a5e88,inset 0 -2px 5px #0006,0 0 0 1px #5e2c12" },
-			silver: { boxShadow: "inset 0 1px 0 #ffffffdd,inset 0 -2px 5px #0005,0 0 0 1px #6f767c" },
-			gold: { boxShadow: "inset 0 1px 0 #fff8d8dd,inset 0 -2px 5px #0005,0 0 0 1px #8a6a15,0 3px 14px #c9a22766" }
-		};
-		/** 插件左右铆钉（随档，两颗）。 */
-		const RIVET = {
-			copper: {
-				background: "radial-gradient(circle at 34% 28%,#f0c088,#a5652f 55%,#6a3216)",
-				boxShadow: "inset 0 -1px 1px #00000055,0 1px 2px #00000088"
-			},
-			silver: {
-				background: "radial-gradient(circle at 34% 28%,#ffffff,#c3cad0 50%,#7d848b)",
-				boxShadow: "inset 0 -1px 1px #00000044,0 1px 2px #00000077"
-			},
-			gold: {
-				background: "radial-gradient(circle at 34% 28%,#fffbe0,#e3c565 50%,#a5841d)",
-				boxShadow: "inset 0 -1px 1px #00000044,0 1px 2px #00000077,0 0 6px #c9a22788"
-			}
+			copper: "inset 0 1px 0 #d99a5e88,inset 0 -2px 5px #0006,0 0 0 1px #5e2c12",
+			silver: "inset 0 1px 0 #ffffffdd,inset 0 -2px 5px #0005,0 0 0 1px #6f767c",
+			gold: "inset 0 1px 0 #fff8d8dd,inset 0 -2px 5px #0005,0 0 0 1px #8a6a15,0 3px 14px #c9a22766"
 		};
 		/** 一枚印章（button，点章弹卷）。未知组合直接抛错，不静默退化。 */
 		function SealStamp(props) {
-			const face = FACE[props.role][props.tier];
-			if (face === void 0) throw new Error("未知印章组合：" + String(props.role) + "/" + String(props.tier));
+			const palette = SEAL_PALETTE[props.role]?.[props.tier];
+			if (palette === void 0) throw new Error("未知印章组合：" + String(props.role) + "/" + String(props.tier));
+			const style = {
+				display: "inline-flex",
+				alignItems: "center",
+				cursor: "pointer",
+				fontWeight: 800,
+				lineHeight: 1.2,
+				whiteSpace: "nowrap",
+				filter: "url(#dshLifeSealRoughEdge)",
+				...ROLE_BASE[props.role],
+				background: palette.background,
+				...palette.border === void 0 ? {} : { border: palette.border },
+				...FACE_EXTRA[props.role][props.tier]
+			};
+			const tierName = props.tier === "copper" ? "铜" : props.tier === "silver" ? "银" : "金";
 			const buttonProps = {
 				type: "button",
-				style: {
-					display: "inline-flex",
-					alignItems: "center",
-					cursor: "pointer",
-					fontWeight: 800,
-					lineHeight: 1.2,
-					whiteSpace: "nowrap",
-					filter: "url(#dshLifeSealRoughEdge)",
-					...ROLE_BASE[props.role],
-					...face
-				},
+				style,
+				className: "dshLifeSealBtn",
 				"aria-label": props.label,
 				"aria-haspopup": "dialog",
+				"data-tip": tierName + "章 · " + TIER_TEXT[props.tier],
 				onClick: props.onSelect
 			};
 			if (props.role !== "plugin") return react.createElement("button", buttonProps, props.label);
@@ -1746,7 +2032,8 @@ window.__ModuleLoader__.load({
 				right: "-1px",
 				zIndex: 1,
 				borderRadius: "4px",
-				...BAND_EDGE[props.tier]
+				boxShadow: BAND_EDGE[props.tier],
+				background: palette.background
 			};
 			const rivet = {
 				position: "absolute",
@@ -1756,13 +2043,10 @@ window.__ModuleLoader__.load({
 				borderRadius: "50%",
 				top: "50%",
 				transform: "translateY(-50%)",
-				...RIVET[props.tier]
+				...SEAL_RIVET[props.tier]
 			};
 			return react.createElement("button", buttonProps, react.createElement("span", {
-				style: {
-					...band,
-					background: face.background
-				},
+				style: band,
 				"data-seal-band": "1"
 			}), react.createElement("span", {
 				style: {
@@ -2449,37 +2733,56 @@ window.__ModuleLoader__.load({
 			const product = title ?? "";
 			const seals = props.seals ?? [];
 			const seed = props.sealSeed ?? 0;
-			/** 三行定序（六家一致：HELP 上／技能中／插件下；HELP 永远 z 最上）。 */
+			/** 三行定序：**由面板按角色定**（HELP 上／技能中／插件下；HELP 永远 z 最上）。
+			*  调用方给的数组顺序无关紧要，缺哪一枚就只画剩下的（位置顺次上移）——
+			*  少给一枚不该把整块面板炸掉（旧写法按位置取 `seals[2]`，两枚时直接 TypeError）。 */
 			const order = [
-				0,
-				1,
-				2
-			];
-			/** 三行行高（上／中／下；纵向净空各留约 10px，糙边抖动也碰不到）。 */
-			const TOPS = [
-				"0.3em",
-				"3.4em",
-				"6.2em"
-			];
-			/** 轻微倾角（±0.5°～±2.5°，方向随机）：家下标×槽位哈希，纯函数、每次同值，不过大。 */
-			const tiltOfSlot = (slot) => {
+				"help",
+				"skill",
+				"plugin"
+			].map((role) => seals.findIndex((s) => s.role === role)).filter((index) => index >= 0);
+			/** 三行槽位几何 · **唯一出处**：章的落位与卷轴浮层的锚点都从这里取，免得两处各写一套数字。
+			*  行高（上／中／下；纵向净空各留约 10px，糙边抖动也碰不到）／轻微倾角（±0.5°～±2.5°，家下标×槽位哈希，
+			*  纯函数每次同值）／右间距（三枚全部居右收敛，各家各行 0.2em～1.1em 错开，永不出面板右边界）。
+			*  `dialog` 是卷轴浮层那一份：贴该行下方 1.9em（章高约 1.5em ＋ 0.4em 缝），右缘与那枚章对齐，
+			*  再往左让 1.25em 给绦带（关闭钮骑在浮层右上方，不让它越出卡片）。 */
+			const slotGeom = (slot, seed) => {
+				const top = [
+					"0.3em",
+					"3.4em",
+					"6.2em"
+				][slot] ?? "0.3em";
 				const q = (seed * 5 + slot * 11 + 3) % 10;
-				return String((q % 2 === 0 ? -1 : 1) * (.5 + Math.floor(q / 2) * .5));
+				const tilt = String((q % 2 === 0 ? -1 : 1) * (.5 + Math.floor(q / 2) * .5));
+				const padRight = String(.2 + (seed * 7 + slot * 3 + 1) % 6 * .18) + "em";
+				return {
+					top,
+					tilt,
+					padRight,
+					dialog: {
+						top: "calc(" + top + " + 1.9em)",
+						right: "calc(" + padRight + " + 1.25em)",
+						left: "auto",
+						justifyContent: "flex-end",
+						maxWidth: "calc(100% - " + padRight + " - 1.75em)"
+					}
+				};
 			};
-			/** 右间距（三枚全部居右收敛，各家各行 0.2em～1.1em 错开，永不出面板右边界）。 */
-			const padRightOfSlot = (slot) => String(.2 + (seed * 7 + slot * 3 + 1) % 6 * .18) + "em";
 			const zOfRole = (role) => role === "help" ? 4 : role === "skill" ? 3 : 2;
 			const overlay = seals.length === 0 ? null : react.createElement("div", { style: S.sealOverlay }, react.createElement(SealFilterDefs, {}), ...order.map((dataIndex, slot) => react.createElement("span", {
 				key: seals[dataIndex].role + ":" + seals[dataIndex].tier,
-				style: {
-					position: "absolute",
-					top: TOPS[slot],
-					right: padRightOfSlot(slot),
-					zIndex: zOfRole(seals[dataIndex].role),
-					pointerEvents: "auto",
-					display: "inline-flex",
-					transform: "rotate(" + tiltOfSlot(slot) + "deg)"
-				}
+				style: (() => {
+					const g = slotGeom(slot, seed);
+					return {
+						position: "absolute",
+						top: g.top,
+						right: g.padRight,
+						zIndex: zOfRole(seals[dataIndex].role),
+						pointerEvents: "auto",
+						display: "inline-flex",
+						transform: "rotate(" + g.tilt + "deg)"
+					};
+				})()
 			}, react.createElement("span", { style: {
 				fontSize: "0.8em",
 				display: "inline-flex"
@@ -2490,6 +2793,9 @@ window.__ModuleLoader__.load({
 				onSelect: props.onSealSelect === void 0 ? void 0 : props.onSealSelect.bind(null, dataIndex)
 			})))));
 			const openSeal = props.selectedSeal === null || props.selectedSeal === void 0 ? null : seals[props.selectedSeal] ?? null;
+			/** 卷轴浮层跟着**被点的那枚章**：锚点与章的落位同出一处（`slotGeom`），两处不会各自漂。 */
+			const openSlot = props.selectedSeal === null || props.selectedSeal === void 0 ? -1 : order.indexOf(props.selectedSeal);
+			const anchor = openSlot < 0 ? void 0 : slotGeom(openSlot, seed).dialog;
 			const dialog = openSeal === null ? null : react.createElement(SealScrollDialog, {
 				open: true,
 				onClose: props.onSealClose ?? (() => void 0),
@@ -2498,7 +2804,8 @@ window.__ModuleLoader__.load({
 				title: openSeal.label,
 				progress: openSeal.progress,
 				status: openSeal.status,
-				plan: openSeal.plan
+				plan: openSeal.plan,
+				anchor
 			});
 			const headDataDir = surface === null ? "" : surface.resolved?.["dbDir"] ?? surface.dataDir;
 			const ready = state.kind === "ready";