Replace approximate recipes with 27 source-matched component layouts

apps/wiki/package.json

@@ -10,7 +10,7 @@
     "build": "next build && esbuild src/worker.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/worker.cjs && esbuild scripts/bootstrap.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/bootstrap.cjs && esbuild scripts/publish-learning-series.ts --bundle --platform=node --format=cjs --external:pg-native --external:playwright-core --outfile=dist/publish-learning-series.cjs && node scripts/prepare-standalone.mjs",
     "start": "next start",
     "typecheck": "next typegen && tsc --noEmit",
-    "test": "tsx --test tests/api-documentation.test.ts tests/health.test.ts tests/model.test.ts tests/learning-series.test.ts tests/skill-docs.test.ts tests/wiki.test.ts tests/explore.test.ts tests/preview.test.ts tests/note-markdown.test.tsx",
+    "test": "tsx --test tests/api-documentation.test.ts tests/health.test.ts tests/model.test.ts tests/learning-series.test.ts tests/skill-docs.test.ts tests/wiki.test.ts tests/explore.test.ts tests/preview.test.ts tests/note-markdown.test.tsx tests/layout-reference.test.tsx",
     "test:smoke": "node scripts/smoke.mjs",
     "storage:prepare": "tsx scripts/bootstrap.ts",
     "content:publish-learning": "tsx scripts/publish-learning-series.ts",

apps/wiki/public/layout-recipes/annotation-lines.html

@@ -1,32 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>细线标注与技术图录 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.annotation-lines .panel-a{left:20%;top:24%;width:60%;height:48%}.pl-sheet.annotation-lines .measure{position:absolute;left:8%;top:35%;width:84%;height:24%;border-top:.15em solid var(--ink);border-bottom:.15em solid var(--ink)}.pl-sheet.annotation-lines .tag{position:absolute;left:8%;top:31%;font-size:1.8em;background:var(--paper);padding:.2em}.pl-sheet.annotation-lines .title{left:7%;top:9%;font-size:6.5em}.pl-sheet.annotation-lines .copy{left:7%;bottom:10%;width:75%}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet annotation-lines" aria-label="细线标注与技术图录排版示例">
-<div class="panel panel-a" aria-hidden="true"></div>
-<div class="measure" aria-hidden="true"></div>
-<span class="tag">A / 表面结构示意</span>
-<h1 class="title">细节的尺度</h1>
-<p class="copy">标注用于解释真实细节。
-本例色块为结构占位，并非实物测量。</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 10</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/diagonal-cards.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>轻斜卡片与拼贴 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.diagonal-cards .back{left:14%;top:27%;width:66%;height:49%;transform:rotate(-5deg);background:#dce0da}.pl-sheet.diagonal-cards .front{left:20%;top:29%;width:66%;height:49%;transform:rotate(3deg);background:var(--deep);box-shadow:0 .6em 1.2em #24323015}.pl-sheet.diagonal-cards .title{left:7%;top:8%;font-size:6.5em}.pl-sheet.diagonal-cards .copy{left:7%;bottom:8%;width:80%}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet diagonal-cards" aria-label="轻斜卡片与拼贴排版示例">
-<div class="panel back" aria-hidden="true"></div>
-<div class="panel front" aria-hidden="true"></div>
-<h1 class="title">纸上的实验</h1>
-<p class="copy">材料笔记 / 两张卡片的轻微偏移</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 09</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/editorial-serif.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>衬线刊头与杂志栏 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.editorial-serif .title{left:7%;top:7%;font:7.8em/.95 Georgia,"Songti SC",serif}.pl-sheet.editorial-serif .panel-a{left:7%;top:32%;width:58%;height:49%}.pl-sheet.editorial-serif .copy{left:70%;top:33%;width:23%;font-size:2em;line-height:1.8}.pl-sheet.editorial-serif .rule{position:absolute;left:7%;right:7%;top:27%;border-top:.15em solid var(--ink)}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet editorial-serif" aria-label="衬线刊头与杂志栏排版示例">
-<h1 class="title">Quiet<br>Design</h1>
-<div class="rule" aria-hidden="true"></div>
-<div class="panel panel-a" aria-hidden="true"></div>
-<p class="copy">从一块留白开始，观察材料、光线与文字之间的关系。</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 07</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/horizontal-band.html

@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>横向色带与断层 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.horizontal-band .band{position:absolute;left:0;top:34%;width:100%;height:33%;background:var(--deep)}.pl-sheet.horizontal-band .title{left:7%;top:12%;font-size:7em}.pl-sheet.horizontal-band .sub{position:absolute;left:7%;top:43%;font-size:5.5em;color:var(--paper);line-height:1.1}.pl-sheet.horizontal-band .copy{left:7%;bottom:12%;width:65%}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet horizontal-band" aria-label="横向色带与断层排版示例">
-<div class="band" aria-hidden="true"></div>
-<h1 class="title">留白练习</h1>
-<p class="sub">CHAPTER<br>ZERO</p>
-<p class="copy">以一道横向色带，
-建立章节之间的停顿。</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 08</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/modular-grid.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>模块网格与索引 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.modular-grid .grid{position:absolute;left:7%;right:7%;top:28%;bottom:13%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2em}.pl-sheet.modular-grid .cell{padding:2em;background:var(--muted);font-size:2.6em}.pl-sheet.modular-grid .cell:first-child{background:var(--deep);color:var(--paper)}.pl-sheet.modular-grid .title{left:7%;top:10%;font-size:6.5em}.pl-sheet.modular-grid .copy{left:7%;bottom:5%;width:86%}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet modular-grid" aria-label="模块网格与索引排版示例">
-<h1 class="title">视觉档案</h1>
-<div class="grid"><div class="cell">01 / 观察</div><div class="cell">02 / 结构</div><div class="cell">03 / 材料</div><div class="cell">04 / 字体</div><div class="cell">05 / 色彩</div><div class="cell">06 / 留白</div></div>
-<p class="copy">INDEX / SIX DESIGN STUDIES</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 06</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/monumental-type.html

@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>巨字与裁切 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.monumental-type .panel-a{left:0;bottom:0;width:100%;height:40%;background:var(--deep)}.pl-sheet.monumental-type .display{position:absolute;left:-4%;top:26%;font:bold 24em/.8 Georgia,serif;letter-spacing:-.08em}.pl-sheet.monumental-type .title{left:7%;top:10%;font-size:6em}.pl-sheet.monumental-type .copy{left:7%;bottom:10%;width:60%;color:var(--paper)}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet monumental-type" aria-label="巨字与裁切排版示例">
-<div class="panel panel-a" aria-hidden="true"></div>
-<div class="display" aria-hidden="true">FORM</div>
-<h1 class="title">形式与留白</h1>
-<p class="copy">让一个词成为画面的重心。
-DESIGN STUDIES / 2026</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 03</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/offset-panels.html

@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>错位双矩形 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.offset-panels .panel-a{left:18%;top:16%;width:68%;height:37%}.pl-sheet.offset-panels .panel-b{left:37%;top:57%;width:49%;height:31%;background:var(--deep)}.pl-sheet.offset-panels .title{left:7%;top:6%;font-size:6em}.pl-sheet.offset-panels .copy{left:7%;top:66%;width:25%}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet offset-panels" aria-label="错位双矩形排版示例">
-<div class="panel panel-a" aria-hidden="true"></div>
-<div class="panel panel-b" aria-hidden="true"></div>
-<h1 class="title">秩序之间</h1>
-<p class="copy">以留白建立关系，
-让视线缓慢移动。</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 01</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/orbital-rings.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>同心圆与轨道 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.orbital-rings .orbit{position:absolute;left:14%;top:16%;width:72%;aspect-ratio:1;border-radius:50%;background:var(--deep);box-shadow:0 0 0 1.2em var(--paper),0 0 0 1.3em var(--muted),0 0 0 2.5em var(--paper),0 0 0 2.6em var(--muted),0 0 0 3.8em var(--paper),0 0 0 3.9em var(--muted)}.pl-sheet.orbital-rings .title{left:7%;bottom:15%;font-size:6.5em}.pl-sheet.orbital-rings .copy{left:7%;bottom:6%;width:80%}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet orbital-rings" aria-label="同心圆与轨道排版示例">
-<div class="orbit" aria-hidden="true"></div>
-<h1 class="title">周而复始</h1>
-<p class="copy">时间的形状 / ANNUAL REVIEW / 2026</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 04</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/organic-ellipse.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>有机椭圆与弧面 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.organic-ellipse .oval{position:absolute;left:24%;top:27%;width:102%;height:62%;border-radius:50%;transform:rotate(-12deg);background:var(--deep)}.pl-sheet.organic-ellipse .title{left:7%;top:10%;font-size:6.5em}.pl-sheet.organic-ellipse .copy{left:7%;bottom:7%;width:40%}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet organic-ellipse" aria-label="有机椭圆与弧面排版示例">
-<div class="oval" aria-hidden="true"></div>
-<h1 class="title">缓慢生长</h1>
-<p class="copy">一条曲线，
-一处停顿。</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 05</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/split-contrast.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>双区对照与大留白 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.split-contrast .dark{position:absolute;left:0;top:48%;width:100%;height:52%;background:var(--deep)}.pl-sheet.split-contrast .title{left:7%;top:12%;font-size:7.5em}.pl-sheet.split-contrast .answer{position:absolute;left:7%;top:59%;font-size:7.5em;line-height:1.1;color:var(--paper);margin:0}.pl-sheet.split-contrast .copy{left:7%;bottom:10%;width:80%;color:var(--paper)}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet split-contrast" aria-label="双区对照与大留白排版示例">
-<div class="dark" aria-hidden="true"></div>
-<h1 class="title">看见留白</h1>
-<h2 class="answer">读懂秩序</h2>
-<p class="copy">从空间到关系 / TWO PERSPECTIVES</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 11</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/type-frame.html

@@ -1,30 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>四角字框与中心场 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.type-frame .title{left:7%;top:7%;font-size:3em}.pl-sheet.type-frame .center{position:absolute;left:21%;top:25%;width:58%;height:52%;border-radius:50%;background:var(--muted)}.pl-sheet.type-frame .corners{position:absolute;inset:15% 7% 17%;display:grid;grid-template-columns:1fr 1fr;align-content:space-between;font:10em/1 "Songti SC",serif}.pl-sheet.type-frame .corners span:nth-child(even){text-align:right}.pl-sheet.type-frame .copy{left:7%;bottom:6%;width:86%}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet type-frame" aria-label="四角字框与中心场排版示例">
-<h1 class="title">高级排版 / FORM STUDIES</h1>
-<div class="center" aria-hidden="true"></div>
-<div class="corners" aria-hidden="true"><span>高</span><span>级</span><span>排</span><span>版</span></div>
-<p class="copy">四角建立边界，中央保留呼吸。</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 12</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-recipes/vertical-rail.html

@@ -1,29 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>窄轨竖排 · 排版示例</title>
-<style>
-*{box-sizing:border-box}
-body{margin:0;background:#e4e6e1;color:#243230}
-.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
-.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
-.pl-sheet .panel{position:absolute;background:var(--muted)}
-.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
-.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
-.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
- .pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
-@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
-.pl-sheet.vertical-rail .panel-a{left:7%;top:12%;width:64%;height:76%;background:var(--deep)}.pl-sheet.vertical-rail .title{right:8%;top:13%;writing-mode:vertical-rl;font-size:6.3em;letter-spacing:.15em}.pl-sheet.vertical-rail .copy{left:7%;bottom:5%;width:64%}
-</style>
-</head>
-<body>
-<div class="pl-frame"><article class="pl-sheet vertical-rail" aria-label="窄轨竖排排版示例">
-<div class="panel panel-a" aria-hidden="true"></div>
-<h1 class="title">静物的秩序</h1>
-<p class="copy">空间研究 / 第二辑 / 2026</p>
-<div class="edition"><span>FORM / STUDIES</span><span>2026 · 02</span></div>
-</article></div>
-</body>
-</html>

apps/wiki/public/layout-reference/ReferenceLayout.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type {CSSProperties} from 'react';
+import layouts from './manifest.json';
+export const layoutIds = ['ref-01','ref-02','ref-03','ref-04','ref-05','ref-06','ref-07','ref-08','ref-09','ref-10','ref-11','ref-12','ref-13','ref-14','ref-15','ref-16','ref-17','ref-18','ref-19','ref-20','ref-21','ref-22','ref-23','ref-24','ref-25','ref-26','ref-27'] as const;
+export type LayoutId=typeof layoutIds[number];
+export type Replacements={text?:Record<string,string>;images?:Record<string,string>};
+export function getLayout(id:string){return layouts.find(layout=>layout.id===id)}
+export function validateReplacements(id:string,replacements:Replacements){
+ const layout=getLayout(id);if(!layout)throw Error(`Unknown layout ID: ${id}`);
+ for(const[kind,values]of [['text',replacements.text],['image',replacements.images]] as const)for(const key of Object.keys(values||{})){
+  if(!layout.elements.some(e=>key===id+'/'+e.id&&e.kind===kind))throw Error(`Component does not belong to ${id} or has the wrong kind: ${key}`);
+ }return layout;
+}
+function textStyle(text:string,box:number[],width:number,direction:string):CSSProperties{
+ const vertical=direction==='vertical'||direction==='rotated',lines=text.split('\n'),units=Math.max(...lines.map(line=>Array.from(line).reduce((n,c)=>n+(/[\u3400-\u9fff]/.test(c)?1:.56),0)),1);
+ const size=vertical?Math.min(box[2],box[3]/Math.max(text.length,1)):Math.min(box[3]/(lines.length*1.1),box[2]/units);
+ return {fontSize:`${size/width*100}cqw`,lineHeight:1.1,whiteSpace:'pre-wrap',writingMode:vertical?'vertical-rl':undefined,textOrientation:direction==='rotated'?'sideways':undefined,transform:direction==='angled'?'rotate(-12deg)':undefined,transformOrigin:'left center',color:'#222',fontFamily:'"Songti SC", "Noto Serif CJK SC", serif'};
+}
+/** Untouched mode reconstructs typed source layers; replacement mode keeps the exact preset geometry. */
+export default function ReferenceLayout({id,text={},images={},assetBase=''}:{id:LayoutId;text?:Record<string,string>;images?:Record<string,string>;assetBase?:string}){
+ const layout=validateReplacements(id,{text,images}),src=(url:string)=>assetBase+url;
+ return <figure data-layout-id={id} aria-label={`${id} ${layout.name}`} style={{margin:0,width:'min(100%, 672px)',containerType:'inline-size'}}>
+  <div style={{position:'relative',width:'100%',aspectRatio:`${layout.width}/${layout.height}`,isolation:'isolate',background:'#f4f3ee'}}>
+   <img src={src(layout.background)} alt="" width={layout.width} height={layout.height} style={{position:'absolute',inset:0,width:'100%',height:'100%'}}/>
+   {layout.elements.map(e=>{
+    const[x,y,w,h]=e.box,key=id+'/'+e.id,position:CSSProperties={position:'absolute',left:x/layout.width*100+'%',top:y/layout.height*100+'%',width:w/layout.width*100+'%',height:h/layout.height*100+'%',zIndex:e.kind==='text'?3:e.kind==='decoration'?2:1};
+    if(e.kind==='text'&&Object.hasOwn(text,key)){
+     if(e.direction==='curved')throw Error(`Curved text requires the source-specific SVG path: ${key}`);
+     return <React.Fragment key={key}>
+      {'underlay' in e&&<img src={src(String(e.underlay))} alt="" style={position}/>}
+      <span data-component={key} data-kind="text" style={{...position,...textStyle(text[key],e.box,layout.width,e.direction)}}>{text[key]}</span>
+     </React.Fragment>;
+    }
+    if(e.kind==='image'&&Object.hasOwn(images,key))return <img key={key} data-component={key} data-kind="image" src={images[key]} alt={e.role} style={{...position,objectFit:'cover',maskImage:'mask' in e?`url("${src(String(e.mask))}")`:undefined,maskSize:'100% 100%'}}/>;
+    return <img key={key} data-component={key} data-kind={e.kind} src={src(e.asset)} alt={e.kind==='text'?e.text||`${e.role}：原字形保真，内容未辨识`:''} width={w} height={h} style={position}/>;
+   })}
+  </div>
+ </figure>;
+}

apps/wiki/public/layout-reference/index.json

@@ -0,0 +1,466 @@
+{
+  "version": 2,
+  "sourceSha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+  "numbering": "row-major; exclude left title banner",
+  "layouts": [
+    {
+      "id": "ref-01",
+      "name": "双矩形错位与左下说明",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          135,
+          46,
+          113,
+          171
+        ],
+        "row": 1,
+        "column": 2
+      },
+      "manifest": "/layout-reference/ref-01/manifest.json"
+    },
+    {
+      "id": "ref-02",
+      "name": "四格图片列与双列竖题",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          256,
+          46,
+          112,
+          171
+        ],
+        "row": 1,
+        "column": 3
+      },
+      "manifest": "/layout-reference/ref-02/manifest.json"
+    },
+    {
+      "id": "ref-03",
+      "name": "左上标题与右下错位图",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          376,
+          46,
+          114,
+          173
+        ],
+        "row": 1,
+        "column": 4
+      },
+      "manifest": "/layout-reference/ref-03/manifest.json"
+    },
+    {
+      "id": "ref-04",
+      "name": "满版灰底椭圆与右侧白字",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          497,
+          45,
+          113,
+          173
+        ],
+        "row": 1,
+        "column": 5
+      },
+      "manifest": "/layout-reference/ref-04/manifest.json"
+    },
+    {
+      "id": "ref-05",
+      "name": "五圆出血与右侧竖排大字",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          617,
+          45,
+          112,
+          172
+        ],
+        "row": 1,
+        "column": 6
+      },
+      "manifest": "/layout-reference/ref-05/manifest.json"
+    },
+    {
+      "id": "ref-06",
+      "name": "满高左图与右侧窄栏",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          134,
+          228,
+          114,
+          172
+        ],
+        "row": 2,
+        "column": 2
+      },
+      "manifest": "/layout-reference/ref-06/manifest.json"
+    },
+    {
+      "id": "ref-07",
+      "name": "同心圆图位与底部年份",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          256,
+          228,
+          112,
+          172
+        ],
+        "row": 2,
+        "column": 3
+      },
+      "manifest": "/layout-reference/ref-07/manifest.json"
+    },
+    {
+      "id": "ref-08",
+      "name": "双层满宽图与字距横栏",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          376,
+          227,
+          113,
+          173
+        ],
+        "row": 2,
+        "column": 4
+      },
+      "manifest": "/layout-reference/ref-08/manifest.json"
+    },
+    {
+      "id": "ref-09",
+      "name": "左侧分字标题与右侧长图",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          497,
+          227,
+          113,
+          173
+        ],
+        "row": 2,
+        "column": 5
+      },
+      "manifest": "/layout-reference/ref-09/manifest.json"
+    },
+    {
+      "id": "ref-10",
+      "name": "半页深底与裁切英文 blue",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          616,
+          227,
+          113,
+          173
+        ],
+        "row": 2,
+        "column": 6
+      },
+      "manifest": "/layout-reference/ref-10/manifest.json"
+    },
+    {
+      "id": "ref-11",
+      "name": "左上双行标题与右下主图",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          135,
+          410,
+          114,
+          173
+        ],
+        "row": 3,
+        "column": 2
+      },
+      "manifest": "/layout-reference/ref-11/manifest.json"
+    },
+    {
+      "id": "ref-12",
+      "name": "三图模块与左侧分散字框",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          256,
+          409,
+          112,
+          173
+        ],
+        "row": 3,
+        "column": 3
+      },
+      "manifest": "/layout-reference/ref-12/manifest.json"
+    },
+    {
+      "id": "ref-13",
+      "name": "横题与右侧出血扁椭圆",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          376,
+          410,
+          114,
+          173
+        ],
+        "row": 3,
+        "column": 4
+      },
+      "manifest": "/layout-reference/ref-13/manifest.json"
+    },
+    {
+      "id": "ref-14",
+      "name": "大矩形与小方图及居中横题",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          497,
+          409,
+          113,
+          174
+        ],
+        "row": 3,
+        "column": 5
+      },
+      "manifest": "/layout-reference/ref-14/manifest.json"
+    },
+    {
+      "id": "ref-15",
+      "name": "英文双行刊头与四分之一圆图",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          617,
+          409,
+          112,
+          173
+        ],
+        "row": 3,
+        "column": 6
+      },
+      "manifest": "/layout-reference/ref-15/manifest.json"
+    },
+    {
+      "id": "ref-16",
+      "name": "上下灰阶色带与底部白区",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          15,
+          592,
+          113,
+          173
+        ],
+        "row": 4,
+        "column": 1
+      },
+      "manifest": "/layout-reference/ref-16/manifest.json"
+    },
+    {
+      "id": "ref-17",
+      "name": "英文刊头与圆形叠标及窄栏",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          135,
+          591,
+          113,
+          174
+        ],
+        "row": 4,
+        "column": 2
+      },
+      "manifest": "/layout-reference/ref-17/manifest.json"
+    },
+    {
+      "id": "ref-18",
+      "name": "上大图与下方英文双行",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          256,
+          591,
+          113,
+          174
+        ],
+        "row": 4,
+        "column": 3
+      },
+      "manifest": "/layout-reference/ref-18/manifest.json"
+    },
+    {
+      "id": "ref-19",
+      "name": "四角大字与中央双圆竖题",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          376,
+          593,
+          113,
+          171
+        ],
+        "row": 4,
+        "column": 4
+      },
+      "manifest": "/layout-reference/ref-19/manifest.json"
+    },
+    {
+      "id": "ref-20",
+      "name": "右上大弧面与左下圆形标题",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          496,
+          592,
+          114,
+          173
+        ],
+        "row": 4,
+        "column": 5
+      },
+      "manifest": "/layout-reference/ref-20/manifest.json"
+    },
+    {
+      "id": "ref-21",
+      "name": "右侧旋转英文与节点方图",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          616,
+          592,
+          114,
+          173
+        ],
+        "row": 4,
+        "column": 6
+      },
+      "manifest": "/layout-reference/ref-21/manifest.json"
+    },
+    {
+      "id": "ref-22",
+      "name": "三段斜切背景与右侧白字",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          15,
+          774,
+          113,
+          173
+        ],
+        "row": 5,
+        "column": 1
+      },
+      "manifest": "/layout-reference/ref-22/manifest.json"
+    },
+    {
+      "id": "ref-23",
+      "name": "上方方图与中部大写英文",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          134,
+          775,
+          114,
+          172
+        ],
+        "row": 5,
+        "column": 2
+      },
+      "manifest": "/layout-reference/ref-23/manifest.json"
+    },
+    {
+      "id": "ref-24",
+      "name": "斜排中文与倾斜装饰线框",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          256,
+          775,
+          113,
+          172
+        ],
+        "row": 5,
+        "column": 3
+      },
+      "manifest": "/layout-reference/ref-24/manifest.json"
+    },
+    {
+      "id": "ref-25",
+      "name": "左侧竖题与右下方形主图",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          376,
+          774,
+          113,
+          173
+        ],
+        "row": 5,
+        "column": 4
+      },
+      "manifest": "/layout-reference/ref-25/manifest.json"
+    },
+    {
+      "id": "ref-26",
+      "name": "三行英文与曲线指引小图",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          496,
+          774,
+          114,
+          173
+        ],
+        "row": 5,
+        "column": 5
+      },
+      "manifest": "/layout-reference/ref-26/manifest.json"
+    },
+    {
+      "id": "ref-27",
+      "name": "对角双区与斜向文字带",
+      "source": {
+        "url": "/layout-reference/source.png",
+        "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+        "box": [
+          618,
+          774,
+          112,
+          172
+        ],
+        "row": 5,
+        "column": 6
+      },
+      "manifest": "/layout-reference/ref-27/manifest.json"
+    }
+  ]
+}

apps/wiki/public/layout-reference/ref-01/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-01 · 双矩形错位与左下说明</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:113/171;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-01 / 双矩形错位与左下说明</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-01/background.png" alt="原图纸底与画框">
+<img data-component="ref-01/T01" data-kind="text" src="/layout-reference/ref-01/T01.png" alt="BULUBLUE" style="left:7.079646017699115%;top:11.695906432748536%;width:31.858407079646017%;height:8.771929824561402%">
+<img data-component="ref-01/T02" data-kind="text" src="/layout-reference/ref-01/T02.png" alt="左下说明（未辨识原字形）" style="left:6.1946902654867255%;top:70.76023391812866%;width:38.93805309734513%;height:19.883040935672515%">
+<img data-component="ref-01/I01" data-kind="image" src="/layout-reference/ref-01/I01.png" alt="" style="left:21.238938053097346%;top:8.187134502923977%;width:68.14159292035397%;height:41.52046783625731%">
+<img data-component="ref-01/I02" data-kind="image" src="/layout-reference/ref-01/I02.png" alt="" style="left:37.16814159292036%;top:52.046783625730995%;width:52.21238938053098%;height:40.93567251461988%">
+<img data-component="ref-01/D01" data-kind="decoration" src="/layout-reference/ref-01/D01.png" alt="" style="left:36.283185840707965%;top:2.3391812865497075%;width:25.663716814159294%;height:1.7543859649122806%">
+<img data-component="ref-01/D02" data-kind="decoration" src="/layout-reference/ref-01/D02.png" alt="" style="left:25.663716814159294%;top:92.39766081871345%;width:51.32743362831859%;height:4.678362573099415%">
+<img class="overlay" src="/layout-reference/ref-01/annotated.png" alt="构件标注"></div><p class="muted">原图第 1 行、第 2 列；113×171 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 品牌字标</td><td>BULUBLUE</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 左下说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 上方主图</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 下方副图</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 顶部短线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 底部横线</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-01/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-01/source.png">原裁片</a> · <a href="/layout-reference/ref-01/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
+const manifest={"id":"ref-01","name":"双矩形错位与左下说明","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[135,46,113,171],"row":1,"column":2},"width":113,"height":171,"reference":"/layout-reference/ref-01/source.png","annotated":"/layout-reference/ref-01/annotated.png","background":"/layout-reference/ref-01/background.png","elements":[{"id":"T01","kind":"text","role":"品牌字标","box":[8,20,36,15],"text":"BULUBLUE","direction":"horizontal","reading":"verified","asset":"/layout-reference/ref-01/T01.png","pixels":274,"underlay":"/layout-reference/ref-01/T01-underlay.png"},{"id":"T02","kind":"text","role":"左下说明","box":[7,121,44,34],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-01/T02.png","pixels":468,"underlay":"/layout-reference/ref-01/T02-underlay.png"},{"id":"I01","kind":"image","role":"上方主图","box":[24,14,77,71],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-01/I01.png","pixels":5259,"mask":"/layout-reference/ref-01/I01-mask.png"},{"id":"I02","kind":"image","role":"下方副图","box":[42,89,59,70],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-01/I02.png","pixels":4097,"mask":"/layout-reference/ref-01/I02-mask.png"},{"id":"D01","kind":"decoration","role":"顶部短线","box":[41,4,29,3],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-01/D01.png","pixels":55},{"id":"D02","kind":"decoration","role":"底部横线","box":[29,158,58,8],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-01/D02.png","pixels":167}],"ocr":[{"box":[0.07374631491782553,0.12865497059314956,0.31268436578171094,0.06237816764132553],"confidence":0.5,"text":"BULUBLUE"}],"verification":{"pixelIdentical":true,"pixels":19323,"unreadableText":1}};
+for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
+document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
+for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
+</script></body></html>

apps/wiki/public/layout-reference/ref-01/manifest.json

@@ -0,0 +1,140 @@
+{
+  "id": "ref-01",
+  "name": "双矩形错位与左下说明",
+  "source": {
+    "url": "/layout-reference/source.png",
+    "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+    "box": [
+      135,
+      46,
+      113,
+      171
+    ],
+    "row": 1,
+    "column": 2
+  },
+  "width": 113,
+  "height": 171,
+  "reference": "/layout-reference/ref-01/source.png",
+  "annotated": "/layout-reference/ref-01/annotated.png",
+  "background": "/layout-reference/ref-01/background.png",
+  "elements": [
+    {
+      "id": "T01",
+      "kind": "text",
+      "role": "品牌字标",
+      "box": [
+        8,
+        20,
+        36,
+        15
+      ],
+      "text": "BULUBLUE",
+      "direction": "horizontal",
+      "reading": "verified",
+      "asset": "/layout-reference/ref-01/T01.png",
+      "pixels": 274,
+      "underlay": "/layout-reference/ref-01/T01-underlay.png"
+    },
+    {
+      "id": "T02",
+      "kind": "text",
+      "role": "左下说明",
+      "box": [
+        7,
+        121,
+        44,
+        34
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "unreadable",
+      "asset": "/layout-reference/ref-01/T02.png",
+      "pixels": 468,
+      "underlay": "/layout-reference/ref-01/T02-underlay.png"
+    },
+    {
+      "id": "I01",
+      "kind": "image",
+      "role": "上方主图",
+      "box": [
+        24,
+        14,
+        77,
+        71
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-01/I01.png",
+      "pixels": 5259,
+      "mask": "/layout-reference/ref-01/I01-mask.png"
+    },
+    {
+      "id": "I02",
+      "kind": "image",
+      "role": "下方副图",
+      "box": [
+        42,
+        89,
+        59,
+        70
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-01/I02.png",
+      "pixels": 4097,
+      "mask": "/layout-reference/ref-01/I02-mask.png"
+    },
+    {
+      "id": "D01",
+      "kind": "decoration",
+      "role": "顶部短线",
+      "box": [
+        41,
+        4,
+        29,
+        3
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-01/D01.png",
+      "pixels": 55
+    },
+    {
+      "id": "D02",
+      "kind": "decoration",
+      "role": "底部横线",
+      "box": [
+        29,
+        158,
+        58,
+        8
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-01/D02.png",
+      "pixels": 167
+    }
+  ],
+  "ocr": [
+    {
+      "box": [
+        0.07374631491782553,
+        0.12865497059314956,
+        0.31268436578171094,
+        0.06237816764132553
+      ],
+      "confidence": 0.5,
+      "text": "BULUBLUE"
+    }
+  ],
+  "verification": {
+    "pixelIdentical": true,
+    "pixels": 19323,
+    "unreadableText": 1
+  }
+}

apps/wiki/public/layout-reference/ref-02/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ref-02 · 四格图片列与双列竖题</title><style>body{margin:0;padding:20px;background:#e8e8e3;color:#222;font:15px/1.7 system-ui}main{display:grid;grid-template-columns:minmax(280px,560px) minmax(280px,1fr);gap:24px;max-width:1250px;margin:auto}.canvas{position:relative;isolation:isolate;aspect-ratio:112/171;background:#f4f3ee}.canvas img{position:absolute;display:block}.canvas .base{inset:0;width:100%;height:100%}.overlay{position:absolute;z-index:10;pointer-events:none;inset:0;width:100%;height:100%;display:none}label{display:inline-flex;gap:5px;margin-right:16px}button,a{color:#244f9d}table{width:100%;border-collapse:collapse}td,th{padding:7px;border-bottom:1px solid #bbb;text-align:left;font-size:13px}.muted{color:#666}#detail{padding:12px;background:#fff}tr{cursor:pointer}tr:focus,tr:hover{background:#fff}fieldset{border:1px solid #aaa;margin:0 0 16px}.canvas img[data-kind="text"]{z-index:3}.canvas img[data-kind="decoration"]{z-index:2}.canvas img[data-kind="image"]{z-index:1}@media(max-width:800px){main{display:block}.canvas{max-width:560px;margin:auto}aside{margin-top:24px}}</style></head><body><main><section><h1>ref-02 / 四格图片列与双列竖题</h1><div class="canvas" aria-label="按独立图层重建的原版面"><img class="base" src="/layout-reference/ref-02/background.png" alt="原图纸底与画框">
+<img data-component="ref-02/T01" data-kind="text" src="/layout-reference/ref-02/T01.png" alt="蓝羽毛版式设计系列" style="left:81.25%;top:0%;width:17.857142857142858%;height:73.68421052631578%">
+<img data-component="ref-02/T02" data-kind="text" src="/layout-reference/ref-02/T02.png" alt="版式灵感收藏" style="left:62.5%;top:0%;width:16.964285714285715%;height:49.122807017543856%">
+<img data-component="ref-02/T03" data-kind="text" src="/layout-reference/ref-02/T03.png" alt="图片一图注（未辨识原字形）" style="left:0%;top:19.883040935672515%;width:17.857142857142858%;height:2.3391812865497075%">
+<img data-component="ref-02/T04" data-kind="text" src="/layout-reference/ref-02/T04.png" alt="图片二图注（未辨识原字形）" style="left:0%;top:41.52046783625731%;width:25.892857142857146%;height:2.3391812865497075%">
+<img data-component="ref-02/T05" data-kind="text" src="/layout-reference/ref-02/T05.png" alt="图片三图注（未辨识原字形）" style="left:1.7857142857142856%;top:77.19298245614034%;width:33.035714285714285%;height:1.7543859649122806%">
+<img data-component="ref-02/T06" data-kind="text" src="/layout-reference/ref-02/T06.png" alt="右下说明（未辨识原字形）" style="left:44.642857142857146%;top:47.368421052631575%;width:28.57142857142857%;height:33.33333333333333%">
+<img data-component="ref-02/T07" data-kind="text" src="/layout-reference/ref-02/T07.png" alt="右下品牌与说明（未辨识原字形）" style="left:45.535714285714285%;top:83.62573099415205%;width:45.535714285714285%;height:8.187134502923977%">
+<img data-component="ref-02/I01" data-kind="image" src="/layout-reference/ref-02/I01.png" alt="" style="left:3.571428571428571%;top:1.7543859649122806%;width:35.714285714285715%;height:17.543859649122805%">
+<img data-component="ref-02/I02" data-kind="image" src="/layout-reference/ref-02/I02.png" alt="" style="left:1.7857142857142856%;top:22.22222222222222%;width:39.285714285714285%;height:19.298245614035086%">
+<img data-component="ref-02/I03" data-kind="image" src="/layout-reference/ref-02/I03.png" alt="" style="left:1.7857142857142856%;top:43.27485380116959%;width:39.285714285714285%;height:32.748538011695906%">
+<img data-component="ref-02/I04" data-kind="image" src="/layout-reference/ref-02/I04.png" alt="" style="left:1.7857142857142856%;top:78.94736842105263%;width:39.285714285714285%;height:16.95906432748538%">
+<img data-component="ref-02/D01" data-kind="decoration" src="/layout-reference/ref-02/D01.png" alt="" style="left:58.03571428571429%;top:1.1695906432748537%;width:1.7857142857142856%;height:42.10526315789473%">
+<img data-component="ref-02/D02" data-kind="decoration" src="/layout-reference/ref-02/D02.png" alt="" style="left:44.642857142857146%;top:92.39766081871345%;width:50.89285714285714%;height:7.017543859649122%">
+<img class="overlay" src="/layout-reference/ref-02/annotated.png" alt="构件标注"></div><p class="muted">原图第 1 行、第 3 列；112×171 像素。显示为原始构件重组，无新生成图形。放大不增加细节。</p></section><aside><fieldset><legend>按类型检查</legend><label><input type="checkbox" data-toggle="text" checked>文字 T</label><label><input type="checkbox" data-toggle="image" checked>图片/色块 I</label><label><input type="checkbox" data-toggle="decoration" checked>装饰 D</label><label><input id="labels" type="checkbox">显示边界</label></fieldset><p id="detail">点击表格查看对应构件。蓝色 T 为文字、橙色 I 为图片占位/色块、绿色 D 为装饰；原图没有真实照片。</p><table><thead><tr><th>ID</th><th>分类与用途</th><th>文字内容</th></tr></thead><tbody><tr tabindex="0" data-key="T01"><td>T01</td><td>文字 / 右侧主标题</td><td>蓝羽毛版式设计系列</td></tr><tr tabindex="0" data-key="T02"><td>T02</td><td>文字 / 中间副标题</td><td>版式灵感收藏</td></tr><tr tabindex="0" data-key="T03"><td>T03</td><td>文字 / 图片一图注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T04"><td>T04</td><td>文字 / 图片二图注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T05"><td>T05</td><td>文字 / 图片三图注</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T06"><td>T06</td><td>文字 / 右下说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="T07"><td>T07</td><td>文字 / 右下品牌与说明</td><td>待核对，保留原字形</td></tr><tr tabindex="0" data-key="I01"><td>I01</td><td>图片占位/色块 / 图片一</td><td>—</td></tr><tr tabindex="0" data-key="I02"><td>I02</td><td>图片占位/色块 / 图片二</td><td>—</td></tr><tr tabindex="0" data-key="I03"><td>I03</td><td>图片占位/色块 / 图片三</td><td>—</td></tr><tr tabindex="0" data-key="I04"><td>I04</td><td>图片占位/色块 / 图片四</td><td>—</td></tr><tr tabindex="0" data-key="D01"><td>D01</td><td>装饰 / 分栏细线</td><td>—</td></tr><tr tabindex="0" data-key="D02"><td>D02</td><td>装饰 / 右下横线组</td><td>—</td></tr></tbody></table><p><a href="/layout-reference/ref-02/manifest.json">构件 JSON</a> · <a href="/layout-reference/ref-02/source.png">原裁片</a> · <a href="/layout-reference/ref-02/annotated.png">标注图</a> · <a href="/layout-reference/index.html">27 张索引</a></p><p class="muted">修改文字会产生字体差异；替换图片会改变视觉内容。严格原图对应模式保持原字形与原颜色。构件坐标、方向与所属版面固定。</p></aside></main><script>
+const manifest={"id":"ref-02","name":"四格图片列与双列竖题","source":{"url":"/layout-reference/source.png","sha256":"121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc","box":[256,46,112,171],"row":1,"column":3},"width":112,"height":171,"reference":"/layout-reference/ref-02/source.png","annotated":"/layout-reference/ref-02/annotated.png","background":"/layout-reference/ref-02/background.png","elements":[{"id":"T01","kind":"text","role":"右侧主标题","box":[91,0,20,126],"text":"蓝羽毛版式设计系列","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-02/T01.png","pixels":1348,"underlay":"/layout-reference/ref-02/T01-underlay.png"},{"id":"T02","kind":"text","role":"中间副标题","box":[70,0,19,84],"text":"版式灵感收藏","direction":"vertical","reading":"verified","asset":"/layout-reference/ref-02/T02.png","pixels":776,"underlay":"/layout-reference/ref-02/T02-underlay.png"},{"id":"T03","kind":"text","role":"图片一图注","box":[0,34,20,4],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T03.png","pixels":28,"underlay":"/layout-reference/ref-02/T03-underlay.png"},{"id":"T04","kind":"text","role":"图片二图注","box":[0,71,29,4],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T04.png","pixels":74,"underlay":"/layout-reference/ref-02/T04-underlay.png"},{"id":"T05","kind":"text","role":"图片三图注","box":[2,132,37,3],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T05.png","pixels":39,"underlay":"/layout-reference/ref-02/T05-underlay.png"},{"id":"T06","kind":"text","role":"右下说明","box":[50,81,32,57],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T06.png","pixels":348,"underlay":"/layout-reference/ref-02/T06-underlay.png"},{"id":"T07","kind":"text","role":"右下品牌与说明","box":[51,143,51,14],"text":null,"direction":"horizontal","reading":"unreadable","asset":"/layout-reference/ref-02/T07.png","pixels":483,"underlay":"/layout-reference/ref-02/T07-underlay.png"},{"id":"I01","kind":"image","role":"图片一","box":[4,3,40,30],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/I01.png","pixels":1198,"mask":"/layout-reference/ref-02/I01-mask.png"},{"id":"I02","kind":"image","role":"图片二","box":[2,38,44,33],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/I02.png","pixels":1443,"mask":"/layout-reference/ref-02/I02-mask.png"},{"id":"I03","kind":"image","role":"图片三","box":[2,74,44,56],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/I03.png","pixels":2421,"mask":"/layout-reference/ref-02/I03-mask.png"},{"id":"I04","kind":"image","role":"图片四","box":[2,135,44,29],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/I04.png","pixels":1276,"mask":"/layout-reference/ref-02/I04-mask.png"},{"id":"D01","kind":"decoration","role":"分栏细线","box":[65,2,2,72],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/D01.png","pixels":143},{"id":"D02","kind":"decoration","role":"右下横线组","box":[50,158,57,12],"text":null,"direction":"horizontal","reading":"not-text","asset":"/layout-reference/ref-02/D02.png","pixels":407}],"ocr":[],"verification":{"pixelIdentical":true,"pixels":19152,"unreadableText":5}};
+for(const input of document.querySelectorAll('[data-toggle]'))input.addEventListener('change',()=>{for(const el of document.querySelectorAll('[data-kind="'+input.dataset.toggle+'"]'))el.style.visibility=input.checked?'visible':'hidden'});
+document.getElementById('labels').addEventListener('change',event=>{document.querySelector('.overlay').style.display=event.target.checked?'block':'none'});
+for(const row of document.querySelectorAll('[data-key]')){const select=()=>{const e=manifest.elements.find(e=>e.id===row.dataset.key);for(const el of document.querySelectorAll('[data-component]'))el.style.outline=el.dataset.component.endsWith('/'+e.id)?'2px solid #ed4433':'';document.getElementById('detail').textContent=manifest.id+'/'+e.id+' · '+e.kind+' · '+e.role+' · bbox ['+e.box.join(', ')+']'+(e.kind==='text'?' · '+(e.text||'内容未辨识，保留原字形'):'')};row.addEventListener('click',select);row.addEventListener('keydown',event=>{if(event.key==='Enter'||event.key===' '){event.preventDefault();select()}})}
+</script></body></html>

apps/wiki/public/layout-reference/ref-02/manifest.json

@@ -0,0 +1,248 @@
+{
+  "id": "ref-02",
+  "name": "四格图片列与双列竖题",
+  "source": {
+    "url": "/layout-reference/source.png",
+    "sha256": "121ab8a362c45eee86281ca5dfbbe33577cfcd255579a16c3542530484b9f1dc",
+    "box": [
+      256,
+      46,
+      112,
+      171
+    ],
+    "row": 1,
+    "column": 3
+  },
+  "width": 112,
+  "height": 171,
+  "reference": "/layout-reference/ref-02/source.png",
+  "annotated": "/layout-reference/ref-02/annotated.png",
+  "background": "/layout-reference/ref-02/background.png",
+  "elements": [
+    {
+      "id": "T01",
+      "kind": "text",
+      "role": "右侧主标题",
+      "box": [
+        91,
+        0,
+        20,
+        126
+      ],
+      "text": "蓝羽毛版式设计系列",
+      "direction": "vertical",
+      "reading": "verified",
+      "asset": "/layout-reference/ref-02/T01.png",
+      "pixels": 1348,
+      "underlay": "/layout-reference/ref-02/T01-underlay.png"
+    },
+    {
+      "id": "T02",
+      "kind": "text",
+      "role": "中间副标题",
+      "box": [
+        70,
+        0,
+        19,
+        84
+      ],
+      "text": "版式灵感收藏",
+      "direction": "vertical",
+      "reading": "verified",
+      "asset": "/layout-reference/ref-02/T02.png",
+      "pixels": 776,
+      "underlay": "/layout-reference/ref-02/T02-underlay.png"
+    },
+    {
+      "id": "T03",
+      "kind": "text",
+      "role": "图片一图注",
+      "box": [
+        0,
+        34,
+        20,
+        4
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "unreadable",
+      "asset": "/layout-reference/ref-02/T03.png",
+      "pixels": 28,
+      "underlay": "/layout-reference/ref-02/T03-underlay.png"
+    },
+    {
+      "id": "T04",
+      "kind": "text",
+      "role": "图片二图注",
+      "box": [
+        0,
+        71,
+        29,
+        4
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "unreadable",
+      "asset": "/layout-reference/ref-02/T04.png",
+      "pixels": 74,
+      "underlay": "/layout-reference/ref-02/T04-underlay.png"
+    },
+    {
+      "id": "T05",
+      "kind": "text",
+      "role": "图片三图注",
+      "box": [
+        2,
+        132,
+        37,
+        3
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "unreadable",
+      "asset": "/layout-reference/ref-02/T05.png",
+      "pixels": 39,
+      "underlay": "/layout-reference/ref-02/T05-underlay.png"
+    },
+    {
+      "id": "T06",
+      "kind": "text",
+      "role": "右下说明",
+      "box": [
+        50,
+        81,
+        32,
+        57
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "unreadable",
+      "asset": "/layout-reference/ref-02/T06.png",
+      "pixels": 348,
+      "underlay": "/layout-reference/ref-02/T06-underlay.png"
+    },
+    {
+      "id": "T07",
+      "kind": "text",
+      "role": "右下品牌与说明",
+      "box": [
+        51,
+        143,
+        51,
+        14
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "unreadable",
+      "asset": "/layout-reference/ref-02/T07.png",
+      "pixels": 483,
+      "underlay": "/layout-reference/ref-02/T07-underlay.png"
+    },
+    {
+      "id": "I01",
+      "kind": "image",
+      "role": "图片一",
+      "box": [
+        4,
+        3,
+        40,
+        30
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-02/I01.png",
+      "pixels": 1198,
+      "mask": "/layout-reference/ref-02/I01-mask.png"
+    },
+    {
+      "id": "I02",
+      "kind": "image",
+      "role": "图片二",
+      "box": [
+        2,
+        38,
+        44,
+        33
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-02/I02.png",
+      "pixels": 1443,
+      "mask": "/layout-reference/ref-02/I02-mask.png"
+    },
+    {
+      "id": "I03",
+      "kind": "image",
+      "role": "图片三",
+      "box": [
+        2,
+        74,
+        44,
+        56
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-02/I03.png",
+      "pixels": 2421,
+      "mask": "/layout-reference/ref-02/I03-mask.png"
+    },
+    {
+      "id": "I04",
+      "kind": "image",
+      "role": "图片四",
+      "box": [
+        2,
+        135,
+        44,
+        29
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-02/I04.png",
+      "pixels": 1276,
+      "mask": "/layout-reference/ref-02/I04-mask.png"
+    },
+    {
+      "id": "D01",
+      "kind": "decoration",
+      "role": "分栏细线",
+      "box": [
+        65,
+        2,
+        2,
+        72
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-02/D01.png",
+      "pixels": 143
+    },
+    {
+      "id": "D02",
+      "kind": "decoration",
+      "role": "右下横线组",
+      "box": [
+        50,
+        158,
+        57,
+        12
+      ],
+      "text": null,
+      "direction": "horizontal",
+      "reading": "not-text",
+      "asset": "/layout-reference/ref-02/D02.png",
+      "pixels": 407
+    }
+  ],
+  "ocr": [],
+  "verification": {
+    "pixelIdentical": true,
+    "pixels": 19152,
+    "unreadableText": 5
+  }
+}