主题生成器：素材尺寸按视口自适应 + 导出画质可调

- 尺寸单位 4 档：fit(按高)/fitw(按宽)/px/vh，输出 auto clamp(min(calc(100vh-24px),55%),基准,上限)，下限让位视口 → 自适应单位永不把图撑出屏幕
- fitw 补上宽幅素材：fit 只按高度缩，16:9 素材在 390 竖屏仍出 1001px 宽（照裁）
- 视口预设带高度（含 390×844）；layerMetrics 统一出 CSS/预览框/溢出检测，图层编辑区显示实测尺寸并报越界，可一键按当前视口修好
- 窄屏每层策略（原样/缩小/隐藏）+ 缩放系数；修 @media 只覆盖全局、独立配置页面在手机上从不生效的特异性 bug
- 导出画质：质量滑块（上限 0.95，Skia 在 q=1 切无损会反常）+ 长边上限，改动后从原图重算
- base.css 新增 --tb-page-position（默认 center center，旧主题不受影响），StaticVersion +1
- 新增 ?dump=fit / ?dump=quality 自检，README 与 _scaffold.css 同步

.workbuddy/memory/2026-10-20.md

@@ -217,3 +217,48 @@ iframe 内部仍是 1512，媒体查询按 1512 判定 → 结论是错的。
 回归（`?dump=layers`）：加层后 `[null,null]`、行内下拉 2 个、换第 2 层后 `[null,blue]` 且 CSS 只出现 blue；
 box 页 inherit 时 `addDisabled/bgDisabled` 都 false；在 box 加层后本页 3 层而**全局仍 2 层**；
 新建后 assets 0、层 0、草稿已删、scope 回 global。
+
+## 17:5x 生成器：视口自适应 + 导出画质
+
+用户两个问题：插入素材后不同屏幕被裁、导出的 webp 太大。都在 `dev/theme-builder/index.html` 里解决。
+
+**尺寸单位 4 档**（`l.unit`）：`fit`（按视口高，人物）/ `fitw`（按视口宽，横幅）/ `px` / `vh`。
+输出 `auto clamp(min(calc(100vh - 24px), 231px), 46.67vh, 420px)` 这种。
+- 关键点 1：**内层 `min(视口 - 24px, 基准×55%)`** —— 下限让位给视口，自适应单位因此永不溢出。
+  写死 55% 下限的话，390 竖屏放不下 1067 宽的图，照样裁。
+- 关键点 2：**必须有 `fitw`**。`fit` 只按高度缩，宽幅素材宽度按比例涨：1920×1080 素材 h=600 在
+  390 视口下 fit 出 1001px 宽（裁），fitw 出 366px（完整）。实测见 `?dump=fit` 的 `fitw` 数组。
+- 关键点 3：`layerSize()`（出 CSS）与 `unitGeom()`（出预览框/溢出检测）**必须共用一套换算**，
+  两套各算迟早漂成「框没超、图已裁」。
+- ⚠️ 下拉 value 要用 `l.unit`，不能用 `unitOf()`（把 fit 归一成 vh → 选了 fit 却显示「按视口高比例」）。
+
+**视口预设带高度**（`VIEWPORTS` 改成 `{w,h,label}`，加了 390×844）。原来只有宽度、iframe 恒 900 高，
+768 的旧笔电和 844 手机根本模拟不出来 —— 而裁切几乎全由高度决定。
+
+**溢出检测 + 一键修好**：`layerMetrics(l,a,VW,VH)` 给 overL/R/T/B，图层编辑区显示
+「1512×900 下显示 131×420，完整可见」或橙色「⚠ 左右各 88px 越界」+「按当前视口修好」按钮
+（切 px 并算刚好放下的尺寸）。导出前 `overflowReport()` 再扫一遍，只提醒不拦。
+
+**窄屏每层策略** `l.mob`（inherit/scale/hide）+ 全局 `S.narrow.scale`（默认 0.62）。
+⚠️ 顺手修了一个既有 bug：`@media` 块原来只写 `html[data-theme-style]`(0,1,1)，
+被页面覆盖块 (0,2,1) 压住 → **独立配置的页面在手机上从来没生效过**。现在每个独立 scope 各写一条。
+⚠️ 竖版图只替换 `cfg.bg` 非空的页面（否则给纯色页塞图 = 改了他的设计）。
+
+**背景焦点** `cfg.bgPos` → `--tb-page-position`；base.css 里 `var(--tb-page-position, center center)` 兜底
+（旧主题不写也不坏），StaticVersion → `20261020f`。
+
+**导出画质**：`S.export = {quality: 0.88, maxSide: 1600}`，改完全量 `rebakeAll()`（从 orig 重算，不叠加压缩）。
+- ⚠️ **`toDataURL('image/webp', 1)` 是坑**：Skia 在 q=1 切无损，输出反常 —— 实测同一张噪声图
+  q=1 只有 52KB、q=0.95 是 440KB。`canvasAsset` 与滑块都夹到 0.95。
+- ⚠️ 平涂/线稿降 q 可能**变大**（有损引入噪点；实测平涂图各档都是 1KB，噪声图 0.6→0.95 涨 75%）。
+  所以文案写「先砍长边再降质量」，不承诺「降 q 一定更小」。
+- 缩小加 `imageSmoothingQuality='high'`。
+
+**自检**：新增 `?dump=fit`（视口占用/溢出/fitw/旧工程兼容/@media 覆盖各 scope）与
+`?dump=quality`（q 单调性、q=1 被夹、长边真压像素），两项 `ok:true`；`?dump=validate` 空、layers/fx/fxpipe 全绿。
+生成 CSS 临时存成 `static/css/themes/gentest.css` 跑 `go test ./internal/theme` → 30 处声明全过（`clamp` 里的逗号没被当层分隔符）。
+⚠️ 顺带发现 **`//go:embed` 的 `*` 不匹配 `_` 开头文件** —— `_scaffold.css` 与 `_gentest.css` 都不进 embed，
+所以那个校验一开始"跑了但数字没变"，改名后才真正生效。
+
+UI 踩坑：面板仅 ~240px，`input[type=range]` 有固有宽度 → 必须 `flex:1 1 0;width:0;min-width:0`，
+且质量数值要放进 label 里（作第三个 flex 项会被顶出可视区，表现为"滑块没有数字"）。