dsh-design-studio 0.4.1 → 0.6.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}',
@@ -184,6 +303,49 @@ window.__ModuleLoader__.load({
       failed: '没放进去：{msg}',
       openFailed: '打不开：{msg}',
       headerTip: '设计工作台',
+      tweaks: '调节滑块',
+      twTip: '模型给这套设计做的几个维度：拖的时候所有屏一起变，还没写进文件。',
+      twEmpty: '这套设计还没有专属滑块。让模型挑几个最值得试的维度（留白、圆角、主色、排法……），做成滑块放在这里。',
+      twMake: '让模型做几个',
+      twFix: '让模型修好',
+      twMakeText: '〔调节滑块〕给这套设计做 3–5 个调节滑块：挑最值得试的维度（比如留白、圆角、主色、卡片排法），照 ui-design 技能「调节滑块」一节写进设计目录的 tweaks.json，把样式接上，做完用 check_design 查一遍。',
+      twFixText: '〔调节滑块〕tweaks.json 有问题：{errs}。照 ui-design 技能「调节滑块」一节改好。',
+      twAskHead: '〔调节〕我在右侧调节滑块里调成了下面这样，照这个改设计（改样式源文件，tweaks.json 里对应的 value 也改成新值）：',
+      twAskTip: '让模型照这几个值改设计（可以顺手调整相关的地方）',
+      twSaveTip: 'CSS 变量写进 tokens.css 的默认值，属性写到每屏的 <html> 上（改前改后各存一版）',
+      twNoWrite: '开发服务器的页面不能直接写回，交给模型改',
+      twMoved: '设计已经换了，没写回；再拖一次',
+      twSaved: '已写回 {n} 项',
+      twMissed: '{names} 在样式里没找到默认值，没写回：交给模型改',
+      systems: '品牌设计系统',
+      sysOpen: '品牌设计系统…',
+      sysEmptyLine: '有自己的品牌？',
+      sysTip: '从你的网站或项目里提取的颜色、字体、圆角和组件。设为默认后，做新设计都照它来。',
+      sysEmpty: '还没有。在下面填你的网站地址或项目文件夹，让模型提一套。',
+      sysDefault: '默认',
+      sysSet: '设为默认',
+      sysUnset: '不再默认',
+      sysApply: '套用到当前设计',
+      sysPh: '网站地址或项目文件夹',
+      sysExtract: '提取',
+      sysExtractText: '〔提取设计系统〕从 {src} 提取我的品牌设计系统（调 extract_design_system），设为默认，以后做新设计都照它来。提完对照截图核对一遍，再打开样张给我看。',
+      sysApplyText: '〔套用设计系统〕把右侧这套设计换成设计系统「{name}」（{dir}）：复制它的 tokens.css、components.css 进设计目录，每屏都 link 上，按钮、输入框、卡片换成里面的类，颜色、字体、圆角都照它；版式和内容不变。',
+      sysSetOk: '之后做新设计都照「{name}」',
+      sysUnsetOk: '已取消默认',
+      handoff: '转成代码',
+      hoTip: '把设计做成真项目的代码：先整理交接说明和截图，再一屏一屏写，每屏写完和设计稿逐像素比，对上了再做下一屏。',
+      hoFw: '用什么做',
+      hoSame: '跟现有项目一样（{label}）',
+      hoHtml: '纯 HTML / CSS',
+      hoDest: '代码放在',
+      hoScope: '范围',
+      hoAll: '全部 {n} 屏',
+      hoOne: '只转这一屏',
+      hoScopeOne: '只做 {name}',
+      hoGo: '开始转成代码',
+      hoProxy: '现在预览的是开发服务器上的页面，它已经是代码了。要转的是用本地 HTML 做的设计。',
+      hoLoading: '正在看会话目录…',
+      hoText: '〔转成代码〕把右侧的设计做成真项目的代码。\n- 用：{fw}\n- 放在：{dest}\n- 范围：{scope}\n先调 handoff_design（framework: {key}，dest: {dest}{only}）拿交接说明，照 HANDOFF.md 一屏一屏做；每屏做完把开发服务器跑起来，用 compare_design 和设计稿比，差异降到 3% 以下再做下一屏。设计目录里的文件别改。',
     }
     const EN = {
       title: 'Design Studio',
@@ -245,12 +407,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 +503,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 +516,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 +596,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}',
@@ -330,6 +611,49 @@ window.__ModuleLoader__.load({
       failed: 'Could not add it: {msg}',
       openFailed: 'Could not open: {msg}',
       headerTip: 'Design Studio',
+      tweaks: 'Tweaks',
+      twTip: 'Knobs the model made for this design. Every screen follows as you drag; nothing is written yet.',
+      twEmpty: 'This design has no tweaks yet. Ask the model to pick the dimensions most worth trying (spacing, radius, brand color, layout…) and put them here as knobs.',
+      twMake: 'Ask the model',
+      twFix: 'Ask the model to fix it',
+      twMakeText: '[Tweaks] Make 3–5 tweaks for this design: pick the dimensions most worth trying (spacing, radius, brand color, card layout…), write them to tweaks.json in the design folder as the ui-design skill describes under "Tweaks", wire up the styles, then run check_design.',
+      twFixText: '[Tweaks] tweaks.json has problems: {errs}. Fix it as the ui-design skill describes under "Tweaks".',
+      twAskHead: '[Tweaks] I set the tweaks in the sidebar to these values. Change the design to match (edit the style sources and update the matching values in tweaks.json):',
+      twAskTip: 'Let the model apply these values (and adjust related details)',
+      twSaveTip: 'CSS variables go into the defaults in tokens.css, attributes onto each screen\'s <html> (a version is kept before and after)',
+      twNoWrite: 'Dev-server pages cannot be written back. Ask the model instead',
+      twMoved: 'The design changed, so nothing was written. Try again',
+      twSaved: 'Wrote back {n}',
+      twMissed: 'No default found in the styles for {names}, not written. Ask the model instead',
+      systems: 'Brand design systems',
+      sysOpen: 'Brand design systems…',
+      sysEmptyLine: 'Have your own brand?',
+      sysTip: 'Colors, fonts, radii and components pulled from your site or project. The default one is used for every new design.',
+      sysEmpty: 'None yet. Enter your website or project folder below and let the model extract one.',
+      sysDefault: 'Default',
+      sysSet: 'Make default',
+      sysUnset: 'Stop using',
+      sysApply: 'Apply to this design',
+      sysPh: 'Website or project folder',
+      sysExtract: 'Extract',
+      sysExtractText: '[Design system] Extract my brand design system from {src} (call extract_design_system) and make it the default for new designs. Check it against the screenshots, then open the specimen for me.',
+      sysApplyText: '[Design system] Switch the design in the sidebar to the design system "{name}" ({dir}): copy its tokens.css and components.css into the design folder, link them on every screen, use its button, input and card classes, and follow its colors, fonts and radii. Keep the layout and content.',
+      sysSetOk: 'New designs will follow "{name}"',
+      sysUnsetOk: 'No default design system now',
+      handoff: 'Build as code',
+      hoTip: 'Turn the design into a real project: a handoff note and screenshots first, then one screen at a time, each pixel-compared with the design before moving on.',
+      hoFw: 'Build with',
+      hoSame: 'Same as the project ({label})',
+      hoHtml: 'Plain HTML / CSS',
+      hoDest: 'Put the code in',
+      hoScope: 'Scope',
+      hoAll: 'All {n} screens',
+      hoOne: 'This screen only',
+      hoScopeOne: 'only {name}',
+      hoGo: 'Start building',
+      hoProxy: 'This preview is a dev-server page, which is already code. Building works on designs made as local HTML.',
+      hoLoading: 'Looking at the session folder…',
+      hoText: '[Build as code] Build the design in the sidebar as a real project.\n- With: {fw}\n- In: {dest}\n- Scope: {scope}\nCall handoff_design (framework: {key}, dest: {dest}{only}) for the handoff note and follow HANDOFF.md one screen at a time. After each screen, run the dev server and call compare_design until the difference is under 3%, then move on. Do not edit the design folder.',
     }
 
     function makeT(ctx) {
@@ -434,6 +758,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 +776,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 +854,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 +916,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))}
@@ -594,6 +969,39 @@ window.__ModuleLoader__.load({
 .ddp-act .ddp-btn{height:22px;min-width:22px;padding:0 4px;color:${ACCENT}}
 .ddp-act .ddp-btn svg{width:13px;height:13px}
 @container (max-width:500px){.ddp-btn.pick span,.ddp-kind>.ddp-btn span{display:none}}
+.ddp-tw .row:first-child{border-top:0}
+.ddp-sys .bd{display:flex;flex-direction:column;gap:8px;padding:2px 10px 10px}
+.ddp-sysc{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:10px;background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,.08))}
+.ddp-sysc.def{box-shadow:inset 0 0 0 1.5px ${ACCENT}}
+.ddp-sysc img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;background:var(--dsw-alias-bg-layer-1)}
+.ddp-sysc .nm{display:flex;align-items:center;gap:6px;font-size:13px}
+.ddp-sysc .nm b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-sysc .nm span{flex:none;height:18px;padding:0 6px;border-radius:9px;background:${ACCENT};color:#fff;font-size:11px;line-height:18px}
+.ddp-sysc .sw{display:flex;align-items:center;gap:3px;min-width:0}
+.ddp-sysc .sw i{width:14px;height:14px;flex:none;border-radius:4px;box-shadow:inset 0 0 0 .5px rgba(127,127,127,.45)}
+.ddp-sysc .sw em{margin-left:4px;font-size:11px;font-style:normal;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-sysc small{font-size:11px;color:var(--dsw-alias-label-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ddp-sysc .acts{display:flex;gap:4px}
+.ddp-sysc .acts button{flex:1;height:26px;padding:0 6px;border:0;border-radius:7px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font:12px/26px inherit;cursor:pointer;white-space:nowrap}
+.ddp-sysc .acts button:hover{color:var(--dsw-alias-label-primary)}
+.ddp-sys form{display:flex;gap:6px}
+.ddp-sys form input,.ddp-ho input[type=text]{flex:1;min-width:0;height:28px;padding:0 9px;border:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.3));border-radius:8px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-primary);font:12px inherit;outline:none}
+.ddp-sys form input:focus,.ddp-ho input[type=text]:focus{border-color:${ACCENT}}
+.ddp-tokens.ddp-sys footer form button{width:auto;height:28px;flex:none;justify-content:center;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);border-radius:999px;padding:0 12px}
+.ddp-tokens.ddp-sys footer form button:disabled{opacity:.45;cursor:default}
+.ddp-ho .bd{padding:0 14px 10px}
+.ddp-ho .row{padding:9px 0 10px;border-top:1px solid var(--dsw-alias-separator-primary,rgba(127,127,127,.16))}
+.ddp-ho .row:first-child{border-top:0}
+.ddp-ho label{display:block;margin-bottom:7px;font-size:12px;color:var(--dsw-alias-label-secondary)}
+.ddp-ho input[type=text]{width:100%;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
+.ddp-ho .opt{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:4px 8px;border:0;border-radius:8px;background:transparent;color:var(--dsw-alias-label-secondary);font:12px/18px inherit;text-align:left;cursor:pointer}
+.ddp-ho .opt:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.12))}
+.ddp-ho .opt i{width:12px;height:12px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--dsw-alias-label-tertiary)}
+.ddp-ho .opt.on{color:var(--dsw-alias-label-primary)}
+.ddp-ho .opt.on i{box-shadow:inset 0 0 0 4px ${ACCENT}}
+.ddp-ho footer .go{justify-content:center;background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1)}
+.ddp-ho footer .go:hover{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-1);opacity:.88}
+.ddp-ho footer .go:disabled{opacity:.45;cursor:default}
 .ddp-more{display:none}
 .ddp-menu .o1,.ddp-menu .o2{display:none}
 @container (max-width:700px){.ddp-bar>.o1{display:none}.ddp-bar>.ddp-more{display:block}.ddp-menu .o1{display:flex}}
@@ -635,6 +1043,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 +1056,12 @@ 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' })]),
+      dial: () => svg([h('circle', { key: 1, cx: 12, cy: 13.5, r: 6.5 }), h('path', { key: 2, d: 'M12 13.5l3.2-3.2' }), h('path', { key: 3, d: 'M12 3.5v2M4.6 7.6l1.4 1.1M19.4 7.6L18 8.7' })]),
+      code: () => svg([h('path', { key: 1, d: 'M8.5 7.5L4 12l4.5 4.5M15.5 7.5L20 12l-4.5 4.5' }), h('path', { key: 2, d: 'M13.5 5l-3 14' })]),
+      library: () => svg([h('rect', { key: 1, x: 3.5, y: 4, width: 5, height: 16, rx: 1.2 }), h('rect', { key: 2, x: 10, y: 4, width: 5, height: 16, rx: 1.2 }), h('path', { key: 3, d: 'M16.6 5.4l3.7 13.9' })]),
       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 +1134,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 +1231,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 +1793,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 +2155,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 +2199,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 +2222,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 +2234,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 +2288,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 +2306,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
@@ -1595,6 +2341,7 @@ window.__ModuleLoader__.load({
               L.readied.add(id)
               L.title = d.title || ''
               if (p.dark) postTo(id, { type: 'theme', dark: true })
+              if (p.tweak) postTo(id, { type: 'tweak', vars: p.tweak.vars, attrs: p.tweak.attrs })
               if (p.onMeta) p.onMeta(d.meta || '', d.title || '', Array.isArray(d.tokens) ? d.tokens : [], !!d.dark, Array.isArray(d.links) ? d.links : [])
               if (p.onHref && d.href) p.onHref(d.href)
               if (isCur) {
@@ -1603,6 +2350,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 +2370,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 +2391,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 +2406,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,7 +2414,14 @@ 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])
+      // 调节滑块：拖的时候改页面上的 CSS 变量 / <html> 属性（新载的一帧在 ready 时套上）
+      const twSig = JSON.stringify(props.tweak || null)
+      useEffect(() => { if (cur) postTo(cur, { type: 'tweak', vars: (props.tweak || {}).vars || {}, attrs: (props.tweak || {}).attrs || {} }) }, [twSig])
       useEffect(() => {
         // 刚退出改字（点按钮、Esc、模型开始干活）：页面会把正在改的那一处交上来，这一小会儿还收
         if (editWas.current && !props.textEdit) editOffAt.current = Date.now()
@@ -1668,17 +2430,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 +2478,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 +2522,7 @@ window.__ModuleLoader__.load({
     }
 
     /** 设计规范面板：按组列出变量，点一个放进输入框 */
-    function TokensPanel({ t, tokens, onPick, onAsk, onRef, onClose }) {
+    function TokensPanel({ t, tokens, onPick, onAsk, onRef, onStyles, onSystems, 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 +2548,267 @@ 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,
+          onSystems ? h('button', { onClick: onSystems }, h(I.library), h('span', null, t('sysOpen'))) : 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 })))
+    }
+
+    // ── 调节滑块、品牌设计系统、转成代码 ─────────────────────────────────────
+
+    /** 滑块的值 → 写到页面上的样子（和服务端 tweaks.js 的 cssValue 一样） */
+    const tweakCss = (k, v) => (k.kind === 'range' ? `${v}${k.unit || ''}` : String(v))
+    const tweakShown = (k, v) => (k.kind === 'choice' ? ((k.options || []).find((o) => o.value === String(v)) || { label: v }).label : tweakCss(k, v))
+    const hasOwn = (o, k) => Object.prototype.hasOwnProperty.call(o, k)
+
+    /** 拖过的滑块（id → 值）→ 发给页面的 { vars, attrs }；没拖过的不发（页面用文件里的） */
+    function tweakMsg(list, live) {
+      const vars = {}
+      const attrs = {}
+      for (const k of list) {
+        if (!hasOwn(live, k.id)) continue
+        if (k.var) vars[k.var] = tweakCss(k, live[k.id])
+        else if (k.attr) attrs[k.attr] = String(live[k.id])
+      }
+      return { vars, attrs }
+    }
+
+    /** 拖过的滑块 → 交给模型的一段字 */
+    function formatTweaks(t, list, live) {
+      const rows = list.filter((k) => hasOwn(live, k.id)).map((k) => `- ${k.label}：${tweakShown(k, k.value)} → ${tweakShown(k, live[k.id])}（${k.var || k.attr}）`)
+      return t('twAskHead') + '\n' + rows.join('\n') + '\n'
+    }
+
+    /** 调节滑块面板：模型给这套设计做的几个维度（tweaks.json），拖的时候所有屏一起变，定下来写回文件或交给模型 */
+    function TweaksPanel({ t, tw, live, write, onSet, onReset, onAsk, onSave, onMake, onClose }) {
+      const head = h('header', null, h(I.dial), h('b', null, t('tweaks')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close)))
+      const box = (...kids) => h('div', { className: 'ddp-tokens ddp-style ddp-tw', onPointerDown: (e) => e.stopPropagation() }, head, ...kids)
+      const list = (tw && tw.list) || []
+      const errs = (tw && tw.errors) || []
+      if (!list.length) {
+        return box(h('div', { className: 'bd' }, h('div', { className: 'none' },
+          errs.length ? errs.map((e, i) => h('div', { key: i }, e)) : t('twEmpty'),
+          h('div', null, h('button', { className: 'ddp-go', onClick: () => onMake(errs) }, t(errs.length ? 'twFix' : 'twMake'))))))
+      }
+      const cur = (k) => (hasOwn(live, k.id) ? live[k.id] : k.value)
+      const row = (k) => {
+        const v = cur(k)
+        const lab = h('label', null, h('span', { title: k.var || k.attr }, k.label), h('em', { className: hasOwn(live, k.id) ? 'v' : '' }, tweakShown(k, v)))
+        const note = k.note ? h('div', { className: 'note' }, k.note) : null
+        if (k.kind === 'range') {
+          return h('div', { className: 'row', key: k.id }, lab,
+            h('input', { type: 'range', min: k.min, max: k.max, step: k.step, value: v, 'aria-label': k.label, onChange: (e) => onSet(k, Number(e.target.value)) }), note)
+        }
+        if (k.kind === 'color') {
+          return h('div', { className: 'row', key: k.id }, lab,
+            h('div', { className: 'chips' }, h('input', { type: 'color', value: /^#[0-9a-f]{6}$/i.test(v) ? v : '#000000', 'aria-label': k.label, onChange: (e) => onSet(k, e.target.value) })), note)
+        }
+        return h('div', { className: 'row', key: k.id }, lab,
+          h('div', { className: 'seg' }, ...(k.options || []).map((o) => h('button', { key: o.value, className: String(v) === o.value ? 'on' : '', onClick: () => onSet(k, o.value) }, o.label))), note)
+      }
+      const n = list.filter((k) => hasOwn(live, k.id)).length
+      return box(
+        h('p', { className: 'tip' }, t('twTip')),
+        h('div', { className: 'bd' }, ...list.map(row), errs.length ? h('div', { className: 'note', key: 'err' }, errs.join('；')) : null),
+        h('footer', { className: 'row' },
+          h('button', { onClick: onReset, disabled: !n }, h('span', null, t('styleReset'))),
+          h('button', { onClick: onAsk, disabled: !n, title: t('twAskTip') }, h('span', null, t('styleAsk'))),
+          h('button', { className: 'go', onClick: onSave, disabled: !n || !write.ok, title: write.tip }, h('span', null, t('styleSave')))))
+    }
+
+    async function getJson(path) {
+      const r = await fetch(API + path, { credentials: 'same-origin' })
+      const data = await r.json().catch(() => ({}))
+      if (!r.ok) throw new Error(data.error || `HTTP ${r.status}`)
+      return data
+    }
+
+    /** 品牌设计系统库：从用户的网站 / 项目提取的几套，默认那套以后做新设计都照它来。rev 变了（模型干完一轮）重新列 */
+    function SystemsPanel({ t, rev, hasDesign, onExtract, onApply, onSay, onClose }) {
+      const [data, setData] = useState(null)
+      const [err, setErr] = useState('')
+      const [src, setSrc] = useState('')
+      useEffect(() => {
+        let alive = true
+        getJson('systems').then((d) => { if (alive) { setData(d); setErr('') } }, (e) => { if (alive) setErr(e.message) })
+        return () => { alive = false }
+      }, [rev])
+      const setDef = (x, on) => post('systems', { id: x.id, default: on }).then((d) => { setData(d); onSay(on ? t('sysSetOk', { name: x.name }) : t('sysUnsetOk')) }, (e) => setErr(e.message))
+      const list = (data && data.systems) || []
+      const go = (e) => {
+        e.preventDefault()
+        const v = src.trim()
+        if (!v) return
+        onExtract(v)
+        setSrc('')
+      }
+      return h('div', { className: 'ddp-tokens ddp-sys', onPointerDown: (e) => e.stopPropagation() },
+        h('header', null, h(I.library), h('b', null, t('systems')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close))),
+        h('p', { className: 'tip' }, t('sysTip')),
+        h('div', { className: 'bd' },
+          err ? h('div', { className: 'none' }, err) : null,
+          data && !list.length ? h('div', { className: 'none' }, t('sysEmpty')) : null,
+          ...list.map((x) => h('div', { key: x.id, className: 'ddp-sysc' + (x.default ? ' def' : '') },
+            x.preview ? h('img', { src: `${API}systhumb?id=${encodeURIComponent(x.id)}&v=${x.createdAt || 0}`, alt: '', loading: 'lazy' }) : null,
+            h('div', { className: 'nm' }, h('b', { title: x.dir }, x.name), x.default ? h('span', null, t('sysDefault')) : null),
+            h('div', { className: 'sw' }, ...Object.entries(x.colors || {}).slice(0, 7).map(([k, v]) => h('i', { key: k, title: `${k} ${v}`, style: { background: v } })), x.font ? h('em', null, x.font) : null),
+            x.sources && x.sources.length ? h('small', { title: x.sources.join('\n') }, x.sources[0]) : null,
+            h('div', { className: 'acts' },
+              h('button', { onClick: () => setDef(x, !x.default) }, x.default ? t('sysUnset') : t('sysSet')),
+              hasDesign ? h('button', { onClick: () => onApply(x) }, t('sysApply')) : null)))),
+        h('footer', null,
+          h('form', { onSubmit: go },
+            h('input', { value: src, placeholder: t('sysPh'), 'aria-label': t('sysPh'), onChange: (e) => setSrc(e.target.value) }),
+            h('button', { type: 'submit', disabled: !src.trim() }, t('sysExtract')))))
+    }
+
+    const FW_LIST = ['react', 'vue', 'next', 'html']
+    const FW_LABEL = { react: 'React + Vite', vue: 'Vue 3 + Vite', next: 'Next.js' }
+
+    /** 转成代码：用什么做、放哪、转几屏；点了把一段话放进输入框，模型调 handoff_design 照交接包做，每屏做完 compare_design */
+    function HandoffPanel({ t, sid, root, fileTarget, count, cur, onGo, onClose }) {
+      const [info, setInfo] = useState(null)
+      const [fw, setFw] = useState('')
+      const [dest, setDest] = useState('')
+      const [one, setOne] = useState(false)
+      // 换了会话或设计目录就重新问：先清掉旧的（别把上一套设计的目标发出去）
+      useEffect(() => {
+        let alive = true
+        setInfo(null)
+        setDest('')
+        if (!root) return () => { alive = false }
+        getJson(`project?session=${encodeURIComponent(sid)}`).then((d) => {
+          if (!alive) return
+          setInfo(d)
+          setFw(d.project && d.project.pkg && d.project.framework ? 'same' : 'react')
+          setDest(d.root === root ? d.dest || '' : '')
+        }, () => { if (alive) setInfo({}) })
+        return () => { alive = false }
+      }, [sid, root])
+      const head = h('header', null, h(I.code), h('b', null, t('handoff')), h('button', { className: 'ddp-btn', title: '×', onClick: onClose }, h(I.close)))
+      const box = (...kids) => h('div', { className: 'ddp-tokens ddp-style ddp-ho', onPointerDown: (e) => e.stopPropagation() }, head, ...kids)
+      if (!fileTarget) return box(h('div', { className: 'bd' }, h('div', { className: 'none' }, t('hoProxy'))))
+      if (!info) return box(h('p', { className: 'tip' }, t('hoLoading')))
+      const p = info.project || {}
+      const same = p.pkg && p.framework
+      const opts = [...(same ? [['same', t('hoSame', { label: p.label })]] : []), ...FW_LIST.map((k) => [k, k === 'html' ? t('hoHtml') : FW_LABEL[k]])]
+      const label = (opts.find(([k]) => k === fw) || ['', ''])[1]
+      return box(
+        h('p', { className: 'tip' }, t('hoTip')),
+        h('div', { className: 'bd' },
+          h('div', { className: 'row' }, h('label', null, t('hoFw')),
+            ...opts.map(([k, l]) => h('button', { key: k, className: 'opt' + (fw === k ? ' on' : ''), onClick: () => setFw(k) }, h('i'), h('span', null, l)))),
+          h('div', { className: 'row' }, h('label', null, t('hoDest')),
+            h('input', { type: 'text', value: dest, spellCheck: false, 'aria-label': t('hoDest'), onChange: (e) => setDest(e.target.value) })),
+          count > 1 && cur ? h('div', { className: 'row' }, h('label', null, t('hoScope')),
+            h('div', { className: 'seg' },
+              h('button', { className: one ? '' : 'on', onClick: () => setOne(false) }, t('hoAll', { n: count })),
+              h('button', { className: one ? 'on' : '', onClick: () => setOne(true) }, t('hoOne')))) : null),
+        h('footer', null,
+          h('button', { className: 'go', disabled: !fw || !dest.trim(), onClick: () => onGo({ fw, label, dest: dest.trim(), only: one && count > 1 ? cur : '' }) }, h(I.code), h('span', null, t('hoGo')))))
     }
 
     /** 菜单开着时：点外面、按 Esc 关掉 */
@@ -1782,6 +2835,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 +2966,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 +3126,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 +3136,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,7 +3150,12 @@ 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 [pane, setPane] = useState('') // 右边的面板：tweaks 调节滑块、systems 品牌设计系统、handoff 转成代码
+      const [tw, setTw] = useState({}) // 拖过的滑块：id → 值（还没写进文件）
       const apis = useRef(new Map()) // 屏 → 截图用的接口
       const cmpRef = useRef(null)
       const [box, setBox] = useState({ w: 0, h: 0 })
@@ -2130,6 +3215,22 @@ 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
+
+      // 调节滑块：tweaks.json 改了（写回了、模型改了）就把和文件一样的值放掉；换了设计全放掉
+      const tweaks = (fileTarget && st.tweaks) || null
+      const tlist = (tweaks && tweaks.list) || []
+      const tsig = JSON.stringify(tlist.map((k) => [k.id, k.value]))
+      useEffect(() => {
+        setTw((c) => {
+          const out = {}
+          for (const [id, v] of Object.entries(c)) { const k = tlist.find((x) => x.id === id); if (k && String(k.value) !== String(v)) out[id] = v }
+          return Object.keys(out).length === Object.keys(c).length ? c : out
+        })
+      }, [tsig])
+      useEffect(() => { setTw({}) }, [site])
+      const tweak = Object.keys(tw).length ? tweakMsg(tlist, tw) : null
 
       // 看旧版本：画布上换成那一版的几屏（按现在的顺序，那一版独有的接在后面）
       const vbase = ver ? `${origin}/__dsh_design__/v/${ver.n}/` : ''
@@ -2218,7 +3319,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 +3357,7 @@ window.__ModuleLoader__.load({
       const togglePick = () => {
         if (picking) { setPicking(false); return }
         setTextEdit(false)
+        setStyleEdit(false)
         setPicking(true)
         if (!canvas) {
           // 单页：把焦点给页面，Esc 在页面里也管用
@@ -2267,20 +3369,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 +3525,19 @@ 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,
+          tweak: sc.v ? null : tweak,
+          onStylePick: (p) => onStylePick(sc, p),
+          onStyleCancel: () => setStyleEdit(false),
           dark,
           apis: apis.current,
           apiKey: ik(sc),
@@ -2391,16 +3555,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 +3587,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 +3667,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 +3713,128 @@ 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 oldOpen = !!(panel || styles || hist || phone || ck || styleEdit)
+      useEffect(() => { if (oldOpen) setPane('') }, [oldOpen])
+      const openPane = (p) => {
+        const next = pane === p ? '' : p
+        if (next) { setPanel(false); setStyles(false); setHist(false); setPhone(false); closeCheck(); setStyleEdit(false) }
+        setPane(next)
+      }
+      const setTweak = (k, v) => setTw((c) => {
+        if (String(k.value) === String(v)) { const out = { ...c }; delete out[k.id]; return out }
+        return { ...c, [k.id]: v }
+      })
+      const saveTweaks = async () => {
+        try {
+          // 带上拖的是哪套设计：请求路上会话换了设计，服务端就不写
+          const r = await post('tweak', { session: sid, root: st && st.target ? st.target.root : '', values: tw })
+          if (!r.ok) return say(r.reason === 'busy' ? t('styleBusyTip') : r.reason === 'moved' ? t('twMoved') : t('twNoWrite'))
+          if (r.missed && r.missed.length) say(t('twMissed', { names: r.missed.map((x) => x.label).join(t('sep')) }))
+          else showFlash(t('twSaved', { n: r.changed.length }))
+        } catch (e) {
+          say(t('failed', { msg: e.message }))
+        }
+      }
+      const doHandoff = ({ fw, label, dest, only }) => {
+        insert(t('hoText', {
+          fw: label,
+          key: fw,
+          dest,
+          scope: only ? t('hoScopeOne', { name: only }) : t('hoAll', { n: screens.length || 1 }),
+          only: only ? `，screens: ["${only}"]` : '',
+        }), 'insertedSend')
+        setPane('')
+      }
+      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 +3846,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,24 +3854,35 @@ 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' + (pane === 'tweaks' ? ' sel' : '') + (tlist.length && pane !== 'tweaks' ? ' has' : ''), title: t('tweaks'), disabled: !fileTarget || !!ver, onClick: () => openPane('tweaks') }, h(I.dial)),
+        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('button', { className: 'ddp-btn o2' + (pane === 'handoff' ? ' sel' : ''), title: t('handoff'), disabled: !url || !!ver, onClick: () => openPane('handoff') }, h(I.code)),
         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],
+          ['o2', I.dial, t('tweaks'), pane === 'tweaks', !fileTarget || !!ver, () => openPane('tweaks')],
+          ['o2', I.code, t('handoff'), pane === 'handoff', !url || !!ver, () => openPane('handoff')],
+          ['', I.library, t('systems'), pane === 'systems', false, () => openPane('systems')],
           anyDark || dark ? ['o1', I.moon, t('dark'), dark, false, () => setDark(!dark)] : null,
           ['o1', I.scan, t('phone'), phone, !url, togglePhone],
           ['o1', I.refresh, t('refresh'), false, false, reload],
           ['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) => {
@@ -2594,6 +3931,39 @@ window.__ModuleLoader__.load({
       })
       const root = (...kids) => h('div', rootProps, ...kids, dropLayer, fileInput)
 
+      // 调节滑块 / 品牌设计系统 / 转成代码（右边的面板）
+      const sidePane = () => {
+        if (pane === 'tweaks') {
+          return h(TweaksPanel, {
+            t,
+            tw: tweaks,
+            live: tw,
+            write: busy ? { ok: false, tip: t('styleBusyTip') } : { ok: true, tip: t('twSaveTip') },
+            onSet: setTweak,
+            onReset: () => setTw({}),
+            onAsk: () => insert(formatTweaks(t, tlist, tw), 'insertedSend'),
+            onSave: saveTweaks,
+            onMake: (errs) => insert(errs && errs.length ? t('twFixText', { errs: errs.join('；') }) + '\n' : t('twMakeText') + '\n', 'insertedSend'),
+            onClose: () => setPane(''),
+          })
+        }
+        if (pane === 'systems') {
+          return h(SystemsPanel, {
+            t,
+            rev: (st && st.turns) || 0,
+            hasDesign: !!url,
+            onExtract: (src) => insert(t('sysExtractText', { src }) + '\n', 'insertedSend'),
+            onApply: (x) => insert(t('sysApplyText', { name: x.name, dir: x.dir }) + '\n', 'insertedSend'),
+            onSay: say,
+            onClose: () => setPane(''),
+          })
+        }
+        if (pane === 'handoff') {
+          return h(HandoffPanel, { t, sid, root: fileTarget ? st.target.root : '', fileTarget, count: screens.length, cur: (curScreen && curScreen.key) || focus, onGo: doHandoff, onClose: () => setPane('') })
+        }
+        return null
+      }
+
       if (!url) {
         if (st ? st.loading : !waited) return root(h('div', { className: 'ddp-stage', ref: stageRef }))
         if (busy) {
@@ -2614,9 +3984,12 @@ 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')))),
+            h('p', { className: 'ddp-refline' }, t('refEmpty'), ' · ', h('button', { className: 'lk', onClick: pickRef }, t('refChoose'))),
+            h('p', { className: 'ddp-refline' }, t('sysEmptyLine'), ' · ', h('button', { className: 'lk', onClick: () => openPane('systems') }, t('sysOpen')))),
+          pane === 'systems' ? sidePane() : null,
           toast ? h('div', { className: 'ddp-toast' }, h('span', null, toast.text)) : null)
       }
 
@@ -2634,7 +4007,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,
@@ -2642,6 +4015,7 @@ window.__ModuleLoader__.load({
                     picking: false,
                     demo: isTop,
                     dark,
+                    tweak,
                     zoom: z,
                     reloadSeq,
                     onNav: isTop ? demoGo : undefined,
@@ -2668,7 +4042,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,
@@ -2676,6 +4050,7 @@ window.__ModuleLoader__.load({
               picking,
               textEdit,
               dark,
+              tweak,
               quietPick: true,
               zoom: z,
               reloadSeq,
@@ -2697,7 +4072,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 +4094,11 @@ window.__ModuleLoader__.load({
           kind,
           size,
           ghost,
-          picking: picking || textEdit,
+          picking: picking || textEdit || styleEdit,
           sel: sel || focus,
           labelOf,
+          reveal,
+          inset: ck || styleEdit || panel || styles || pane ? 296 : 0, // 右边的面板 276 宽，离边 10
           render: (sc, z) => renderScreen(sc, z, false),
           flows,
           onSelect: setSel,
@@ -2730,16 +4107,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 || pane) && 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 +4128,24 @@ 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 || pane) && 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) }, onSystems: () => openPane('systems'), onClose: () => setPanel(false) }) : null,
+          pane ? sidePane() : 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 +4244,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
   },
 })