dsh-design-studio 0.4.1 → 0.5.0

package/lib/client.js

@@ -99,12 +99,75 @@ window.__ModuleLoader__.load({
       gRadius: '圆角',
       gShadow: '阴影',
       gOther: '其他',
-      exportT: '导出图片',
+      exportT: '导出',
       exFrame: '这一屏 · 带外框',
       exRaw: '这一屏 · 纯画面',
       exLong: '这一屏 · 整页长图',
       exShow: '整套展示图',
-      exWhere: '存到设计目录的 exports/，同时复制到剪贴板',
+      exPdf: 'PDF · 每屏一页',
+      exPptx: 'PPT · 每屏一页（整页图片）',
+      exWhere: '存到设计目录的 exports/；图片还会复制到剪贴板',
+      exportedDoc: '已导出 {name}（{n} 页）',
+      check: '设计体检',
+      checkTip: '设计体检：量一量文字溢出、重叠、对比度、点击区、字号',
+      checking: '正在体检…',
+      checkNone: '没发现问题',
+      checkSum: '{s} 屏 · {n} 个问题',
+      checkFix: '交给模型修',
+      checkAgain: '再查一次',
+      checkFail: '没查成：{msg}',
+      checkNote: '只量得出排版上的硬伤，好不好看还得你看',
+      checkCount: '设计体检：上次量出 {n} 个问题，点开看',
+      checkAsk: '〔设计体检〕发现 {n} 个问题，请逐个修好：改源文件，只动有问题的地方；颜色、字号能改设计变量就改设计变量。',
+      ckToolHead: '量了 {s} 屏，发现 {n} 个问题。逐个改源文件，只动有问题的地方；颜色、字号能改设计变量就改设计变量：',
+      ckToolOk: '量了 {s} 屏（{labels}），没发现问题。',
+      ckToolOff: '用户正在看旧版本、演示或多尺寸，右侧栏现在量不了；过一会儿再调，或照「自查」清单自己过一遍。',
+      ckToolErr: '{label}：没量成（{msg}）',
+      ck_hscroll: '超出屏幕',
+      ck_clipped: '文字被截断',
+      ck_overflow: '文字超出框',
+      ck_overlap: '文字叠在一起',
+      ck_contrast: '对比度不够',
+      ck_tap: '点击区太小',
+      ck_tiny: '字太小',
+      ck_img: '图片没加载出来',
+      ck_fonts: '字号太杂',
+      ck_distort: '图片被拉变形',
+      ck_long: '一行太长',
+      ck_wrap: '文字被挤断行',
+      ck_covered: '被固定栏压住',
+      ck_tight: '离固定栏太近',
+      ck_jserr: '页面脚本报错',
+      ck_missing: '文件没载出来',
+      cd_hscroll: '伸出屏幕 {px}px',
+      cd_clipped: '被切掉 {px}px',
+      cd_overflow: '伸出框 {px}px',
+      cd_overlap: '和 {other}「{otherText}」叠在一起',
+      cd_contrast: '{fg} 配 {bg}，{ratio}:1（要 ≥ {need}:1）',
+      cd_tap: '{w}×{h}（至少 {min}×{min}）',
+      cd_tiny: '{size}px（至少 {min}px）',
+      cd_img: '{src}',
+      cd_fonts: '一屏用了 {n} 种字号：{sizes}',
+      cd_distort: '原图 {nw}×{nh}，显示成 {w}×{h}（用 object-fit: cover 或改尺寸）',
+      cd_long: '一行约 {chars} 字（最好 ≤ {max}）',
+      cd_wrap: '折成了 {lines} 行（按钮、价格这种短字别断行：给它更多宽度、white-space: nowrap 或缩短文字）',
+      cd_covered: '{when}被{edgeName} {bar} 压住 {px}px（给内容留出栏的高度）',
+      cd_tight: '离{edgeName} {bar} 只有 {px}px（留 16px 以上）',
+      cd_jserr: '{msg}{at}',
+      cd_missing: '{what} {src} 载不出来（路径写错了，或者文件不在）',
+      ckEdge_top: '顶栏',
+      ckEdge_bottom: '底栏',
+      ckWhen_top: '没滚时',
+      ckWhen_bottom: '滚到底还',
+      ckWhat_css: '样式表',
+      ckWhat_script: '脚本',
+      ckWhat_font: '字体',
+      ckWhat_other: '文件',
+      ckSize: '{w}×{h}，页面高 {page}',
+      ckSizeBar: '，{edgeName} {bar} 离内容 {gap}px',
+      ckScreen: '{label}（{where}）',
+      ckItem: '{i}. {type}：{where}{text} — {detail}',
+      ckQuote: '「{text}」',
       exporting: '正在导出…',
       exported: '已导出 {name}',
       exportedCopied: '已导出 {name}，也复制到剪贴板了',
@@ -132,6 +195,9 @@ window.__ModuleLoader__.load({
       cmpNow: '现在',
       dark: '深色模式',
       variants: '再出两版',
+      pickThis: '就要这个：其他版本挪进 drafts/，接着做全套',
+      pickText: '〔选定方向〕就用「{name}」（{where}）。先把同组的 {others} 挪进 drafts/ 子目录（别删），再把它改名成 {base}.html；它的设计变量搬进 tokens.css（没有就新建）、改用 tokens.css。然后接着做全套。\n',
+      pickKeep: '〔选定方向〕留原版「{name}」（{where}）。同组的 {others} 挪进 drafts/ 子目录（别删），其他不动。\n',
       variantText: '给「{name}」再出两版不同方向的设计（布局或视觉风格明显不同），存成同目录下的 {b}-b.html 和 {b}-c.html，会紧挨着原版排在画布上。原版和 tokens.css 别动；新版要换配色就在自己文件里覆盖变量。\n{where}\n',
       exThis: '导出这一屏',
       demo: '演示：点页面里的按钮跳到别的屏',
@@ -142,9 +208,61 @@ window.__ModuleLoader__.load({
       textEdit: '改字：点页面里的文字直接改，回车保存（Esc 退出）',
       textSaved: '已改好，写回 {file}',
       textAsk: '把页面上的「{before}」改成「{after}」（只改这一处文字，别的不动）。\n{where}\n',
+      styleEdit: '调样式：点页面里的元素，拖滑块改字号、颜色、圆角、间距（Esc 退出）',
+      styleAny: '点任意一屏里的元素调样式 · Esc 退出',
+      styleOne: '点页面里的元素调样式 · Esc 退出',
+      style: '调样式',
+      styleNone: '在页面上点一个元素。改的时候页面上先看效果，满意了再写回文件。',
+      styleFont: '字号',
+      styleWeight: '字重',
+      styleColor: '文字',
+      styleBg: '背景',
+      styleClear: '透明',
+      styleRadius: '圆角',
+      stylePadY: '上下内边距',
+      stylePadX: '左右内边距',
+      styleGap: '子元素间距',
+      styleW400: '常规',
+      styleW500: '中等',
+      styleW600: '半粗',
+      styleW700: '粗',
+      styleVar: '设计变量 {name}',
+      styleGradient: '现在是渐变，选一个颜色会换成纯色',
+      styleReset: '还原',
+      styleAsk: '交给模型',
+      styleSave: '写回文件',
+      styleSaveTip: '写进这个元素在源码里的 style 属性（改前改后各存一版）',
+      styleAskTip: '让模型改进样式表（能用设计变量就用）',
+      styleNoWrite: '开发服务器的页面不在这里写回，交给模型改',
+      styleBusyTip: '模型在干活，等它停了再写回',
+      styleSaved: '样式已写回 {file}',
+      styleMiss: '源码里没找到这个元素（可能是脚本生成的），改成交给模型',
+      styleN: '改了 {n} 项',
+      styleAskText: '〔调样式〕{name}（{sel}）：{list}。{rules}把这些写进它的样式规则（能用设计变量就用设计变量），别写成行内 style。\n{where}\n',
+      ruleFrom: '- {props}：现在由 {sel} 决定（{at}）',
+      ruleMaybe: '- {props}：大概由 {sel} 决定（{at}；它在 @layer / @container 里，没细算，改之前看一眼）',
+      ruleInline: '- {props}：现在写在元素的行内 style 上{over}',
+      ruleOver: '，盖过了 {sel}（{at}）',
+      ruleAt: '{file} 第 {line} 行',
+      styleArrow: '{prop} {from} → {to}',
+      styleJoin: '；',
+      lang: 'zh',
+      stylesHead: '先挑一个风格开工',
+      stylesTip: '点一个，整套配色、字体、圆角放进输入框；再写要做什么',
+      stylesOpen: '换个风格…',
+      stylesTitle: '换个风格',
+      stylesSwap: '点一个，让模型把现在的设计换成这个风格（先改 tokens.css，布局和文案不动）',
+      styleText: '〔风格〕{name}——{desc}\n配色：{colors}\n字体：{fonts}\n形状：{shape}\n要点：{notes}\n{ask}',
+      styleColors: '底色 {bg}，卡片 {surface}，文字 {text}，次要文字 {muted}，分隔线 {line}，主色 {primary}（上面的字 {on}），点缀 {accent}（只做图形、大字），链接和小字强调 {link}{bgImage}',
+      styleBgImage: '；底色上叠 {v}',
+      styleFonts: '标题 {head}；正文 {body}',
+      styleShape: '圆角 {r}px；阴影 {s}',
+      styleStart: '照这个风格来做（先把这些定进 tokens.css；不用再问想要什么感觉）：',
+      styleRestyle: '把现在的设计换成这个风格：先改 tokens.css（配色、字体、圆角、阴影），各屏跟着变；页面里写死的颜色也换成变量；布局和文案先不动。\n',
       demoNone: '这一屏还没有跳到别的屏的按钮；可以让模型用 <a href="detail.html"> 把几屏串起来',
       phone: '在手机上看',
-      away: '这里看不到预览：预览跑在电脑本机上，从手机或别的电脑打开 DSH 时连不过去。回到那台电脑上看；想在手机上看，就在电脑上点「在手机上看」扫码（同一个 Wi-Fi）。',
+      away: '这里看不到预览：开发服务器跑在电脑本机上，从手机或别的电脑打开 DSH 时连不过去（本地 HTML 文件的设计能看）。回到那台电脑上看；想在手机上看，就在电脑上点「在手机上看」扫码（同一个 Wi-Fi）。',
+      remoteFail: '这一屏没能传过来（连接断了，或图片太大）。点「刷新」再试。',
       phoneStarting: '正在打开…',
       phoneHow: '用手机相机扫一扫',
       phoneWifi: '手机和电脑要连同一个 Wi-Fi',
@@ -170,6 +288,7 @@ window.__ModuleLoader__.load({
       demoShort: '演示',
       editAddr: '换一个地址',
       working: '模型正在工作',
+      asking: '模型在等你回答（在对话里）',
       writing: '正在写 {file}',
       born: '已生成 {name}',
       updated: '已更新{file}',
@@ -245,12 +364,75 @@ window.__ModuleLoader__.load({
       gRadius: 'Radii',
       gShadow: 'Shadows',
       gOther: 'Other',
-      exportT: 'Export image',
+      exportT: 'Export',
       exFrame: 'This screen · in frame',
       exRaw: 'This screen · plain',
       exLong: 'This screen · full page',
       exShow: 'Showcase of all screens',
-      exWhere: 'Saved to exports/ in the design folder and copied to the clipboard',
+      exPdf: 'PDF · one page per screen',
+      exPptx: 'PowerPoint · one slide per screen (as images)',
+      exWhere: 'Saved to exports/ in the design folder; images are also copied to the clipboard',
+      exportedDoc: 'Exported {name} ({n} pages)',
+      check: 'Design check',
+      checkTip: 'Design check: measure overflowing or overlapping text, contrast, tap targets and type sizes',
+      checking: 'Checking…',
+      checkNone: 'No problems found',
+      checkSum: '{s} screens · {n} problems',
+      checkFix: 'Ask the model to fix',
+      checkAgain: 'Check again',
+      checkFail: 'Check failed: {msg}',
+      checkNote: 'Only measurable layout problems; whether it looks good is still up to you',
+      checkCount: 'Design check: {n} problems last time. Click to see them',
+      checkAsk: '[Design check] Found {n} problems. Please fix each one in the source files, touching only what is listed; for colors and type sizes, change the design tokens where possible.',
+      ckToolHead: 'Measured {s} screens and found {n} problems. Fix each one in the source files, touching only what is listed; for colors and type sizes, change the design tokens where possible:',
+      ckToolOk: 'Measured {s} screens ({labels}). No problems found.',
+      ckToolOff: 'The user is looking at an old version, the demo or the multi-size view, so the sidebar can\'t measure right now. Try again in a moment, or go through the self-check list yourself.',
+      ckToolErr: '{label}: could not measure ({msg})',
+      ck_hscroll: 'Wider than the screen',
+      ck_clipped: 'Text cut off',
+      ck_overflow: 'Text spills out of its box',
+      ck_overlap: 'Overlapping text',
+      ck_contrast: 'Low contrast',
+      ck_tap: 'Tap target too small',
+      ck_tiny: 'Text too small',
+      ck_img: 'Image failed to load',
+      ck_fonts: 'Too many type sizes',
+      ck_distort: 'Stretched image',
+      ck_long: 'Lines too long',
+      ck_wrap: 'Short text wraps',
+      ck_covered: 'Hidden under a fixed bar',
+      ck_tight: 'Too close to a fixed bar',
+      ck_jserr: 'Script error',
+      ck_missing: 'File failed to load',
+      cd_hscroll: 'sticks out {px}px',
+      cd_clipped: '{px}px cut off',
+      cd_overflow: 'sticks out {px}px',
+      cd_overlap: 'overlaps {other} "{otherText}"',
+      cd_contrast: '{fg} on {bg}, {ratio}:1 (needs ≥ {need}:1)',
+      cd_tap: '{w}×{h} (at least {min}×{min})',
+      cd_tiny: '{size}px (at least {min}px)',
+      cd_img: '{src}',
+      cd_fonts: '{n} type sizes on one screen: {sizes}',
+      cd_distort: '{nw}×{nh} shown at {w}×{h} (use object-fit: cover or fix the size)',
+      cd_long: 'about {chars} characters per line (keep it ≤ {max})',
+      cd_wrap: 'breaks onto {lines} lines (keep short labels and prices on one line: more width, white-space: nowrap, or shorter text)',
+      cd_covered: '{when}{px}px hidden under the {edgeName} {bar} (leave room for the bar)',
+      cd_tight: 'only {px}px from the {edgeName} {bar} (leave 16px or more)',
+      cd_jserr: '{msg}{at}',
+      cd_missing: '{what} {src} did not load (wrong path, or the file is missing)',
+      ckEdge_top: 'top bar',
+      ckEdge_bottom: 'bottom bar',
+      ckWhen_top: 'before scrolling, ',
+      ckWhen_bottom: 'even scrolled to the end, ',
+      ckWhat_css: 'stylesheet',
+      ckWhat_script: 'script',
+      ckWhat_font: 'font',
+      ckWhat_other: 'file',
+      ckSize: '{w}×{h}, page height {page}',
+      ckSizeBar: ', {edgeName} {bar} {gap}px from the content',
+      ckScreen: '{label} ({where})',
+      ckItem: '{i}. {type}: {where}{text} — {detail}',
+      ckQuote: ' "{text}"',
       exporting: 'Exporting…',
       exported: 'Exported {name}',
       exportedCopied: 'Exported {name} and copied it',
@@ -278,6 +460,9 @@ window.__ModuleLoader__.load({
       cmpNow: 'Now',
       dark: 'Dark mode',
       variants: 'Two more takes',
+      pickThis: 'Use this one: move the other takes to drafts/ and build the rest',
+      pickText: '[Direction picked] Use "{name}" ({where}). First move the other takes in its group ({others}) into a drafts/ subfolder (don\'t delete them), then rename it to {base}.html; move its design tokens into tokens.css (create it if missing) and switch it to tokens.css. Then build the rest.\n',
+      pickKeep: '[Direction picked] Keep the original "{name}" ({where}). Move the other takes in its group ({others}) into a drafts/ subfolder (don\'t delete them) and leave everything else as is.\n',
       variantText: 'Make two alternative designs of "{name}" in clearly different directions (layout or visual style). Save them next to it as {b}-b.html and {b}-c.html; they will sit right after the original on the canvas. Leave the original and tokens.css unchanged; override variables inside the new files if they need other colors.\n{where}\n',
       exThis: 'Export this screen',
       demo: 'Play: tap buttons in the page to move between screens',
@@ -288,9 +473,61 @@ window.__ModuleLoader__.load({
       textEdit: 'Edit text: click any text in the page, Enter to save (Esc to stop)',
       textSaved: 'Saved to {file}',
       textAsk: 'Change the text "{before}" to "{after}" on the page (only this text, nothing else).\n{where}\n',
+      styleEdit: 'Style: click an element, then drag sliders for size, colors, radius and spacing (Esc to stop)',
+      styleAny: 'Click an element in any screen to style it · Esc to stop',
+      styleOne: 'Click an element in the page to style it · Esc to stop',
+      style: 'Style',
+      styleNone: 'Click an element in the page. Changes show in the preview first; save them to the file when you like them.',
+      styleFont: 'Font size',
+      styleWeight: 'Weight',
+      styleColor: 'Text',
+      styleBg: 'Background',
+      styleClear: 'transparent',
+      styleRadius: 'Radius',
+      stylePadY: 'Padding (top / bottom)',
+      stylePadX: 'Padding (left / right)',
+      styleGap: 'Gap',
+      styleW400: 'Regular',
+      styleW500: 'Medium',
+      styleW600: 'Semi',
+      styleW700: 'Bold',
+      styleVar: 'Token {name}',
+      styleGradient: 'It is a gradient now; picking a color makes it solid',
+      styleReset: 'Reset',
+      styleAsk: 'Ask the model',
+      styleSave: 'Save to file',
+      styleSaveTip: 'Writes into this element\'s style attribute in the source (a version is kept before and after)',
+      styleAskTip: 'Let the model move it into the stylesheet (using tokens where it can)',
+      styleNoWrite: 'Dev-server pages are not written here; ask the model',
+      styleBusyTip: 'The model is working; save when it stops',
+      styleSaved: 'Style saved to {file}',
+      styleMiss: 'Could not find this element in the source (maybe a script made it); asking the model instead',
+      styleN: '{n} changed',
+      styleAskText: '[Style] {name} ({sel}): {list}. {rules}Put it in its stylesheet rule, using design tokens where you can, not an inline style.\n{where}\n',
+      ruleFrom: '- {props}: currently set by {sel} ({at})',
+      ruleMaybe: '- {props}: probably set by {sel} ({at}; it sits in @layer / @container and was not fully resolved, check before editing)',
+      ruleInline: '- {props}: currently in the element\'s inline style{over}',
+      ruleOver: ', overriding {sel} ({at})',
+      ruleAt: '{file} line {line}',
+      styleArrow: '{prop} {from} → {to}',
+      styleJoin: '; ',
+      lang: 'en',
+      stylesHead: 'Start from a style',
+      stylesTip: 'Pick one to put its colors, fonts and shapes in the chat box, then say what to make',
+      stylesOpen: 'Try another style…',
+      stylesTitle: 'Change the style',
+      stylesSwap: 'Pick one and the model restyles the current design (tokens.css first; layout and copy stay)',
+      styleText: '[Style] {name}: {desc}\nColors: {colors}\nFonts: {fonts}\nShape: {shape}\nNotes: {notes}\n{ask}',
+      styleColors: 'background {bg}, cards {surface}, text {text}, muted text {muted}, lines {line}, primary {primary} (text on it {on}), accent {accent} (graphics and large text only), links and small emphasis {link}{bgImage}',
+      styleBgImage: '; on the background: {v}',
+      styleFonts: 'headings {head}; body {body}',
+      styleShape: 'radius {r}px; shadow {s}',
+      styleStart: 'Design in this style (put these into tokens.css first; no need to ask about the feel again):',
+      styleRestyle: 'Restyle the current design to this: update tokens.css first (colors, fonts, radius, shadows) so every screen follows; replace hard-coded colors in the pages with tokens; keep layout and copy for now.\n',
       demoNone: 'This screen has no links to other screens yet. Ask the model to connect screens with <a href="detail.html">',
       phone: 'View on phone',
-      away: 'The preview runs on the computer itself, so it can\'t load when DSH is opened from a phone or another computer. View it on that computer, or click "View on phone" there and scan the code (same Wi-Fi).',
+      away: 'The dev server runs on the computer itself, so it can\'t load when DSH is opened from a phone or another computer (designs made of local HTML files do show). View it on that computer, or click "View on phone" there and scan the code (same Wi-Fi).',
+      remoteFail: 'This screen couldn\'t be sent over (connection dropped, or the images are too large). Click Reload to try again.',
       phoneStarting: 'Starting…',
       phoneHow: 'Scan with your phone camera',
       phoneWifi: 'Phone and computer must be on the same Wi-Fi',
@@ -316,6 +553,7 @@ window.__ModuleLoader__.load({
       demoShort: 'Play',
       editAddr: 'Change address',
       working: 'The model is working',
+      asking: 'The model is waiting for your answer (in the chat)',
       writing: 'Writing {file}',
       born: 'Generated {name}',
       updated: 'Updated{file}',
@@ -434,6 +672,7 @@ window.__ModuleLoader__.load({
 .ddp-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:7;max-width:calc(100% - 24px);padding:6px 13px;border-radius:999px;
   background:rgba(18,18,24,.84);color:#ececf0;font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
   box-shadow:0 6px 18px rgba(0,0,0,.22);backdrop-filter:blur(8px);pointer-events:none;animation:ddp-in .2s ease}
+.ddp-hint.side{left:calc((100% - 296px) / 2);max-width:calc(100% - 320px)}
 @property --ddp-a{syntax:'<angle>';initial-value:0deg;inherits:false}
 .ddp-ring{position:absolute;inset:0;z-index:4;pointer-events:none;padding:2.5px;
   background:conic-gradient(from var(--ddp-a),transparent 0deg 140deg,${ACCENT} 240deg,#a78bfa 300deg,#5eead4 340deg,transparent 360deg);
@@ -451,6 +690,7 @@ window.__ModuleLoader__.load({
 .ddp-chip .sp{width:12px;height:12px;flex:none;border-radius:50%;border:1.6px solid rgba(255,255,255,.22);border-top-color:#9db0ff;animation:ddp-rot .75s linear infinite}
 .ddp-chip .tx{background:linear-gradient(90deg,#f1f1f4 0 38%,#a9b8ff 50%,#f1f1f4 62% 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ddp-txt 2.2s linear infinite}
 .ddp-chip.ok svg{width:14px;height:14px;flex:none;color:#4ade80}
+.ddp-chip .q{width:8px;height:8px;flex:none;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25)}
 @keyframes ddp-rot{to{transform:rotate(360deg)}}
 @keyframes ddp-txt{from{background-position:100% 0}to{background-position:-160% 0}}
 @keyframes ddp-blink{50%{opacity:.25}}
@@ -528,6 +768,54 @@ window.__ModuleLoader__.load({
 .ddp-empty .ddp-refline{margin-top:0}
 .ddp-empty .lk{border:0;padding:0;background:transparent;color:${ACCENT};font:inherit;cursor:pointer}
 .ddp-empty .lk:hover{text-decoration:underline;text-underline-offset:2px}
+.ddp-ck{align-items:flex-start}
+.ddp-ck .no{width:18px;height:18px;flex:none;margin-top:1px;border-radius:9px;background:#f59e0b;color:#fff;font:700 10px/18px system-ui,sans-serif;text-align:center}
+.ddp-ck .no.hi{background:#e5484d}
+.ddp-tok.ddp-ck .nm{font-family:inherit;font-size:12px;line-height:17px}
+.ddp-tok.ddp-ck .vl{white-space:normal;overflow-wrap:anywhere}
+.ddp-check .ok{display:flex;align-items:center;gap:8px;padding:14px 6px;color:var(--dsw-alias-label-secondary)}
+.ddp-check .ok svg{width:16px;height:16px;flex:none;color:#30a46c}
+.ddp-check footer.row,.ddp-style footer.row{display:flex;gap:6px}
+.ddp-check footer.row button,.ddp-style footer.row button{flex:1;justify-content:center;padding:0 6px}
+.ddp-check footer .go,.ddp-style footer .go{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1)}
+.ddp-check footer .go:hover,.ddp-style footer .go:hover{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);opacity:.88}
+.ddp-check footer button:disabled,.ddp-style footer button:disabled{opacity:.45;cursor:default}
+.ddp-style .bd{padding:0 14px 10px}
+.ddp-style .who{margin:0;padding:0 14px 6px;font-size:12px;line-height:17px;color:var(--dsw-alias-label-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-style .who code{font:11px/17px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dsw-alias-label-primary)}
+.ddp-style .row{padding:9px 0 10px;border-top:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.16))}
+.ddp-style label{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;font-size:12px;color:var(--dsw-alias-label-secondary)}
+.ddp-style label span{flex:1}
+.ddp-style label em{font:11px/16px ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:var(--dsw-alias-label-tertiary);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-style label em.v{color:${ACCENT}}
+.ddp-style input[type=range]{display:block;width:100%;margin:0;accent-color:${ACCENT};cursor:pointer}
+.ddp-style .chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:7px}
+.ddp-style .row>.chips:first-of-type{margin-top:0}
+.ddp-style .chip{height:22px;max-width:100%;padding:0 7px;border:0;border-radius:6px;background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,.1));color:var(--dsw-alias-label-secondary);font:11px/22px inherit;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-style .chip:hover{color:var(--dsw-alias-label-primary)}
+.ddp-style .chip.on{box-shadow:inset 0 0 0 1.5px ${ACCENT};color:var(--dsw-alias-label-primary)}
+.ddp-style .chip.c{width:22px;padding:2px}
+.ddp-style .chip.c i{display:block;width:100%;height:100%;border-radius:4px;box-shadow:inset 0 0 0 .5px rgba(127,127,127,.45)}
+.ddp-style input[type=color]{width:30px;height:22px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer}
+.ddp-style .seg{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,.1))}
+.ddp-style .seg button{flex:1;height:24px;border:0;border-radius:6px;background:transparent;color:var(--dsw-alias-label-secondary);font:12px/24px inherit;cursor:pointer}
+.ddp-style .seg button.on{background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);box-shadow:0 1px 2px rgba(0,0,0,.14)}
+.ddp-style .note{margin-top:6px;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
+.ddp-style .cnt{padding:0 14px 6px;font-size:11px;color:var(--dsw-alias-label-tertiary)}
+.ddp-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px 8px}
+.ddp-sc{display:flex;flex-direction:column;gap:5px;min-width:0;padding:0;border:0;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;text-align:left;cursor:pointer}
+.ddp-sc .pv{position:relative;display:block;height:58px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 .5px rgba(127,127,127,.35);transition:transform .15s ${EASE},box-shadow .15s}
+.ddp-sc:hover .pv{transform:translateY(-1px);box-shadow:0 0 0 1.5px ${ACCENT},0 6px 16px rgba(0,0,0,.12)}
+.ddp-sc:hover{color:var(--dsw-alias-label-primary)}
+.ddp-sc .pv b{position:absolute;left:8px;top:6px;font-size:17px;line-height:1}
+.ddp-sc .pv .bt{position:absolute;right:8px;top:8px;width:20px;height:9px}
+.ddp-sc .pv .cd{position:absolute;left:8px;right:8px;bottom:7px;height:20px}
+.ddp-sc .pv .ln{position:absolute;left:6px;top:6px;width:46%;height:3px;border-radius:2px;opacity:.85}
+.ddp-sc .pv .ln.s{top:12px;width:30%;opacity:.6}
+.ddp-sc .nm{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ddp-stylepick{width:100%;max-width:440px;margin:4px 0 6px;text-align:left}
+.ddp-stylepick>b{display:block;margin-bottom:2px;font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
+.ddp-stylepick>p{margin:0 0 10px;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
 .ddp-tok{display:flex;align-items:center;gap:9px;width:100%;min-height:32px;padding:4px 6px;border:0;border-radius:7px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;text-align:left;cursor:pointer}
 .ddp-tok:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
 .ddp-tok .pv{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
@@ -542,6 +830,7 @@ window.__ModuleLoader__.load({
 .ddp-tok .vl{color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:15px}
 .ddp-btn.has::after{content:"";position:absolute;right:4px;top:4px;width:5px;height:5px;border-radius:50%;background:${ACCENT}}
 .ddp-btn{position:relative}
+.ddp-btn .bdg{position:absolute;top:0;right:0;min-width:14px;height:14px;padding:0 3px;box-sizing:border-box;border-radius:7px;background:#f59e0b;color:#fff;font:700 9px/14px system-ui,sans-serif;text-align:center;pointer-events:none}
 .ddp-menu .ft{margin:4px 4px 2px;padding:6px 6px 2px;border-top:.5px solid var(--dsw-alias-border-l3);color:var(--dsw-alias-label-tertiary);font-size:11px;line-height:15px;max-width:220px;white-space:normal}
 .ddp-ver{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;padding:8px 10px;margin-bottom:2px;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;text-align:left;cursor:pointer}
 .ddp-ver:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
@@ -635,6 +924,7 @@ window.__ModuleLoader__.load({
       sizes: () => svg([h('rect', { key: 1, x: 2.5, y: 5, width: 12, height: 9.5, rx: 1.4 }), h('path', { key: 2, d: 'M6.5 18h4' }),
         h('rect', { key: 3, x: 16.5, y: 8, width: 5, height: 10.5, rx: 1.2 })]),
       text: () => svg([h('path', { key: 1, d: 'M5 7V5h11v2M10.5 5v14M8 19h5' }), h('path', { key: 2, d: 'M17 12v8M15.5 12h3M15.5 20h3' })]),
+      sliders: () => svg([h('path', { key: 1, d: 'M4 7h9M17 7h3M4 17h3M11 17h9' }), h('circle', { key: 2, cx: 15, cy: 7, r: 2 }), h('circle', { key: 3, cx: 9, cy: 17, r: 2 })]),
       image: () => svg([h('rect', { key: 1, x: 3.5, y: 4.5, width: 17, height: 15, rx: 2.5 }), h('circle', { key: 2, cx: 9, cy: 10, r: 1.6 }), h('path', { key: 3, d: 'M4 17l5-4.5 4 3.5 3-2.5 4.5 4', strokeLinejoin: 'round' })]),
       more: () => svg([h('circle', { key: 1, cx: 5.5, cy: 12, r: 1.3 }), h('circle', { key: 2, cx: 12, cy: 12, r: 1.3 }), h('circle', { key: 3, cx: 18.5, cy: 12, r: 1.3 })]),
       play: () => svg([h('path', { key: 1, d: 'M8 5.5v13l10.5-6.5z', strokeLinejoin: 'round' })]),
@@ -647,6 +937,9 @@ window.__ModuleLoader__.load({
       refresh: () => svg([h('path', { key: 1, d: 'M20 11a8 8 0 1 0-2.3 5.7' }), h('path', { key: 2, d: 'M20 5v6h-6' })]),
       external: () => svg([h('path', { key: 1, d: 'M14 4h6v6' }), h('path', { key: 2, d: 'M20 4l-9 9' }), h('path', { key: 3, d: 'M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5' })]),
       check: () => svg([h('path', { key: 1, d: 'M5 12.5l4.5 4.5L19 7.5', strokeWidth: 2.4 })]),
+      stetho: () => svg([h('path', { key: 1, d: 'M6 3.5H5a1 1 0 0 0-1 1V9a5 5 0 0 0 10 0V4.5a1 1 0 0 0-1-1h-1' }), h('path', { key: 2, d: 'M9 14v1.5a4.5 4.5 0 0 0 9 0V13' }), h('circle', { key: 3, cx: 18, cy: 11, r: 2 })]),
+      pdf: () => svg([h('path', { key: 1, d: 'M14 3.5H7a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5z' }), h('path', { key: 2, d: 'M14 3.5v5h5' }), h('path', { key: 3, d: 'M8.5 13h7M8.5 16.5h4.5' })]),
+      deck: () => svg([h('rect', { key: 1, x: 3, y: 4, width: 18, height: 12.5, rx: 1.8 }), h('path', { key: 2, d: 'M12 16.5V20M8.5 20.5h7' }), h('path', { key: 3, d: 'M7 12.5l3-3 2.5 2 4-4' })]),
       page: (p) => svg([h('rect', { key: 1, x: 3, y: 4, width: 18, height: 16, rx: 2.5 }), h('path', { key: 2, d: 'M3 9h18' }), h('rect', { key: 3, x: 7, y: 12.5, width: 5, height: 4, rx: 1, strokeDasharray: '2 1.6' })], p),
     }
     // 引导页上的大图标
@@ -719,6 +1012,19 @@ window.__ModuleLoader__.load({
     // ── 选中内容 → 输入框里的一段字 ──────────────────────────────────────────
 
     /** 页面地址 → 用户认得的位置：本地文件给路径，开发服务器给 localhost 地址 */
+    /**
+     * 这一屏里现在显示的是哪页（在预览里点链接跳过页，就是跳到的那页）→ { key, url }。
+     * 同一个预览服务器上的 .html 才算、旧版本不算；不然还是这一屏。写回文件按它找文件，别写到原来那页去。
+     */
+    function pageOf(sc, href) {
+      try {
+        const u = new URL(href)
+        const p = decodeURIComponent(u.pathname).replace(/^\/+/, '')
+        if (u.origin === new URL(sc.url).origin && /\.html?$/i.test(p) && !p.startsWith('__dsh_design__/')) return { key: p, url: u.origin + u.pathname }
+      } catch { /* 地址不对 */ }
+      return { key: sc.key, url: sc.url }
+    }
+
     function whereOf(href, st) {
       try {
         const u = new URL(href)
@@ -803,6 +1109,231 @@ window.__ModuleLoader__.load({
       return `〔设计变量〕${tok.name}: ${tok.value}\n${whereOf(tok.href, st)}\n`
     }
 
+    // ── 风格卡：开局挑一个风格（或给已有的设计换风格），整套配色、字体、圆角、阴影、要点放进输入框 ──────
+    // 配色都量过对比度：正文和次要文字对底色 ≥ 4.5:1，主色按钮上的字 ≥ 4.5:1
+
+    const SANS = '"PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif'
+    const SERIF = '"Songti SC", "Noto Serif SC", "Source Han Serif SC", serif'
+    const ROUND = '"SF Pro Rounded", "PingFang SC", "HarmonyOS Sans SC", system-ui, sans-serif'
+    const STYLES = [
+      { id: 'minimal', zh: '极简白', en: 'Minimal', dzh: '大留白、细线、黑白加一点蓝', den: 'Lots of space, hairlines, black and white with a touch of blue',
+        c: { bg: '#FAFAF9', surface: '#FFFFFF', text: '#18181B', muted: '#6B6B73', line: '#E4E4E7', primary: '#18181B', accent: '#2563EB', on: '#FFFFFF', link: '#2563EB' },
+        head: SANS, w: 600, radius: 10, shadow: '0 1px 2px rgba(24,24,27,.06)',
+        nzh: '靠字号和留白分层级，不靠色块；分隔用 1px 细线；蓝色只给链接和选中态；大标题字距收 -0.02em',
+        nen: 'Hierarchy from type size and whitespace, not color blocks; 1px hairlines; blue only for links and selection; tighten big headings to -0.02em' },
+      { id: 'warm', zh: '温暖手作', en: 'Warm craft', dzh: '纸感底色、圆润、手绘感', den: 'Paper tones, soft and rounded, hand-made feel',
+        c: { bg: '#F6EFE6', surface: '#FFF9F2', text: '#2B1D14', muted: '#6E5A4B', line: '#E7D9C8', primary: '#A9542A', accent: '#5E7A4A', on: '#FFFFFF', link: '#52703F' },
+        head: SERIF, w: 600, radius: 16, shadow: '0 8px 24px rgba(120,72,30,.12)',
+        nzh: '标题用衬线字，正文无衬线；插画用手绘线条和色块；阴影带暖色；中性色都偏暖，不用纯灰',
+        nen: 'Serif headings, sans body; hand-drawn line illustrations and color blocks; warm-tinted shadows; warm neutrals, no pure gray' },
+      { id: 'editorial', zh: '杂志编辑', en: 'Editorial', dzh: '大标题、黑线栅格、红色点题', den: 'Big headlines, black-rule grid, a red accent',
+        c: { bg: '#F4F1EA', surface: '#FFFFFF', text: '#111111', muted: '#555555', line: '#111111', primary: '#C8231B', accent: '#111111', on: '#FFFFFF', link: '#C8231B' },
+        head: SERIF, w: 700, radius: 2, shadow: 'none',
+        nzh: '标题很大、粗细对比强烈；用粗细两种黑线分栏；版式不对称、有留白；红色只在一两处；几乎没有圆角和阴影',
+        nen: 'Very large headlines with strong weight contrast; thick and thin black rules for columns; asymmetric layout; red in one or two places only; almost no radius or shadow' },
+      { id: 'dark', zh: '深色高级', en: 'Dark luxe', dzh: '近黑底、香槟金点缀、大图', den: 'Near-black, champagne gold accents, big imagery',
+        c: { bg: '#0E0E10', surface: '#18181B', text: '#F2EFE9', muted: '#A19C93', line: '#2C2C30', primary: '#C9A86A', accent: '#E8E2D6', on: '#17140E', link: '#C9A86A' },
+        head: SERIF, w: 500, radius: 12, shadow: '0 12px 40px rgba(0,0,0,.45)',
+        nzh: '金色只点在关键按钮和细线上；层级靠表面色深浅，不靠阴影；标题细一点、字距放开；留白要多',
+        nen: 'Gold only on key buttons and fine lines; layers from surface shades, not shadows; lighter, tracked-out headings; generous space' },
+      { id: 'playful', zh: '活泼年轻', en: 'Playful', dzh: '粗描边、硬阴影、贴纸感', den: 'Thick outlines, hard shadows, sticker feel',
+        c: { bg: '#FFF7E8', surface: '#FFFFFF', text: '#1D1B3A', muted: '#5D5A82', line: '#1D1B3A', primary: '#FF6A3D', accent: '#1F9E92', on: '#1D1B3A', link: '#137167' },
+        head: ROUND, w: 800, radius: 20, shadow: '4px 4px 0 #1D1B3A',
+        nzh: '卡片和按钮 2px 深色描边 + 不模糊的硬阴影；主色按钮上用深色字；元素可以略微倾斜、像贴纸；颜色最多三种',
+        nen: '2px dark outlines and hard, unblurred shadows on cards and buttons; dark text on the primary button; slightly tilted sticker-like bits; three colors max' },
+      { id: 'fresh', zh: '清新自然', en: 'Fresh', dzh: '浅绿底、圆角卡片、轻插画', den: 'Pale green, rounded cards, light illustration',
+        c: { bg: '#F3F7F2', surface: '#FFFFFF', text: '#1F2A22', muted: '#56665A', line: '#DCE6DA', primary: '#2F7D4F', accent: '#C9962A', on: '#FFFFFF', link: '#2F7D4F' },
+        head: SANS, w: 600, radius: 14, shadow: '0 6px 18px rgba(47,125,79,.10)',
+        nzh: '大面积浅色、卡片白底；插画用叶子、阳光这类自然元素；黄色只做小点缀；整体轻、透气',
+        nen: 'Large light areas with white cards; nature motifs (leaves, sunlight) in illustrations; yellow only as a small accent; light and airy' },
+      { id: 'tech', zh: '专业科技', en: 'Pro / tech', dzh: '冷灰蓝、信息密、数字清楚', den: 'Cool gray-blue, dense info, crisp numbers',
+        c: { bg: '#F5F7FB', surface: '#FFFFFF', text: '#0F172A', muted: '#55657D', line: '#E2E8F0', primary: '#2457F5', accent: '#0F8F8E', on: '#FFFFFF', link: '#2457F5' },
+        head: SANS, w: 600, radius: 8, shadow: '0 1px 3px rgba(15,23,42,.08)',
+        nzh: '信息密度高但对齐严格；数字用等宽（font-variant-numeric: tabular-nums）；表格行高 44–48；状态用小色点和标签；主色只给主操作',
+        nen: 'Dense but strictly aligned; tabular numbers (font-variant-numeric: tabular-nums); 44–48px table rows; status as small dots and tags; primary color only for the main action' },
+      { id: 'glass', zh: '玻璃质感', en: 'Glass', dzh: '柔光底、浮层毛玻璃', den: 'Soft glow background, frosted overlays',
+        c: { bg: '#EAF0F6', surface: '#F7F9FC', text: '#10151C', muted: '#4F5B69', line: '#D5DEE8', primary: '#CC4520', accent: '#2B6CB0', on: '#FFFFFF', link: '#2B6CB0' },
+        bgImage: 'radial-gradient(circle at 20% 15%, #FFD9C7 0, transparent 45%), radial-gradient(circle at 85% 70%, #C9E2FF 0, transparent 50%)',
+        head: SANS, w: 600, radius: 18, shadow: '0 10px 30px rgba(16,21,28,.10)',
+        nzh: '底色加两三团柔和的光斑（别用紫蓝渐变）；只有浮层、卡片、标签栏用毛玻璃（半透明白 + backdrop-filter: blur(20px) + 1px 白色描边），正文区是实色；毛玻璃上的字照样要够深',
+        nen: 'Two or three soft light blobs on the background (not a purple-blue gradient); frosted glass only on overlays, cards and tab bars (translucent white + backdrop-filter: blur(20px) + 1px white border), solid elsewhere; text on glass stays dark enough' },
+      { id: 'soft', zh: '柔和立体', en: 'Soft UI', dzh: '同色底、凸起凹陷的柔光阴影', den: 'Same-color surfaces with raised and pressed soft shadows',
+        c: { bg: '#E9EDF2', surface: '#E9EDF2', text: '#2D3440', muted: '#556072', line: '#D3D9E1', primary: '#3E5BD8', accent: '#22A06B', on: '#FFFFFF', link: '#3E5BD8' },
+        head: ROUND, w: 700, radius: 18, shadow: '6px 6px 14px #C8CED6, -6px -6px 14px #FFFFFF',
+        nzh: '卡片和底同色，靠一亮一暗两道阴影凸起，按下用内阴影；容易看不清，所以主按钮一定用主色实底、文字够深；别整屏都是凸起',
+        nen: 'Cards share the background color and rise with a light and a dark shadow; pressed states use inset shadows; it gets low-contrast fast, so the main button is solid primary with strong text; don\'t make everything raised' },
+    ]
+
+    /** 选了一个风格 → 输入框里的一段字（restyle：给已经打开的设计换风格） */
+    function formatStyle(t, pre, restyle) {
+      const en = t('lang') === 'en'
+      const c = pre.c
+      const fonts = t('styleFonts', { head: `${pre.head} · ${pre.w}`, body: SANS })
+      return t('styleText', {
+        name: en ? pre.en : pre.zh,
+        desc: en ? pre.den : pre.dzh,
+        colors: t('styleColors', { ...c, bgImage: pre.bgImage ? t('styleBgImage', { v: pre.bgImage }) : '' }),
+        fonts,
+        shape: t('styleShape', { r: pre.radius, s: pre.shadow }),
+        notes: en ? pre.nen : pre.nzh,
+        ask: t(restyle ? 'styleRestyle' : 'styleStart'),
+      })
+    }
+
+    // ── 调样式 ───────────────────────────────────────────────────────────────
+
+    const VAR_ONLY = /^var\(\s*(--[\w-]+)\s*\)$/
+    /** 面板上能调的几项：属性 → [文案, 哪一行]（上下 / 左右内边距各管两条） */
+    const STYLE_LABEL = { 'font-size': 'styleFont', 'font-weight': 'styleWeight', color: 'styleColor', background: 'styleBg', 'border-radius': 'styleRadius',
+      'padding-top': 'stylePadY', 'padding-bottom': 'stylePadY', 'padding-left': 'stylePadX', 'padding-right': 'stylePadX', gap: 'styleGap' }
+
+    /** 变量名 → 它现在的值（页面 :root 上的） */
+    const tokenVal = (name, tokens) => { const tok = (tokens || []).find((x) => x.name === name); return tok ? String(tok.value).trim() : '' }
+
+    /** 值 → 像素数（var(--x) 先换成变量的值；rem / em 按 16）；认不出返回 null */
+    function pxOf(v, tokens) {
+      let s = String(v || '').trim()
+      const m = VAR_ONLY.exec(s)
+      if (m) s = tokenVal(m[1], tokens)
+      const n = parseFloat(s)
+      if (!isFinite(n)) return null
+      return /r?em$/.test(s) ? n * 16 : n
+    }
+
+    /** 透明的颜色（没设背景时 getComputedStyle 给 rgba(0, 0, 0, 0)） */
+    const clearColor = (v) => /^(transparent|rgba\(.*,\s*0\)|hsla\(.*,\s*0%?\))$/i.test(String(v || '').trim())
+
+    /** 值 → '#rrggbb'（颜色框只认这个）；透明的给白色，不然显示成黑的 */
+    const colorHex = (v, tokens) => {
+      const m = VAR_ONLY.exec(String(v || '').trim())
+      const c = m ? tokenVal(m[1], tokens) : v
+      return '#' + (clearColor(c) ? 'ffffff' : hexOf(c))
+    }
+
+    /** 给人看的值：颜色换成 #RRGGBB，透明的说透明，别的原样 */
+    const showVal = (prop, v, t) => {
+      if (!/^(color|background)$/.test(prop)) return String(v)
+      if (clearColor(v)) return t ? t('styleClear') : 'transparent'
+      return /^(rgb|hsl)/i.test(String(v)) ? '#' + hexOf(v).toUpperCase() : String(v)
+    }
+
+    /** 改了的几项 → 「字号 15px → 17px」这种；上下 / 左右内边距只说一次 */
+    function styleChanges(t, sty) {
+      const out = []
+      const seen = new Set()
+      for (const [k, v] of Object.entries((sty && sty.live) || {})) {
+        const key = STYLE_LABEL[k]
+        if (!key || seen.has(key)) continue
+        seen.add(key)
+        out.push(t('styleArrow', { prop: t(key), from: showVal(k, sty.base[k], t), to: showVal(k, v, t) }))
+      }
+      return out
+    }
+
+    const ruleKey = (r) => `${r.href}|${r.sel}|${r.n}`
+    /** 规则在哪：服务端找到了行号就是「app.css 第 42 行」，没找到就是文件名 */
+    function ruleAt(t, r, located) {
+      const hit = located && located.get(ruleKey(r))
+      if (hit && hit.file) return hit.line ? t('ruleAt', { file: hit.file, line: hit.line }) : hit.file
+      try { return decodeURIComponent(new URL(r.href).pathname.split('/').pop()) || r.href } catch { return String(r.href || '') }
+    }
+
+    /** 改了的这几项现在各由哪条规则决定（同一条规则的合成一行），模型照着去改那条，不用再 grep */
+    function ruleLines(t, sty, located) {
+      const groups = new Map()
+      for (const k of Object.keys((sty && sty.live) || {})) {
+        const r = sty.rules && sty.rules[k]
+        const key = STYLE_LABEL[k]
+        if (!r || !key) continue
+        const g = r.inline ? `inline|${r.sel ? ruleKey(r) : ''}` : ruleKey(r)
+        if (!groups.has(g)) groups.set(g, { r, props: [] })
+        const label = t(key)
+        if (!groups.get(g).props.includes(label)) groups.get(g).props.push(label)
+      }
+      const out = []
+      for (const { r, props } of groups.values()) {
+        const p = props.join('、')
+        if (r.inline) out.push(t('ruleInline', { props: p, over: r.sel ? t('ruleOver', { sel: r.sel, at: ruleAt(t, r, located) }) : '' }))
+        else out.push(t(r.maybe ? 'ruleMaybe' : 'ruleFrom', { props: p, sel: r.sel, at: ruleAt(t, r, located) }))
+      }
+      return out
+    }
+
+    /** 调好的样式交给模型：哪一屏、哪个元素、改了什么、现在由哪条规则决定（located：服务端找到的行号），让它改进样式表 */
+    function formatStyleAsk(t, sty, st, located) {
+      const rules = ruleLines(t, sty, located)
+      return t('styleAskText', { name: sty.name, sel: sty.selector, list: styleChanges(t, sty).join(t('styleJoin')), rules: rules.length ? `\n${rules.join('\n')}\n` : '', where: whereOf(sty.url, st) })
+    }
+
+    // ── 设计体检 ─────────────────────────────────────────────────────────────
+
+    /** 一条问题的具体数字（「#C8C8C8 配 #FFFFFF，1.7:1」这种） */
+    function checkDetail(t, it) {
+      const edge = it.edge === 'top' || it.edge === 'bottom' ? it.edge : ''
+      return t('cd_' + it.type, {
+        ...it,
+        n: it.sizes ? it.sizes.length : '',
+        sizes: it.sizes ? it.sizes.join(' / ') : '',
+        otherText: String(it.otherText || '').slice(0, 20),
+        edgeName: edge ? t('ckEdge_' + edge) : '',
+        when: edge ? t('ckWhen_' + edge) : '',
+        what: it.type === 'missing' ? t('ckWhat_' + (['css', 'script', 'font'].includes(it.what) ? it.what : 'other')) : '',
+        at: it.type === 'jserr' && it.src ? ` (${it.src}${it.line ? ':' + it.line : ''})` : '',
+      })
+    }
+
+    /** 量的时候这一屏多大、页面多高、固定栏离内容多远（让模型知道量的是什么） */
+    function sizeLine(t, m) {
+      if (!m || !m.w) return ''
+      let out = t('ckSize', { w: m.w, h: m.h, page: m.page || m.h })
+      for (const b of m.bars || []) if (b.gap != null) out += t('ckSizeBar', { edgeName: t('ckEdge_' + b.edge), bar: b.name, gap: b.gap })
+      return out
+    }
+
+    /** 体检结果 → 输入框里的一段字：按屏分组，带文件位置、选择器和数字，模型照着改 */
+    function formatCheck(t, list, st, head = 'checkAsk') {
+      const n = list.reduce((m, x) => m + x.issues.length, 0)
+      const lines = [t(head, { n, s: list.length })]
+      for (const sc of list) {
+        if (sc.error && head !== 'checkAsk') lines.push('', t('ckToolErr', { label: sc.label, msg: sc.error }))
+        if (!sc.issues.length) continue
+        const sz = head === 'checkAsk' ? '' : sizeLine(t, sc.metrics)
+        lines.push('', t('ckScreen', { label: sc.label, where: whereOf(sc.url, st) }) + (sz ? ` · ${sz}` : ''))
+        sc.issues.forEach((it, i) => lines.push(t('ckItem', {
+          i: i + 1,
+          type: t('ck_' + it.type),
+          where: it.sel || '',
+          text: it.text ? t('ckQuote', { text: it.text }) : '',
+          detail: checkDetail(t, it),
+        })))
+      }
+      return lines.join('\n') + '\n'
+    }
+
+    /**
+     * 一屏是不是「同一屏的几个版本」之一：home-a / home-b / home-c，或 login / login-b / login-c（和 core.js 的 placeScreen 一个规则）。
+     * 是就给出 { stem, letter, others }（others：同组的其他文件名），不是给 null
+     */
+    function takesOf(keys, key) {
+      const VAR = /^(.+)-([a-z])\.html?$/i
+      const part = (x) => {
+        const v = VAR.exec(x)
+        return v ? { stem: v[1].toLowerCase(), letter: v[2].toLowerCase() } : { stem: x.toLowerCase().replace(/\.html?$/i, ''), letter: '' }
+      }
+      if (!/\.html?$/i.test(key)) return null
+      const me = part(key)
+      const others = keys.filter((x) => x !== key && /\.html?$/i.test(x) && part(x).stem === me.stem && (me.letter || part(x).letter))
+      if (!others.length || (!me.letter && !others.some((x) => part(x).letter))) return null
+      return { stem: VAR.exec(key) ? VAR.exec(key)[1] : key.replace(/\.html?$/i, ''), letter: me.letter, others }
+    }
+
+    /** 体检结果 → 交给 check_design 工具的一段字（模型自己调的，不带〔设计体检〕开头） */
+    function formatCheckTool(t, list, st) {
+      const n = list.reduce((m, x) => m + x.issues.length, 0)
+      if (n || list.some((x) => x.error)) return formatCheck(t, list, st, 'ckToolHead')
+      return t('ckToolOk', { s: list.length, labels: list.map((x) => { const sz = sizeLine(t, x.metrics); return sz ? `${x.label} ${sz}` : x.label }).join(' / ') })
+    }
+
     // ── 导出图片：设备外框、整套展示图 ───────────────────────────────────────
 
     const SHOW_COLS = { app: 4, tablet: 3, web: 2, poster: 3, slides: 2, email: 3 }
@@ -1140,6 +1671,32 @@ window.__ModuleLoader__.load({
       return canvasBlob(c)
     }
 
+    /** CSS 颜色 → 'RRGGBB'（PPT 留边的底色）；认不出就白色 */
+    function hexOf(color) {
+      try {
+        const c = document.createElement('canvas')
+        c.width = c.height = 1
+        const ctx = c.getContext('2d')
+        ctx.fillStyle = '#ffffff'
+        ctx.fillStyle = color || '#ffffff'
+        ctx.fillRect(0, 0, 1, 1)
+        return [...ctx.getImageData(0, 0, 1, 1).data.slice(0, 3)].map((x) => x.toString(16).padStart(2, '0')).join('')
+      } catch { return 'ffffff' }
+    }
+
+    /** 截图 → JPEG（base64）。PDF / PPT 里一页一张，JPEG 小得多；透明的地方垫白 */
+    async function jpegB64(img) {
+      const c = document.createElement('canvas')
+      c.width = img.width
+      c.height = img.height
+      const ctx = c.getContext('2d')
+      ctx.fillStyle = '#ffffff'
+      ctx.fillRect(0, 0, c.width, c.height)
+      ctx.drawImage(img, 0, 0)
+      const blob = await new Promise((resolve, reject) => c.toBlob((b) => (b ? resolve(b) : reject(new Error('toBlob failed'))), 'image/jpeg', 0.9))
+      return blobB64(blob)
+    }
+
     function blobB64(blob) {
       return new Promise((resolve, reject) => {
         const r = new FileReader()
@@ -1476,15 +2033,32 @@ window.__ModuleLoader__.load({
     function away(src) {
       try { return !!src && LOCAL_HOST.test(new URL(src).hostname) && /^https?:$/.test(location.protocol) && !LOCAL_HOST.test(location.hostname) } catch { return false }
     }
+    // 远程看（本地文件的预览）：服务端把这一屏连同样式、图片打成一份 HTML，放进沙盒 iframe 的 srcdoc
+    const remOf = (p) => (p.remote && away(p.src) ? p.remote : null)
+    const OLD_VER = /^__dsh_design__\/v\/(\d+)\/(.*)$/
+    /** 这一屏（预览服务器上的地址）打包后的取法 */
+    function bundleOf(href, sid) {
+      let p
+      try { p = new URL(href).pathname } catch { return '' }
+      try { p = decodeURIComponent(p) } catch { /* 原样 */ }
+      p = p.replace(/^\/+/, '')
+      let v = ''
+      const m = OLD_VER.exec(p)
+      if (m) { v = m[1]; p = m[2] }
+      if (!p || p.endsWith('/')) p += 'index.html'
+      return `${API}bundle?${new URLSearchParams({ session: sid, key: p, v, parent: location.origin })}`
+    }
 
     function Screen(props) {
       const src = props.src
       const origin = src ? new URL(src).origin : ''
       const [frames, setFrames] = useState([])
       const [cur, setCur] = useState(0)
+      const [failed, setFailed] = useState(false) // 远程看：打包没取回来
+      const rem = remOf(props)
       const wins = useRef(new Map())
       const life = useRef(null)
-      if (!life.current) life.current = { next: 1, loading: 0, again: false, file: '', seeds: new Map(), seedOf: new Map(), readied: new Set(), snapTimer: null }
+      if (!life.current) life.current = { next: 1, loading: 0, again: false, file: '', seeds: new Map(), seedOf: new Map(), readied: new Set(), snapTimer: null, gen: 0, at: '', deps: null }
       const curRef = useRef(0)
       const P = useRef(props)
       P.current = props
@@ -1503,6 +2077,16 @@ window.__ModuleLoader__.load({
             postTo(curRef.current, { type: 'capture', id, ...opts })
             setTimeout(() => { if (caps.current.has(id)) { caps.current.delete(id); reject(new Error('timeout')) } }, 30000)
           }),
+          // 设计体检：页面里量完回 { issues }，问题同时标在页面上（quiet：只要结果，不标）
+          check: (kind, quiet) => new Promise((resolve, reject) => {
+            if (!curRef.current) { reject(new Error('not loaded')); return }
+            const id = `${Date.now()}-${++seq}`
+            caps.current.set(id, { resolve, reject })
+            postTo(curRef.current, { type: 'check', id, kind, quiet: !!quiet })
+            setTimeout(() => { if (caps.current.has(id)) { caps.current.delete(id); reject(new Error('timeout')) } }, 15000)
+          }),
+          checkFocus: (i) => { if (curRef.current) postTo(curRef.current, { type: 'checkFocus', i }) },
+          checkClear: () => { if (curRef.current) postTo(curRef.current, { type: 'checkClear' }) },
         }
       }
       // 登记到右侧栏：导出图片时按屏找到它
@@ -1516,7 +2100,10 @@ window.__ModuleLoader__.load({
 
       const postTo = (id, msg) => {
         const f = wins.current.get(id)
-        if (f && f.contentWindow && origin) f.contentWindow.postMessage({ dshDesign: 1, ...msg }, origin)
+        if (!f || !f.contentWindow) return
+        // 远程看：沙盒里的页面是不透明的源，只能发给 *（发的都是界面指令，没有要保密的）
+        if (f.hasAttribute('srcdoc')) f.contentWindow.postMessage({ dshDesign: 1, ...msg }, '*')
+        else if (origin) f.contentWindow.postMessage({ dshDesign: 1, ...msg }, origin)
       }
 
       // 在后台载一帧新的；正在载就记一笔，等它换上来再载
@@ -1525,13 +2112,44 @@ window.__ModuleLoader__.load({
         if (L.loading) { L.again = true; return }
         const id = L.next++
         L.loading = id
+        if (seed) L.seedOf.set(id, seed)
+        const r = remOf(P.current)
+        if (r) {
+          const gen = L.gen
+          fetch(bundleOf(L.at || P.current.src, r.sid), { credentials: 'same-origin', cache: 'no-store' })
+            .then((res) => res.json().then((d) => {
+              if (!res.ok || !d || typeof d.html !== 'string') throw new Error((d && d.error) || `HTTP ${res.status}`)
+              return d
+            }))
+            .then((d) => {
+              if (L.gen !== gen || L.loading !== id) return
+              L.deps = Array.isArray(d.deps) ? d.deps : null
+              L.fails = 0
+              setFailed(false)
+              setFrames((fs) => [...fs, { id, doc: d.html }])
+            })
+            .catch(() => {
+              if (L.gen !== gen || L.loading !== id) return
+              L.loading = 0
+              if (!curRef.current) setFailed(true)
+              // 没取回来：那次改动还没显示出来，过一会儿再试（最多三回），别等下一次改动
+              L.fails = (L.fails || 0) + 1
+              if (L.again || L.fails <= 3) { L.again = false; setTimeout(() => { if (L.gen === gen) load(null) }, 1500 * Math.min(L.fails, 3)) }
+            })
+          return
+        }
         let url = P.current.src
         try { if (seed && seed.href && new URL(seed.href).origin === origin) url = seed.href } catch { /* 用原地址 */ }
-        if (seed) L.seedOf.set(id, seed)
         setFrames((fs) => [...fs, { id, src: url }])
       }
 
       const pickMsg = () => ({ type: 'pick', hint: false }) // 提示放在右侧栏（页面顶上会被手机的灵动岛挡住）
+      // 调样式：开模式、选中右侧栏记着的那个元素、把改到一半的样式再套上（新载的一帧要从头告诉它）
+      const styleTo = (id, p) => {
+        postTo(id, { type: 'styleMode', on: true })
+        if (p.styleSel) postTo(id, { type: 'styleSel', selector: p.styleSel })
+        if (p.styleCss) postTo(id, { type: 'style', css: p.styleCss })
+      }
 
       // 一帧好了：淡入换上来
       const swap = (id, changes) => {
@@ -1548,6 +2166,7 @@ window.__ModuleLoader__.load({
         if (p.picking) postTo(id, pickMsg())
         if (p.demo) postTo(id, { type: 'demo', on: true })
         if (p.textEdit) postTo(id, { type: 'edit', on: true, hint: false })
+        if (p.styleEdit) styleTo(id, p)
         if (first && p.onShown) p.onShown()
         if (first) { if (build && p.onBuilt) p.onBuilt(L.title || '') } else if (p.onNote) p.onNote({ changes, file: L.file, build })
         L.file = ''
@@ -1565,16 +2184,21 @@ window.__ModuleLoader__.load({
         L.again = false
         L.seeds.clear()
         L.seedOf.clear()
+        L.gen++
+        L.at = ''
+        L.deps = null
+        L.fails = 0
         curRef.current = 0
         setCur(0)
         setFrames([])
+        setFailed(false)
         if (src) setTimeout(() => load(null), 0)
-      }, [src])
+      }, [src, !!rem])
 
       // 页面发来的消息（几屏共用一个源，按 iframe 认是不是自己的）
       useEffect(() => {
         const on = (e) => {
-          if (!origin || e.origin !== origin) return
+          if (rem ? e.origin !== 'null' : !origin || e.origin !== origin) return
           let id = 0
           for (const [k, f] of wins.current) if (f && f.contentWindow === e.source) { id = k; break }
           const d = e.data
@@ -1603,6 +2227,7 @@ window.__ModuleLoader__.load({
                 if (p.picking) postTo(id, pickMsg())
                 if (p.demo) postTo(id, { type: 'demo', on: true })
                 if (p.textEdit) postTo(id, { type: 'edit', on: true, hint: false })
+                if (p.styleEdit) styleTo(id, p)
                 if (d.changes && d.changes.count && p.onNote) p.onNote({ changes: d.changes, file: '' })
               } else if (id > curRef.current) swap(id, d.changes)
               break
@@ -1622,14 +2247,20 @@ window.__ModuleLoader__.load({
               if (isCur && p.onNote) p.onNote({ changes: d.changes, file: '' })
               break
             case 'cancelled':
-              if (isCur && p.onCancelled) p.onCancelled()
+              if (!isCur) break
+              if (d.style) { if (p.onStyleCancel) p.onStyleCancel() } else if (p.onCancelled) p.onCancelled()
+              break
+            case 'stylePick':
+              if (isCur && p.styleEdit && p.onStylePick && d.payload && d.payload.loc) p.onStylePick(d.payload)
               break
             // 点选、改字只在用户开着对应模式时收（页面自己的脚本也能发这种消息，不能随时往输入框里塞字、往文件里写）
             case 'picked':
               if (isCur && p.picking && p.onPicked) p.onPicked(d.payload)
               break
             case 'nav':
-              if (isCur && p.onNav && typeof d.path === 'string') p.onNav(d.path)
+              if (!isCur || typeof d.path !== 'string') break
+              if (p.onNav) p.onNav(d.path)
+              else if (remOf(p)) { L.at = origin + d.path; load(null) } // 远程看：页面里点了跳页，这一框换成那一页（和本机预览时 iframe 自己跳过去一样）
               break
             case 'edited':
               if (isCur && (p.textEdit || Date.now() - editOffAt.current < EDIT_GRACE_MS) && p.onEdited && typeof d.before === 'string' && typeof d.after === 'string') p.onEdited(d)
@@ -1637,6 +2268,7 @@ window.__ModuleLoader__.load({
             case 'editDone':
               if (isCur && p.onEditDone) p.onEditDone()
               break
+            case 'checked':
             case 'captured': {
               const c = caps.current.get(d.id)
               if (c) {
@@ -1651,7 +2283,7 @@ window.__ModuleLoader__.load({
         }
         window.addEventListener('message', on)
         return () => window.removeEventListener('message', on)
-      }, [origin, src])
+      }, [origin, src, !!rem])
 
       // 模型在不在干活、画布缩放比例、选取开关：告诉页面
       useEffect(() => { if (cur) postTo(cur, { type: 'busy', on: !!props.busy }) }, [!!props.busy, cur])
@@ -1659,6 +2291,10 @@ window.__ModuleLoader__.load({
       useEffect(() => { if (cur) postTo(cur, { type: 'zoom', z: zq / 100 }) }, [zq])
       useEffect(() => { if (cur) postTo(cur, props.picking ? pickMsg() : { type: 'cancel' }) }, [!!props.picking])
       useEffect(() => { if (cur) postTo(cur, { type: 'theme', dark: !!props.dark }) }, [!!props.dark])
+      useEffect(() => { if (cur) { if (props.styleEdit) styleTo(cur, props); else postTo(cur, { type: 'styleMode', on: false }) } }, [!!props.styleEdit])
+      useEffect(() => { if (cur && props.styleEdit) postTo(cur, { type: 'styleSel', selector: props.styleSel || '' }) }, [props.styleSel || ''])
+      const cssSig = JSON.stringify(props.styleCss || {})
+      useEffect(() => { if (cur && props.styleEdit) postTo(cur, { type: 'style', css: props.styleCss || {} }) }, [cssSig])
       useEffect(() => { if (cur) postTo(cur, { type: 'demo', on: !!props.demo }) }, [!!props.demo])
       useEffect(() => {
         // 刚退出改字（点按钮、Esc、模型开始干活）：页面会把正在改的那一处交上来，这一小会儿还收
@@ -1668,17 +2304,46 @@ window.__ModuleLoader__.load({
       }, [!!props.textEdit])
 
       // 刷新：先问当前这帧要滚动位置和指纹，问不到就直接载
-      const seq = useRef(props.reloadSeq)
-      useEffect(() => {
-        if (seq.current === props.reloadSeq) return
-        seq.current = props.reloadSeq
+      const refresh = () => {
         const L = life.current
         if (!curRef.current) { load(null); return }
         clearTimeout(L.snapTimer)
         L.snapTimer = setTimeout(() => load(null), 400)
         postTo(curRef.current, { type: 'snapshot' })
+      }
+      const seq = useRef(props.reloadSeq)
+      useEffect(() => {
+        if (seq.current === props.reloadSeq) return
+        seq.current = props.reloadSeq
+        refresh()
       }, [props.reloadSeq])
 
+      // 远程看：页面连不上预览服务器、收不到它的改动通知，跟着右侧栏轮询到的「目录里改了哪些文件」重新打包
+      // （改的全是这一屏没用到的就不动；旧版本不会变）。两次轮询之间可能来了好几批：按序号取上次看到之后所有批的并集，
+      // 记录断了档（中间的批已经挤掉了）就不知道改了啥，整屏重打包
+      const changes = (rem && rem.changes) || []
+      const chgN = changes.length ? changes[changes.length - 1].n : 0
+      const chg = rem ? `${rem.at || 0}|${chgN}` : ''
+      const chgWas = useRef(chg)
+      const seenN = useRef(chgN)
+      useEffect(() => {
+        if (chgWas.current === chg) return
+        chgWas.current = chg
+        const from = seenN.current
+        seenN.current = chgN
+        if (!rem || !rem.at) return
+        const L = life.current
+        let path = ''
+        try { path = new URL(L.at || src).pathname.replace(/^\/+/, '') } catch { /* 地址不对 */ }
+        if (OLD_VER.test(path)) return
+        const fresh = changes.filter((c) => c.n > from)
+        const unknown = !changes.length || changes[0].n > from + 1 || fresh.some((c) => !(c.files || []).length)
+        const files = [...new Set(fresh.flatMap((c) => c.files || []))]
+        if (!unknown && L.deps && !files.some((f) => L.deps.includes(f))) return
+        L.file = files[files.length - 1] || L.file
+        refresh()
+      }, [chg])
+
       // 页面没装上脚本（极少数，比如不是 HTML）：载完等一会儿也换上来
       const onFrameLoad = (id) => {
         setTimeout(() => {
@@ -1687,15 +2352,17 @@ window.__ModuleLoader__.load({
         }, 1600)
       }
 
-      // 预览服务器只听电脑本机（127.0.0.1）。从手机（dsh-mobile）或别的电脑打开 DSH 网页时，这个地址指的是它们自己，
-      // 框里会一直空白：说清楚
-      if (away(src)) return h('div', { className: 'ddp-scr' + (props.dark ? ' dk' : '') }, h('div', { className: 'ddp-away', style: { fontSize: 13 / Math.max(0.25, props.zoom || 1) } }, props.t ? props.t('away') : ZH.away)) // 画布缩小了，字别跟着变小
+      // 预览服务器只听电脑本机（127.0.0.1）。从手机（dsh-mobile）或别的电脑打开 DSH 网页时，这个地址指的是它们自己：
+      // 本地文件的预览打包传过来（上面）；开发服务器的没法打包，框里会一直空白，说清楚
+      const tell = (k) => h('div', { className: 'ddp-scr' + (props.dark ? ' dk' : '') }, h('div', { className: 'ddp-away', style: { fontSize: 13 / Math.max(0.25, props.zoom || 1) } }, props.t ? props.t(k) : ZH[k])) // 画布缩小了，字别跟着变小
+      if (away(src) && !rem) return tell('away')
+      if (rem && failed && !cur) return tell('remoteFail')
       return h('div', { className: 'ddp-scr' + (props.dark ? ' dk' : '') },
         ...frames.map((f) => h('iframe', {
           key: f.id,
           ref: (el) => { if (el) wins.current.set(f.id, el); else wins.current.delete(f.id) },
           className: 'ddp-frame' + (f.id === cur ? ' cur' : f.id < cur ? ' old' : ''),
-          src: f.src,
+          ...(typeof f.doc === 'string' ? { srcDoc: f.doc, sandbox: 'allow-scripts allow-forms', referrerPolicy: 'no-referrer' } : { src: f.src }),
           title: props.label || '',
           tabIndex: f.id === cur ? 0 : -1,
           'aria-hidden': f.id === cur ? undefined : true,
@@ -1729,7 +2396,7 @@ window.__ModuleLoader__.load({
     }
 
     /** 设计规范面板：按组列出变量，点一个放进输入框 */
-    function TokensPanel({ t, tokens, onPick, onAsk, onRef, onClose }) {
+    function TokensPanel({ t, tokens, onPick, onAsk, onRef, onStyles, onClose }) {
       const groups = {}
       for (const tok of tokens) (groups[tokenKind(tok)] = groups[tokenKind(tok)] || []).push(tok)
       const px = (v) => Math.max(0, parseFloat(v) * (/rem|em$/.test(v) ? 16 : 1)) || 0
@@ -1755,7 +2422,112 @@ window.__ModuleLoader__.load({
                 h('span', { className: g === 'shadow' ? 'pv lt' : 'pv' }, preview(g, tok.value)),
                 h('span', { className: 'tx' }, h('span', { className: 'nm' }, tok.name), h('span', { className: 'vl' }, tok.value))))))
             : h('div', { className: 'none' }, t('tokensEmpty'), h('div', null, h('button', { className: 'ddp-go', onClick: onAsk }, t('tokensAsk'))))),
-        onRef ? h('footer', null, h('button', { title: t('refPickTip'), onClick: onRef }, h(I.image), h('span', null, t('refPick')))) : null)
+        onRef || onStyles ? h('footer', null,
+          onStyles ? h('button', { onClick: onStyles }, h(I.sparkle), h('span', null, t('stylesOpen'))) : null,
+          onRef ? h('button', { title: t('refPickTip'), onClick: onRef }, h(I.image), h('span', null, t('refPick'))) : null) : null)
+    }
+
+    /** 设计体检的结果：按屏列出问题（和页面上的编号一样），点一条在页面上滚过去、那个框闪一下 */
+    function CheckPanel({ t, ck, onFocus, onFix, onAgain, onClose }) {
+      const list = ck.list || []
+      const n = list.reduce((m, x) => m + x.issues.length, 0)
+      const multi = list.length > 1
+      return h('div', { className: 'ddp-tokens ddp-check', onPointerDown: (e) => e.stopPropagation() },
+        h('header', null, h(I.stetho), h('b', null, t('check')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
+        h('p', { className: 'tip' }, ck.running ? t('checking') : n ? t('checkSum', { s: list.filter((x) => x.issues.length).length, n }) : t('checkNote')),
+        h('div', { className: 'bd' },
+          ...list.filter((sc) => sc.issues.length || sc.error).map((sc) => h('div', { key: sc.key },
+            multi ? h('h4', null, sc.label) : null,
+            sc.error ? h('div', { className: 'none' }, t('checkFail', { msg: sc.error })) : null,
+            ...sc.issues.map((it, i) => h('button', { key: i, className: 'ddp-tok ddp-ck', title: it.sel || '', onClick: () => onFocus(sc.key, i) },
+              h('span', { className: 'no' + (it.sev > 1 ? ' hi' : '') }, String(i + 1)),
+              h('span', { className: 'tx' },
+                h('span', { className: 'nm' }, t('ck_' + it.type) + (it.text ? ` · ${it.text}` : '')),
+                h('span', { className: 'vl' }, checkDetail(t, it))))))),
+          !ck.running && !n ? h('div', { className: 'ok' }, h(I.check), h('span', null, t('checkNone'))) : null),
+        n ? h('p', { className: 'tip' }, t('checkNote')) : null,
+        h('footer', { className: 'row' },
+          h('button', { onClick: onAgain, disabled: ck.running }, h(I.refresh), h('span', null, t('checkAgain'))),
+          h('button', { className: 'go', onClick: onFix, disabled: ck.running || !n }, h(I.sparkle), h('span', null, t('checkFix')))))
+    }
+
+    /**
+     * 调样式面板：选中的元素的字号、字重、颜色、背景、圆角、内边距、间距。
+     * 拖的时候页面上先看效果（还没写进文件）；设计变量列成小块，点一个就用 var(--x)。
+     * write：{ ok, tip } 能不能写回文件（开发服务器、模型在干活时不能）
+     */
+    function StylePanel({ t, sty, tokens, write, onSet, onReset, onAsk, onSave, onClose }) {
+      const head = h('header', null, h(I.sliders), h('b', null, t('style')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close)))
+      const box = (...kids) => h('div', { className: 'ddp-tokens ddp-style', onPointerDown: (e) => e.stopPropagation() }, head, ...kids)
+      if (!sty) return box(h('p', { className: 'tip' }, t('styleNone')))
+      const groups = {}
+      for (const tok of tokens || []) (groups[tokenKind(tok)] = groups[tokenKind(tok)] || []).push(tok)
+      const cur = (k) => (k in sty.live ? sty.live[k] : sty.base[k])
+      // 现在用的是哪个变量：改过的看改成了什么，没改的看样式表里怎么写的
+      const varOf = (k) => { const m = VAR_ONLY.exec(String(cur(k) || '').trim()); return m ? m[1] : k in sty.live ? '' : (sty.vars || {})[k] || '' }
+      const set = (props, v) => onSet(Object.fromEntries(props.map((p) => [p, v])))
+      const chips = (kind, props) => (groups[kind] || []).slice(0, 10).map((tok) => h('button', {
+        key: tok.name,
+        className: 'chip' + (kind === 'color' ? ' c' : '') + (varOf(props[0]) === tok.name ? ' on' : ''),
+        title: `${tok.name}: ${tok.value}`,
+        onClick: () => set(props, `var(${tok.name})`),
+      }, kind === 'color' ? h('i', { style: { background: tok.value } }) : tok.name.replace(/^--/, '')))
+      const shown = (k, text) => (varOf(k) ? h('em', { className: 'v', title: t('styleVar', { name: varOf(k) }) }, varOf(k)) : h('em', null, text))
+      const slider = (key, props, max, kind) => {
+        const v = Math.round(pxOf(cur(props[0]), tokens) ?? 0)
+        const c = kind ? chips(kind, props) : []
+        return h('div', { className: 'row', key },
+          h('label', null, h('span', null, t(key)), shown(props[0], `${v}px`)),
+          h('input', { type: 'range', min: 0, max: Math.max(max, v), step: 1, value: v, 'aria-label': t(key), onChange: (e) => set(props, `${e.target.value}px`) }),
+          c.length ? h('div', { className: 'chips' }, ...c) : null)
+      }
+      const color = (key, prop, note) => h('div', { className: 'row', key },
+        h('label', null, h('span', null, t(key)), shown(prop, showVal(prop, cur(prop), t))),
+        h('div', { className: 'chips' },
+          h('input', { type: 'color', value: colorHex(cur(prop), tokens), 'aria-label': t(key), onChange: (e) => set([prop], e.target.value) }),
+          ...chips('color', [prop])),
+        note ? h('div', { className: 'note' }, note) : null)
+      const w = Math.min(700, Math.max(400, Math.round(parseInt(cur('font-weight'), 10) / 100) * 100 || 400))
+      const n = Object.keys(sty.live).length
+      return box(
+        h('p', { className: 'who', title: sty.selector }, h('code', null, sty.name), sty.text ? ` · ${sty.text}` : ''),
+        h('div', { className: 'bd' },
+          slider('styleFont', ['font-size'], 72, 'size'),
+          h('div', { className: 'row', key: 'w' },
+            h('label', null, h('span', null, t('styleWeight')), h('em', null, String(cur('font-weight')))),
+            h('div', { className: 'seg' }, ...[400, 500, 600, 700].map((x) => h('button', { key: x, className: x === w ? 'on' : '', style: { fontWeight: x }, onClick: () => set(['font-weight'], String(x)) }, t('styleW' + x))))),
+          color('styleColor', 'color'),
+          color('styleBg', 'background', sty.gradient && !('background' in sty.live) ? t('styleGradient') : ''),
+          slider('styleRadius', ['border-radius'], 40, 'radius'),
+          slider('stylePadY', ['padding-top', 'padding-bottom'], 48, 'space'),
+          slider('stylePadX', ['padding-left', 'padding-right'], 48, 'space'),
+          sty.layout ? slider('styleGap', ['gap'], 48, 'space') : null),
+        n ? h('div', { className: 'cnt' }, t('styleN', { n: styleChanges(t, sty).length })) : null,
+        h('footer', { className: 'row' },
+          h('button', { onClick: onReset, disabled: !n }, h('span', null, t('styleReset'))),
+          h('button', { onClick: onAsk, disabled: !n, title: t('styleAskTip') }, h('span', null, t('styleAsk'))),
+          h('button', { className: 'go', onClick: onSave, disabled: !n || !write.ok, title: write.tip }, h('span', null, t('styleSave')))))
+    }
+
+    /** 一排风格卡：每张是个小样（底色、标题字、卡片、主色按钮），点了交给 onPick */
+    function StyleCards({ t, onPick }) {
+      const en = t('lang') === 'en'
+      return h('div', { className: 'ddp-styles' }, ...STYLES.map((x) => h('button', { key: x.id, className: 'ddp-sc', title: en ? x.den : x.dzh, onClick: () => onPick(x) },
+        h('span', { className: 'pv', style: { background: x.c.bg, backgroundImage: x.bgImage || 'none', color: x.c.text } },
+          h('b', { style: { fontFamily: x.head, fontWeight: x.w } }, en ? 'Aa' : '字'),
+          h('i', { className: 'bt', style: { background: x.c.primary, borderRadius: Math.min(x.radius, 6), boxShadow: x.id === 'playful' ? `1.5px 1.5px 0 ${x.c.line}` : 'none', outline: x.id === 'playful' ? `1px solid ${x.c.line}` : 'none' } }),
+          h('i', { className: 'cd', style: { background: x.id === 'glass' ? 'rgba(255,255,255,.6)' : x.c.surface, borderRadius: Math.min(x.radius, 8) / 2 + 2,
+            boxShadow: x.id === 'soft' ? '2px 2px 5px #C8CED6, -2px -2px 5px #FFFFFF' : x.id === 'playful' ? `2px 2px 0 ${x.c.line}` : x.id === 'editorial' ? `inset 0 1px 0 ${x.c.line}` : `0 0 0 .5px ${x.c.line}` } },
+            h('i', { className: 'ln', style: { background: x.c.text } }), h('i', { className: 'ln s', style: { background: x.c.muted } }))),
+        h('span', { className: 'nm' }, en ? x.en : x.zh))))
+    }
+
+    /** 换风格面板（设计已经打开时）：点一张卡让模型整套换成那个风格 */
+    function StylesPanel({ t, onPick, onClose }) {
+      return h('div', { className: 'ddp-tokens', onPointerDown: (e) => e.stopPropagation() },
+        h('header', null, h(I.palette), h('b', null, t('stylesTitle')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
+        h('p', { className: 'tip' }, t('stylesSwap')),
+        h('div', { className: 'bd' }, h(StyleCards, { t, onPick })))
     }
 
     /** 菜单开着时：点外面、按 Esc 关掉 */
@@ -1782,6 +2554,7 @@ window.__ModuleLoader__.load({
       items.push(['raw', I.image, t('exRaw')])
       if (kind !== 'poster' && kind !== 'slides') items.push(['long', I.long, t('exLong')]) // 海报、幻灯片画幅是定的，没有「整页」
       if (count > 1) items.push(['show', I.canvas, t('exShow')])
+      items.push(['pdf', I.pdf, t('exPdf')], ['pptx', I.deck, t('exPptx')])
       return h('div', { className: 'ddp-kind', ref },
         h('button', { className: 'ddp-btn' + (open ? ' sel' : ''), title: t('exportT'), disabled, onClick: () => setOpen(!open) }, h(I.download)),
         open ? h('div', { className: 'ddp-menu', role: 'menu' },
@@ -1912,6 +2685,29 @@ window.__ModuleLoader__.load({
         }
       }, [layoutKey])
 
+      // 让某一屏露出来（体检里点了一条）：整屏不在看得见的地方就把镜头挪过去；右边 inset 像素被面板挡着
+      const rv = props.reveal
+      useEffect(() => {
+        const c = camRef.current
+        if (!rv || !L || !c) return
+        const i = screens.findIndex((x) => x.key === rv.key)
+        if (i < 0) return
+        const [cw, ch] = boxes ? boxes[i] : [dw, dh]
+        const vw = Math.max(120, box.w - (props.inset || 0))
+        const x0 = c.x + L.pos[i].x * c.z
+        const y0 = c.y + L.pos[i].y * c.z
+        const w = cw * c.z
+        const hh = ch * c.z
+        let x = c.x
+        let y = c.y
+        if (x0 < 8 || x0 + w > vw - 8) x += (w > vw - 16 ? 8 : (vw - w) / 2) - x0
+        if (y0 < LAB || y0 + hh > box.h - 8) y += (hh > box.h - LAB - 8 ? LAB : (box.h - hh) / 2) - y0
+        if (x === c.x && y === c.y) return
+        auto.current = false
+        setAnim(true)
+        setCam({ ...c, x, y })
+      }, [rv && rv.n])
+
       const zoomAt = (factor, px, py, smooth) => {
         const c = camRef.current
         if (!c) return
@@ -2049,6 +2845,8 @@ window.__ModuleLoader__.load({
       useEffect(() => { const tm = setTimeout(() => setWaited(true), 2500); return () => clearTimeout(tm) }, [])
       const [picking, setPicking] = useState(false)
       const [textEdit, setTextEdit] = useState(false) // 改字：点页面里的文字直接改
+      const [styleEdit, setStyleEdit] = useState(false) // 调样式：点元素、拖滑块，写回它的 style 属性
+      const [sty, setSty] = useState(null) // 调样式选中的元素：{ key, url, name, selector, text, loc, base, vars, gradient, layout, live }
       const [editing, setEditing] = useState(false)
       const [menu, setMenu] = useState(false)
       const [toast, setToast] = useState('')
@@ -2057,6 +2855,7 @@ window.__ModuleLoader__.load({
       const [info, setInfo] = useState({}) // 目录|屏 → { meta, title }（页面报上来的）
       const [sel, setSel] = useState('')
       const [panel, setPanel] = useState(false)
+      const [styles, setStyles] = useState(false) // 换风格面板
       const [dropping, setDropping] = useState(false) // 正拖着图片进来
       const refInput = useRef(null)
       const [exMenu, setExMenu] = useState(false)
@@ -2070,6 +2869,9 @@ window.__ModuleLoader__.load({
       const [dark, setDark] = useState(false)
       const [phone, setPhone] = useState(false) // 手机上看的面板
       const [multi, setMulti] = useState(false) // 多尺寸并排
+      const [ck, setCk] = useState(null) // 设计体检：null = 面板关着；{ running, list: [{ key, label, url, issues, error }] }
+      const [ckCount, setCkCount] = useState(0) // 最近一次体检（模型干完活会悄悄查一次）有几个问题：面板关着时标在按钮上
+      const [reveal, setReveal] = useState(null) // 画布上要露出来的那一屏 { key, n }（体检里点了一条）
       const [demo, setDemo] = useState(null) // 演示：{ stack: [屏…], layers: [{ id, key, dir, shown }] }
       const apis = useRef(new Map()) // 屏 → 截图用的接口
       const cmpRef = useRef(null)
@@ -2130,6 +2932,8 @@ window.__ModuleLoader__.load({
       const labelOf = (sc) => (infoOf(ik(sc)) || {}).title || sc.label
       const anyDark = Object.keys(info).some((k) => k.startsWith(site + '|') && info[k].dark)
       const fileTarget = !!(st && st.target && st.target.kind === 'file')
+      // 远程看（手机走外网等）：本地文件的预览由服务端打包传过来（见 Screen），目录里改了哪些文件也一起带过去
+      const remote = fileTarget && sid ? { sid, at: st.changedAt || 0, files: st.changedFiles || [], changes: st.changes || [] } : null
 
       // 看旧版本：画布上换成那一版的几屏（按现在的顺序，那一版独有的接在后面）
       const vbase = ver ? `${origin}/__dsh_design__/v/${ver.n}/` : ''
@@ -2218,7 +3022,7 @@ window.__ModuleLoader__.load({
         return () => ro.disconnect()
       }, [!!url])
 
-      useEffect(() => { setPicking(false); setTextEdit(false); setSel(''); setVer(null); setCmp(false) }, [site])
+      useEffect(() => { setPicking(false); setTextEdit(false); setStyleEdit(false); setSel(''); setVer(null); setCmp(false) }, [site])
 
       // 版本列表：面板开着时拉一次，存了新版本（vrev 变了）再拉
       const vrev = st ? st.vrev : 0
@@ -2256,6 +3060,7 @@ window.__ModuleLoader__.load({
       const togglePick = () => {
         if (picking) { setPicking(false); return }
         setTextEdit(false)
+        setStyleEdit(false)
         setPicking(true)
         if (!canvas) {
           // 单页：把焦点给页面，Esc 在页面里也管用
@@ -2267,20 +3072,76 @@ window.__ModuleLoader__.load({
       const toggleText = () => {
         if (textEdit) { setTextEdit(false); return }
         setPicking(false)
+        setStyleEdit(false)
         setTextEdit(true)
       }
 
-      const askText = (sc, d) => insert(t('textAsk', { before: d.before, after: d.after, where: whereOf(sc.url, stRef.current) }), 'insertedSend')
+      const askText = (sc, d) => insert(t('textAsk', { before: d.before, after: d.after, where: whereOf(pageOf(sc, d.href).url, stRef.current) }), 'insertedSend')
 
       const onEdited = (sc, d) => {
         if (!fileTarget) return askText(sc, d)
-        post('edit', { session: sid, key: sc.key, before: d.before, after: d.after, nth: d.nth })
+        post('edit', { session: sid, key: pageOf(sc, d.href).key, before: d.before, after: d.after, nth: d.nth })
           .then((r) => (r && r.ok ? say(t('textSaved', { file: r.file })) : askText(sc, d)), () => askText(sc, d))
       }
 
       // 模型在干活时不能改字（它可能正整份重写文件，改了会被盖掉）
       useEffect(() => { if (ver || demo || busy) setTextEdit(false) }, [!!ver, !!demo, busy])
 
+      // ── 调样式：点一个元素，面板里拖滑块先在页面上看效果；写回文件 = 并进它在源码里的 style 属性 ──
+      const toggleStyle = () => {
+        if (styleEdit) { setStyleEdit(false); return }
+        setPicking(false)
+        setTextEdit(false)
+        setPanel(false)
+        setStyles(false)
+        setHist(false)
+        setPhone(false)
+        closeCheck()
+        setStyleEdit(true)
+      }
+      useEffect(() => { if (!styleEdit) setSty(null) }, [styleEdit])
+      const onStylePick = (sc, p) => {
+        if (canvas) setSel(sc.key)
+        const pg = pageOf(sc, p.href)
+        setSty({ key: pg.key, url: pg.url, name: p.name, selector: p.selector, text: p.text, loc: p.loc, base: p.css || {}, vars: p.vars || {}, rules: p.rules && typeof p.rules === 'object' ? p.rules : {}, gradient: !!p.gradient, layout: !!p.layout, live: {} })
+      }
+      const setStyleProp = (patch) => setSty((c) => (c ? { ...c, live: { ...c.live, ...patch } } : c))
+      // 交给模型：先问服务端那几条规则在源码第几行（本地文件才有；问不到就只写文件名）
+      const askStyle = async () => {
+        const s0 = sty
+        if (!s0) return
+        let located = null
+        const items = [...new Map(Object.keys(s0.live || {}).map((k) => s0.rules && s0.rules[k]).filter((r) => r && r.sel && r.href).map((r) => [`${r.href}|${r.sel}|${r.n}`, r])).values()]
+        if (fileTarget && items.length) {
+          try {
+            const r = await post('locate', { session: sid, items: items.map((x) => ({ href: x.href, sel: x.sel, n: x.n })) })
+            located = new Map(items.map((x, i) => [`${x.href}|${x.sel}|${x.n}`, r && Array.isArray(r.items) ? r.items[i] : null]))
+          } catch { /* 找不到行号就只写文件名 */ }
+        }
+        insert(formatStyleAsk(t, s0, stRef.current, located), 'insertedSend')
+      }
+      const saveStyle = () => {
+        const s0 = sty
+        if (!s0 || !Object.keys(s0.live).length) return
+        if (!fileTarget) return askStyle()
+        const saved = s0.live
+        post('style', { session: sid, key: s0.key, loc: s0.loc, css: saved, name: s0.name }).then((r) => {
+          if (r && r.ok) {
+            say(t('styleSaved', { file: r.file }))
+            // 写进去的算「原样」了；写的时候又拖过的留着
+            setSty((c) => (c && c.key === s0.key && c.selector === s0.selector
+              ? { ...c, base: { ...c.base, ...saved }, live: Object.fromEntries(Object.entries(c.live).filter(([k, v]) => saved[k] !== v)) } : c))
+          } else if (r && r.reason === 'busy') say(t('styleBusyTip'))
+          else { say(t('styleMiss')); askStyle() }
+        }, () => askStyle())
+      }
+      useEffect(() => {
+        if (!styleEdit) return undefined
+        const onKey = (e) => { if (e.key === 'Escape') setStyleEdit(false) }
+        window.addEventListener('keydown', onKey)
+        return () => window.removeEventListener('keydown', onKey)
+      }, [styleEdit])
+
       useEffect(() => {
         if (!dropping) return undefined
         const off = () => setDropping(false)
@@ -2367,13 +3228,18 @@ window.__ModuleLoader__.load({
       }
 
       const renderScreen = (sc, z, fill) => h(Device, { kind, w: size[0], h: size[1], fill, label: labelOf(sc) },
-        h(Screen, { t,
+        h(Screen, { t, remote,
           src: sc.url,
           label: labelOf(sc),
           busy: busy && !sc.v,
           born: !sc.v && isBorn(sc.key),
           picking: picking && !sc.v,
           textEdit: textEdit && !sc.v,
+          styleEdit: styleEdit && !sc.v,
+          styleSel: sty && sty.key === sc.key ? sty.selector : '',
+          styleCss: sty && sty.key === sc.key ? sty.live : null,
+          onStylePick: (p) => onStylePick(sc, p),
+          onStyleCancel: () => setStyleEdit(false),
           dark,
           apis: apis.current,
           apiKey: ik(sc),
@@ -2391,16 +3257,23 @@ window.__ModuleLoader__.load({
         }))
 
       // ── 导出图片 ──
-      const shotOf = async (sc, full) => {
+      // 截一屏：图片和它的 CSS 尺寸（PDF / PPT 按这个定页面大小）
+      // 那一屏的接口（截图、体检）；刚载入的等它就绪
+      const apiOf = async (sc) => {
         let api = apis.current.get(ik(sc))
         for (let i = 0; i < 40 && !(api && api.ready()); i++) {
           await new Promise((r) => setTimeout(r, 150))
           api = apis.current.get(ik(sc))
         }
         if (!api) throw new Error('not loaded')
+        return api
+      }
+      const captureOf = async (sc, full) => {
+        const api = await apiOf(sc)
         const r = await api.capture({ full: !!full, scale: 2 })
-        return loadImg(r.png)
+        return { img: await loadImg(r.png), w: r.w, h: r.h, links: Array.isArray(r.links) ? r.links : [] }
       }
+      const shotOf = async (sc, full) => (await captureOf(sc, full)).img
 
       const saveImage = async (name, blob) => {
         const png = await blobB64(blob)
@@ -2416,6 +3289,31 @@ window.__ModuleLoader__.load({
         try {
           const prefix = ver ? `v${ver.n}-` : ''
           const suffix = dark ? '-dark' : ''
+          if (mode === 'pdf' || mode === 'pptx') {
+            // 每屏一页。PDF 里网页、邮件放整页长图（页面多高就多高）；PPT 一张幻灯片一个画面
+            const long = mode === 'pdf' && (kind === 'web' || kind === 'email')
+            const pages = []
+            const keys = []
+            for (const sc of shown) {
+              try {
+                const r = await captureOf(sc, long)
+                pages.push({ jpg: await jpegB64(r.img), w: r.w, h: r.h, title: labelOf(sc), links: r.links })
+                keys.push(sc.key)
+              } catch (e) { console.warn('[dsh-design-studio] 截图失败', sc.key, e) }
+            }
+            if (!pages.length) throw new Error('no screens')
+            // 原型里的跳转：路径换成第几页，PDF / PPT 里点了能跳过去
+            for (const p of pages) {
+              p.links = p.links.map((l) => ({ x: l.x, y: l.y, w: l.w, h: l.h, to: keys.indexOf(keyOfPath(l.path, fileTarget)) })).filter((l) => l.to >= 0)
+            }
+            const sp = splitTitles(pages.map((x) => x.title))
+            const folder = st && st.target && st.target.kind === 'file' ? String(st.target.file).split(/[\\/]/).slice(-2, -1)[0] : ''
+            const title = sp.brand || folder || st.label || ''
+            const r = await post('doc', { session: sid, format: mode, name: prefix + (title || 'design') + suffix, title, bg: hexOf(pickColors(tokens).bg), pages })
+            const file = String(r.path || '').split(/[\\/]/).pop()
+            say(t('exportedDoc', { name: file, n: pages.length }), { label: t('reveal'), run: () => post('reveal', { path: r.path }).catch(() => {}) })
+            return
+          }
           if (mode === 'show') {
             const shots = []
             for (const sc of shown) {
@@ -2471,7 +3369,17 @@ window.__ModuleLoader__.load({
         insert(t('variantText', { name: labelOf(sc), b, where: whereOf(sc.url, stRef.current) }), 'insertedSend')
       }
 
+      // 同一屏的几个版本（开局的三个方向 home-a / b / c，或「再出两版」的 login / login-b / login-c）：挑一个
+      const pickDirection = (sc) => {
+        const g = takesOf(shown.map((x) => x.key), sc.key)
+        if (!g) return
+        const others = g.others.join('、')
+        const where = whereOf(sc.url, stRef.current)
+        insert(g.letter ? t('pickText', { name: labelOf(sc), where, others, base: g.stem }) : t('pickKeep', { name: labelOf(sc), where, others }), 'insertedSend')
+      }
+
       const actions = (sc) => [
+        !sc.v && takesOf(shown.map((x) => x.key), sc.key) ? h('button', { key: 'p', className: 'ddp-btn', title: t('pickThis'), onClick: () => pickDirection(sc) }, h(I.check)) : null,
         h('button', { key: 'x', className: 'ddp-btn', title: t('exThis'), onClick: () => doExport(FRAMED[kind] ? 'frame' : 'raw', sc.key) }, h(I.download)),
         sc.v ? null : h('button', { key: 'v', className: 'ddp-btn', title: t('variants'), onClick: () => askVariants(sc) }, h(I.sparkle)),
         h('button', { key: 'o', className: 'ddp-btn', title: t('openScreen'), onClick: () => change({ view: 'single', focus: sc.key }) }, h(I.single)),
@@ -2507,9 +3415,95 @@ window.__ModuleLoader__.load({
       const hintTop = (picking || textEdit) && !canvas && !inMulti && !ver && !demo && kind !== 'web'
       const flows = canvas && !inMulti && !picking && !textEdit ? flowsOf(shown, (sc) => (infoOf(ik(sc)) || {}).links, fileTarget) : []
 
+      // ── 设计体检：画布上量所有屏，单页量这一屏；问题标在页面上，列在面板里 ──
+      const closeCheck = () => {
+        if (ck) for (const sc of ck.list || []) { const a = apis.current.get(ik(sc)); if (a) a.checkClear() }
+        setCk(null)
+      }
+      const checkList = () => (canvas ? shown : [shown.find((x) => x.key === focus) || { key: focus, url, label: st.label }])
+      // 几屏一起量（各量各的 iframe），一屏卡住不拖累别的
+      const measure = (list, quiet) => Promise.all(list.map(async (sc) => {
+        const row = { key: sc.key, v: sc.v, label: labelOf(sc), url: sc.url, issues: [] }
+        try {
+          const r = await (await apiOf(sc)).check(kind, quiet)
+          row.issues = Array.isArray(r.issues) ? r.issues : []
+          if (r.metrics && typeof r.metrics === 'object') row.metrics = r.metrics
+        } catch (e) { row.error = e.message }
+        return row
+      }))
+      const total = (list) => list.reduce((m, x) => m + x.issues.length, 0)
+      const runCheck = async () => {
+        setPanel(false); setHist(false); setPhone(false)
+        setCk({ running: true, list: [] })
+        const out = await measure(checkList(), false)
+        setCk({ running: false, list: out })
+        setCkCount(total(out))
+        // 有问题的第一屏被面板挡着、在画布外面：挪过来
+        const first = out.find((x) => x.issues.length)
+        if (canvas && first) setReveal((r) => ({ key: first.key, n: ((r && r.n) || 0) + 1 }))
+        return out
+      }
+      const focusIssue = (key, i) => {
+        const sc = (ck && ck.list.find((x) => x.key === key)) || null
+        if (!sc) return
+        if (canvas) { setSel(key); setReveal((r) => ({ key, n: ((r && r.n) || 0) + 1 })) }
+        const a = apis.current.get(ik(sc))
+        if (a) a.checkFocus(i)
+      }
+      // 打开一套设计、模型又干完一轮（turns 变了）：面板开着就再查一次（改没改好一眼看到）；关着就悄悄量一下，问题数标在按钮上。
+      // 模型干着活时不量；等一会儿再量：刚写完的屏还在刷新、播生成动画
+      const autoCk = useRef(null)
+      const ckKey = url && !busy ? `${site}|${(st && st.turns) || 0}` : ''
+      const seenCk = useRef('')
+      useEffect(() => {
+        if (!ckKey || ckKey === seenCk.current) return undefined
+        seenCk.current = ckKey
+        const timer = setTimeout(async () => {
+          const a = autoCk.current
+          if (a.off) return
+          if (a.ck && !a.ck.running) return a.run()
+          if (a.ck) return
+          const out = await a.measure(a.list(), true)
+          if (!autoCk.current.ck) setCkCount(total(out))
+        }, 2500)
+        return () => clearTimeout(timer)
+      }, [ckKey])
+      useEffect(() => { setCkCount(0) }, [site])
+      // 模型调了 check_design（轮询里出现新的 checkReq）：量完把清单交回去；面板开着就顺手刷新面板，关着就只更新按钮上的数。
+      // 稍等一下再量：模型刚写完的屏还在刷新
+      const ckReq = (st && st.checkReq) || ''
+      const doneReq = useRef('')
+      useEffect(() => {
+        if (!ckReq || ckReq === doneReq.current) return undefined
+        doneReq.current = ckReq
+        const timer = setTimeout(async () => {
+          const a = autoCk.current
+          let body
+          if (a.off) body = { error: t('ckToolOff') }
+          else {
+            const out = a.ck && !a.ck.running ? await a.run() : await a.measure(a.list(), true)
+            if (!autoCk.current.ck) setCkCount(total(out))
+            // measured：真量到的屏数。一屏都没量到（这台设备上的预览不回话）时服务端先不收，等别的设备上的右侧栏
+            body = { text: formatCheckTool(t, out, stRef.current), measured: out.filter((x) => !x.error).length }
+          }
+          post('check', { session: sid, id: ckReq, ...body }).catch(() => {})
+        }, 1500)
+        return () => clearTimeout(timer)
+      }, [ckReq])
+      const fixIssues = () => {
+        if (!ck) return
+        insert(formatCheck(t, ck.list, stRef.current), 'insertedSend')
+        closeCheck()
+      }
+      const checkOff = !url || !!ver || !!demo || inMulti
+      const styleOff = !url || !!ver || !!demo || inMulti || busy
+      useEffect(() => { if (styleOff) setStyleEdit(false) }, [styleOff])
+      autoCk.current = { ck, off: checkOff, run: runCheck, list: checkList, measure }
+      useEffect(() => { if (checkOff && ck) closeCheck() }, [checkOff])
+
       const toggleDemo = () => (demo ? setDemo(null) : startDemo())
-      const toggleHist = () => { setHist(!hist); setPanel(false); setPhone(false) }
-      const togglePhone = () => { setPhone(!phone); setPanel(false); setHist(false) }
+      const toggleHist = () => { setHist(!hist); setPanel(false); setStyles(false); setPhone(false); closeCheck(); setStyleEdit(false) }
+      const togglePhone = () => { setPhone(!phone); setPanel(false); setStyles(false); setHist(false); closeCheck(); setStyleEdit(false) }
       const reload = () => setReloadSeq((x) => x + 1)
 
       const bar = h('div', { className: 'ddp-bar' },
@@ -2521,6 +3515,7 @@ window.__ModuleLoader__.load({
         h('button', { className: 'ddp-btn pick' + (picking ? ' on' : ''), title: t('pickTip'), disabled: !url || !!ver || !!demo, onClick: togglePick },
           h(I.pick), h('span', null, picking ? t('picking') : t('pick'))),
         h('button', { className: 'ddp-btn' + (textEdit ? ' on' : ''), title: t('textEdit'), disabled: !url || !!ver || !!demo || busy, onClick: toggleText }, h(I.text)),
+        h('button', { className: 'ddp-btn' + (styleEdit ? ' on' : ''), title: t('styleEdit'), disabled: styleOff, onClick: toggleStyle }, h(I.sliders)),
         h('span', { className: 'ddp-sep' }),
         h('div', { className: 'ddp-seg' },
           h('button', { className: 'ddp-btn' + (canvas && !inMulti ? ' sel' : ''), title: t('canvas'), onClick: () => { setMulti(false); change({ view: 'canvas' }) } }, h(I.canvas)),
@@ -2528,15 +3523,18 @@ window.__ModuleLoader__.load({
           h('button', { className: 'ddp-btn' + (inMulti ? ' sel' : ''), title: sizeSet ? t('sizes') : t('sizesNo'), disabled: !sizeSet || !!ver, onClick: () => setMulti(!inMulti) }, h(I.sizes))),
         h('button', { className: 'ddp-btn o2' + (demo ? ' sel' : ''), title: t('demo'), disabled: !url || !!ver, onClick: toggleDemo }, h(I.play)),
         h(KindMenu, { t, kind, open: menu, setOpen: setMenu, onPick: (k) => { setMenu(false); change({ kind: k }) } }),
-        h('button', { className: 'ddp-btn' + (panel ? ' sel' : '') + (tokens.length && !panel ? ' has' : ''), title: t('tokens'), onClick: () => { setPanel(!panel); setHist(false); setPhone(false) } }, h(I.palette)),
+        h('button', { className: 'ddp-btn' + (panel ? ' sel' : '') + (tokens.length && !panel ? ' has' : ''), title: t('tokens'), onClick: () => { setPanel(!panel); setStyles(false); setHist(false); setPhone(false); closeCheck(); setStyleEdit(false) } }, h(I.palette)),
+        h('button', { className: 'ddp-btn o2' + (ck ? ' sel' : ''), title: ckCount && !ck ? t('checkCount', { n: ckCount }) : t('checkTip'), disabled: checkOff, onClick: () => (ck ? closeCheck() : runCheck()) },
+          h(I.stetho), ckCount && !ck && !checkOff ? h('span', { className: 'bdg' }, ckCount > 99 ? '99+' : String(ckCount)) : null),
         h('button', { className: 'ddp-btn o2' + (hist || ver ? ' sel' : ''), title: t('history'), disabled: !fileTarget, onClick: toggleHist }, h(I.history)),
         h(ExportMenu, { t, kind, count: shown.length, open: exMenu, setOpen: setExMenu, onPick: (m) => doExport(m), disabled: !url }),
         anyDark || dark ? h('button', { className: 'ddp-btn o1' + (dark ? ' sel' : ''), title: t('dark'), onClick: () => setDark(!dark) }, h(I.moon)) : null,
         h('button', { className: 'ddp-btn o1' + (phone ? ' sel' : '') + (phoneOn && !phone ? ' has' : ''), title: t('phone'), disabled: !url, onClick: togglePhone }, h(I.scan)),
         h('button', { className: 'ddp-btn o1', title: t('refresh'), onClick: reload }, h(I.refresh)),
         h('a', { className: 'ddp-btn o1', title: t('external'), href: url, target: '_blank', rel: 'noopener noreferrer' }, h(I.external)),
-        h(MoreMenu, { t, open: more, setOpen: setMore, has: phoneOn && !phone, items: [
+        h(MoreMenu, { t, open: more, setOpen: setMore, has: (phoneOn && !phone) || (!!ckCount && !ck && !checkOff), items: [
           ['o2', I.play, t('demoShort'), !!demo, !url || !!ver, toggleDemo],
+          ['o2', I.stetho, t('check'), !!ck, checkOff, () => (ck ? closeCheck() : runCheck())],
           ['o2', I.history, t('history'), hist || !!ver, !fileTarget, toggleHist],
           anyDark || dark ? ['o1', I.moon, t('dark'), dark, false, () => setDark(!dark)] : null,
           ['o1', I.scan, t('phone'), phone, !url, togglePhone],
@@ -2544,8 +3542,11 @@ window.__ModuleLoader__.load({
           ['o1', I.external, t('external'), false, !url, url],
         ] }))
 
-      const busyChip = (cls) => h('div', { className: 'ddp-chip' + cls, key: 'busy' }, h('i', { className: 'sp' }),
-        h('span', { className: 'tx' }, st && st.writing ? t('writing', { file: st.writing }) : t('working')))
+      // 模型用提问卡问你、在等回答：不转圈，换成一个橙点
+      const busyChip = (cls) => st && st.asking
+        ? h('div', { className: 'ddp-chip' + cls, key: 'busy' }, h('i', { className: 'q' }), h('span', null, t('asking')))
+        : h('div', { className: 'ddp-chip' + cls, key: 'busy' }, h('i', { className: 'sp' }),
+          h('span', { className: 'tx' }, st && st.writing ? t('writing', { file: st.writing }) : t('working')))
 
       // ── 参考图：拖进来 / 粘贴 / 从设计规范面板选；存进设计目录的 refs/，尺寸和主要颜色放进输入框 ──
       const addRef = async (file) => {
@@ -2614,6 +3615,7 @@ window.__ModuleLoader__.load({
               onClick: () => post('open', { session: sid, target: st.hint }).then((s) => { if (poll) poll.set(s) }, (e) => say(t('openFailed', { msg: e.message }))),
             }, t('hintOpen', { name: st.hint.split(/[\\/]/).pop() })) : null,
             h('ol', { className: 'ddp-steps' }, h('li', null, t('step1')), h('li', null, t('step2')), h('li', null, t('step3'))),
+            h('div', { className: 'ddp-stylepick' }, h('b', null, t('stylesHead')), h('p', null, t('stylesTip')), h(StyleCards, { t, onPick: (x) => insert(formatStyle(t, x, false)) })),
             h('p', null, t('emptyHint')),
             h(AddressForm, { t, sid, className: 'ddp-form', onDone: () => {} }),
             h('p', { className: 'ddp-refline' }, t('refEmpty'), ' · ', h('button', { className: 'lk', onClick: pickRef }, t('refChoose')))),
@@ -2634,7 +3636,7 @@ window.__ModuleLoader__.load({
             h('div', { className: 'ddp-single' },
               h('div', { className: 'ddp-fit' + (fill ? ' fill' : ''), style: fill ? undefined : { width: dw, height: dh, transform: `translate(-50%, -50%) scale(${z})` } },
                 h(Device, { kind, w: size[0], h: size[1], fill, label },
-                  h(Screen, { t,
+                  h(Screen, { t, remote,
                     src: urlOfKey(l.key),
                     label,
                     busy: false,
@@ -2668,7 +3670,7 @@ window.__ModuleLoader__.load({
           sel: '',
           labelOf: (sc) => sc.label,
           render: (sc, z, i) => h(Device, { kind: items[i].kind, w: items[i].size[0], h: items[i].size[1], label: labelOf(base) },
-            h(Screen, { t,
+            h(Screen, { t, remote,
               src: base.url,
               label: labelOf(base),
               busy,
@@ -2697,7 +3699,7 @@ window.__ModuleLoader__.load({
         const z = fill ? 1 : Math.max(0.05, Math.min(1, (box.w - 32) / dw, (box.h - 32 - (ver ? 46 : 0)) / dh))
         // 两边的小标签不跟着画面缩小（缩了看不清）；手机、平板躲开状态栏
         const tagAt = (side) => ({ top: kind === 'app' || kind === 'tablet' ? 60 : 10, transform: `scale(${1 / z})`, transformOrigin: 'top ' + side })
-        const screenOf = (sc) => h(Screen, { t, src: sc.url, label: labelOf(sc), busy: false, born: false, picking: false, dark, zoom: z, reloadSeq,
+        const screenOf = (sc) => h(Screen, { t, remote, src: sc.url, label: labelOf(sc), busy: false, born: false, picking: false, dark, zoom: z, reloadSeq,
           apis: apis.current, apiKey: 'cmp|' + ik(sc), onMeta: (m, title, toks, dk) => remember(ik(sc), m, title, toks, dk) })
         body = h('div', { className: 'ddp-single' },
           h('div', { className: 'ddp-fit' + (fill ? ' fill' : ''), style: fill ? undefined : { width: dw, height: dh, transform: `translate(-50%, -50%) scale(${z})` } },
@@ -2719,9 +3721,11 @@ window.__ModuleLoader__.load({
           kind,
           size,
           ghost,
-          picking: picking || textEdit,
+          picking: picking || textEdit || styleEdit,
           sel: sel || focus,
           labelOf,
+          reveal,
+          inset: ck || styleEdit || panel || styles ? 296 : 0, // 右边的面板 276 宽，离边 10
           render: (sc, z) => renderScreen(sc, z, false),
           flows,
           onSelect: setSel,
@@ -2730,16 +3734,18 @@ window.__ModuleLoader__.load({
       } else {
         const fill = kind === 'web'
         const [dw, dh] = deviceBox(kind, size)
-        const z = fill ? 1 : Math.max(0.05, Math.min(1, (box.w - 32) / dw, (box.h - 32 - (ver || hintTop ? 46 : 0)) / dh))
+        // 右边开着面板（体检、调样式、设计规范、换风格）：手机这类有外框的让到面板左边（侧栏够宽时），别被挡住
+        const aside = !fill && (ck || styleEdit || panel || styles) && box.w - 296 >= 240 ? 296 : 0
+        const z = fill ? 1 : Math.max(0.05, Math.min(1, (box.w - aside - 32) / dw, (box.h - 32 - (ver || hintTop ? 46 : 0)) / dh))
         const one = ver ? shown.find((x) => x.key === focus) || shown[0] || { key: focus, url, label: st.label } : { key: focus, url, label: st.label }
-        body = h('div', { className: 'ddp-single' },
+        body = h('div', { className: 'ddp-single', style: aside ? { right: aside } : undefined },
           h('div', { className: 'ddp-fit' + (fill ? ' fill' : ''), style: fill ? undefined : { width: dw, height: dh, transform: `translate(-50%, -50%) scale(${z})` } },
             renderScreen(one, z, fill)))
       }
 
       let chip = null
       const side = canvas || inMulti ? ' left' : ''
-      const hintText = picking ? t(canvas || inMulti ? 'pickAny' : 'pickOne') : textEdit ? t(canvas || inMulti ? 'textAny' : 'textOne') : ''
+      const hintText = picking ? t(canvas || inMulti ? 'pickAny' : 'pickOne') : textEdit ? t(canvas || inMulti ? 'textAny' : 'textOne') : styleEdit && !sty ? t(canvas ? 'styleAny' : 'styleOne') : ''
       if (flash) chip = h('div', { className: 'ddp-chip ok' + side, key: 'ok' }, h(I.check), h('span', null, flash))
       else if (busy) chip = busyChip(side)
 
@@ -2749,8 +3755,23 @@ window.__ModuleLoader__.load({
           h('div', { className: 'ddp-body' + (ver || demo || hintTop ? ' vb' : '') }, body),
           busy ? h('div', { className: 'ddp-glow' }) : null,
           busy ? h('div', { className: 'ddp-ring' }) : null,
-          hintText ? h('div', { className: 'ddp-hint' }, hintText) : null,
-          panel ? h(TokensPanel, { t, tokens, onPick: (tok) => insert(formatToken(tok, stRef.current)), onAsk: () => insert(t('tokensAskText') + '\n', 'insertedSend'), onRef: pickRef, onClose: () => setPanel(false) }) : null,
+          // 右边开着面板时提示条居中在面板左边那块，别被面板盖住一半
+          hintText ? h('div', { className: 'ddp-hint' + ((ck || styleEdit || panel || styles) && box.w - 296 >= 240 ? ' side' : '') }, hintText) : null,
+          ck ? h(CheckPanel, { t, ck, onFocus: focusIssue, onFix: fixIssues, onAgain: runCheck, onClose: closeCheck }) : null,
+          styleEdit ? h(StylePanel, {
+            t,
+            sty,
+            tokens: (sty && (infoOf(sty.key) || {}).tokens) || tokens,
+            write: !fileTarget ? { ok: false, tip: t('styleNoWrite') } : busy ? { ok: false, tip: t('styleBusyTip') } : { ok: true, tip: t('styleSaveTip') },
+            onSet: setStyleProp,
+            onReset: () => setSty((c) => (c ? { ...c, live: {} } : c)),
+            onAsk: askStyle,
+            onSave: saveStyle,
+            onClose: () => setStyleEdit(false),
+          }) : null,
+          panel ? h(TokensPanel, { t, tokens, onPick: (tok) => insert(formatToken(tok, stRef.current)), onAsk: () => insert(t('tokensAskText') + '\n', 'insertedSend'), onRef: pickRef,
+            onStyles: () => { setPanel(false); setStyles(true) }, onClose: () => setPanel(false) }) : null,
+          styles ? h(StylesPanel, { t, onPick: (x) => { setStyles(false); insert(formatStyle(t, x, true), 'insertedSend') }, onClose: () => setStyles(false) }) : null,
           phone ? h(PhonePanel, {
             t,
             sid,
@@ -2849,7 +3870,7 @@ window.__ModuleLoader__.load({
     // 注意：这里是客户端**服务名**（短的），不是包名
     exports.inject = INJECT
     // 测试用
-    exports._test = { poller, frameOf, paletteOf, formatRef, layoutRow, keyOfPath, flowsOf, flowLines, formatPick, whereOf, parseMeta, sizeOf, layoutGrid, fitCam, tokenKind, formatToken, splitTitles, pickColors, hhmm }
+    exports._test = { STYLES, formatStyle, pageOf, pxOf, styleChanges, formatStyleAsk, takesOf, formatCheckTool, poller, frameOf, paletteOf, formatRef, layoutRow, keyOfPath, flowsOf, flowLines, formatPick, whereOf, parseMeta, sizeOf, layoutGrid, fitCam, tokenKind, formatToken, splitTitles, pickColors, hhmm }
     return module.exports
   },
 })