Replace approximate recipes with 27 source-matched component layouts

docs/premium-layouts.md

@@ -1,42 +1,39 @@
-# 高级感排版文档组
+# 27 张原图对应排版
 
-新增 13 篇指导 post：一篇设计 Router 与 12 篇构图配方。通过已有指导文档注册表进入首页、分类与独立详情；每篇共用相同 ID 的网页和 `?agent_mode=True` 纯文本，不另外复制数据库 post。
+本组发布 27 张原图一一对应的设计 post，加 1 篇 Router。替换此前的 12 套概括构图；原 Router ID 保持稳定，旧 12 篇 post ID 跳转 Router，不擅自映射到一张近似设计。
 
-## 文件与目的
+## 原图与编号
 
-- `apps/wiki/src/content/layouts/recipes.json`：12 套构图的适用条件、几何参数、步骤、独立 CSS/HTML、验收条件及封面结构图形。
-- `apps/wiki/src/content/layouts/documents.ts`：Router、输入/输出协议、调度选择器、字体与图片策略、阅读模式、公共 CSS，以及逐篇生成完整 HTML、支持属性的 React TSX 与 Next.js App Router 接入代码。
-- `apps/wiki/src/content/skills/guidance.ts`：将 13 篇内容接入既有全局文档注册表，并排在首页前部；沿用分类、正文与反向引用机制。
-- `apps/wiki/src/content/page-ids.json`：为 13 篇文档持久保存独立 ID，标题与排序变化不改变地址。
-- `apps/wiki/scripts/generate-layout-recipes.ts`：重新生成独立 HTML 演示和 PNG 结构封面，无第三方素材和浏览器依赖。
-- `apps/wiki/public/layout-recipes/router.png`：12 套构图的总览封面。
-- `apps/wiki/scripts/smoke.mjs`：以响应类型与 Markdown 开头检查纯文本，允许教程代码块合法包含 HTML。
-- `apps/wiki/tests/explore.test.ts`：新增回归检查，确保 agent 模式原样保留 HTML 与 TSX 代码示例。
-- `docs/premium-layouts.md`：内容入口、文件职责、重建与验证说明（本文）。
+用户提供的 736×980 拼图中，排除左侧“高级感排版”说明栏；从上到下、每行从左到右编号 ref-01…ref-27。前 3 行各 5 张，后 2 行各 6 张，左下两张计入。`public/layout-reference/numbered-source.png` 给出准确位置；`index.json` 为机器入口。
 
-以下每个文件基名各对应 `.html` 与 `.png` 两个文件，全部位于 `apps/wiki/public/layout-recipes/`。HTML 为实际可运行示例；PNG 是独立绘制的结构示意，明确标注并非代码截图。
+## 识别流程
 
-| 文件基名 | 构图与目的 |
-| --- | --- |
-| `offset-panels` | 错位双矩形：两张主图的主次与边缘对齐 |
-| `vertical-rail` | 窄轨竖排：短中文标题与主图并列 |
-| `monumental-type` | 巨字与裁切：通过装饰英文建立宣言重心 |
-| `orbital-rings` | 同心圆与轨道：表达周期与时间 |
-| `organic-ellipse` | 有机椭圆与弧面：柔和品牌的出血曲线 |
-| `modular-grid` | 模块网格与索引：六项内容的秩序 |
-| `editorial-serif` | 衬线刊头与杂志栏：文化导读的刊头与边栏 |
-| `horizontal-band` | 横向色带与断层：章节之间的视觉停顿 |
-| `diagonal-cards` | 轻斜卡片与拼贴：实验记录的纸张层次 |
-| `annotation-lines` | 细线标注与技术图录：对象与短标注的对应关系 |
-| `split-contrast` | 双区对照与大留白：上下两种观点的对照 |
-| `type-frame` | 四角字框与中心场：语义标题与装饰副本分离 |
+`segment-layout-reference.ts` 从外沿采样灰底，以 RGB 最大通道差 >19 建前景 mask，四邻域连通域按宽高范围筛选，自动检测 27 张。按 y 聚行、按 x 排序；没有手写外裁片表。
+
+`recognize-layout-text.swift` 使用 macOS Vision 本地 OCR，证据保存在 `reference/ocr-evidence.json`。逐张人工复核的文字、图位、装饰区域记录在 `annotations.json`。图位依据局部颜色种子建立掩膜；文字按亮暗与背景颜色分离，保留未知微字，不把 OCR 候选当作确认内容。
+
+`group-text.ts` 将与既有文字块在基线、间距和字高上相连的残余字形合并。ref-01 的末尾字符保持在 T01，不能再产生 T03；ref-21 的 03 日期与旋转英文保持独立。
+
+T=文字，I=图片占位/色块，D=装饰，背景另存。每个构件有类型、角色、局部 box、原字形资产；文字可读则有 text，未知则为 null。27 张的 source SHA 与裁片绝对坐标持久保存。不同设计使用完整键，例如 ref-01/T01，运行时拒绝跨设计与跨类型替换。
+
+## 输出和使用
+
+每张 `public/layout-reference/ref-NN/` 包含原裁片、标注图、三类掩膜图、分离构件 PNG、图位替换 mask、文字下的近似填补层、背景、重组 PNG、构件 JSON 与交互检查器。`ReferenceLayout.tsx` 默认使用原始分类资产重组；替换文字时改为 DOM，替换图位时使用该构件的遮罩，坐标保持对应。原字形模式为像素保真；替换模式并非像素保真，不声称恢复了原字体。
+
+`documents.ts` 为每张生成一篇独立教学 post：原图位置、构件表、文字方向、制作步骤、HTML、React、Next.js 和验收规则。Router 提供完整 27 项索引、识别方法、类型定义和严格调用协议。`package-reference-layouts.ts` 将 28 篇 Markdown、React/Next.js 代码和资产打包为 ZIP。
+
+原图只有低分辨率拼图，无法恢复细字或确定字体。保留原字形不等于 OCR 全部正确；自动像素比较只验证重组一致，语义标注仍需人工查看。参考中灰绿区域为占位/色块，无可辨认真实照片。网页长文另提供正常可读正文。
 
 ## 重建与验证
 
-从 `apps/wiki` 目录执行 `node --import tsx scripts/generate-layout-recipes.ts`。既有文档与 explore 测试覆盖所有新增 ID、全局引用、Markdown 与资源计数。使用 tsc 检查内容生成器；用 esbuild 逐篇编译文档中的 React、Next.js 与 CSS，并通过 React 服务端渲染验证标题与说明属性。
+从 apps/wiki 依次执行：
 
-只在生产服务器验收页面，不启动本地网页预览。推送后等待 ces-control CI 完成生产构建和集成检查，再检查实际首页、排版分类、Router、子文档、纯文本和独立 HTML。
+```
+node --import tsx scripts/segment-layout-reference.ts
+node --import tsx scripts/build-reference-layout-demos.ts
+node --import tsx scripts/package-reference-layouts.ts
+```
 
-## 边界
+可选重新运行 Vision OCR：先将每张裁片等比放大，再运行 Swift 脚本，输出新证据，人工复核后更新 annotations；不可直接覆盖已核对语义。
 
-这是一组可复用的设计教学文档，不是将参考图逐格临摹成商业模板。示例使用系统字体与占位色块；真实标题、字体、照片和移动端阅读模式必须按最终内容重新检查。文档中的 Next.js 示例面向 App Router，不改变本站已有路由架构。
+`tests/layout-reference.test.tsx` 校验 27 个 ID 与行列、源 SHA、类型与资产归属、全部独立图层的真实合成像素、同词合并、日期独立、跨版面替换拒绝、React 渲染、三类代码示例与旧 post 跳转。生产构建和集成检查通过后，在指定服务器验收；不启动本地页面预览。