dsh-chef 0.3.40 → 0.3.42

package/dist/client.js

@@ -1208,6 +1208,233 @@ 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-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);
+		}
+		/** 档位语三档金属（鎏金／冷银／暖铜）：主色＋渐变（`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%)"
+			}
+		};
+		/** 档位金属边（铜／银／金）：章与绦带共用这一份取值。 */
+		const TIER_EDGE = {
+			gold: "#f5d97a",
+			silver: "#d8dee3",
+			copper: "#a5652f"
+		};
+		const KAI = "\"Kaiti SC\",\"KaiTi\",\"STKaiti\",serif";
+		/** 关闭钮（定稿：绦带·飘尾）。右上角一枚斜披 45° 的朱砂菱形，两条飘尾分挂两条下边，尾先画、带后画压住尾根。 */
+		function closeLook(tierKey) {
+			const crimson = "linear-gradient(135deg,#c63d2a 8%,#a32216 50%,#7e1a10)";
+			/** 档位金属边（铜／银／金）：绦带**只借这一条**——主体恒朱砂，边随档走，跟章「红底＋金属边」同构。 */
+			const edge = TIER_EDGE[tierKey] ?? TIER_EDGE["gold"];
+			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 = TIER_METAL[ctx.tierKey] ?? TIER_METAL["gold"];
+			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` 的配套件，不认任何一家）。
 		*
@@ -1234,6 +1461,15 @@ window.__ModuleLoader__.load({
 		/** 糙边滤镜 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: "精雕细琢中",
@@ -1243,6 +1479,7 @@ window.__ModuleLoader__.load({
 		/** 纸面四色是印自带的（羊皮纸底＋ availability 墨色），不跟宿主主题跑——
 		*  深色下宿主变量会把纸染黑，故这里写死定稿值；字族仍继承（定稿零字族）。 */
 		const PAPER_BG = "#fdfaf2";
+		const PAPER_EDGE = "#e6d9bd";
 		const LABEL_SUB = "#4b4335";
 		/** 九档材质（3 角色 × 3 档）。键就是原型里的 `role`／`tier`。 */
 		const MATERIALS = {
@@ -1377,7 +1614,7 @@ window.__ModuleLoader__.load({
 			},
 			inner: {
 				position: "relative",
-				padding: "1.75em 2em 1.875em"
+				padding: "1.75em 2em"
 			},
 			head: {
 				textAlign: "center",
@@ -1441,11 +1678,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"
@@ -1471,9 +1709,11 @@ window.__ModuleLoader__.load({
 		}
 		/** 糙边滤镜定义：两条分开（印用 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 +1737,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 +1759,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 +1838,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 +1892,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
@@ -1720,21 +2021,25 @@ window.__ModuleLoader__.load({
 		function SealStamp(props) {
 			const face = FACE[props.role][props.tier];
 			if (face === 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],
+				...face
+			};
+			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);
@@ -2490,6 +2795,16 @@ 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;
+			/** 卷轴浮层跟着**被点的那枚章**：贴在该行下方一小段（1.9em ＝ 章高约 1.5em ＋ 0.4em 缝），
+			*  右缘与那枚章的右缘对齐，再往左让 1.25em 给绦带（关闭钮骑在浮层右上方，不让它越出卡片）。 */
+			const openSlot = props.selectedSeal ?? -1;
+			const anchor = openSlot < 0 || openSlot >= order.length ? void 0 : {
+				top: "calc(" + TOPS[openSlot] + " + 1.9em)",
+				right: "calc(" + padRightOfSlot(openSlot) + " + 1.25em)",
+				left: "auto",
+				justifyContent: "flex-end",
+				maxWidth: "calc(100% - " + padRightOfSlot(openSlot) + " - 1.75em)"
+			};
 			const dialog = openSeal === null ? null : react.createElement(SealScrollDialog, {
 				open: true,
 				onClose: props.onSealClose ?? (() => void 0),
@@ -2498,7 +2813,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";